/* Medium Desktop */
@media only screen and (max-width: 1640px) {

.talk-main{  padding: 60px;}
.talk-main .talk-flex{padding: 35px 70px;}
.talk-main .talk-flex .left h2{  font-size: 36px;}

.footer-main{padding-bottom: 40px;}
.footer-main .footer-logo{width: 135px;}
.footer-main .com-info ul.social-links li a{font-size: 28px; width: 64px; height: 64px;}
.footer-bottom{margin-top: 60px; padding: 15px 0;}
.footer-main .com-info ul.site-links{margin: 20px 0 20px 0; gap: 35px;}

}

@media only screen and (max-width: 1440px) {


.slider-wrap .image-slider .slider-image{height: 460px;}
.slider-wrap .container.sn{top: 500px;}
.solution-area .s-flex .card-main  {padding: 35px 40px;}
.solution-area .s-flex .card-main p{margin: 30px 0 30px 0;;}

}


/* Small Laptop */
@media only screen and (max-width: 1280px) {

.header-main .logo-area{width: 146px;}

.hero-section h1{font-size:112px}
.slider-wrap .image-slider .slider-image{height: 410px;}
.slider-wrap .container.sn{top: 450px;}

}




@media only screen and (max-width: 1024px){

    html, body {
        height: 100%;
        overflow: hidden; /* Lenis handles scrolling */
        cursor: default;  }
    html,* {cursor: default;}
    .cursor{display: none;}
    
    body.active,
    .main-content.active{overflow: hidden; }
    body.details-active{overflow: hidden; }
    
    .panel{min-height: auto;}
    .menu-icon{display: block;}

    .main-content{-webkit-overflow-scrolling: touch;  height: 100%;   overflow: auto;}
    
    a, .btn{cursor: pointer;}
    
    .menu-bg{ position: fixed;top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh;  background-color: var(--black); opacity: .7;}
    
    .header-main .logo-area{width: 95px;}
    .header-main ul.nav-menu{ background-color: var(--white); width: 95%; border-radius: 15px ; padding: 10px; top: 150px; position: fixed; margin-top: 0; transition: all 0.8s; display: block; padding: 5px 0;  max-height: 70vh;  overflow-y: auto;  z-index: 99; opacity: 0; visibility: hidden;}
    .header-main ul.nav-menu.active{opacity: 1; visibility: visible;  top: 80px; }
    .header-main ul.nav-menu > li{ padding: 5px 10px; border-radius: inherit;transition: background-color 0.2s 0s;position: relative; border-radius: 0;}
    .header-main ul.nav-menu > li > a{color: var(--black); font-size: 16px; padding: 0;}
    .header-main ul.nav-menu > li > a.active {color: var(--theme-blue); padding-left: 20px;}
    .header-main ul.nav-menu > li > a.active::after{content: none;}
    .header-main ul.nav-menu > li > a.active:before{background-color: var(--theme-blue); width: 10px; height: 10px; border-radius: 50%; top: 50%; left: 0; transform: translateY(-50%); }
    .header-main ul.nav-menu > li:not(:last-child) {border-bottom: 1px solid rgba(0, 0, 0, 0.3)}
    
    main{margin-bottom: 0 !important;}

    .header-main ul.nav-menu li.has-sub a .menu-arrow{display: none;}
    .mega-menu{position: relative; margin: 7px 0; width: 100%; display:none; top: auto;left: auto;height: auto;opacity: 1;  background: var(--txt-dark); transform: none; transition: none;}    
    
     .header-main ul.nav-menu li.has-sub .dd-mobile{display: block; transition: all 0.3s; float: right; font-size: 22px; cursor: pointer;}
     .header-main ul.nav-menu li.has-sub.active .dd-mobile {transform: rotate(-180deg);}
    
    .mega-menu ul.menu-list{width: 100%;}
    .mega-menu ul.menu-list li a{padding: 8px 10px; }
    .mega-menu ul.menu-list li a.active{color: var(--black);}

    .solution-area .s-flex .card-main a.btn-arrow{width: 75px; height: 75px;}
    .solution-area .s-flex .card-main a.btn-arrow span.icon{width: 55px;}

    footer{position: relative; z-index: 1;}

    .pin-spacer{padding: 0 !important; height: auto !important; width: 100% !important;}
    .swipe-section { position: relative !important; height: auto !important; width: 100%; transform: translate(0px, 0px) !important; overflow: visible; }  
    .swipe-section .panel { position: relative !important;    transform: translate(0%, 0%) !important;}
    .hero-img{height: auto !important; border-radius: 0% !important; width: 100% !important;  transform: scale(1) !important; opacity: 1 !important;}

/* about page */

.principels .h-100vh{height: auto !important; row-gap: 40px; position: relative !important; left: 0 !important; top: 0 !important; transform: translate(0px) !important;}
.principels .principel-list{width: 100%; flex-wrap: wrap;   column-gap: 0px; row-gap: 20px; }
.principels .principel-list .pre-box{ transform: translate(0%) !important;   min-width: auto;}
.principels .principel-list .pre-box .pre-info{ padding: 20px 20px;}
.principels .principel-list .pre-box .pre-info h3 {font-size: 28px;  line-height: 30px; margin-bottom: 10px;}
.principels .principel-list .pre-box .pre-info p {font-size: 16px;  line-height: 22px;}

.work-list{padding: 0 0 20px 0;}

/* contact page */



}



/* Tablet (Landscape) */

@media (min-width: 768px) and (max-width: 1024px){
    
/* ===========================================================================================================================
                                                        home page
=========================================================================================================================== */

.hero-section{margin-bottom: 60px;}
.hero-section h1{font-size: 80px; margin-bottom: 25px;}
.hero-section p{font-size: 20px; margin-bottom: 40px;}

.feature-section{margin-bottom: 60px;}
.feature-section .f-flex h2{font-size: 36px;}
.feature-section .f-flex p { font-size: 16px; line-height: 22px;}
.feature-section .f-flex p:not(:last-child){margin-bottom:30px}

.slider-wrap{margin-bottom: 60px;}
.slider-wrap .image-slider .slider-image{height: 320px;}
.slider-wrap .image-slider .slide-content{font-size: 36px; margin-top: 40px;}
.slider-wrap .slick-arrow{ width: 77px;}
.slider-wrap .container.sn{top: 350px;}

.solution-area .s-flex {flex-wrap: wrap; row-gap: 10px;}
.solution-area .s-flex .card-main{width: calc(50% - 5px); padding: 25px 40px;}
.solution-area .s-flex .card-main h2{  font-size: 36px;}
.solution-area .s-flex .card-main p{ font-size:16px; line-height: 22px; margin: 20px 0 30px 0;}

.talk-main{padding: 30px;}
.talk-main .talk-flex{ padding: 25px 30px; border-radius: 30px;}
.talk-main .talk-flex .left, .talk-main .talk-flex .right{  width: calc(50% - 25px);}
.talk-main .talk-flex .left h2{font-size: 32px; }
.talk-main .talk-flex .right p{font-size:16px; line-height: 22px;}

.footer-main{padding-bottom: 30px;}
/* .footer-main .footer-logo{width: 125px;} */
.footer-main .footer-logo{width: 95px; bottom: 40px;}
.footer-main .com-info h3{ font-size: 32px;}
.footer-main .com-info ul.site-links{gap: 40px;margin: 30px 0 30px 0;}
.footer-main .com-info ul.social-links{margin: 0px 0 30px 0;}
.footer-main .com-info ul.social-links li a{font-size: 22px; width: 54px; height: 54px;     line-height: 0;}
.footer-main ul.quick-links li a{font-size: 22px;}
.footer-main .contact-detail .info-flex:not(:last-child){margin-bottom: 20px;}
.footer-main .contact-detail .info-flex .icon{  min-width: 30px; width: 30px; height: 30px;}
.footer-main .contact-detail .info-flex .detail h3{ font-size:22px; line-height: 26px;}
.footer-main .contact-detail .info-flex .detail a,
.footer-main .contact-detail .info-flex .detail p{font-size:16px; line-height: 22px;}

.footer-bottom{padding: 15px 0; margin-top: 60px;}
.footer-bottom .left .copiright{font-size: 14px;}
.footer-bottom ul.privacy-links{gap: 25px;}
.footer-bottom ul.privacy-links li:not(:first-child)::before {left: -13px;}
.footer-bottom ul.privacy-links li a{font-size: 14px;}


.page-title{padding: 40px 0;}
.page-title h1.sec-title{  font-size: 46px; line-height: 52px;   margin-bottom: 20px;}
.page-title p{font-size: 20px; line-height: 26px;}

h2.title{font-size: 36px; line-height: 40px;}

/* ===========================================================================================================================
                                                        about page
=========================================================================================================================== */

.about-section{  padding: 30px 0 0 0;}

.principels{margin-top: 80px; }
.principels .principel-list .pre-box{min-width:auto; width: calc(50% - 10px); transform: translate(0%) !important; }
.principels .principel-list .pre-box .img-wrapper{  height: 230px;}


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

.team-section {padding: 30px 0 0 0;}

.team_grid{padding: 30px 0 30px 0;}
.team_grid .item .m-img{height: 380px;}

.member-detail{  width: 90%; height: auto; }

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

.work-section {padding: 30px 0 0 0;}

.about-work{  margin-top: 60px;}
.about-work .about-info .inner-flex .left h3{font-size: 24px; line-height: 28px;  max-width: 80%;}
.about-work .about-info{padding: 40px 0 0 0; margin-bottom: 40px;}
.about-work .about-info .inner-flex .right p:not(:last-child){margin-bottom: 60px;}
.work-flex{  row-gap: 50px;}


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

.blog-section{padding: 30px 0 0 0;}
.blog-list .blog-box{margin-bottom: 60px;}
.blog-list .blog-box .blog-img{  height: 225px;}
.blog-list .blog-box .info{  font-size: 20px;}


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

.blog-detail{padding-bottom: 0px;}
.blog-detail h2{margin-bottom: 15px;}
.blog-detail p{margin-bottom: 15px;}

.blog-detail .blockquote{font-size: 24px;line-height: 28px;}


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

.contact-section{padding-top: 30px; padding-bottom: 30px;}
.contact-section .info-flex .info-box h3{  font-size: 24px;  line-height: 28px;  margin-top: 10px;}
.contact-section .info-flex .info-box address, 
.contact-section .info-flex .info-box a.link{font-size: 16px; line-height: 22px; margin-top: 5px;}

.cf-area{margin-top: 40px;}
.cf-area .c-title h2{font-size: 28px; line-height: 32px;}


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

.project-info .in-flex{  padding: 60px 0; flex-direction: column; row-gap: 30px;}
.project-info .in-flex .left, 
.project-info .in-flex .right{  width: calc(100% - 0px);}
.project-info .in-flex .left h2{  font-size: 28px;  line-height: 32px;  margin-bottom: 20px;}
.project-info .in-flex .left p:not(:last-child), 
.project-info .in-flex .right p:not(:last-child){margin-bottom: 10px;}
.project-info .in-flex .left p,
.project-info .in-flex .right p{ font-size: 18px; line-height: 22px;}
.project-info .in-flex .right{justify-content: start;}
.project-info .in-flex .right .c-info{ width: calc(50% - 15px);}
.project-info .in-flex .right .c-info .info-area:not(:last-child){margin-bottom: 20px;}

.details-info{padding-bottom: 30px; margin-bottom: 30px;}
.details-info .detail-list .item .in-flex{  padding: 60px 0;}
.details-info .detail-list .item .in-flex .left h2{  font-size: 28px;  line-height: 32px;  margin-bottom: 20px;}
.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: 10px;}
.details-info .detail-list .item .in-flex .right p, 
.details-info .detail-list .item .in-flex .right ul li{ font-size: 18px; line-height: 22px;}

}














/* Tablet (Portrait) */
@media only screen and (max-width: 767px) {

    body.active{overflow: hidden; }

    .panel{min-height: auto;}
    .header-main .logo-area{width: 136px;}
    .menu-icon{display: block;}
    
    main{margin-bottom: 0 !important;}
    
    .theme_btn{font-size: 16px; padding: 10px 25px;}
    .theme_btn .icon{height: 32px; width: 32px;}
    
    .header-main .header-right .btn{display: none;}
    .header-main .logo-area{width: 95px;}

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


    .hero-section{margin-bottom: 40px;}
    .hero-section h1{font-size: 48px; margin-bottom: 20px;}
    .hero-section h1 br{display: none;}
    .hero-section p{font-size: 18px; margin-bottom: 30px;}
    .hero-img{height: auto;}
    
    .feature-section{margin-bottom: 40px;}
    .feature-section .f-flex{flex-direction: column; row-gap: 25px;}
    .feature-section .f-flex .left{  width: calc(100% - 0px);}
    .feature-section .f-flex .right{  width: calc(100% - 0px);}
    .feature-section .f-flex h2{font-size: 32px; margin-bottom: 20px;}
    .feature-section .f-flex p:not(:last-child){margin-bottom:15px}
    .feature-section .f-flex p{font-size: 16px; line-height: 24px;}
    
    .slider-wrap{margin-bottom: 40px;}
    .slider-wrap .image-slider .slider-image{height: 230px;}
    .slider-wrap .image-slider .slider-image::before {content: none;}
    .slider-wrap .image-slider .slide-content{font-size:32px; margin-top: 30px; width: 100%;}
    .slider-wrap .slick-arrow{ width: 55px;}
    .slider-wrap .container.sn{top: auto; position: relative; }
    .slider-wrap .slide-nav{justify-content: center; }
    
    .solution-area .s-flex {flex-wrap: wrap; row-gap: 10px; flex-direction: column;}
    .solution-area .s-flex .card-main{width: calc(100% - 0px); padding: 25px 40px;}
    .solution-area .s-flex .card-main h2{  font-size: 32px;}
    .solution-area .s-flex .card-main p{ margin: 15px 0 20px 0; font-size: 16px; line-height: 24px;}
    
    .talk-main{padding: 30px 0;}
    .talk-main .talk-flex{padding: 25px 25px; flex-direction: column; row-gap: 25px; border-radius: 25px;;}
    .talk-main .talk-flex .left, .talk-main .talk-flex .right{  width: calc(100% - 0px);}
    .talk-main .talk-flex .left h2{font-size: 28px; }
    .talk-main .talk-flex .right p{margin-bottom: 20px;   font-size: 16px;  line-height: 24px;}
    
    .footer-main{padding-bottom: 30px;}
    .footer-main .footer-logo{width: 95px;  bottom: 91px; }
    /* .footer-main .footer-logo{width: 80px;  bottom: 85px; } */
    .footer-main .com-info h3{ font-size: 28px;}
    .footer-main .com-info ul.site-links{column-gap: 40px;margin: 20px 0 20px 0; row-gap: 10px;}
    .footer-main .com-info ul.social-links{margin: 0px 0 30px 0;}
    .footer-main .com-info ul.social-links li a{font-size: 18px; width: 40px; height: 40px; line-height: 0;}
    .footer-main ul.quick-links{margin-bottom: 30px;}
    .footer-main ul.quick-links li:not(:last-child){margin-bottom: 10px;}
    .footer-main ul.quick-links li a{font-size: 18px;}
    
    .footer-main .contact-detail .info-flex .icon{min-width: 25px; width: 25px; height: 25px;}
    .footer-main .contact-detail .info-flex .detail h3{ font-size:20px; line-height: 24px;}
    .footer-main .contact-detail .info-flex:not(:last-child){margin-bottom: 20px;}
    .footer-bottom{padding: 15px 0; margin-top: 30px;}
    .footer-bottom .left,
    .footer-bottom .right{width: 100%; text-align: center;}
    .footer-bottom .left .copiright{font-size: 14px;}
    .footer-bottom .fb-flex{flex-direction: column-reverse; row-gap: 90px;}
    .footer-bottom ul.privacy-links{gap: 25px; justify-content: center;}
    .footer-bottom ul.privacy-links li:not(:first-child)::before {left: -13px;}
    .footer-bottom ul.privacy-links li a{font-size: 14px;}


.page-title{padding: 30px 0;}
.page-title .sec-subtitle{  font-size: 20px;   margin-bottom: 20px;}
.page-title h1.sec-title{font-size: 38px; line-height: 42px; margin-bottom: 20px;}
.page-title p{font-size: 18px; line-height: 24px;}

/* ===========================================================================================================================
                                                        about page
=========================================================================================================================== */

h2.title{font-size: 32px; line-height: 38px;}

.about-section{  padding: 30px 0 0 0;}
.about-section .about-flex{flex-direction: column;}
.about-section .about-flex .left, .about-section .about-flex .right{width: calc(100% - 0px);}
.about-section .about-flex .right p{font-size: 16px; line-height: 24px;}

.principels{margin-top: 30px;}
.principels .h-100vh{row-gap: 25px;}
.principels .principel-list .pre-box .img-wrapper{height: 200px;}
.principels .principel-list .pre-box{width: calc(100% - 0px);}

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

.team-section {padding: 30px 0 0 0;}

.team_grid{ grid-column-gap: 10px;   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 30px 0 0px 0; grid-row-gap: 20px;}
.team_grid .item{padding: 10px; border-radius: 10px; }
.team_grid .item .m-img{border-radius: 10px; margin-bottom: 10px;}
.team_grid .item .m-info .nm{font-size: 24px; line-height: 28px;}
.team_grid .item .m-info .desi{font-size: 18px; line-height: 22px;}
.team_grid .item .m-info ul.social-links{  margin-top: 10px;}

.member-detail{width: 90%; height: auto;gap: 20px; border-radius: 30px; flex-direction: column;}
.member-detail .member-image{ width: 50%; border-radius: 15px; min-width: 50%; margin: 0 auto;}
.member-detail .title{   font-size: 24px;  line-height: 28px;}
.member-detail .secondary{  font-size: 20px; line-height: 22px; margin-bottom: 15px;}
.member-detail .description{font-size: 16px; line-height: 20px;}

/* ===========================================================================================================================
                                                        work page
=========================================================================================================================== */
    
.work-section {padding: 30px 0 0 0;}

.about-work{margin-top: 30px;}
.about-work .about-info{padding: 30px 0 0 0; margin-bottom: 30px;}
.about-work .about-info .inner-flex{flex-direction: column;}
.about-work .about-info .inner-flex .pin-spacer,
.about-work .about-info .inner-flex .right{width: calc(100% - 0px) !important;}
.about-work .about-info .inner-flex .left{position: relative !important; top: auto !important; left:auto !important;   transform: translate(0px, 0px) !important;}
.about-work .about-info .inner-flex .left h3{font-size: 20px; line-height: 28px;  max-width: 100%;}
.about-work .about-info .inner-flex .right p{font-size: 18px; line-height: 24px;}
.about-work .about-info .inner-flex .right p span{font-size: 16px; line-height: 22px;}
.about-work .about-info .inner-flex .right p:not(:last-child){margin-bottom: 20px;}
.about-work .about-info:not(:last-child){margin-bottom: 30px;}

.work-flex{row-gap: 30px;}
.work-flex .w-item .work-info{  font-size: 20px;}
.work-flex .w-item .work-info span{font-size: 16px;}


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

.blog-section{padding: 30px 0 0 0;}
.blog-list .blog-box{margin-bottom: 40px;}
.blog-list .blog-box .blog-img{  height: 225px;}
.blog-list .blog-box .info{  font-size: 18px; margin-top: 10px;}


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

.blog-detail{padding-bottom: 0px;}
.blog-detail h2{margin-bottom: 15px; font-size: 24px; line-height: 28px;}
.blog-detail p{margin-bottom: 15px; font-size: 16px; line-height: 22px;}
.blog-detail ul li{ font-size: 16px; line-height: 22px;   margin-bottom: 5px;}

.blog-detail .blockquote{font-size: 20px;line-height: 24px;}


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

.contact-section{padding-top: 30px; padding-bottom: 30px;} 
.contact-section .info-flex {flex-direction: column; row-gap: 20px;  }
.contact-section .info-flex .info-box{ width: calc(100% - 0px);}

.cf-area{  margin-top: 30px;   }
.cf-area .c-title h2 { font-size: 24px; line-height: 28px; }
.cf-area .c-title p{ font-size: 16px; line-height: 22px; }

.cf-area .form-group input.form-control{  font-size: 16px;  padding: 8px 10px;}
.cf-area .form-group label{ font-size: 16px;}

.services-btn-container .ser-label{  padding: 7px 15px;}


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

.project-info .in-flex{  padding: 30px 0; flex-direction: column; row-gap: 20px;}
.project-info .in-flex .left, 
.project-info .in-flex .right{  width: calc(100% - 0px);}
.project-info .in-flex .left h2{  font-size: 24px;  line-height: 28px;  margin-bottom: 20px;}
.project-info .in-flex .left p:not(:last-child), 
.project-info .in-flex .right p:not(:last-child){margin-bottom: 10px;}
.project-info .in-flex .left p,
.project-info .in-flex .right p{ font-size: 16px; line-height: 22px;}
.project-info .in-flex .right{justify-content: start; flex-direction: column; row-gap: 20px;}
.project-info .in-flex .right .c-info{ width: calc(100% - 0px);}
.project-info .in-flex .right .c-info .info-area:not(:last-child){margin-bottom: 20px;}

.details-info{padding-bottom: 30px; margin-bottom: 30px;}
.details-info .detail-list .item .in-flex{  padding: 30px 0; flex-direction: column; row-gap: 20px;}
.details-info .detail-list .item .in-flex .left,
.details-info .detail-list .item .in-flex .right{width: calc(100% - 0px);}
.details-info .detail-list .item .in-flex .left h2{  font-size: 24px;  line-height: 28px;}
.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: 10px;}
.details-info .detail-list .item .in-flex .right p, 
.details-info .detail-list .item .in-flex .right ul li{ font-size: 16px; line-height: 22px;}

}
    


/* Mobile */
@media only screen and (max-width: 540px) {

.work-flex .w-item{  width: calc(100% - 00px);}

.team_grid .item .m-img{  height: auto;}
 
}