* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ================================
   PAGE TOP
================================ */

.page-top {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f5f8ff 20%,
        #b6bbf2 55%,
        #3b82f6 100%
    );
}


/* ================================
   NOTICE BOARD
================================ */

.notice-section {
    width: 100%;
    padding: 12px 20px 0;
}


/* Notice Board */

.notice-board {
    width: 100%;
    max-width: 1300px;
    min-height: 52px;

    margin: 0 auto;
    padding: 8px 18px;

    display: flex;
    align-items: center;
    gap: 18px;

    background: rgba(255, 255, 255, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 4px 18px rgba(29, 78, 216, 0.08);

    overflow: hidden;
}


/* ================================
   NOTICE LABEL
================================ */

.notice-label {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 6px 13px;

    background: rgba(255, 255, 255, 0.55);

    border: 1px solid rgba(29, 78, 216, 0.18);
    border-radius: 20px;

    color: #1d4ed8;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;
}


/* Notice Icon */

.notice-label span {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
}


/* ================================
   NOTICE CONTENT
================================ */

.notice-content {
    flex: 1;
    min-width: 0;

    overflow: hidden;
}


/* Moving Notice Track */

.notice-track {
    width: max-content;

    animation: noticeMoving 16s linear infinite;
}


/* Notice Text */

.notice-track p {
    margin: 0;

    white-space: nowrap;

    color: #1f2937;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 16px;
    font-weight: 500;

    line-height: 1.5;
}


/* Notice Animation */

@keyframes noticeMoving {

    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }

}


/* ================================
   NAVBAR
================================ */

/* =================================
   NAVBAR
================================= */
/* =================================
   NAVBAR
================================= */

.navbar {
    width: 100%;
    background: transparent;
}


/* =================================
   NAV CONTAINER
================================= */

.nav-container {
    width: 100%;
    max-width: 1302px;

    margin: 0 auto;
    padding: 2px 0;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;
    gap: 30px;
}


/* =================================
   LOGO + TEXT
================================= */

.logo {
    justify-self: start;
}


.logo a {
    display: flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;
    color: black;
}


.logo img {
    width: 80px;
    height: 80px;

    object-fit: contain;
}


.logo span {
    font-size: 22px;
    font-weight: 600;
}


/* =================================
   SEARCH - DESKTOP
================================= */

.course-search {
    width: 320px;
    height: 48px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    background: #f5f7f6;

    border: 1px solid #1d4ed8;
    border-radius: 25px;

    box-sizing: border-box;
}


.search-icon {
    width: 24px;
    height: 24px;

    margin-right: 10px;

    flex-shrink: 0;
}


.course-search input {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 16px;
}

/* =================================
   MODERN COURSE SEARCH
================================= */

.course-search {
  position: relative;
  z-index: 1000;
}


/* =================================
   SUGGESTION BOX
================================= */

.course-search-suggestions {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  width: 390px;
  max-width: calc(100vw - 30px);

  max-height: 420px;
  overflow-y: auto;

  padding: 8px;

  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(29, 78, 216, 0.15);
  border-radius: 18px;

  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.14),
    0 4px 15px rgba(29, 78, 216, 0.08);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;

  z-index: 99999;
}

.course-search-suggestions.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}


/* =================================
   SUGGESTION ITEM
================================= */

.search-suggestion {
  position: relative;

  width: 100%;
  min-height: 74px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 9px;

  border: none;
  border-radius: 13px;

  background: transparent;

  text-align: left;
  cursor: pointer;

  font-family: "Hind Siliguri", sans-serif;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.search-suggestion:hover {
  background: linear-gradient(
    135deg,
    rgba(29, 78, 216, 0.08),
    rgba(99, 102, 241, 0.05)
  );

  transform: translateX(2px);
}


/* =================================
   COURSE IMAGE
================================= */

.search-suggestion-image {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  object-fit: cover;

  border-radius: 11px;

  background: linear-gradient(
    135deg,
    #dbeafe,
    #e0e7ff
  );

  border: 1px solid rgba(29, 78, 216, 0.08);
}


/* =================================
   CONTENT
================================= */

.search-suggestion-content {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* =================================
   CATEGORY
================================= */

.search-suggestion-category {
  max-width: 100%;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 11px;
  line-height: 1.3;

  font-weight: 600;

  color: #1d4ed8;

  text-transform: uppercase;
  letter-spacing: 0.3px;
}


/* =================================
   COURSE TITLE
================================= */

.search-suggestion-title {
  display: block;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 15px;
  line-height: 1.35;

  font-weight: 700;

  color: #111827;
}


/* =================================
   DESCRIPTION
================================= */

.search-suggestion-description {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;

  overflow: hidden;

  font-size: 12px;
  line-height: 1.4;

  color: #6b7280;
}


/* =================================
   NO RESULT
================================= */

.search-no-result {
  padding: 22px 15px;

  text-align: center;

  font-family: "Hind Siliguri", sans-serif;
  font-size: 14px;

  color: #6b7280;
}


/* =================================
   SCROLLBAR
================================= */

.course-search-suggestions::-webkit-scrollbar {
  width: 5px;
}

.course-search-suggestions::-webkit-scrollbar-track {
  background: transparent;
}

.course-search-suggestions::-webkit-scrollbar-thumb {
  background: rgba(29, 78, 216, 0.25);
  border-radius: 10px;
}


/* =================================
   MOBILE
================================= */

@media (max-width: 768px) {

  .course-search-suggestions {
    width: 100%;
    max-width: 100%;

    top: calc(100% + 7px);

    border-radius: 15px;

    max-height: 360px;
  }

  .search-suggestion {
    min-height: 68px;
  }

  .search-suggestion-image {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .search-suggestion-title {
    font-size: 14px;
  }

  .search-suggestion-description {
    font-size: 11px;
  }

}

/* =================================
   MENU - DESKTOP
================================= */

.main-menu {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.main-menu a {
    text-decoration: none;

    color: #222;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 19px;
    font-weight: 600;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.main-menu a:hover {
    color: #1d4ed8;
}


/* =================================
   MOBILE TOGGLE - DESKTOP HIDDEN
================================= */

.mobile-menu-toggle {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    /* =================================
       NAVBAR
    ================================= */

    /* .navbar {
        width: 100%;

        position: relative;

        z-index: 9999;
    } */
    .navbar {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        z-index: 9999;

        background: transparent;

        transition:
            transform 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;
    }

    /* Scroll করলে fixed navbar */
    .navbar.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        background: #ffffff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    /* নিচে scroll করলে hide */
    .navbar.scroll-hide {
        transform: translateY(-100%);
    }

    /* =================================
       NAV CONTAINER
    ================================= */

    .nav-container {
        width: 100%;
        max-width: 100%;

        height: 65px;

        margin: 0;
        padding: 5px 15px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 0;

        position: relative;

        box-sizing: border-box;

        z-index: 9999;
    }


    /* =================================
       LOGO
    ================================= */

    .logo {
        flex: 1;
        min-width: 0;

        justify-self: unset;
    }


    .logo a {
        display: flex;
        align-items: center;

        gap: 6px;

        white-space: nowrap;
    }


    .logo img {
        width: 55px;
        height: 55px;

        flex-shrink: 0;
    }


    .logo span {
        font-size: 17px;
        font-weight: 600;

        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* =================================================
       TOGGLE BUTTON
    ================================================= */

    .mobile-menu-toggle {

        display: flex;

        align-items: center;
        justify-content: center;

        width: 45px;
        height: 45px;

        margin-left: 10px;
        padding: 0;

        border: none;
        outline: none;

        background: transparent;

        font-size: 30px;
        line-height: 1;

        cursor: pointer;

        flex-shrink: 0;

        position: relative;

        /*
         * VERY HIGH
         * Search/menu can never cover it
         */
        z-index: 10000;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }


    .mobile-menu-toggle:hover {
        transform: scale(1.05);
    }


    .mobile-menu-toggle:active {
        transform: scale(0.94);
    }


    /* =================================================
       MOBILE DRAWER BASE
    ================================================= */

    .course-search,
    .main-menu {

        position: fixed;

        right: 0;

        /*
         * Drawer width
         */
        width: 66.666667%;

        box-sizing: border-box;

        background: #ffffff;

        /*
         * CLOSED
         */
        transform: translateX(110%);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        /*
         * Below toggle
         */
        z-index: 9000;

        transition:
            transform 0.55s cubic-bezier(.77, 0, .175, 1),
            opacity 0.35s ease,
            visibility 0s linear 0.55s;
    }


    /* =================================================
       SEARCH BOX

       JS dynamically calculates:

       Toggle bottom + 2px

       So it starts exactly 2px
       underneath the toggle.
    ================================================= */

    .course-search {

        top: var(--mobile-drawer-top, 57px);

        /*
         * SMALLER SEARCH BOX
         */
        height: 46px;

        margin: 0;

        padding: 0 12px;

        display: flex;

        align-items: center;

        background: #ffffff;

        border: none;

        /*
         * Smaller rounded corner
         */
        border-radius: 12px 0 0 0;

        box-shadow:
            -8px 0 25px rgba(0, 0, 0, 0.07);

        z-index: 9002;

        transition:
            transform 0.55s cubic-bezier(.77, 0, .175, 1),
            opacity 0.35s ease,
            visibility 0s linear 0s;
    }


    /* =================================
       SEARCH ICON
    ================================= */

    .course-search .search-icon {

        width: 19px;
        height: 19px;

        margin-right: 7px;

        flex-shrink: 0;
    }


    /* =================================
       SEARCH INPUT
    ================================= */

    .course-search input {

        width: 100%;
        height: 100%;

        padding: 0;

        border: none;
        outline: none;

        background: transparent;

        font-size: 14px;

        color: #222;

        box-sizing: border-box;
    }


    .course-search input::placeholder {
        color: #777;
    }


    /* =================================================
       MENU

       Search starts:
       --mobile-drawer-top

       Search height:
       46px

       JS will calculate menu position.
    ================================================= */

    .main-menu {

        top: var(--mobile-menu-top, 105px);

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        margin: 0;

        padding: 5px 0 12px;

        background: #ffffff;

        border: none;

        border-radius: 0 0 0 14px;

        box-shadow:
            -8px 12px 28px rgba(0, 0, 0, 0.07);

        z-index: 9001;

        transition:
            transform 0.55s cubic-bezier(.77, 0, .175, 1),
            opacity 0.35s ease,
            visibility 0s linear 0s;
    }


    /* =================================================
       MENU ITEMS
    ================================================= */

    .main-menu li {

        width: 100%;

        opacity: 0;

        transform: translateX(25px);

        transition:
            opacity 0.35s ease,
            transform 0.4s cubic-bezier(.4, 0, .2, 1);
    }


    /* =================================================
       MENU LINKS
    ================================================= */

    .main-menu a {

        display: flex;

        align-items: center;

        width: 100%;

        min-height: 44px;

        padding: 8px 16px;

        box-sizing: border-box;

        font-family: "Hind Siliguri", sans-serif;

        font-size: 16px;

        font-weight: 600;

        color: #222;

        text-decoration: none;

        border-radius: 8px;

        transition:
            color 0.25s ease,
            background 0.25s ease,
            padding-left 0.25s ease,
            transform 0.25s ease;
    }


    .main-menu a:hover {

        color: #1d4ed8;

        background: #f5f7ff;

        padding-left: 22px;

        transform: translateX(-2px);
    }


    /* =================================================
       OPEN SEARCH
    ================================================= */

    .course-search.mobile-active {

        transform: translateX(0);

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        z-index: 9002;
    }


    /* =================================================
       OPEN MENU
    ================================================= */

    .main-menu.mobile-active {

        transform: translateX(0);

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        z-index: 9001;
    }


    /* =================================================
       MENU ITEM ANIMATION
    ================================================= */

    .main-menu.mobile-active li {

        opacity: 1;

        transform: translateX(0);
    }


    .main-menu.mobile-active li:nth-child(1) {
        transition-delay: 0.18s;
    }


    .main-menu.mobile-active li:nth-child(2) {
        transition-delay: 0.23s;
    }


    .main-menu.mobile-active li:nth-child(3) {
        transition-delay: 0.28s;
    }


    .main-menu.mobile-active li:nth-child(4) {
        transition-delay: 0.33s;
    }


    .main-menu.mobile-active li:nth-child(5) {
        transition-delay: 0.38s;
    }


    .main-menu.mobile-active li:nth-child(6) {
        transition-delay: 0.43s;
    }


    .main-menu.mobile-active li:nth-child(7) {
        transition-delay: 0.48s;
    }


    .main-menu.mobile-active li:nth-child(8) {
        transition-delay: 0.53s;
    }


    /* =================================================
       IMPORTANT

       REMOVE OLD :has() ROTATION

       JS itself changes ☰ → ✕
    ================================================= */

    .mobile-menu-toggle:has(+ .course-search.mobile-active) {

        transform: none;
    }


    /* =================================================
       EXTRA SMALL DEVICES
    ================================================= */

    @media (max-width: 400px) {

        /* =================================
           NAV CONTAINER
        ================================= */

        .nav-container {

            height: 62px;

            padding: 4px 12px;
        }


        /* =================================
           LOGO
        ================================= */

        .logo img {

            width: 50px;
            height: 50px;
        }


        .logo span {

            font-size: 15px;
        }


        /* =================================
           TOGGLE
        ================================= */

        .mobile-menu-toggle {

            width: 42px;
            height: 42px;

            font-size: 27px;

            z-index: 10000;
        }


        /* =================================
           DRAWER WIDTH
        ================================= */

        .course-search,
        .main-menu {

            width: 66.666667%;
        }


        /* =================================
           SMALL SEARCH
        ================================= */

        .course-search {

            /*
             * JS will calculate exact position
             * automatically.
             */
            top: var(--mobile-drawer-top, 54px);

            height: 44px;

            padding: 0 11px;

            border-radius: 11px 0 0 0;
        }


        .course-search .search-icon {

            width: 18px;
            height: 18px;

            margin-right: 6px;
        }


        .course-search input {

            font-size: 13px;
        }


        /* =================================
           MENU
        ================================= */

        .main-menu {

            top: var(--mobile-menu-top, 100px);

            padding: 4px 0 10px;

            border-radius: 0 0 0 12px;
        }


        .main-menu a {

            min-height: 42px;

            padding: 7px 14px;

            font-size: 15px;
        }
    }
}
/* ================================
   SIGNUP / LOGIN
================================ */

/* .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


.login-signup-btn {
    padding: 10px 18px;

    border-radius: 8px;

    border: 1px solid #1d4ed8;

    text-decoration: none;

    font-family: "Hind Siliguri", sans-serif;

    font-size: 16px;

    font-weight: 600;

    background: transparent;

    transition: 0.3s;
}


.login-signup-btn {
    color: #010406;
}


.login-signup-btn:hover {
    opacity: 0.85;

    background: #ffffff;

    color: #1d4ed8;
} */


/* ================================
   HERO
================================ */

.hero {
    width: 100%;
    min-height: 650px;

    background: transparent;

    position: relative;

    /* এখন overflow hidden রাখছি না */
    overflow: visible;
}


/* ================================
   HERO CONTAINER
================================ */

.hero-container {
    width: 100%;
    max-width: 1400px;

    min-height: 650px;

    margin: 0 auto;
    padding: 60px 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


/* ================================
   LEFT SIDE
================================ */

.hero-content {
    flex: 1;
    min-width: 0;
}


/* ================================
   BADGE
================================ */

.hero-badge {
    display: inline-block;

    padding: 9px 18px;
    margin-bottom: 25px;

    color: #050606;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #f5f8ff 20%,
        #b6bbf2 55%,
        #3b82f6 100%
    );

    border: 1px solid #c9eddf;
    border-radius: 30px;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 16px;
    font-weight: 600;
}


/* ================================
   HEADING
================================ */

.hero-content h1 {
    margin: 0 0 20px;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 60px;
    line-height: 1.2;

    color: #010406;

    overflow: visible;
}


.hero-content h1 span {
    display: block;

    line-height: 1.7;

    background: linear-gradient(
        90deg,
        #3b82f6 40%,
        #b6bbf2 100%
    );

    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    /* যাতে কোনোভাবে text crop না হয় */
    overflow: visible;
}


/* ================================
   DESCRIPTION
================================ */

.hero-description {
    max-width: 650px;

    margin: 0 0 32px;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 19px;
    line-height: 1.7;

    color: #596579;
}


/* ================================
   BUTTONS
================================ */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 35px;
}


.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 170px;

    padding: 13px 24px;

    border-radius: 9px;

    text-decoration: none;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 17px;
    font-weight: 600;

    transition: 0.3s ease;
}


/* ================================
   PRIMARY BUTTON
================================ */

.primary-btn {
    background: #3b82f6;
    color: #ffffff;

    border: 1px solid #b6bbf2;
}


.primary-btn:hover {
    background: #b6bbf2;
    color: #000000;

    border-color: #1d4ed8;

    transform: translateY(-2px);
}


/* ================================
   SECONDARY BUTTON
================================ */

.secondary-btn {
    background: #ffffff;
    color: #3b82f6;

    border: 1px solid #3b82f6;
}


.secondary-btn:hover {
    background: #b6bbf2;
    color: #000000;

    transform: translateY(-2px);
}


/* ================================
   BENEFITS
================================ */

.hero-benefits {
    display: flex;
    align-items: center;

    gap: 25px;
}


.benefit-item {
    display: flex;
    align-items: center;

    gap: 7px;
}


.benefit-item span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    background: #1d4ed8;
    color: #ffffff;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 700;
}


.benefit-item p {
    margin: 0;

    font-family: "Hind Siliguri", sans-serif;
    font-size: 15px;
    font-weight: 500;

    color: #475569;
}


/* ================================
   RIGHT SIDE
================================ */

.hero-visual {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


.hero-visual img {
    width: 100%;
    max-width: 500px;

    height: auto;

    display: block;

    animation: floating 4s ease-in-out infinite;
}


/* ================================
   FLOATING ANIMATION
================================ */

@keyframes floating {

    0% {
        transform: translateY(0) scaleX(-1);
    }

    50% {
        transform: translateY(-15px) scaleX(-1);
    }

    100% {
        transform: translateY(0) scaleX(-1);
    }

}
/* =========================================================
   HERO — MOBILE RESPONSIVE DESIGN
   ---------------------------------------------------------
   Mobile Range:
   380px → 700px

   IMPORTANT:
   এখানে আলাদা আলাদা device-এর জন্য বারবার CSS লেখা হয়নি।
   clamp(), minmax() এবং responsive grid ব্যবহার করা হয়েছে।
   ========================================================= */


/* =========================================================
   01. MOBILE HERO MAIN AREA
   ========================================================= */

@media (max-width: 700px) {

    .hero {
        width: 100%;
        min-height: auto;

        position: relative;

        /*
         * Mobile background-এর বাইরে কিছু বের হলে
         * horizontal scroll বন্ধ রাখবে
         */
        overflow: hidden;
    }


    /* =====================================================
       02. HERO CONTAINER
       -----------------------------------------------------
       LEFT  = Text
       RIGHT = Image
       ===================================================== */

    .hero-container {

        width: 100%;
        max-width: 700px;

        min-height: auto;

        margin: 0 auto;

        /*
         * এখানে padding responsive।
         * Screen বড় হলে padding একটু বাড়বে।
         */
        padding:
            clamp(22px, 5vw, 42px)
            clamp(14px, 4vw, 35px)
            clamp(28px, 5vw, 45px);

        display: grid;

        /*
         * LEFT SIDE  → content
         * RIGHT SIDE → image

         * minmax(0, ...) ব্যবহারের কারণে
         * text বড় হলেও grid ভেঙে যাবে না।
         */
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(0, 0.88fr);

        align-items: center;

        gap: clamp(5px, 2vw, 20px);
    }



    /* =====================================================
       03. LEFT SIDE — ALL TEXT CONTENT
       ===================================================== */

    .hero-content {

        width: 100%;

        min-width: 0;

        position: relative;

        z-index: 10;
    }



    /* =====================================================
       04. HERO BADGE / SMALL TOP BOX
       -----------------------------------------------------
       এই অংশের size পরিবর্তন করতে চাইলে:
       শুধু font-size / padding পরিবর্তন করবে।
       ===================================================== */

    .hero-badge {

        display: inline-block;

        width: fit-content;

        max-width: 100%;

        padding:
            clamp(5px, 1.5vw, 9px)
            clamp(8px, 2vw, 15px);

        margin-bottom:
            clamp(12px, 3vw, 20px);

        border-radius:
            clamp(12px, 3vw, 20px);

        /*
         * Badge text responsive size
         */
        font-size:
            clamp(9px, 2.2vw, 14px);

        line-height: 1.35;

        /*
         * Text বাড়ালে box-এর বাইরে যাবে না
         */
        overflow-wrap: anywhere;

        word-break: break-word;
    }



    /* =====================================================
       05. MAIN HEADING
       -----------------------------------------------------
       "শিখুন নতুন স্কিল,"
       "গড়ুন আপনার ভবিষ্যৎ"

       এই heading-এর size এখানে control করবে।

       যদি heading বড় করতে চাও:
       30px → 34px

       যদি ছোট করতে চাও:
       30px → 27px
       ===================================================== */

    .hero-content h1 {

        width: 100%;

        margin: 0 0
            clamp(15px, 2.5vw, 30px);

        /*
         * Mobile heading responsive।

         * 380px screen-এ ছোট
         * 700px screen-এ বড়

         * মাঝের 7vw automatically adjust করবে।
         */
        font-size:
            clamp(25px, 7vw, 46px);

        line-height: 1.12;

        letter-spacing: -0.5px;

        /*
         * Long Bengali text safe
         */
        overflow-wrap: break-word;

        word-wrap: break-word;
    }



    /* =====================================================
       06. GRADIENT HEADING TEXT
       -----------------------------------------------------
       "গড়ুন আপনার ভবিষ্যৎ"

       এটা আলাদা line থাকবে।
       ===================================================== */

    .hero-content h1 span {

        display: block;

        width: 100%;

        margin-top:
            clamp(5px, 0.8vw, 10px);

        line-height: 1.18;

        /*
         * Gradient text crop বন্ধ
         */
        overflow: visible;

        overflow-wrap: break-word;

        word-break: normal;
    }



    /* =====================================================
       07. HEADING TEXT BOX FEEL
       -----------------------------------------------------
       Heading-এর দুই অংশকে visual block-এর মতো দেখাবে।

       HTML পরিবর্তন না করেই h1 এবং span-এর মাধ্যমে
       clean spacing তৈরি করা হয়েছে।
       ===================================================== */

    .hero-content h1 {

        padding-left:
            clamp(0px, 0.5vw, 4px);
    }

    .hero-content h1 span {

        padding-left:
            clamp(0px, 0.5vw, 4px);
    }



    /* =====================================================
       08. DESCRIPTION TEXT
       -----------------------------------------------------
       Course section-এর মতো readable কিন্তু mobile-এর
       জন্য responsive রাখা হয়েছে।

       Text বাড়ালে height automatically বাড়বে।
       ===================================================== */

    .hero-description {

        width: 100%;

        max-width: 100%;

        margin: 0 0
            clamp(14px, 3vw, 24px);

        font-size:
            clamp(11px, 2.8vw, 17px);

        line-height: 1.55;

        color: #596579;

        /*
         * Text যত বড় হোক container নিজে height নেবে
         */
        overflow-wrap: break-word;

        word-wrap: break-word;
    }



    /* =====================================================
       09. BUTTON AREA
       -----------------------------------------------------
       Button দুটো left side-এর width অনুযায়ী থাকবে।
       ===================================================== */

    .hero-buttons {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap:
            clamp(10px, 1.8vw, 18px);

        margin-bottom: 0;
    }



    /* =====================================================
       10. HERO BUTTON
       -----------------------------------------------------
       "কোর্স দেখুন →"
       "ফ্রি লাইভ ক্লাস →"

       Button size এখানে control করবে।
       ===================================================== */

    .hero-btn {

        width: 100%;

        min-width: 0;

        min-height:
            clamp(36px, 9vw, 48px);

        padding:
            clamp(6px, 1.8vw, 12px)
            clamp(8px, 2vw, 18px);

        border-radius:
            clamp(6px, 1.5vw, 10px);

        font-size:
            clamp(12px, 3vw, 17px);

        line-height: 1.25;

        white-space: normal;

        text-align: center;

        /*
         * Button-এর text বড় হলেও crack হবে না
         */
        overflow-wrap: break-word;
    }



    /* =====================================================
       11. RIGHT SIDE — IMAGE AREA
       -----------------------------------------------------
       ⭐ IMAGE DESIGN SECTION ⭐

       Image-এর position / size পরিবর্তন করতে চাইলে
       মূলত নিচের অংশগুলো adjust করবে:

       max-width
       transform
       padding
       ===================================================== */

    .hero-visual {

        width: 100%;

        min-width: 0;

        min-height:
            clamp(230px, 55vw, 390px);

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        z-index: 2;

        /*
         * Image-এর CSS design-এর জন্য
         * pseudo element ব্যবহার করা হয়েছে।
         */
        isolation: isolate;

        overflow: visible;
    }



    /* =====================================================
       12. IMAGE BACKGROUND — CUSTOM CSS DESIGN
       -----------------------------------------------------
       ⭐ এই অংশটি শুধু IMAGE-এর পিছনের design-এর জন্য ⭐

       এখানে:
       - soft circle
       - purple glow
       - blue glow
       - layered background

       তৈরি হচ্ছে।

       Image নিজে transparent হলে এই design
       image-এর পিছনে সুন্দরভাবে দেখা যাবে।
       ===================================================== */

    .hero-visual::before {

        content: "";

        position: absolute;

        width:
            clamp(190px, 55vw, 370px);

        height:
            clamp(190px, 55vw, 370px);

        top: 50%;

        left: 50%;

        transform:
            translate(-42%, -50%);

        border-radius: 50%;

        /*
         * Layered custom background
         */
        background:
            radial-gradient(
                circle at 65% 35%,
                rgba(182, 187, 242, 0.85) 0%,
                rgba(182, 187, 242, 0.55) 35%,
                rgba(59, 130, 246, 0.18) 65%,
                transparent 75%
            );

        filter: blur(1px);

        z-index: -3;

        pointer-events: none;
    }



    /* =====================================================
       13. IMAGE SECONDARY CIRCLE
       -----------------------------------------------------
       ⭐ IMAGE-এর পিছনের দ্বিতীয় layer ⭐
       ===================================================== */

    .hero-visual::after {

        content: "";

        position: absolute;

        width:
            clamp(130px, 38vw, 270px);

        height:
            clamp(130px, 38vw, 270px);

        top: 52%;

        left: 55%;

        transform:
            translate(-50%, -50%);

        border-radius: 50%;

        background:
            rgba(174, 151, 255, 0.18);

        border:
            1px solid rgba(255, 255, 255, 0.35);

        box-shadow:
            0 0 45px rgba(123, 97, 255, 0.12);

        z-index: -2;

        pointer-events: none;
    }



    /* =====================================================
       14. IMAGE ITSELF
       -----------------------------------------------------
       ⭐ MAIN IMAGE SIZE SECTION ⭐

       তুমি যদি image:

       বড় করতে চাও →
       max-width বাড়াবে

       ছোট করতে চাও →
       max-width কমাবে

       Example:

       240px → বড়
       210px → ছোট

       ===================================================== */

    .hero-visual img {

        display: block;

        width: min(
            100%,
            clamp(140px, 42vw, 280px)
        );

        max-width:
            240px;

        height: auto;

        object-fit: contain;

        position: relative;

        z-index: 5;

        /*
         * Image right side-এ সামান্য বসানো
         */
        transform:
            translateX(
                clamp(3px, 1.5vw, 12px)
            );

        /*
         * Image floating animation
         */
        animation:
            mobile-hero-floating
            4s ease-in-out infinite;
    }



    /* =====================================================
       15. IMAGE FLOATING ANIMATION
       ===================================================== */

    @keyframes mobile-hero-floating {

        0% {
            transform:
                translate(
                    clamp(3px, 1.5vw, 12px),
                    0
                )
                scaleX(-1);
        }

        50% {
            transform:
                translate(
                    clamp(3px, 1.5vw, 12px),
                    -7px
                )
                scaleX(-1);
        }

        100% {
            transform:
                translate(
                    clamp(3px, 1.5vw, 12px),
                    0
                )
                scaleX(-1);
        }
    }



    /* =====================================================
       16. SMALL DECORATIVE DOTS
       -----------------------------------------------------
       ⭐ IMAGE-এর পিছনের ছোট decorative dots ⭐

       HTML-এ নতুন কিছু add করতে হবে না।
       ===================================================== */

    .hero-visual {
        background-image:
            radial-gradient(
                circle at 18% 25%,
                rgba(59, 130, 246, 0.55) 0 4px,
                transparent 5px
            ),
            radial-gradient(
                circle at 78% 20%,
                rgba(139, 92, 246, 0.60) 0 4px,
                transparent 5px
            ),
            radial-gradient(
                circle at 22% 76%,
                rgba(96, 165, 250, 0.45) 0 7px,
                transparent 8px
            );
    }



    /* =====================================================
       17. BENEFITS — THREE BOXES
       -----------------------------------------------------
       ⭐ Practical Learning
       ⭐ Live Support
       ⭐ Live Classes

       তিনটা card পাশাপাশি থাকবে।
       ===================================================== */

    .hero-benefits {

        width: 100%;

        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:
            clamp(7px, 2vw, 14px);

        margin-top:
            clamp(18px, 4vw, 30px);
    }



    /* =====================================================
       18. BENEFIT BOX
       -----------------------------------------------------
       ⭐ এই অংশ card design-এর জন্য ⭐
       ===================================================== */

    .benefit-item {

        min-width: 0;

        min-height:
            clamp(78px, 20vw, 115px);

        padding:
            clamp(9px, 2vw, 15px)
            clamp(5px, 1.5vw, 10px);

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap:
            clamp(5px, 1.5vw, 8px);

        background:
            rgba(255, 255, 255, 0.78);

        border:
            1px solid rgba(255, 255, 255, 0.8);

        border-radius:
            clamp(9px, 2.5vw, 15px);

        box-shadow:
            0 5px 20px
            rgba(59, 130, 246, 0.08);

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        text-align: center;
    }



    /* =====================================================
       19. BENEFIT CHECK ICON
       ===================================================== */

    .benefit-item span {

        flex-shrink: 0;

        width:
            clamp(19px, 5vw, 27px);

        height:
            clamp(19px, 5vw, 27px);

        display: flex;

        align-items: center;

        justify-content: center;

        background:
            #1d4ed8;

        color:
            #ffffff;

        border-radius: 50%;

        font-size:
            clamp(10px, 2.5vw, 14px);

        font-weight: 700;
    }



    /* =====================================================
       20. BENEFIT TEXT
       -----------------------------------------------------
       ⭐ Practical Learning / Live Support /
          Live Classes-এর text size ⭐

       এখানে text size course/free-course section-এর
       সাথে visually balanced রাখা হয়েছে।
       ===================================================== */

    .benefit-item p {

        width: 100%;

        margin: 0;

        font-family:
            "Hind Siliguri",
            sans-serif;

        font-size:
            clamp(10px, 2.6vw, 15px);

        font-weight: 500;

        line-height: 1.3;

        color:
            #475569;

        text-align: center;

        overflow-wrap: break-word;
    }

}

/* =========================================================
   FREE COURSES SECTION
   ========================================================= */

.free-courses {
  --fc-primary: #2563eb;
  --fc-primary-dark: #1d4ed8;
  --fc-bg: #f8fbff;
  --fc-card-bg: #ffffff;
  --fc-text: #111827;
  --fc-muted: #64748b;
  --fc-border: rgba(37, 99, 235, 0.10);
  --fc-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);

  width: 100%;
  max-width: 1350px;
  height: auto;

  margin: 0 auto;
  padding: 20px 20px 80px;

  box-sizing: border-box;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.free-courses-header {
  width: 100%;
  max-width: 760px;

  margin: 0 auto 45px;

  text-align: center;
}


.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 17px;

  border-radius: 999px;

  background: rgba(37, 99, 235, 0.08);

  color: var(--fc-primary);

  font-family: "Inter", "Hind Siliguri", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;

  white-space: nowrap;
}


.free-courses-header h2 {
  margin: 18px 0 12px;

  color: var(--fc-text);

  font-family: "Hind Siliguri", "Inter", sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.18;

  letter-spacing: -0.5px;
}


.free-courses-header h2 span {
  color: var(--fc-primary);
}


.free-courses-header p {
  max-width: 650px;

  margin: 0 auto;

  color: var(--fc-muted);

  font-family: "Hind Siliguri", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
}


/* =========================================================
   SLIDER VIEWPORT
   ========================================================= */

.free-courses-container {
  position: relative;

  width: 100%;
  height: auto;

  box-sizing: border-box;

  padding: 28px 48px;

  border: 1px solid var(--fc-border);
  border-radius: 26px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(248, 251, 255, 0.98)
    );

  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.06);

  overflow: hidden;
}


/* =========================================================
   SLIDER TRACK
   ========================================================= */

.free-courses-list {
  display: flex;
  align-items: stretch;

  width: max-content;

  gap: 24px;

  /*
    JS দিয়ে transform করা হবে।
    Example:

    transform: translateX(-604px);
  */

  transform: translateX(0);

  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}


/* =========================================================
   COURSE CARD
   ========================================================= */

.free-course-card {
  position: relative;

  flex: 0 0 610px;

  width: 610px;
  height: 400px;

  display: flex;
  flex-direction: row;

  overflow: hidden;

  box-sizing: border-box;

  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;

  background: var(--fc-card-bg);

  box-shadow:
    0 8px 25px rgba(15, 23, 42, 0.07);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.free-course-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 16px 35px rgba(15, 23, 42, 0.12);
}


/* =========================================================
   COURSE IMAGE
   ========================================================= */

.free-course-image {
  position: relative;

  flex: 0 0 320px;

  width: 320px;
  height: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #eff6ff
    );
}


.free-course-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}


.free-course-card:hover
.free-course-image img {
  transform: scale(1.045);
}


/* =========================================================
   LIVE BADGE
   ========================================================= */

.live-badge {
  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 11px;

  border-radius: 7px;

  background: #ef4444;

  color: #ffffff;

  font-family: "Inter", "Hind Siliguri", sans-serif;
  font-size: 11px;
  font-weight: 700;

  line-height: 1;

  box-shadow:
    0 5px 15px rgba(239, 68, 68, 0.25);
}


.live-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.18);

  animation: livePulse 1.6s ease-in-out infinite;
}


@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.55;
    transform: scale(0.82);
  }
}


/* =========================================================
   COURSE CONTENT
   ========================================================= */

.free-course-content {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 30px 27px 26px;

  box-sizing: border-box;
}


/* =========================================================
   COURSE CATEGORY
   ========================================================= */

.course-category {
  align-self: flex-start;

  display: inline-flex;
  align-items: center;

  padding: 7px 12px;

  margin-bottom: 18px;

  border-radius: 8px;

  background: #eff6ff;

  color: var(--fc-primary);

  font-family: "Inter", "Hind Siliguri", sans-serif;
  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.3px;

  white-space: nowrap;
}


/* =========================================================
   COURSE TITLE
   ========================================================= */

.free-course-content h3 {
  margin: 0 0 11px;

  color: var(--fc-text);

  font-family: "Hind Siliguri", "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;

  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
}


/* =========================================================
   COURSE DESCRIPTION
   ========================================================= */

.free-course-content p {
  margin: 0 ;

  color: var(--fc-muted);

  font-family: "Hind Siliguri", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;

  line-height: 1.7;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;

  overflow: hidden;
}


/* =========================================================
   JOIN GROUP BUTTON
   ========================================================= */

.join-group-btn {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  margin-top: auto;

  padding: 10px 15px;

  border: 1.5px solid var(--fc-primary);
  border-radius: 9px;

  background: #ffffff;

  color: var(--fc-primary);

  font-family: "Inter", "Hind Siliguri", sans-serif;
  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.join-group-btn:hover {
  background: var(--fc-primary);

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.20);
}


.join-arrow {
  font-size: 20px;
  line-height: 1;

  transition:
    transform 0.25s ease;
}


.join-group-btn:hover .join-arrow {
  transform: translateX(4px);
}


/* =========================================================
   READ FULL DESCRIPTION
   ========================================================= */

.read-more-btn {
  align-self: flex-start;

  margin-top: 7px;
  padding: 0;

  border: none;
  background: transparent;

  color: var(--fc-primary);

  font-family: "Inter", "Hind Siliguri", sans-serif;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.read-more-btn:hover {
  color: var(--fc-primary-dark);
  transform: translateX(3px);
}


/* =========================================================
   NEXT / RIGHT ARROW
   ========================================================= */

/* .course-next-btn {
  position: absolute;

  top: 50%;
  right: 12px;

  z-index: 20;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  border: 0;
  border-radius: 50%;

  background: var(--fc-primary);

  color: #ffffff;

  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 400;

  cursor: pointer;

  box-shadow:
    0 10px 25px rgba(37, 99, 235, 0.30);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.course-next-btn:hover {
  background: var(--fc-primary-dark);

  transform:
    translateY(-50%)
    scale(1.07);

  box-shadow:
    0 14px 30px rgba(37, 99, 235, 0.38);
}


.course-next-btn:active {
  transform:
    translateY(-50%)
    scale(0.95);
}


.course-next-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 4px;
} */

/* =========================================================
   CAROUSEL NAVIGATION
   ========================================================= */

.free-courses-container {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   BOTH ARROWS
   ========================================================= */

.course-prev-btn,
.course-next-btn {

  position: absolute;

  top: 50%;
  z-index: 50;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background: #2563eb;
  color: #ffffff;

  font-family: "Inter", sans-serif;

  font-size: 25px;
  font-weight: 500;

  cursor: pointer;

  transform: translateY(-50%);

  box-shadow:
    0 10px 25px rgba(37, 99, 235, 0.30);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;
}


/* =========================================================
   SAME VERTICAL POSITION
   ========================================================= */

.course-prev-btn {
  left: 14px;
}

.course-next-btn {
  right: 14px;
}


/* =========================================================
   SHOW WHEN CONTAINER HOVER
   ========================================================= */

.free-courses-container:hover
.course-prev-btn:not(.is-hidden),

.free-courses-container:hover
.course-next-btn:not(.is-hidden) {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


/* =========================================================
   ARROW HOVER
   ========================================================= */

.course-prev-btn:hover,
.course-next-btn:hover {

  background: #1d4ed8;

  transform:
    translateY(-50%)
    scale(1.08);

  box-shadow:
    0 14px 30px rgba(37, 99, 235, 0.40);
}


/* =========================================================
   CLICK
   ========================================================= */

.course-prev-btn:active,
.course-next-btn:active {

  transform:
    translateY(-50%)
    scale(0.94);
}


/* =========================================================
   FIRST / LAST POSITION
   ========================================================= */

.course-prev-btn.is-hidden,
.course-next-btn.is-hidden {

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .course-prev-btn,
  .course-next-btn {

    display: none !important;
  }


  .free-courses-container {

    touch-action: pan-y;

    cursor: grab;
  }


  .free-courses-container:active {

    cursor: grabbing;
  }


  .free-courses-list {

    user-select: none;
    -webkit-user-select: none;
  }

}
/* =========================================================
   INDICATORS
   ========================================================= */

.course-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  margin-top: 25px;
}


.indicator {
  width: 9px;
  height: 9px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #d7dee9;

  cursor: pointer;

  transition:
    width 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}


.indicator:hover {
  transform: scale(1.15);
}


.indicator.active {
  width: 11px;
  height: 11px;

  background: var(--fc-primary);

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.12);
}


/* =========================================================
   TABLET
   769px - 1100px
   ========================================================= */

@media (max-width: 1100px) {

  .free-courses {
    padding: 75px 18px 65px;
  }


  .free-courses-container {
    padding: 24px 35px;
  }


  .free-course-card {
    flex-basis: 500px;

    width: 500px;
    height: 340px;
  }


  .free-course-image {
    flex-basis: 215px;

    width: 215px;
  }


  .free-course-content {
    padding: 25px 22px;
  }


  .free-course-content h3 {
    font-size: 21px;
  }


  .free-course-content p {
    font-size: 14px;

    -webkit-line-clamp: 4;
  }


  .course-next-btn {
    right: 8px;

    width: 48px;
    height: 48px;

    font-size: 24px;
  }
}


/* =========================================================
   MOBILE
   768px AND BELOW
   ========================================================= */

@media (max-width: 768px) {

  .free-courses {
    width: 100%;

    padding: 60px 0 55px;

    overflow: hidden;
  }


  /* -----------------------------------------
     Header
     ----------------------------------------- */

  .free-courses-header {
    width: calc(100% - 32px);

    margin-bottom: 30px;
  }


  .section-badge {
    padding: 7px 14px;

    font-size: 12px;
  }


  .free-courses-header h2 {
    margin-top: 15px;

    font-size: clamp(29px, 8vw, 40px);

    line-height: 1.25;
  }


  .free-courses-header p {
    font-size: 15px;

    line-height: 1.7;
  }


  /* -----------------------------------------
     Slider container
     ----------------------------------------- */

  .free-courses-container {
    width: 100%;

    padding: 18px 0 20px;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    overflow: hidden;
  }


  /* -----------------------------------------
     Track
     ----------------------------------------- */

  .free-courses-list {
    gap: 14px;

    padding-left: 16px;
    padding-right: 16px;

    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }


  /* -----------------------------------------
     Mobile card

     1 full card + next card partially visible
     ----------------------------------------- */

  .free-course-card {
    flex: 0 0 calc(100vw - 48px);

    width: calc(100vw - 48px);

    height: 300px;

    border-radius: 16px;
  }


  /* -----------------------------------------
     Image
     ----------------------------------------- */

  .free-course-image {
    flex: 0 0 58%;

    width: 58%;

    height: 100%;
  }


  /* -----------------------------------------
     Live badge
     ----------------------------------------- */

  .live-badge {
    top: 12px;
    left: 12px;

    padding: 6px 8px;

    font-size: 9px;

    gap: 5px;
  }


  .live-dot {
    width: 6px;
    height: 6px;

    flex-basis: 6px;
  }


  /* -----------------------------------------
     Content
     ----------------------------------------- */

  .free-course-content {
    padding: 20px 17px 17px;
  }


  .course-category {
    padding: 5px 8px;

    margin-bottom: 11px;

    font-size: 9px;
  }


  .free-course-content h3 {
    margin-bottom: 7px;

    font-size: 18px;

    line-height: 1.35;

    -webkit-line-clamp: 2;
  }


  .free-course-content p {
    font-size: 12px;

    line-height: 1.55;

    -webkit-line-clamp: 4;
  }


  /* -----------------------------------------
     Button
     ----------------------------------------- */

  .join-group-btn {
    gap: 20px;

    padding: 8px 11px;

    border-radius: 8px;

    font-size: 11px;
  }


  .join-arrow {
    font-size: 17px;
  }


  /* -----------------------------------------
     Arrow

     Mobile-এ card-এর উপর বসবে না,
     container-এর right side-এ থাকবে
     ----------------------------------------- */

  .course-next-btn {
    right: 12px;

    width: 44px;
    height: 44px;

    font-size: 22px;

    box-shadow:
      0 8px 20px rgba(37, 99, 235, 0.30);
  }


  /* -----------------------------------------
     Indicators
     ----------------------------------------- */

  .course-indicators {
    gap: 8px;

    margin-top: 18px;
  }


  .indicator {
    width: 7px;
    height: 7px;
  }


  .indicator.active {
    width: 9px;
    height: 9px;

    box-shadow:
      0 0 0 3px rgba(37, 99, 235, 0.12);
  }
}


/* =========================================================
   SMALL MOBILE
   480px AND BELOW
   ========================================================= */

@media (max-width: 480px) {

  .free-courses {
    padding-top: 50px;
    padding-bottom: 45px;
  }


  .free-courses-header {
    width: calc(100% - 28px);

    margin-bottom: 24px;
  }


  .free-courses-header h2 {
    font-size: 28px;
  }


  .free-courses-header p {
    font-size: 14px;
  }


  .free-courses-container {
    padding-top: 12px;
  }


  .free-courses-list {
    gap: 12px;

    padding-left: 14px;
    padding-right: 14px;
  }


  .free-course-card {
    /*
      প্রায় পুরো screen width,
      কিন্তু পরের card-এর অংশ দেখা যাবে
    */

    flex-basis: calc(100vw - 42px);

    width: calc(100vw - 42px);

    height: 270px;

    border-radius: 14px;
  }


  .free-course-image {
    flex-basis: 58%;

    width: 58%;
  }


  .free-course-content {
    padding: 17px 13px 14px;
  }


  .course-category {
    margin-bottom: 9px;

    font-size: 8px;
  }


  .free-course-content h3 {
    font-size: 16px;

    line-height: 1.3;
  }


  .free-course-content p {
    font-size: 11px;

    line-height: 1.5;

    -webkit-line-clamp: 4;
  }


  .join-group-btn {
    gap: 13px;

    padding: 7px 9px;

    font-size: 10px;
  }


  .join-arrow {
    font-size: 15px;
  }


  .live-badge {
    top: 9px;
    left: 9px;

    padding: 5px 7px;

    font-size: 8px;
  }


  .course-next-btn {
    right: 9px;

    width: 40px;
    height: 40px;

    font-size: 20px;
  }
}


/* =========================================================
   VERY SMALL DEVICES
   360px AND BELOW
   ========================================================= */

@media (max-width: 360px) {

  .free-course-card {
    flex-basis: calc(100vw - 34px);

    width: calc(100vw - 34px);

    height: 250px;
  }


  .free-course-image {
    flex-basis: 58%;

    width: 58%;
  }


  .free-course-content {
    padding: 14px 11px 12px;
  }


  .free-course-content h3 {
    font-size: 15px;
  }


  .free-course-content p {
    font-size: 10px;
  }


  .join-group-btn {
    padding: 6px 8px;

    font-size: 9px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .free-courses-list,
  .free-course-card,
  .free-course-image img,
  .join-group-btn,
  .join-arrow,
  .course-next-btn,
  .indicator {
    transition: none;
  }


  .live-dot {
    animation: none;
  }
}

/* ================================
   FOOTER
================================ */

.footer {
    width: 100%;

    background: #dbeafe;

    color: #0f172a;

    font-family: "Hind Siliguri", sans-serif;

    border-top: 1px solid rgba(29, 78, 216, 0.12);
}


/* ================================
   FOOTER CONTAINER
================================ */

.footer-container {
    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    padding: 60px 40px 50px;

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr;

    gap: 80px;
}


/* ================================
   FOOTER BRAND
================================ */

.footer-brand {
    max-width: 380px;
}


/* ================================
   FOOTER LOGO
================================ */

.footer-logo {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: #0f172a;
}


.footer-logo img {
    width: 65px;

    height: 65px;

    object-fit: contain;
}


.footer-logo span {
    font-family: "Hind Siliguri", sans-serif;

    font-size: 24px;

    font-weight: 700;
}


/* ================================
   FOOTER DESCRIPTION
================================ */

.footer-description {
    max-width: 360px;

    margin: 18px 0 25px;

    color: #475569;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;
}


/* ================================
   SOCIAL LINKS
================================ */

.footer-social {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.footer-social a {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 80px;

    padding: 7px 12px;

    background: rgba(255, 255, 255, 0.55);

    border: 1px solid rgba(255, 255, 255, 0.75);

    border-radius: 8px;

    text-decoration: none;

    color: #0f172a;

    font-size: 14px;

    font-weight: 500;

    transition: 0.3s ease;
}


.footer-social a:hover {
    background: #ffffff;

    color: #1d4ed8;

    border-color: #ffffff;

    transform: translateY(-3px);

    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.12);
}


/* ================================
   FOOTER COLUMN TITLES
================================ */

.footer-column h3,
.footer-contact h3 {
    margin: 5px 0 22px;

    color: #0f172a;

    font-size: 20px;

    font-weight: 700;
}


/* ================================
   QUICK LINKS
================================ */

.footer-column ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.footer-column li {
    margin-bottom: 12px;
}


.footer-column a {
    position: relative;

    text-decoration: none;

    color: #475569;

    font-size: 16px;

    font-weight: 500;

    transition: 0.3s ease;
}


.footer-column a:hover {
    color: #1d4ed8;

    padding-left: 5px;
}


/* ================================
   CONTACT
================================ */

.footer-contact {
    width: 100%;

    max-width: 400px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* ================================
   CONTACT TITLE
================================ */

.footer-contact h3 {
    margin: 5px 0 8px;

    color: #0f172a;

    font-size: 20px;

    font-weight: 700;
}


/* ================================
   CONTACT DESCRIPTION
================================ */

.footer-contact p {
    margin: 0 0 10px;

    color: #475569;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;
}


/* ================================
   CONTACT BOX COMMON
================================ */

.footer-email,
.footer-whatsapp,
.footer-address {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    min-height: 64px;

    box-sizing: border-box;

    padding: 12px 16px;

    background: rgba(255, 255, 255, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 11px;

    text-decoration: none;

    color: #0f172a;

    font-size: 15px;

    font-weight: 600;

    transition: all 0.3s ease;
}


/* ================================
   CONTACT HOVER
================================ */

.footer-email:hover,
.footer-whatsapp:hover,
.footer-address:hover {

    background: #ffffff;

    border-color: #ffffff;

    transform: translateY(-3px);

    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.14);
}


/* ================================
   EMAIL HOVER
================================ */

.footer-email:hover {

    color: #1d4ed8;
}


/* ================================
   WHATSAPP HOVER
================================ */

.footer-whatsapp:hover {

    color: #128c7e;
}


/* ================================
   ADDRESS HOVER
================================ */

.footer-address:hover {

    color: #1d4ed8;
}


/* ================================
   CONTACT ICON COMMON
================================ */

.contact-icon,
.email-icon,
.whatsapp-icon,
.address-icon {

    width: 36px;

    height: 36px;

    min-width: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #ffffff;

    border: 1px solid rgba(29, 78, 216, 0.1);

    border-radius: 9px;

    color: #2563eb;

    overflow: hidden;
}


/* ================================
   FONT AWESOME ICON
================================ */

.contact-icon i {

    font-size: 16px;

    color: #2563eb;
}


/* ================================
   IMAGE ICON
================================ */

.contact-icon img {

    width: 23px;

    height: 23px;

    object-fit: contain;

    display: block;
}


/* ================================
   WHATSAPP ICON
================================ */

.footer-whatsapp .contact-icon img {

    width: 24px;

    height: 24px;

    object-fit: contain;

    display: block;
}


/* ================================
   CONTACT TEXT
================================ */

.footer-email > span:last-child,
.footer-whatsapp > span:last-child,
.footer-address > span:last-child {

    min-width: 0;

    color: inherit;

    line-height: 1.5;

    white-space: normal;

    overflow: visible;

    text-overflow: clip;

    overflow-wrap: anywhere;
}


/* ================================
   ADDRESS
================================ */

.footer-address {

    align-items: center;
}


/* ================================
   FOOTER BOTTOM
================================ */

.footer-bottom {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    padding: 20px 40px;

    border-top: 1px solid rgba(15, 23, 42, 0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;
}


/* ================================
   COPYRIGHT
================================ */

.footer-bottom p {

    margin: 0;

    color: #475569;

    font-size: 14px;

    font-weight: 500;
}


/* ================================
   FOOTER BOTTOM LINKS
================================ */

.footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 25px;
}


.footer-bottom-links a {

    text-decoration: none;

    color: #475569;

    font-size: 14px;

    font-weight: 500;

    transition: 0.3s ease;
}


.footer-bottom-links a:hover {

    color: #1d4ed8;
}


/* ================================
   FOOTER RESPONSIVE
================================ */


/* ================================
   TABLET
================================ */

@media (max-width: 900px) {

    .footer-container {
        grid-template-columns: 1fr 1fr;

        gap: 50px;

        padding: 50px 30px 40px;
    }


    /* Brand */

    .footer-brand {
        max-width: 100%;
    }


    /* Contact */

    .footer-contact {
        max-width: 100%;
    }


    /* Make contact span full row */

    .footer-contact {
        grid-column: 1 / -1;
    }


    /* Bottom */

    .footer-bottom {
        padding: 18px 30px;
    }

}


/* ================================
   MOBILE
================================ */

@media (max-width: 600px) {

    /* ============================
       FOOTER CONTAINER
    ============================ */

    .footer-container {
        width: 100%;

        max-width: none;

        margin: 0;

        padding: 45px 20px 35px;

        display: flex;

        flex-direction: column;

        gap: 38px;

        box-sizing: border-box;
    }


    /* ============================
       FOOTER BRAND
    ============================ */

    .footer-brand {
        width: 100%;

        max-width: 100%;
    }


    /* ============================
       LOGO
    ============================ */

    .footer-logo {
        gap: 9px;
    }


    .footer-logo img {
        width: 58px;

        height: 58px;
    }


    .footer-logo span {
        font-size: 22px;
    }


    /* ============================
       DESCRIPTION
    ============================ */

    .footer-description {
        width: 100%;

        max-width: 100%;

        margin: 16px 0 22px;

        font-size: 15px;

        line-height: 1.7;
    }


    /* ============================
       SOCIAL LINKS
    ============================ */

    .footer-social {
        width: 100%;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 8px;
    }


    .footer-social a {
        min-width: auto;

        padding: 7px 11px;

        font-size: 13px;
    }


    /* ============================
       FOOTER COLUMN
    ============================ */

    .footer-column {
        width: 100%;

        max-width: 100%;
    }


    /* ============================
       COLUMN TITLE
    ============================ */

    .footer-column h3,
    .footer-contact h3 {

        margin: 0 0 18px;

        font-size: 19px;
    }


    /* ============================
       QUICK LINKS
    ============================ */

    .footer-column ul {
        width: 100%;
    }


    .footer-column li {
        margin-bottom: 11px;
    }


    .footer-column a {
        font-size: 15px;
    }


    /* ============================
       CONTACT
    ============================ */

    .footer-contact {

        width: 100%;

        max-width: 100%;

        display: flex;

        flex-direction: column;

        gap: 11px;
    }


    /* ============================
       CONTACT DESCRIPTION
    ============================ */

    .footer-contact p {

        margin: 0 0 8px;

        font-size: 15px;

        line-height: 1.7;
    }


    /* ============================
       CONTACT BOX
    ============================ */

    .footer-email,
    .footer-whatsapp,
    .footer-address {

        width: 100%;

        min-height: 60px;

        padding: 11px 14px;

        gap: 11px;

        border-radius: 10px;

        font-size: 14px;

        box-sizing: border-box;
    }


    /* ============================
       CONTACT ICON
    ============================ */

    .contact-icon,
    .email-icon,
    .whatsapp-icon,
    .address-icon {

        width: 34px;

        height: 34px;

        min-width: 34px;

        border-radius: 8px;
    }


    .contact-icon i {

        font-size: 15px;
    }


    .contact-icon img {

        width: 22px;

        height: 22px;
    }


    .footer-whatsapp .contact-icon img {

        width: 23px;

        height: 23px;
    }


    /* ============================
       CONTACT TEXT
    ============================ */

    .footer-email > span:last-child,
    .footer-whatsapp > span:last-child,
    .footer-address > span:last-child {

        min-width: 0;

        font-size: 14px;

        line-height: 1.5;

        white-space: normal;

        overflow: visible;

        text-overflow: clip;

        overflow-wrap: anywhere;
    }


    /* ============================
       FOOTER BOTTOM
    ============================ */

    .footer-bottom {

        width: 100%;

        max-width: none;

        margin: 0;

        padding: 20px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 12px;

        box-sizing: border-box;
    }


    /* ============================
       COPYRIGHT
    ============================ */

    .footer-bottom p {

        font-size: 13px;

        line-height: 1.6;
    }


    /* ============================
       BOTTOM LINKS
    ============================ */

    .footer-bottom-links {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 8px 20px;
    }


    .footer-bottom-links a {

        font-size: 13px;
    }

}


/* ================================
   SMALL MOBILE
================================ */

@media (max-width: 380px) {

    .footer-container {

        padding-left: 16px;

        padding-right: 16px;
    }


    .footer-logo img {

        width: 52px;

        height: 52px;
    }


    .footer-logo span {

        font-size: 20px;
    }


    .footer-description {

        font-size: 14px;
    }


    .footer-social a {

        padding: 6px 9px;

        font-size: 12px;
    }


    .footer-email,
    .footer-whatsapp,
    .footer-address {

        min-height: 58px;

        padding: 10px 12px;
    }


    .contact-icon,
    .email-icon,
    .whatsapp-icon,
    .address-icon {

        width: 32px;

        height: 32px;

        min-width: 32px;
    }


    .footer-email > span:last-child,
    .footer-whatsapp > span:last-child,
    .footer-address > span:last-child {

        font-size: 13px;
    }

}