@font-face {
  font-family: "main-hero";
  src: url("../font/Mona-Sans-SemiBoldWide.ttf") format("truetype");
  }

@font-face {
  font-family: "ex-hero";
  src: url("../font/Mona-Sans-MediumWide.ttf") format("truetype");
  }

    @font-face {
  font-family: "signature-font";
  src: url("../font/Autography.otf") format("truetype");
  }



    .hero-section{
      position:relative;
      height:100vh;
      overflow:hidden;
      color:#fff;
    }

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

    .hero-image{
      position:absolute;
      inset:0;
      background:url('../images/gsg-abstract-2.png') center center/cover no-repeat;
      z-index:1;
      transition:opacity .7s ease;
    }

    .hero-image.hide{
      opacity:0;
    }

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

    .hero-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:2;

      opacity:0;
      visibility:hidden;

      transition:opacity .7s ease;
    }

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

    /* =========================
       OVERLAY
    ========================== */

    .hero-overlay{
      position:absolute;
      inset:0;
      z-index:3;

      background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.35),
        rgba(0,0,0,.55),
        rgba(0,0,0,.8)
      );
    }

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

    .hero-navbar{
      position:absolute;
      top:20px;
      left:0;
      width:100%;
      z-index:50;
    }

    .logo img{
      width:55px;
      height:55px;
      object-fit:contain;
    }

    .nav-box{
      background:rgba(10,10,10,.55);
      backdrop-filter:blur(16px);
      border-radius:5px;
     padding:8px 8px;
    }

    .navbar-nav{
      gap:20px;
      align-items:center;
    }

    .navbar-nav .nav-link{
      color:#fff !important;
      font-size:12px;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;

    }

    .nav-link:hover{
      color: #0303FC !important;
    }

    .contact-btn{
      background:#0303FC;
      color:#fff;
      border-radius:5px;
      padding:12px 22px;
      text-decoration:none;
      font-weight:700;
      transition:.3s ease;
          font-size:12px;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
    }

    .contact-btn:hover{
      background: #FC012A;
    }

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

.mega-parent{
    position:relative;
}

.mega-trigger{

    display:flex !important;

    align-items:center;

    gap:8px;

    cursor:pointer;
}

.cross{

    transition:.4s ease;
}

.mega-menu{

    position:absolute;
   top:105%;
   left:-80%;

    transform:
    translateX(-50%)
    translateY(25px);

    width:min(1100px,95vw);

    padding:20px;

    background:
    rgba(8,8,8,.95);

    backdrop-filter:
    blur(30px);

    border-radius:18px;

    display:grid;

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

    gap:20px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
    all .45s cubic-bezier(.16,1,.3,1);

    z-index:999;
}

/* DESKTOP HOVER */

@media(min-width:992px){

    .mega-parent:hover .mega-menu{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
        translateX(-50%)
        translateY(0);
    }

    .mega-parent:hover .cross{

        transform:rotate(45deg);
    }

}

/* CARDS */

.mega-card{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    text-decoration:none;

    background:#111;

    min-height:280px;

    opacity:0;

    transform:
    translateY(30px);

    transition:
    all .6s cubic-bezier(.16,1,.3,1);
}

.mega-parent:hover .mega-card{

    opacity:1;

    transform:
    translateY(0);
}

.mega-parent:hover .mega-card:nth-child(1){

    transition-delay:.05s;
}

.mega-parent:hover .mega-card:nth-child(2){

    transition-delay:.12s;
}

.mega-parent:hover .mega-card:nth-child(3){

    transition-delay:.18s;
}

.mega-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.8s ease;
}

.mega-card:hover img{

    transform:scale(1.08);
}

.mega-card-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:24px;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.95)
    );
}

.mega-card-content h4{

 color:#fff;
 font-family: "main-hero";
font-size:16px;
margin-bottom:10px;
}

.mega-card-content p{

    color:
    rgba(255,255,255,.75);
    font-family: "Montserrat", sans-serif;
    font-size:13px;
    line-height:1.6;
}

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

/* ==========================================
ICOMAT MOBILE MENU
========================================== */

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

@media(max-width:991px){

    /* hide desktop nav */

    .navbar-nav,.hider{
        display:none !important;
    }




    .nav-box{
        width:100%;
        margin-top:20px;
        padding:15px;
    }

    .mobile-mega-menu{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .mobile-card{

        background:
        linear-gradient(
        135deg,
        rgba(42,42,42,.95),
        rgba(70,70,70,.95)
        );

        border-radius:14px;

        overflow:hidden;
    }

    .mobile-card-header{

        width:100%;

        background:none;

        border:none;

        color:#fff;

        display:flex;

        align-items:center;

        gap:14px;

        padding:12px;

        cursor:pointer;
    }

    .ss{
font-family: "Barlow", sans-serif;
font-weight: 600;
font-size:12px !important;
    }

    .mobile-card-header img{

        width:70px;

        height:70px;

        border-radius:10px;

        object-fit:cover;
    }

    .mobile-card-header span:nth-child(2){

        flex:1;

        text-align:left;

        font-size:13px;

        font-weight:600;

        letter-spacing:.08em;
    }

    .mobile-plus{

        font-size:25px;
        margin-top:-6px;
        margin-right:7px;

        transition:.4s ease;
    }

    .mobile-card.active .mobile-plus{

        transform:rotate(45deg);
    }

    .mobile-card-body{

        max-height:0;

        overflow:hidden;

        transition:max-height .45s ease;
    }

    .mobile-card.active .mobile-card-body{

        max-height:900px;
    }

    .mobile-link{

        display:flex;

        align-items:center;

        gap:14px;

        margin:8px;

        padding:10px;

        text-decoration:none;

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

        border-radius:10px;
    }

    .mobile-link img{

        width:55px;

        height:55px;

        border-radius:8px;

        object-fit:cover;
    }

    .mobile-link span{
 font-family: "main-hero";
        color:#fff;

        font-size:12px;
    }

    .mobile-single-link{
font-family: "Barlow", sans-serif;
        text-decoration:none;

        color:#fff;

        padding:18px;

        border-radius:12px;

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

        font-size:12px;

        font-weight:600;
    }

    .mobile-contact-btn{

        text-decoration:none;
font-family: "Barlow", sans-serif;
        text-align:center;

        padding:18px;

        border-radius:8px;

        background:#0303FC;

        color:#fff;

        font-size:12px;

        font-weight:600;
    }

}


@keyframes megaReveal{

    from{

        opacity:0;

        transform:
        translateY(-10px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}







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

    .hero-content{
      position:relative;
      z-index:10;
      height:100%;
      display:flex;
      align-items:flex-end;
      padding-bottom:90px;
    }

    .hero-title{
      
       font-family: "main-hero";
       font-size:65px;
      line-height:70px;
        margin-bottom:50px;
    }

    .hero-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:40px;
    }

    .hero-description{
      max-width:410px;
}

    .hero-description p{
      font-size:16px;
      line-height:29px;
        font-family: "Montserrat", sans-serif;
      color:white;
      font-weight: 200;
     
    }

    /* =========================
       SIGNATURE
    ========================== */

    .signature-wrap{
      display:flex;
      align-items:center;
      gap:25px;
    }

    .signature-line{
      width:90px;
      height:1px;
      background:rgba(255, 255, 255, 0.423);
     
    }

    .signature{
      font-size:44px;
      font-family: "signature-font";
      white-space:nowrap;
        margin-right:280px !important;
    }

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

    .video-control{
      position:absolute;
      right:100px;
      bottom:100px;
      z-index:20;
    }

    .video-toggle{
      width:120px;
      height:120px;
     border:transparent !important;
      background:transparent !important;
 color:transparent !important;
cursor:pointer;
 transition:.3s ease;
    }

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

     .cross{
      width:18px !important;
      margin-top:-4px;
     }

   
.bac-intro-section{
  background: linear-gradient(180deg, #000 0%, #292D32 100%);
  margin-top:0.4px;
  overflow:hidden;
}

.golden{
  font-family: "ex-hero";
  color:#CFD9E0;
  margin-top:135px;
  margin-bottom:120px;
  font-size:32px;
  line-height:46px;
}

.container-gsg{
  display:block;
  margin-left:auto;
  margin-right:auto;
  padding-left:55px;
  padding-right:55px;
}

.img-1{
  margin-bottom:150px;
}


/* ===================================
   PREMIUM REVEAL ANIMATION
=================================== */

.reveal-text,
.reveal-image{

  opacity:0;

  transform:
  translateY(120px)
  scale(.98);

  transition:
  opacity 1.4s cubic-bezier(.16,1,.3,1),
  transform 1.4s cubic-bezier(.16,1,.3,1);

  will-change:
  transform,
  opacity;
}


/* ACTIVE STATE */

.reveal-active{

  opacity:1;

  transform:
  translateY(0)
  scale(1);
}


/* STAGGER IMAGE */

.reveal-image{
  transition-delay:.25s;
}


/* OPTIONAL LUXURY IMAGE EFFECT */

.img-1{
  border-radius:24px;

  transform-origin:center;

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


.why-choose-section{
    background:white;
    padding:120px 0;
    overflow:hidden;
}

.why-title{
   font-family: "ex-hero";
    font-size:60px;
    color:#292D32;
    
}

.why-subtitle{
   font-family: "signature-font";
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:20px;
    font-size:43px;
}

.line{
    width:60px;
    height:1px;
    margin-left:-80px;
    background:#4b5cff;
}


.cards-wrapper{
    overflow:hidden;
    margin-top:75px;
}

.cards-track{
    display:flex;
    gap:30px;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
}

.why-card{
    width:450px;
    flex-shrink:0;
}

.card-number{
    font-family: "signature-font";
    font-size:42px;
    color:#555;
    margin-bottom:5px;
}

.card-line{
  width: 100%;
    height: 1px;
    opacity: .5;
margin-bottom:20px;
    background-image: repeating-linear-gradient(
        to right,
        #777 0,
        #777 1px,
        transparent 1px,
        transparent 5px
    );
}

.image-wrap{
    position:relative;
    border-radius:14px;
    overflow:hidden;
}

.image-wrap img{
    width:100%;
    object-fit:cover;
}

.card-overlay{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
font-size: 13px;
    background:rgba(22,22,22,.75);
    backdrop-filter:blur(14px);
 font-family: "Montserrat", sans-serif;
 font-weight: 300;
    color:#fff;

    padding:20px;

    border-radius:14px;

    opacity:0;
    transform:translateY(40px);

    transition:.5s;
}

.card-overlay.active{
    opacity:1;
    transform:translateY(0);
}

.card-toggle{
    margin-top:25px;
    width:100%;
    display:flex;
    border:none;
    background:none;
  font-family: "main-hero";
    font-size:13px;
    cursor:pointer;
    color:#333;
}

.card-toggle.active{
    color:#0303FC;
}

.icon{
    font-size:18px;
    margin-left:20px;
    margin-top:-3px;
    
}

.arrow-wrap{
    float:right;
    margin-top:55px;
    margin-right:50px;
}


#nextBtn{
    width:150px;
    height:150px;
    border:none;
    background:transparent;
    font-size:90px;
    cursor:pointer;
    transition:.4s;
}

#nextBtn:hover{
    transform:translateX(8px);
}



/* ===================================
SERVICES SECTION
=================================== */

.services{

   background: linear-gradient(180deg, #000 0%, #292D32 100%);

    width:100%;
    padding:90px 60px;
    position:relative;

    overflow:hidden;
}


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

.services-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-bottom:50px;
}

.services-header h2{
font-family: "main-hero";
    color:#CFD9E0;
    font-size:50px;
    margin-left:20px;
}

.slide-counter{

    display:flex;

    align-items:center;

    gap:15px;

    color:#fff;

    flex-shrink:0;
}

.counter-line{

    width:60px;

    height:1px;

    background:#fff;
}

#currentSlide{
font-family: "Barlow", sans-serif;
    color:#fff;
    font-size:23px;
}

#totalSlides{
font-family: "Barlow", sans-serif;
color:#1f40ff;
font-weight: 600;
font-size:45px;
}


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

.services-slider{

    position:relative;

    height:650px;
}

.service-card{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:
    translateY(40px)
    scale(.98);

    transition:
    all .8s cubic-bezier(.16,1,.3,1);
}

.service-card.active{

    opacity:1;

    visibility:visible;

    transform:
    translateY(0)
    scale(1);
}

.service-card img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:18px;
}


/* ===================================
OVERLAY
=================================== */

.service-overlay{

    position:absolute;
    left:80px;
     bottom:70px;
     max-width:655px;
}


.service-overlay p{
    font-family: "ex-hero";
    color:#CFD9E0;
    font-size:28px;
    line-height:1.6;
    margin-bottom:125px;
}

.service-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:20px 55px;
    background:#1738ff;
margin-bottom:50px;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    transition:.4s ease;
     font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size:13px;
}

.service-btn:hover{

    transform:translateY(-2px);
     background: #FC012A;
}


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

.next-arrow{

    position:absolute;

    right:80px;

    bottom:120px;

    background:none;

    border:none;

    cursor:pointer;

    z-index:20;

    transition:.4s ease;
}

.next-arrow:hover{

    transform:translateY(-6px);
}


/* ===================================
TABS
=================================== */

.service-tabs{

    display:flex;

    gap:50px;

    margin-top:45px;

    overflow-x:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;
}

.service-tabs::-webkit-scrollbar{

    display:none;
}

.service-tab{

    background:none;
text-transform: uppercase;
border:none;
color:white;
   font-family: "Barlow", sans-serif;
   font-size:15px;
    font-weight:600;

    position:relative;

    padding-bottom:16px;

    white-space:nowrap;

    cursor:pointer;

    transition:.4s ease;
}

.service-tab.active{
  color:#CFD9E0;
}

.service-tab.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:#fff;
}


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

@media (max-width:991px){

    .services{

        padding:70px 30px;
    }

    .services-header h2{

        font-size:56px;
    }

    .services-slider{

        height:520px;
    }

    .service-card img{

        height:520px;
    }

    .service-overlay{

        left:30px;

        right:30px;

        bottom:40px;

        max-width:100%;
    }

    .service-overlay h3{

        font-size:34px;
    }

    .service-overlay p{

        font-size:20px;
    }

    .next-arrow{

        right:30px;

        bottom:70px;
    }

    .next-arrow svg{

        width:60px;
        height:60px;
    }
}




/* ===================================
SMALL PHONES
=================================== */

@media (max-width:480px){

    .services-header h2{

        font-size:34px;
    }

    .services-slider{

        height:450px;
    }

    .service-card img{

        height:450px;
    }

    .service-overlay h3{

        font-size:22px;
    }

    .service-overlay p{

        font-size:14px;
    }

    .next-arrow svg{

        width:42px;
        height:42px;
    }
}


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

.team-section{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    background:#ececec;
}

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

.team-slider{

    width:100%;

    height:100%;
}

.team-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:
    opacity .8s ease,
    transform .8s ease;

    transform:scale(1.03);
}

.team-slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);
}

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

.team-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* =====================================
OVERLAY
===================================== */

.team-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.10),
    rgba(0,0,0,.05)
    );
}

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

.team-content{

    position:absolute;

    top:50%;

    right:8%;

    transform:translateY(-50%);

    max-width:650px;

    color:#fff;
}

.team-name{
   font-family: "signature-font" !important; 
font-size:60px;
font-family:cursive;
font-weight:400;
margin-bottom:30px;
margin-left:40px;
}

.team-description{
 font-family: "Montserrat", sans-serif;
font-size:15px;
line-height:1.6;
margin-left:50px;
    margin-bottom:50px;
}

.team-role{
font-family: "Barlow", sans-serif;
display:flex;
align-items:center;
gap:25px;
font-size:16px;
font-weight:600;

}

.role-line{
width:70px;
height:1px;
margin-left:47px;
background:#0303FC;
}

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

.team-counter{

    position:absolute;

    right:80px;

    bottom:70px;

    display:flex;

    align-items:center;

    gap:18px;

    color:#fff;

    z-index:20;
}

#teamCurrent{

    font-size:22px;
font-family: "Barlow", sans-serif;
    font-weight:600;
}

#teamTotal{

  font-size:45px;
font-family: "Barlow", sans-serif;
font-weight:600;
}

.counter-divider{

    width:90px;

    height:1px;

    background:#fff;
}

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

.team-prev,
.team-next{
position:absolute;
top:50%;
transform:translateY(-50%);
border:none;
cursor:pointer;
z-index:20;
transition:.4s ease;
background-color: transparent !important;
}

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

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

.team-prev{

    left:40px;
}

.team-next{

    right:40px;
}


@media(max-width:991px){

    .team-section{

        height:85vh;
    }

    .team-content{

        left:30px;
        right:30px;

        top:auto;
        bottom:100px;

        transform:none;

        max-width:100%;
    }

  

    .team-role{

        font-size:13px;
    }

    .role-line{

        width:50px;
    }

  

    #teamCurrent,
    #teamTotal{

        font-size:24px;
    }

    .counter-divider{

        width:50px;
    }

    .team-prev,
    .team-next{

        width:50px;
        height:50px;

        font-size:18px;
    }

  
    .team-next{

        right:15px;
    }
}


.marque{
   background:#000; 
}

.gsg-footer{

    background:#000;

    padding:0 10% 85px;

    overflow:hidden;
}

.he{
    padding:0 10% 0px;
    overflow:hidden;
}

.he h3{
    font-family: "signature-font";
    color: white;
    margin-top:150px;
    font-size:65px;
}

.he h2{
 font-family: "main-hero";
 font-size:50px;
 margin-top:20px;
 margin-bottom:70px;
 color: white;
}

.txt{
  color: #737373 !important;
}

.txt-2{
  color: #0065F5 !important;
}

/* ==========================
MARQUEE
========================== */

.company-marquee-wrap{

    border-top:1px dashed #FFFFFF;

    border-bottom:1px dashed #FFFFFF;

    overflow:hidden;

    padding:40px 0;

}

.marquee-track{
    display:flex;
    width:max-content;
    gap:40px;
    animation:
    marquee 55s linear infinite;
}

.marquee-track span{

    white-space:nowrap;
font-family: "main-hero";
    color:#737373;
    font-size:20px;
    font-weight:600;
}

@keyframes marquee{

    from{

        transform:translateX(0);
    }

    to{

        transform:translateX(-50%);
    }
}

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

.footer-cta{

    max-width:1000px;

    margin-bottom:120px;
}

.footer-cta h2{
    font-family: "main-hero";
  color: white;
font-size:65px;
margin-top:90px;
 margin-bottom:50px;
}

.footer-cta p{
     font-family: "Montserrat", sans-serif;
    color:#737373;
    font-size:15px;
     margin-bottom:55px;
     padding-right:430px;
}

.footer-btn{

    display:inline-flex;
align-items:center;
justify-content:center;
min-width:260px;
height:70px;
font-family: "Barlow", sans-serif;
    background:#0303FC;
color:#fff;
    text-decoration:none;

    font-size:14px;

    font-weight:600;

    border-radius:8px;

    transition:.4s;
}

.footer-btn:hover{
background:#FC012A;
    transform:translateY(-3px);
}

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

.footer-contact{

    border-top:1px dashed white;

    padding-top:70px;

    display:grid;

    grid-template-columns:
    1fr
    1fr
    120px;

    gap:60px;

    margin-bottom:80px;
}

.footer-col h5{
font-size:16px;
margin-bottom:40px;
color: white;
font-weight: 600;
font-family: "Barlow", sans-serif;
}

.footer-col p{
 font-family: "main-hero";
    color:#737373;
    font-size:25px;

}

.mini-divider{

    width:100%;

    height:1px;

    border-top:1px dashed white;

    margin:40px 0;
}

.xcv{
  margin-top:75px;
}

/* ==========================
SCROLL TOP
========================== */

.scroll-top{

    background:none;

    border:none;

    color:#fff;

    font-size:90px;

    cursor:pointer;

    align-self:center;

    transition:.4s;
}

.scroll-top:hover{

    transform:
    translateY(-8px);
}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;
}

.footer-bottom p{
font-family: "Barlow", sans-serif;
    font-size:12px;
font-weight:600;
    color:white;
}

.footer-links{

    display:flex;
margin-top:-30px;
    gap:20px;

    padding:18px 30px;

    background:#191919;

    border-radius:10px;
}

.footer-links a{

    color:#fff;
font-family: "Barlow", sans-serif;
  
font-weight:600;
    text-decoration:none;

    font-size:12px;
}

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

@media(max-width:991px){

    .footer-contact{

        grid-template-columns:1fr;
    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;
    }

 

    .footer-col p{

        font-size:18px;
    }

   
    .marquee-track span{

        font-size:22px;
    }
}