/* Global Reset & Font */
:root {
    --primary-color: #0E7326;
    --dark-bg: #073e14; /* Deep Navy Blue extracted from image */
    --text-dark: #111111;
	font-size:16px;
}


html {
    scroll-behavior: auto !important; 
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.4;
}

/* 1. Top Bar Styles */
.top-bar {
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
}

.top-bar a {
    color: #666;
    transition: color 0.2s;
}

.top-bar a:hover {
    color: var(--primary-color);
}

.pageanchor {
  margin-top: -80px;
  height: 80px;
  display: block;
}

/* 2. Navbar Styles */
.navbar {
    box-shadow: none; /* Removed default shadow to match clean white look */
}

.navbar-brand .logo-icon {
    width: 40px;
    height: 40px;
}

.navbar-nav .nav-link {
    color: #111;
    font-weight: 600; /* Semibold */
    font-size: 0.95rem;
    margin: 0 12px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
    color: var(--primary-color);
}

/* Button Global Override for consistency */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #1a3fd6;
    border-color: #1a3fd6;
}

/* Outline Button (Philosophy Section) */
.btn-outline-primary {
    color: var(--primary-color);
    border: 1px solid #cce0ff; /* Light blue border as seen in image */
    background-color: transparent;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #f5f9ff;
    border-color: var(--primary-color);
    color: var(--primary-color);
    /* Note: Design usually keeps text blue on hover for this style, or goes full blue. 
       Based on standard modern UI, light bg hover is common. */
}

/* 3. Hero Section Styles (Updated) */
#hero-section {
    height: 690px; /* Fixed height per requirements */
	background:var(--dark-bg) url(../images/home_bannerbg.jpg) center center no-repeat;
    position: relative;
    overflow: hidden;
}

/* Gradient overlay to ensure text readability on the left if image is too bright */
.hero-bg-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%; /* Fades over the left side text area */
    height: 100%;
    background: linear-gradient(to right, var(--dark-bg) 20%, rgba(3, 18, 39, 0) 100%);
    z-index: 1;
}

.hero-title {
    font-weight: 700; /* Bold */
    font-size: 3rem; /* Large scale */
    line-height: 1.25;
}

/* Responsive Adjustments */
@media (max-width: 2560px) {
	#hero-section {
	    height: 920px;
	    background-size: cover;
	}
	.hero-title{
		margin-top:-20px;
	}
}
@media (max-width: 1920px) {
	#hero-section {
	    height: 690px;
	    background-size: cover;
	}
}
@media (max-width: 1480px) {
	#hero-section {
	    height: 600px;
	    background-size: cover;
	}
}
@media (max-width: 991px) {
	.navbar-collapse {
		background: #fff;
		padding: 20px;
		padding-bottom:40px;
		border-radius: 8px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.1);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.hero-title {
		font-size: 2.2rem;
	}

	#hero-section {
		height: auto;
		padding: 100px 0;
	}
	#hero-section .container{
		padding:0px 15px;
	}
}

@media (max-width: 800px) {
	.hero-title br{
		display: none;
	}
}


.jumbotroeBannerKv {
    height: 380px;
	position: relative;
	background: linear-gradient(90deg, #001123 -21.79%, #073e14 100.22%);
}

.jumbotroeBannerKv:before{
	position: absolute;
	width:100%;
	height:100%;
	background: linear-gradient(90deg, #001123 -21.79%, #073e14 100.22%);
	opacity: .5;
	z-index:10;
	content:"";
}

.jumbotroeBannerKv .container{
	height:100%;
}

.jumbotroeBannerKv .jumbotron{
	position: relative;
	z-index:50;
	height:100%;
	display: flex;
	align-items: center;
}

.jumbotroeBannerKv h1{
	color:#fff;
	font-size:42px;
}

.jumbotroeBannerKv img{
	width:100%;
	height:100%;
	object-fit: cover;
	opacity: 0.4;
}

.hero-text-col {
    z-index: 2;
}

.hero-img-col {
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

.floating-globe {
    opacity: 0.9;
    /* Simple animation for the globe */
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Section Common */
.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}

.bg-alice-blue {
    background-color: var(--bg-alice);
}

.bg-light-gray {
    background-color: #F9FAFB;
}

/* =========================================
   1. About Section Styles (Independent)
   ========================================= */
#about-section{
	background: #f6fff8;
}
#about-section .about-title {
    font-size: 1.75rem;          
    font-weight: 800;            
    text-transform: uppercase;   
    color: #000000;              
    margin-bottom: 1.5rem;       
    line-height: 1.2;
}

#about-section .about-desc-large {
    font-size: 0.95rem;          
    color: #444444;              
    line-height: 1.6;            
    margin-bottom: 1.5rem;
}

#about-section .about-desc-small {
    font-size: 0.85rem;          
    color: #666666;              
    line-height: 1.6;
    margin-bottom: 2rem;
}

#about-section .about-btn {
    min-width: 220px;
    border-radius: 4px;
    font-weight: 600;
    
}


/* =========================================
   2. Philosophy Section Styles (Independent)
   ========================================= */
#philosophy-section .philosophy-title {
    font-size: 1.6rem;           
    font-weight: 700;            
    color: #000000;              
    line-height: 1.4;            
    margin-bottom: 1.5rem;
}

#philosophy-section .philosophy-desc {
    font-size: 0.95rem;          
    color: #555555;              
    line-height: 1.6;            
    margin-bottom: 2rem;
}

#philosophy-section .philosophy-btn {
    min-width: 220px;
    border-radius: 4px;
    font-weight: 700;
    border-color: var(--primary-color);      
    color: var(--primary-color);
}
#philosophy-section .philosophy-btn:hover {
    background-color: #f0f8ff;
}


/* =========================================
   3. Value Section Styles (Independent)
   ========================================= */
#value-section {
    background-color: #073e14;   
}


#value-section .value-main-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
}


#value-section .value-main-subtitle {
    font-size: 1rem;
    font-weight: 600;            
    color: #ffffff;
    max-width: 700px;
    margin: 0 auto;              
    line-height: 1.5;
}


#value-section .value-card {
    background-color: #ffffff;
    padding: 2rem 2rem 5rem 2rem;
    height: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


#value-section .icon-box {
    margin-bottom: 1.5rem;
    color: #000000;              
}


#value-section .value-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 1rem;
}


#value-section .value-card-desc {
    font-size: 0.95rem;          
    color: #666666;              
    line-height: 1.5;
    margin-bottom: 0;
}

.globalPerspectiveWrap{
	margin-top:80px;
}

.globalPerspectiveWrap a{
	font-size:1.3rem;
}

/* Text utility for slightly lighter gray text */
.text-secondary {
    color: #555 !important;
}


/* Core Services Styles */


.service-card {
    border: 1px solid #e5e7eb; /* Light subtle border matching the image */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensures image doesn't overflow corners */
}


.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: transparent;
}


.service-img-wrapper {
    width: 100%;
    height: 240px; /* Fixed height for image area */
    overflow: hidden;
}

.service-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers area without stretching */
    transition: transform 0.5s ease;
}

/* Optional, looks premium */
.service-card:hover .service-img-wrapper img {
    transform: scale(1.05);
}


.service-card h5 {
    font-size: 1.4rem;
    line-height: 1.3;
    min-height: 3.5rem; /* Ensures titles align even if one line vs two lines */
    display: flex;
    align-items: flex-end; /* Bottom align title if needed, or stick to flex-start */
    align-items: flex-start;
}

.service-card p {
    color: #666;
    line-height: 1.6!important; /* More breathing room for text */
	padding-bottom:30px;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-img-side {
    object-fit: cover;
    width: 100%;
}

@media (min-width: 768px) {
    .service-img-side {
        max-width: 200px;
        height: 100%;
    }
}

/* Vision Section Styles */
#vision-section{
	padding-top:60px;
}

#vision-section h2 {
    font-size: 2.5rem;
    color: #000;
}

#vision-section h3 {
    font-size: 1.5rem; 
    line-height: 1.6;
    color: #000;
}

#vision-section h5 {
    font-size: 1.3rem; 
    line-height: 1.6;
    color: #111;
}


hr.opacity-10 {
    opacity: 0.1;
    border-top: 1px solid #000;
}


.vision-img-wrapper {
    overflow: hidden;
    border-radius: 4px; 
}

.vision-img-wrapper img {
    transition: transform 0.4s ease;
}


.vision-card:hover .vision-img-wrapper img {
    transform: scale(1.05);
}


.vision-card h6 {
    font-size: 1rem;
    margin-top: 15px;
    color: #000;
}

/* Mission Section Styles */
#mission-section {
    min-height: 480px; 
    background: #073e14 url(../images/ourmission_wrapimg.png) center center no-repeat; 
	background-size: cover;
    padding: 100px 0;
    position: relative;
    z-index: 1;
}


.mission-title {
    letter-spacing: 1px;
    font-size: 2.5rem;
}


.mission-content h4 {
    font-size: 1.45rem; 
    line-height: 1.6;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95; 
}


.mission-bg-decor-left {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 50%;
    height: 140%;
    background: radial-gradient(circle at center, rgba(14, 115, 38, 0.4) 0%, rgba(7, 62, 20, 0) 70%);
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
}


.mission-bg-decor-right {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 50%;
    height: 140%;
    background: radial-gradient(circle at center, rgba(14, 115, 38, 0.4) 0%, rgba(7, 62, 20, 0) 70%);
    transform: rotate(15deg);
    pointer-events: none;
    z-index: 0;
}


@media (max-width: 768px) {
    #mission-section {
        min-height: auto;
        padding: 60px 0;
    }
    .mission-title {
        font-size: 2rem;
        margin-bottom: 2rem !important;
    }
    .mission-content h4 {
        font-size: 1.1rem;
    }
   
    .mission-content br {
        display: none;
    }
}

/* Global Section Styles */

/* Overlapping Card Logic */
.perspective-card {
    margin-top: -100px; /* Pull the card up to overlap the image */
    position: relative;
    z-index: 10;
    border-radius: 4px; /* Slight radius */
}

/* Ensure image stays behind */
.global-perspective-img {
    position: relative;
    z-index: 1;
}

/* Why Section Styles */
#why-section h6 {
    font-size: 1.3rem;
    color: #000;
}

#why-section p {
    font-size: 0.9rem;
    color: #555;
}

/* Specific Link Styling for 'Location' */
.btn-link {
    font-size: 0.9rem;
    transition: opacity 0.3s;
}
.btn-link:hover {
    opacity: 0.7;
    color: var(--primary-color) !important;
}

/* Responsive adjustment for the overlapping card */
@media (max-width: 991px) {
    .perspective-card {
        margin-top: 0; /* On mobile, stack it normally instead of overlapping */
        margin-bottom: 2rem;
        box-shadow: none !important;
        border: 1px solid #eee;
    }
    
    #why-section {
        padding-top: 60px !important;
    }
    
    .global-perspective-img img {
        height: 300px !important; /* Smaller image on mobile */
    }
}

.contactusWrap{
	height:280px;
	background-color: #002f0b;
	padding-top:60px;
}

.contactusWrap p{
	font-size:18px;
	max-width: 600px; 
	line-height: 1.6;
}

.contactusWrap a{
	color:#fff;
}

.companyAddressWrap p{
	font-size:1.2rem;
}

.social-btn {
    width: 32px;
    height: 32px;
    background-color: #000;
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9rem;
    transition: transform 0.2s, background-color 0.2s;
}

.social-btn:hover {
    transform: translateY(-2px);
    background-color: var(--primary-color);
}


.footer-links a {
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--primary-color) !important;
}


.link-hover-primary {
    transition: color 0.2s;
}

.link-hover-primary i{
	color:#0E7326!important;
}
.link-hover-primary:hover {
    color: v0ar(--primary-color) !important;
}


.footer-links i {
    font-size: 0.9em; 
    opacity: 0.9;
}


.valuePagewrap,.coreServicesPage,.contactPage,.whyPageWrap{
	padding-bottom:240px;
}

.whyPageWrap{
	padding-top:160px;
}


.whyPageWrap .whyInner{
	background: #F0F9FF;
	height:210px;
	padding:30px 20px;
}


@media (max-width: 1480px) {
	.navbar-nav .nav-link {
		font-size: 0.9rem;
	    margin: 0px;
	}
	.mb-5 {
	    margin-bottom: 2rem!important;
	}
	.hero-title {
	    font-size: 2.6rem;
	}
	#value-section .value-card-title {
	    font-size: 1.2rem;
	}
	#vision-section h3 {
	    font-size: 1.3rem;
	    line-height: 1.4;
	}
	#vision-section h5 {
	    font-size: 1.1rem;
	}
	.mission-content h4 {
	    font-size: 1.2rem;
	}
}

@media (max-width: 991px) {
	 ul.navbar-nav{
		margin-bottom:30px!important;
	}
	
	 #hero-section {
        min-height: auto;
        padding: 80px 0;
        text-align: center; 
    }
	.hero-bg-overlay {
        background-position: center; 
    }
    .hero-bg-overlay::after {
        width: 100%;
        background: rgba(3, 18, 39, 0.7); 
    }
    .hero-title {
        font-size: 2.2rem; 
    }
	
	.jumbotroeBannerKv {
	    height: 210px;
	}
	.jumbotroeBannerKv h1 {
	    font-size: 28px;
	}
	.jumbotroeBannerKv .jumbotron {
	    align-items: flex-end;
	    padding-bottom: 60px;
		padding-left:15px;
	}
	
	.section-padding {
	    padding-top: 60px;
	    padding-bottom: 60px;
		padding-left:15px;
		padding-right:15px;
	}
	
	.valuePagewrap,.coreServicesPage,.contactPage,.whyPageWrap{
		padding-top:80px;
		padding-bottom:140px;
	}
	
	.globalPerspectiveWrap a {
	    font-size: 1rem;
	}
	
	.contactusWrap {
	    height: 320px;
		padding:40px 20px;
	}
	
	.contactusWrap p {
	    font-size: 16px;
	}
	
	
    
    .perspective-card {
        margin-top: 0; 
        margin-bottom: 2rem;
        box-shadow: none !important;
        border: 1px solid #eee; 
    }
    .global-perspective-img img {
        height: 300px !important; 
    }

    /* 4. Vision & Mission */
    #vision-section h2 { font-size: 2rem; }
    #vision-section h3 { font-size: 1.25rem; }
    
    #mission-section { padding: 60px 0; min-height: auto; }
    .mission-title { font-size: 2rem; margin-bottom: 2rem !important; }
    .mission-content h4 { font-size: 1.1rem; }
    .mission-content br { display: none;}
	
	.perspective-card {
	    padding: 2rem!important;
	}

    /* 5. Services  */
    .service-card h5 { min-height: auto; margin-bottom: 10px; }
    
    /* 6. Footer */
	footer .container{
		padding:0px 15px;
	}
	
    footer#contact .col-lg-4 { margin-top: 20px; text-align: left !important; }
    footer#contact .social-icons { justify-content: flex-start !important; margin-top: 20px; }
}