/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/
:root {

    /* COLORS */
    --white: hsla(0, 0%, 100%);
    --orange: #f78d0f;
    --dark-orange: #c16223;
    --light-gray: hsl(120, 1%, 73%);
    --dark-gray: hsl(0, 0%, 35%);
    --black-main: hsl(30, 5%, 16%);
    --dark-blue: #063175;
    --gray1: hsla(0, 0%, 95%, 100%);
    --gray2: hsla(0, 0%, 74%, 100%);
    --black: hsla(0, 0%, 0%, 1);
  --black-alpha-80: hsla(0, 0%, 0%, 0.8);
  

  /* GRADIENT COLOR */
  --loading-text-gradient: linear-gradient(90deg, transparent 0% 16.66%, var(--orange) 33.33% 50%,  transparent 66.66% 75%);

  /* TYPOGRAPHY */

  /* FONT-FAMILY */
  --fontFamily-forum: 'Mulish', sans-serif;
  --fontFamily-dm_sans: 'Poppins', sans-serif;

  /* FONT-SIZE */
  --fontSize-display-1: calc(1.3rem + 6.7vw);
  --fontSize-headline-1: calc(2rem + 2.5vw);
  --fontSize-headline-2: calc(1.3rem + 2.4vw);
  --fontSize-title-1: calc(1.6rem + 1.2vw);
  --fontSize-title-2: 2.2rem;
  --fontSize-title-3: 2.1rem;
  --fontSize-title-4: calc(1.6rem + 1.2vw);
  --fontSize-body-1: 2.4rem;
  --fontSize-body-2: 1.6rem;
  --fontSize-body-3: 1.8rem;
  --fontSize-body-4: 1.6rem;
  --fontSize-label-1: 1.4rem;
  --fontSize-label-2: 1.2rem;

  /* FONT-WEIGHT */
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;

  /* LINE-HEIGHT */
  --lineHeight-1: 1em;
  --lineHeight-2: 1.2em;
  --lineHeight-3: 1.5em;
  --lineHeight-4: 1.6em;
  --lineHeight-5: 1.85em;
  --lineHeight-6: 1.4em;

  /* LETTER-SPACING */
  --letterSpacing-1: 0.15em;
  --letterSpacing-2: 0.4em;
  --letterSpacing-3: 0.2em;
  --letterSpacing-4: 0.3em;
  --letterSpacing-5: 3px;

  /*SPACING */
  --section-space: 80px;

  /* SHADOW */
  --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);

  /* BORDER-RADIUS */
  --radius-24: 24px;
  --radius-circle: 50%;

  /* TRANSITION */
  --transition-1: 250ms ease;
  --transition-2: 500ms ease;
  --transition-3: 1000ms ease;
  --transition-4: 2000ms ease;
  }




  /*-----------------------------------*\
    #RESET
  \*-----------------------------------*/

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

  li {list-style: none;}

  a,
  img,
  data,
  input,
  button,
  select,
  ion-icon,
  textarea {
    display: block;
  }

  a{
    color: inherit;
    text-decoration: none;
  }

  img{ height: auto;}

  input,
  button,
  select,
  textarea {
    background: none;
    border: none;
    font: inherit;
  }

  input,
  select,
  textarea {
    width: 100%;
    outline: none;
  }

  button{cursor: pointer;}

  address{font-style: normal;}

  html{
    font-size: 10px;
    scroll-behavior: smooth;
  }

  body{
    background-color: var(--white);
    color: var(--white);
    font-family: var(--fontFamily-forum);
    font-size: var(--fontSize-body-4);
    font-weight: var(--weight-regular);
    line-height: var(--lineHeight-5);
    overflow: hidden;
    height: 300vh;
  }

  body.loaded { overflow: overlay;}

  body.nav-active { overflow: hidden;}

  ::-webkit-scrollbar {width: 5px;}

  ::-webkit-scrollbar-track {background-color: transparent;}

  ::-webkit-scrollbar-thumb {background-color: var(--orange);}




  /*-----------------------------------*\
    #TYPOGRAPHY
  \*-----------------------------------*/
  .headline-1,
  .title-1
  .title-2
  .title-3 {
    color: var(--white);
    font-family: var(--fontFamily-dm_sans);
    font-weight: var(--weight-bold);
    line-height: var(--lineHeight-2);
  }

  .display-1 {
      color: var(--black);
    font-size: var(--fontSize-display-1);
  }

  .headline-1 {
    color: var(--black);
    font-size: var(--fontSize-headline-1);
  }

  .headline-2 {
    color: var(--black);
    font-size: var(--fontSize-headline-2);
    font-weight: var(--weight-black);
    line-height: var(--lineHeight-6);
    text-transform: capitalize;
  }

  .headline-3 {
    color: var(--dark-blue);
    font-size: 32px;
    /* font-size: var(--fontSize-headline-2); */
    font-weight: var(--weight-black);
    line-height: var(--lineHeight-6);
    text-transform: capitalize;
  }

  .title-1 { font-size: var(--fontSize-title-1);}

  .title-2 { font-size: var(--fontSize-title-2);}

  .title-3 { font-size: var(--fontSize-title-3);}



  .body-1 {
    font-size: var(--fontSize-body-1);
    line-height: var(--lineHeight-6);
  }

  .body-2 {
      color: var(--black);
    font-size: var(--fontSize-body-2);
    line-height: var(--lineHeight-4);
  }

  .body-3 {
    font-size: var(--fontSize-body-3);
  }
  .body-4 {
    font-size: var(--fontSize-body-4);
  }

  .label-1 { font-size: var(--fontSize-label-1);}

  .label-2 {
    color: var(--orange);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    font-size: 20px;
    margin-block-end: 12px;
  }

  .label-3 {
    position: relative;
    margin-top: -60px;
    color: var(--dark-gray);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    font-size: 20px;
    margin-block-end: 12px;
  }





  /*-----------------------------------*\
    #REUSED STYLE
  \*-----------------------------------*/
  .container {padding-inline: 20px;}

  .separator {
    width: 8px;
    height: 8px;
    border: 1px solid var(--orange);
    transform: rotate(45deg);
  }

  .contact-label { font-weight: var(--weight-bold);}

  .contact-number {
    color: var(--orange);
    max-width: max-content;
    margin-inline: auto;
  }

  .hover-underline {
    position: relative;
    max-width: max-content;
  }

  .hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-block: 1px solid var(--orange);
    transform: scaleX(0.2);
    opacity: 0;
    transition: var(--transition-2);
  }

  .hover-underline:is(:hover, :focus-visible):after{
    transform: scaleX(1);
    opacity: 1;
  }

  .contact-number::after{ bottom: -5px;}

  .text-center { text-align: center;}
  .text-left { text-align: left;}

  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-inline: auto;
    z-index: -1;
  }

  .w-100{width: 100%;}

  .section-title{
    color: var(--dark-blue);
    font-size: 3.2rem;
    font-family: var(--fontFamily-dm_sans);
    font-weight: var(--weight-bold);
    line-height: var(--lineHeight-2);
  }

  .section-subtitle {
    position: relative;
    margin-top: -60px;
    color: var(--dark-blue);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    font-size: 32px;
    margin-block-end: 12px;
  }

  .hero-title{
    text-transform: uppercase;
    font-weight: var(--weight-black);
  }

  .hero-title span{
      color: var(--orange);
  }


  .btn {
    position: relative;
    color: var(--orange);
    font-size: var(--fontSize-label-2);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letterSpacing-5);
    max-width: max-content;
    border: 2px solid var(--orange);
    padding: 5px 35px;
    overflow: hidden;
    z-index: 1;
  }

  .btn::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 200%;
    border-radius: var(--radius-circle);
    background-color: var(--orange);
    transition: var(--transition-2);
    z-index: -1;
  }

  .btn .text { transition: var(--transition-1);}

  .btn .text-2 {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: max-content;
    color: var(--white);
  }

  .btn:is(:hover, :focus-visible)::before { bottom: -50%;}

  .btn:is(:hover, :focus-visible) .text-1 { transform: translateY(-40px);}

  .btn:is(:hover, :focus-visible) .text-2 {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .btn-secondary {
    background-color: var(--orange);
    color: var(--white);
  }

  .btn-secondary::before { background-color: var(--black);}

  .btn-secondary .text-2 { color: var(--white);}


  .has-before,
  .has-after {
    position: relative;
    z-index: 1;
  }

  .has-before::before,
  .has-after::after {
    content: "";
    position: absolute;
  }

  .section {
    position: relative;
    padding-block: var(--section-space);
    overflow: hidden;
    z-index: 1;
  }

  .bg-white-10 { background-color: var(--white)}

  .grid-list {
    display: grid;
    gap: 10px;
  }

  .hover\:shine{ position: relative;}

  .hover\:shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(to right, transparent 0%, #fff6 100%);
    transform: skewX(-0.08turn) translateX(-180%);
  }

  .hover\:shine:is(:hover, :focus-within)::after {
    transform: skewX(-0.08turn) translateX(275%);
    transition: var(--transition-3);
  }

  .img-holder {
    aspect-ratio: var(--width) / var(--height);
    overflow: hidden;
  }

  .btn-text {
    color: var(--orange);
    padding-block-end: 4px;
    margin-inline: auto;
    text-transform: uppercase;
    letter-spacing: var(--letterSpacing-3);
    font-weight: var(--weight-bold);
    transition: var(--transition-1);
  }

  .btn-text:is(:hover, :focus-within) { color: var(--white);}

  .shape {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .1;
    z-index: -1;
  }

  .move-anim { animation: move 5s linear infinite;}

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

    50% { transform: translateY(30px);}
  }

  .has-bg-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .input-field {
    background-color: var(--white);
    color: var(--dark-gray);
    height: 56px;
    border-radius: 35px;
    padding: 10px 20px;
    border: 1px solid var(--dark-gray);
    margin-block-start: 10px;
    margin-block-end: 20px;
    outline: none;
    transition: border-color var(--transition-2);
  }

  .input-field::placeholder { color: inherit;}

  .input-field:focus { border-color: var(--orange);}

  .icon-wrapper {
    position: relative;
    margin-block-end: 20px;
  }

  .icon-wrapper .input-field {
    margin-block-end: 0;
    padding-inline-start: 40px;
    appearance: none;
    cursor: pointer;
  }


  /*-----------------------------------*\
    #TOPBAR
  \*-----------------------------------*/
  .topbar{
    display: none;
  }



  /*-----------------------------------*\
    #HEADER
  \*-----------------------------------*/
  .header .btn { display: none;}

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    padding-block: 30px;
    z-index: 4;
    border-block-end: 1px solid transparent;
    transition: var(--transition-1);
  }

  .header.active {
    padding-block: 20px;
    background-color: var(--white);
    border-color: var(--black);
  }

  .header.hide {
    transform: translateY(-100%);
    transition-delay: 250ms;
  }

  .header .container {
    padding-inline: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }


  .nav-open-btn {
    padding: 12px;
    padding-inline-end: 0;
  }

  .nav-open-btn i{
      font-size: 4rem;
      color: var(--orange);
  }


  .header .logo img{
    width: 300px;
}

  .navbar {
    position: fixed;
    background-color: var(--white);
    top: 0;
    left: -360px;
    bottom: 0;
    max-width: 360px;
    width: 100%;
    padding-inline: 30px;
    padding-block-end: 50px;
    overflow-y: auto;
    visibility: hidden;
    z-index: 2;
    transition: var(--transition-2);
    }

    .navbar.active {
      visibility: visible;
      transform: translateX(360px);
    }

    .navbar .close-btn {
      color: var(--black);
      border: 1px solid currentColor;
      padding: 4px;
      border-radius: var(--radius-circle);
      margin-inline-start: auto;
      margin-block: 20px 0;
    }

    .navbar .close-btn ion-icon {
      --ionicon-stroke-width: 40px;
    }

    .navbar .close-btn:is(:hover, :focus-visible) { color: var(--orange);}

    .navbar .logo {
      margin-block-end: 40px;
    }

    .navbar-list {
      margin-block-end: 40px;
    }

    .navbar .navbar-list li{
      list-style: none;
    }

    .navbar-item {
      border-block-end: 1px solid var(--dark-gray);
    }

    .navbar-link {
      position: relative;
      color: var(--black);
      font-size: var(--fontSize-label-2);
      text-transform: capitalize;
      padding-block: 10px;
      max-width: unset;
    }

    .navbar-link::after { display: none;}

    .navbar-link {
      transition: var(--transition-1);
    }

    .navbar-link:is(:hover, :focus-visible, .active){
      color: var(--orange);
      font-size: 15px;
    }

    nav ul li a{
      font-size: 16px;
      color: var(--dark-blue);
      display: block;
  }

  nav ul li a:hover{
    color: var(--orange);
}

nav ul li ul{
  width: 100%;
  margin-block-start: -10px;
  display: none;
}

nav ul li ul li{
  list-style: none;
  padding-left: 30px;
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

nav ul li:focus-within > ul,
nav ul li:hover > ul{
    display: initial;
}


    .navbar-title {
      margin-block-end: 15px;
    }

    .navbar-text {
      margin-block: 10px;
    }

    .navbar-text span{
      color: var(--orange);
    }

    .navbar .body-4 {
      color: var(--black);
      line-height: 1.5;
    }

    .sidebar-link { transition: var(--transition-1);}

    .sidebar-link:is(:hover, :focus-visible) {
      color: var(--orange);
    }

    .navbar .text-center .separator {
      margin-block: 30px;
      margin-inline: auto;
    }

    .navbar .contact-label {
      margin-block-end: 10px;
      color: var(--orange);
    }

    .navbar::-webkit-scrollbar-thumb { background-color: var(--dark-gray);}

    .nav-social{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;

    }

    .nav-social a{
        font-size: 30px;
        color: var(--orange);
    }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--black-alpha-80);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-2);
    z-index: 1;
  }

  .overlay.active {
    opacity: 1;
    pointer-events: all;
  }


  /*-----------------------------------*\
    #HERO
  \*-----------------------------------*/

  .hero{
    margin-top: -30px;
  }

  .hero .slider-btn { display: none;}

  .hero {
    position: relative;
    padding-block: 120px;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
  }

  .hero .swiper{
    background: var(--light-gray);
    margin-inline: auto;
    height: 100vh;
    width: 100%;
  }

  .hero .swiper-wrapper .slide1{
    background-image: url(/img/slide1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .hero .swiper-wrapper .slide2{
    background-image: url(/img/slide2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .hero .slider-caption {
    position: absolute;
    top: 25%;
    text-align: center;
    left: 0;
    right: 0;
    width: 100%;
    height: 370px;
    background: var(--dark-blue);
    z-index: 1;
    padding: 20px;
  }
  
  .hero .slider-content{
    display: grid;
    gap: 15px;
    margin-bottom: 20px;
    top: 15%;
  }
  
  .hero .slider-caption .slider-content h5 {
    font-size: 3rem;
    line-height: 1.2;
  }
  
  .hero .slider-caption p {
    font-size: 16px;
    line-height: 1.5;
  }

  .hero .w-100 {
    min-height: 90vh;
  }

  .sub-text{
      position: relative;
      padding-top: -100px;
      display: inline-flex;
  }


  .sub-text img{
      position: absolute;
      width: 50px;
      height: 10px;
      left: -60px;
      top: -50px;
  }

  .hero-img{
    position: relative;
    bottom: 0;
    margin-inline: auto;
    width: 300px;
}

  .hero .slider-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    padding-block-start: 100px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-3);
    z-index: 0;
  }

  .hero .slider-item.active {
    opacity: 1;
    visibility: visible;
  }

  .hero .slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.15);
    pointer-events: none;
    user-select: none;
    z-index: -1;
  }

  .hero .slider-item.active .slider-bg {
    animation: smoothScale 7s linear forwards;
  }

  @keyframes smoothScale {
    0% { transform: scale(1);}
    100% { transform: scale(1.15);}
  }

  .hero .hero-title{
    line-height: 1;
    font-weight: 900;
  }

  .hero .section-subtitle::after { margin-block: 14px 20px;}

  .hero-text {margin-block: 10px 40px;}

  .hero .btn { margin-inline: auto;}

  .slider-reveal {
    transform: translateY(30px);
    opacity: 0;
  }

  .hero .slider-item.active .slider-reveal {
    animation: sliderReveal 1s ease forwards;
  }

  @keyframes sliderReveal {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }

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

  .hero .slider-item.active .section-subtitle { animation-delay: 500ms;}

  .hero .slider-item.active .hero-title { animation-delay: 1000ms;}

  .hero .slider-item.active .hero-text { animation-delay: 1.5s;}

  .hero .slider-item.active .btn { animation-delay: 2s;}




  /*-----------------------------------*\
    #hero-bottom
  \*-----------------------------------*/

  .hero-bottom{
      position: relative;
      margin-top: -100px;
      z-index: 2;
  }

.hero-bottom-container{
  width: inherit;
  z-index: 2;
}

  .hero-bottom-card .section-text {
    color: var(--black);
    text-align: justify;
    padding: 20px;
    font-size: 16px;
    line-height: 1.5;
}

  .hero-bottom-card {
      display: grid;
      border-radius: 12px;
      grid-template-rows: auto 1fr;
      background: var(--white);
      box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);
      transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
    }

    .hero-bottom-card .title-4 { font-size: 20px;
      color: var(--dark-blue);
      font-weight: 900;
      margin-top: 30px;
      text-align: left;
      padding: 0 20px;
      text-transform: uppercase;
  }
  
  .hero-bottom-card .title-4 i{
      color: var(--orange);
  }

    .hero-bottom-card img{
        position: relative;
        width: 100%;
        height: 200px;
        border-radius: 12px 12px 0 0;
        cursor: pointer;

    }

    .hero-bottom-btn{
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .hero-bottom-btn .text i{
        color: var(--white);
    }

    .hero-bottom-card:hover {
        transform: scale(1.03);
    }


  /*-----------------------------------*\
    #ABOUT
  \*-----------------------------------*/
    .about-content .headline-1{
        text-transform: capitalize;
        margin-inline: 0;
    }


    .about-content .section-text{
      color: var(--black);
        font-size: 16px;
        font-family: 'Mulish', sans-serif;
        margin-block: 15px;
    }

    .about-content ul{
        color: var(--black);
        list-style-type: disc;
        font-size: 16px;
        padding-left: 30px;
    }

    .about-content .dot {
        margin-right: 10px;
        height: 10px;
        width: 10px;
        background-color: var(--black);
        border-radius: 50%;
        display: inline-block;
      }

      .about-card{
        margin-inline: auto;
        margin-top: 20px;
        display: grid;
        gap: 10px;
      }

      .about-card i{
        font-size: 30px;
        color: var(--orange);
    }

    .about-card h2{
        font-size: 16px;
        color: var(--white);
    }

   .about-card .card1{
        background-color: var(--dark-blue);
        padding: 10px;
        text-align: center;
    }

    .about-card .card2{
        background-color: var(--dark-blue);
        padding: 20px;
        text-align: center;
    }

    .about-card .card3{
        background-color: var(--dark-blue);
        padding: 20px;
        text-align: center;
    }

  .about .about-items .btn {
    margin-block-start: 30px;
  }

  .about-content ul .about-list{
    display: flex;
    gap: 10px;
  }

  .about .container .about-items{
    display: grid;
    gap: 30px;
  }

  .about-banner {
    position: relative;
  }

  .about-banner > .w-100 {
    margin-inline: auto;
    margin-top: 10px;
    }

  /*-----------------------------------*\
    #SERVICES
  \*-----------------------------------*/
  .services {
    position: static;
  }

  .services .section-background{
    padding: 30px 0;
  }

  .services .services-content p{
      color: var(--white);
      margin-top: 10px;
  }

  .services .services-content h2{
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 50px;
    color: var(--white);
    text-transform: capitalize;
}

.services .container .grid-list {
  display: grid;
  /* gap: 30px; */
}

.services .services-card .card{
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
    transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
} 

.services .services-card .card:hover{
  transform: scale(1.03);
}

.services .services-card .card i{
    font-size: 40px;
    color: var(--orange);
}

.services .services-card .card .title-4 {
  font-size: 20px;
  color: var(--dark-blue);
  font-weight: 900;
  margin: 10px;
}

.services .services-card .card .section-text{
    line-height: 1.5;
      padding: 0 30px;
      padding-bottom: 20px;
      color: var(--black);
  }

  .services .btn{
    margin-inline: auto;
    margin-block-start: 50px;
  }


  /*-----------------------------------*\
    #PHILOSOPHY
  \*-----------------------------------*/
  .philosophy{
    margin-block-end: 80px;
  }
  .philosophy .philosophy-content .section-title { 
    margin-block-end: 24px;
    font-size: 24px;
    margin-inline: 0;
    }

  .philosophy-card {
    position: relative;
    overflow: hidden;
  }

  .img-philosophy {
    max-width: 90%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-inline: auto;
    transform: rotate(5deg);
    z-index: -1;
  }

  .philosophy-card .card-content {
    position: absolute;
    display: flex;
    background-color: var(--dark-gray);
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    bottom: 0;
    left: 50%;
    padding: 35px 35px 25px;
    text-transform: uppercase;
    font-weight: 900;
  }

  .philosophy-card .card-content h3{
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
  }


  .philosophy-content{
      margin-top: 100px;
  }


  .philosophy-content .section-text{
    color: var(--black);
}

.progress-container{
    margin-top: 20px;
    display: grid;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.progress-bar{
    display: grid;
    gap: 10px;
}

.progress-bar .skill{
    width: 160px;
    height: 160px;
    position: relative;
}

.progress-bar .skill .outer{
    height: 160px;
    width: 160px;
    border-radius: 50%;
    padding: 20px;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(225, 225, 225, 0.7);
}

.progress-bar .skill .inner{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(225, 225, 225, 0.7), -0.5px -0.5px 0px rgba(225, 225, 225, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}

#number{
  font-size: 36px;
  font-weight: var(--weight-black);
  color: var(--dark-blue);
}

#number2{
font-size: 36px;
font-weight: var(--weight-black);
color: var(--dark-gray);
}

#number3{
font-size: 36px;
font-weight: var(--weight-black);
color: var(--orange);
}

.progress-container .text{
    color: var(--dark-blue);
    text-align: center;
    font-size: 16px;
    font-weight: var(--weight-bold);
}

.progress-container .text2{
    color: var(--dark-gray);
    text-align: center;
    font-size: 16px;
    font-weight: var(--weight-bold);
}

.progress-container .text3{
  color: var(--orange);
  text-align: center;
  font-size: 16px;
  font-weight: var(--weight-bold);
}

.skill circle {
    fill: none;
    stroke: var(--dark-blue);
    stroke-width: 20px;
    stroke-dasharray: 435;
    stroke-dashoffset: 435;
    animation: anim 3s linear forwards;
}

@keyframes anim {
    100% {
        stroke-dashoffset: 43;
    }

}

.second-skill circle {
    fill: none;
    stroke: var(--dark-gray);
    stroke-width: 20px;
    stroke-dasharray: 435;
    stroke-dashoffset: 435;
    animation: anim2 3s linear forwards;
}

@keyframes anim2 {
    100% {
        stroke-dashoffset: 21;
    }

}

.third-skill circle {
    fill: none;
    /* stroke: url(#GradientColor); */
    stroke: var(--orange);
    stroke-width: 20px;
    stroke-dasharray: 435;
    stroke-dashoffset: 435;
    animation: anim3 3s linear forwards;
}

@keyframes anim3 {
    100% {
        stroke-dashoffset: 0;
    }

}

svg{
    position: absolute;
    top: 0;
    left: 0;
}


  .philosophy-card:is(:hover, :focus-within) .img-cover { transition: scale(1.05);}

  .philosophy .btn {
    margin-inline: auto;
    margin-block-start: 40px;
  }

  .philosophy .container .shape{
    display: block;
    top: 0;
    left: 0;
  }


     /*-----------------------------------*\
    #WHAT-WE-DO
  \*-----------------------------------*/

  .what-we-do {
    position: static;
  }

  .what-we-do .has-bg-image{
    padding: 60px 0;
  }

  .what-we-do-content{
      z-index: 2;
  }
  
  .what-we-do-content .label-2{
      color: var(--white);
      font-size: 16px;
  }

  .what-we-do-content .section-title{
    color: var(--white);
    font-size: 20px;
    line-height: 1.5;
}

.what-we-do-content .section-text{
    color: var(--white);
    font-size: 16px;
}

.what-we-do .btn{
    margin-inline: auto;
}

.what-we-do-card{
    padding: 50px 20px;
}

.what-we-do-card .label-2{
    color: var(--orange);
    font-size: 16px;
}



  /*-----------------------------------*\
    #REVIEWS
  \*-----------------------------------*/

  .testimonies .headline-1{
    margin-block-end: 40px;
    font-size: 24px;
    }

.testimonies .headline-1 span{
    color: var(--orange);
    }

  .testimony {
    background: linear-gradient(-90deg, rgba(8, 32, 50, 0.8), rgba(8, 32, 50, 0.8)), url("img/review-bg.jpg"), #082032;;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

  .review-container{
    overflow: initial;
  }

  .review {
    text-align: center;
    z-index: 2;
    position: relative;
    margin: 15px;
    max-width: 700px;
    margin: auto;
}

.review .ri-double-quotes-r {
    font-size: 120px;
    position: absolute;
    opacity: 0.1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
}


.review img {
    width: 100px !important;
    height: 100px;
    border: 5px solid var(--orange);
    border-radius: 50%;
    margin: auto;
    margin-top: 30px;
}

.review h5 {
    margin-top: 16px;
    color: var(--white);
}

.review small {
  color: var(--orange);
}

.review p {
    margin-top: 26px;
    margin-bottom: 26px;
    font-size: 16px;
    color: var(--white);
    font-weight: 400;
    line-height: 1.5;
}

.review .stars {
    color: var(--orange);
}

/* Swiper class */

.swiper {
  position: relative;
  width: 100%;
  height: 550px;
}

.swiper-slider{
  display: grid;
  justify-content: center;
}

.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after{
content: '';
}


.swiper .swiper-button-prev,
.swiper .swiper-button-next{
  width: initial;
  height: initial;
  font-size: 5rem;
  color: var(--orange);
  display: none;
}

.swiper .swiper-button-prev{
  left: -1.7%;
}

.swiper .swiper-button-next{
  right: -1.7%;
}

.swiper .swiper-pagination-bullets{
bottom: 0;
}

.swiper .swiper-pagination-bullet{
    background-color: transparent;
    border: 2px solid var(--white);
    opacity: initial;
  }

  .swiper .swiper-pagination-bullet-active{
    background-color: var(--orange);
    border: none;
    opacity: initial;
  }



  /*-----------------------------------*\
    #INSIGHT
  \*-----------------------------------*/

  .insights .headline-1{
    text-transform: capitalize;
    font-size: 24px;
}


.insights .section-title { margin-block-end: 40px;}

.blog-list{
  display: grid;
  gap: 30px;
}

.blog-card{
  padding: 20px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}

.blog-card .banner{
  border-radius: 12px;
  overflow: hidden;
  margin-block-end: 15px;
}

.blog-card .banner img{transition: var(--transition-2);}

.blog-card .banner a:is(:hover, :focus) img{transform: scale(1.1);}

.blog-card .title{
  color: var(--dark-blue);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
  margin-block-end: 15px;
}

.blog-card .section-text{
  color: var(--black);
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5;
  margin-block-end: 15px;}

  .insight-btn{
    margin: 10px 0;
    color: var(--orange);
}

/*-----------------------------------*\
    #CALL BACK
  \*-----------------------------------*/
  .request hr{
    border: 0 none;
    width: 40%;
    height: 6px;
    background: var(--orange);
    border-radius: 5px;
    margin-inline: auto;
    margin-block-end: 40px;
}

  .request .headline-1{
    text-transform: capitalize;
    font-size: 24px;
    line-height: 1.5;
}


.request p{
    color: var(--black);
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5;
    text-align: center;
    margin-inline: auto;
}

.request .btn {
    margin-inline: auto;
    margin-block-start: 40px;
  }



/* Status color */
.color-fail{
  color: hsl(4, 71%, 50%);
  }

  .color-success{
  color: hsl(207, 56%, 45%);
  }

  /*-----------------------------------*\
    #MAP
  \*-----------------------------------*/

  .map-container{
      position: relative;
      width: 100%;
  }

  .map-items iframe{
      width: 100%;
      height: 350px;
      z-index: -1;
  }
    
  /*-----------------------------------*\
    #FOOTER
  \*-----------------------------------*/
  .footer-new{
    background-color: #063175;
    margin-top: -15px;
}
  
.footer-top{
  padding: 50px 0;
}

  .footer-brand div{
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  .footer-brand .open-hr{
    color: var(--orange);
    font-weight: var(--weight-bold);
  }

  .footer-brand .contact-link {
    transition: var(--transition-1);
  }

  .footer-brand .contact-link:is(:hover, :focus-visible) { color: var(--orange);}

  .footer-brand .label-1 { margin-block-end: 30px;}

  .footer-brand .label-1 .span {
    display: inline;
    color: var(--white);
  }

  .footer-brand .btn { min-width: 100%;}

  .footer-brand i{
    color: var(--white);
    font-size: 16px;
  }

  .footer-list,
  .newsletter {
    margin-block-start: 30px;
  }

  .footer-list-items .list-items li{
    display: flex;
    gap: 20px;
  }

  .footer-items h2{
    font-size: 24px;
  }

  .footer-list-items .list-items .footer-link{
    font-size: 14px;
  }

  .footer-link {
    color: var(--white);
    font-size: 16px;
    font-family: var(--fontFamily-forum);
    font-weight: var(--weight-regular);
    text-transform: capitalize;
    letter-spacing: var(--letterSpacing-1);
    transition: var(--transition-1);
  }

  .footer-link:is(:hover, :focus-visible) { color: var(--orange);}

  .newsletter {
    display: grid;
    gap: 20px;
  }

  .footer-top .icon-wrapper .input-field { cursor: text}

  .icon-wrapper{
    position: relative;
  }

  .icon-wrapper .submit{
    background: var(--orange);
    color: var(--white);
    width: 73px;
    height: 56px;
    border-radius: 35px;
    transition: var(--transition-2);
  }

  .icon-wrapper .submit:hover{
    background: var(--black);
    color: var(--white);
  }

  .submit{
    position: absolute;
    top: 0;
    right: 0;
  }

  .footer-bottom{
    background: var(--black);
    padding: 20px;
  }

  .copyright {
    color: var(--white);
    font-size: 16px;
  }

  .copyright span {
    display: inline;
    color: var(--orange);
  }

  .copyright .link {
    display: inline;
    color: var(--orange);
    text-decoration: underline;
  }


  


  /*-----------------------------------*\
    #MEDIA QUERIES
  \*-----------------------------------*/

  /* responsive for larger 575px screen */
  @media (min-width: 575px) {

    /* CUSTOM PROPERTY */

    :root {

      /* typography */

      --fontSize-body-2: 2rem;
    }


    /* REUSED STYLE */
    .section-subtitle {
      font-size: 32px;
      margin-block-end: 30px;
    }

    :is(.hero-bottom, .about) .section-text {
      max-width: 100%;
      margin-inline: auto;
    }

  
    .contact-number { --fontSize-body-1:3rem}

  /* HEADER */
  .header.active { top: 0;}

  .header .btn {
    display: block;
    margin-inline-start: auto;
  }


  /* HERO */
  .hero-btn { transform: scale(0.7);}

  .sub-text img{
    display: none;
}

.hero-content .section-subtitle {
  margin-top: 40px;
}

.hero-text {font-size: 16px;}

.hero-title{
  font-size: 24px;
  line-height: 1.1;
}

.hero .slider-caption {
  /* position: absolute; */
  top: 30%;
}

.hero .slider-caption h5 {
  font-size: 2.5rem;
  line-height: 1.2;
}

.hero .slider-caption p {
  font-size: 16px;
  line-height: 1.5;
}


  /* HERO-BOTTOM */
  .hero-bottom .container {
    max-width: 100%;
    margin-inline: auto;
  }



  /* ABOUT */
  .about-content .section-text{
      font-size: 16px;
  }

  .about-content ul{
      font-size: 14px;
  }


  .about-card i{
    font-size: 24px;
}

  .about-card h2{
    font-size: 16px;
}


/* SERVICES */

.services .services-content h2{
font-size: 24px;
line-height: 1.5;
}

.services .services-card .card{
padding: 10px;
} 

.services .services-card .card i{
font-size: 50px;
}

.services .services-card .card .title-4 {
font-size: 24px;
}

.services .services-card .card .section-text{
line-height: 1.5;
font-size: 16px;
}


 

  /* PHILOSOPHY */
  .philosophy .container {
    max-width: 100%;
    margin-inline: auto;
  }

  .philosophy .container .philosophy-content .section-title{
    font-size: 28px;
  } 

  .progress-container .progress-bar .text,
  .progress-container .progress-bar .text2{
    font-size: 16px;
  }


  /* REVIEW */
  .testimonies .review-content .section-title{
    font-size: 32px;
  }

  .testimonies .testimony .review h5{
    font-size: 16px;
  }

  /* INSIGHT */
  .insights .insight-content .section-title{
    font-size: 32px;
  }

  /* FOOTER */
  .footer-brand > * {
    max-width: 90%;
  }

  .footer .input-wrapper { position: relative;}

  .footer .input-field {
    margin-block-end: 0;
    padding-inline-end: 205px;
  }

  .footer-brand .btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    min-width: max-content;
  }


  }


  /* responsive for larger 630px screen */
  @media (min-width: 630px) {
     
    /* HERO */
    .hero .slider-caption h5 {
      font-size: 2rem;
      line-height: 1.2;
    }
    
    .hero .slider-caption p {
      font-size: 16px;
      line-height: 1.5;
    }

  /* HERO-BOTTOM */
  .hero-bottom .hero-bottom-card {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero-bottom .hero-bottom-card .card-title{
    font-size: 24px;
  }

  .hero-bottom .hero-bottom-card .section-text{
    font-size: 16px;
  }

  /* ABOUT */
  .about .about-content .section-text,
  .about .about-content ul{
    font-size: 16px;
  }

  .about-card,
  .services-card .card{
    margin-inline: auto;
      max-width: 100%;
  }

  .about-banner > .w-100 {
      max-width: 100%;
    }


  /* PHILOSOPHY */
  .philosophy .container {
    max-width: 100%;
    margin-inline: auto;
  }


  /* FOOTER */
  .footer-brand > * {
    max-width: 90%;
  }

  }


  /* responsive for larger 700px screen */
  @media (min-width: 700px){
  
    .philosophy-card .card-content {
      width: 170px;
      height: 170px;
      left: 50%;
    }
  
    .philosophy-card .card-content h3{
      font-size: 18px;
    }

    .progress-container{
      display: flex;
      gap: 40px;
      align-items: center;
      justify-content: center;
      margin-block-end: 60px;
      /* margin-block-start: 40px; */
  }

  /*-----------------------------------*\
  #BLOG
\*-----------------------------------*/
.blog-card{
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 20px;
  padding: 30px;
}

.blog-card .banner{margin-block-end: 0;}

.blog-card .banner a {height: 100%;}
}


  /* responsive for larger 768px screen */
  @media (min-width: 768px) {

    /* REUSED STYLE */
    .grid-list { grid-template-columns: 1fr 1fr 1fr;}

    /* HERO */
    .hero .slider-btn { display: none;}

    .hero-bottom-container{
      gap: 30px 30px;
    }

    .hero-bottom .hero-bottom-card {
      max-width: 100%;
      margin-inline: auto;
      
    }

    .hero-bottom .grid-list{
      grid-template-columns: repeat(2, 1fr);
    }

    .services .services-card{
      grid-template-columns: repeat(2, 1fr);
    }


    .services-card .card{
      margin-inline: auto;
        max-width: 100%;
    }
    

    .philosophy-card .card-content {
      width: 200px;
      height: 200px;
      left: 50%;
    }
  
    .philosophy-card .card-content h3{
      font-weight: 900;
      font-size: 20px;
      line-height: 1.5;
    }

    .progress-container{
      gap: 60px;
  }
  
  .swiper {
    width: 80%;
    margin-inline: auto;
  }

  .insights .slider {
    position: relative;
    width: 100%;
    height: 820px;
  }

  .request {
    width: 80%;
    margin-inline: auto;
  }

    /* FOOTER */
    .footer-brand { grid-column: 1/2;}

    .footer-items{
      height: 810px;
  }
  .footer-top{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 0;
    gap: 30px;
  }
  
    .footer-list-items i{
      color: var(--white);
      font-size: 16px;
    }
  
    .list-items li{
      display: flex;
      gap: 10px;
    }


  
  }


/* responsive for larger 840px screen */
  @media (min-width: 840px){
    .insights .slider {
      position: relative;
      width: 100%;
      height: 850px;
    }
  }


  /* responsive for larger 900px screen */
  @media (min-width: 900px){

    .section-subtitle {
      font-size: 36px;
      margin-block-end: 40px;
    }

    /* #HERO */
  
    .hero .slider-caption {
      top: 0;
      text-align: left;
      left: 60%;
      width: 40%;
      height: 100vh;
    }
  
    .hero .slider-content{
      display: grid;
      margin-top: 30px;
      gap: 30px;
    }
  
    .hero .slider-content h5 {
      font-size: 2rem;
    }
    
    .hero .slider-content p {
      font-size: 16px;
    }

    .hero .btn{
      margin: 0;
    }

    .hero-bottom .grid-list{
      grid-template-columns: repeat(2, 1fr);
    }

    /* #ABOUT */

    .about-content .section-title{
      font-size: 26px;
    }

   .about .container .about-items{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

.about .container .about-items .about-card{
      width: 400px;
      z-index: 1;
      gap: 20px;
    }


  .about-banner > .w-100 {
    margin: 0;
    }


    .philosophy-card img {
      max-width: 50%;
    }

    .philosophy-card .card-content {
      left: 50%;
    }

    .progress-container{
      gap: 70px;
  }

  .insights .slider {
    position: relative;
    width: 100%;
    height: 900px;
  }

  /*================== FAQ ==================*/
.faqs__container{
  grid-template-columns: 1fr 1fr;
}

.faq{
  padding: 30px;
}  
  }


  /* responsive for larger 992px screen */
  @media (min-width: 992px) {

    /* #CUSTOM PROPERTY */
    :root {

      /* #SPACING */
      --section-space: 100px;

    }

    /* #REUSED STYLE */
    :is(.navbar, .header, .hero-bottom, .about, .services, .philosophy, .reviews, .request, .insights) .container { max-width: 1200px;}

    .section-subtitle {
      font-size: 36px;
      margin-block-end: 30px;
    }



    /* #TOP BAR */
    .topbar .container { max-width: unset;}
    .topbar-item:not(.link) { display: flex;}

    .topbar .separator { display: block;}


    /* #HERO */

    .hero .slider-btn{display: none;}

    .hero-header{
      display: flex;
      align-items: center;
      gap: 50px;
    }

    .hero .btn { margin: 0;}

    .hero-img{
      width: 490px;
  }

  .hero-bottom .grid-list{
    grid-template-columns: repeat(2, 1fr);
  }

    /* #ABOUT */
    .about .container .about-items{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .about-banner > .w-100 {
      margin: 0;
      }

      .philosophy-container .img-philosophy{
        max-width: 90%;
        width: 1200px;
      }
  
  
      .philosophy .philosophy-container{
        display: flex;
        align-items: center;
        gap: 10px;
      }
  
      .philosophy .philosophy-items .philosophy-content{
        text-align: left;
      }
  
      .philosophy .philosophy-items .philosophy-content .section-title{
        font-size: 24px;
      }
  
      .philosophy .philosophy-items .philosophy-content .section-text{
        font-size: 16px;
      }
  
      .philosophy-card .card-content {
        width: 150px;
        height: 150px;
      }
    
      .philosophy-card .card-content h3{
        font-size: 16px;
      }
  
  
    .progress-container{
      gap: 20px;
  }

  .philosophy .philosophy-items .btn{
    margin-inline: 0;
  }


  /* #REVIEW & INSIGHT */
  .swiper .swiper-button-prev,
.swiper .swiper-button-next{
  display: block;
}
  
  .swiper {
    width: 80%;
    margin-inline: auto;
  }


  /*================== FAQ ==================*/
.faqs__container{
  grid-template-columns: 1fr 1fr;
}

.faq{
  padding: 30px;
}

    /* #FOOTER */

    .footer-items{
      height: 820px;
  }

    .footer-top{
      gap: 50px 80px;
    }
    
  
    .footer-list-items i{
      color: var(--white);
      font-size: 16px;
    }

    .footer-list-items .list-items li{
      display: flex;
      gap: 10px;
    }

  }


  /* responsive for larger 1200px screen */
  @media (min-width: 1100px) {

    /* #CUSTOM PROPERTY */

    :root {


      /* #TYPOGRAPHY */

      --fontSize-title-2: 2.5rem;
    }


    /* #REUSED STYLE */

    .container,
    :is(.topbar, .header, .hero-bottom, .about, .services, .philosophy, .reviews, .request, .insights) .container {
      max-width: 1300px;
      width: 100%;
      margin-inline: auto;
    }




    /* #TOP BAR */
    .topbar {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding-block: 10px;
      border-block-end: 1px solid var(--black);
      z-index: 4;
      transition: var(--transition-1);
      background: var(--black);
    }
  
    .topbar:has( .header.active) { transform: translateY (-100%); }

  
  .topbar .container,
  .firsttop-bar,
   .secondtop-bar,
   .topbar-item{
    display: flex;
    align-items: center;
    margin-inline: auto;
  }
  
  .topbar .container,
  .firsttop-bar,
   .secondtop-bar{
    justify-content: space-between;
    gap: 30px;
  }
  
  .topbar-item{
    gap: 10px;
  }
  
  .topbar-item ion-icon { --ionicon-stroke-width: 60px;
  color: var(--orange);}
  
  .topbar-item .span { font-size: var(--fontSize-label-1);
  color: var(--white);}
  
  .topbar .link { transition: var(--transition-1);}
  
  .topbar .link:is(:hover, :focus-visible) { color: var(--orange);}



    /* #HEADER */
    .header{top: 50px;  }

    .nav-open-btn,
    .navbar > *:not(.navbar-list),
    .header .overlay { display: none;}


    .navbar,
    .navbar.active,
    .navbar-list { all: unset;}

    .navbar,
    .navbar.active { margin-inline: auto 100px;}

    .navbar-list{
      display: flex;
      gap: 30px;
    }

    .navbar-item { border-block-start: none;}

    .navbar .separator { display: none;}


    .navbar-link:is(:hover, :focus-visible, .active) .span { transform: unset;}

    .navbar-link {
      font-weight: var(--weight-bold);
      letter-spacing: var(--letterSpacing-1);
    }

    .navbar-link::after { display: block;}


    .navbar-link.active::after {
      transform: scale(1);
      opacity: 1;
    }

    .header .btn { margin-inline-start: 0;}

    .navbar-item {
      border-block-end: none;
    }

    nav ul li a{
      font-size: 16px;
      color: var(--dark-blue);
      padding: 5px 0;
      display: block;
  }

  nav ul li a:hover{
    color: var(--orange);
}

nav ul li ul{
  position: absolute;
  width: 100%;
  margin-block-start: -10px;
  display: none;
  z-index: 1;
}

nav ul li ul li{
  padding-left: 30px;
  width: 15%;
  background: var(--white);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0,0,0,.1);
}

nav ul li:focus-within > ul,
nav ul li:hover > ul{
    display: initial;
}




    /* #HERO */
    .hero { height: 800px;}

    .hero .swiper{
      margin-top: 70px;
      height: 70vh;
    }

    .hero-btn {
      bottom: 50px;
      right: 50px;
      transform: scale(1);
    }

    .hero-header{
      gap: 100px;
    }

    /* .hero-img{
      width: 500px;
  } */

    /* #HERO BOTTOM */

    .hero-bottom .grid-list,
    .services .grid-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 50px;}

      .hero-bottom-btn{
        padding: 0 10px;
    }


    /* #ABOUT */
    .about { padding-block: 170px 100px;}

    .about .container .about-items .about-card{
      width: 500px;
      z-index: 1;
      gap: 20px;
    }

    .philosophy-container .img-philosophy{
      max-width: 90%;
      width: 1500px;
      object-fit: cover;
      margin-inline: auto;
      transform: rotate(5deg);
      z-index: -1;
    }


    .philosophy .philosophy-container{
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .philosophy .philosophy-items .philosophy-content{
      text-align: left;
    }

    .philosophy .philosophy-items .philosophy-content .section-title{
      font-size: 30px;
    }

    .philosophy .philosophy-items .philosophy-content .section-text{
      font-size: 16px;
    }

    .philosophy-card .card-content {
      width: 200px;
      height: 200px;
    }
  
    .philosophy-card .card-content h3{
      font-size: 20px;
    }

  .progress-container{
    gap: 40px;
}

.insights .slider {
  position: relative;
  width: 100%;
  height: 1100px;
}


/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/
.blog-list{grid-template-columns: 1fr 1fr;}

.blog-card{height: 100%;}

.blog-card .content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


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

.footer-items{
  height: 550px;
}

/* .footer-list,
.newsletter {
  margin-block-start: 150px;
} */

.footer-list-items {
  /* gap: 30px; */
}

.list-items li{
  gap: 5px;
}


.footer-list-items,
.newsletter-items {
  /* margin-top: -100px; */
}


  }

  /* responsive for larger 1400px screen */
  @media (min-width: 1400px) {
    /* #HEADER */

    /* .hero-header{
      gap: 300px;
    } */


    /* #ABOUT */
    .about-content { padding-inline-end: 90px;
    color: var(--black);
    }

    .about .shape{
      display: block;
      top: 20%;
      right: 0;
    }


    #popup{
      position: fixed;
      transform: translate(-50%,-50%);
      width: 80%;
      height: 70vh;
      margin-top: 30px;
      box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
      background: var(--white);
      visibility: hidden;
      opacity: 0;
      transition: 0.5s;
      z-index: 3;
    }

    .popup__form{
      position: relative;
      display: grid;
      gap: 25px;
      margin-inline: auto;
    }

    .popup__form-div{
      position: relative;
      width: 100%;
      height: 50px;
    }
    
    .popup__form-input{
      width: 100%;
      height: 60px;
      border: 2px solid var(--orange);
      border-radius: 20px;
      padding: 20px 30px;
      font-size: 16px;
      color: var(--orange);
      background: none;
      outline: none;
      z-index: 2;
    }


  }