*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
:root{
    --orange-color: #fdaf04;
}
body{
    background-color: #171717;
}
h1, h2, h3, h4, button{
    font-family: 'Michroma',sans-serif;
    
    font-weight: 400;
}
input,textarea{
    font-family: "Anek Latin", serif;
    font-weight: 500;
}
p{
    font-family: "Anek Latin", serif;
    font-weight: 500;
}
a{
    font-weight: 500;
}
::placeholder{
    font-family: "Anek Latin", serif;
    font-weight: 500;
}
.preload2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1D1D1D;
}
.prelod-img{
    width: 100px;
    height: 100px;
    position: relative;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}
/* .prelod-img::before{
    content: "";
    position: absolute;
    top: -99%;
    left: -99%;
    z-index: 9999;
    background-image: url("https://conceptx.asia/assets/images/x-pre_5.png");
    height: 299.21px;
    width: 299.21px;
    animation: pscranimation 4.2s steps(42) forwards; 
    animation-iteration-count: 1; 
}
@keyframes pscranimation {
    to {
      background-position: -12567px 0px;
    }
} */
/* @media screen and (max-width: 600px){
    .prelod-img::before{
        content: "";
        position: absolute;
        top: -89%;
        left: -89%;
        z-index: 9999;
        background-image: url("https://conceptx.asia/assets/images/x-pre_5.png");
        height: 299.21px;
        width: 299.21px;
        animation: pscranimation 4.2s steps(42) forwards; 
        animation-iteration-count: 1; 
    }
    @keyframes pscranimation {
        to {
          background-position: -12567px 0px;
        }
    }
} */
/* .prelod-img::before{
    content: "";
    position: absolute;
    top: -99%;
    left: -99%;
    z-index: 9999;
    background-image: url("https://conceptx.asia/assets/images/x-pre_3.png");
    height: 280.05px;
    width: 280.61px;
    animation: pscranimation 4.5s steps(33) forwards; 
    animation-iteration-count: 1; 
}
@keyframes pscranimation {
    to {
      background-position: -9260.61px 0px;
    }
} */

/* .prelod-img::before{
    content: "";
    position: absolute;
    top: -99%;
    left: -99%;
    z-index: 9999;
    background-image: url("https://conceptx.asia/assets/images/x-loader6.png");
    height: 280.13px;
    width: 287.42px;
    animation: pscranimation 4.2s steps(33) forwards; 
    animation-iteration-count: 1; 
}
@keyframes pscranimation {
    to {
      background-position: -9485px 0px;
    }
} */
/* .prelod-img::before{
    content: "";
    position: absolute;
    top: -99%;
    left: -99%;
    z-index: 9999;
    background-image: url("https://conceptx.asia/assets/images/x-loader333.png");
    height: 280.96px;
    width: 288.27px;
    animation: pscranimation 4.2s steps(59) forwards; 
    animation-iteration-count: 1;
}
@keyframes pscranimation {
    to {
      background-position: -17007.62px 0px;
    }
} */
.prelod-img::before{
    content: "";
    position: absolute;
    top: -99%;
    left: -99%;
    z-index: 9999;
    background-image: url("https://conceptx.asia/assets/images/x_loader_888.png");
    height: 300.04px;
    width: 300.04px;
    animation: pscranimation 3.6s steps(44) forwards; 
    animation-iteration-count: 1;
}
@keyframes pscranimation {
    to {
      background-position: -13201.04px 0px;
    }
}
/* 
height: 201.35px;
width: 206.59px; 
12189
*/

/* @media screen and (max-width: 600px){
    .prelod-img::before{
        content: "";
        position: absolute;
        top: -89%;
        left: -89%;
        z-index: 9999;
        background-image: url("https://conceptx.asia/assets/images/x-pre_4.png");
        height: 280.1px;
        width: 280.66px;
        animation: pscranimation 4.5s steps(32) forwards; 
        animation-iteration-count: 1; 
    }
    @keyframes pscranimation {
        to {
          background-position: -8981px 0px;
        }
    }
} */
/* @media screen and (max-width: 600px){
    .prelod-img::before{
        content: "";
        position: absolute;
        top: -89%;
        left: -89%;
        z-index: 9999;
        background-image: url("https://conceptx.asia/assets/images/x-loader6.png");
        height: 280.13px;
        width: 287.42px;
        animation: pscranimation 4.5s steps(33) forwards; 
        animation-iteration-count: 1;
    }
    @keyframes pscranimation {
        to {
          background-position: -9485px 0px;
        }
    }
} */
@media screen and (max-width: 600px){
    .prelod-img::before{
        content: "";
        position: absolute;
        top: -89%;
        left: -89%;
        z-index: 9999;
        background-image: url("https://conceptx.asia/assets/images/x_loader_888.png");
        height: 300.04px;
        width: 300.04px;
        animation: pscranimation 3.6s steps(44) forwards; 
        animation-iteration-count: 1;
    }
    @keyframes pscranimation {
        to {
          background-position: -13201.04px 0px;
        }
    }
}
/* @media screen and (max-width: 600px){
    .prelod-img::before{
        content: "";
        position: absolute;
        top: -49%;
        left: -49%;
        z-index: 9999;
        background-image: url("https://conceptx.asia/assets/images/x-loader21.png");
        height: 201.35px;
        width: 206.59px;
        animation: pscranimation 4s steps(59) forwards; 
        animation-iteration-count: 1;
      }
    @keyframes pscranimation {
        to {
            background-position: -12189px 0px;
        }
    }
} */

.yellow-font{
    color: #fdaf04;
}
.menu-box {
    position: fixed;
    top: 82px;
    right: 85px;
    z-index: 999;
    background-color: #fdaf04;
    display: flex;
    justify-content: end;
    width: 0%;
    height: 0%;
    scale: 0;  /* Initial hidden state */
    transition: scale 0.35s ease-in-out, width 0.35s, height 0.35s;
    overflow: hidden;
}

.openmenu {
    scale: 1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
/* .openmenu {
    scale: 1;           
    width: 100%;
    height: 100%;
    top: 80px;
    right: 85px;
} */

.closemenu {
    position: absolute;
    top: 50px;
    right: 60px;
    cursor: pointer;
}
#menubtn i{
    color: #fdaf04;
}
.closemenu i {
    font-size: 40px;
}

.menu-links {
    margin-top: 25vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.menu-links a{
    text-decoration: none;
    color: #000;
}

.menu-links h3 {
    font-size: 55px;
    text-align: right;
    margin-bottom: 25px;
    position: relative;
    opacity: 0;            /* Initially hidden */
    transform: translateX(100px); /* Slide in from the right */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-links h3::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #000;
    bottom: -12px;
}
.menu-links h3.show {
    opacity: 1;
    transform: translateX(0); /* Final position after animation */
}

.menu-links h3:nth-child(1) { transition-delay: 0.3s; }
.menu-links h3:nth-child(2) { transition-delay: 0.5s; }
.menu-links h3:nth-child(3) { transition-delay: 0.7s; }
.menu-links h3:nth-child(4) { transition-delay: 0.9s; }

/* Toggle button */
.toggle-btn-box {
    position: absolute;
    top: 49px;
    right: 61px;
    z-index: 44;
}

.toggle-btn-box i {
    font-size: 30px;
    cursor: pointer;
    color: #fdaf04;
}


.home {
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: linear-gradient(to bottom, #373737, #171717);
    padding: 25px 25px 0px 0;
}

/*.border-div{
    position: absolute;
    top: 21px;
    right: 22px;
    left: 0;
    clip-path: polygon(30% 0%, 96% 0, 100% 8.5%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
    height: 90%;
    background: linear-gradient(to bottom, #7e7e7e, #171717);
}*/
.border-div{
    position: absolute;
    top: 21.2px;
    right: 20.4px;
    left: 0;
    clip-path: polygon(30% 0%, 95.8% 0, 100% 8.3%, 100% 91.7%, 95.8% 100%, 30% 100%, 0 100%, 0 0);
    height: 97.5%;
    background: linear-gradient(to bottom, #7e7e7e, #333333);
}
@media (min-width: 1600px){
    .border-div{
        clip-path: polygon(30% 0%, 95.9% 0, 100% 8.2%, 100% 91.7%, 95.8% 100%, 30% 100%, 0 100%, 0 0);
        height: 98.5%;
    }
}
@media (max-width: 1100px){
    .border-div{
        clip-path: polygon(30% 0%, 93.7% 0, 100% 8.3%, 100% 91.7%, 93.8% 100%, 30% 100%, 0 100%, 0 0);
        height: 98%;
    }
}
@media (max-width: 850px){
    .border-div{
        clip-path: polygon(30% 0%, 89.7% 0, 100% 8.3%, 100% 91.7%, 89.7% 100%, 30% 100%, 0 100%, 0 0);
        height: 98.3%;
    }
}
@media (max-width: 600px){
    .border-div {
        height: 98%;
        right: -1px;
        top: 21.9px;
        clip-path: polygon(30% 0%, 84.2% 0, 100% 6.9%, 100% 93%, 83% 100%, 30% 100%, 0 100%, 0 0);
    }
}
@media (max-width: 400px){
    .border-div {
        height: 97.5%;
    }
}


.banner-section {
    height: 100%;
    position: relative;
    /* background-color: #171717; */
}

.octagon-border {
    position: relative;
    /* background-color: #171717; */
}

/* Video with Clipped Octagon Effect */
.clipped-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the section */
    clip-path: polygon(30% 0%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
    z-index: 1; /* Positioned behind the content */
}

/* .banner-section .banner-text {
    padding: 17px 30px;
    margin-left: -5px;
    width: 50%;
    position: absolute;
    z-index: 3;
    bottom: 120px;
} */


.banner-text-h h2 {
    line-height: 37px;
    color: #e5e5e5;
}
.banner-text h3{
    margin-top: 3px;
    font-size: 22px;
    line-height: 25px;
    color: #171717;
}

.banner-text-h p {
    font-size: 16px;
    line-height: 20px;
    margin-top: 8px;
    color: #e5e5e5;
}
.banner-text {
    padding: 25px 30px 25px 10vw;
    margin-left: -5px;
    width: 60%;
    position: absolute;
    z-index: 3;
    bottom: 120px;
    clip-path: polygon(30% 0%, 93% 0, 100% 25%, 100% 75%, 93% 100%, 30% 100%, 0 100%, 0 0); /* Clipped shape */
    backdrop-filter: blur(10px); /* Applies a blur to the background */
    /* background: rgba(0, 0, 0, -0.7); */
    /* background: rgba(255, 255, 255, 0.3);  */
    color: #fff; /* Text color */
}


.banner-text::before {
    content: '';
    position: absolute;
    top: -5px; /* Adjust based on desired border thickness */
    left: -5px;
    width: calc(100% + 10px); /* Compensate for border size */
    height: calc(100% + 10px); /* Compensate for border size */
    background: rgba(255, 255, 255, 0.5);  /* Adds contrast for the border */
     /* Light-gray border */
    clip-path: polygon(30% 0%, 94% 0, 100% 25%, 100% 75%, 94% 100%, 30% 100%, 0 100%, 0 0); /* Same shape as banner-text */
    z-index: -1; /* Places the border behind the text content */
}
.banner-texts {
    padding: 25px 30px 25px 50px;
    margin-left: -5px;
    width: 49%;
    height: 180px;
    /* position: absolute; */
    z-index: 3;
    /* bottom: 120px; */
    clip-path: polygon(30% 0%, 93% 0, 100% 25%, 100% 75%, 93% 100%, 30% 100%, 0 100%, 0 0); /* Clipped shape */
    backdrop-filter: blur(10px); /* Applies a blur to the background */
    background: rgba(255, 255, 255, 0.5); 
    /* background: rgba(0, 0, 0, -0.7); */
}
@media (max-width: 900px){
    .banner-texts{
        width: 80%;
    }
}
@media (max-width: 1024px){
    .banner-texts{
        width: 70%;
        /* bottom: 9%; */
    }
}

.banner-texts::before {
    content: '';
    position: absolute;
    top: -5px; /* Adjust based on desired border thickness */
    left: -5px;
    width: calc(100% + 10px); /* Compensate for border size */
    height: calc(100% + 10px); /* Compensate for border size */
    background: rgba(255, 255, 255, 0.2); /* Adds contrast for the border */
     /* Light-gray border */
    clip-path: polygon(30% 0%, 94% 0, 100% 25%, 100% 75%, 94% 100%, 30% 100%, 0 100%, 0 0); /* Same shape as banner-text */
    z-index: -1; /* Places the border behind the text content */
}


/* .banner-text::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    left: 2px;
    bottom: 2px;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(7px);
    color: #6b6b6b;
    clip-path: polygon(30% 0%, 94% 0, 100% 25%, 100% 75%, 94% 100%, 30% 100%, 0 100%, 0 0);
} */
/* Overlay on top of the video */
.octagon-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2) 50%);
    /* background: rgba(0, 0, 0, 0.3);  */
    clip-path: polygon(30% 0%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
    z-index: 2; /* Placed above the video */
    pointer-events: none; /* Ensures the overlay doesn't block interactions */
}

.banner-text h2 {
    font-size: 30px;
    position: relative;
    z-index: 2;
    color: #171717;
    /* mix-blend-mode: multiply; */
}

.banner-text p {
    position: relative;
    z-index: 2;
    color: #171717;
}

.logo-box {
    position: absolute;
    top: 40px;
    left: 45px;
    z-index: 99;
}

.logo-box img {
    width: 160px;
}
.octagon-border3 {
    position: relative;
}

.octagon-border3::after {
    /* Creating the right side octagonal effect */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%; /* Adjust as needed */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4) 30%),
        url(https://conceptx.asia/assets/images/about_bann_31.webp);
    background-position: center;
    background-size: cover; /* Initial size slightly larger than container for zoom effect */
    background-repeat: no-repeat;
    background-color: transparent;
    clip-path: polygon(30% 0%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
    
    background-blend-mode: overlay; /* Blend the gradient and the image */
}



.octagon-border2 {
    position: relative;
}

.octagon-border2::after {
    /* Creating the right side octagonal effect */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%; /* Adjust as needed */
    background: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 90%), /* Blackish overlay */
        url(https://conceptx.asia/assets/images/service_bann_22.webp);
    background-position: center;
    background-size: cover; /* Initial size slightly larger than container for zoom effect */
    background-repeat: no-repeat;
    background-color: transparent;
    clip-path: polygon(30% 0%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
    background-blend-mode: overlay; /* Blend the overlay with the image */
}
@media (max-width: 1350px){
    .banner-text-h h2{
        line-height: 32px;
        font-size: 26px;
    }
}
@media (max-width: 1100px){
    .banner-section .banner-text{
        width: 65%;
    }
    .octagon-border::before{
        clip-path: polygon(30% 0%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 30% 100%, 0 100%, 0 0);
    }
    .clipped-video{
        clip-path: polygon(30% 0%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 30% 100%, 0 100%, 0 0);
    }
    /*.border-div{*/
    /*    clip-path: polygon(30% 0%, 94% 0, 100% 8.5%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);*/
    /*}*/
}
@media (max-width: 850px){
    .banner-text-h h2 {
        line-height: 29px;
        font-size: 21px;
    }
    .banner-text-h h3{
        font-size: 18px;
    }
    .banner-section .banner-text{
        width: 82%;
    }
    .octagon-border::before{
        clip-path: polygon(30% 0%, 90% 0, 100% 8%, 100% 92%, 90% 100%, 29% 100%, 0 100%, 0 0);
    }
    .octagon-border2::after{
        /* clip-path: polygon(0 0, 79% 0, 100% 10%, 100% 90%, 80% 100%, 0 100%, 0% 80%, 0% 20%); */
        clip-path: polygon(30% 0%, 90% 0, 100% 8%, 100% 92%, 90% 100%, 29% 100%, 0 100%, 0 0);
    }
    .octagon-border3::after{
        /* clip-path: polygon(0 0, 79% 0, 100% 10%, 100% 90%, 80% 100%, 0 100%, 0% 80%, 0% 20%); */
        clip-path: polygon(30% 0%, 90% 0, 100% 8%, 100% 92%, 90% 100%, 29% 100%, 0 100%, 0 0);
    }
    .clipped-video {
        clip-path: polygon(30% 0%, 90% 0, 100% 8%, 100% 92%, 90% 100%, 29% 100%, 0 100%, 0 0);
    }
   /*.border-div{*/
   /*     clip-path: polygon(30% 0%, 90% 0, 100% 8.5%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);*/
   /* }*/
}

/*@media (max-width: 800px) {*/
/*    .banner-texts {*/
/*        bottom: 16%;*/
/*    }*/
/*}*/

@media (max-width: 600px){
    .logo-box-h{
        top: 35px;
        left: 27px;
    }
    .banner-section .banner-text{
        width: 92%;
        padding: 17px 30px 17px 35px;
        clip-path: polygon(28% 0%, 89% 0, 100% 18%, 100% 82%, 89% 100%, 25% 100%, 0 100%, 0 0);
    }
    .banner-texts{
        width: 98%;
        clip-path: polygon(28% 0%, 89% 0, 100% 18%, 100% 82%, 89% 100%, 25% 100%, 0 100%, 0 0);
        /*bottom: 27%;*/
    }
    #aboutbannertexts .banner-texts{
        height: 160px;
    }
    .banner-text h2{
        font-size: 22px;
    }
    .banner-text-h h2{
        line-height: 24px;
        font-size: 19px;
    }
    .banner-text h3{
        font-size: 16px;
        line-height: 21px;
    }
    .banner-text-h p{
        font-size: 13px;
        line-height: 17px;
    }
    .menu-links h3 {
        font-size: 32px;
    }
    .toggle-btn-box{
        top: 43px;
        right: 49px;
    }
    .octagon-border::before{
        clip-path: polygon(0 0, 84% 0, 100% 7%, 100% 93%, 83% 100%, 0 100%, 0% 80%, 0% 20%);
    }
    .octagon-border2::after{
        /* clip-path: polygon(0 0, 79% 0, 100% 10%, 100% 90%, 80% 100%, 0 100%, 0% 80%, 0% 20%); */
        clip-path: polygon(0 0, 84% 0, 100% 7%, 100% 93%, 83% 100%, 0 100%, 0% 80%, 0% 20%);
    }
    .octagon-border3::after{
        /* clip-path: polygon(0 0, 79% 0, 100% 10%, 100% 90%, 80% 100%, 0 100%, 0% 80%, 0% 20%); */
        clip-path: polygon(0 0, 84% 0, 100% 7%, 100% 93%, 83% 100%, 0 100%, 0% 80%, 0% 20%);
    }
    .clipped-video {
        clip-path: polygon(0 0, 79% 0, 100% 10%, 100% 90%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
    }
    .home{
        padding: 25px 0 0 0;
    }
    .clipped-video{
        clip-path: polygon(0 0, 84% 0, 100% 7%, 100% 93%, 83% 100%, 0 100%, 0% 80%, 0% 20%);
    }
    /*.border-div{*/
    /*    right: 2px;*/
    /*    clip-path: polygon(30% 0%, 85% 0, 100% 7%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);*/
    /*}*/

}
@media (max-width: 380px){
    .menu-links h3 {
        font-size: 28px;
    }
}

@media (min-width: 1100px){
    #aboutbannertexts .banner-texts{
        width: 43%;
        clip-path: polygon(30% 0%, 91% 0, 100% 25%, 100% 75%, 91% 100%, 30% 100%, 0 100%, 0 0);
    }
}
@media (min-width: 1250px){
    #aboutbannertexts .banner-texts{
        width: 40%;
        
    }
}
@media (min-width: 1400px){
    #aboutbannertexts .banner-texts{
        width: 34%;
    }
}
@media (min-width: 1550px){
    #aboutbannertexts .banner-texts{
        width: 31%;
    }
    .banner-text{
        width: 45%;
    }
    .banner-text h3{
        line-height: 28px;
    }
    .toggle-btn-box{
        top: 65px;
        right: 75px;
    }
    .logo-box{
        top: 56px;
        left: 55px;
    }
    .logo-box img {
        width: 200px;
    }
    .toggle-btn-box i {
        font-size: 40px;
    }
}
@media (min-width: 1750px){
    #aboutbannertexts .banner-texts{
        width: 29%;
    }
}
/*
@media (max-width: 400px){
    .banner-texts{
        bottom: 25%;
    }
}*/

/* .home{
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(to bottom, #181818, #333);
    padding: 25px 25px 0px 0;

}
.banner-section{
    height: 100%;
    position: relative;
}

.octagon-border {
    position: relative;
}
.octagon-border::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: url(main-banner.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    clip-path: polygon(30% 0%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
} */


/* .octagon-border2{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #fff, #464646);
    clip-path: polygon(30% 0%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
}
.octagon-border2::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background: url(service-bann.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
}
.octagon-border2, .octagon-border2::before{
    clip-path: polygon(30% 0%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 30% 100%, 0 100%, 0 0);
} */

/* .banner-section .banner-text{
    padding: 17px 30px;
    margin-left: -5px;
    width: 50%;
    position: absolute;
    z-index: 3;
    bottom: 120px;
}
.banner-text-h h2{
    line-height: 32px;
}
.banner-text-h p{
    font-size: 15px;
    line-height: 20px;
    margin-top: 12px;
}
.banner-text::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    left: 2px;
    bottom: 2px;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(7px);
    color: #6b6b6b;
    clip-path: polygon(30% 0%, 94% 0, 100% 25%, 100% 75%, 94% 100%, 30% 100%, 0 100%, 0 0);  
}
.banner-text h2{
    font-size: 30px;
    position: relative;
    z-index: 2;
    color: #fff;
}
.banner-text p{
    position: relative;
    z-index: 2;
    color: #fff;
}

.logo-box{
    position: absolute;
    top: 50px;
    left: 45px;
    z-index: 99;
}
.logo-box img{
    width: 160px;
} */
/*  Section 2 */
.section2{
    width: 100%;
    height: 100vh;
    background-color: #171717;
    padding: 40px 5%;
    overflow: hidden;
    position: relative;
}
.text-stroke {
    position: absolute;
    top: -13%;
    left: 12%;
    font-size: 1070px;
    line-height: 800px;
    font-family: 'Michroma', sans-serif; /* Choose a readable font */
    z-index: -1;
    opacity: 0.1;

    color: transparent; /* Make the text transparent */
   
    -webkit-text-stroke: 2px #d78b28; /* Increase stroke width for bold effect */
    text-stroke: 2px black; /* For non-Webkit browsers */
    text-transform: uppercase; /* Optional: make text uppercase */
}

.content-section{
    display: flex;
    justify-content: space-between;
}
.main-head{
    flex-basis: 25%;
    display: flex;
    padding-top: 120px;
    flex-direction: column;
    color: #fff;
}
.main-head p{
    font-size: 14px;
    line-height: 19px;
    padding-top: 8px;
    text-align: justify;
}
.services-box{
    flex-basis: 71%;
    padding-top: 120px;
    color: #fff;
    position: relative;
    padding-bottom: 60px;
}
.services-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(to bottom, #222, transparent);
}
.services-box::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background-image: linear-gradient(to top, #222, transparent);
}
.service-div{
    margin-top: 20px;
}
.service-div h3{
    padding-bottom: 7px;
}
.service-div p{
    font-size: 15px;
    line-height: 19px;
    padding-top: 8px;
    text-align: justify;
}


/* Home digi section */
.digi-services-section{
    /*width: 85%;*/
    margin: 0 auto;
     padding: 100px 8% 0px 8%;
}
.head-digi-section{
    text-align: center;
    margin-bottom: 40px;
}
.head-digi-section h2{
    font-size: 30px;
    line-height: 37px;
    color: #cccccc;
    padding-bottom: 15px;
}
.head-digi-section h2 span{
    color: #fdaf04;
}
.head-digi-section p{
    font-size: 16px;
    line-height: 21px;
    color: #cccccc;
}
.dg-serv-grid{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.dg-serv-grid .dg-serv-box{
    width: 32%;
    margin-bottom: 13px;
}
/* .dg-serv-box:hover .serv-img-box{
    height: 270px;
} */
.dg-serv-box h3{
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-bottom: 0px;
    /* background-color: #000; */
    padding: 0px 4px;
}
.dg-serv-box h4{
    color: #fdaf04;
    display: none;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
}
.serv-img-box p a{
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
.serv-img-box p:hover a{
    color: #eaeaea;
}
.dg-serv-box .serv-img-box{
    width: 100%;
    height: 215px;
    border: 1.5px solid #fdaf04;
    background-image: url(https://conceptx.asia/assets/images/Content-Marketing_1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.dg-serv-box:nth-child(1) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/1-social-media-marketing.png);
}
.dg-serv-box:nth-child(2) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/2-online-reputation.png);
}
.dg-serv-box:nth-child(3) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/3-performance-marketing.png);
}
.dg-serv-box:nth-child(4) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/4-social-listening.png);
}
.dg-serv-box:nth-child(5) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/5-seo.png);
}
.dg-serv-box:nth-child(6) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/6-content-marketing.png);
}
.dg-serv-box:nth-child(7) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/7-web-design.png);
}
.dg-serv-box:nth-child(8) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/8-influencer-marketing.png);
}
.dg-serv-box:nth-child(9) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/9-digital-pr.png);
}
.dg-serv-box:nth-child(10) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/10-thought-leadership.png);
}
.dg-serv-box:nth-child(11) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/11-production.png);
}
.dg-serv-box:nth-child(12) .serv-img-box{
    background-image: url(https://conceptx.asia/assets/images/serv-img/12-3d-animation.png);
}

.dg-serv-box .serv-img-box p{
    text-align: center;
    color: #dddddd;
    padding: 10px;
}
.serv-img-box .short-desc{
    width: 70%;
    line-height: 20px;
}
.serv-img-box .full-desc{
    font-size: 13px;
    width: 80%;
    text-align: center;
    color: #ccc;
    line-height: 18px;
    display: none;
    transition: all 0.7s ease-in-out;
}
/* .dg-serv-box:hover .serv-img-box .short-desc{
    display: none;
}
.dg-serv-box:hover .serv-img-box .full-desc{
    display: block;
} */
.dg-serv-box.expanded .serv-img-box {
    height: 215px;
    background: #fdaf04;
    border: none;
    transition: height 0.4s ease-in-out;
    position: relative;
    clip-path: polygon(0 0, 88% 0, 100% 14%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}

.dg-serv-box.expanded .serv-img-box::before{
    content: '';
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    position: absolute;
    background-color: #171717;
    display: block;
    z-index: -1;
    top: 1.5px;
    left: 1.5px;  
}

.dg-serv-box.expanded .serv-img-box, .serv-img-box::before{
    clip-path: polygon(0 0, 89% 0, 100% 18%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}

@media (max-width: 500px){
    .dg-serv-box.expanded .serv-img-box {
        clip-path: polygon(0 0, 87% 0, 100% 16%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    }
    .dg-serv-box.expanded .serv-img-box, .serv-img-box::before{
        clip-path: polygon(0 0, 87% 0, 100% 16%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    }
}

.dg-serv-box .serv-img-box .full-desc {
    display: none; /* Hidden by default */
    transition: opacity 0.4s ease-in-out;
}

.dg-serv-box.expanded .serv-img-box .full-desc {
    display: block;
    opacity: 1;
}
.dg-serv-box.expanded .serv-img-box h3{
    display: none;
}
.dg-serv-box.expanded .serv-img-box h4{
    display: block;
    width: 90%;
    text-shadow: 0px 0px 2px rgba(242, 171, 14, 1);
}
.serv-img-box span{
    position: absolute;
    color: #222;
    
    font-weight: 500;
}
.dg-serv-box.expanded .serv-img-box span{
    color: #f2aa0e91;
}
.serv-img-box span:nth-child(1){
    top: 4%;
    left: 4%;
}
.serv-img-box span:nth-child(2){
    bottom: 4%;
    left: 4%;
}
.serv-img-box span:nth-child(3){
    bottom: 4%;
    right: 4%;
}
.serv-img-box span:nth-child(4){
    top: 4%;
    right: 4%;
}
.dg-serv-box.expanded .serv-img-box span:nth-child(4){
    display: none;
}

@media only screen and (min-width: 1025px) and (max-width: 1200px){ 
    .dg-serv-grid .dg-serv-box{
        width: 31%;
    }
    .dg-serv-box h3{
        font-size: 15px;
    }
    .dg-serv-box.expanded .serv-img-box {
        height: 260px;
    }
}
@media (max-width: 1024px) {
    .dg-serv-grid .dg-serv-box{
        width: 48%;
    }
    
}
@media (max-width: 800px) {
    .dg-serv-grid .dg-serv-box{
        width: 48%;
    }
    .dg-serv-box.expanded .serv-img-box {
        height: 250px;
    }
}
@media only screen and (min-width: 701px) and (max-width: 730px){
    .dg-serv-box.expanded .serv-img-box {
        height: 270px;
    }
}
@media only screen and (min-width: 601px) and (max-width: 700px){
    .dg-serv-box.expanded .serv-img-box {
        height: 280px;
    }
} 
@media (max-width: 600px) {
    .dg-serv-grid .dg-serv-box{
        width: 100%;
    }
    .head-digi-section p{
        font-size: 14px;
        line-height: 20px;
    }
}
@media (min-width: 1400px) {
    .digi-services-section{
        padding: 100px 9% 0px 9%;
    }
    .dg-serv-grid .dg-serv-box{
        width: 31%;
    }
    .serv-img-box .full-desc{
        font-size: 14px;
    }
    .dg-serv-box h3 {
        font-size: 17px;
    }
}
@media (min-width: 1500px) {
    .digi-services-section{
        padding: 100px 11% 0px 11%;
    }
}
@media (min-width: 1600px) {
    .digi-services-section{
        padding: 100px 12% 0px 12%;
    }
}
@media (min-width: 1700px) {
    .digi-services-section{
        padding: 100px 13% 0px 13%;
    }
}
@media (min-width: 1800px) {
    .digi-services-section{
        padding: 100px 14% 0px 14%;
    }
}

/* Media query for mobile */
@media (max-width: 768px) {
    .section2{
        height: auto;
    }
    .services-box::after{
        width: 0;
        height: 0;
    }
    .content-section {
        flex-direction: column;
    }
    .main-head {
        flex-basis: 100%;
        padding-top: 0;
        text-align: center;
    }
    .services-box {
        flex-basis: 100%;
        padding-top: 20px;
    }
    .service-div {
        opacity: 1; /* No animation on mobile */
        transform: scale(1) translateX(0);
    }
    .closemenu{
        top: 40px;
        right: 28px;
    }
}


/* Footer */
footer{
	height: auto;
	background-color: #000000;
    width: 97vw;
    margin-left: -100vw;
    margin-top: -80px;
    position: relative;
    z-index: 6;
    clip-path: polygon(30% 0%, 96% 0, 100% 13%, 100% 88%, 96% 100%, 30% 100%, 0 100%, 0 0);
}
#footerh{
    margin-top: 40px;
}
.footer-divs{
    display: flex;
    justify-content: space-between;
    padding: 60px 6% 60px 8%;
}
.footer-divs p{
    color: #cdcdcd;
    text-align: justify;
}
.footer-box{
    flex-basis: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.footer-box p{
    text-align: justify;
    font-size: 15px;
    line-height: 21px;
}
.footer-box2{
    flex-basis: 30%;
}
.footer-box2 p{
    font-size: 15px;
    line-height: 21px;
}
.footer-box2 p a{
    font-size: 15px;
    line-height: 21px;
    text-decoration: none;
    color: #cdcdcd;
}
.link-box h4{
    color: #fdaf04;
    margin-bottom: 8px;
    font-size: 16px;
}
.link-box p{
    margin-bottom: 6px;
    font-size: 16px;
}
.furthrr{
    margin-top: 20px;
}
.social-icons{
    flex-basis: 10%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}
.social-icons a i{
    color: #000;
    padding: 10px;
    background-color: #fff;
    border-radius: 50%;
}
.social-icons a:nth-child(1) i{
    padding: 10px 13px;
}
.footer-box img{
    width: 60%;
}
.copy-right{
    color: var(--orange-color);
    text-align: center;
    padding: 12px;
}
@media (max-width: 900px){
    footer{
        clip-path: polygon(30% 0%, 92% 0, 100% 13%, 100% 88%, 92% 100%, 30% 100%, 0 100%, 0 0);
    }
}
@media (max-width: 600px){
    footer{
        width: 100vw;
        clip-path: polygon(0 0, 83% 0, 100% 7%, 100% 92%, 82% 100%, 0 100%, 0% 80%, 0% 20%);
    }
    .footer-divs{
        flex-direction: column;
        gap: 30px;
    }
    .social-icons{
        flex-direction: row;
    }
    #footerh{
        margin-top: 30px;
    }
}
@media (min-width: 1400px) {
    .footer-divs{
        padding: 60px 7% 60px 9%;
    }
}
@media (min-width: 1500px) {
    .footer-divs{
        padding: 60px 8% 60px 11%;
    }
}
@media (min-width: 1600px) {
    footer{
        clip-path: polygon(30% 0%, 97% 0, 100% 13%, 100% 88%, 97% 100%, 30% 100%, 0 100%, 0 0);
    }
    .footer-divs{
        padding: 60px 9% 60px 12%;
    }
}
@media (min-width: 1700px) {
    .footer-divs{
        padding: 60px 10% 60px 13%;
    }
}
@media (min-width: 1800px) {
    footer{
        clip-path: polygon(30% 0%, 97% 0, 100% 16%, 100% 84%, 97% 100%, 30% 100%, 0 100%, 0 0);
    }
    .footer-divs{
        padding: 60px 11% 60px 14%;
    }
}

.preloader{
    background-color: #303030;
    position: fixed;
    height: 100vh;
    z-index: 5;
    width: 100vw;
    /* display: none; */
    z-index: 9999;
    overflow: hidden;
}
.preload-content{
    
    overflow: hidden;
    margin-left: 90px;
}
.preload-part-one{
    width: 220px;
}
.preloader-logo{
    width: 220px;
}
.preloader-part-two{
    width: 220px;
}
.preload-content p{
    text-align: justify;
    color: #d7d7d7;
    font-size: 7px;
    line-height: 10px;
}
.preloader-logo img{
    width: 100%;
    padding: 10px 0;
}
.preload-content span {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
@media (max-width: 600px){
    .preload-content{
        margin-left: 40px;
    }
}
/* #serv-bann{
    height: 150vh;
}
#serv-bann .banner-section{
    height: 100vh;
} */



/* #servesbanners{
    background-image: url(service-bann.png);
} */



.services-section{
    height: 60vh;
    background-color: #171717;
    width: 100%;

}
.aboutus-section{
    height: auto;
    background-color: #171717;
    width: 100%;

}
.about-page-box{
    width: 90%;
    height: auto;
    margin: 0 auto;
    background-color: #fdaf04;
    display: flex;
    padding: 0px 40px 20px 75px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 95% 0, 100% 12%, 100% 100%, 10% 100%, 5% 100%, 0% 89%, 0% 20%);
}
.about-page-box .about-head-box{
    flex-basis: 73%;
    padding: 25px 0px;
}
.about-page-box .about-head-box p{
    text-align: justify;
    line-height: 21px;
    font-size: 16px;
    color: #2c2c2c;
}
.about-page-box .about-img-box{
    flex-basis: 23%;
    /* width: 380px;
    height: 430px;
    margin-top: 30px;
    background-image: url(aboutimg.jpg); */
    
}
.about-img-box img{
    width: 100%;
    padding-top: 27px;
    clip-path: polygon(0 0, 69% 0, 100% 17%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}
@media (max-width: 1050px){
    .about-page-box .about-head-box {
        flex-basis: 65%;
    }
    .about-page-box .about-head-box p{
        font-size: 16px;
        line-height: 20px;
    }
    .about-page-box .about-img-box {
        flex-basis: 32%;
    }
    .about-img-box img{
        clip-path: polygon(0 0, 69% 0, 100% 22%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    }
    .services-section{
        height: 53vh;
    }
}
@media (max-width: 768px){
    .aboutus-section{
        height: auto;
    }
    .about-page-box{
        flex-direction: column;
        padding: 0px 40px 20px 50px;
    }
    .about-page-box{
        clip-path: polygon(0 0, 93% 0, 100% 4%, 100% 100%, 10% 100%, 9% 100%, 0% 95%, 0% 20%);
    }
    .about-img-box img{
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 10% 100%, 0% 91%, 0 0);
        padding-top: 5px;
    }
}
@media (max-width: 600px){
    .services-section{
        height: 73vh;
    }
    .aboutus-section{
        height: auto;
    }
    .about-page-box{
        flex-direction: column;
        padding: 0px 40px 20px 35px;
        clip-path: polygon(0 0, 86% 0%, 100% 4%, 100% 100%, 100% 100%, 16% 100%, 0 96%, 0 0);
    }
    .about-page-box .about-img-box{
        width: 100%;
        background-image: none;
    }
    .about-img-box img{
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 15% 100%, 0% 90%, 0 0);
        padding-top: 5px;
    }
    .about-page-box .about-head-box p{
        font-size: 14px;
        line-height: 17px;
    }
}
@media (max-width: 430px){
    .about-img-box img{
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 15% 100%, 0% 90%, 0 0);
    }
}
@media (max-width: 400px){
    .about-img-box img{
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 15% 100%, 0% 90%, 0 0);
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px){ 
    .about-page-box .about-head-box p{
        line-height: 19px;
        font-size: 17px;
    }
}


@media (min-width: 1400px){
    .aboutus-section{
        height: auto;
    }
    .services-section{
        height: 50vh;
    }
}
@media (min-width: 1450px){
    .about-page-box .about-head-box p{
        font-size: 14px;
    }
}
@media (min-width: 1600px){
    .services-section{
        height: 45vh;
    }
}


/* .about-img-box img{
    width: 100%;
} */

/* Network */
.network-section{
    /* height: 40vh; */
    width: 100%;
    
    margin-bottom: 70px;
    margin-top: 60px;
    position: relative;
}
.main-div{
    overflow-x: hidden;
    border-top: 1.6px solid #bebebe;
    border-bottom: 1.6px solid #bebebe;
    display: flex;
    height: 150px;
    padding: 15px 0px;
    gap: 20px;
}
.left-box{
    border: 1.2px solid #c4c4c4;
    width: 40px;
    margin-left: -5px;
}
.right-box{
    border: 1.2px solid #c4c4c4;
    width: 40px;
    margin-right: -5px;
}
.main-box{
    width: 100%;
    position: relative;
    background-color: #9b9b9b;
    padding: 20px;
    clip-path: polygon(0 0, 97% 0, 100% 9%, 100% 100%, 100% 100%, 3% 100%, 0 90%, 0 0);
}
/* Dropdown styling */
#network-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 65%;
    left: 20vw;
    background-color: #fdaf04; /* Dropdown background */
    border: 1px solid #ccc; /* Border for better visibility */
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 100;
    width: 230px; /* Adjust as needed */
    transition: all 0.4s ease-in-out;
}

#network-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#network-dropdown li {
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
}
#network-dropdown li a{
    color: #000;
    text-decoration: none;
    font-family: "Anek Latin", serif;
    /* font-family: 'Hind', sans-serif; */
    /* font-weight: 300; */
}


#network-dropdown li:hover {
    background-color: #f0f0f0; /* Highlight on hover */
}
/* End */
.main-box::before{
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    background-color: #171717;
    display: block;
    z-index: -1;
    top: 1px;
    left: 1px;
}
.main-box, .main-box::before{
    clip-path: polygon(0 0, 98% 0, 100% 18%, 100% 100%, 100% 100%, 2% 100%, 0 82%, 0 0);
}
.main-box .inner-box{
    width: 100%;
    border: 1.5px solid #939393;
    display: flex;
    background-color: #191919;
    justify-content: space-between;
    padding: 5px;
    height: 100%;
}
.inner-box .head-text{
    flex-basis: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head-text h3{
    color: #fdaf04;
    font-size: 25px;
    cursor: pointer;
}
.logos-box{
    display: flex;
    flex-basis: 67%;
    justify-content: space-around;
    align-items: center;
}
.logos-box .logo img {
    width: 100px;
    transition: opacity 0.5s ease; /* Smooth fade effect */
    opacity: 1; /* Fully visible */
}
@media (max-width: 380px){
    .head-text h3 {
        font-size: 22px;
    }
}
@media (max-width: 900px){
    .left-box, .right-box{
        width: 30px;
    }
    
}
@media only screen and (min-width: 500px) and (max-width: 899px){
    .head-text h3{
        font-size: 20px;
    }
    .head-text p{
        font-size: 13px;
    }
    .team-member .team-img img{
        margin-bottom: 6px;
    }

}
@media (max-width: 500px){
    .network-section{
        height: 68vh;
        margin-top: 7vh;
        margin-bottom: 40px;
    }
    .main-div{
        height: 440px;
        padding: 20px;
    }
    .main-box .inner-box{
        flex-direction: column;
        gap: 25px;
    }
    .logos-box{
        flex-direction: column;
        gap: 20px;
        min-height: 257px;
    }
    .main-box{
        clip-path: polygon(0 0, 86% 0, 100% 10%, 100% 100%, 100% 100%, 14% 100%, 0 90%, 0 0);
        padding: 30px;
    }
    .main-box, .main-box::before{
        clip-path: polygon(0 0, 86% 0, 100% 10%, 100% 100%, 100% 100%, 14% 100%, 0 90%, 0 0);
    }
    .main-box .inner-box{
        padding: 15px;
    }
    .left-box{
        display: none;
    }
    .right-box{
        display: none;
    }
    #network-dropdown {
        top: 25%;
    }
}


/* Map section */
.map-section{
    padding: 40px 10%;
    background-color: #171717;
}
.main-map-section{
    display: flex;
    gap: 60px;

}
.main-map-section .content-box{
    flex-basis: 35%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.content-box h2{
    font-size: 30px;
}
.content-box p{
    text-align: justify;
    margin-top: 20px;
    font-size: 16px;
    line-height: 22px;
}
.main-map-section .map-box{
    /* flex-basis: 63%; */
    width: 665px;
    height: 420px;
    overflow: hidden;
    border: 1.5px solid #7e7e7e;
    padding: 15px;
    
}
.map-inner-box{
    border: 1px solid #7e7e7e;
    width: 100%;
    height: 100%;
    background-image: url(https://conceptx.asia/assets/images/map_bg_grid.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.map-box img{
    width: 380px;
    scale: 1;
    margin-left: 23%;
}
.tooltip{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.tooltip span{
    color: #000;
    padding: 4px 7px;
    background-color: #fdaf04;
    font-size: 9px;
    border-radius: 20px;
    /* font-family: 'Hind', sans-serif; */
    font-family: "Anek Latin", serif;
    font-weight: 500;
}
.tooltip span::after{
    content: "";
    position: absolute;
    bottom: -6px;
    left: 40%;
    width: 10px;
    height: 10px;
    background-image: url(https://conceptx.asia/assets/images/tiploc_3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.tooltip span:nth-child(6)::after{
    bottom: -4px;
    left: 77%;
}
.tooltip span:nth-child(7)::after{
    bottom: 1px;
    left: -19%;
    width: 10px;
    rotate: 85deg;
}


.tooltip span:nth-child(1){
    position: absolute;
    bottom: 9px;
    left: 41%;
}
.tooltip span:nth-child(2){
    position: absolute;
    bottom: 12%;
    left: 39%;
}
.tooltip span:nth-child(3){
    position: absolute;
    bottom: 10%;
    left: 48%;
}
.tooltip span:nth-child(4){
    position: absolute;
    bottom: 28%;
    left: 39%;
}
.tooltip span:nth-child(5){
    position: absolute;
    bottom: 35%;
    left: 52%;
}
.tooltip span:nth-child(6){
    position: absolute;
    bottom: 46%;
    left: 33%;
}
.tooltip span:nth-child(7){
    position: absolute;
    bottom: 42%;
    left: 39%;
}
.tooltip span:nth-child(8){
    position: absolute;
    bottom: 64%;
    left: 65%;
}
.tooltip span:nth-child(9){
    position: absolute;
    bottom: 62%;
    left: 32%;
}
.tooltip span:nth-child(10){
    position: absolute;
    bottom: 90%;
    left: 43%;
}
@media only screen and (min-width: 600px) and (max-width: 1199px){
    .map-box img{
        margin-left: 15%;
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1199px){ 
    .main-map-section{
        gap: 40px;
    }
    .tooltip span:nth-child(1){
        position: absolute;
        bottom: 21px;
        left: 37%;
    }
    .tooltip span:nth-child(2){
        position: absolute;
        bottom: 12%;
        left: 34%;
    }
    .tooltip span:nth-child(3){
        position: absolute;
        bottom: 10%;
        left: 45%;
    }
    .tooltip span:nth-child(4){
        position: absolute;
        bottom: 25%;
        left: 35%;
    }
    .tooltip span:nth-child(5){
        position: absolute;
        bottom: 35%;
        left: 44%;
    }
    .tooltip span:nth-child(6){
        position: absolute;
        bottom: 39%;
        left: 24%;
    }
    .tooltip span:nth-child(7){
        position: absolute;
        bottom: 37%;
        left: 35%;
    }
    .tooltip span:nth-child(8){
        position: absolute;
        bottom: 54%;
        left: 66%;
    }
    .tooltip span:nth-child(9){
        position: absolute;
        bottom: 50%;
        left: 27%;
    }
    .tooltip span:nth-child(10){
        position: absolute;
        bottom: 77%;
        left: 38%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1349px){ 
    .tooltip span:nth-child(1){
        position: absolute;
        bottom: 22px;
        left: 44%;
    }
    .tooltip span:nth-child(2){
        position: absolute;
        bottom: 13%;
        left: 41%;
    }
    .tooltip span:nth-child(3){
        position: absolute;
        bottom: 14%;
        left: 51%;
    }
    .tooltip span:nth-child(4){
        position: absolute;
        bottom: 23%;
        left: 42%;
    }
    .tooltip span:nth-child(5){
        position: absolute;
        bottom: 35%;
        left: 50%;
    }
    .tooltip span:nth-child(6){
        position: absolute;
        bottom: 40%;
        left: 33%;
    }
    .tooltip span:nth-child(7){
        position: absolute;
        bottom: 36%;
        left: 43%;
    }
    .tooltip span:nth-child(8){
        position: absolute;
        bottom: 54%;
        left: 69%;
    }
    .tooltip span:nth-child(9){
        position: absolute;
        bottom: 51%;
        left: 34%;
    }
    .tooltip span:nth-child(10){
        position: absolute;
        bottom: 78%;
        left: 45%;
    }
}
@media (min-width: 1350px){
    .tooltip span:nth-child(1){
        position: absolute;
        bottom: 20px;
        left: 46%;
    }
    .tooltip span:nth-child(2){
        position: absolute;
        bottom: 14%;
        left: 42%;
    }
    .tooltip span:nth-child(3){
        position: absolute;
        bottom: 16%;
        left: 52%;
    }
    .tooltip span:nth-child(4){
        position: absolute;
        bottom: 23%;
        left: 44%;
    }
    .tooltip span:nth-child(5){
        position: absolute;
        bottom: 33%;
        left: 50%;
    }
    .tooltip span:nth-child(6){
        position: absolute;
        bottom: 39%;
        left: 34%;
    }
    .tooltip span:nth-child(7){
        position: absolute;
        bottom: 35%;
        left: 43%;
    }
    .tooltip span:nth-child(8){
        position: absolute;
        bottom: 54%;
        left: 69%;
    }
    .tooltip span:nth-child(9){
        position: absolute;
        bottom: 52%;
        left: 35%;
    }
    .tooltip span:nth-child(10){
        position: absolute;
        bottom: 77%;
        left: 46%;
    }
}
@media (max-width: 768px){
    .main-map-section{
        flex-direction: column;
    }
}
@media (max-width: 600px){
    .map-box img{
        margin-left: 16%;
    }
    .main-map-section{
        flex-direction: column;
    }
    .main-map-section .map-box{
        width: 320px;
    }
    .tooltip span:nth-child(1){
        bottom: 20px;
        left: 25%;
    }
    .tooltip span:nth-child(2){
        left: 19%;
    }
    .tooltip span:nth-child(3){
        left: 38%;
        bottom: 15%;
    }
    .tooltip span:nth-child(4){
        bottom: 22%;
        left: 22%;
    }
    .tooltip span:nth-child(5){
        left: 34%;
    }
    .tooltip span:nth-child(6){
        bottom: 39%;
        left: 2%;
    }
    .tooltip span:nth-child(7){
        bottom: 36%;
        left: 22%;
    }
    .tooltip span:nth-child(8){
        bottom: 53%;
        left: 70%;
    }
    .tooltip span:nth-child(9){
        bottom: 51%;
        left: 5%;
    }
    .tooltip span:nth-child(10){
        bottom: 78%;
        left: 25%;
    }
}
@media (min-width: 1400px){
    .map-section{
        padding: 40px 10%;
    }
}
@media (min-width: 1500px){
    .map-section{
        padding: 40px 11%;
    }
    .main-map-section{
        justify-content: space-between;
    }
}
@media (min-width: 1600px){
    .map-section{
        padding: 40px 12%;
    }
}
@media (min-width: 1700px){
    .map-section{
        padding: 40px 13%;
    }
}
@media (min-width: 1800px){
    .map-section{
        padding: 40px 14%;
    }
}



/* Awards Section */
.awards-section {
    width: 100%;
    /* height: 80vh; */
    padding: 40px 10%;
}

.awards-box {
    display: flex;
    gap: 40px;
}

.awards-text-box {
    flex-basis: 30%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.awards-text-box h2{
    margin-bottom: 10px;
}
.awards-text-box p{
    text-align: justify;
    font-size: 16px;
    line-height: 22px;
}
.awards-list {
    flex-basis: 68%;
    border: 1px solid #fdaf04;
    height: 400px;
    overflow: hidden;
    position: relative;
}
.stage-img{
    position: absolute;
    bottom: 0;
    width: 41%;
}
.shadow-div{
    position: absolute;
    width: 24%;
    height: 0px;
    border-radius: 41%;
    bottom: 50px;
    z-index: 111;
    box-shadow: 1px -25px 20px 16px rgba(255, 255, 255, 0.6);
    background: transparent;
}
.awards-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    background-image: url(https://conceptx.asia/assets/images/awards_grid.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.award-img {
    position: absolute; /* Individual positioning */
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
    visibility: hidden; /* Hide by default */
    opacity: 0; /* Make hidden images invisible */
}

.award-img img {
    width: 190px;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Styles for visible images */
.award-img.active {
    transform: translateX(0) scale(1.2);
    opacity: 1;
    visibility: visible;
}

.award-img.near-left {
    transform: translateX(-180px) translateY(20px) scale(0.9);
    opacity: 0.9;
    visibility: visible;
}

.award-img.near-right {
    transform: translateX(180px) translateY(20px) scale(0.9);
    opacity: 0.9;
    visibility: visible;
}

.award-img.far-left {
    transform: translateX(-290px) translateY(50px) scale(0.6);
    opacity: 0.5;
    visibility: visible;
    filter: grayscale(100%);
}

.award-img.far-right {
    transform: translateX(290px) translateY(50px) scale(0.7);
    opacity: 0.5;
    visibility: visible;
    filter: grayscale(100%);
}

.award-img.far-far-left {
    transform: translateX(-390px) translateY(70px) scale(0.4);
    opacity: 0.1;
    visibility: none;
    filter: grayscale(100%);
}

.award-img.far-far-right {
    transform: translateX(390px)translateY(70px) scale(0.4);
    opacity: 0.1;
    visibility: none;
    filter: grayscale(100%);
}


@media (max-width: 1299px){
    .stage-img{
        width: 45%;
    }
}
@media (max-width: 1050px){
    .stage-img{
        width: 58%;
    }
}
@media (max-width: 950px){
    .stage-img{
        width: 64%;
    }
}
@media (max-width: 850px){
    .stage-img{
        width: 76%;
    }
}
@media (max-width: 600px){
    .stage-img{
        width: 71%;
    }
}

@media (max-width: 600px){
    .awards-box{
        flex-direction: column;
    }
    .awards-list{
        min-height: 436px;
    }
    .awards-slider{
        height: 420px;
    }
    .shadow-div{
        bottom: 60px;
        width: 53%;
    }
}
@media (max-width: 500px){
    .stage-img{
        width: 91%;
        bottom: 17px;
    }
}
@media (min-width: 1400px){
    .awards-section{
        padding: 40px 10%;
    }
}
@media (min-width: 1500px){
    .awards-section{
        padding: 40px 11%;
    }
}
@media (min-width: 1600px){
    .awards-section{
        padding: 40px 12%;
    }
    .stage-img{
        width: 34%;
    }
}
@media (min-width: 1700px){
    .awards-section{
        padding: 40px 13%;
    }
    .stage-img{
        width: 30%;
    }
}
@media (min-width: 1800px){
    .awards-section{
        padding: 40px 14%;
    }
}

/* Team Section */
.team-section{
    background-color: #171717;
    padding: 70px 10%;   
    margin-bottom: 3vh;
}
.team-head-text h2{
    color: #fdaf04;
    font-size: 25px;
}
.team-box{
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}
.team-box a{
    text-decoration: none;
}
.team-member{
    width: 240px;
    background-color: #080808;
    padding: 14px;
}
.team-member h3{
    color: #fdaf04;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 3px;
}
.team-member p{
    color: #fff;
    text-align: center;
}
.team-img .bg-grid{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
   opacity: 0;
}
.bg-grid .imggrid{
    position: absolute;
    top: -80px;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /*transition: top 6s ease-in-out;*/
}
@keyframes imggrid{
    0%{
        top: -80px;
    }
    100%{
        top: 0px;
    }
}
.team-member:hover .bg-grid{
    opacity: 1;
}
.team-member:hover .imggrid{
    /* top: 0px; */
    animation: imggrid 8s infinite ease-in;
    opacity: 1;
}
.team-member .grad-img{
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    opacity: 0;
    background-image: linear-gradient(to top, #f2aa0ecf, transparent);
    transition: all 0.4s ease-in-out;
}
.team-member:hover .grad-img{
    opacity: 1;
}
.team-member .team-img{
    border: 1px solid #939393;
    position: relative;
    
}
.team-member .team-img img{
    width: 100%;
    scale: 1.2;
    margin-bottom: 9px;
    position: relative;
    z-index: 9;
}
@media (max-width: 768px){
    .team-section{
        margin-bottom: 4vh;
    }
    .team-member{
        width: 280px;
    }
    .team-box{
        gap: 30px;
    }
    .team-member .team-img img{
        margin-bottom: 13px;
    }
}
@media (max-width: 600px){
    .team-box{
        gap: 40px;
        flex-direction: column;
        align-items: center;
    }
    .team-member{
        width: 300px;
    }
    .team-head-text h2{
        text-align: center;
    }
    .team-section{
        margin-bottom: 2vh;
    }
}
@media (min-width: 1400px){
    .team-section{
        padding: 70px 10%;
    }
}
@media (min-width: 1500px){
    .team-section{
        padding: 70px 11%;
    }
    .team-member{
        width: 270px;
    }
}
@media (min-width: 1600px){
    .team-section{
        padding: 70px 12%;
    }
}
@media (min-width: 1700px){
    .team-section{
        padding: 70px 13%;
    }
}
@media (min-width: 1800px){
    .team-section{
        padding: 70px 14%;
    }
}

/* Service individual page */
.service-page-section{
	padding: 90px 10% 20px 10%; 
}

.service-info h1{
	color: #fdaf04;
	font-size: 35px;
    text-align: center;
}
.service-info h2{
	color: #fff;
	font-size: 20px;
    margin-top: 25px;
}
.service-info p{
	color: #fff;
	padding-top: 5px;
    line-height: 22px;
}
.service-info ul{
    padding-left: 15px;
    color: #fff;
}
.service-pge .banner-text-t{
    padding: 35px 30px 35px 10vw; 
    width: 60%;
}
.service-pge .banner-text-t h2{
    font-size: 30px;
}
.service-pge .banner-text-t p{
    margin-top: 10px;
}
.service-info .cta{
    margin-top: 20px;
}
.service-info .getin{
    color: #fdaf04;
    text-decoration: none;
}
@media (max-width: 800px){
	.service-page{
		flex-direction: column;
		gap: 20px;
	}
    .banner-text-t{
        padding: 33px 35px 33px 35px!important;
    }
    .banner-text-t h2{
        font-size: 33px;
    }
    .banner-text-t p{
        margin-top: 15px;
    }
}

@media (max-width: 600px){
    .service-info h1{
	color: #fdaf04;
	font-size: 25px;
    text-align: center;
}
    .service-pge .banner-text-t{
        width: 98%;
    }
    .service-pge .banner-text-t h2{
        font-size: 25px;
        line-height: 27px;
    }

}
@media (max-width: 900px){
    .banner-text-t{
        width: 70%;
    }
}
@media (max-width: 768px){
    .banner-text-t{
        width: 60%;
    }
}

@media (min-width: 1500px){
    .banner-text-t{
        width: 40%;
    }
}
@media (min-width: 1600px){
    .banner-text-t{
        width: 38%;
    }
}
@media (min-width: 1800px){
    .banner-text-t{
        width: 34%;
    }
}
@media (min-width: 1900px){
    .banner-text-t{
        width: 31%;
    }
}



/* contact-section */
.contact-section{
    height: auto;
    padding: 70px 60px 40px 0px;
   
}
.contact-form{
    padding: 30px 4% 30px 8%;
    background-color: #fdaf04;
}
.form-box{
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-top: 30px;
}
.input-boxe-one{
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}
.input-boxe-one input{
    width: 100%;
    font-size: 16px;
    background-color: transparent;
    padding: 10px 12px;
    position: relative;
    border: 2.5px solid #000;
    outline: none;
}
.input-boxe-one textarea{
    width: 100%;
    height: 100%;
    font-size: 16px;
    background-color: transparent;
    border: 2.5px solid #000;
    padding: 10px;
    outline: none;
    /* font-family: 'Hind', sans-serif; */
    font-family: "Anek Latin", serif;
    resize: none;
}
input::placeholder{
    color: #000;
}
textarea::placeholder{
    color: #000;
}
.submit-btn-box{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -60px;
}
.submit-btn{
    width: 300px;
    height: 53px;
    background-color: #000;
    position: relative;
    color: #000;
    font-size: 20px;
    border: none;
    outline: none;
    clip-path: polygon(5% 0, 94% 0, 100% 21%, 100% 78%, 95% 100%, 5% 100%, 0 83%, 0 21%);
}
.submit-btn::after{
    content: '';
    width: 296.5px;
    height: 49px;
    top: 2px;
    left: 2px;
    z-index: -1;
    position: absolute;
    background-color: #fdaf04;    
}
.submit-btn, .submit-btn::after{
    clip-path: polygon(5% 0, 94% 0, 100% 21%, 100% 78%, 95% 100%, 5% 100%, 0 83%, 0 21%);
}


@media (max-width: 600px){
    
    .contact-section{
        padding: 70px 40px 40px 0px;
    }
    .form-box{
        flex-direction: column;
        gap: 25px;
    }
    .submit-btn::after{
        width: 293.5px;
    }
}
@media (max-width: 400px){
    .submit-btn::after{
        width: 293.5px;
    }
}

@media (min-width: 1400px){
    .contact-form{
        padding: 30px 6% 30px 9%;
    }
}
@media (min-width: 1500px){
    
    .contact-form{
        padding: 30px 8% 30px 11%;
    }
}
@media (min-width: 1600px){
    .contact-form{
        padding: 30px 9% 30px 12%;
    }
}
@media (min-width: 1700px){
    .contact-form{
        padding: 30px 10% 30px 13%;
    }
}
@media (min-width: 1800px){
    .contact-form{
        padding: 30px 11% 30px 14%;
    }
}
/* .fname{
    width: 100%;
    height: 38px;
    background-color: #000;
    padding: 10px 12px;
    position: relative;
    border: none;
    outline: none;
    clip-path: polygon(5% 0, 94% 0, 100% 21%, 100% 78%, 95% 100%, 5% 100%, 0 83%, 0 21%);
}
.fname::before{
    content: '';
    position: absolute;
    width: calc(100% - 2px);
    height: 37px;
    top: 2px;
    left: 2px;
    display: block;
    z-index: -1;
    background-color: #d78b28; 
}
.fname, .fname::before{
    clip-path: polygon(5% 0, 94% 0, 100% 21%, 100% 78%, 95% 100%, 5% 100%, 0 83%, 0 21%);
} */
/* .main-box{
    width: 100%;
    position: relative;
    background-color: #c4c4c4;
    padding: 20px;
    clip-path: polygon(0 0, 97% 0, 100% 9%, 100% 100%, 100% 100%, 3% 100%, 0 90%, 0 0);
}
.main-box::before{
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    background-color: #333;
    display: block;
    z-index: -1;
    top: 1px;
    left: 1px;
}
.main-box, .main-box::before{
    clip-path: polygon(0 0, 98% 0, 100% 14%, 100% 100%, 100% 100%, 2% 100%, 0 86%, 0 0);
} */



.services-page-box{
    width: 85%;
    height: 320px;
    margin: 0 auto;
    background-color: #fdaf04;
    display: flex;
    padding: 0px 40px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 95% 0, 100% 16%, 100% 100%, 80% 100%, 5% 100%, 0% 84%, 0% 20%);
    gap: 15px;
}


.services-page-box .serv-head-box{
    flex-basis: 29%;
    padding-left: 10px;
    padding-top: 5px;
}
.serv-head-box p{
    text-align: justify;
    margin-top: 10px;
    font-size: 14px;
    line-height: 19px;
}
.services-page-box .arrow-box{
    flex-basis: 4%;
    display: flex;
    align-items: center;
}
.services-page-box .arrow-box img{
    transform: scale(0);
}
.services-page-box .services-list-box{
    flex-basis: 61%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
}
.second-box{
    overflow: hidden;
    width: 68%;
    gap: 20px;
}
.services-page-box::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
    width: 68%;
    height: 75px;
    background-image: linear-gradient(to bottom, #fdaf04, transparent);
}
.services-page-box::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 69%;
    height: 75px;
    background-image: linear-gradient(to top, #fdaf04, transparent);
}
.service-ind-box h3{
    font-size: 26px;
    margin-bottom: 10px;
    color: #fff;
}
.service-ind-box p{
    font-size: 14px;
    line-height: 19px;
}
.service-ind-box:nth-child(0){
    gap: 15px;
    margin-top: 50px;
}
#lineone{
    margin-top: 10vh;
}
.banner-textsbox{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    padding-bottom: 8%;
    flex-direction: column;
    justify-content: flex-end;
}
.Service-bann-head{
    z-index: 4;
    /* margin-top: 50vh; */
    margin-left: 11vw;
    position: absolute;
    height: 100%;
    display: flex;
    padding-bottom: 10%;
    position: absolute;
    flex-direction: column;
    justify-content: flex-end;
}
#about-bann .Service-bann-head{
    color: #171717;
}
.Service-bann-head h2{
    font-size: 50px;
    
    mix-blend-mode: difference!important;
    line-height: 52px;
    margin-bottom: 8px;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  */
}
#serv-bann .Service-bann-head{
    color: #171717;
}
/* .Service-bann-head p{
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
} */
.title-box{
    width: 400px;
    height: 150px;
    content: '';
    position: absolute;
    background-color: #fdaf04;
    bottom: -0.5px;
    left: 10%;
    z-index: 3;
    clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%);
}
.about-title-box{
    width: 400px;
    height: 150px;
    content: '';
    position: absolute;
    background-color: #fdaf04;
    bottom: 0;
    left: 8%;
    z-index: 3;
    clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%);
}
@media only screen and (min-width: 901px) and (max-width: 1100px){
    .serv-head-box p{
        font-size: 13px;
        line-height: 16px;
    }
}
@media only screen and (min-width: 601px) and (max-width: 900px){
    .services-page-box{
        clip-path: polygon(0 0, 91% 0%, 100% 9%, 100% 100%, 100% 100%, 9% 100%, 0 91%, 0 0);
    }
    .services-page-box{
        flex-direction: column;
        height: 580px;
        width: 92%;
        gap: 20px;
    }
    .banner-textsbox{
        padding-bottom: 23%;
    }

    .Service-bann-head{
        padding-bottom: 26%;
    }
    .arrow-box {
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 0%;
    }
    .second-box{
        width: 100%;
        position: relative;
    }
    .second-box::before{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        z-index: 8;
        width: 100%;
        height: 70px;
        background-image: linear-gradient(to bottom, #fdaf04, transparent);
    }
    .second-box::after{
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 70px;
        background-image: linear-gradient(to top, #fdaf04, transparent);
    }
    .services-page-box .serv-head-box{
        padding-left: 0;
    }
    .services-page-box::before{
        width: 0%;
    }
}
@media (max-width: 600px){
    #lineone{
        margin-top: 6vh;
    }
    .title-box{
        width: 250px;
        height: 125px;
    }
    .about-title-box{
        width: 234px;
        height: 121px;
        left: 10%;
    }
    .banner-textsbox{
        padding-bottom: 53%;
    }
    .Service-bann-head{
        /* margin-top: 62vh; */
        padding-bottom: 60%;
    }
    .services-page-box{
        flex-direction: column;
        height: 580px;
        width: 92%;
        gap: 20px;
        clip-path: polygon(0 0, 85% 0%, 100% 9%, 100% 100%, 100% 100%, 16% 100%, 0 91%, 0 0);
    }
    .arrow-box {
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 0%;
    }
    .second-box{
        width: 100%;
        position: relative;
    }
    .second-box::before{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        z-index: 8;
        width: 100%;
        height: 70px;
        background-image: linear-gradient(to bottom, #fdaf04, transparent);
    }
    .second-box::after{
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 70px;
        background-image: linear-gradient(to top, #fdaf04, transparent);
    }
    .services-page-box .serv-head-box{
        padding-left: 0;
    }
    .Service-bann-head{
        margin-left: 13vw;
        padding-right: 23px;
    }
    .Service-bann-head h2{
        margin-top: -28px;
        font-size: 33px;
        line-height: 39px;
    }
    .services-page-box::before{
        width: 0%;
    }
    .about-bann-head h2{
        margin-top: 0;
    }
    /* .about-page-box .about-img-box{
        min-width: 280px;
        width: 250px;
        min-height: 400px;
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 20% 100%, 0 82%, 0 0);
    } */
    .service-ind-box h3 {
        font-size: 21px;
    }
    .service-ind-box p{
        text-align: justify;
    }
}
@media (min-width: 1400px){
    /* .about-bann-head h2{
        margin-top: 40px;
    } */
    .about-bann-head{
        margin-left: 10vw;
    }
}
.Service-bann-head p{
    /* color: #171717; */
    mix-blend-mode: difference;
}

#footers{
    margin-top: 20px;
}
#footera{
    margin-top: 40px;
}



@media (max-width: 500px){
    #footers{
        margin-top: 50px;
    }
    #footera{
        margin-top: 60px;
    }
}
@media (max-width: 410px){
    #footers{
        margin-top: 80px;
    }
    #footera{
        margin-top: 70px;
    }
}
@media (max-width: 395px){
    #footers{
        margin-top: 140px;
    }
}


/*Team Page*/
.team-page-section{
	padding: 90px 10%; 
}
.team-memberpage{
	display: flex;
	gap: 80px;
}
.team-mem-info h1{
	color: #fdaf04;
	font-size: 28px;
}
.team-mem-info h2{
	color: #fff;
	font-size: 20px;
}
.team-mem-info p{
	color: #fff;
	padding-top: 20px;
	line-height: 22px;
}
.banner-text-t{
    padding: 35px 30px 35px 10vw; 
    width: 49%;
}
.banner-text-t h2{
    font-size: 50px;
}
.banner-text-t p{
    margin-top: 20px;
}
@media (max-width: 800px){
	.team-memberpage{
		flex-direction: column;
		gap: 20px;
	}
    .banner-text-t{
        padding: 33px 35px 33px 35px!important;
    }
    .banner-text-t h2{
        font-size: 33px;
    }
    .banner-text-t p{
        margin-top: 15px;
    }
}

@media (max-width: 600px){
    .banner-text-t{
        width: 98%;
    }
}
@media (max-width: 900px){
    .banner-text-t{
        width: 70%;
    }
}
@media (max-width: 768px){
    .banner-text-t{
        width: 60%;
    }
}

@media (min-width: 1500px){
    .banner-text-t{
        width: 40%;
    }
}
@media (min-width: 1600px){
    .banner-text-t{
        width: 38%;
    }
}
@media (min-width: 1800px){
    .banner-text-t{
        width: 34%;
    }
}
@media (min-width: 1900px){
    .banner-text-t{
        width: 31%;
    }
}



.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fdaf04;
    padding: 20px;
    border-radius: 5px;
    width: 60%;
    max-width: 450px;
    position: relative;
    z-index: 9999;
}

.modal-content .close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-content .close:hover {
    color: #666;
}
#openPopupForm{
    cursor: pointer;
}
#popupForm .contact-form{
    padding: 30px 10%;
    background-color: #fdaf04;
}
#popupForm .form-box{
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 30px;
}
#popupForm .form-inputs{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 16px;
    margin-bottom: 20px;
}
#popupForm .input-boxe-one{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}
#popupForm .input-boxe-one input{
    width: 100%;
    background-color: transparent;
    padding: 10px 12px;
    position: relative;
    border: 2.5px solid #000;
    outline: none;
}
#popupForm .input-boxe-one textarea{
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2.5px solid #000;
    padding: 10px;
    outline: none;
    /* font-family: 'Hind', sans-serif; */
    font-family: "Anek Latin", serif;
    resize: none;
}
#popupForm input::placeholder{
    color: #000;
}
#popupForm textarea::placeholder{
    color: #000;
}
#popupForm .submit-btn-box{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -45px;
}
#popupForm .submit-btn{
    width: 300px;
    height: 53px;
    background-color: #000;
    position: relative;
    color: #000;
    font-size: 20px;
    border: none;
    outline: none;
    clip-path: polygon(5% 0, 94% 0, 100% 21%, 100% 78%, 95% 100%, 5% 100%, 0 83%, 0 21%);
}
#popupForm .submit-btn::after{
    content: '';
    width: 296.5px;
    height: 49px;
    top: 2px;
    left: 2px;
    z-index: -1;
    position: absolute;
    background-color: #fdaf04;    
}
#popupForm .submit-btn, .submit-btn::after{
    clip-path: polygon(5% 0, 94% 0, 100% 21%, 100% 78%, 95% 100%, 5% 100%, 0 83%, 0 21%);
}
@media (max-width: 500px){
    .modal-content{
        width: 85%;
    }
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

  /* Color: fdaf04 */

/* .taxi-box{
    position: fixed;
    z-index: 99;
    bottom: 5px;
    left: 10px;
}
.taxi-box img{
    width: 23%;
} */

  /* Color: fdaf04 */
	#contact_form label.error {
		color: #000;
		font-size: 14px;
		font-family: "Anek Latin", serif;
		margin-top: -22px;
	}
	.success_msg_wrapper {
		background: #222;
	}
	
	.form_msg_wrapper {
		margin: 10px 0px;
		padding: 5px;
		text-align: center;
		color: #fff;
		border-radius: 4px;
	}
	
	.err_msg_wrapper {
		background: #222;
	}
	#contact_form_modal label.error {
		color: #000;
		font-size: 14px;
		font-family: "Anek Latin", serif;
		margin-top: -15px;
	}
	.success_msg_wrapper {
		background: #222;
	}
	
	.form_msg_wrapper {
		padding: 5px;
		text-align: center;
		color: #fff;
		border-radius: 4px;
	}
	
	.err_msg_wrapper {
		background: #222;
	}
	#contact_form label.error {
		color: #000;
		font-size: 14px;
		font-family: "Anek Latin", serif;
		margin-top: -26px;
	}
	.success_msg_wrapper {
		background: #222;
	}
	
	.form_msg_wrapper {
		padding: 5px;
		text-align: center;
		color: #fff;
		border-radius: 4px;
	}
	
	.err_msg_wrapper {
		background: #222;
	}
	@media (max-width: 500px){
		#contact_form_modal label.error {
			margin-top: -21px;
		}
	}