@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');


:root{

    /* color */
    --black:#000000;
    --white:#ffffff;
    --theme-blue:#193C90;
    --theme-dark:#666666;
    --txt-dark:#ADADAD;

    /* font-weight */
    --regular:400;
    --medium:500;
    --s-bold:600;
    --bold:700;
    --ex-bold:800;
}

html,* {
    /* cursor: none; */
    scroll-behavior: initial;
}
*,
*::before,
*::after {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    outline: none;
}

body {
    font-family: "Bricolage Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    scrollbar-width: none; -ms-overflow-style: none;
    box-sizing: border-box;
    background-color: var(--black);
}

.cursor {position: fixed; width: 30px; height: 30px; border-radius: 50%; background:url(../images/logo.png) center center no-repeat; background-size: contain; pointer-events: none; mix-blend-mode: difference; z-index: 999999; transition: transform 0.2s;}
h1,h2,h3,h4,h5,h6,p,ul {margin: 0; padding: 0;}

a {text-decoration: none}
a:hover {text-decoration: none}
.btn{border: none;}
.btn:focus, .btn:focus-visible, .btn:active {outline:none; box-shadow: none;}
:not(.btn-check) + .btn:active{outline:none; box-shadow: none; color: var(--white); background-color: var(--theme-blue);}


/* theme_btn */

.theme_btn{background-color: var(--white);  height: fit-content; color: var(--black); padding: 15px 35px; border: none; text-align: center; column-gap: 7px; border-radius: 50px; font-size: 18px; font-weight: var(--s-bold); line-height: 20px; display: inline-flex; align-items: center; position: relative;  transition: all 0.5s;}
.theme_btn span{position: relative; z-index: 2;}
.theme_btn::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--theme-blue);  border-radius: 30px; transform: scale(0); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease;}
.theme_btn:hover::after { transform: scale(1); opacity: 1; }
.theme_btn:hover{background-color: var(--theme-blue);  color: var(--white);}
.theme_btn .icon{height: 42px; width: 42px; background:var(--theme-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -2px; right: -13px; transition: all 0.5s; border-radius: 50%; z-index: 2;} 
.theme_btn:hover .icon{top: 50%;  transform: translateY( -50%); }
.theme_btn .icon img{height: 24px; width: 24px; object-fit: contain; transform: rotate(-30deg); transition: all 0.5s;}
.theme_btn:hover .icon img{transform: rotate(0deg); }


.container{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.panel { width: 100%;   min-height: 100vh; display: flex; overflow: hidden; align-items: center; justify-content: center; flex-direction: column; background-color: var(--black);}

main{ background-color: var(--black); position: relative; z-index: 2;}

/* header */

.header-main{padding: 20px 0;  background-color: var(--black); position: relative; z-index: 99;}
.header-main .logo-area{width: 176px;}
.header-main .logo-area img{width: 100%;}
.header-main .header-flex{display: flex;  justify-content: space-between;   align-items: center;  position: relative;}
.header-main ul.nav-menu{display: flex; align-items: center; column-gap:40px; list-style: none; justify-content: center; height: fit-content; position: absolute; left: 50%; transform: translateX(-50%);   padding: 12px 0;}
.header-main  ul.nav-menu li.has-sub .dd-mobile{display: none;}
.header-main  ul.nav-menu > li > a{color: var(--white); font-size: 18px; line-height: normal; font-weight: var(--s-bold); position: relative; text-transform: capitalize; padding: 5px 0;}
.header-main  ul.nav-menu > li > a::before{position: absolute; width: 0%; height: 1px; background-color: var(--white); content: ''; top: 0; left: 0; right: auto; transition: all 0.3s;} 
.header-main  ul.nav-menu > li:hover > a::before,
.header-main  ul.nav-menu > li > a.active::before{position: absolute; width: 100%; height: 1px; background-color: var(--white); content: '';  left: auto; right: 0; } 
.header-main  ul.nav-menu > li > a::after{position: absolute; width: 0%; height: 1px; background-color: var(--white); content: ''; bottom: 0; left: auto; right: 0; transition: all 0.3s;} 
.header-main  ul.nav-menu > li:hover > a::after,
.header-main  ul.nav-menu > li > a.active::after{position: absolute; width: 100%; height: 1px; background-color: var(--white); content: '';  left: 0; right: auto; } 
.header-main .header-right{display: flex; align-items: center; gap: 20px;  height: fit-content;}


.header-main  ul.nav-menu li.has-sub{position: relative;}
.header-main  ul.nav-menu li.has-sub a .menu-arrow{transition: all 0.3s ; margin-left: 5px;}
.header-main  ul.nav-menu li.has-sub:hover a .menu-arrow{transform: rotateX(-180deg);}
.header-main  ul.nav-menu li.has-sub:hover .mega-menu{ opacity: 1; height: auto;  transform: scaleY(1);}

.mega-menu{position: absolute; left: 0; top: 30px; border-radius: 5px; box-shadow:0 3px 5px rgba(226, 226, 226, 0.5);  height: 0;  width: max-content; margin:0; background: var(--white); transform-origin: top; transform: scaleY(0); opacity: 0; z-index: 111;transition: height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;}
.mega-menu .inner-menu{display: flex; justify-content: space-between;}
.mega-menu  ul.menu-list{list-style: none; padding: 10px 0;}
.mega-menu  ul.menu-list li a {color: var(--theme-dark); font-size: 16px; line-height: normal; font-weight: var(--medium); position: relative; text-transform: capitalize; padding: 5px 10px;}
.mega-menu  ul.menu-list li a.active{color: var(--black);}
.mega-menu .box-list{display: flex; width: calc(70% - 20px); justify-content: space-between; gap: 15px;}
.mega-menu .box-list .box-item{width: calc(50% - 10px );}
.mega-menu .box-list .box-item .box-img{width: 100%; overflow: hidden; border-radius: 10px; height: 295px;}
.mega-menu .box-list .box-item .box-img img{width: 100%; height:100%; transition: all 0.3s; object-fit: cover;}
.mega-menu .box-list .box-item:hover .box-img img{transform: scale(1.1); }
.mega-menu .box-list .box-item .info{font-size: 22px; line-height: 26px; color: var(--black); display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; box-orient: vertical; -webkit-box-orient: vertical; overflow: hidden; margin-top: 15px; }  

/* menu-icon css */
.menu-icon{display: none;}

.menu-icon .ham { width: 45px; cursor: pointer; border: 1px solid var(--white); border-radius: 50%; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.menu-icon .ham .line { fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;stroke:var(--white); stroke-width:3; stroke-linecap:round;}
.menu-icon .ham .top {stroke-dasharray: 20 172;}
.menu-icon .ham .middle {stroke-dasharray: 40 111;}
.menu-icon .ham .bottom { stroke-dasharray: 20 172;}
.menu-icon .ham.active .top {stroke-dashoffset: -132px;}
.menu-icon .ham.active .middle {stroke-dashoffset: -71px;}
.menu-icon .ham.active .bottom{stroke-dashoffset: -132px;}

/* footer */

footer{position: fixed; bottom: 0; left: 0; width: 100%; z-index: -1;}
.talk-main{padding: 100px; }
.talk-main .talk-flex{display: flex; justify-content: space-between; border: 1px solid var(--theme-dark); border-radius: 50px; padding: 45px 220px; }
.talk-main .talk-flex .left,
.talk-main .talk-flex .right{width: calc(50% - 35px);}
.talk-main .talk-flex .left h2{font-size: 46px; line-height: normal; font-weight:var(--bold); color: var(--white); }
.talk-main .talk-flex .right p{font-size: 18px; line-height: 30px; font-weight: var(--regular); color: var(--white); margin-bottom: 25px;}

.footer-main {position: relative; padding-bottom: 60px; }
.footer-main .footer-logo{width: 105px; position: absolute; bottom: 82px; left: 50%; transform: translate(-50%, 0%); z-index: 1;}
.footer-main .footer-logo img{width: 100%;}
.footer-main .com-info h3{font-size: 46px; line-height: normal; font-weight:var(--bold); color: var(--white); text-transform: capitalize; }
.footer-main .com-info ul.site-links {display: flex; align-items: center; margin: 30px 0 40px 0; flex-wrap: wrap; list-style: none; gap: 48px; }   
.footer-main .com-info ul.site-links li{position: relative;}
.footer-main .com-info ul.site-links li:not(:first-child)::before{content: '|'; position: absolute; color: var(--white); font-weight: var(--bold); font-size: 18px; line-height: normal; left: -24px;}
.footer-main .com-info ul.site-links li a{font-size: 18px; line-height: normal; color: var(--white); text-transform: uppercase; font-weight:var(--bold); transition: all 0.3s ease;} 
.footer-main .com-info ul.site-links li a:hover{color: var(--theme-blue);}
.footer-main .com-info ul.social-links {display: flex; align-items: center; margin: 30px 0 40px 0; flex-wrap: wrap; list-style: none; gap: 20px; }   
.footer-main .com-info ul.social-links li a{display: flex; align-items: center; justify-content: center; font-size: 32px; width: 74px; height: 74px; color: var(--black); overflow: hidden; background-color: var(--white); border-radius: 50%; position: relative; border: none;}
.footer-main .com-info ul.social-links li a span{position: relative; z-index: 2;}
.footer-main .com-info ul.social-links li a::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--theme-blue);  transform: scale(0); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; border-radius: 50%;}
.footer-main .com-info ul.social-links li a:hover::after { transform: scale(1); opacity: 1; }
.footer-main .com-info ul.social-links li a:hover{color: var(--white);}

.footer-main ul.quick-links { list-style: none; }   
.footer-main ul.quick-links li{position: relative; }
.footer-main ul.quick-links li:not(:last-child){margin-bottom: 20px;}
.footer-main ul.quick-links li a{font-size: 28px; line-height: normal; color: var(--white); text-transform: capitalize; font-weight:var(--medium); transition: all 0.3s ease; text-decoration: underline;}  
.footer-main ul.quick-links li a:hover{color: var(--theme-blue);}

.footer-main .contact-detail .info-flex{display: flex; align-items: start; column-gap: 12px;}
.footer-main .contact-detail .info-flex:not(:last-child){margin-bottom: 25px;}
.footer-main .contact-detail .info-flex .icon{min-width: 35px; width: 35px; height: 35px; margin-top: 3px;}
.footer-main .contact-detail .info-flex .icon img{width: 100%; height: 100%;}
.footer-main .contact-detail .info-flex .detail h3{font-size: 36px; font-weight: var(--medium); line-height: 40px; color: var(--white); margin-bottom: 5px;}
.footer-main .contact-detail .info-flex .detail a,
.footer-main .contact-detail .info-flex .detail p{font-size: 18px; line-height: 30px; font-weight: var(--regular); color: var(--white); }
.footer-main .contact-detail .info-flex .detail a {text-decoration: underline;}

.footer-bottom { border-top: 1px solid var(--theme-dark); border-bottom: 1px solid var(--theme-dark); padding: 30px 0; position: relative; margin-top: 110px;}
.footer-bottom .fb-flex{display: flex; align-items: center;}
.footer-bottom .left{width: 50%;}
.footer-bottom .right{width: 50%;}
.footer-bottom ul.privacy-links {display: flex; align-items: center;  flex-wrap: wrap; list-style: none; gap: 32px; justify-content: end;}   
.footer-bottom ul.privacy-links li{position: relative;}
.footer-bottom ul.privacy-links li:not(:first-child)::before{content: '|'; position: absolute; color: var(--white); font-weight: var(--medium); font-size: 18px; line-height: normal; left: -16px;}
.footer-bottom ul.privacy-links li a{font-size: 18px; line-height: normal; color: var(--white); text-transform: capitalize; font-weight:var(--medium); transition: all 0.3s ease;} 
.footer-bottom .left .copiright{font-size: 18px; line-height: normal; color: var(--white); text-transform: capitalize; font-weight:var(--medium);}


/* page-title */

.page-title{padding: 60px 0; }
.page-title .sec-subtitle{font-size: 22px; font-weight: var(--medium); line-height: 26px; color: var(--white); text-transform: capitalize; padding: 10px 20px; display: inline-block; border-radius: 40px; background-color: var(--white); color: var(--black); margin-bottom: 30px;}
.page-title h1.sec-title{font-size: 62px; font-weight: var(--bold); line-height: 66px; color: var(--white); margin-bottom: 30px;}
.page-title p{font-size: 24px; font-weight: var(--regular); line-height: 28px; color: var(--white);}

h2.title{font-size: 42px; line-height: 48px; font-weight: var(--bold); color: var(--white); }
h2.title span{font-size: 18px; line-height: 22px; font-weight: var(--medium); color: var(--theme-blue); display: block; margin-bottom: 10px;}

/* ===========================================================================================================================
                                                        home page 
=========================================================================================================================== */

/* hero section */

/* .hero-section {margin-bottom: 150px;} */
.hero-section h1{font-size: 120px; font-weight: var(--bold); line-height: normal; color: var(--white); margin-bottom: 43px;}
.hero-section p{font-size: 24px; font-weight: var(--regular); line-height: normal; color: var(--white); margin-bottom: 55px;}
.hero-img{width: 100%; height: 100vh; margin: 0 auto; overflow: hidden;}
.hero-img video{width: 100%; height: 100%; object-fit: cover;}

.swipe-section { position: relative; height: 100vh; width: 100%; overflow: visible; }  
.swipe-section .panel { position: absolute; }

/* feature-section */

.feature-section .f-flex {display: flex; justify-content: space-between;}
.feature-section .f-flex .left{width: calc(48% - 35px);}
.feature-section .f-flex .right{width: calc(52% - 35px);}
.feature-section .f-flex h2{font-size: 46px; line-height: normal; font-weight: bold; margin-bottom: 30px; color: var(--white); }
.feature-section .f-flex p{font-size: 18px; line-height: 30px; font-weight: var(--regular); color: var(--txt-dark); }
.feature-section .f-flex p:not(:last-child){margin-bottom: 50px;}

/* slider-wrap */

.slider-wrap {position: relative;}
.slider-wrap .image-slider .slider-image{ position: relative; width: 100%; height: 610px;  overflow: hidden;  background-repeat: no-repeat;  background-position: center;  background-size: cover; justify-content: flex-start; align-items: stretch; display: flex;}
.slider-wrap .image-slider .slider-image::before{ content: ''; background-color: var(--black); position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 20px; height: 100%; z-index: 1; }
.slider-wrap .image-slider .slider-image .slide-partial { width: 50%; height: 100%;overflow: hidden;  transition: transform 1s ease-in-out; background-size: 100vw !important; background-repeat: no-repeat !important;}
.slider-wrap .image-slider .slider-image .slide-left { transform: translateY(100%);  transition-delay: 0.2s; background-position: left !important;}
.slider-wrap .image-slider .slider-image .slide-right { transform: translateY(-100%); transition-delay: 0.2s; background-position: right !important;}
.slider-wrap .image-slider .slick-active .slider-image .slide-left,
.slider-wrap .image-slider .slick-active .slider-image .slide-right {transform: translateY(0%);}
.slider-wrap .image-slider .slide-content{font-size: 56px; line-height: normal; font-weight: var(--bold); color: var(--white); margin-top: 60px; width: 55%;}

.slider-wrap .container.sn{position: absolute; top: 690px; left: 50%; transform: translateX(-50%);z-index: 2;}
.slider-wrap .slide-nav{padding: 0; display: flex; justify-content: end; gap: 8px;}
.slider-wrap .slick-arrow{line-height: 0;  width: 124px; cursor: pointer; outline: none; padding: 0;}
.slider-wrap .slick-arrow:focus{background-color: transparent; outline: none}
.slider-wrap .slick-arrow img{width: 100%;}
.slider-wrap .slick-arrow:active{border: none;}
.slider-wrap .slick-arrow.NextArrow {transform:rotate(-180deg);}

/* solution-area */

.solution-area .s-flex{ display: flex; justify-content: space-between;}
.solution-area .s-flex .card-main{ background-color: #0D0D0D;  text-align: center; width: calc(25% - 3px);  padding: 55px 70px; transition: ease 0.4s; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.solution-area .s-flex .card-main:hover{ background-color: var(--theme-blue);  border-radius: 30px;}
.solution-area .s-flex .card-main:nth-of-type(4n+1):hover{ background-color: var(--theme-blue);}
.solution-area .s-flex .card-main:nth-of-type(4n+2):hover{ background-color: #fa0071;}
.solution-area .s-flex .card-main:nth-of-type(4n+3):hover{ background-color: #f56f1e;}
.solution-area .s-flex .card-main:nth-of-type(4n+4):hover{ background-color: #8334e7;}
.solution-area .s-flex .card-main h2{color: var(--white); font-size: 56px; font-weight: bold; line-height: normal;  text-transform: capitalize;} 
.solution-area .s-flex .card-main p{color: var(--txt-dark); font-size: 18px; font-weight: var(--regular); line-height: 29px; margin: 35px 0 45px 0; transition: ease 0.4s;}  
.solution-area .s-flex .card-main:hover p{color: var(--white);}
.solution-area .s-flex .card-main a.btn-arrow{width: 104px; height: 104px; position: relative; padding: 0; background-color: var(--theme-dark); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: auto; border: none;}
.solution-area .s-flex .card-main a.btn-arrow::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--white);  transform: scale(0); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; border-radius: 50%;}
.solution-area .s-flex .card-main:hover a.btn-arrow::after { transform: scale(1); opacity: 1; }
.solution-area .s-flex .card-main a.btn-arrow span.icon{width: 75px; transform: rotate(135deg); position: relative; z-index: 2}
.solution-area .s-flex .card-main:hover a.btn-arrow span.icon{filter: brightness(0);}
.solution-area .s-flex .card-main a.btn-arrow span.icon img{width: 100%; height: 100%;}

.panel#sec1,
.panel#sec2,
.panel#sec3
{
    transform: translate(0 ,0) !important;
}

/* ===========================================================================================================================
                                                        About page 
=========================================================================================================================== */

/* .about-section */

.about-section {padding: 100px 0 0 0;}
.about-section .about-flex {display: flex;  justify-content: space-between; row-gap: 20px;}
.about-section .about-flex .left,
.about-section .about-flex .right{width: calc(50% - 15px);}
.about-section .about-flex .right p{font-size: 18px; line-height: normal; color: var(--white);}

/* principels-section */

.principels{overflow: hidden;}
.principels .h-100vh{height: 100vh; display: flex;  flex-direction: column; justify-content: center; row-gap: 50px;}
.principels .principel-list{display: flex; justify-content: space-between;  column-gap: 20px;}
.principels .principel-list .pre-box{ min-width: 450px; border: solid 1px var(--txt-dark); display: flex; flex-direction: column; overflow: hidden; border-radius: 15px;}
.principels .principel-list .pre-box .img-wrapper{width: 100%; height: 350px; overflow: clip;}
.principels .principel-list .pre-box .img-wrapper img{width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
.principels .principel-list .pre-box:hover .img-wrapper img{ transform: scale(1.1);}
.principels .principel-list .pre-box .pre-info{padding: 20px 30px; text-align: center; position: relative; z-index: 1; height: 100%;}
.principels .principel-list .pre-box .pre-info::after{content: ''; position: absolute; width: 100%; height: 0%; z-index: -1; bottom: 0; left: 0; background-color: var(--white); transition: transform 0.4s ease, height 0.4s ease;}
.principels .principel-list .pre-box:hover .pre-info::after{  height: 100%;}
.principels .principel-list .pre-box .pre-info h3{font-size: 32px; line-height: 36px; font-weight: var(--bold); margin-bottom: 15px; color: var(--white); transition: all 0.3s;}
.principels .principel-list .pre-box .pre-info p{font-size: 18px; line-height: 24px; font-weight: var(--regular);  color: var(--white); transition: all 0.3s;}
.principels .principel-list .pre-box:hover .pre-info h3{ color: var(--black);}
.principels .principel-list .pre-box:hover .pre-info p{  color: var(--black);}


/* ===========================================================================================================================
                                                        Team page
=========================================================================================================================== */

.team-section {padding: 100px 0 0 0;}
.team_grid{padding: 60px 0; display: grid; grid-column-gap: 25px; grid-row-gap: 35px; grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); grid-auto-columns: 1fr;}
.team_grid .item .m-img{width: 100%; height:480px; border-radius:15px; overflow: hidden; display: block; margin-bottom:15px ;}
.team_grid .item .m-img img {width: 100%; object-fit: cover; object-position: top; height: 100%; transition: all 0.3s;}
.team_grid .item:hover .m-img img {transform: scale(1.1); }
.team_grid .item .m-info .nm{font-size: 28px; color: var(--white); margin-bottom: 5px; font-weight: var(--bold); line-height:32px; text-transform: capitalize;}
.team_grid .item .m-info .desi{font-size: 20px; color: var(--theme-blue); line-height:22px;  font-weight: var(--medium);  text-transform: capitalize;}

.member-detail {position: fixed; z-index: 999; top: 10px; left: 50%; width: 70%; cursor: pointer; display: flex; gap: 40px; visibility: hidden;height: 80%; border-radius: 50px;  overflow: auto; padding: 30px; background-color: var(--white);}
.member-detail .member-image {min-width: 40%;  position: relative; border-radius: 30px; overflow: hidden; z-index: 1;}
.member-detail .member-image img { width: 100%; height: 100%; position: relative; object-fit: cover; z-index: 1; }
.member-detail .content { display: flex; flex-direction: column;  justify-content: center; flex-grow: 1;}
.member-detail .title {font-size: 28px; font-weight: var(--bold); line-height: 32px; text-transform: capitalize;  margin-bottom: 5px;}
.member-detail .secondary {color: var(--theme-blue); font-size: 24px; font-weight: var(--medium);  line-height:26px;  margin-bottom: 20px;}
.member-detail .description {line-height: 20px; font-size: 18px; font-weight: var(--medium);}
.member-detail ul.social-links{list-style: none; flex-wrap: wrap; margin-top: 20px; gap: 15px; }
.member-detail ul.social-links li a{display: flex;  align-items: center;  justify-content: center; font-size: 18px;  width: 35px; height: 35px; color: var(--white); overflow: hidden;  background-color: var(--black); border-radius: 50%; position: relative; border:none;}


/* ===========================================================================================================================
                                                        work page
=========================================================================================================================== */

.work-section {padding: 60px 0 0 0;}
.work-section .img-area{width: 100%; }
.work-section .img-area img{width: 100%;}
.work-section .img-area video{width: 100%;}

.about-work{ margin-top: 100px; }
.about-work .about-info{ border-top: 1px solid var(--white); padding: 50px 0 0 0; margin-bottom: 50px;}
.about-work .about-info .inner-flex{display: flex; justify-content: space-between; row-gap: 30px; }  
.about-work .about-info .inner-flex .pin-spacer{height: auto !important; width: calc(50% - 10px) !important;}
.about-work .about-info .inner-flex .left{  width: calc(100% - 00px) !important;  height: auto !important; max-height: 100% !important;}
.about-work .about-info .inner-flex .left h3{max-width: 70%; font-size: 32px; color: var(--white); line-height: 36px; font-weight: var(--medium);}
.about-work .about-info .inner-flex .right{width: calc(50% - 10px) !important;}
.about-work .about-info .inner-flex .right p{font-size: 22px; color: var(--white); line-height: 26px; font-weight: var(--medium);}
.about-work .about-info .inner-flex .right p span{font-size: 20px; color: var(--txt-dark); line-height: 24px; display: block;}
.about-work .about-info .inner-flex .right p:not(:last-child){margin-bottom: 150px;}

.work-list{padding:0 0 60px 0;}
.work-flex{display: flex; justify-content: space-between; row-gap: 100px; flex-wrap: wrap; }
.work-flex .w-item{width: calc(50% - 10px);}
.work-flex .w-item.full{width: calc(100% - 00px);}
.work-flex .w-item .work-image {width: 100%; filter: grayscale(30); transition: all 0.5s; position: relative;}
.work-flex .w-item:hover .work-image {filter: grayscale(0);}
.work-flex .w-item .work-image img{width: 100%;}
.work-flex .w-item .work-info{font-size: 22px; line-height: 28px; font-weight: var(--bold); margin-top: 15px; color: var(--white);}
.work-flex .w-item .work-info span{font-size: 18px; line-height: 22px; margin-top: 5px; font-weight: var(--medium); color: var(--txt-dark); display: block;}


/* ===========================================================================================================================
                                                        Blog page
=========================================================================================================================== */

.blog-section{padding: 100px 0 0 0;}
.blog-list .blog-box{margin-bottom: 80px;}
.blog-list .blog-box .blog-img{width: 100%; overflow: hidden; border-radius: 10px; height: 295px;}
.blog-list .blog-box .blog-img img{width: 100%; height:100%; transition: all 0.3s; object-fit: cover;}
.blog-list .blog-box:hover .blog-img img{transform: scale(1.1); }
.blog-list .blog-box .info{font-size: 22px; line-height: 26px; font-weight: var(--regular); color: var(--white); display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; box-orient: vertical; -webkit-box-orient: vertical; overflow: hidden; margin-top: 15px; }  

/* ===========================================================================================================================
                                                        Blog-detail page
=========================================================================================================================== */

.blog-share {padding: 15px 0;}
.blog-share .auth{font-size: 18px; line-height: 24px; color: var(--white);}
.blog-share .auth span{ color: var(--txt-dark);}
.blog-share ul.social-links{list-style: none; flex-wrap: wrap;  gap: 10px; }
.blog-share ul.social-links li a{display: flex;  align-items: center;  justify-content: center; font-size: 15px;  width: 30px; height: 30px; color: var(--theme-blue); overflow: hidden;  background-color: var(--white); border-radius: 50%; position: relative; border:none;}

.blog-detail{padding-bottom: 60px;}
.blog-detail .blog-img{border-radius: 15px; width: 100%; margin-bottom: 20px; overflow: hidden;}
.blog-detail .blog-img img{ width: 100%;}
.blog-detail .blockquote{margin: 0; font-size: 28px; color: var(--black); line-height: 32px; font-weight: var(--bold); position: relative; padding-left: 60px;}
.blog-detail .blockquote .qt-nm{margin: 0; font-size: 18px; color: var(--black); line-height: 22px; font-weight: var(--medium); position: relative; padding-left: 50px;  margin-top: 20px;}
.blog-detail .blockquote .qt-nm::before{ content: '';  width: 35px; height: 2px; left: 0; background-color: var(--black); position: absolute; top: 50%;}
.blog-detail .blockquote img.qt-icon{position: absolute; top: 0; left: 0; width: 35px; }
.blog-detail ul {padding-left: 20px; margin-bottom: 18px;}
.blog-detail ul li{font-size: 18px; color: var(--white); line-height: 24px; font-weight: var(--regular); margin-bottom: 10px; }
.blog-detail p{font-size: 18px; color: var(--white); line-height: 24px; font-weight: var(--regular); margin-bottom: 18px; }
.blog-detail h2{font-size: 28px; color: var(--white); line-height: 32px; font-weight: var(--bold); margin-bottom: 18px; margin-top: 35px;}


/* ===========================================================================================================================
                                                        contact page
=========================================================================================================================== */

.contact-section{padding-bottom: 60px; padding-top: 100px;}
.contact-section .info-flex{display: flex; justify-content: space-between ;}
.contact-section .info-flex .info-box {padding: 15px; text-align: center; border-radius: 15px; overflow: hidden; width: calc(33.33% - 10px); background-color: var(--theme-dark); position: relative; z-index: 1;}
.contact-section .info-flex .info-box::after{content: ''; position: absolute; width: 0; height: 0; z-index: -1; top: 50%; left: 50%; border-radius: 10px; transform: translate(-50%, -50%); background-color: var(--theme-blue); transition: transform 0.4s ease, height 0.4s ease, width 0.4s ease; }
.contact-section .info-flex .info-box:hover::after{height: 100%; width: 100%; border-radius: 0;}
.contact-section .info-flex .info-box .icon{width: 60px ; height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-color: var(--txt-dark); border-radius: 10px; transition: all 0.5s;}
.contact-section .info-flex .info-box .icon img{width: 30px; }
.contact-section .info-flex .info-box h3{font-size: 28px; line-height: 32px; font-weight: var(--bold); margin-top: 15px; color: var(--white);}
.contact-section .info-flex .info-box address,
.contact-section .info-flex .info-box a.link{font-size: 18px; line-height: 24px; font-weight: var(--medium); margin-top: 15px; color: var(--white); margin: 0; margin-top: 10px; display: inline-block;}
.contact-section .info-flex .info-box:hover .icon {border-radius: 50%;}

.cf-area{margin-top: 50px; }
.cf-area .c-title{ text-align: center;  padding-bottom: 15px;}
.cf-area .c-title h2{font-size: 32px; line-height: 36px; font-weight: var(--bold); color: var(--white); margin-bottom: 10px;}
.cf-area .c-title p{font-size: 18px; line-height: 22px; font-weight: var(--medium); color: var(--txt-dark); margin: 0 auto; max-width: 535px;}

.cf-area .form-group{margin-top: 25px;}
.cf-area .form-group label{font-size: 16px; line-height: 22px; margin-bottom: 8px; color: var(--white); }
.cf-area .form-group input.form-control{border-radius: 40px; background-color: transparent; padding: 11px 10px; font-size: 18px; color: var(--white); border: 2px solid var(--txt-dark); transition: all 0.3s; position: relative;}
.cf-area .form-group .form-control:focus{box-shadow: none; outline: none; border-color: var(--theme-blue) ; border-radius: 8px;}
.cf-area .form-group input.form-control[type="number"]{-moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield;}

.services-btn-container {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 10px;}
.services-btn-container .ser-btn {display: none; /* Hide the original checkbox */}
.services-btn-container .ser-label { background-color: transparent; transition: all 0.3s; text-transform: capitalize; padding: 10px 25px; font-size: 16px; margin-bottom: 0px !important; color:var(--theme-blue); cursor: pointer; border: 2px solid var(--theme-blue); border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.services-btn-container .ser-btn:checked + .ser-label {background-color: var(--theme-blue);  color: var(--white);}


/* ===========================================================================================================================
                                                        solutions page
=========================================================================================================================== */

.page-title h3{ font-size: 28px; color:var(--white); line-height: 32px; font-weight: var(--medium); margin: 15px 0; padding-top: 15px; position: relative;}
.page-title h3::before{content: ''; left: 0; top: 0; width: 250px; background-color: var(--white); height: 3px; position: absolute;}

.solu-acco .accordion-item{background-color: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--white);}
.solu-acco .accordion-item .accordion-button{background-color: transparent; border: none; border-radius: 0; box-shadow: none; padding: 15px 0; font-size: 22px;  color: var(--txt-dark);}
.solu-acco .accordion-item .accordion-button:not(.collapsed){color: var(--white);}
.solu-acco .accordion-item:not(:last-child){margin-bottom: 20px;}
.solu-acco .accordion-item .accordion-body{padding: 5px 0 20px 0; font-size: 16px; line-height: 22px; color: var(--white);}
.solu-acco .accordion-item .accordion-button::after {  filter: brightness(100);}

.solu-list .solu-box{margin-bottom: 80px;}
.solu-list .solu-box .solu-img{width: 100%; overflow: hidden; border-radius: 10px; height: 350px;}
.solu-list .solu-box .solu-img img{width: 100%; height:100%; transition: all 0.3s; object-fit: cover;}
.solu-list .solu-box:hover .solu-img img{transform: scale(1.1); }
.solu-list .solu-box .title{font-size: 22px; line-height: 26px; font-weight: var(--medium); color: var(--white); display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; box-orient: vertical; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; }  
.solu-list .solu-box .info{font-size: 18px; line-height: 22px; font-weight: var(--regular); color: var(--white); display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; box-orient: vertical; -webkit-box-orient: vertical; overflow: hidden; margin-top: 07px; }  

/* ===========================================================================================================================
                                                       career page
=========================================================================================================================== */

.about-section .about-flex .right .theme_btn{margin-top: 15px;}

/* ===========================================================================================================================
                                                       project-detail page
=========================================================================================================================== */

.project-info .project-img{width: 100%;}
.project-info .project-img img,
.project-info .project-img video{width: 100%;}

.project-info .in-flex{padding: 100px 0; display: flex; justify-content: space-between;}
.project-info .in-flex .left,
.project-info .in-flex .right{width: calc(50% - 15px);}
.project-info .in-flex .left h2{color: var(--white);  font-size: 32px; font-weight: var(--bold); line-height: 38px;   margin-bottom: 40px;}
.project-info .in-flex .left p,
.project-info .in-flex .right p{color: var(--white);  font-size: 22px; font-weight: var(--regular); line-height: 24px;}
.project-info .in-flex .left p:not(:last-child),
.project-info .in-flex .right p:not(:last-child){margin-bottom: 20px;}
.project-info .in-flex .right{display: flex; justify-content: end;}
.project-info .in-flex .right .c-info{width: calc(45% - 15px);}
.project-info .in-flex .right .c-info .info-area{font-size: 18px; color: var(--white); font-weight: var(--medium); line-height: 24px;}
.project-info .in-flex .right .c-info .info-area:not(:last-child){margin-bottom: 40px}
.project-info .in-flex .right .c-info .info-area span{ color: var(--txt-dark); display: block; font-weight: var(--regular);}
.project-info .in-flex .right .c-info .info-area ul li{font-size: 18px; line-height: 24px; color: var(--txt-dark); display: block; font-weight: var(--regular);}

.details-info{padding-bottom: 40px; margin-bottom: 40px; border-bottom: 2px solid var(--white) ;}
.details-info .detail-list{display: flex; justify-content: space-between; row-gap: 10px; flex-wrap: wrap;}
.details-info .detail-list .item{width: calc(50% - 5px);}
.details-info .detail-list .item.d-info,
.details-info .detail-list .item.full{width: calc(100% - 0px);}
.details-info .detail-list .item .detail-image img{width: 100%;}
.details-info .detail-list .item .detail-image video{width: 100%;}
.details-info .detail-list .item .in-flex{padding: 100px 0; display: flex; justify-content: space-between;}
.details-info .detail-list .item .in-flex .left,
.details-info .detail-list .item .in-flex .right{width: calc(50% - 15px);}
.details-info .detail-list .item.o-right{width: calc(100% - 0px); margin-left: 50%; padding-left: 5px;}
.details-info .detail-list .item.o-left{width: calc(100% - 0px); margin-right: 50%; padding-right: 5px;}

.details-info .detail-list .item .in-flex .left h2{color: var(--white);  font-size: 32px; font-weight: var(--bold); line-height: 38px; }
.details-info .detail-list .item .in-flex .left p{color: var(--white);  font-size: 22px; font-weight: var(--regular); line-height: 24px;}
.details-info .detail-list .item .in-flex .left p:not(:last-child),
.details-info .detail-list .item .in-flex .right p:not(:last-child){margin-bottom: 20px;}
.details-info .detail-list .item .in-flex .right p,
.details-info .detail-list .item .in-flex .right ul li{color: var(--white);  font-size: 22px; font-weight: var(--regular); line-height: 24px;}

.more-work{color: var(--white);  font-size: 22px; font-weight: var(--regular); line-height: 24px; text-align: center; text-transform: capitalize; margin-bottom: 20px;}
/* .details-info .detail-list .item .in-flex .right .c-info{width: calc(35% - 15px);}
.details-info .detail-list .item .in-flex .right .c-info .info-area{font-size: 18px; color: var(--white); font-weight: var(--medium); line-height: 24px;}
.details-info .detail-list .item .in-flex .right .c-info .info-area:not(:last-child){margin-bottom: 40px}
.details-info .detail-list .item .in-flex .right .c-info .info-area span{ color: var(--txt-dark); display: block; font-weight: var(--regular);}
.details-info .detail-list .item .in-flex .right .c-info .info-area ul li{font-size: 18px; line-height: 24px; color: var(--txt-dark); display: block; font-weight: var(--regular);} */

.iframe-wrapper {
    overflow: hidden;
    padding-top: 58.25%;
    position: relative;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    width: 100%;
    height: 100%;
}