/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f4f6f9;
    margin: 0;
    padding: 0;
    /* padding-top: 110px; */
}

/* --- Body Wrapper Structure --- */
.body-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* overflow-x: hidden; സൈഡിലേക്ക് സ്ക്രോൾ വരുന്നത് തടയാൻ */
}
.body-wrapper{
    overflow-x:hidden;
    overflow-y:hidden;
}
/* Navigation Row Layout */

/* .nav-section{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all .3s ease;
}

.nav-section.scrolled nav{
    padding: 12px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-section nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #ffffff; 
    position: relative;
    z-index: 1000;
}

.nav-section nav{
    border-radius:20px;
    margin-top:20px;
    padding:20px 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
} */

/* Navbar എപ്പോഴും ടോപ്പിൽ ഫിക്സ്ഡ് ആയിരിക്കും */
.nav-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 0;
    background: transparent; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}



/* 1. DEFAULT STYLE (ഇത് മൊബൈൽ ഫോണുകൾക്ക് വേണ്ടിയുള്ളതാണ് - Mobile First) */
.nav-section nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px; /* മൊബൈലിൽ ചെറിയ ബോർഡർ റേഡിയസ് */
    margin: 10px auto 0 auto; /* മൊബൈലിൽ മുകളിലെ ഗ്യാപ്പ് കുറയ്ക്കുന്നു */
    max-width: 94%; /* മൊബൈൽ സ്ക്രീനിന്റെ 94% വീതി എടുക്കും (വശങ്ങളിൽ ചെറിയ മാർജിൻ) */
    padding: 20px 30px; /* മൊബൈലിന് പറ്റിയ പാഡിംഗ് */
    background-color: transparent; 
    box-shadow: none;
    transition: all 0.4s ease;
}

/* മൊബൈലിൽ സ്ക്രോൾ ചെയ്യുമ്പോൾ */
.nav-section.scrolled nav {
    margin-top: 5px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}


/* 2. TABLET VIEW (സ്ക്രീൻ സൈസ് 768px-ൽ കൂടുമ്പോൾ) */
@media (min-width: 768px) {
    .nav-section nav {
        max-width: 92%; /* ടാബ്‌ലറ്റിൽ അല്പം കൂടി മാർജിൻ കൂട്ടുന്നു */
        padding: 15px 25px;
        margin-top: 15px;
    }
    .nav-section.scrolled nav {
        margin-top: 8px;
    }
}


/* 3. DESKTOP/LAPTOP VIEW (സ്ക്രീൻ സൈസ് 1024px-ൽ കൂടുമ്പോൾ) */
@media (min-width: 1024px) {
    .nav-section {
        top: 45px; 
    }
    .nav-section nav {
        max-width: 67%; /* വലിയ സ്ക്രീനിൽ നല്ല പ്രീമിയം ലുക്ക് കിട്ടാൻ വശങ്ങളിൽ നല്ല മാർജിൻ നൽകുന്നു */
        padding: 20px 30px;
        margin-top: 20px;
        border-radius: 20px;
    }
    .nav-section.scrolled nav {
        margin-top: 10px;
        padding: 12px 30px;
    }
}

@media (min-width: 576px) {
    .nav-section {
        top: 45px; /* ടോപ്പ് ബാർ ചെറുതാകുന്നതു കൊണ്ട് നാവ്ബാർ കുറച്ചുകൂടി മുകളിലേക്ക് കയറ്റി നിർത്തുന്നു */
    }
}

.nav-logo img {
    height: 40px; 
    width: auto;
    display: block;
}

.nav-logo img {
    height: 40px; 
    width: auto;
    display: block;
}

/* Three-bar Toggler Button */
.nav-toggler {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    padding: 0;
    z-index: 1001;
}

.nav-toggler .bar {
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Button Animation when Active (X Shape) */
.nav-toggler.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.nav-toggler.active .bar:nth-child(2) {
    opacity: 0;
}
.nav-toggler.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}



/* കസ്റ്റം ത്രീ-ബാർ ഹാംബർഗർ ബട്ടൺ സ്റ്റൈൽ */
.custom-toggler {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    padding: 0;
}

.custom-toggler .bar {
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* --- Animated More Button Styles --- */
.more-button {
    background-color: #5c67ff;
    box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: .2s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: relative;
    z-index: 10005 !important; /* Offcanvas-ന് മുകളിൽ വരാൻ */
}


.more-button:hover, 
.more-button:focus {
    box-shadow: 0px 0px 0px 8px rgba(92, 103, 255, 0.3);
    background-color: #4a56e2;
}

.more-button:focus { 
    outline: 0; 
}

.menu-icon-wrapper {
    border-radius: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 330ms ease-out;
}

.menu-icon-line {
    background-color: #fca72a;
    border-radius: 2px;
    width: 100%;
    height: 2px;
}

.menu-icon-line.half { 
    width: 50%; 
}

.menu-icon-line.first {
    transition: transform 300ms cubic-bezier(0.52, -0.80, 0.52, 0.52);
    transform-origin: right;
}

.menu-icon-line.last {
    align-self: flex-end;
    transition: transform 300ms cubic-bezier(0.52, -0.80, 0.52, 0.52);
    transform-origin: left;
}

/* --- Active/Open State Animations --- */
.more-button.active .menu-icon-wrapper {
    transform: rotate(-45deg);
}

.more-button.active .menu-icon-line.first {
    transform: rotate(-90deg) translateX(1px);
}

.more-button.active .menu-icon-line.last {
    transform: rotate(-90deg) translateX(-1px);
}



/* ഓഫ്‌ക്യാൻവാസ് ബാക്ക്ഗ്രൗണ്ട് നിർബന്ധമായും വെള്ളയാക്കാൻ */
.offcanvas.offcanvas-end {
    background-color: #ffffff !important;
    width: 250px !important;

    z-index: 100005 !important;
}

/* Offcanvas ബോക്സ് എപ്പോഴും എല്ലാത്തിനും മുകളിൽ വരാൻ */
.offcanvas {
    z-index: 10000 !important; 
}

/* Offcanvas ഓപ്പൺ ആകുമ്പോൾ വരുന്ന ബ്ലാക്ക് ബാക്ക്ഡ്രോപ്പ് ഷേഡ് കറക്റ്റ് ആകാൻ */
.offcanvas-backdrop {
    /* z-index: 9998 !important; */
    z-index: 100000 !important;
}



/* ഉള്ളിലെ മെനു ലിങ്കുകൾ പൂർണ്ണമായും കറുപ്പ് നിറത്തിൽ ദൃശ്യമാക്കുന്നു */
.menu-links a {
    color: #1a1a1a !important; 
    font-size: 1.25rem !important; /* അക്ഷരങ്ങൾക്ക് നല്ല വലിപ്പം നൽകാൻ */
    font-weight: 600 !important;   /* ബോൾഡ് ലുക്ക് */
    display: block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Hover ചെയ്യുമ്പോൾ ബ്രാൻഡ് നീല നിറത്തിലേക്ക് മാറാൻ */
.menu-links a:hover {
    color: #5c67ff !important;
    padding-left: 10px !important;
}

.menu-links a.active{
    color:#5c67ff !important;
    font-weight:700 !important;
    position:relative;
}

.menu-links a.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-5px;
    width:30px;
    height:2px;
    background:#5c67ff;
}

/* --- Premium About Section Styles --- */

.about-section {
    overflow: hidden;
}

/* തരംതിരിച്ചു കാണിക്കാനുള്ള ചെറിയ ബാഡ്ജ് സ്റ്റൈൽ */
.section-badge {
    color: #5c67ff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    padding-left: 30px;
}

/* ബാഡ്ജിന് മുന്നിലുള്ള ചെറിയ ലൈൻ */
.section-badge::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background-color: #5c67ff;
}

/* ആദ്യത്തെ പാരഗ്രാഫ് കുറച്ചുകൂടി പ്രീമിയം ആയി കാണിക്കാൻ */
.about-content-area .lead-text {
    font-size: 1.15rem;
    color: #2d3748;
    font-weight: 500;
    line-height: 1.7;
}

/* രണ്ടാമത്തെ പാരഗ്രാഫ് */
.about-content-area .sub-text {
    font-size: 0.98rem;
    line-height: 1.8;
    color: #718096;
}

/* ചിത്രത്തിന് ഒരു ചെറിയ ബോക്സ് ലുക്കും ആനിമേഷനും നൽകാൻ */
.about-img-wrapper {
    position: relative;
    transition: transform 0.4s ease;
}

.about-img-wrapper:hover {
    transform: translateY(-5px); /* ഹോവർ ചെയ്യുമ്പോൾ ചിത്രം ചെറുതായി മുകളിലേക്ക് ഉയരും */
}

/* കസ്റ്റം പ്രീമിയം ബട്ടൺ ഡിസൈൻ */
.custom-about-btn {
    background-color: #fca72a !important;
    color: #ffffff !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-radius: 50px !important; /* ക്യാപ്സ്യൂൾ ആകൃതി */
    border: none !important;
    box-shadow: 0 4px 14px rgba(92, 103, 255, 0.4) !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease !important;
}

/* ബട്ടൺ ഹോവർ ഇഫക്റ്റ് */
.custom-about-btn:hover {
    background-color: #ca8722 !important;
    box-shadow: 0 6px 20px rgba(92, 103, 255, 0.6) !important;
    transform: translateX(3px); /* ചെറുതായി വലത്തോട്ട് നീങ്ങും */
}

.custom-about-btn svg {
    transition: transform 0.3s ease;
}

.custom-about-btn:hover svg {
    transform: translateX(4px); /* ബട്ടണിലെ അമ്പ് ചിഹ്നം ഹോവർ ചെയ്യുമ്പോൾ മുന്നോട്ട് നീങ്ങും */
}

/* റെസ്പോൺസീവ് അഡ്ജസ്റ്റ്മെന്റ് (മൊബൈൽ സ്ക്രീനുകൾക്ക്) */
@media (max-width: 991px) {
    .about-content-area {
        text-align: left; /* ചെറിയ സ്ക്രീനുകളിലും പ്രൊഫഷണൽ ലുക്ക് നിലനിർത്താൻ */
        margin-top: 20px;
    }
}

/* --- Premium What We Offer Styles --- */

.what-we-offer-section {
    background-color: transparent; 
}

/* കസ്റ്റം പ്രീമിയം കാർഡ് ഡിസൈൻ */
.premium-service-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ഇമേജ് ബോക്സും അതിന്റെ ആനിമേഷനും */
.service-img-box {
    position: relative;
    width: 100%;
    height: 220px; /* എല്ലാ ചിത്രങ്ങളും ഒരേ ഹൈറ്റിൽ വരാൻ */
    overflow: hidden;
    background-color: #e2e8f0;
}

.service-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* കാർഡിന്റെ ഉള്ളിലെ കണ്ടെന്റ് ഏരിയ */
.service-body {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.premium-service-card .offer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

/* റൗണ്ട് അമ്പ് ബട്ടൺ സ്റ്റൈൽ */
.service-arrow-btn {
    width: 40px;
    height: 40px;
    background-color: #f1f5f9;
    color: #5c67ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.service-arrow-btn svg {
    transition: transform 0.3s ease;
}

/* --- Hover Effects (കാർഡിൽ തൊടുമ്പോൾ ഉണ്ടാകുന്ന മാറ്റങ്ങൾ) --- */

.premium-service-card:hover {
    transform: translateY(-8px); /* കാർഡ് ചെറുതായി മുകളിലേക്ക് ഉയരും */
    box-shadow: 0 12px 30px rgba(92, 103, 255, 0.12); /* നീല കലർന്ന മനോഹരമായ നിഴൽ */
}

/* ഹോവർ ചെയ്യുമ്പോൾ ചിത്രം സൂം ആകാൻ */
.premium-service-card:hover .service-img-box img {
    transform: scale(1.08);
}

/* ഹോവർ ചെയ്യുമ്പോൾ ടൈറ്റിൽ ബ്രാൻഡ് കളർ ആകാൻ */
.premium-service-card:hover .offer-title {
    color: #5c67ff;
}

/* ഹോവർ ചെയ്യുമ്പോൾ ബട്ടൺ ആക്റ്റീവ് ആകാൻ */
.premium-service-card:hover .service-arrow-btn {
    background-color: #5c67ff;
    color: #ffffff;
}

/* ഹോവർ ചെയ്യുമ്പോൾ അമ്പ് ചിഹ്നം ചെറുതായി വലത്തോട്ട് നീങ്ങാൻ */
.premium-service-card:hover .service-arrow-btn svg {
    transform: scale(1.2) translateX(1px);
}

/* റെസ്പോൺസീവ് സ്ക്രീനുകൾക്ക് വേണ്ടിയുള്ള ചെറിയ മാറ്റം */
@media (max-width: 576px) {
    .service-body {
        padding: 20px;
    }
    .service-img-box {
        height: 180px;
    }
}

/* --- Premium Why Choose Us Styles --- */

/* ചിത്രത്തിന്റെ ബോക്സ് സ്റ്റൈൽ */
.why-img-wrapper img {
    width: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}

/* ഓരോ ഫീച്ചർ ബോക്സും */
.premium-choose-box {
    padding: 20px;
    border-radius: 12px;
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 3px solid transparent; /* ഹോവർ ചെയ്യുമ്പോൾ കാണാനുള്ള വര */
}

/* നമ്പറുകളെ വലിയ പ്രീമിയം ഐക്കണുകളാക്കി മാറ്റുന്ന കസ്റ്റം സ്റ്റൈൽ */
.large-number-icon {
    font-size: 3rem; /* വലിയ വലിപ്പം */
    font-weight: 800;
    color: #e2e8f0; /* തുടക്കത്തിൽ നേരിയ ഗ്രേ നിറം (Premium Minimalist Look) */
    line-height: 1;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    user-select: none;
}

/* ടൈറ്റിൽ */
.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

/* വിവരണം */
.feature-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Interactive Hover Effects --- */

/* യൂസർ ഒരു ബോക്സിന് മുകളിലേക്ക് മൗസ് കൊണ്ടുവരുമ്പോൾ (Hover ചെയ്യുമ്പോൾ) */
.premium-choose-box:hover {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* നേരിയ പ്രീമിയം ഷാഡോ */
    border-left-color: #5c67ff; /* ഇടത് വശത്ത് ബ്രാൻഡ് നീല വര തെളിയും */
    transform: translateX(5px); /* ചെറുതായി മുന്നോട്ട് നീങ്ങും */
}

/* ഹോവർ ചെയ്യുമ്പോൾ നമ്പർ ഐക്കൺ ബ്രാൻഡ് കളറായി മാറും */
.premium-choose-box:hover .large-number-icon {
    color: #5c67ff;
    transform: scale(1.1); /* നമ്പർ ചെറുതായി വലുതാകും */
    text-shadow: 0 4px 10px rgba(92, 103, 255, 0.2);
}

/* ഹോവർ ചെയ്യുമ്പോൾ ടൈറ്റിൽ കളർ മാറും */
.premium-choose-box:hover .feature-title {
    color: #5c67ff;
}

/* റെസ്പോൺസീവ് (മൊബൈൽ സ്ക്രീനുകളിൽ നമ്പറും ടെക്സ്റ്റും കൃത്യമായി നിൽക്കാൻ) */
@media (max-width: 576px) {
    .premium-choose-box {
        flex-direction: column; /* മൊബൈലിൽ നമ്പർ മുകളിലും ടെക്സ്റ്റ് താഴെയുമായി വരും */
        align-items: flex-start !important;
        padding: 15px;
    }
    .large-number-icon {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }
    .choose-content {
        margin-left: 0 !important;
    }
}

/* --- Premium Transparent Brand Slider Styles --- */

.brands-work-with-section {
    background-color: transparent !important;
    width: 100%;
    overflow: hidden;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* ടിക്കർ വിൻഡോ */
.logo-ticker-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
    padding: 25px 0;
}

/* ഇടത്തോട്ടും വലത്തോട്ടും പോകുമ്പോൾ നേരിയ ഫേഡ് ഇഫക്ട് നൽകാൻ (Premium Look) */
.logo-ticker-wrapper::before,
.logo-ticker-wrapper::after {
    content: "";
    height: 100%;
    position: absolute;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.logo-ticker-wrapper::before {
    left: 0;
    top: 0;
    background: linear-gradient(to right, rgba(244, 246, 249, 0.95) 0%, rgba(244, 246, 249, 0) 100%);
}

/* നിങ്ങളുടെ വെബ്‌സൈറ്റിന്റെ ബോഡി ബാക്ക്ഗ്രൗണ്ട് #f4f6f9 ആയതുകൊണ്ടാണ് മുകളിൽ ആ കളർ നൽകിയത് */
.logo-ticker-wrapper::after {
    right: 0;
    top: 0;
    background: linear-gradient(to left, rgba(244, 246, 249, 0.95) 0%, rgba(244, 246, 249, 0) 100%);
}

/* ലോഗോകൾ അടങ്ങുന്ന ട്രാക്ക് (ഇതാണ് ആനിമേറ്റ് ചെയ്യുന്നത്) */
.logo-ticker-track {
    display: flex;
    width: calc(260px * 12); 
    animation: scrollGovtLogos 30s linear infinite; /* കൂടുതൽ സർക്കാർ വകുപ്പുകൾ ഉള്ളതിനാൽ സ്പീഡ് 30s ആയി ക്രമീകരിച്ചു */
}

/* ഓരോ ലോഗോ ബോക്സും */
.ticker-item {
    width: 260px;
    display: flex;
    flex-direction: column; /* ലോഗോ മുകളിലും പേര് താഴെയും വരാൻ */
    align-items: center;
    justify-content: center;
    gap: 12px; /* ചിത്രവും എഴുത്തും തമ്മിലുള്ള അകലം */
    padding: 0 30px;
}

/* ബ്രാൻഡ് ചിത്രങ്ങളുടെ സ്റ്റൈൽ */
.ticker-item img {
    height: 65px; /* എല്ലാ സർക്കാർ ലോഗോകളും ഒരേ ഉയരത്തിൽ വരാൻ */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* filter: grayscale(100%);  */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.ticker-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b; /* സ്ലേറ്റ് കളർ ടെക്സ്റ്റ് */
    text-align: center;
    transition: color 0.3s ease;
    white-space: nowrap; /* ടെക്സ്റ്റ് രണ്ട് വരിയായി മുറിഞ്ഞുപോകാതിരിക്കാൻ */
}

/* മൗസ് കൊണ്ട് വരുമ്പോൾ ലോഗോകൾ കളറായി മാറാൻ */
.ticker-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-3px); /* ഹോവർ ചെയ്യുമ്പോൾ ലോഗോ ചെറുതായി ഉയരും */
}

/* ഹോവർ ചെയ്യുമ്പോൾ പേരിന്റെ നിറം മാറാൻ */
.ticker-item:hover span {
    color: #5c67ff; /* നമ്മൾ വെബ്‌സൈറ്റിൽ ഉപയോഗിക്കുന്ന ബ്രാൻഡ് ബ്ലൂ */
}

/* മൗസ് മുകളിൽ വെക്കുമ്പോൾ സ്ലൈഡിംഗ് താൽക്കാലികമായി നിൽക്കും */
.logo-ticker-wrapper:hover .logo-ticker-track {
    animation-play-state: paused;
}

/* --- Right to Left Animation Logic --- */
@keyframes scrollGovtLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-260px * 6)); /* ആദ്യത്തെ 6 എണ്ണം കഴിയുമ്പോൾ ട്രാക്ക് റീസെറ്റ് ആകും */
    }
}


/* .premium-hero{
    background:#f8fafc;
    position:relative;
    overflow:hidden;
} */

.premium-hero{
    background:
    radial-gradient(circle at top left,
    rgba(92,103,255,.08),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(252,167,42,.08),
    transparent 35%),

    #f8fafc;

    /* padding-top: 140px; */
}

.hero-badge{
    display:inline-block;
    background:rgba(92,103,255,.1);
    color:#5c67ff;
    padding:8px 16px;
    border-radius:30px;
    font-weight:600;
    font-size:.85rem;
}

.hero-title{
    font-size:3.5rem;
    font-weight:800;
    color:#0f172a;
    line-height:1.2;
}

.hero-description{
    font-size:1.1rem;
    color:#64748b;
    line-height:1.8;
    max-width:600px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.hero-btn-primary{
    background:#5c67ff;
    color:#fff;
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
}

.hero-btn-primary:hover{
    background:#4752e6;
    color:#fff;
}

.hero-btn-secondary{
    border:2px solid #5c67ff;
    color:#5c67ff;
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
}

.hero-btn-secondary:hover{
    background:#5c67ff;
    color:#fff;
}

.hero-features{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.hero-feature{
    font-weight:600;
    color:#0f172a;
}

.hero-image-wrapper{
    position:relative;
}

.hero-image-wrapper img{
    width:100%;
    height:500px;
    object-fit:cover;
}

@media(max-width:768px){

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

    .hero-description{
        font-size:.95rem;
    }

    .hero-image-wrapper{
        margin-top:30px;
    }

    .hero-image-wrapper img{
        height:350px;
    }

    .hero-features{
        flex-direction:column;
        gap:10px;
    }
}

.stats-section{
    margin-top:-70px;
    position:relative;
    z-index:10;
}

.stat-card{
    background:transparent;
    padding:30px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
    margin: 10px;
}

.stat-card:hover{
    transform:translateY(-8px);
}

.stat-card h3{
    font-size:3rem;
    font-weight:800;
    color:#ffffff;
}

.stat-card p{
    margin:0;
    color:#ffffff;
    font-weight:600;
}

/* 
.equipment-section{
    background:#fff;
}

.equipment-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

.equipment-card:hover{
    transform:translateY(-10px);
}

.equipment-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.equipment-card h5{
    padding:20px 20px 10px;
    font-weight:700;
    color:#0f172a;
}

.equipment-card p{
    padding:0 20px 20px;
    color:#64748b;
    margin:0;
} */

/* .cta-section{
    background:#0f172a;
    padding:70px 0;
    color:#fff;
    border-radius:100px;
    margin:50px auto;
}

.cta-section h2{
    font-size:3rem;
    font-weight:700;
}

.cta-section p{
    color:#cbd5e1;
    max-width:700px;
    margin:20px auto;
} */

.cta-btn{
    background:#fca72a;
    color:#fff;
    padding:15px 40px;
    border-radius:50px;
    font-weight:600;
}

.footer-premium{
    background:#edf6ff;
    padding:70px 0 25px;
    border-top:1px solid #dbeafe;
    border-top-left-radius: 40px;  /* മുകളിലെ ഇടത് അറ്റം വളയ്ക്കാൻ */
    border-top-right-radius: 40px; /* മുകളിലെ വലത് അറ്റം വളയ്ക്കാൻ */
}

.footer-logo{
    width:140px;
    background:#ffffff;
    padding:12px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.footer-company-name{
    color:#0f172a;
    font-weight:700;
}

.footer-contact-info p{
    color:#475569;
    margin-bottom:12px;
    font-size:.95rem;
}

.footer-contact-info i{
    color:#5c67ff;
    margin-right:10px;
}

.footer-title{
    font-weight:700;
    color:#0f172a;
    margin-bottom:20px;
}

.footer-links-row{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.footer-links-row a{
    text-decoration:none;
    color:#334155;
    font-weight:600;
    transition:.3s;
}

.footer-links-row a:hover{
    color:#5c67ff;
}

.footer-social-row{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.footer-social-row a{
    width:48px;
    height:48px;
    background:#ffffff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#5c67ff;
    font-size:1.2rem;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.footer-social-row a:hover{
    transform:translateY(-4px);
    background:#5c67ff;
    color:#ffffff;
}

.footer-bottom-bar{
    margin-top:50px;
    padding-top:25px;
    border-top:1px solid #cbd5e1;
    color:#64748b;
    font-size:.9rem;
}

.footer-bottom-bar strong{
    color:#5c67ff;
}

.mission-vision-section{
    background:#f8fafc;
    margin-top: 20px;
    margin-bottom: 20px;
}

.mv-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    height:100%;
    transition:.3s;
    margin: 20px 30px;
}

.mv-card:hover{
    transform:translateY(-8px);
}

.mv-icon{
    width:70px;
    height:70px;
    background:#5c67ff;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    margin-bottom:20px;
}

.mv-icon:hover{
    transform: translateY(-2px);
    background-color: #ca8722;
}

.mv-card h3{
    font-weight:700;
    margin-bottom:15px;
}

.mv-card p{
    color:#64748b;
    line-height:1.8;
}

.core-values-section{
    background:#f8fafc;
}

.value-card{
    background:#ffffff;
    padding:35px;
    border-radius:20px;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s;
}

.value-card:hover{
    transform:translateY(-8px);
}

.value-card h4{
    color:#0f172a;
    font-weight:700;
    margin-bottom:15px;
}

.value-card p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:0;
}

.stats-banner-section{
    padding:80px 0;
}

.stats-banner{
    background: linear-gradient(
        135deg,
        #5c67ff 0%,
        #7c84ff 100%
    );

    border-radius:30px;
    padding:60px 30px;

    box-shadow:
    0 20px 50px rgba(92,103,255,.25);

    position:relative;
    overflow:hidden;
}

.stats-banner::before{
    content:'';
    position:absolute;

    width:300px;
    height:300px;

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

    border-radius:50%;

    top:-120px;
    right:-120px;
}

.stats-banner::after{
    content:'';
    position:absolute;

    width:220px;
    height:220px;

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

    border-radius:50%;

    bottom:-80px;
    left:-80px;
}

.stat-box{
    position:relative;
    z-index:2;
}

.stat-box h2{
    font-size:4rem;
    font-weight:800;
    color:#fff;
    margin-bottom:10px;
}

.stat-box p{
    color:rgba(255,255,255,.9);
    font-size:1rem;
    font-weight:500;
    margin-bottom:0;
}

.stat-box i{
    font-size:2.5rem;
    color:#fff;
    margin-bottom:20px;
    display:block;
}

.work-process-section{
    position: relative;
    background: #f8fafc;
}

/* Center Vertical Line */
.work-process-section::before{
    content:'';
    position:absolute;
    left:50%;
    top:180px;
    width:3px;
    height:calc(100% - 250px);
    background:#fca72a;
    transform:translateX(-50%);
}

.process-row{
    display:flex;
    margin-bottom:60px;
    position:relative;
}

.process-row.left{
    justify-content:flex-start;
}

.process-row.right{
    justify-content:flex-end;
}

.process-card{
    width:45%;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    position:relative;
    transition:.3s;
}

.process-card:hover{
    transform:translateY(-8px);
}

.process-number{
    display:inline-flex;
    width:60px;
    height:60px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fca72a;
    color:#fff;
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:20px;
}

/* Timeline Dots */
.process-row::before{
    content:'';
    position:absolute;
    left:50%;
    top:40px;
    width:20px;
    height:20px;
    background:#fca72a;
    border:5px solid #fff;
    border-radius:50%;
    transform:translateX(-50%);
    box-shadow:0 0 0 5px rgba(255, 198, 92, 0.15);
}

.process-card h4{
    font-weight:700;
    margin-bottom:15px;
}

.process-card p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:0;
}

@media(max-width:768px){

    .work-process-section::before{
        left:25px;
    }

    .process-row{
        justify-content:flex-start !important;
        padding-left:60px;
    }

    .process-row::before{
        left:25px;
    }

    .process-card{
        width:100%;
    }

}

.contact-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s;
}

.contact-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(92,103,255,.15);
}

.contact-card i{
    font-size:2rem;
    color:#5c67ff;
    margin-bottom:15px;
    display:block;
}

.contact-card h5{
    font-weight:700;
    margin-bottom:10px;
}

.contact-card p{
    color:#64748b;
    margin-bottom:0;
}

/* .map-wrapper{
    overflow:hidden;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.map-wrapper iframe{
    width:100%;
    height:500px;
    border:none;
} */


/* മാപ്പ് റാപ്പറിന് പൊസിഷൻ റിലേറ്റീവ് നൽകുന്നു */
.map-wrapper {
    position: relative;
    width: 100%;
    height: 450px;
}

/* മാപ്പിന് മുകളിൽ വരുന്ന ലൈറ്റ് യെല്ലോ ഒവർലേ */
.map-wrapper .map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* നല്ലൊരു ലൈറ്റ് യെല്ലോ ഷേഡ് (നിങ്ങളുടെ ആവശ്യാനുസരണം 0.15 മാറ്റാം) */
    background-color: rgba(250, 235, 136, 0.15); 
    
    /* 🎯 വളരെ പ്രധാനം: ഈ ഷേഡ് കാരണം മാപ്പ് ക്ലിക്ക് ചെയ്യാൻ പറ്റാതെ വരാതിരിക്കാൻ */
    pointer-events: none; 
    
    z-index: 1;
}

/* ഐഫ്രെയിം കറക്റ്റ് ആയി ഫിറ്റ് ആകാൻ */
.map-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.quote-form-card{
    background:#fff;
    padding:50px;
    border-radius:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.quote-form-card h2{
    font-weight:700;
    margin-bottom:30px;
}

.form-control{
    height:55px;
    border-radius:12px;
    border:1px solid #e2e8f0;
}

textarea.form-control{
    height:auto;
}

.quote-btn{
    background:#5c67ff;
    color:#fff;
    border:none;
    padding:14px 40px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.quote-btn:hover{
    transform:translateY(-3px);
}

/* .whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    z-index:9999;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
} */

.contact-cta{
    background: linear-gradient(
        135deg,
        #5c67ff 0%,
        #7c84ff 100%
    );

    padding:80px 30px;
    text-align:center;
    border-radius:30px;

    margin:80px auto;

    color:#ffffff;

    position:relative;
    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(92,103,255,.25);
}

/* Decorative Circles */

.contact-cta::before{
    content:'';
    position:absolute;

    width:250px;
    height:250px;

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

    border-radius:50%;

    top:-100px;
    right:-80px;
}

.contact-cta::after{
    content:'';
    position:absolute;

    width:180px;
    height:180px;

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

    border-radius:50%;

    bottom:-70px;
    left:-50px;
}

.contact-cta h2{
    font-size:2.5rem;
    font-weight:700;
    margin-bottom:15px;
    position:relative;
    z-index:2;
}

.contact-cta p{
    font-size:1.1rem;
    opacity:.9;
    margin-bottom:30px;
    position:relative;
    z-index:2;
}

.contact-cta .btn{
    background:#ffffff;
    color:#5c67ff;
    border:none;

    padding:14px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

    position:relative;
    z-index:2;
}

.contact-cta .btn:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.trust-strip-section{
    padding:40px 0;
}

.trust-strip{
    background:#ffffff;
    border-radius:25px;
    padding:30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;

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

.trust-item{
    display:flex;
    align-items:center;
    gap:12px;

    font-weight:600;
    color:#334155;

    transition:.3s;
}

.trust-item i{
    color:#5c67ff;
    font-size:1.4rem;
}

.trust-item:hover{
    transform:translateY(-3px);
}

@media(max-width:768px){

    .trust-strip{
        flex-direction:column;
        align-items:flex-start;
    }

    .trust-item{
        width:100%;
    }

}

.trust-item{
    position:relative;
    padding-right:25px;
}

.trust-item:not(:last-child)::after{
    content:'';
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);

    width:1px;
    height:25px;

    background:#e2e8f0;
}

.services-highlight-box{
    background:#fff;
    border-radius:25px;
    padding:35px;

    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.highlight-item{
    text-align:center;
}

.highlight-item h3{
    color:#5c67ff;
    font-weight:700;
    font-size:2rem;
    margin-bottom:8px;
}

.highlight-item span{
    color:#64748b;
    font-weight:500;
}

.highlight-item h3 span{
    color:#5c67ff;
}

.services-showcase-section{
    background:#f8fafc;
}

.service-showcase-item{
    padding:40px 0;
}

.service-showcase-img{
    width:100%;
    height:420px;
    object-fit:cover;

    border-radius:25px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.08);

    transition:.4s;
}

.service-showcase-img:hover{
    transform:scale(1.03);
}

.service-number{
    display:inline-flex;

    width:70px;
    height:70px;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#5c67ff;
    color:#fff;

    font-size:1.3rem;
    font-weight:700;

    margin-bottom:20px;
}

.service-showcase-item h3{
    font-size:2rem;
    font-weight:700;
    color:#0f172a;

    margin-bottom:20px;
}

.service-showcase-item p{
    font-size:1rem;
    line-height:1.9;
    color:#64748b;
}

.cta-badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;

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

    font-size:.85rem;
    font-weight:600;
    letter-spacing:1px;

    margin-bottom:20px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.cta-btn-primary,
.cta-btn-secondary{
    padding:14px 30px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.cta-btn-primary{
    background:#fff;
    color:#5c67ff;
}

.cta-btn-secondary{
    background:transparent;
    border:2px solid rgba(255,255,255,.4);
    color:#fff;
}

.cta-btn-primary:hover,
.cta-btn-secondary:hover{
    transform:translateY(-4px);
}

.project-showcase-section{
    padding:100px 0;
}



.project-item{
    background:#fff;
    border-radius:30px;
    padding:40px;
    margin-bottom:40px;
    margin: 5px;
    box-shadow:
    0 10px 40px rgba(0,0,0,.05);
}

.project-item:last-child{
    border-bottom:none;
}

.project-img{
    width:100%;
    height:420px;
    object-fit:cover;

    border-radius:25px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.08);

    transition:.4s;
}

.project-img:hover{
    transform:scale(1.03);
}

.project-location{
    display:inline-block;

    background:#eef2ff;
    color:#5c67ff;

    padding:8px 18px;
    border-radius:50px;

    font-size:.9rem;
    font-weight:600;

    margin-bottom:15px;
}

.project-title{
    font-size:2rem;
    font-weight:700;

    color:#0f172a;

    margin-bottom:20px;
}

.project-desc{
    color:#64748b;
    line-height:1.9;
    font-size:1rem;
}

.projects-section-header{
    text-align:center;
    margin-top: 40px;
    margin-bottom:50px;
}

.project-big-number{
    font-size:8rem;
    font-weight:800;
    line-height:1;
    color:#fca72a;

    margin:20px 0;

    user-select:none;
}

.projects-main-title{
    font-size:3rem;
    font-weight:700;
    color:#0f172a;
}

.projects-main-desc{
    max-width:800px;
    margin:auto;

    color:#64748b;
    line-height:1.9;
}

.project-number{
    font-size:4rem;
    font-weight:800;
    color:#e2e8f0;
    line-height:1;
    margin-bottom:10px;
}

.cta-box{
    background:linear-gradient(
        135deg,
        #5c67ff,
        #7c84ff
    );

    color:#fff;

    padding:70px 40px;

    border-radius:30px;

    text-align:center;

    margin-bottom: 20px;
}

.cta-btn{
    display:inline-block;

    background:#fff;
    color:#5c67ff;

    padding:14px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    margin-top:20px;
}


.blog-card{
    display:block;
    background:#fff;

    border-radius:25px;

    overflow:hidden;

    text-decoration:none;

    transition:.4s;

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

.blog-card img{
    width:100%;
    height:250px;
    object-fit:cover;

    transition:.5s;
}

.blog-content{
    padding:25px;
}

.blog-category{
    display:inline-block;

    padding:6px 14px;

    background:#eef2ff;

    color:#5c67ff;

    border-radius:50px;

    font-size:.8rem;
    font-weight:600;

    margin-bottom:15px;
}

.blog-card h4{
    color:#0f172a;
    font-weight:700;
    line-height:1.5;
}

.blog-card:hover{
    transform:translateY(-10px);
}

.blog-card:hover img{
    transform:scale(1.08);
}

.blog-date{
    font-size:.85rem;
    color:#94a3b8;

    margin-bottom:15px;
}

.blogs-intro-section{
    position:relative;
}

.blogs-bg-text{
    position:absolute;

    top:38%;
    left:50%;

    transform:translate(-50%,-50%);

    font-size:20rem;
    font-weight:800;

    color:#d7e1ff;

    z-index:-1;

    user-select:none;
}


.back-to-blogs{
    text-decoration:none;
    color:#5c67ff;
    font-weight:600;
}

.back-to-blogs:hover{
    color:#3b44d1;
}

.blog-meta{
    display:flex;
    gap:15px;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.blog-category{
    background:#eef2ff;
    color:#5c67ff;
    padding:6px 14px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:600;
}

.blog-date{
    color:#64748b;
    font-size:.9rem;
}

.blog-featured-image{
    transition:.4s ease;
}

.blog-featured-image:hover{
    transform:translateY(-8px);
}

.blog-intro-section{
    position:relative;
    overflow:hidden;
}

.blog-bg-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    font-size:12rem;
    font-weight:800;

    color:#e8eeff;

    z-index:0;

    user-select:none;
}

.blog-intro-section .container{
    position:relative;
    z-index:2;
}

.blog-content-section{
    background:#fff;
}

.blog-content-section p{
    color:#475569;
    font-size:1.05rem;
    line-height:1.9;
    margin-bottom:25px;
}

.content-heading{
    font-size:2rem;
    font-weight:700;
    color:#0f172a;
    margin-bottom:25px;
    margin-top:20px;
}

.blog-highlight-box{
    background:#f8fafc;
    border-left:5px solid #5c67ff;
    padding:30px;
    border-radius:16px;
    margin:40px 0;
}

.blog-highlight-box h5{
    font-weight:700;
    margin-bottom:15px;
}

.blog-highlight-box ul{
    margin:0;
    padding-left:20px;
}

.blog-highlight-box li{
    margin-bottom:10px;
    color:#475569;
}

.key-takeaways-section{
    background:#f8fafc;
}

.takeaways-card{
    background:#fff;
    padding:50px;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.takeaway-item{
    text-align:center;
}

.takeaway-number{
    font-size:3rem;
    font-weight:800;
    color:#5c67ff;
    opacity:.15;
    margin-bottom:15px;
}

.takeaway-item h5{
    font-weight:700;
    margin-bottom:10px;
}

.takeaway-item p{
    color:#64748b;
    margin-bottom:0;
}

.blog-image-caption{
    text-align:center;
    font-size:.9rem;
    color:#64748b;
    margin-top:-15px;
    margin-bottom:40px;
}

.blog-footer-action a{
    text-decoration: none !important;
}

#site-loader{
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: .5s ease;
}

#site-loader.hide{
    opacity: 0;
    visibility: hidden;
}

.circle-loader{
    width: 80px;
    height: 80px;
    border: 6px solid #FFD43B;   /* Yellow */
    border-top: 6px solid #0D6EFD; /* Blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.dual-loader{
    position: relative;
    width: 90px;
    height: 90px;
}

.ring{
    position: absolute;
    border-radius: 50%;
    border-style: solid;
}

.ring-blue{
    width: 90px;
    height: 90px;
    border-width: 5px;
    border-color: #0D6EFD transparent #0D6EFD transparent;
    animation: spin 1.2s linear infinite;
}

.ring-yellow{
    width: 60px;
    height: 60px;
    top: 15px;
    left: 15px;
    border-width: 5px;
    border-color: #FFD43B transparent #FFD43B transparent;
    animation: spinReverse 1s linear infinite;
}

@keyframes spin{
    100%{
        transform: rotate(360deg);
    }
}

@keyframes spinReverse{
    100%{
        transform: rotate(-360deg);
    }
}




/* Hero Section Outer Style */
.image-hero {
    /* Background image set cheyyunnu */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../assets/images/hero.jpeg');    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Screen full size aakan */
    min-height: 100vh; 
    width: 100%;
    margin: 0;
    padding: 0;
    
    /* Content centre-il varuthaan */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container & Text Style */
.hero-content {
    text-align: center;
    color: #ffffff;
    max-width: 800px;
    padding: 0 20px; /* Mobile screen-il text margin vittu nilkaan */
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Optional Button Style */
.btn-hero {
    display: inline-block;
    padding: 12px 30px;
    background-color: #5c67ff; /* Ningalude theme-n anusarichulla color nalkaam */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.btn-hero:hover {
    background-color: #2d38ca;
}

/* Top Contact Bar Style */
.hero-banner-contact {
    background-color: #111111; /* പക്കാ ബ്ലാക്ക് ബാക്ക്ഗ്രൗണ്ട് */
    color: #ffffff; /* വൈറ്റ് ടെക്സ്റ്റ് */
    padding: 14px 0;
    font-size: 15px; /* ചെറിയ അക്ഷരങ്ങൾ (ടോപ്പ് ബാറിന് ഇതാണ് ഭംഗി) */
    font-weight: 400;
    width: 100%;
    position: relative;
    z-index: 10000; /* ഹെഡറിന് മുകളിൽ നിൽക്കാൻ */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* ലൈറ്റ് ബോർഡർ */
}

/* ഐക്കണുകൾക്ക് ചെറിയൊരു ഹൈലൈറ്റ് കളർ (Optional) */
.hero-banner-contact i {
    font-size: 18px;
    color: #ffffff; /* നിങ്ങളുടെ തീം കളർ എന്താണോ അത് ഇവിടെ നൽകാം, അല്ലെങ്കിൽ #fff ഇടാം */
}

.hero-banner-contact span {
    opacity: 0.9;
}


.home-page .nav-section {
    position: absolute; /* ഹീറോ ഇമേജിന് മുകളിലേക്ക് കയറി നിൽക്കാൻ */
    top: 110px; /* മൊബൈലിൽ ടോപ്പ് ബാറിന് താഴെ വരാൻ */
    left: 0;
}

/* ഹോം പേജിൽ സ്ക്രോൾ ചെയ്യുമ്പോൾ */
.home-page .nav-section.scrolled {
    position: fixed;
    top: 0 !important;
}

/* ടാബ്‌ലറ്റിലും കമ്പ്യൂട്ടറിലും ഹോം പേജിലെ നാവ്ബാർ പൊസിഷൻ */
@media (min-width: 576px) {
    .home-page .nav-section {
        top: 45px; /* ടോപ്പ് ബാർ സിംഗിൾ ലൈൻ ആകുമ്പോൾ കുറച്ചു മുകളിലേക്ക് കയറുന്നു */
    }
}

/* ഈ പേജിൽ നാവ്ബാർ പേജിന്റെ ഒപ്പത്തിനൊപ്പം സാധാരണ രീതിയിൽ നിൽക്കാൻ */
.normal-page .nav-section {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: transparent; /* ബാക്ക്ഗ്രൗണ്ട് വേണമെങ്കിൽ #ffffff നൽകാം */
}

/* നാവ്ബാർ കഴിഞ്ഞ് താഴെയുള്ള കണ്ടന്റിലേക്ക് നല്ലൊരു ഗ്യാപ്പ് (Spacing) വരാൻ */
.normal-page .body-wrapper {
    margin-top: 40px; /* 👈 ഈ ഗ്യാപ്പ് കൂട്ടണമെങ്കിൽ 60px ഓ 80px ഓ ആക്കാം */
}

/* ഈ പേജിലും സ്ക്രോൾ ചെയ്യുമ്പോൾ നാവ്ബാർ ടോപ്പിൽ ഫിക്സ്ഡ് ആയി ഒട്ടിനിൽക്കാൻ */
.normal-page .nav-section.scrolled {
    position: fixed !important;
    top: 0 !important;
}

/* സ്റ്റിക്കി ആക്ഷൻ ബോക്സ് സ്ക്രീനിന്റെ ഇടതുവശത്ത് മധ്യത്തിലാക്കാൻ */
.left-sticky-actions {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    /* gap: 4px;  */
    z-index: 999999 !important;
}

/* രണ്ട് ബട്ടണുകളുടെയും പൊതുവായ സ്റ്റൈൽ */
.sticky-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 50px;
    color: #ffffff !important;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 1.2rem;
    position: relative;
    transition: all 0.3s ease-in-out;
    border-radius: 0 4px 4px 0;
}

/* വാട്സാപ്പ്, ഫോൺ ബട്ടണുകളുടെ കളറുകൾ */
.whatsapp-btn {
    background-color: #25D366;
}
.phone-btn {
    background-color: #00b894; /* ഫോൺ ബട്ടന്റെ പച്ചപ്പ് കലർന്ന നീല നിറം */
}

/* ഹോവർ ചെയ്യുമ്പോൾ ബട്ടൺ ബോക്സിന് വരുന്ന മാറ്റം */
.sticky-btn:hover {
    box-shadow: 2px 4px 12px rgba(0,0,0,0.25);
}

/* രണ്ട് ബട്ടണിലെയും ടെക്സ്റ്റ് സ്ട്രിപ്പുകളുടെ പൊതുവായ സ്റ്റൈൽ (തുടക്കത്തിൽ ഒളിപ്പിച്ചു വെക്കുന്നു) */
.sticky-btn .btn-text {
    position: absolute;
    left: 45px; /* ഐക്കൺ ബോക്സിന്റെ വലതുവശത്ത് ഒട്ടിനിൽക്കാൻ */
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-20px); /* ഉള്ളിൽ നിന്ന് പുറത്തേക്ക് വരുന്ന ആനിമേഷന് വേണ്ടി */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
}

/* ഓരോ ബട്ടണിന്റെയും സ്ട്രിപ്പിന് അതിന്റെ തന്നെ ബാക്ക്ഗ്രൗണ്ട് കളർ നൽകുന്നു */
.whatsapp-btn .btn-text {
    background-color: #25D366;
}
.phone-btn .btn-text {
    background-color: #00b894;
}

/* ഏത് ബട്ടണിൽ മൗസ് വെച്ചാലും (Hover) അതിലെ ടെക്സ്റ്റ് പുറത്തേക്ക് വരാൻ */
.sticky-btn:hover .btn-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* ഫുൾ വിഡ്ത്ത് ബാനർ സെറ്റിങ്സ് */
.colored-stats-fullwidth .stats-banner-bg {
    width: 100%; /* 👈 ഫോട്ടോ 100% വിഡ്ത്ത് ആക്കാൻ */
    /* ഫോട്ടോയുടെ പാത്ത് നിങ്ങളുടെ ഫോൾഡർ അനുസരിച്ച് മാറ്റുക */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../assets/images/banner-background.jpeg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px; /* ബാനറിന് അത്യാവശ്യം നല്ലൊരു ഉയരം നൽകാൻ */
    display: flex;
    align-items: center;
    margin-top: 5px;
}

/* EXPLORE OUR EXPERT - ചെറിയ ടെക്സ്റ്റ് */
.colored-stats-fullwidth .stats-title-block .sub-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffb400; /* ആ മഞ്ഞ/ഓറഞ്ച് ലൈൻ നിറം */
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Our Business Statistics - വലിയ മെയിൻ ഹെഡിംഗ് (Boxy Type) */
.colored-stats-fullwidth .stats-title-block .main-title {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem; /* ഫുൾ സ്ക്രീൻ ആയതുകൊണ്ട് അക്ഷരങ്ങൾക്ക് നല്ല വലിപ്പം നൽകി */
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
    color: #ffffff;
}

/* പഴയ മൊബൈൽ അഡ്ജസ്റ്റ്മെന്റ് മാറ്റി പകരം ഇത് നൽകുക */
@media (max-width: 767px) {
    .colored-stats-fullwidth .stats-banner-bg {
        min-height: auto; /* കണ്ടന്റ് അനുസരിച്ച് ഹൈറ്റ് തനിയെ കൂടാൻ */
        padding: 50px 20px !important; /* മൊബൈലിൽ ഉൾവശത്ത് നല്ലൊരു സ്പേസ് നൽകാൻ */
    }
    
    .colored-stats-fullwidth .stats-title-block .main-title {
        font-size: 2.2rem; /* മൊബൈലിൽ അക്ഷരങ്ങൾ ചെറുതാക്കുന്നു */
    }
    
    .colored-stats-fullwidth .stats-title-block {
        margin-bottom: 35px; /* ഹെഡിംഗും താഴെയുള്ള സ്റ്റാറ്റുകളും തമ്മിൽ നല്ലൊരു അകലം */
    }
    
    .colored-stats-fullwidth .stat-divider {
        border-right: none !important; /* മൊബൈലിൽ സൈഡിലെ വെർട്ടിക്കൽ വര ഒഴിവാക്കുന്നു */
        border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* അതിനുപകരം സ്റ്റാറ്റുകൾക്ക് അടിയിൽ നേർത്തൊരു വര */
        padding-bottom: 20px;
    }
}

/* Scroll to Top Button Styling */
#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999; /* എപ്പോഴും എല്ലാത്തിനും മുകളിൽ നിൽക്കാൻ */
    border: none;
    outline: none;
    background-color: #3e30ff; /* 👈 നിങ്ങളുടെ തീം ഡാർക്ക് റെഡ് കളർ */
    color: white;
    cursor: pointer;
    padding: 0;
    width: 45px;
    height: 45px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ബോക്സി ലുക്കിന് വേണ്ടി ഷാർപ്പ് കോണുകൾ */
    border-radius: 4px; 
    
    /* തുടക്കത്തിൽ ബട്ടൺ ഒളിപ്പിച്ചു വെക്കുന്നു */
    opacity: 0;
    visibility: hidden;
    
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ഹോവർ ചെയ്യുമ്പോൾ ചെറിയൊരു ആനിമേഷൻ */
#scrollToTopBtn:hover {
    background-color: #ffb400; /* മുകളിലേക്ക് പോകുമ്പോൾ ആ ചെറിയ മഞ്ഞ കളറിലേക്ക് മാറുന്നു */
    color: #000000;
    transform: translateY(-5px); /* മുകളിലേക്ക് ചെറുതായി പൊന്തി നിൽക്കാൻ */
}

/* ബട്ടൺ കാണിക്കേണ്ട സമയത്ത് ആഡ് ചെയ്യാനുള്ള ക്ലാസ് */
#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
}

/* .processes-card{
    width:100%;
    height:100%;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    position:relative;
    transition:.3s;
}

.processes-card:hover{
    transform:translateY(-8px);
} */

.process-number{
    display:inline-flex;
    width:60px;
    height:60px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fca72a;
    color:#fff;
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:20px;
}

.work-processes-section{
    position: relative;
}

.processes-row{
    position: relative;
}

/* Center Line */
.processes-row::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:4px;
    background:#fca72a;
    transform:translateX(-50%);
    z-index:0;
}

.processes-row>.col-md-6{
    position:relative;
}

/* Cards */
.processes-card{
    position:relative;
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;
}

/* LEFT Cards */
/* .processes-row>.col-md-6:nth-child(odd) .processes-card::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:#fca72a;
    border:5px solid #fff;
    border-radius:50%;
    top:45px;
    right:-52px;
    box-shadow:0 0 0 5px rgba(252,167,42,.15);
} */

/* RIGHT Cards */
/* .processes-row>.col-md-6:nth-child(even) .processes-card::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:#fca72a;
    border:5px solid #fff;
    border-radius:50%;
    top:45px;
    left:-52px;
    box-shadow:0 0 0 5px rgba(252,167,42,.15);
} */


/* Typography */
.processes-card h4{
    font-weight:700;
    margin-bottom:15px;
}

.processes-card p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:0;
}

@media (max-width:768px){

    .processes-card{
        padding:25px 20px 25px 70px;
    }

    .processes-row>.col-md-6:nth-child(odd) .processes-card::after,
    .processes-row>.col-md-6:nth-child(even) .processes-card::after{
        left:-36px;
        right:auto;
    }

}

.gallery-bg-text{
    position:absolute;

    top:20%;
    left:50%;

    transform:translate(-50%,-50%);

    font-size:20rem;
    font-weight:800;

    color:#d7e1ff;

    z-index:-1;

    user-select:none;
}

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    cursor:pointer;
}

.gallery-card img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:.6s ease;
}

/* Dark Gradient */
/* .gallery-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.15),
        transparent);
    opacity:0;
    transition:.5s;
    z-index:1;
} */


/* Hover */
.gallery-card:hover img{
    transform:scale(1.12);
}

.gallery-card:hover::before{
    opacity:1;
}

.gallery-card:hover{
    opacity:1;
    transform:translateY(0);
}

.gallery-card:hover{
    transform:translateY(-10px);
    transition:.4s;
}

@media(max-width:768px){

    .gallery-card img{
        height:280px;
    }

    .gallery-bg-text{
        font-size:5rem;
    }

}

@media (min-width:768px) and (max-width:1024px){
    .gallery-card img{
        height:300px;
    }

    .gallery-bg-text{
        font-size:12rem;
    }
}