@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", serif;
}
a, button, img{
    cursor: none;
}
:root{
    --primaryFont: "Inter", serif;
    --secondaryFont: "Montserrat", sans-serif, serif;
    --Orange: #e3720f;
    --Main-Color: #EBECE7;
    --DarkBG: #06171D;
      --hover-line-color: #000; /* Default black */
      --cursor-border-color: #000; /* Default border color for light mode */
      --Cursor-dot: #F5761D;
}
html{
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
    display: none;

}
::-webkit-scrollbar-thumb {
    background: #FF0000;
    display: none;
}

/* default body */
body {
  cursor: none;
  background: var(--Main-Color);
  transition: background-color 0.1s, color 0.1s;
  color: #000;
  transition: all 0.1s linear;
  margin: 0;
  padding: 0;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}


.parallax-image {
    position: absolute;
    width: 150px; /* Adjust size as needed */
    height: auto;
    transition: transform 0.1s ease-out; /* Smooth movement */
    will-change: transform; /* Optimize rendering */
  }
  
/* Hover state for button and anchor */
button:hover, a:hover {
cursor: none; /* Hide the default cursor */
}

/* Hover state for custom cursor */
button:hover .custom-cursor-circle, a:hover .custom-cursor-circle {
border-color: yellow; /* Change border color to yellow */
transform: scale(1.05); /* Scale up the cursor */
}



body.dark {background-color: #121315;}

body.dark h1, body.dark .support a {color: #fff;}
body.dark .checkbox-label{
    background-color: #fff;
}
body.dark .ball{
    background-color: #111;
    width: 1.8vw;
    height: 1.8vw;
}


.modeBtn{
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox-label {
  background-color: #111;
  width: 4.2vw;
  height: 2.2vw;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.fa-moon {color: #f1c40f;}

.fa-sun {color: #f39c12;}

.ball {
  background-color: #fff;
  width: 1.6vw;
  height: 1.6vw;
  display: block;
  position: relative;
  right: 3.9vw;
  border-radius: 50%;
  transition: transform 0.2s linear;
  cursor: pointer;
}

.checkbox:checked + .checkbox-label + .ball {
  transform: translateX(2vw);
}










/* Hero Section */
.Hero-Section{
    height: 100vh;
    width: 100vw;
    /* background-color: ; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 21vw;
}
.Hero-Text-Container{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
}
.UpperText{
    font-size: 5vw;
    line-height: 4.5vw;
    letter-spacing: -0.15vw;
    font-weight: 800;
    text-align: center;
}




h1 {
    /* font-family: "Montserrat Medium"; */
    max-width: 40ch;
    text-align: center;
    transform: scale(0.94);
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
  }
  @keyframes scale {
    100% {
      transform: scale(1);
    }
  }
  
  span {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
  }
  
  span:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(4) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(5) {
    animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(6) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(7) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  
   span:nth-child(8) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(9) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(10) {
    animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(12) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(13) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(14) {
    animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(15) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(16) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(17) {
    animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  span:nth-child(18) {
    animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
  } 
  
  @keyframes fade-in {
    100% {
      opacity: 1;
      filter: blur(0);
    }
  }
  

@media (min-width:800px){
    .LowerText{
        min-width: 55vw !important;
        /* border: 1px solid red; */
    }
    
}


.LowerText{
    font-size: 1.6vw;
    line-height: 2.2vw;
    font-weight: 400;
    text-align: center;
    font-family: var(--secondaryFont);
}
/* Hero Section */

.outer {
    width: 21vw;
    height: 21vw;
    border-radius: 20px;
    position: absolute;
    opacity: 0; /* Start hidden */
    transform: scale(2) translate(-5vw, -7vw); /* Initial state for animation */
    will-change: transform, opacity; /* Optimize for animation */
}

.video {
    width: 21vw;
    height: 21vw;
    position: relative;
    left: 0;
}


.video-mob-container{
    display: none !important;
}

@keyframes hero_Videos_and_images_on_startup {
    from {
        opacity: 0;
        transform: scale(2) translate(-5vw, -7vw); /* Start from bigger size and position */
    }
    to {
        opacity: 1;
        transform: scale(1) translate(0, 0); /* End at original size and position */
    }
}




/* .img-bottom, .img-right{
    object-fit: contain;
    width: 21vw;
    height: 45vw;
    border: 1px solid red;
} */
.Outer1{
    left: 33vw;
    top: -10vw;
}
.Outer2{
    left: -5vw;
    top: 13vw;
}
.Outer3{
    left: 24vw;
    bottom: -15vw;
    background-image: url("/anas-assets/Hero-image-1.jpg");
        /* background-size: contain; */
}
.Outer4{
    right: -6vw;
    bottom: 11vw;
    background-image: url(/anas-assets/Hero-image-2.jpg);
    background-size:cover;
}


/* arrow */
.arrow-circle{
    width: 4.7vw;
    height: 4.7vw;
    border-radius: 50%;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 7vw;
    transition: all 0.5s ease;
    opacity: 0; /* Initially invisible */
    animation: headerStarter 0.5s ease-in 1.5s forwards;
}
.arrow-circle:hover{
    transform: scale(1.2);
    /* border-color: #e3720f; */
}
.arrow-circle a{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    overflow: hidden;
}
.arrow-down{
    width: 30%;
    animation: arrow-loop forwards 1.8s infinite;
    animation-timing-function: ease-in-out;
}

@keyframes arrow-loop{
    0%{
        transform: translateX(-240%);
    }
    50%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(240%);
    }
}











/* About Section */
.aboutSection{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4vw 0 5vw 0;
}
.aboutInner{
    width: 80%;
}
/* .aboutUp{
    width: 70%;
    height: 50vh;
    font-size: 3vw;
    font-weight: 700;
    line-height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aboutUp h1{
    font-family: var(--secondaryFont);
} */

.animate-on-scroll {
    opacity: 0; /* Start fully invisible */
    transform: translateY(50px); /* Start slightly below its final position */
    transition: opacity 0.8s ease, transform 0.8s ease; /* Smooth transition */
    will-change: opacity, transform; /* Optimize for performance */
}

.animate-on-scroll.in-view {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to its original position */
}

@media (max-width:500px){
    .animate-on-scroll {
        opacity: 1; /* Start fully invisible */
        transform: translateY(0px); /* Start slightly below its final position */
    }
    
    .animate-on-scroll.in-view {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Move to its original position */
    }  
    
}


.aboutDown{
    width: 95%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 5vw;
}
.innerAboutDown{
    width: 55%;
    height: 66vh;
    font-size: 1.5vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.aPara{
    font-family: var(--secondaryFont);
}
.aBtn{
    font-family: var(--secondaryFont);
    width: 14vw;
    height: 5vw;
    border-radius: 50px;
    border: 2px solid #121315;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.5vw;
    transition: all 0.3s linear;
}
.aBtn:hover{
    color: #fff;
    background-color: var(--Orange);
    border: none;
}
.br-mobile{
    display: flex;
}





@media (max-width: 500px) {
    .outer {
        opacity: 1; /* Start hidden */
        transform: scale(1) translate(0vw, 0vw);
    }

    .br-mobile{
        display: none;
    }    
    .aboutInner{
        width: 90%;
    }
    .aboutUp{
        width: 100%;
        font-size: 5.5vw;
        line-height: 8vw;
        height: 22vh;
        margin-top: 8vw;
    }
    .aboutDown{
        width: 100%;
        justify-content: start;
    }
    .innerAboutDown{
        height: 90vh;
        width: 100%;
        font-size: 5vw;
    }
    .aBtn{
        width: 35vw;
        height: 13vw;
        font-size: 3.5vw;
    }
}



/* SERVICES SECTION */
.serviceSection{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 7vw;
    padding: 15% 9vw 0;
}
.innerServ{
    width: 100vw;
}
.serv-p1{
    font-weight: 800;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 3%;
}
.serv-p1 h1{
    font-size: 4vw;
    font-family: var(--secondaryFont);
    font-weight: 700;
    line-height: 5vw;
    margin-top: -0.5vw;
    margin-bottom: 3vw;
}
.hr-servP1{
    background: linear-gradient(to right,rgba(230, 69, 246, 0.8) 0%, 
    rgba(180, 111, 245, 0.8) 20%, 
    rgba(151, 136, 245, 0.8) 40%, 
    rgba(108, 173, 245, 0.8) 60%, 
    rgba(54, 219, 245, 0.8) 80%, 
    rgba(50, 141, 249, 0.8) 90%, 
    rgba(63, 95, 251, 0.8) 100%);

    width: 15%;
    height: 0.165vw;
    border-radius: 150px;
    margin-top: -3vw;
    
}

.serv-p2{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.serv-box{
    margin-top: 5vw;
    margin-bottom: 18vw;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box-left{
    width: 47vw;
    height: 32vw;
    overflow: hidden;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    /* border: 1px solid red; */
    transform: translateX(-30vw) rotate(-25deg);
    opacity: 0;
}
.box-left-inverted{
    position: absolute;
    right: 9vw;
    width: 47vw;
    height: 32vw;
    overflow: hidden;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    /* border: 1px solid red; */
    transform: translateX(30vw) rotate(25deg);
    opacity: 0;
}
.img-serv{
    width: 150vw;
}

.box-right{
    position: absolute;
    right: 4.5vw;
    width: 45vw;
    height: 27vw;
    backdrop-filter: blur(15px);
    background-color: #ffffff23;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2.5vw;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
    padding: 0 4vw 0 5vw;
    opacity: 0;
    transform: translateY(30vh) translateX(-10%);
}
.box-right-inverted{
    position: absolute;
    /* left: 13.5vw; */
    width: 45vw;
    transform: translateX(-10%);
    height: 27vw;
    backdrop-filter: blur(15px);
    background-color: #ffffff2b;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2.5vw;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
    padding: 0 4vw 0 5vw;
    z-index: 9;    
    transform: translateY(30vh);
    opacity: 0;
}
.box-title{
    width: 100%;
    font-size: 3.5vw;
    font-family: var(--secondaryFont);
    font-weight: 800;
    margin-top: -0.5vw;
}
.box-logos{
    width: 100%;
}
.box-para{
    width: 100%;
    font-size: 1.5vw;
    font-family: var(--primaryFont);
    margin-top: -0.5vw;

    /* margin-bottom: 2vw; */
}
.logos-right{
    width: 3.8vw;
    margin-right: 0.5vw;
}
.box-reverse{
    flex-direction: row-reverse;
}
.right2{
    transform: translateX(10%);
}

body.dark .box-title, body.dark .box-para{
    color: #fff;
}

.brMobile{
    display: none;
}

@media (max-width: 500px) {
    .serviceSection{
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 7vw;
        padding: 0 0vw;
    }
    .aboutSection{
        padding: 0 5vw;
    }
    .brMobile{
        display: block;
    }
    .innerServ{
        width: 90%;
    }
    .serv-p1{
        justify-content: space-between;
    }
    .serv-p1 h1{
        font-size: 8vw;
        line-height: 7.5vw;
    }
    .hr-servP1{
        width: 30%;
        height: 0.35vw;
    }
    .serv-box{
        width: 100%;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 2vw;
    }
    .box-left{
        width: 100%;
        height: 60vw;
        border-radius: 10px;
    }
    .box-right{
        transform: translateX(0vw) translateY(-30%);
        border-radius: 10px;
        width: 90%;
        height: 50vw;
    }
    .box-title{
        font-size: 7vw;
    }
    .logos-right{
        width: 8.5vw;
    }
    .box-para{
        font-size: 3.8vw;
    }
    .serv-p2{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .box-left{
        position: relative;
        width: 100%;
        height: 40%;
        overflow: hidden;
        overflow-y: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        /* border: 1px solid red; */
        transform: translateX(0vw) rotate(0deg);
        opacity: 1;
    }
    .box-left-inverted{
        position: relative;
        right: 0vw;
        width: 100%;
        height: 40%;
        overflow: hidden;
        overflow-y: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        /* border: 1px solid red; */
        transform: translateX(0vw) rotate(0deg);
        opacity: 1;
    }
    .box-right{
        position: relative;
        right: 0vw;
        width: 85vw;
        height: 55vw;
        border-radius: 20px;
        opacity: 1;
        transform: translateY(-5vh) translateX(0%);
    }
    .box-right-inverted{
        position: relative;
        width: 85vw;
        height: 55vw;
        border-radius: 20px;
        transform: translateY(-5vh);
        opacity: 1;
    }
    .serv-invert{
        flex-direction: column-reverse;
    }
    .img-serv{
        width: 100%;
    }

}





/* PORTFOLIO SECTION */

.port-2{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 3vw;
    margin-bottom: 3vw;
}
.port-left{
    width: 67.5%;
}
.port-right{
    width: 23%;
    display: flex;
    justify-content: center;
}
.img-port{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    overflow-y: hidden;
    border-radius: 20px;
}
.img-size{
    transition: transform 0.2s linear;
}
.img-port:hover .img-size{
    transform: scale(1.04);
}

.left-up,.left-down{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    margin: 0vw 0vw 2vw 0vw;
}
.imgs-up1{
    width: 29vw;
    height: fit-content;
    margin-right: 2vw;
}
.imgs-up2{
    width: 22.8vw;
    height: 19.5vw;
    /* border: 1px solid red;   */
    /* background-size: contain; */
    /* background-image: url(anas-assets/Portfolio-Thumbnail/EcoDest.png); */
    /* background-size: contain;
    background-repeat: no-repeat; */
}

.imgs-down1{
    margin-right: 2vw;
    width: 22vw;
    height: fit-content;
}
.imgs-down2{
    width: 30vw;
    height: 21vw;
    overflow: hidden;
    overflow-x: hidden;
}

.img-child1{
    width: 29vw;
    height: auto;
}
.img-child2{
    width: 22.9vw;
    height: auto;
}
.img-child3{
    width: 24.5vw;
    height: auto;
}
.img-child4{
    width: 30vw;
    height: 22vw;
    background-size: contain;
}

.img-right{
    width: 17.3vw;
    height: fit-content;
}
.img-child5{
    width: 17.3vw;
    height: auto;
}

@media (max-width: 500px) {
    .port-2{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .port-left,.port-right{
        width: 95%;
    }
    .left-up,.left-down{
        flex-direction: column;
        margin: 0vw 0vw 0vw 0vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .img-right{
        width: 100%;
        height: 70vw;
    }
    .img-child5{
        width: 100%;
        transform: translateY(45vw);
    }

    .imgs-up1,.imgs-up2,.imgs-down1,.imgs-down2,.img-child1,.img-child2,.img-child3,.img-child4{
        width: 100%;
        height: auto;
    }
    .imgs-up1,.imgs-up2,.imgs-down1,.imgs-down2{
        margin-bottom: 2vw;
    }
}







/* About Section */
.aboutSection{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5vw;
}
.aboutInner{
    width: 80%;
}
.aboutUp{
    width: 70%;
    height: 50vh;
    font-size: 3vw;
    font-weight: 700;
    line-height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aboutUp h1{
    font-family: var(--secondaryFont);
}
.aboutDown{
    width: 95%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 5vw;
}
.innerAboutDown{
    width: 60%;
    height: 75vh;
    font-size: 1.5vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.aPara{
    font-family: var(--secondaryFont);
}
.aBtn{
    font-family: var(--secondaryFont);
    width: 12vw;
    height: 4.5vw;
    border-radius: 50px;
    border: 2px solid #121315;
    /* background-color: #121315; */
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.5vw;
    transition: all 0.3s linear;
}
.aBtn:hover{
    /* background-color: transparent; */
    color: #fff;
    background-color: var(--Orange);
    border: none;
}
.br-mobile{
    display: flex;
}

@media (max-width: 500px) {
    .br-mobile{
        display: none;
    }    
    .aboutInner{
        width: 90%;
    }
    .aboutUp{
        width: 100%;
        font-size: 4.5vw;
        line-height: 8vw;
        height: 22vh;
        margin-top: 8vw;
    }
    .aboutDown{
        width: 100%;
        justify-content: start;
    }
    .innerAboutDown{
        height: 90vh;
        width: 100%;
        font-size: 5vw;
    }
    .aBtn{
        width: 35vw;
        height: 13vw;
        font-size: 3.5vw;
    }
}


/* VIDEO SECTION */
.videoSection{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15vw;
    padding-top: 10%;
}
.videoInner{
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    
}
.vsections{
    width: 39.3%;
    display: flex;
    justify-content: space-between;
}
.vCards{
    width: 18.1vw;
    height: 24vw;
    margin-bottom: 1.2vw;
    border-radius: 20px;
}
.imgCard{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    overflow-x: hidden;
    height: 25vw;
}
.rect-img{
    width: 18vw;
    height: auto;
}
.imgCard2{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    overflow-x: hidden;
    height: 15.5vw;
}
.rect-img2{
    width: 18vw;
    height: auto;
}

.vCard4{
    height: 19vw;
    background-color: #FFFA78;
}
.vCard8{
    height: 22vw;
    background-color: #00364B;
}
.vCard1{
    background-color: #00364B;
}
.vCard10{
    height: 23vw;
    background-color: #FFFA78;
}
.vCard3 , .vCard7{
    background-color: #06171D;
    height: 25vw;
}
.vCard6{
    display: flex;
    justify-content: center;
    width: 18.1vw;
    height: 155vh;
}
.vidCard{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    width: 18vw;
    height: 25vw;
    transition: all 0.2s linear;
    position: sticky;
    top: 35%;
}
.videoIn{
    transition: all 0.1s linear;
    width: 18vw;
    height: 25vw;
    object-fit: cover;
    border-radius: 20px;
}
.vSec-p1{
    transform: translateY(2vw);
}
.vSec-p2{
    transform: translateY(5vw);
}
.vSec-p3{
    transform: translateY(6vw);
}
.vSec-p4{
    transform: translateY(0vw);
}
.vSec-p5{
    transform: translateY(7vw);
}

.vCard4,.vCard10,.vCard1,.vCard8,.vCard3,.vCard7{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.card4Title,.card1Title{
    width: 82%;
    display: flex;
    gap: 2%;
    font-size: 1.1vw;
    font-weight: 700;
    margin-top: 1.5vw;
}
.dark4title{
    font-family: var(--secondaryFont);
    color: #06171D;
}
.light4title{
    font-family: var(--secondaryFont);
    color: #BDBE60;
}
.contentCard4,.contentCard1{
    width: 82%;
    color: #06171D;
    margin-bottom: 1.5vw;
}
.headingCard4,.headingCard1{
    font-weight: 700;
    font-family: var(--secondaryFont);
    font-size: 2.5vw;
    margin-bottom: 0.8vw;
}
.cont4,.cont1{
    font-size: 1.1vw;
    font-family: var(--secondaryFont);
}
.dark1title{
    font-family: var(--secondaryFont);
    color: #9EFCF1;
}
.light1title{
    font-family: var(--secondaryFont);
    color: #2F727D;
}
.contentCard1{
    color: #9EFCF1;
}
.headingCard1{
    font-size: 6vw;
}
.cont1,.content4{
    font-size: 1.2vw;
}
.dark3Title{
    font-family: var(--secondaryFont);
    color: #E9EAE5;
}
.light3Title{
    font-family: var(--secondaryFont);
    color: #495558;
}
.headingCard3,.cont3{
    color: #E9EAE5;
}
.hCard7{
    font-size: 2vw;
}

.videoSpace{
    height: 20vh;
    width: 100vw;
}
















@media (max-width:500px) {
    .vSec-p3{
        display: none;
    }
    .videoInner{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .vsections{
        justify-content: center;
        align-items: center;
        gap: 9%;
        margin-bottom: 2vw;
    }
    .vCard1,.vCard2,.vCard3,.vCard4,.vCard7,.vCard8,.vCard10,.imgCard{
        width: 44vw;
        height: 64vw;
        border-radius: 12px;
    }
    .rect-img{
        width: 100%;
    }
    .imgCard2{
        width: 44vw;
        height: auto;
    }
    .rect-img2{
        width: 44vw;
    }
    .card4Title,.card1Title{
        gap: 4%;
        font-size: 4.5vw;
        margin-top: 3vw;
    }
    .contentCard4,.contentCard1{
        margin-bottom: 4vw;
    }
    .headingCard4,.headingCard1{
        font-size: 7vw;
        margin-bottom: 2.5vw;
    }
    .cont4,.cont1{
        font-size: 3vw;
    }
    .headingCard1{
        font-size: 12vw;
    }
    .cont1,.content4{
        font-size: 3vw;
    }
    .hCard7{
        font-size: 4vw;
    }
    .card4Title{
        font-size: 2.5vw;
    }
    .card10Title{
        font-size: 4.5vw;
    }
    .vCard1,.vCard3,.vCard7,.imgCard2{
        margin-bottom: 3vw;
    }
    .vSec-p1{
        transform: translateY(0vw);
    }
    .vSec-p2{
        transform: translateY(9vw) !important;
    }
    .vSec-p4{
        transform: translateY(0vw) !important;
    }
    .vSec-p5{
        transform: translateY(-2vw) !important;
    }


    .videoSpace{
        display: none;
    }
}



/* LOGOS SECTION */

.m-8{
    margin: 7.5vw 0 !important;
}

.logosSection{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.logoHeading{
    font-size: 4vw;
    font-family: var(--primaryFont);
    font-weight: 700;
    line-height: 5vw;
    margin-top: -0.5vw;
    margin-bottom: 3vw;
    /* text-align: center; */
}
.logoHeading h1{
    font-size: 4vw;
    font-family: var(--primaryFont);
    font-weight: 700;
    line-height: 5vw;
    margin-top: -0.5vw;
    margin-bottom: 3vw;
    text-align: center;
}
.text-center{
    text-align: center;
}


.logoInner{
    width: 95%;
    height: 25vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}
.rowLogo{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.logoBoxes{
    width: 15%;
    height: 7vw;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease; /* Smooth animation */
}
/* When in view, apply this class */
.logoBoxes.animate {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Return to original position */
  }

  
.logosHr{
    /* background-color: rgba(74, 74, 74, 0); */
    height: 4.5vw;
    width: 1.8px;
    rotate: 25deg;
}
.innerLogoBox{
    width: 28vw;
    height: auto;
    mix-blend-mode: multiply;
    filter: contrast(1);
}

@media (max-width: 500px) {
    .logoInner{
        height: 60vw;
    }
    .logoBoxes{
        width: 30%;
        height: 15vw;
    }
    .innerLogoBox{
        width: 60vw;
    }    
    .sizeDiff{
        width: 30vw !important;
    }

    .logoBoxes{
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.8s ease, transform 0.8s ease; /* Smooth animation */
    }
    
      
}






/*  SECTION 07  */
.section-7{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    color: white;
    margin-top: 10vh;
    margin-bottom: 5vh;
    height: fit-content;
}
.acheive{
    width: 100vw;
    display: flex;
    justify-content: center;
}
.left-acheive{
    width: 45vw;
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 2.2vw;
}
.right-acheive{
    width: 45vw;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 2.2vw;
    margin-top: 11.5vw;
}
.card{
    width: 44vw;
    height: 23.5vw;
    border-radius: 2vw;
    background-color: 	#c1c1c1;
    color: #000;
    display: flex;
    overflow: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}
.card-1{
    background-color: #00364B;
    color: #9EFCF1;
}
.card-2:hover{
    background-color: #06171D;
    color: white;
}
.card-3:hover{
    background-color: #FFFA78;
    color: black;
}
.card-4{
    background-color: #171717;
    color: white;
}
.card:hover .numbers{
    animation: moveUpDown 0.5s linear;
}

@keyframes moveUpDown {
     0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100%);
    }
    51% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
        }
.card-1,.card-3{
    transform: translateX(-30vw) rotate(-45deg);
    opacity: 0;
    /* transform-origin: bottom left; */
}
.card-2, .card-4{
    transform: translateX(30vw) rotate(45deg) ;
    opacity: 0;
}
.inner-l{
    display: flex;
    width: 17vw;
    margin: 3vw 0vw 3vw 3vw;
    overflow: hidden;
    height: 7.5vw;
}
.inner-r{
    display: flex;
    justify-content: end;
    align-items: end;
    width: 19vw;
    margin: 3vw 3vw 3vw 0vw;
    text-align: right;
}
.numbers{
    display: flex;
    font-size: 7vw;
}
.plus{
    font-size: 4.5vw;
}
.card-info{
    font-size: 3vw;
    text-transform: uppercase;
}
@media (max-width: 500px) {
    .section-7{
        height: 150vh;
    }
    .Hero-Section,.section-7,.videoSection,.aboutSection,.serviceSection,.portfolioSection,.logosSection{
        overflow-x: hidden !important;
        overflow: hidden;

    }
    .acheive{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4vw;
    }
    .card{
        width: 90vw;
        height: 53vw;
        border-radius: 10px;
    }
    .right-acheive , .left-acheive{
        align-items: center;
        justify-content: center;
        width: 88vw;
        gap: 4vw;
    }
    .right-acheive{
        margin-top: 0vw;
    }
    .inner-l{
        width: 40vw;
        padding-left: 4vw;
        padding-top: 4vw;
        height: 20vw;
    }
    .inner-r{
        width: 40vw;
        padding-bottom: 4vw;
        padding-right: 4vw;
    }
    .numbers{
        font-size: 15vw;
    }
    .plus{
        font-size: 11vw;
    }
    .card-info{
        font-size: 7vw;
    }
    .card-1{
        background-color: #00364B;
        color: #9EFCF1;
    }
    .card-2{
        background-color: #171717;
        color: white;
    }
    .card-3{
        background-color: #FFFA78;
        color: black;
    }
    .card-4{
        background-color: #06171D;
        color: white;
    }
    .card-1,.card-2{
        transform: translateX(-30vw) rotate(-45deg);
        opacity: 0;
        /* transform-origin: bottom left; */
    }
    .card-3, .card-4{
        transform: translateX(30vw) rotate(45deg) ;
        opacity: 0;
    }
    .hrHidden{
        opacity: 0;
    }
}