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

.hero{

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbff 45%,
        #eef5ff 100%
    );

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top left,
        rgba(10,79,181,.08),
        transparent 40%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(30,136,229,.08),
        transparent 35%
    );

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:24px;

}

.hero-title{

    color:var(--heading);

}

.hero-title span{

    color:var(--primary);

}

.hero-description{

    color:var(--body);

}

.hero-buttons{

    margin-top:20px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    filter:
    drop-shadow(0 30px 60px rgba(0,0,0,.12));

}


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

.clients{

    background:var(--white);

}

.clients-header{

    margin-bottom:40px;

}

.clients-header h3{

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.9rem;

    color:var(--body);

}

.clients-slider{

    padding:10px 0;

}


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

.about{

    background:var(--light);

}

.about-image{

    overflow:hidden;

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

}

.about-image img{

    transition:transform .6s ease;

}

.about-image:hover img{

    transform:scale(1.04);

}

.about-content h2{

    color:var(--heading);

}

.about-content p{

    color:var(--body);

}

.about-feature{

    transition:var(--transition);

}

.about-feature:hover{

    transform:translateY(-8px);

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

}

.about-feature h3{

    color:var(--heading);

}

.about-feature p{

    margin-bottom:0;

}


/*==================================================
MISSION & VISION , VALUES
====================================================*/

.mission-card{
    display:grid;
    grid-template-columns:40px 1fr;
    grid-template-areas:
        "icon title"
        "icon text";
    gap:.5rem 1.5rem;
    align-items:start;
}
.card-icon{
    grid-area:icon;
}

.mission-card h3{
    grid-area:title;
    margin:0;
}

.mission-card p{
    grid-area:text;
    margin:0;
}

.value-card{
    display:grid;
    grid-template-columns:40px 1fr;
    grid-template-areas:
        "icon title"
        "icon text";
    gap:.5rem 1.5rem;
    align-items:start;
}
.value-icon{
    grid-area:icon;
}

.value-card h3{
    grid-area:title;
    margin:0;
}

.value-card p{
    grid-area:text;
    margin:0;
}

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

.statistics{

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:var(--white);

}

.statistics .section-header h2,

.statistics .section-header p{

    color:var(--white);

}

.stat-item{

   /* previous version 1.2 if not looking good delete the comment and use this
	padding:30px 16px;
	cursor:pointer;
	*/
	
	display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:var(--white);

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

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

    padding:30px 22px;

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

    transition:var(--transition);
	
	cursor:pointer;

}

.stat-item:hover{

    transform:translateY(-8px);

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

}


.stats-grid{
	display:grid;
    grid-template-columns:repeat(4,minmax(220px,1fr));
    gap:24px;
    align-items:stretch;
    margin-top:60px;
	padding: 20px 20px;
}

.stat-number{

    font-size:clamp(2.4rem,4vw,3.6rem);

    font-weight:800;

    line-height:1;

    margin-bottom:10px;

    color:var(--primary);

}

.stat-label{
/*
    font-size:1rem;

    opacity:.92;
	*/
	font-size:0.95rem;

    font-weight:600;

    color:var(--gray-600);

    line-height:1.6;

    text-align:center;

}

.stat-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(25,83,196,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    color:var(--primary);

    font-size:1.8rem;

}

.stats-section{
	padding:90px 0;
}




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

.services{

    background:var(--light);

}

.service-card{

	/* old setting
    background:var(--white);

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

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

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);
	*/
    position:relative;

    display:flex;

    flex-direction:column;

    background:var(--white);

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

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

    overflow:hidden;

    transition:all .35s ease;

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

    height:100%;

}

}

.service-card:hover{

    transform:translateY(-10px);

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

    border-color:rgba(10,79,181,.25);

}

.service-image{

	/*old setting
    overflow:hidden;*/
	height:230px;

    overflow:hidden;

    position:relative;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}

.service-content{

    /*old setting
	padding:32px;*/
	display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}

.service-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    background:rgba(10,79,181,.08);

    color:var(--primary);

}

.service-title{

    /* old setting
	margin-bottom:16px;*/
	font-size:1.4rem;

    font-weight:700;

    margin-bottom:16px;

    color:var(--gray-900);

}

.service-description{

    /* old setting
	margin-bottom:24px;

    color:var(--body);*/
	color:var(--gray-600);

    line-height:1.8;

    margin-bottom:24px;

    flex:1;

}

.service-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:30px;

}

.service-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.service-footer{

    padding-top:20px;

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

}

.service-details{
    max-height:0;
    overflow:hidden;

    opacity:0;

    transition:
        max-height .45s ease,
        opacity .35s ease,
        margin-top .35s ease;

    margin-top:0;
}

.service-card.active .service-details{

    max-height:500px;

    opacity:1;

    margin-top:20px;

}

.service-toggle{

    cursor:pointer;

    transition:.3s;
	
	margin-top: 25px;

}

.service-card.active .service-toggle{

    color:#1953c4;

}
.service-toggle::after{

    content:"+";

    margin-left:8px;

    transition:.3s;

}

.service-card.active .service-toggle::after{

    content:"−";

}


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

.why-choose{

    background:var(--white);

}

.why-image{

    position:relative;

}

.why-image img{

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

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

}

.why-list{

    margin-top:40px;

}

.why-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

    padding:22px 0;

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

}

.why-item:last-child{

    border-bottom:none;

}

.why-icon{

    flex-shrink:0;

}

.why-text h3{

    margin-bottom:10px;

}


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

.industries{

    background:var(--light);

}

.industry-card{

    background:var(--white);

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

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

    padding:36px 24px;

    transition:var(--transition);

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

}

.industry-card:hover{

    transform:translateY(-8px);

    border-color:rgba(10,79,181,.25);

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

}

.industry-icon{

    width:72px;

    height:72px;

    margin-bottom:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(10,79,181,.08);

    color:var(--primary);

}

.industry-title{

    margin-bottom:14px;

}

.industry-description{

    color:var(--body);

}


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

.process{

    background:var(--white);

}

.process-step{

    background:var(--white);

    padding:30px 24px;

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

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

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

    transition:var(--transition);

}

.process-step:hover{

    transform:translateY(-8px);

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

    border-color:rgba(10,79,181,.25);

}

.process-number{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-inline:auto;

    background:var(--primary);

    color:var(--white);

    font-weight:700;

    font-size:1.2rem;

}

.process-title{

    margin:24px 0 14px;

}

.process-description{

    color:var(--body);

}


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

    content:"";

    position:absolute;

    top:42px;

    left:100%;

    width:28px;

    height:2px;

    background:var(--primary);

    opacity:.25;

}

/*==================================================
CTA BANNER
====================================================*/

.cta{

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:var(--white);
	padding: 20px;

}

.cta-content h2{

    color:var(--white);

}

.cta-content p{

    color:rgba(255,255,255,.90);

}

.cta-actions{

    margin-top:20px;

}


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

.faq{

    background:var(--light);

}

.faq-item{

    background:var(--white);

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

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

    overflow:hidden;

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

    transition:var(--transition);

}

.faq-item + .faq-item{

    margin-top:18px;

}

.faq-item:hover{

    border-color:rgba(10,79,181,.25);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    cursor:pointer;

    background:transparent;

}

.faq-question h3{

    margin:0;

    font-size:1.05rem;

}

.faq-answer{

    padding:0 28px 24px;

    color:var(--body);

    display:none;

}

.faq-item.active .faq-answer{

    display:block;

}


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

.contact{

    background:var(--white);

}

.office-card{

    background:var(--light);

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

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

    padding:32px;

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

    transition:var(--transition);

}

.office-card + .office-card{

    margin-top:24px;

}

.office-card:hover{

    transform:translateY(-6px);

    border-color:rgba(10,79,181,.25);

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

}

.office-title{

    margin-bottom:18px;

    color:var(--heading);

}

.office-info{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.office-info li{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.office-info i{

    color:var(--primary);

    min-width:20px;

    margin-top:2px;

}


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

.contact-form{

    background:var(--light);

    padding:20px;

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

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

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

}

.contact-form .form-group{

    margin-bottom:24px;

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}


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

.contact-map{

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

    overflow:hidden;

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

}

.contact-map iframe{

    display:block;
	
	width: 100%;
	
	height: 300px;

}


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

.footer{

    background:var(--gray-900);

    color:rgba(255,255,255,.82);
	
	padding-top: 50px;

}

.footer-logo{

    margin-bottom:24px;
	
	margin-top :5px;
	
	width: 150px;
	
	height: auto;
	
}

.footer-description{

    margin-bottom:28px;

    line-height:1.8;

}

.footer-column h3{

    color:var(--white);

}

.footer-column a{

    color:rgba(255,255,255,.78);

    transition:var(--transition);

}

.footer-column a:hover{

    color:var(--accent);

    padding-left:6px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    color:var(--white);

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}


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

.newsletter-form{

    margin-top:20px;

}

.newsletter-form input{

    flex:1;

}

.newsletter-form button{

    white-space:nowrap;

}


/*==================================================
SECTION DECORATIONS
====================================================*/

.section-decoration{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.section-decoration::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(10,79,181,.04);

    top:-120px;

    right:-120px;

}

.section-decoration::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(30,136,229,.05);

    bottom:-80px;

    left:-80px;

}


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

.hero-scroll{

    opacity:.8;

    transition:var(--transition);

}

.hero-scroll:hover{

    opacity:1;

    transform:translateX(-50%) translateY(4px);

}


/*==================================================
IMAGE CONSISTENCY
====================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}

img.icon{
	width:40px;
	border: 3px solid transparent;
	border-radius: 20%;
	background:
    linear-gradient(#222, #222) padding-box,
    linear-gradient(
      135deg,
      #f8f8f8,
      #d9d9d9,
      #a6a6a6,
      #ffffff,
      #bfbfbf,
      #f5f5f5
    ) border-box;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}




/*==================================================
ICON CONSISTENCY
====================================================*/

.service-icon,
.industry-icon,
.why-icon,
.process-number{

    transition:var(--transition);

}

.service-card:hover .service-icon,
.industry-card:hover .industry-icon{

    transform:scale(1.08);

}


/*==================================================
SECTION DIVIDERS
====================================================*/

.section-divider{

    width:80px;

    height:4px;

    border-radius:999px;

    background:var(--primary);

    margin:20px auto 0;

}


/*==================================================
TEXT BALANCING
====================================================*/

.hero-title,
.section-header h2,
.cta-content h2{

    text-wrap:balance;

}


/*==================================================
SELECTION
====================================================*/

::selection{

    background:var(--primary);

    color:var(--white);

}


/*==================================================
FOCUS RING
====================================================*/

:focus-visible{

    outline:3px solid rgba(10,79,181,.35);

    outline-offset:4px;

}


/*==================================================
SECTION ANCHOR OFFSET

Ensures anchored sections remain visible
below the fixed header.
====================================================*/

section{

    scroll-margin-top:110px;

}


/*==================================================
ACCESSIBILITY ENHANCEMENTS
====================================================*/

.service-card:focus-within,
.industry-card:focus-within,
.office-card:focus-within,
.faq-item:focus-within{

    box-shadow:
    0 0 0 4px rgba(10,79,181,.15);

}


/*==================================================
INTERACTIVE STATES
====================================================*/

button,
a{

    -webkit-tap-highlight-color:transparent;

}


/*==================================================
SECTION IMAGE PLACEHOLDERS
====================================================*/

.hero-image,
.about-image,
.service-image,
.why-image{

    background:linear-gradient(
        135deg,
        rgba(10,79,181,.03),
        rgba(30,136,229,.05)
    );

}


/*==================================================
REDUCED MOTION SUPPORT
====================================================*/

@media (prefers-reduced-motion: reduce){

    .service-card,
    .industry-card,
    .about-image img,
    .hero-scroll,
    .footer-social a{

        transition:none !important;

        animation:none !important;

    }

}


/*==================================================
PRINT SUPPORT
====================================================*/

@media print{

    .hero-scroll,
    .section-decoration,
    .newsletter,
    .footer-social{

        display:none !important;

    }

}