/*==================================================
GLOBAL CONTAINER SYSTEM
====================================================*/

.container{

    width:min(100% - 2rem,1200px);

    margin-inline:auto;

}

.container-lg{

    width:min(100% - 2rem,1320px);

    margin-inline:auto;

}

.container-fluid{

    width:min(100% - 2rem,1600px);

    margin-inline:auto;

}


/*==================================================
SECTION SPACING
====================================================*/

.section{

    position:relative;

    padding: 50px 0 0 0;

}

.section-sm{

    padding:70px 0;

}

.section-lg{

    padding:140px 0;

}


/*==================================================
SECTION BACKGROUNDS
====================================================*/

.bg-light{

    background:var(--light);

}

.bg-white{

    background:var(--white);

}

.bg-dark{

    background:var(--dark);

}

.bg-primary{

    background:var(--primary);

}


/*==================================================
SECTION HEADER
====================================================*/

.section-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:70px;

}

.section-header h2{

    max-width:760px;

}

.section-header p{

    max-width:700px;

    margin-top:20px;

}


/*==================================================
GRID SYSTEM
====================================================*/

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.grid-auto{

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

}


/*==================================================
FLEX UTILITIES
====================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}


/*==================================================
HEADER
====================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:var(--transition);

}

.header.scrolled{

    /*background:rgba(255,255,255,.96);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:var(--shadow-md);*/

}


/*==================================================
NAVBAR
====================================================*/

.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;
	
	background:rgb(30 83 193/70%);
	
	border-bottom: 5px solid var(--primary-dark);
	
	border-right: 2px solid var(--primary-dark);
	
	border-left: 2px solid var(--primary-dark);
	
	border-radius: 0 0 10px 10px;
	 
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}


/*==================================================
LOGO
====================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.logo img{

    width:auto;

    height:40px;
	
	margin-right: 450px;
	
	margin-left: 50px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text span:first-child{

    font-weight:700;

    color:var(--heading);

}

.logo-text span:last-child{

    font-size:.82rem;

    color:var(--body);

}


/*==================================================
DESKTOP NAVIGATION
====================================================*/

.nav-menu{

    display:flex;

    align-items:center;

    gap:36px;
	
	padding-left: 10px;

}

.nav-menu li{

    position:relative;

}

.nav-menu a{

    position:relative;
	
	font-family: var(--heading-font);

    font-weight:700;

    color:var(--gray-50);

    transition:var(--transition);

}
.nav-menu .btn:hover, 
.nav-menu .btn.active{
	color: #fff;
}

.nav-menu a:hover,

.nav-menu a.active{

    color:var(--gray-200);
	

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

    width:100%;

}


/*==================================================
NAVIGATION ACTIONS
====================================================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:20px;

}


/*==================================================
HEADER SPACER

Prevents hero content from hiding beneath
the fixed navigation.

====================================================*/

.header-offset{

    padding-top:90px;

}


/*==================================================
HERO SECTION
====================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero .container-lg{

    position:relative;

    z-index:2;

}


/*==================================================
HERO GRID
====================================================*/

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:70px;
	
	margin-top: 97px;
	
	background-image:url("../images/hero/hero.webp");

}


/*==================================================
HERO CONTENT
====================================================*/

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-badge{

    margin-bottom:24px;

}

.hero-title{

    margin-bottom:28px;

    max-width:700px;

}

.hero-description{

    max-width:620px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


/*==================================================
HERO IMAGE
====================================================*/

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.hero-image img{

    /*width:100%;

    max-width:650px;

    height:auto;

    display:block;*/

}


/*==================================================
HERO DECORATION
====================================================*/

.hero-decoration{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.hero-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.18;

}

.hero-circle.one{

    width:380px;

    height:380px;

    top:-120px;

    left:-120px;

    background:var(--primary);

}

.hero-circle.two{

    width:320px;

    height:320px;

    bottom:-120px;

    right:-80px;

    background:var(--secondary);

}


/*==================================================
SCROLL INDICATOR
====================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    z-index:5;

}


/*==================================================
TRUSTED CLIENTS
====================================================*/

.clients{

    overflow:hidden;

    position:relative;

}

.clients-wrapper{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.clients-header{

    text-align:center;

}

.clients-slider{

    position:relative;

    overflow:hidden;

    width:100%;

}


/*==================================================
ABOUT SECTION
====================================================*/

.about{

    position:relative;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}


/*==================================================
ABOUT IMAGE
====================================================*/

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:var(--radius-xl);

    display:block;

}


/*==================================================
ABOUT CONTENT
====================================================*/

.about-content{

    display:flex;

    flex-direction:column;

}

.about-content h2{

    margin-bottom:24px;

}

.about-content p{

    margin-bottom:24px;

}

.about-content .btn{

    margin-top:18px;

    width:max-content;

}


/*==================================================
MISSION & VISION
====================================================*/

.about-features{

    display:grid;

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

    gap:24px;

    margin-top:40px;

}

.about-feature{

    padding:28px;

    border-radius:var(--radius-lg);

    background:var(--white);

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

}

.about-feature h3{

    margin-bottom:14px;

}


/*==================================================
STATISTICS
====================================================*/

.statistics{

    position:relative;

}

.statistics-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}


/*==================================================
STATISTIC ITEM
====================================================*/

.stat-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:220px;

}


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

.services{

    position:relative;

}

.services-grid{

   /* old setting
   display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

    align-items:stretch;*/
	display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:32px;

    align-items:stretch;

    margin-top:60px;

}


/*==================================================
SERVICE CARD LAYOUT
====================================================*/

.service-card{

    display:flex;

    flex-direction:column;

    height:100%;

}

.service-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.service-footer{

    margin-top:auto;

}


/*==================================================
INDUSTRIES
====================================================*/

.industries{

    position:relative;

}

.industries-grid{

    display:grid;

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

    gap:28px;

}


/*==================================================
INDUSTRY CARD
====================================================*/

.industry-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:220px;

}


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

.why-choose{

    position:relative;

}

.why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}


/*==================================================
WHY CONTENT
====================================================*/

.why-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.why-list{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-top:40px;

}


/*==================================================
WHY IMAGE
====================================================*/

.why-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.why-image img{

    width:100%;

    max-width:580px;

    display:block;

}


/*==================================================
PROCESS
====================================================*/

.process{

    position:relative;

}

.process-wrapper{

    display:flex;

    flex-direction:row;

    gap:25px;

}


/*==================================================
PROCESS TIMELINE
====================================================*/

.process-timeline{

    display:grid;

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

    gap:24px;

    align-items:start;

    position:relative;

}


/*==================================================
PROCESS STEP
====================================================*/

.process-step{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.process-step:not(:last-child)::after{

    content:"";

    position:absolute;

    top:36px;

    left:60%;

    width:80%;

    height:2px;

    background:var(--border);

}

.process-number{

    margin-bottom:24px;

    z-index:2;

}

/*==================================================
CALL TO ACTION
====================================================*/

.cta-section{

    position:relative;

}

.cta-wrapper{

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

    gap:60px;

}

.cta-content{

    max-width:700px;

}

.cta-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

}


/*==================================================
FAQ
====================================================*/

.faq{

    position:relative;

}

.faq-wrapper{

    max-width:900px;

    margin-inline:auto;

}


/*==================================================
CONTACT
====================================================*/

.contact{

    position:relative;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:60px;

    align-items:start;

}


/*==================================================
OFFICE INFORMATION
====================================================*/

.office-list{

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*==================================================
CONTACT FORM
====================================================*/

.contact-form-wrapper{

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*==================================================
GOOGLE MAP
====================================================*/

.contact-map{

    margin-top: 20px;

    border-radius:var(--radius-xl);

    overflow:hidden;

 }

.contact-map iframe{

    border:0;

}


/*==================================================
FOOTER
====================================================*/

.footer{

    position:relative;

    overflow:hidden;

}

.footer-grid{

    display:grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr
        1.2fr;

    gap:50px;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column h3{

    margin-bottom:24px;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}


/*==================================================
NEWSLETTER
====================================================*/

.newsletter{

    margin-top:24px;

}

.newsletter-form{

    display:flex;

    gap:14px;

}


/*==================================================
FOOTER BOTTOM
====================================================*/

.footer-bottom{

    margin-top:70px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.12);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}


/*==================================================
COPYRIGHT
====================================================*/

.copyright{

    display:flex;

    align-items:center;

    gap:10px;

}


/*==================================================
FOOTER SOCIAL
====================================================*/

.footer-social{

    display:flex;

    gap:16px;

}

/*==================================================
CONTENT WRAPPER
====================================================*/

.content-wrapper{

    position:relative;

    width:100%;

}

.content-center{

    max-width:900px;

    margin-inline:auto;

}


/*==================================================
STACK LAYOUT
====================================================*/

.stack-sm{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.stack-md{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.stack-lg{

    display:flex;

    flex-direction:column;

    gap:70px;

}


/*==================================================
SPLIT LAYOUT
====================================================*/

.split{

    display:grid;

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

    gap:60px;

    align-items:center;

}


/*==================================================
AUTO GRID
====================================================*/

.auto-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}


/*==================================================
MAX WIDTH HELPERS
====================================================*/

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}

.max-900{

    max-width:900px;

}


/*==================================================
SPACING HELPERS
====================================================*/

.mt-auto{

    margin-top:auto;

}

.mx-auto{

    margin-inline:auto;

}

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}


/*==================================================
OVERFLOW PROTECTION
====================================================*/

.page-wrapper{

    overflow:hidden;

    min-height:100vh;

}

.section{

    overflow:hidden;

}


/*==================================================
SAFE AREA SUPPORT
====================================================*/

@supports (padding:max(0px)){

    .header{

        padding-top:
        max(0px,env(safe-area-inset-top));

    }

    .footer{

        padding-bottom:
        max(0px,env(safe-area-inset-bottom));

    }

}


/*==================================================
PRINT LAYOUT
====================================================*/

@media print{

    .header,

    .footer,

    .hero,

    .back-to-top,

    .cta-section{

        display:none !important;

    }

}