/* =========================================================
   MANJUNATHA ENTERPRISES
   MAIN WEBSITE STYLE
   LIGHT BLUE + ORANGE THEME
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --blue-dark: #12395b;
    --blue: #1976a8;
    --blue-medium: #2388b8;

    --blue-light: #eaf7fc;
    --blue-soft: #f4fbfe;

    --orange: #f28c28;
    --orange-dark: #dc7417;
    --orange-light: #fff4e8;

    --white: #ffffff;

    --text-dark: #172b3a;
    --text: #40566a;
    --text-light: #6b7c8c;

    --border: #dcebf2;

    --shadow-sm:
        0 4px 14px rgba(18, 57, 91, 0.08);

    --shadow:
        0 10px 30px rgba(18, 57, 91, 0.10);

    --shadow-lg:
        0 20px 50px rgba(18, 57, 91, 0.15);

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;

}


/* =========================================================
   GLOBAL
========================================================= */

html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text-dark);

    background: var(--white);

    line-height: 1.6;

}


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

::selection {

    background: var(--orange);

    color: var(--white);

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 8px;

}


::-webkit-scrollbar-track {

    background: var(--blue-soft);

}


::-webkit-scrollbar-thumb {

    background: var(--blue);

    border-radius: 20px;

}


::-webkit-scrollbar-thumb:hover {

    background: var(--blue-dark);

}


/* =========================================================
   LINKS
========================================================= */

a {

    text-decoration: none;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border 0.3s ease,
        transform 0.3s ease;

}


/* =========================================================
   IMAGES
========================================================= */

img {

    max-width: 100%;

    height: auto;

    display: block;

}


/* =========================================================
   CONTAINER
========================================================= */

.container-main {

    width: min(1180px, 92%);

    margin-left: auto;

    margin-right: auto;

}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(255, 255, 255, 0.96);

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

    backdrop-filter: blur(10px);

    transition:
        box-shadow 0.3s ease;

}


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

.logo-box {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--blue-dark);

    color: var(--white);

    border-radius: 10px;

}


.logo-title {

    color: var(--blue-dark);

    font-weight: 800;

    letter-spacing: -0.3px;

}


.logo-subtitle {

    color: var(--orange);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


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

.nav-link {

    position: relative;

    color: var(--blue-dark);

    font-weight: 600;

    font-size: 14px;

    padding:
        8px 4px;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background:
        var(--orange);

    transition:
        width 0.3s ease;

}


.nav-link:hover {

    color:
        var(--orange);

}


.nav-link:hover::after {

    width: 100%;

}


.nav-link.active {

    color:
        var(--orange);

}


.nav-link.active::after {

    width: 100%;

}


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

.mobile-menu {

    background:
        var(--white);

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

}


.mobile-menu a {

    display: block;

    padding:
        12px 0;

    color:
        var(--blue-dark);

    font-weight: 600;

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

}


.mobile-menu a:hover {

    color:
        var(--orange);

    padding-left:
        6px;

}


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

.hero-section {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f4fbfe 0%,
            #eaf7fc 55%,
            #ffffff 100%
        );

}


.hero-pattern {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.35;

    background-image:
        radial-gradient(
            rgba(25, 118, 168, 0.12)
            1px,
            transparent 1px
        );

    background-size:
        24px 24px;

}


.hero-title {

    color:
        var(--blue-dark);

    font-weight:
        900;

    line-height:
        1.08;

    letter-spacing:
        -1.5px;

}


.hero-highlight {

    color:
        var(--orange);

}


.hero-description {

    color:
        var(--text);

    max-width:
        700px;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        12px 22px;

    background:
        var(--orange);

    color:
        var(--white);

    border-radius:
        8px;

    font-weight:
        700;

    border:
        2px solid var(--orange);

    box-shadow:
        0 6px 18px
        rgba(242, 140, 40, 0.20);

}


.btn-primary:hover {

    background:
        var(--orange-dark);

    border-color:
        var(--orange-dark);

    color:
        var(--white);

    transform:
        translateY(-2px);

}


.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        12px 22px;

    background:
        var(--white);

    color:
        var(--blue-dark);

    border:
        2px solid var(--blue-dark);

    border-radius:
        8px;

    font-weight:
        700;

}


.btn-secondary:hover {

    background:
        var(--blue-dark);

    color:
        var(--white);

    transform:
        translateY(-2px);

}


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

.section {

    padding:
        80px 0;

}


.section-light {

    background:
        var(--blue-soft);

}


.section-blue {

    background:
        var(--blue-light);

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--orange);

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

}


.section-label::before {

    content: "";

    width:
        28px;

    height:
        2px;

    background:
        var(--orange);

}


.section-title {

    margin-top:
        8px;

    color:
        var(--blue-dark);

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight:
        800;

    line-height:
        1.15;

}


.section-description {

    color:
        var(--text);

    max-width:
        720px;

}


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

.about-image {

    overflow:
        hidden;

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

    box-shadow:
        var(--shadow);

}


.about-image img {

    width:
        100%;

    transition:
        transform 0.6s ease;

}


.about-image:hover img {

    transform:
        scale(1.04);

}


/* =========================================================
   STAT CARDS
========================================================= */

.stat-card {

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    padding:
        22px;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.stat-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}


.stat-number {

    color:
        var(--blue-dark);

    font-size:
        30px;

    font-weight:
        900;

}


.stat-label {

    color:
        var(--text-light);

    font-size:
        13px;

    font-weight:
        600;

}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {

    position:
        relative;

    height:
        100%;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    padding:
        26px;

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

    overflow:
        hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}


.service-card::before {

    content: "";

    position:
        absolute;

    left: 0;

    top: 0;

    width: 4px;

    height: 0;

    background:
        var(--orange);

    transition:
        height 0.35s ease;

}


.service-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow);

    border-color:
        #c8e4ef;

}


.service-card:hover::before {

    height:
        100%;

}


.service-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--blue-light);

    color:
        var(--blue);

    border-radius:
        12px;

    font-size:
        21px;

    margin-bottom:
        18px;

}


.service-card:hover .service-icon {

    background:
        var(--orange-light);

    color:
        var(--orange);

}


/* =========================================================
   SERVICE CATEGORY
========================================================= */

.category-badge {

    display:
        inline-flex;

    padding:
        5px 10px;

    border-radius:
        30px;

    background:
        var(--blue-light);

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.8px;

}


/* =========================================================
   HDD SECTION
========================================================= */

.hdd-section {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--blue-dark);

    color:
        var(--white);

}


.hdd-section::after {

    content: "";

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    right:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

    border:
        60px solid
        rgba(255,255,255,0.04);

}


.hdd-section .section-title {

    color:
        var(--white);

}


.hdd-section .section-description {

    color:
        rgba(255,255,255,0.75);

}


/* =========================================================
   ADVANTAGE
========================================================= */

.advantage-card {

    display:
        flex;

    gap:
        16px;

    padding:
        20px;

    border-radius:
        var(--radius);

    background:
        var(--white);

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.advantage-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow);

}


.advantage-icon {

    flex:
        0 0 46px;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--orange-light);

    color:
        var(--orange);

    border-radius:
        10px;

}


/* =========================================================
   INDUSTRY CARDS
========================================================= */

.industry-card {

    padding:
        20px;

    text-align:
        center;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.industry-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}


.industry-card i {

    color:
        var(--blue);

    font-size:
        25px;

    margin-bottom:
        10px;

}


/* =========================================================
   SAFETY
========================================================= */

.safety-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text);

    padding:
        8px 0;

}


.safety-item i {

    color:
        var(--orange);

}


/* =========================================================
   TESTIMONIAL
========================================================= */

.testimonial-card {

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    padding:
        28px;

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

}


.testimonial-stars {

    color:
        var(--orange);

    letter-spacing:
        2px;

}


.testimonial-text {

    color:
        var(--text);

    font-style:
        italic;

}


.testimonial-name {

    color:
        var(--blue-dark);

    font-weight:
        800;

}


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

.contact-card {

    background:
        var(--white);

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

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

    padding:
        28px;

    box-shadow:
        var(--shadow);

}


.contact-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--blue-light);

    color:
        var(--blue);

    border-radius:
        10px;

}


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

.form-label {

    display:
        block;

    color:
        var(--blue-dark);

    font-size:
        13px;

    font-weight:
        700;

    margin-bottom:
        7px;

}


.form-input {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        12px 14px;

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

    border-radius:
        8px;

    background:
        var(--white);

    color:
        var(--text-dark);

    outline:
        none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}


.form-input:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(25,118,168,0.10);

}


.form-input::placeholder {

    color:
        #9aabb8;

}


/* =========================================================
   SELECT
========================================================= */

select.form-input {

    cursor:
        pointer;

}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.whatsapp-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    background:
        #25d366;

    color:
        white;

    padding:
        13px 22px;

    border-radius:
        8px;

    font-weight:
        800;

    border:
        none;

    cursor:
        pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.whatsapp-button:hover {

    color:
        white;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(37,211,102,0.25);

}


/* =========================================================
   GALLERY
========================================================= */

.gallery-item {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        var(--radius);

    cursor:
        pointer;

    background:
        var(--blue-soft);

}


.gallery-item img {

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;

}


.gallery-item:hover img {

    transform:
        scale(1.07);

}


.gallery-overlay {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        20px;

    background:
        linear-gradient(
            transparent,
            rgba(18,57,91,0.85)
        );

    opacity:
        0;

    transition:
        opacity 0.3s ease;

}


.gallery-item:hover .gallery-overlay {

    opacity:
        1;

}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(8,25,39,0.94);

}


.gallery-lightbox img {

    max-width:
        90vw;

    max-height:
        80vh;

    object-fit:
        contain;

    border-radius:
        8px;

}


.lightbox-button {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.12);

    color:
        white;

    cursor:
        pointer;

    transition:
        background 0.3s ease;

}


.lightbox-button:hover {

    background:
        var(--orange);

}


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

.site-footer {

    background:
        var(--blue-dark);

    color:
        rgba(255,255,255,0.75);

}


.footer-title {

    color:
        var(--white);

    font-weight:
        800;

}


.footer-heading {

    color:
        var(--white);

    font-weight:
        800;

    margin-bottom:
        14px;

}


.footer-link {

    color:
        rgba(255,255,255,0.70);

    display:
        block;

    padding:
        4px 0;

}


.footer-link:hover {

    color:
        var(--orange);

    padding-left:
        4px;

}


.footer-bottom {

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

}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {

    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    z-index:
        900;

    width:
        56px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #25d366;

    color:
        white;

    border-radius:
        50%;

    font-size:
        25px;

    box-shadow:
        0 8px 24px
        rgba(37,211,102,0.30);

    transition:
        transform 0.3s ease;

}


.floating-whatsapp:hover {

    color:
        white;

    transform:
        scale(1.08);

}


/* =========================================================
   BACK TO TOP
========================================================= */

#backToTop {

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

}


#backToTop:hover {

    transform:
        translateY(-3px);

}


/* =========================================================
   ANIMATION
========================================================= */

.animate-on-scroll {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.animate-on-scroll.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   FADE UP
========================================================= */

.fade-up {

    animation:
        fadeUp 0.8s ease forwards;

}


@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(25px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   FLOAT
========================================================= */

.float-animation {

    animation:
        floating 4s ease-in-out infinite;

}


@keyframes floating {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* =========================================================
   PULSE
========================================================= */

.pulse-orange {

    animation:
        orangePulse 2s infinite;

}


@keyframes orangePulse {

    0% {

        box-shadow:
            0 0 0 0
            rgba(242,140,40,0.35);

    }

    70% {

        box-shadow:
            0 0 0 12px
            rgba(242,140,40,0);

    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(242,140,40,0);

    }

}


/* =========================================================
   PAGE HERO
========================================================= */

.page-hero {

    padding:
        80px 0;

    background:
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue)
        );

    color:
        white;

}


.page-hero h1 {

    color:
        white;

}


.page-hero p {

    color:
        rgba(255,255,255,0.80);

}


/* =========================================================
   SERVICE FILTER
========================================================= */

.service-filter {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.service-filter button {

    padding:
        9px 16px;

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

    border-radius:
        30px;

    background:
        white;

    color:
        var(--blue-dark);

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all 0.3s ease;

}


.service-filter button:hover {

    border-color:
        var(--orange);

    color:
        var(--orange);

}


.service-filter button.active {

    background:
        var(--blue-dark);

    color:
        white;

    border-color:
        var(--blue-dark);

}


/* =========================================================
   COMMITMENT SECTION
========================================================= */

.commitment-box {

    padding:
        30px;

    border-left:
        4px solid var(--orange);

    background:
        var(--orange-light);

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

}


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

.trusted-client {

    padding:
        15px 22px;

    background:
        var(--white);

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

    border-radius:
        8px;

    color:
        var(--blue-dark);

    font-weight:
        800;

    text-align:
        center;

}


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

@media (max-width: 1024px) {

    .section {

        padding:
            65px 0;

    }

}


@media (max-width: 768px) {

    .section {

        padding:
            55px 0;

    }


    .hero-title {

        letter-spacing:
            -0.8px;

    }


    .page-hero {

        padding:
            60px 0;

    }


    .contact-card {

        padding:
            22px;

    }


    .floating-whatsapp {

        width:
            50px;

        height:
            50px;

        right:
            15px;

        bottom:
            15px;

        font-size:
            22px;

    }

}


@media (max-width: 480px) {

    .section {

        padding:
            45px 0;

    }


    .btn-primary,
    .btn-secondary {

        width:
            100%;

    }


    .service-card {

        padding:
            20px;

    }


    .advantage-card {

        padding:
            16px;

    }

}