/*=========================================
      RESPONSIVE CSS
==========================================*/

/*==============================
  Large Laptop
==============================*/

@media (max-width:1400px){

.container{

max-width:1140px;

}

.hero-left h1{

font-size:62px;

}

.hero-image img{

width:430px;

}

.shape-one{

width:390px;

height:480px;

}

}

/*==============================
 Tablet Landscape
==============================*/

@media (max-width:1199px){

.top-right{

display:none;

}

.nav-menu{

gap:22px;

}

.nav-menu li a{

font-size:15px;

}

.quote-btn{

display:none;

}

.hero{

min-height:700px;

}

.hero-wrapper{

grid-template-columns:1fr 470px;

gap:20px;

}

.hero-left h1{

font-size:52px;

}

.hero-left p{

font-size:16px;

line-height:28px;

}

.hero-image img{

width:390px;

}

.shape-one{

width:350px;

height:430px;

right:20px;

}

.experience-card{

width:130px;

height:130px;

left:0;

}

.floating-card{

right:0;

padding:15px 18px;

}

}

/*==============================
 Tablet Portrait
==============================*/

@media (max-width:991px){

.topbar{

display:none;

}

header{

top:0;

background:#0d1328;

position:fixed;

}

.navbar{

height:80px;

}

.menu-toggle{

display:block;

}

.search-btn{

display:none;

}

.nav-menu{

position:fixed;

left:-100%;

top:80px;

width:300px;

height:100vh;

background:#fff;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:40px 30px;

gap:0;

transition:.4s;

box-shadow:10px 0 30px rgba(0,0,0,.08);

}

.nav-menu.active{

left:0;

}

.nav-menu li{

width:100%;

border-bottom:1px solid #eee;

}

.nav-menu li a{

color:#222;

display:flex;

justify-content:space-between;

padding:18px 0;

width:100%;

}

.hero{

padding:140px 0 80px;

height:auto;

}

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

padding-top:0;

order:2;

}

.hero-right{

order:1;

height:auto;

margin-bottom:50px;

}

.hero-left h1{

font-size:46px;

max-width:100%;

}

.hero-left p{

max-width:100%;

margin:auto;

margin-top:20px;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

justify-content:center;

flex-wrap:wrap;

}

.hero-image img{

width:360px;

margin:auto;

}

.shape-one{

display:none;

}

.shape-two{

display:none;

}

.floating-card{

right:50%;

transform:translateX(50%);

top:20px;

}

.experience-card{

bottom:-20px;

left:50%;

transform:translateX(-50%);

}

.scroll-down{

display:none;

}

}

/*==============================
 Mobile
==============================*/

@media (max-width:768px){

.container{

width:92%;

}

.hero{

padding-top:120px;

}

.hero-left h1{

font-size:38px;

line-height:1.15;

}

.hero-left p{

font-size:15px;

line-height:28px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.primary-btn,

.secondary-btn{

width:220px;

justify-content:center;

}

.hero-image img{

width:300px;

}

.floating-card{

width:260px;

padding:15px;

}

.floating-card strong{

font-size:15px;

}

.info-box{

width:45%;

}

}

/*==============================
 Small Mobile
==============================*/

@media (max-width:480px){

.logo img{

height:46px;

}

.navbar{

height:72px;

}

.nav-menu{

top:72px;

width:100%;

}

.hero-left h1{

font-size:32px;

}

.hero-left p{

font-size:14px;

}

.hero-image img{

width:250px;

}

.experience-card{

width:110px;

height:110px;

}

.experience-card h2{

font-size:28px;

}

.experience-card p{

font-size:11px;

}

.floating-card{

display:none;

}

.info-box{

width:100%;

text-align:center;

}

.hero-info{

gap:20px;

}

}

/*==========================
FEATURED SERVICES
===========================*/

@media(max-width:991px){

.service-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:34px;

}

.service-pattern{

display:none;

}

.service-card{

text-align:center;

}

.service-icon{

margin:auto;

margin-bottom:25px;

}

}

@media(max-width:576px){

.services{

padding:80px 0;

}

.section-heading h2{

font-size:28px;

}

.section-heading p{

font-size:15px;

}

.service-card{

padding:35px 25px;

}

}

/*==========================
WHY US
===========================*/

@media(max-width:991px){

.why-grid{

grid-template-columns:1fr;

gap:50px;

}

.why-content{

text-align:center;

}

.feature-list{

grid-template-columns:1fr;

}

.counter-grid{

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

}

}

@media(max-width:576px){

.why-us{

padding:80px 0;

}

.why-content h2{

font-size:32px;

}

.counter-grid{

grid-template-columns:1fr;

}

.count-box h2{

font-size:44px;

}

.play-btn{

width:70px;

height:70px;

font-size:20px;

}

}

/*=========================================
 WHY CHOOSE US RESPONSIVE
==========================================*/

/************* Large Laptop *************/

@media (max-width:1400px){

.why-wrapper{

grid-template-columns:60% 40%;

}

.why-right{

padding:60px 45px;

}

.why-right h2{

font-size:34px;

}

.why-left{

min-height:480px;

}

.video-btn{

right:-30px;

}

}

/************* Laptop *************/

@media (max-width:1199px){

.why-wrapper{

grid-template-columns:58% 42%;

}

.why-left{

min-height:450px;

}

.why-right{

padding:50px 35px;

}

.why-right h2{

font-size:30px;

}

.counter-text h3{

font-size:34px;

}

.bottom-box{

padding:22px;

font-size:15px;

}

}

/************* Tablet *************/

@media (max-width:991px){

.why-section{

padding:90px 0;

}

.why-wrapper{

grid-template-columns:1fr;

}

.why-left{

min-height:420px;

}

.video-btn{

left:50%;

top:auto;

bottom:-42px;

right:auto;

transform:translateX(-50%);

}

.why-right{

padding:80px 35px 45px;

text-align:center;

}

.section-tag{

justify-content:center;

}

.section-tag::before{

display:none;

}

.why-right h2{

font-size:32px;

}

.counter-item{

justify-content:center;

text-align:left;

}

.why-bottom{

width:100%;

margin-top:0;

}

}

/************* Mobile *************/

@media (max-width:767px){

.why-left{

min-height:320px;

}

.why-right{

padding:70px 25px 35px;

}

.why-right h2{

font-size:27px;

line-height:1.4;

}

.counter-item{

gap:15px;

}

.counter-icon{

width:52px;

height:52px;

font-size:18px;

}

.counter-text h3{

font-size:28px;

}

.counter-text span{

font-size:14px;

}

.why-bottom{

flex-direction:column;

}

.bottom-box{

border-right:none;

border-bottom:1px solid #ececec;

justify-content:center;

}

.bottom-box:last-child{

border-bottom:none;

}

}

/************* Small Mobile *************/

@media (max-width:480px){

.why-section{

padding:70px 0;

}

.why-left{

min-height:260px;

}

.video-btn a{

width:70px;

height:70px;

font-size:20px;

box-shadow:0 0 0 12px rgba(43,99,255,.18);

}

.why-right{

padding:60px 20px 30px;

}

.why-right h2{

font-size:24px;

}

.counter-item{

flex-direction:column;

text-align:center;

}

.counter-text{

text-align:center;

}

.counter-text h3{

font-size:26px;

}

.bottom-box{

padding:18px;

font-size:14px;

}

}

@media(max-width:991px){

.about{

padding:80px 0;

}

.about-wrapper{

grid-template-columns:1fr;

}

.about-content{

text-align:center;

}

.about-features{

grid-template-columns:1fr;

}

.experience{

right:20px;

bottom:20px;

width:130px;

height:130px;

}

.about-content h2{

font-size:34px;

}

}

@media(max-width:576px){

.about-content h2{

font-size:28px;

}

.experience{

width:110px;

height:110px;

}

.experience h2{

font-size:32px;

}

}

@media(max-width:991px){

.services-grid{

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

}

.section-title h2{

font-size:40px;

}

}

@media(max-width:767px){

.services-grid{

grid-template-columns:1fr;

}

.service-box{

min-height:auto;

}

.section-title{

text-align:center;

}

.section-title h2{

font-size:32px;

}

}
@media(max-width:991px){

.cta-flex{

flex-direction:column;

text-align:center;

}

.footer-grid{

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

}

.bottom-flex{

flex-direction:column;

gap:15px;

text-align:center;

}

}

@media(max-width:576px){

.footer-grid{

grid-template-columns:1fr;

}

.footer-cta h2{

font-size:30px;

}

}

@media(max-width:991px){

.vm-wrapper{

grid-template-columns:1fr;

}

.vision-card,
.mission-card{

min-height:auto;

padding:40px;

}

.section-heading{

text-align:center;

}

.section-heading h2{

font-size:38px;

}

}

@media(max-width:576px){

.section-heading h2{

font-size:30px;

}

.vision-card p{

font-size:17px;

line-height:30px;

}

}

@media(max-width:991px){

.founder-grid{

grid-template-columns:1fr;

}

.founder-card{

padding:35px;

}

.founder-head h3{

font-size:24px;

}

}

@media(max-width:576px){

.founder-icon{

width:60px;
height:60px;
font-size:22px;

}

.founder-head{

flex-direction:column;
align-items:flex-start;

}

.founder-head h3{

font-size:22px;

}

}


/*=========================================
ABOUT PAGE RESPONSIVE CSS
==========================================*/

/*=========================================
LAPTOP
==========================================*/

@media(max-width:1200px){

.about-company-wrapper{

    gap:40px;

}

.story-wrapper{

    grid-template-columns:1fr 380px;

}

.breadcrumb-content h1{

    font-size:50px;

}

.about-company-content h2{

    font-size:42px;

}

.section-heading h2{

    font-size:42px;

}

}

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

@media(max-width:992px){

/* Breadcrumb */

.breadcrumb{

    min-height:330px;

}

.breadcrumb-content{

    padding-top:60px;

}

.breadcrumb-content h1{

    font-size:42px;

}

/* Company */

.about-company{

    padding:80px 0;

}

.about-company-wrapper{

    grid-template-columns:1fr;

    gap:60px;

}

.about-company-image{

    max-width:650px;

    margin:auto;

}

.about-company-content{

    text-align:center;

}

.about-company-content h2{

    font-size:38px;

}

.about-list{

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

}

/* Story */

.our-story{

    padding:80px 0;

}

.story-wrapper{

    grid-template-columns:1fr;

    gap:45px;

}

.story-left{

    text-align:center;

}

.story-right{

    max-width:600px;

    margin:auto;

}

/* Vision */

.vm-wrapper{

    grid-template-columns:1fr;

}

.vision-card,

.mission-card{

    min-height:auto;

}

}

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

@media(max-width:768px){

/* Breadcrumb */

.breadcrumb{

    min-height:280px;

}

.breadcrumb-content h1{

    font-size:34px;

}

.breadcrumb-content span{

    font-size:13px;

    letter-spacing:2px;

}

.breadcrumb-nav{

    font-size:14px;

}

/* Company */

.about-company{

    padding:70px 0;

}

.about-company-content{

    text-align:left;

}

.about-company-content h2{

    font-size:32px;

}

.about-company-content p{

    line-height:28px;

}

.about-list{

    grid-template-columns:1fr;

}

.experience-box{

    width:130px;

    height:130px;

    right:15px;

    bottom:15px;

}

.experience-box h2{

    font-size:34px;

}

.experience-box span{

    font-size:13px;

}

/* Story */

.story-left h3{

    font-size:28px;

}

.story-right{

    grid-template-columns:1fr 1fr;

}

.story-card{

    padding:30px 18px;

}

.story-card h2{

    font-size:34px;

}

/* Vision */

.vision-card,

.mission-card{

    padding:35px;

}

.vision-card h3,

.mission-card h3{

    font-size:24px;

}

.vision-card p{

    font-size:17px;

    line-height:30px;

}

.mission-card li{

    line-height:26px;

}

}

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

@media(max-width:576px){

.container{

    width:92%;

}

/* Breadcrumb */

.breadcrumb{

    min-height:250px;

}

.breadcrumb-content{

    padding-top:40px;

}

.breadcrumb-content h1{

    font-size:28px;

}

.breadcrumb-nav{

    flex-wrap:wrap;

}

/* Company */

.about-company{

    padding:60px 0;

}

.about-company-content h2{

    font-size:28px;

}

.about-company-content p{

    font-size:15px;

}

.experience-box{

    width:110px;

    height:110px;

}

.experience-box h2{

    font-size:28px;

}

.experience-box span{

    font-size:11px;

}

/* Story */

.our-story{

    padding:60px 0;

}

.story-right{

    grid-template-columns:1fr;

}

.story-card{

    padding:28px 20px;

}

.story-card h2{

    font-size:32px;

}

/* Vision */

.vision-card,

.mission-card{

    padding:25px;

}

.vm-icon{

    width:60px;

    height:60px;

    font-size:24px;

}

.vision-card h3,

.mission-card h3{

    font-size:22px;

}

.vision-card p{

    font-size:16px;

    line-height:28px;

}

.mission-card li{

    font-size:15px;

}

/* Button */

.primary-btn{

    width:100%;

    justify-content:center;

}

}

/*=========================================
SERVICES PAGE RESPONSIVE CSS
==========================================*/

/*=========================
Large Laptop
==========================*/

@media (max-width:1200px){

.services-intro-wrapper{

    gap:45px;

}

.services-intro-content h2{

    font-size:40px;

}

.service-grid{

    gap:25px;

}

.cta-wrapper h2{

    font-size:44px;

}

}

/*=========================
Tablet
==========================*/

@media (max-width:992px){

/* Banner */

.services-banner{

    min-height:330px;

}

.services-banner .breadcrumb-content h1{

    font-size:42px;

}

/* Intro */

.services-intro{

    padding:80px 0;

}

.services-intro-wrapper{

    grid-template-columns:1fr;

    gap:60px;

}

.services-intro-image{

    max-width:650px;

    margin:auto;

}

.services-intro-content{

    text-align:center;

}

.services-intro-content h2{

    font-size:38px;

}

.service-exp{

    left:20px;
    bottom:20px;

}

/* Cards */

.all-services{

    padding:80px 0;

}

.service-grid{

    grid-template-columns:1fr;

}

.service-card{

    padding:35px;

}

/* CTA */

.service-cta{

    padding:80px 0;

}

.cta-wrapper h2{

    font-size:38px;

}

}

/*=========================
Mobile
==========================*/

@media (max-width:768px){

.services-banner{

    min-height:280px;

}

.services-banner .breadcrumb-content h1{

    font-size:34px;

}

.services-banner .breadcrumb-content p{

    font-size:15px;

    line-height:28px;

}

/* Intro */

.services-intro{

    padding:70px 0;

}

.services-intro-content{

    text-align:left;

}

.services-intro-content h2{

    font-size:32px;

}

.services-intro-content p{

    line-height:28px;

}

.service-exp{

    width:130px;

    height:130px;

}

.service-exp h2{

    font-size:34px;

}

.service-exp span{

    font-size:12px;

}

/* Services */

.all-services{

    padding:70px 0;

}

.service-card{

    padding:30px;

}

.service-card h3{

    font-size:24px;

}

.service-card h4{

    font-size:18px;

}

.service-card li{

    font-size:15px;

}

.service-icon{

    width:70px;

    height:70px;

    font-size:30px;

}

/* CTA */

.service-cta{

    padding:70px 0;

}

.cta-wrapper h2{

    font-size:32px;

}

.cta-wrapper p{

    font-size:15px;

    line-height:28px;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.primary-btn,

.secondary-btn{

    width:260px;

    justify-content:center;

}

}

/*=========================
Small Mobile
==========================*/

@media (max-width:576px){

.container{

    width:92%;

}

/* Banner */

.services-banner{

    min-height:250px;

}

.services-banner .breadcrumb-content h1{

    font-size:28px;

}

.services-banner .breadcrumb-content span{

    font-size:12px;

    letter-spacing:2px;

}

.services-banner .breadcrumb-content p{

    display:none;

}

/* Intro */

.services-intro{

    padding:60px 0;

}

.services-intro-content h2{

    font-size:28px;

}

.services-intro-content p{

    font-size:15px;

}

.service-exp{

    width:110px;

    height:110px;

}

.service-exp h2{

    font-size:28px;

}

/* Cards */

.all-services{

    padding:60px 0;

}

.service-card{

    padding:25px;

}

.service-icon{

    width:65px;

    height:65px;

    font-size:28px;

}

.service-card h3{

    font-size:22px;

}

.service-card h4{

    font-size:17px;

}

.service-card li{

    font-size:14px;

    line-height:24px;

}

/* CTA */

.service-cta{

    padding:60px 0;

}

.cta-wrapper h2{

    font-size:28px;

}

.cta-wrapper p{

    font-size:14px;

}

.primary-btn,

.secondary-btn{

    width:100%;

}

}

/*=========================================
LEADERSHIP PAGE RESPONSIVE
==========================================*/

/*==============================
Large Devices
==============================*/

@media (max-width:1200px){

.leader-card{

padding:35px;

}

.industry-grid{

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

}

.story-wrapper{

grid-template-columns:1fr 360px;

}

}

/*==============================
Tablet
==============================*/

@media (max-width:991px){

.leadership-intro{

padding:80px 0 50px;

}

.leadership-intro p{

font-size:16px;
line-height:30px;

}

.leader-grid{

grid-template-columns:1fr;
gap:35px;

}

.story-wrapper{

grid-template-columns:1fr;
gap:45px;

}

.story-left{

text-align:center;

}

.story-right{

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

}

.industry-grid{

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

}

.section-heading h2{

font-size:38px;

}

.leader-card h3{

font-size:28px;

}

}

/*==============================
Mobile
==============================*/

@media (max-width:767px){

.leadership-intro{

padding:70px 0 40px;

}

.leadership-intro p{

font-size:15px;
line-height:28px;

}

.leader-card{

padding:30px 22px;

}

.leader-card img{

width:150px;
height:150px;

}

.leader-card h3{

font-size:24px;

}

.leader-card h5{

font-size:17px;

}

.designation{

font-size:15px;
line-height:28px;

}

.leader-card p{

font-size:15px;
line-height:28px;

}

.leader-card blockquote{

font-size:15px;
line-height:28px;
padding:18px;

}

.story-left h3{

font-size:28px;

}

.story-left p{

font-size:15px;
line-height:28px;

}

.story-right{

grid-template-columns:1fr;

}

.story-card{

padding:30px 20px;

}

.story-card h2{

font-size:36px;

}

.section-heading h2{

font-size:32px;

}

.industry-grid{

grid-template-columns:1fr;

gap:18px;

}

.industry-grid div{

padding:28px 20px;

}

.industry-grid i{

font-size:34px;

}

.industry-grid h4{

font-size:17px;

}

}

/*==============================
Small Mobile
==============================*/

@media (max-width:480px){

.leadership-intro{

padding:60px 0 35px;

}

.section-heading h2{

font-size:28px;
line-height:1.4;

}

.leader-card{

padding:25px 18px;

}

.leader-card img{

width:130px;
height:130px;

}

.leader-card h3{

font-size:22px;

}

.leader-card h5{

font-size:16px;

}

.designation{

font-size:14px;

}

.leader-card p{

font-size:14px;
line-height:26px;

}

.leader-card blockquote{

font-size:14px;
line-height:26px;

}

.story-left h3{

font-size:24px;

}

.story-card{

padding:25px 18px;

}

.story-card h2{

font-size:32px;

}

.story-card span{

font-size:15px;

}

.industry-grid div{

padding:24px 15px;

}

.industry-grid i{

font-size:30px;

}

.industry-grid h4{

font-size:16px;
line-height:24px;

}

}

/*=========================================
CONTACT PAGE RESPONSIVE
==========================================*/

/*==============================
Large Devices
==============================*/

@media (max-width:1200px){

.contact-wrapper{

grid-template-columns:1.5fr 1fr;

}

.contact-grid{

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

}

}

/*==============================
Tablet
==============================*/

@media (max-width:991px){

.contact-info-section,
.contact-form-section,
.map-section{

padding:80px 0;

}

.contact-grid{

grid-template-columns:1fr;
gap:25px;

}

.contact-wrapper{

grid-template-columns:1fr;
gap:40px;

}

.contact-form{

padding:40px;

}

.contact-form h2{

font-size:34px;

}

.form-grid{

grid-template-columns:1fr;

}

.hours-card,
.support-card{

padding:30px;

}

.section-heading h2{

font-size:36px;

}

}

/*==============================
Mobile
==============================*/

@media (max-width:767px){

.contact-info-section,
.contact-form-section,
.map-section{

padding:70px 0;

}

.contact-card{

padding:35px 25px;

}

.contact-icon{

width:70px;
height:70px;
font-size:26px;

}

.contact-card h3{

font-size:22px;

}

.contact-card p{

font-size:15px;
line-height:28px;

}

.contact-form{

padding:30px 22px;

}

.contact-form h2{

font-size:30px;

}

.contact-form p{

font-size:15px;
line-height:28px;

}

.contact-form input,
.contact-form textarea{

padding:15px;

}

.hours-card,
.support-card{

padding:25px;

}

.hours-card h3,
.support-card h3{

font-size:24px;

}

.hours-card li{

display:block;
padding:12px 0;

}

.hours-card li strong{

display:block;
margin-top:5px;

}

.support-card li{

font-size:15px;

}

.map-wrapper iframe{

height:350px;

}

.section-heading h2{

font-size:30px;

}

}

/*==============================
Small Mobile
==============================*/

@media (max-width:480px){

.contact-card{

padding:30px 20px;

}

.contact-icon{

width:65px;
height:65px;
font-size:22px;

}

.contact-card h3{

font-size:20px;

}

.contact-card p{

font-size:14px;
line-height:26px;

}

.contact-form{

padding:25px 18px;

}

.contact-form h2{

font-size:26px;

}

.contact-form p{

font-size:14px;
line-height:26px;

}

.contact-form input,
.contact-form textarea{

font-size:14px;
padding:14px;

}

.hours-card,
.support-card{

padding:20px;

}

.hours-card h3,
.support-card h3{

font-size:22px;

}

.hours-card li,
.support-card li{

font-size:14px;

}

.map-wrapper iframe{

height:280px;

}

.section-heading h2{

font-size:28px;

}

}