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

html {
  scroll-behavior: smooth;
}

body {
   font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

  background: var(--smoke);

  color: var(--ink);

  overflow-x: hidden;
}

img {
  max-width: 100%;

  display: block;
}

a {
  text-decoration: none;

  color: inherit;
}

ul {
  list-style: none;
}

.container {
  width: min(1400px, calc(100% - 70px));
    margin: 0 auto;
}
/*==================================================*
* HERO SECTION
*==================================================*/

.hero {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 750px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;
}


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

.hero-slider {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 0;
}

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition: opacity 1s ease;
}

.hero-slide.active {

    opacity: 1;

    visibility: visible;
}

.hero-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/*==================================================*
* DARK OVERLAY
* DARKER ONLY AROUND TEXT AREA
*==================================================*/

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(7,25,82,.88) 0%,

            rgba(7,25,82,.78) 18%,

            rgba(13,33,84,.58) 35%,

            rgba(13,33,84,.30) 52%,

            rgba(13,33,84,.08) 68%,

            transparent 82%
        );
}

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

.hero .container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1550px;

    margin:0 auto;

    padding-top:150px;

    padding-bottom:50px;

    padding-left:30px;

    padding-right:30px;

    box-sizing:border-box;

}


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

.hero-content{

    max-width:800px;

    width:100%;

    color:#ffffff;

    position:relative;

    padding:0;

    text-align:center;

}


/*==================================================*
* DESKTOP HERO CONTENT POSITION
*==================================================*/

@media (min-width:993px){

    .hero-content{
      right:10%;

        transform:translateY(-120px);

    }

}


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

.hero-tag{

    display:flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    margin:0 auto 18px;

    padding:9px 20px;

    border-radius:50px;

    background:rgb(9,9,9);

    border:1px solid rgba(255,255,255,.30);

    backdrop-filter:blur(10px);

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

    color:var(--gold-light);

    font-size:13px;

    font-weight:600;

    line-height:1;

    position:relative;

    z-index:2;

    text-align:center;

}


/*==================================================*
* TAG ICON
*==================================================*/

.hero-tag i{

    color:var(--gold-light);

}


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

.hero-content h1{

    margin:0;

    padding:0;

    text-align:center;

    color:#ffffff;

    font-size:52px;

    line-height:1.1;

    font-weight:800;

}


/*==================================================*
* HI-TECH
*==================================================*/

.hero-content h1 .hero-title-main{

    display:block;

    margin:0;

    color:var(--gold-light);

    font-size:52px;

    line-height:1.1;

    font-weight:800;

    text-align:center;

    white-space:nowrap;

}


/*==================================================*
* COMPUTER & TYPING INSTITUTIONS
*==================================================*/

.hero-content h1 .hero-title-sub{

    display:block;

    margin:4px 0 0;

    color:var(--gold-light);

    font-size:27px;

    line-height:1.15;

    font-weight:800;

    text-align:center;

    white-space:nowrap;

}


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

.hero-location{

    max-width:650px;

    margin:22px auto 0;

    padding:0;

    color:#ffffff;

    font-size:17px;

    line-height:1.6;

    text-align:center;

}


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

.hero-content p{

    max-width:650px;

    margin:22px auto 0;

    color:rgba(255,255,255,.92);

    font-size:17px;

    line-height:1.6;

    text-align:center;

}


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

@media (max-width:992px){

    .hero .container{

        padding-left:25px;

        padding-right:25px;

    }

    .hero-content{

        max-width:760px;

        transform:none;

    }

    .hero-content h1 .hero-title-main{

        font-size:42px;

    }

    .hero-content h1 .hero-title-sub{

        font-size:25px;

    }

}


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

@media (max-width:768px){

    .hero .container{

        width:100%;

        padding-left:20px;

        padding-right:20px;

        box-sizing:border-box;

    }

    .hero-content{

        width:100%;

        max-width:100%;

        padding:0;

        transform:none;

        text-align:center;

    }

    .hero-tag{

        margin:-45px auto 18px;

        padding:8px 18px;

        font-size:12px;

    }

    .hero-content h1{

        margin:0;

        text-align:center;

    }

    .hero-content h1 .hero-title-main{

        font-size:30px;

        line-height:1.1;

        white-space:nowrap;

    }

    .hero-content h1 .hero-title-sub{

        margin-top:4px;

        font-size:20px;

        line-height:1.15;

        white-space:nowrap;

    }

    .hero-location{

        max-width:100%;

        margin-top:16px;

        font-size:14px;

        line-height:1.5;

        text-align:center;

    }

}


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

@media (max-width:480px){

    .hero .container{

        padding-left:16px;

        padding-right:16px;

    }

    .hero-tag{

        margin:-50px auto 16px;

        padding:8px 16px;

        font-size:11px;

    }

    .hero-content h1 .hero-title-main{

        font-size:27px;

        line-height:1.1;

    }

    .hero-content h1 .hero-title-sub{

        font-size:17px;

        line-height:1.15;

        white-space:nowrap;

    }

    .hero-location{

        margin-top:16px;

        font-size:13px;

        line-height:1.55;

    }

}

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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;
}


/*==================================================*
* BUTTON BASE
*==================================================*/

.btn-primary,
.btn-secondary {

    height: 54px;

    padding: 0 30px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 600;

    transition: .35s var(--ease);
}


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

.btn-primary {

    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    color: var(--royal-deep);

    border: none;

    box-shadow: var(--gold-shadow);
}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(201,162,39,.35);
}


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

.btn-secondary {

    background: rgba(255,255,255,.08);

    border: 2px solid rgba(255,255,255,.50);

    color: #ffffff;

    backdrop-filter: blur(10px);

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

.btn-secondary:hover {

    background: #ffffff;

    color: var(--royal);

    border-color: #ffffff;

    transform: translateY(-4px);
}


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

.hero-prev,
.hero-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 56px;

    height: 56px;

    border: 1px solid rgba(22,50,122,.20);

    border-radius: 50%;

    background: rgba(255,255,255,.90);

    backdrop-filter: blur(10px);

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

    color: var(--royal);

    cursor: pointer;

    transition: .35s;

    z-index: 10;
}

.hero-prev {

    left: 40px;
}

.hero-next {

    right: 40px;
}

.hero-prev:hover,
.hero-next:hover {

    background: var(--gold);

    color: var(--royal-deep);

    border-color: var(--gold);
}


/*==================================================*
* DOTS
*==================================================*/

.hero-dots {

    position: absolute;

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

    z-index: 10;
}

.dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(255,255,255,.65);

    border: 1px solid rgba(13,33,84,.20);

    cursor: pointer;

    transition: .35s;
}

.dot.active {

    width: 40px;

    border-radius: 20px;

    background: var(--gold);

    border-color: var(--gold);
}


/*==================================================*
* LARGE DESKTOP
*==================================================*/

@media (max-width: 1550px) {

    .hero .container {

        width: 90%;

        max-width: 1400px;
    }

}


/*==================================================*
* LAPTOP
*==================================================*/

@media (max-width: 1200px) {

    .hero .container {

        width: 90%;

        max-width: 1100px;

        padding-top: 135px;
    }

    .hero-content {

        max-width: 620px;
    }

    .hero-content h1 {

        font-size: 48px;
    }

    .hero-content p {

        font-size: 16px;

        line-height: 1.75;
    }

}


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

@media (max-width: 992px) {

    .hero {

        min-height: 680px;
    }

    .hero .container {

        width: 90%;

        padding-top: 120px;

        padding-bottom: 45px;
    }

    .hero-content {

        max-width: 580px;
    }

    .hero-content h1 {

        font-size: 42px;

        line-height: 1.15;
    }

    .hero-content p {

        font-size: 16px;

        line-height: 1.7;

        max-width: 560px;
    }

    .hero-tag {

        font-size: 12px;

        padding: 8px 18px;

        margin-bottom: 20px;
    }

    .hero-prev,
    .hero-next {

        display: none;
    }

}


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

@media (max-width: 768px) {

    .hero {

        height: auto;

        min-height: 650px;
    }

    .hero .container {

        width: 92%;

        max-width: 650px;

        margin: 0 auto;

        padding-top: 100px;

        padding-bottom: 65px;

        padding-left: 0;
    }


    /*------------------------------------------*
    MOBILE OVERLAY
    *------------------------------------------*/

    .hero-overlay {

        background:
            linear-gradient(
                180deg,

                rgba(7,25,82,.80) 0%,

                rgba(13,33,84,.70) 35%,

                rgba(13,33,84,.48) 65%,

                rgba(13,33,84,.25) 100%
            );
    }


    /*------------------------------------------*
    CONTENT
    *------------------------------------------*/

    .hero-content {

        max-width: 100%;

        text-align: center;

        margin: auto;

        padding: 0;
    }


    /*------------------------------------------*
    TAG
    *------------------------------------------*/

    .hero-tag {

        display: inline-flex;

        padding: 9px 20px;

        font-size: 12px;

        border-radius: 40px;

        margin-bottom: 20px;
    }


    /*------------------------------------------*
    HEADING
    *------------------------------------------*/

    .hero-content h1 {

        font-size: 36px;

        line-height: 1.15;

        margin-bottom: 20px;
    }


    /*------------------------------------------*
    DESCRIPTION
    *------------------------------------------*/

    .hero-content p {

        font-size: 15px;

        line-height: 1.7;

        max-width: 600px;

        margin: 0 auto 28px;
    }


    /*------------------------------------------*
    BUTTONS
    *------------------------------------------*/

    .hero-buttons {

        justify-content: center;

        gap: 14px;

        flex-wrap: wrap;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        min-width: 200px;

        height: 52px;

        font-size: 14px;

        padding: 0 25px;
    }

}


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

@media (max-width: 576px) {

    .hero {

        min-height: 600px;
    }

    .hero .container {

        width: 92%;

        max-width: 500px;

        padding-top: 82px;

        padding-bottom: 50px;
    }


    /*------------------------------------------*
    MOBILE OVERLAY
    *------------------------------------------*/

    .hero-overlay {

        background:
            linear-gradient(
                180deg,

                rgba(7,25,82,.82) 0%,

                rgba(13,33,84,.70) 38%,

                rgba(13,33,84,.48) 70%,

                rgba(13,33,84,.25) 100%
            );
    }


    /*------------------------------------------*
    CONTENT
    *------------------------------------------*/

    .hero-content {

        padding: 0;

        max-width: 100%;
    }


    /*------------------------------------------*
    TAG
    *------------------------------------------*/

    .hero-tag {

        font-size: 11px;

        padding: 8px 16px;

        margin-bottom: 18px;
    }


    /*------------------------------------------*
    HEADING
    *------------------------------------------*/

    .hero-content h1 {

        font-size: 28px;

        line-height: 1.2;

        margin-bottom: 18px;

        font-weight: 800;
    }

    .hero-content h1 span {

        display: block;
    }


    /*------------------------------------------*
    DESCRIPTION
    *------------------------------------------*/

    .hero-content p {

        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 26px;
    }


    /*------------------------------------------*
    BUTTONS
    *------------------------------------------*/

    .hero-buttons {

        flex-direction: column;

        gap: 12px;

        width: 100%;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        width: 100%;

        max-width: 380px;

        min-width: 0;

        margin: auto;

        height: 52px;

        padding: 0 18px;

        font-size: 15px;

        border-radius: 50px;
    }

}


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

@media (max-width: 380px) {

    .hero {

        min-height: 570px;
    }

    .hero .container {

        width: 92%;

        padding-top: 72px;

        padding-bottom: 42px;
    }

    .hero-tag {

        font-size: 10px;

        padding: 7px 14px;

        margin-bottom: 16px;
    }

    .hero-content h1 {

        font-size: 25px;

        line-height: 1.18;

        margin-bottom: 16px;
    }

    .hero-content p {

        font-size: 13px;

        line-height: 1.65;

        margin-bottom: 22px;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        height: 49px;

        font-size: 14px;
    }

}
/*==================================================
                    ABOUT SECTION
==================================================*/

.about {
  padding: 110px 0;
  background: #fff;
}

.about-grid {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 70px;
  align-items: center;
}

.about-image {
  position: relative;
}

.about-image img {
  width: 100%;
  height: 700px;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid #ececec;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.experience-box {
  position: absolute;

  left: 25px;

  bottom: 25px;

  width: 190px;

  padding: 24px 18px;

  border-radius: 18px;

  background: linear-gradient(180deg, var(--royal), var(--royal-deep));

  border: 3px solid var(--gold);

  text-align: center;

  color: #fff;
}

.experience-box h2 {
  font-size: 54px;

  font-weight: 800;

  color: var(--gold-light);

  margin-bottom: 10px;
}

.experience-box h4 {
  font-size: 16px;

  line-height: 1.4;

  font-weight: 700;
}

.experience-line {
  width: 55px;

  height: 3px;

  background: var(--gold);

  margin: 16px auto;
}

.experience-stars {
  display: flex;

  justify-content: center;

  gap: 6px;
}

.experience-stars i {
  color: var(--gold);

  font-size: 14px;
}

.about-content {
  width: 100%;
}

.section-title {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;
}

.section-title span {
  width: 80px;

  height: 2px;

  background: var(--gold);
}

.section-title h5 {
  color: var(--gold);

  font-size: 15px;

  letter-spacing: 1px;

  font-weight: 700;
}

.about-content h2 {
  font-size: 40px;

  line-height: 1.18;

  color: var(--royal-deep);

  margin-bottom: 22px;

  font-weight: 800;
}

.about-content h2 span {
  color: var(--gold);
}

.about-content p {
  font-size: 18px;

  line-height: 1.9;

  color: var(--ink-soft);

  margin-bottom: 35px;

  max-width: 700px;
}

.about-features {
  display: grid;

  grid-template-columns: 1fr 1fr;

  column-gap: 40px;

  row-gap: 0;

  margin: 35px 0 45px;
}

.feature-item {
  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 0;

  border-bottom: 1px dashed #d9d9d9;
}

.feature-item i {
  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: var(--royal-deep);

  color: var(--gold);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 15px;

  flex-shrink: 0;
}

.feature-item span {
  font-size: 16px;

  font-weight: 600;

  color: var(--royal-deep);

  line-height: 1.5;
}

.about-buttons {
  display: flex;

  gap: 18px;

  margin-top: 15px;
}

.about-buttons a {
  width: 210px;

  height: 56px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 10px;

  font-size: 16px;

  font-weight: 700;

  transition: 0.35s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--royal-deep), var(--royal));

  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-3px);
}

.btn-outline {
  border: 2px solid var(--royal);

  color: var(--royal);

  background: #fff;
}

.btn-outline:hover {
  background: var(--royal);

  color: #fff;
}

@media (max-width: 992px) {
  .about {
    padding: 80px 0;
  }

  .about-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .about-image {
    max-width: 650px;

    margin: auto;
  }

  .about-image img {
    height: 500px;
  }

  .about-content {
    text-align: center;
  }

  .section-title {
    justify-content: center;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .about-buttons {
    justify-content: center;

    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {
  .about-content h2 {
    font-size: 34px;
  }

  .about-content p {
    font-size: 16px;
  }

  .about-image img {
    height: 350px;
  }

  .experience-box {
    width: 150px;

    padding: 18px;
  }

  .experience-box h2 {
    font-size: 40px;
  }

  .about-buttons {
    flex-direction: column;
  }

  .about-buttons a {
    width: 100%;
  }
}

/*==================================================
                WHY CHOOSE US
==================================================*/

.why-choose {
  position: relative;

  padding: 80px 0;

  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);

  overflow: hidden;
}

.why-choose .container {
  max-width: 1400px;

  margin: auto;
}

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

.section-header {
  max-width: 780px;

  margin: 0 auto 70px;

  text-align: center;
}

.section-subtitle {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 24px;

  border-radius: 50px;

  background: rgba(22, 50, 122, 0.08);

  color: var(--gold);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 25px;
}

.section-header h2 {
  font-size: 50px;

  line-height: 1.2;

  color: var(--royal-deep);

  font-weight: 800;

  margin-bottom: 25px;
}

.section-header h2 span {
  font-size: 50px;
  color: var(--bright);
}

.section-header p {
  font-size: 18px;

  line-height: 1.9;

  color: var(--ink-soft);
}

/*==================================================
                GRID
==================================================*/

.choose-grid {
  display: grid;

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

  gap: 32px;
}

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

.choose-card {
  position: relative;

  background: #fff;

  border-radius: 24px;

  padding: 45px 35px;

  overflow: hidden;

  transition: 0.45s var(--ease);

  box-shadow: 0 20px 45px rgba(13, 33, 84, 0.08);

  border: 1px solid rgba(22, 50, 122, 0.06);
}

.choose-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background: linear-gradient(90deg, var(--royal), var(--bright), var(--gold));

  transform: scaleX(0);

  transform-origin: left;

  transition: 0.45s;
}

.choose-card:hover::before {
  transform: scaleX(1);
}

.choose-card:hover {
  transform: translateY(-12px);

  box-shadow: 0 30px 70px rgba(13, 33, 84, 0.18);
}

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

.choose-icon {

    width: 82px;

    height: 82px;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 30px;

    background: linear-gradient(
        135deg,
        var(--royal),
        var(--bright)
    );

    color: #fff;

    font-size: 32px;

    transition: 0.45s;

}

.choose-card:hover .choose-icon {

    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    color: var(--royal-deep);

    transform: rotate(-10deg) scale(1.08);

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

.choose-card h3 {

    font-size: 24px;

    color: var(--royal-deep);

    margin-bottom: 18px;

    font-weight: 700;

    text-align: center;

}

.choose-card p {

    color: var(--ink-soft);

    font-size: 16px;

    line-height: 1.9;

    text-align: center;

    margin: 0 auto;

    max-width: 100%;

}
/*==================================================
                SCROLL ANIMATION
==================================================*/

.why-choose .section-header,
.choose-card {
  opacity: 0;

  transform: translateY(60px);

  transition: all 0.8s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.why-choose.show .section-header {
  opacity: 1;

  transform: translateY(0);
}

.why-choose.show .choose-card {
  opacity: 1;

  transform: translateY(0);
}

/*==================================================
                STAGGER
==================================================*/

.choose-card:nth-child(1) {
  transition-delay: 0.15s;
}

.choose-card:nth-child(2) {
  transition-delay: 0.3s;
}

.choose-card:nth-child(3) {
  transition-delay: 0.45s;
}

.choose-card:nth-child(4) {
  transition-delay: 0.6s;
}

.choose-card:nth-child(5) {
  transition-delay: 0.75s;
}

.choose-card:nth-child(6) {
  transition-delay: 0.9s;
}
/*==================================================
                GLOW EFFECT
==================================================*/

.choose-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(
    circle at top right,

    rgba(47, 111, 237, 0.15),
    transparent 60%
  );

  opacity: 0;

  transition: 0.45s;

  pointer-events: none;
}

.choose-card:hover::after {
  opacity: 1;
}
/*==================================================
                ICON ANIMATION
==================================================*/

.choose-icon {
  position: relative;

  overflow: hidden;
}

.choose-icon::before {
  content: "";

  position: absolute;

  width: 120%;

  height: 120%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );

  transform: translateX(-120%);
}

.choose-card:hover .choose-icon::before {
  transform: translateX(120%);

  transition: 0.8s;
}

/*==================================================
            BORDER EFFECT
==================================================*/

.choose-card {
  border: 1px solid rgba(22, 50, 122, 0.08);
}

.choose-card:hover {
  border-color: rgba(201, 162, 39, 0.35);
}
/*==================================================
            TITLE EFFECT
==================================================*/

.section-header h2 span {
  position: relative;
}

.section-header h2 span::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: 6px;

  width: 100%;

  height: 12px;

  background: rgba(201, 162, 39, 0.18);

  z-index: -1;

  border-radius: 20px;
}

/*==================================================
            BACKGROUND
==================================================*/

.why-choose {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)),
    linear-gradient(
      90deg,
      rgba(22, 50, 122, 0.03) 1px,

      transparent 1px
    ),
    linear-gradient(
      rgba(22, 50, 122, 0.03) 1px,

      transparent 1px
    );

  background-size:
    cover,
    70px 70px,
    70px 70px;
}

/*==================================================
            FLOAT
==================================================*/

@keyframes cardFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

.choose-card:hover {
  animation: cardFloat 3s ease-in-out infinite;
}

.choose-card {
  box-shadow: 0 20px 50px rgba(13, 33, 84, 0.08);
}

.choose-card:hover {
  box-shadow: 0 30px 70px rgba(13, 33, 84, 0.18);
}

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

@media (max-width: 1200px) {
  .choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .why-choose {
    padding: 90px 0;
  }

  .section-header {
    margin-bottom: 45px;
  }

  .section-header h2 {
    font-size: 38px;
  }

  .choose-grid {
    grid-template-columns: 1fr;
  }

  .choose-card {
    padding: 35px 30px;
  }
}

@media (max-width: 576px) {
  .section-header h2 {
    font-size: 30px;
  }

  .section-header p {
    font-size: 16px;
  }

  .choose-card {
    padding: 30px 25px;
  }

  .choose-icon {
    width: 70px;

    height: 70px;

    font-size: 26px;
  }

  .choose-card h3 {
    font-size: 22px;
  }
}


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

.courses {
  position: relative;

  padding: 120px 0;

  background: linear-gradient(180deg, var(--white), var(--smoke));

  overflow: hidden;
}

.courses .container {
  max-width: 1400px;

  margin: auto;
}

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

.course-slider {
  width: 100%;

  overflow: hidden;

  position: relative;

  margin-top: 70px;

  padding: 20px 0;
}

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

.course-track {
  display: flex;

  gap: 30px;

  width: max-content;

  animation: courseScroll 38s linear infinite;
}

.course-slider:hover .course-track {
  animation-play-state: paused;
}

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

.course-card {
  width: 340px;

  flex-shrink: 0;

  background: var(--white);

  border-radius: 22px;

  border: 2px solid rgba(22, 50, 122, 0.08);

  padding: 45px 35px;

  text-align: center;

  transition: 0.4s var(--ease);

  position: relative;

  overflow: hidden;

  box-shadow: 0 15px 40px rgba(13, 33, 84, 0.08);
}

/* Top Border Animation */

.course-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 4px;

  transform: scaleX(0);

  transform-origin: left;

  transition: 0.45s;
}

.course-card:hover::before {
  transform: scaleX(1);
}

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

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

  border-color: rgba(201, 162, 39, 0.35);

  box-shadow: 0 30px 70px rgba(13, 33, 84, 0.16);
}

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

.course-icon {
  width: 90px;

  height: 90px;

  margin: 0 auto 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 24px;

  background: linear-gradient(135deg, var(--royal), var(--bright));

  color: #fff;

  font-size: 34px;

  transition: 0.45s;

  box-shadow: 0 15px 35px rgba(22, 50, 122, 0.2);
}

.course-card:hover .course-icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));

  color: var(--royal-deep);

  transform: rotate(-10deg) scale(1.08);
}

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

.course-card h3 {
  font-size: 28px;

  color: var(--royal-deep);

  margin-bottom: 18px;

  font-weight: 700;
}

.course-card p {
  font-size: 16px;

  color: var(--ink-soft);

  line-height: 1.8;

  margin-bottom: 35px;

  min-height: 90px;
}

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

.course-btn {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--royal);

  font-size: 16px;

  font-weight: 700;

  transition: 0.35s;
}

.course-btn i {
  transition: 0.35s;
}

.course-btn:hover {
  color: var(--gold);
}

.course-btn:hover i {
  transform: translateX(8px);
}

/*==================================================
            AUTO SCROLL
==================================================*/

@keyframes courseScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/*==================================================
                ACHIEVEMENTS
==================================================*/

.achievements {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  background: linear-gradient(
    135deg,
    var(--royal-deep),
    var(--royal),
    var(--bright)
  );
}

.achievements::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(201, 162, 39, 0.1),
      transparent 40%
    );

  pointer-events: none;
}

.achievements .container {
  position: relative;

  z-index: 2;

  max-width: 1400px;

  margin: auto;
}
/*==================================================
                HEADER
==================================================*/

.achievements .section-header {
  text-align: center;

  margin-bottom: 70px;
}

.achievements .section-subtitle {
  color: var(--gold-light);

  background: rgba(255, 255, 255, 0.08);
}

.achievements .section-header h2 {
  color: #fff;
}

.achievements .section-header h2 span {
  color: var(--gold-light);
}

.achievements .section-header p {
  color: rgba(255, 255, 255, 0.82);
}

/*==================================================
                GRID
==================================================*/

.achievement-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;
}

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

.achievement-card {
  position: relative;

  padding: 45px 25px;

  text-align: center;

  border-radius: 24px;

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

  backdrop-filter: blur(20px);

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

  transition: 0.45s var(--ease);

  overflow: hidden;
}

.achievement-card:hover {
  transform: translateY(-12px);

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

  border-color: rgba(234, 205, 110, 0.4);

  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.25);
}

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

.achievement-icon {
  width: 90px;

  height: 90px;

  margin: 0 auto 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--gold), var(--gold-light));

  color: var(--royal-deep);

  font-size: 34px;

  transition: 0.45s;
}

.achievement-card:hover .achievement-icon {
  transform: rotate(-12deg) scale(1.08);
}

/*==================================================
                COUNTER
==================================================*/

.counter {
  font-size: 58px;

  font-weight: 800;

  color: #fff;

  margin-bottom: 12px;

  line-height: 1;
}

.achievement-card span {
  display: block;

  color: rgba(255, 255, 255, 0.9);

  font-size: 18px;

  font-weight: 600;
}

/*==================================================
                EFFECT
==================================================*/

.achievement-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 5px;

  background: linear-gradient(90deg, var(--gold), var(--gold-light));

  transform: scaleX(0);

  transition: 0.45s;
}

.achievement-card:hover::before {
  transform: scaleX(1);
}

@keyframes floatCard {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

.achievement-card:hover {
  animation: floatCard 3s ease-in-out infinite;
}

@media (max-width: 992px) {
  .achievement-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .achievement-grid {
    grid-template-columns: 1fr;
  }

  .counter {
    font-size: 46px;
  }

  .achievement-icon {
    width: 75px;

    height: 75px;

    font-size: 28px;
  }
}

/*==================================================
                CTA SECTION
==================================================*/

.cta {
  position: relative;

  padding: 120px 0;

  overflow: hidden;

  background: linear-gradient(
    135deg,
    var(--royal-deep),
    var(--royal),
    var(--bright)
  );
}

/* Background Overlay */

.cta::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(201, 162, 39, 0.12),
      transparent 40%
    );

  pointer-events: none;
}

.cta .container {
  max-width: 1400px;

  margin: auto;

  position: relative;

  z-index: 2;
}

/*==================================================
                LAYOUT
==================================================*/

.cta-wrapper {
  display: grid;

  grid-template-columns: 1.3fr 0.7fr;

  gap: 80px;

  align-items: center;
}

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

.cta-content {
  color: var(--white);
}

.cta-badge {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 24px;

  border-radius: 50px;

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

  backdrop-filter: blur(15px);

  color: var(--gold-light);

  font-weight: 600;

  margin-bottom: 30px;
}

.cta-badge i {
  font-size: 18px;
}

.cta-content h2 {
  font-size: 54px;

  line-height: 1.2;

  font-weight: 800;

  margin-bottom: 28px;
}

.cta-content h2 span {
  color: var(--gold-light);
}

.cta-content p {
  font-size: 18px;

  line-height: 1.9;

  color: rgba(255, 255, 255, 0.85);

  max-width: 700px;
}

/*==================================================
                FEATURES
==================================================*/

.cta-features {
  margin-top: 40px;

  display: grid;

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

  gap: 20px;
}

.cta-feature {
  display: flex;

  align-items: center;

  gap: 12px;

  color: #fff;

  font-weight: 600;
}

.cta-feature i {
  color: var(--gold-light);

  font-size: 20px;
}

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

.cta-card {
  padding: 50px 40px;

  text-align: center;

  border-radius: 30px;

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

  backdrop-filter: blur(20px);

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

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);

  transition: 0.45s var(--ease);
}

.cta-card:hover {
  transform: translateY(-10px);

  border-color: rgba(234, 205, 110, 0.45);
}

.cta-card > i {
  width: 95px;

  height: 95px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0 auto 30px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--gold), var(--gold-light));

  color: var(--royal-deep);

  font-size: 36px;
}

.cta-card h3 {
  font-size: 30px;

  color: #fff;

  margin-bottom: 18px;
}

.cta-card p {
  color: rgba(255, 255, 255, 0.82);

  line-height: 1.8;

  margin-bottom: 35px;
}

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

.cta-buttons {
  display: flex;

  flex-direction: column;

  gap: 18px;
}

.btn-primary,
.btn-outline {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  height: 58px;

  border-radius: 50px;

  font-size: 16px;

  font-weight: 700;

  transition: 0.35s var(--ease);
}

/* Primary */

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));

  color: var(--royal-deep);
}

.btn-primary:hover {
  transform: translateY(-4px);

  box-shadow: 0 15px 35px rgba(201, 162, 39, 0.45);
}

.btn-primary i {
  transition: 0.35s;
}

.btn-primary:hover i {
  transform: translateX(8px);
}

/* Outline */

.btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.3);

  color: #fff;
}

.btn-outline:hover {
  background:#fff;

  color: var(--royal);
}

/*==================================================
            FLOATING SHAPES
==================================================*/

.cta-shape {
  position: absolute;

  border-radius: 50%;

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

  animation: floatShape 8s ease-in-out infinite;
}

.shape-1 {
  width: 260px;

  height: 260px;

  top: -80px;

  left: -60px;
}

.shape-2 {
  width: 180px;

  height: 180px;

  bottom: -50px;

  right: 120px;

  animation-delay: 2s;
}

.shape-3 {
  width: 120px;

  height: 120px;

  top: 80px;

  right: -30px;

  animation-delay: 4s;
}

@keyframes floatShape {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

/*==================================================
                CTA ANIMATIONS
==================================================*/

.cta-content,
.cta-card {
  opacity: 0;

  transform: translateY(60px);

  transition: all 0.9s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.cta.show .cta-content {
  opacity: 1;

  transform: translateY(0);
}

.cta.show .cta-card {
  opacity: 1;

  transform: translateY(0);

  transition-delay: 0.3s;
}

/*==================================================
            ICON FLOAT
==================================================*/

.cta-card > i {
  animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/*==================================================
            DECORATION
==================================================*/

.cta-content h2 {
  position: relative;
}

.cta-content h2::after {
  content: "";

  display: block;

  width: 120px;

  height: 5px;

  margin-top: 20px;

  border-radius: 30px;

  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

/*==================================================
            CARD GLOW
==================================================*/

.cta-card {
  position: relative;

  overflow: hidden;
}

.cta-card::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    130deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );

  transform: translateX(-150%);
}

.cta-card:hover::before {
  transform: translateX(150%);

  transition: 1s;
}

/*==================================================
            FEATURES
==================================================*/

.cta-feature {
  transition: 0.35s;
}

.cta-feature:hover {
  transform: translateX(8px);
}

.cta-feature:hover i {
  transform: scale(1.2);
}

.cta-feature i {
  transition: 0.35s;
}
/*==================================================
            BUTTONS
==================================================*/

.btn-primary,
.btn-outline {
  position: relative;

  overflow: hidden;
}

.btn-primary::before,
.btn-outline::before {
  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

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

  border-radius: 50%;

  left: -300px;

  top: 50%;

  transform: translateY(-50%);

  transition: 0.8s;
}

.btn-primary:hover::before,
.btn-outline:hover::before {
  left: 120%;
}

/*==================================================
                1200px
==================================================*/

@media (max-width: 1200px) {
  .cta-wrapper {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .cta-content {
    text-align: center;
  }

  .cta-content p {
    margin: auto;
  }

  .cta-content h2::after {
    margin: 20px auto 0;
  }

  .cta-features {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta-action {
    max-width: 500px;

    margin: auto;
  }
}

/*==================================================
                768px
==================================================*/

@media (max-width: 768px) {
  .cta {
    padding: 90px 0;
  }

  .cta-content h2 {
    font-size: 38px;
  }

  .cta-content p {
    font-size: 16px;
  }

  .cta-features {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .cta-card {
    padding: 40px 30px;
  }
}

/*==================================================
                576px
==================================================*/

@media (max-width: 576px) {
  .cta {
    padding: 70px 0;
  }

  .cta-content h2 {
    font-size: 30px;
  }

  .cta-card {
    padding: 35px 25px;
  }

  .cta-card > i {
    width: 80px;

    height: 80px;

    font-size: 30px;
  }

  .cta-card h3 {
    font-size: 26px;
  }

  .btn-primary,
  .btn-outline {
    height: 54px;

    font-size: 15px;
  }
}

/*==================================================
        GLOBAL SECTION SPACING FIX
        DESKTOP + MOBILE
==================================================*/

/*==========================================
            ABOUT SECTION
==========================================*/

.about{

    padding:80px 0;

}


/*==========================================
            WHY CHOOSE US
==========================================*/

.why-choose{

    padding:80px 0;

}

.section-header{

    margin-bottom:50px;

}


/*==========================================
                COURSES
==========================================*/

.courses{

    padding:85px 0;

}

.course-slider{

    margin-top:45px;

    padding:10px 0;

}


/*==========================================
            ACHIEVEMENTS
==========================================*/

.achievements{

    padding:85px 0;

}

.achievements .section-header{

    margin-bottom:50px;

}


/*==========================================
                CTA
==========================================*/

.cta{

    padding:85px 0;

}


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

@media (max-width:992px){

    .about{

        padding:70px 0;

    }

    .why-choose{

        padding:70px 0;

    }

    .courses{

        padding:75px 0;

    }

    .achievements{

        padding:75px 0;

    }

    .cta{

        padding:75px 0;

    }

}


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

@media (max-width:768px){

    /*------------------------------------------
                ABOUT
    ------------------------------------------*/

    .about{

        padding:60px 0;

    }

    .about-grid{

        gap:35px;

    }


    /*------------------------------------------
                WHY CHOOSE
    ------------------------------------------*/

    .why-choose{

        padding:60px 0;

    }

    .section-header{

        margin-bottom:35px;

    }


    /*------------------------------------------
                COURSES
    ------------------------------------------*/

    .courses{

        padding:65px 0;

    }

    .course-slider{

        margin-top:30px;

        padding:5px 0;

    }


    /*------------------------------------------
                ACHIEVEMENTS
    ------------------------------------------*/

    .achievements{

        padding:65px 0;

    }

    .achievements .section-header{

        margin-bottom:35px;

    }


    /*------------------------------------------
                    CTA
    ------------------------------------------*/

    .cta{

        padding:65px 0;

    }

}


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

@media (max-width:576px){

    .about{

        padding:50px 0;

    }

    .about-grid{

        gap:28px;

    }


    .why-choose{

        padding:50px 0;

    }

    .section-header{

        margin-bottom:30px;

    }


    .courses{

        padding:55px 0;

    }

    .course-slider{

        margin-top:25px;

    }


    .achievements{

        padding:55px 0;

    }

    .achievements .section-header{

        margin-bottom:30px;

    }


    .cta{

        padding:55px 0;

    }

    .cta-wrapper{

        gap:35px;

    }

}


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

@media (max-width:400px){

    .about{

        padding:45px 0;

    }

    .why-choose{

        padding:45px 0;

    }

    .courses{

        padding:50px 0;

    }

    .achievements{

        padding:50px 0;

    }

    .cta{

        padding:50px 0;

    }

}
/*==================================================
    FIX LARGE WHITE SPACE BEFORE WHY CHOOSE US
==================================================*/

@media (max-width: 768px){

    .about{
        padding-bottom:30px !important;
    }

    .why-choose{
        padding-top:35px !important;
    }

}


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

@media (max-width: 576px){

    .about{
        padding-bottom:25px !important;
    }

    .why-choose{
        padding-top:30px !important;
    }

}


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

@media (max-width:400px){

    .about{
        padding-bottom:20px !important;
    }

    .why-choose{
        padding-top:25px !important;
    }

}
/*==================================================
            CTA CONTACT BUTTON
==================================================*/

.cta .cta-buttons .btn-outline{

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    ) !important;

    color:var(--royal) !important;

    border:2px solid var(--gold) !important;

}


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

.cta .cta-buttons .btn-outline:hover{

    background:var(--gold-light) !important;

    color:var(--royal) !important;

    border-color:var(--gold-light) !important;

    transform:translateY(-3px);

}
/*==================================================
        FINAL MOBILE SIDEBAR FIX
        STABLE AT TOP / MIDDLE / BOTTOM
==================================================*/

@media (max-width: 992px){

    /*------------------------------------------
            OVERLAY
    ------------------------------------------*/

    .mobile-overlay{

        position:fixed;

        inset:0;

        width:100%;

        height:100vh;

        background:rgba(7,25,82,.60);

        backdrop-filter:blur(4px);

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

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        z-index:9998;

        transition:
            opacity .35s ease,
            visibility .35s ease;

    }


    .mobile-overlay.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }


    /*------------------------------------------
            SIDEBAR
    ------------------------------------------*/

    .mobile-sidebar{

        position:fixed !important;

        top:0 !important;

        left:0 !important;

        bottom:0 !important;

        width:min(390px,88vw) !important;

        height:100dvh !important;

        max-height:100dvh !important;

        margin:0 !important;

        padding:0 !important;

        background:#fff !important;

        display:flex !important;

        flex-direction:column !important;

        overflow:hidden !important;

        visibility:hidden;

        transform:translateX(-105%);

        transition:
            transform .4s ease,
            visibility .4s ease;

        z-index:9999 !important;

        box-shadow:
            12px 0 40px rgba(0,0,0,.25);

    }


    /*------------------------------------------
            OPEN STATE
    ------------------------------------------*/

    .mobile-sidebar.active,
    .mobile-sidebar.open,
    .mobile-sidebar.show{

        visibility:visible;

        transform:translateX(0);

    }


    /*------------------------------------------
            HEADER
    ------------------------------------------*/

    .mobile-header{

        position:relative;

        flex:0 0 auto;

        width:100%;

        min-height:175px;

        padding:25px 22px;

        display:flex !important;

        align-items:center;

        justify-content:space-between;

        background:
            linear-gradient(
                135deg,
                var(--royal-deep),
                var(--royal),
                var(--bright)
            );

        color:#fff;

        z-index:3;

    }


    /*------------------------------------------
            LOGO
    ------------------------------------------*/

    .mobile-logo{

        display:flex !important;

        align-items:center;

        gap:15px;

        min-width:0;

    }


    .mobile-logo img{

        width:62px;

        height:62px;

        flex:0 0 62px;

        object-fit:contain;

        border-radius:50%;

        background:#fff;

        padding:4px;

    }


    .mobile-logo h3{

        margin:0;

        color:#fff;

        font-size:25px;

        line-height:1.2;

        font-weight:800;

    }


    .mobile-logo span{

        display:block;

        margin-top:7px;

        color:rgba(255,255,255,.82);

        font-size:12px;

        line-height:1.5;

    }


    /*------------------------------------------
            CLOSE
    ------------------------------------------*/

    .close-menu{

        width:50px;

        height:50px;

        flex:0 0 50px;

        display:flex !important;

        align-items:center;

        justify-content:center;

        border:0;

        border-radius:50%;

        background:rgba(255,255,255,.12);

        color:#fff;

        cursor:pointer;

        font-size:24px;

    }


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

@media (max-width:768px){

    .mobile-sidebar{

        position:fixed !important;

        top:0 !important;
        right:0 !important;
        left:auto !important;
        bottom:0 !important;

        width:min(390px,92vw) !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;

        background:#fff !important;

        overflow:hidden !important;

        visibility:visible;

        z-index:99999 !important;

        box-sizing:border-box !important;

        /* Closed position */
        transform:translateX(100%) !important;

        transition:
            transform .4s ease,
            visibility .4s ease !important;

        box-shadow:
            -15px 0 40px rgba(13,33,84,.18);

    }


    /*------------------------------------------
            OPEN SIDEBAR
    ------------------------------------------*/

    .mobile-sidebar.active,
    .mobile-sidebar.open,
    .mobile-sidebar.show{

        transform:translateX(0) !important;

        visibility:visible !important;

    }


    /*------------------------------------------
            MOBILE HEADER
    ------------------------------------------*/

    .mobile-header{

        position:relative !important;

        flex:0 0 auto !important;

        width:100% !important;

        min-height:175px;

        padding:25px 20px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        box-sizing:border-box !important;

        background:
            linear-gradient(
                135deg,
                var(--royal-deep),
                var(--bright)
            ) !important;

        z-index:5 !important;

    }


    /*------------------------------------------
            LOGO AREA
    ------------------------------------------*/

    .mobile-logo{

        display:flex !important;

        align-items:center !important;

        gap:14px !important;

        min-width:0 !important;

        flex:1 !important;

    }


    .mobile-logo img{

        width:58px !important;
        height:58px !important;

        min-width:58px !important;
        min-height:58px !important;

        flex:0 0 58px !important;

        object-fit:contain !important;

        border-radius:50% !important;

        background:#fff !important;

    }


    .mobile-logo h3{

        margin:0 !important;

        color:#fff !important;

        font-size:25px !important;

        line-height:1.1 !important;

        font-weight:800 !important;

    }


    .mobile-logo span{

        display:block !important;

        margin-top:7px !important;

        color:rgba(255,255,255,.85) !important;

        font-size:12px !important;

        line-height:1.5 !important;

    }


    /*------------------------------------------
            CLOSE BUTTON
    ------------------------------------------*/

    .close-menu{

        flex:0 0 48px !important;

        width:48px !important;

        height:48px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        margin-left:12px !important;

        border:0 !important;

        border-radius:50% !important;

        background:rgba(255,255,255,.14) !important;

        color:#fff !important;

        font-size:23px !important;

        cursor:pointer !important;

        z-index:10 !important;

    }


    .close-menu:hover{

        background:rgba(255,255,255,.22) !important;

    }


    /*------------------------------------------
            MOBILE MENU
    ------------------------------------------*/

    .mobile-sidebar .mobile-menu{

        position:relative !important;

        flex:1 1 auto !important;

        width:100% !important;

        min-width:0 !important;

        min-height:0 !important;

        height:auto !important;

        max-height:none !important;

        margin:0 !important;

        padding:20px 18px 25px !important;

        box-sizing:border-box !important;

        list-style:none !important;

        display:flex !important;

        flex-direction:column !important;

        gap:4px !important;

        overflow-y:auto !important;

        overflow-x:hidden !important;

        background:#fff !important;

        visibility:visible !important;

        opacity:1 !important;

        transform:none !important;

        z-index:2 !important;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:thin;

    }


    /*------------------------------------------
            MENU ITEMS
    ------------------------------------------*/

    .mobile-sidebar .mobile-menu li{

        width:100% !important;

        min-width:0 !important;

        flex:0 0 auto !important;

        display:block !important;

        margin:0 !important;

        padding:0 !important;

    }


    .mobile-sidebar .mobile-menu li a{

        width:100% !important;

        min-height:62px !important;

        box-sizing:border-box !important;

        padding:14px 20px !important;

        margin:0 !important;

        display:flex !important;

        align-items:center !important;

        gap:25px !important;

        color:var(--royal-deep) !important;

        background:transparent !important;

        border-radius:12px !important;

        font-size:18px !important;

        font-weight:600 !important;

        line-height:1.3 !important;

        text-decoration:none !important;

        visibility:visible !important;

        opacity:1 !important;

        transform:none !important;

    }


    .mobile-sidebar .mobile-menu li a i{

        width:28px !important;

        min-width:28px !important;

        flex:0 0 28px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        color:var(--royal) !important;

        font-size:20px !important;

    }


    .mobile-sidebar .mobile-menu li a:hover{

        background:rgba(22,50,122,.07) !important;

        color:var(--royal) !important;

    }


    /*------------------------------------------
            MOBILE FOOTER
    ------------------------------------------*/

    .mobile-footer{

        position:relative !important;

        flex:0 0 auto !important;

        width:100% !important;

        box-sizing:border-box !important;

        padding:18px !important;

        margin:0 !important;

        background:#fff !important;

        border-top:1px solid #e5e7eb !important;

        box-shadow:
            0 -8px 20px rgba(13,33,84,.08);

        z-index:4 !important;

    }


    /*------------------------------------------
            FOOTER BUTTONS
    ------------------------------------------*/

    .mobile-footer .mobile-btn{

        width:100% !important;

        height:56px !important;

        min-height:56px !important;

        box-sizing:border-box !important;

        margin:0 0 14px !important;

        padding:0 15px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        border-radius:16px !important;

        font-size:17px !important;

        font-weight:700 !important;

        text-decoration:none !important;

    }


    .mobile-footer .mobile-btn:last-child{

        margin-bottom:0 !important;

    }


    /*------------------------------------------
            STUDENT LOGIN
    ------------------------------------------*/

    .mobile-footer .mobile-btn:not(.secondary){

        background:
            linear-gradient(
                135deg,
                var(--royal-deep),
                var(--bright)
            ) !important;

        color:#fff !important;

    }


    /*------------------------------------------
            ONLINE ADMISSION
    ------------------------------------------*/

    .mobile-footer .mobile-btn.secondary{

        background:
            linear-gradient(
                135deg,
                var(--gold),
                var(--gold-light)
            ) !important;

        color:var(--royal-deep) !important;

    }

}


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

@media (max-width:576px){

    .mobile-sidebar{

        width:min(390px,92vw) !important;

    }


    .mobile-header{

        min-height:160px !important;

        padding:20px 18px !important;

    }


    .mobile-logo{

        gap:12px !important;

    }


    .mobile-logo img{

        width:56px !important;
        height:56px !important;

        min-width:56px !important;
        min-height:56px !important;

        flex-basis:56px !important;

    }


    .mobile-logo h3{

        font-size:23px !important;

    }


    .mobile-logo span{

        font-size:11px !important;

        max-width:150px !important;

    }


    .close-menu{

        width:46px !important;
        height:46px !important;

        flex-basis:46px !important;

        font-size:22px !important;

    }


    .mobile-sidebar .mobile-menu{

        padding:18px 14px 22px !important;

        gap:2px !important;

    }


    .mobile-sidebar .mobile-menu li a{

        min-height:60px !important;

        padding:13px 18px !important;

        gap:21px !important;

        font-size:17px !important;

    }


    .mobile-sidebar .mobile-menu li a i{

        width:26px !important;

        min-width:26px !important;

        flex-basis:26px !important;

        font-size:19px !important;

    }


    .mobile-footer{

        padding:15px !important;

    }


    .mobile-footer .mobile-btn{

        height:54px !important;

        min-height:54px !important;

        margin-bottom:12px !important;

        font-size:16px !important;

    }

}


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

@media (max-width:380px){

    .mobile-sidebar{

        width:94vw !important;

    }


    .mobile-header{

        min-height:150px !important;

        padding:18px 15px !important;

    }


    .mobile-logo img{

        width:52px !important;
        height:52px !important;

        min-width:52px !important;
        min-height:52px !important;

        flex-basis:52px !important;

    }


    .mobile-logo h3{

        font-size:21px !important;

    }


    .mobile-logo span{

        font-size:10px !important;

    }


    .close-menu{

        width:44px !important;
        height:44px !important;

        flex-basis:44px !important;

    }


    .mobile-sidebar .mobile-menu{

        padding:15px 12px 18px !important;

    }


    .mobile-sidebar .mobile-menu li a{

        min-height:56px !important;

        padding:12px 16px !important;

        gap:18px !important;

        font-size:16px !important;

    }


    .mobile-sidebar .mobile-menu li a i{

        width:24px !important;

        min-width:24px !important;

        flex-basis:24px !important;

        font-size:18px !important;

    }


    .mobile-footer{

        padding:13px !important;

    }


    .mobile-footer .mobile-btn{

        height:51px !important;

        min-height:51px !important;

        font-size:15px !important;

    }

}
}
/*==================================================
        MOBILE HERO TAG POSITION
==================================================*/

@media (max-width:768px){

    .hero-content{

        position:relative;

        top:-45px;

    }

    .hero-tag{

        position:relative;

        top:-55px;

        margin-bottom:-25px;

        font-size:11px;

        padding:7px 16px;

    }

    .hero-content h1{

        font-size:30px;

        line-height:1.15;

    }

    .hero-content h1 span{

        font-size:30px;

        line-height:1.15;

    }

    .hero-location{

        font-size:14px;

        line-height:1.55;

    }

}


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

@media (max-width:480px){

    .hero-content{

        top:-40px;

    }

    .hero-tag{

        top:-45px;

        margin-bottom:-20px;

        font-size:10px;

        padding:6px 14px;

    }

    .hero-content h1{

        font-size:26px;

        line-height:1.15;

    }

    .hero-content h1 span{

        font-size:26px;

        line-height:1.15;

    }

    .hero-location{

        font-size:13px;

        line-height:1.5;

    }

}