/* ==========================================================
   shelter infra
   Premium Corporate Theme - Part 1
   Color Palette
   #46BF34  Green
   #FF8800  Orange
   #064420  Dark Green
========================================================== */

/* ===============================
   GOOGLE FONT
=============================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ===============================
   CSS VARIABLES
=============================== */

:root{

    --primary:#46BF34;
    --primary-dark:#2e9620;

    --accent:#FF8800;
    --accent-light:#ffb347;

    --secondary:#064420;

    --white:#ffffff;
    --light:#f8fff8;
    --light2:#eef9ef;

    --text:#333333;
    --text-light:#666;

    --shadow:0 12px 35px rgba(0,0,0,.12);
    --shadow-hover:0 20px 45px rgba(0,0,0,.18);

    --radius:18px;

    --transition:.35s ease;
	--deep-green: #064420;
            --green: #46bf34;
            --orange: #ff8800;
            --light-green: #eaf8e8;
            --dark: #10251a;
            --gray: #65756b;
			  --gradient-green:
                linear-gradient(135deg, #064420, #0b6b31);

            --gradient-main:
                linear-gradient(135deg, #064420, #46bf34);

            --gradient-orange:
                linear-gradient(135deg, #ff8800, #ffad32);

}

/* ===============================
   RESET
=============================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;

    background:
    linear-gradient(
    135deg,
    #f7fff7 0%,
    #ffffff 50%,
    #f4fff5 100%);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.6;
}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#ececec;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
    #11a14e,
   var(--accent));

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--accent);
}

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

::selection{

    background:var(--accent);
    color:#fff;
}

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

a{

    text-decoration:none;

    transition:var(--transition);
}

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

img{

    max-width:100%;

    display:block;
}

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

.container{

    width:min(1200px,92%);

    margin:auto;
}

/* ===============================
   TOP BAR
=============================== */

.top-bar{

    background:
    linear-gradient(
    90deg,
    #11a14e,
    var(--primary));

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:25px;

    padding:10px 20px;

    font-size:14px;

    position:relative;

    z-index:1001;

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

.top-bar span{

    display:flex;

    align-items:center;

    gap:8px;
}

.top-bar a{

    color:#fff;
}

.top-bar i{

    color:var(--white);

    font-size:15px;
}

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

.main-header{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(18px);

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

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

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

.main-header nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:1300px;

    margin:auto;

    padding:15px 25px;
}

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

.logo{

    display:flex;

    align-items:center;

    gap:15px;
}

.logo img{

    height:60px;

    transition:.4s;
}

.logo img:hover{

    transform:rotate(-5deg) scale(1.05);
}

.logo h1{

    color:var(--secondary);

    font-size:1.5rem;

    font-weight:700;
}

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

#navbar{

    display:flex;

    align-items:center;

    gap:10px;
}

#navbar a{

    color:var(--secondary);

    font-weight:600;

    padding:12px 18px;

    border-radius:40px;

    position:relative;

    overflow:hidden;
}

/* hover background */

#navbar a::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--accent));

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

    z-index:-1;
}

#navbar a:hover::before,
#navbar a.active::before{

    transform:scaleX(1);
}

#navbar a:hover,
#navbar a.active{

    color:#fff;
}

/* ===============================
   MENU TOGGLE
=============================== */

.menu-toggle{

    display:none;

    background:

    linear-gradient(
    135deg,
    var(--primseary),
    var(--accent));

    color:#fff;

    border:none;

    padding:10px 15px;

    border-radius:10px;

    cursor:pointer;

    font-size:20px;
}

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

.slider-section{

    position:relative;
}

.video-container{

    position:relative;

    overflow:hidden;
}

.video-container video{

    width:100%;

    height:90vh;

    object-fit:cover;
}

/* overlay */

.video-container::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(68 187 51),
    rgba(70,191,52,.45));
}

/* ===============================
   TAGLINE
=============================== */

.video-tagline{

    position:absolute;

    top:50%;

    left:50%;

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

    z-index:5;

    text-align:center;

    width:min(900px,90%);
}

.video-tagline h1{

    font-size:3.6rem;

    line-height:1.2;

    font-weight:800;

    color:#fff;

    text-shadow:0 8px 25px rgba(0,0,0,.35);

    animation:fadeUp 1s ease;
}

.video-tagline p{

    color:#fff;

    font-size:1.2rem;

    margin-top:20px;
}

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

.btn,
button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:none;

    border-radius:40px;

    cursor:pointer;

    padding:15px 34px;

    font-weight:600;

    transition:.35s;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--accent));

    color:#fff;
}

.btn:hover,
button:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-hover);
}

/* outline */

.btn-outline{

    background:transparent;

    border:2px solid #fff;

    color:#fff;
}

.btn-outline:hover{

    background:#fff;

    color:var(--secondary);
}

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

.glass-container{

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

    backdrop-filter:blur(15px);

    border-radius:25px;

    border:1px solid rgba(255,255,255,.4);

    box-shadow:var(--shadow);

    margin:60px auto;

    padding:50px 35px;

    width:min(1200px,94%);
}

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

section h2,
section h3{

    text-align:center;

    color:var(--secondary);

    font-size:2.5rem;

    margin-bottom:20px;

    font-weight:700;

    position:relative;
}

section h2::after,
section h3::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:15px auto 0;

    border-radius:50px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--accent));
}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* ===============================
   SCROLL PROGRESS
=============================== */

#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:

    linear-gradient(
    90deg,
    var(--accent),
    var(--accent),
    var(--secondary));

    z-index:99999;
}
/* ==========================================================
   Shelter Infra SERVICES
   Premium Corporate Theme - Part 2
   Mission • Services • Cards • Statistics
==========================================================*/


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

.hero{

    padding:90px 20px;

    text-align:center;

    background:
    linear-gradient(
    135deg,
    rgba(68 187 51),
    rgba(70,191,52,.90));

    color:#fff;

    position:relative;

    overflow:hidden;
}

.hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

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

    border-radius:50%;

    top:-180px;
    right:-180px;
}

.hero::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:rgba(255,136,0,.10);

    border-radius:50%;

    bottom:-120px;
    left:-120px;
}

.hero h2{

    font-size:3rem;

    color:#fff;

    margin-bottom:25px;
}

.hero h2::after{
    display:none;
}

.hero p{

    max-width:900px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

    opacity:.95;
}


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

section{

    padding:80px 20px;
}


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

#services{

    background:#fff;

    position:relative;
}

.services{

    display:grid;

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

    gap:35px;

    margin-top:60px;
}


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

.services .card{

    background:#fff;

    border-radius:25px;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.4s;

    box-shadow:
    0 12px 35px rgba(0,0,0,.08);

    border-top:5px solid var(--primary);

    text-decoration:none;

    color:inherit;
}


/* Gradient overlay */

.services .card::before{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:0;

    transition:.4s;

    z-index:0;
}


.services .card>*{

    position:relative;

    z-index:2;
}


.services .card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.18);
}


.services .card:hover::before{

    opacity:1;
}


/* =====================================================
   SERVICE TITLES
===================================================== */

.services .card h4{

    color:var(--secondary);

    font-size:1.45rem;

    margin-bottom:18px;

    transition:.35s;
}


.services .card:hover h4{

    color:#fff;
}


.services .card p{

    color:#666;

    transition:.35s;

    line-height:1.8;
}

.services .card:hover p{

    color:#fff;
}


/* =====================================================
   ICONS
===================================================== */

.icon{

    width:85px;

    height:85px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto auto 20px;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--accent));

    color:#fff;

    font-size:34px;

    transition:.45s;
}

.card:hover .icon{

    transform:
    rotate(360deg)
    scale(1.12);

    background:#fff;

    color:var(--secondary);
}


/* =====================================================
   SERVICE UNDERLINE
===================================================== */

.services .card h4::after{

    content:"";

    display:block;

    width:55px;

    height:4px;

    margin-top:12px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    var(--accent));

    border-radius:30px;

    transition:.4s;
}

.services .card:hover h4::after{

    width:100px;

    background:#fff;
}


/* =====================================================
   GLASS FEATURE CARDS
===================================================== */

.class-card{

    display:grid;

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

    gap:30px;
}


.class-card>div{

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

    backdrop-filter:blur(15px);

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.4s;

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

    border:1px solid rgba(255,255,255,.45);
}


.class-card>div:hover{

    transform:
    translateY(-12px);

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

    color:#fff;
}


.class-card>div:hover h3,
.class-card>div:hover p{

    color:#fff;
}


.class-card h3{

    color:var(--secondary);

    margin:18px 0;

    font-size:1.4rem;
}


.class-card p{

    color:#666;

    line-height:1.8;
}


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

.statistics{

    display:grid;

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

    gap:30px;

    margin-top:60px;
}


.stat-card{

    background:#fff;

    border-radius:22px;

    padding:40px;

    text-align:center;

    box-shadow:
    0 12px 35px rgba(0,0,0,.08);

    transition:.4s;
}


.stat-card:hover{

    transform:
    translateY(-12px);

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

    color:#fff;
}


.stat-card h2{

    font-size:3rem;

    color:var(--accent);

    margin-bottom:15px;
}


.stat-card:hover h2{

    color:#fff;
}


/* =====================================================
   BUTTONS INSIDE CARDS
===================================================== */

.read-more{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:22px;

    color:var(--primary);

    font-weight:600;

    transition:.35s;
}


.services .card:hover .read-more{

    color:#fff;

    transform:
    translateX(8px);
}


/* =====================================================
   IMAGE HOVER
===================================================== */

img{

    transition:.4s;
}

.card:hover img{

    transform:scale(1.06);
}


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

.fade-in{

    opacity:0;

    transform:
    translateY(60px);

    transition:
    all .8s ease;
}


.fade-in.visible{

    opacity:1;

    transform:
    translateY(0);
}


/* =====================================================
   FLOATING EFFECT
===================================================== */

@keyframes floating{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }
}

.icon{

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


/* =====================================================
   WAVE DIVIDER
===================================================== */

.wave{

    width:100%;

    overflow:hidden;

    line-height:0;
}

.wave svg{

    display:block;

    width:100%;

    height:90px;
}

/* ==========================================================
Shelter Infra SERVICES
   Premium Corporate Theme - Part 3
   Testimonials • Projects • Contact • Footer
==========================================================*/


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

#projects{

    background:
    linear-gradient(180deg,#ffffff,#f7fff8);

    position:relative;
}

.project-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;
}


.project-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.4s;

    position:relative;
}

.project-card img{

    width:100%;

    height:240px;

    object-fit:cover;
}

.project-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 55px rgba(0,0,0,.18);
}

.project-content{

    padding:30px;
}

.project-content h3{

    color:var(--secondary);

    margin-bottom:15px;

    font-size:1.5rem;
}

.project-content p{

    color:#666;

    line-height:1.8;
}


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

.cta{

    padding:90px 20px;

    text-align:center;

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

    color:#fff;

    border-radius:30px;

    margin:80px auto;
}

.cta h2{

    color:#fff;

    margin-bottom:20px;

    font-size:2.8rem;
}

.cta h2::after{

    display:none;
}

.cta p{

    max-width:850px;

    margin:auto;

    font-size:1.15rem;

    margin-bottom:35px;
}


/* =====================================================
   TESTIMONIALS
===================================================== */

.testimonials{

    margin-top:60px;

    display:grid;

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

    gap:30px;
}

.testimonial{

    background:#fff;

    border-radius:25px;

    padding:35px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.4s;

    position:relative;

    overflow:hidden;
}

.testimonial::before{

    content:"★★★★★";

    position:absolute;

    top:10px;

    right:25px;

    color:var(--accent);

    opacity:1;

    font-size:24px;
}

.testimonial:hover{

    transform:translateY(-10px);

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

    color:#fff;
}

.testimonial:hover p,
.testimonial:hover h4{

    color:#fff;
}

.testimonial p{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;
}

.testimonial h4{

    color:var(--secondary);

    font-weight:600;
}


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

.contact-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;
}

.contact-card{

    background:#fff;

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;
}

.contact-card:hover{

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

    color:#fff;

    transform:translateY(-10px);
}

.contact-card i{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto auto 20px;

    font-size:34px;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--accent));

    color:#fff;
}

.contact-card:hover i{

    background:#fff;

    color:var(--secondary);
}

.contact-card h3{

    margin-bottom:15px;
}


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

.contact-form{

    margin-top:60px;
}

.contact-form form{

    background:#fff;

    padding:45px;

    border-radius:25px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.contact-form input,
.contact-form textarea,
.contact-form select{

    width:100%;

    padding:16px 20px;

    margin-bottom:22px;

    border:1px solid #ddd;

    border-radius:15px;

    outline:none;

    transition:.35s;

    font-family:'Poppins',sans-serif;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(70,191,52,.18);
}

.contact-form textarea{

    resize:vertical;

    min-height:180px;
}


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

.site-footer{

    margin-top:90px;

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

    color:#fff;

    position:relative;

    padding:70px 20px 30px;
}

.footer-container{

    max-width:1300px;

    margin:auto;
}

.footer-columns{

    display:grid;

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

    gap:40px;
}

.footer-col strong{

    display:block;

    font-size:1.4rem;

    margin-bottom:20px;
}

.footer-col p,
.footer-col a{

   /* color:rgba(255,255,255,.92);*/

    line-height:1.9;

    text-decoration:none;
}

.footer-col a:hover{

    color:var(--accent);
}


/* =====================================================
   SOCIAL ICONS
===================================================== */

.social-icons{

    display:flex;

    gap:15px;

    margin-top:30px;
}

.social-icons a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#fff;

    font-size:20px;

    transition:.4s;
}

.social-icons a:hover{

    background:#fff;

    color:var(--secondary);

    transform:
    rotate(360deg)
    scale(1.15);
}


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

.footer-bottom{

    margin-top:40px;

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

    padding-top:25px;

    text-align:center;

    font-size:.95rem;

    opacity:.9;
}


/* =====================================================
   SCROLL TO TOP
===================================================== */

.scroll-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--accent));

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    cursor:pointer;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    transition:.35s;

    z-index:9999;
}

.scroll-top:hover{

    transform:
    translateY(-6px)
    rotate(360deg);
}


/* =====================================================
   BADGES
===================================================== */

.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    var(--accent));

    color:#fff;

    font-size:.85rem;

    font-weight:600;
}


/* =====================================================
   IMAGE OVERLAY EFFECT
===================================================== */

.image-hover{

    position:relative;

    overflow:hidden;

    border-radius:20px;
}

.image-hover::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,0),
    rgba(6,68,32,.75));

    opacity:0;

    transition:.4s;
}

.image-hover:hover::after{

    opacity:1;
}

/* ==========================================================
   Shelter Infra SERVICES
   Premium Corporate Theme - Part 4
   Responsive • Utilities • Performance
========================================================== */


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

.section{
    padding:100px 20px;
}

.section-sm{
    padding:60px 20px;
}

.section-lg{
    padding:130px 20px;
}


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

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

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

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}


/* ===============================
   GRID UTILITIES
=============================== */

.grid-2{

    display:grid;

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

    gap:40px;
}

.grid-3{

    display:grid;

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

    gap:35px;
}

.grid-4{

    display:grid;

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

    gap:30px;
}


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

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}


/* ===============================
   SHADOWS
=============================== */

.shadow{

    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.shadow-lg{

    box-shadow:0 25px 60px rgba(0,0,0,.15);
}


/* ===============================
   RADIUS
=============================== */

.rounded{
    border-radius:20px;
}

.rounded-lg{
    border-radius:30px;
}

.rounded-circle{
    border-radius:50%;
}


/* ===============================
   HOVER EFFECT
=============================== */

.hover-up{

    transition:.35s;
}

.hover-up:hover{

    transform:translateY(-8px);
}


/* ===============================
   LOADER
=============================== */

.loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;
}

.loader::after{

    content:"";

    width:65px;

    height:65px;

    border:6px solid #eee;

    border-top-color:var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;
}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }
}


/* ===============================
   FADE ANIMATIONS
=============================== */

.fade-left{

    opacity:0;

    transform:translateX(-50px);

    transition:.8s;
}

.fade-right{

    opacity:0;

    transform:translateX(50px);

    transition:.8s;
}

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:.8s;
}

.fade-left.show,
.fade-right.show,
.fade-up.show{

    opacity:1;

    transform:none;
}


/* ===============================
   RIPPLE BUTTON
=============================== */

.btn{

    position:relative;

    overflow:hidden;
}

.btn::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

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

    border-radius:50%;

    transform:scale(0);

    transition:.6s;
}

.btn:active::after{

    transform:scale(12);

    opacity:0;
}


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

button:focus,
a:focus,
input:focus,
textarea:focus{

    outline:3px solid rgba(70,191,52,.35);

    outline-offset:3px;
}


/* ===============================
   TABLET
=============================== */

@media (max-width:992px){

.logo h1{

    font-size:1.2rem;
}

.hero h2{

    font-size:2.3rem;
}

.video-tagline h1{

    font-size:2.6rem;
}

.grid-4{

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

.grid-3{

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

.project-grid{

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

.footer-columns{

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

}


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

@media(max-width:768px){

.menu-toggle{

    display:block;
}

.main-header nav{

    flex-wrap:wrap;
}

#navbar{

    width:100%;

    display:none;

    flex-direction:column;

    margin-top:20px;

    padding:15px;

    background:#fff;

    border-radius:20px;

    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

#navbar.show{

    display:flex;
}

#navbar a{

    width:100%;

    text-align:center;
}

.top-bar{

    gap:10px;

    font-size:12px;

    padding:10px;
}

.logo img{

    height:50px;
}

.logo h1{

    font-size:1rem;
}

.video-container video{

    height:70vh;
}

.video-tagline{

    width:90%;
}

.video-tagline h1{

    font-size:2rem;

    line-height:1.3;
}

.hero{

    padding:60px 20px;
}

.hero h2{

    font-size:2rem;
}

.hero p{

    font-size:1rem;
}

.glass-container{

    padding:30px 20px;
}

.services{

    grid-template-columns:1fr;
}

.class-card{

    grid-template-columns:1fr;
}

.statistics{

    grid-template-columns:1fr;
}

.project-grid{

    grid-template-columns:1fr;
}

.contact-grid{

    grid-template-columns:1fr;
}

.testimonials{

    grid-template-columns:1fr;
}

.footer-columns{

    grid-template-columns:1fr;
}

.social-icons{

    justify-content:center;
}

.btn{

    width:100%;
}

.contact-form form{

    padding:25px;
}

}


/* ===============================
   SMALL PHONES
=============================== */

@media(max-width:480px){

section h2,
section h3{

    font-size:1.8rem;
}

.video-tagline h1{

    font-size:1.5rem;
}

.top-bar{

    flex-direction:column;
}

.logo{

    flex-direction:column;

    text-align:center;
}

.logo img{

    height:45px;
}

.project-card img{

    height:200px;
}

.icon{

    width:70px;
    height:70px;
    font-size:28px;
}

.contact-card i{

    width:65px;
    height:65px;
    font-size:28px;
}

}


/* ===============================
   LARGE MONITORS
=============================== */

@media(min-width:1600px){

.container{

    max-width:1450px;
}

.video-tagline h1{

    font-size:5rem;
}

.hero h2{

    font-size:4rem;
}

}


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

@media print{

.top-bar,
.main-header,
.site-footer,
.menu-toggle,
.scroll-top{

    display:none !important;
}

body{

    background:#fff;
}

}


/* ===============================
   REDUCE MOTION
=============================== */

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

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;
}

}


/******************************CARD Section***************************************/

/* =========================================
   FEATURE CARDS - THEME HOVER EFFECT
   ========================================= */

.class-card.fade-in > div {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    padding: 25px 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.35s ease;
    text-align: center;
    border: 1px solid rgba(6, 68, 32, 0.12);
}

/* Normal icon */
.class-card.fade-in > div .icon {
    color: #064420;
    transition: all 0.35s ease;
}

/* Normal heading */
.class-card.fade-in > div h3 {
    color: #064420;
    transition: color 0.35s ease;
}

/* Normal description */
.class-card.fade-in > div p {
    color: #475569;
    transition: color 0.35s ease;
}


/* =========================================
   HOVER STATE
   ========================================= */

.class-card.fade-in > div:hover {
    transform: translateY(-8px);
    
    background: linear-gradient(
        135deg,
        #064420 0%,
        #0b6b3a 55%,
        #46bf34 100%
    );

    box-shadow:
        0 15px 35px rgba(6, 68, 32, 0.30);

    border-color: #46bf34;
}


/* Icon changes to orange on hover */
.class-card.fade-in > div:hover .icon {
    color: #ff8800;
    transform: scale(1.15);
    text-shadow: 0 0 12px rgba(255, 136, 0, 0.35);
}


/* Heading becomes white */
.class-card.fade-in > div:hover h3 {
    color: #ffffff;
}


/* Description becomes light/white */
.class-card.fade-in > div:hover p {
    color: #f1f8f3;
}


/* =========================================
   PRECISION DETAILING ICON
   ========================================= */

.class-card.fade-in > div:first-child .icon i {
    color: #064420;
    transition: all 0.35s ease;
}

.class-card.fade-in > div:first-child:hover .icon i {
    color: #ff8800;
}


/* =========================================
   OTHER CARD ICONS
   ========================================= */

.class-card.fade-in > div:nth-child(2):hover .icon i,
.class-card.fade-in > div:nth-child(3):hover .icon i,
.class-card.fade-in > div:nth-child(4):hover .icon i {
    color: #ff8800;
}


/* Better spacing */
.class-card.fade-in > div h3 {
    margin: 10px 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
}

.class-card.fade-in > div p {
    margin: 0;
    line-height: 1.6;
}

/* Icon - normal state */
.class-card.fade-in > div .icon i {
    color: #064420;
    transition: all 0.35s ease;
}

/* Icon - hover state */
.class-card.fade-in > div:hover .icon i {
    color: #ffffff !important;
    transform: scale(1.18);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

/* =========================================================
   MOBILE HAMBURGER MENU - HALA
   Add this at the VERY END of css/styles.css
========================================================= */

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #46bf34;
    border-radius: 10px;
    background: #064420;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;

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

    position: relative;
    z-index: 1100;

    box-shadow: 0 5px 15px rgba(6, 68, 32, 0.25);

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

.menu-toggle:hover {
    background: #46bf34;
    border-color: #ff8800;
    transform: translateY(-2px);
}

.menu-toggle:active {
    transform: scale(0.95);
}


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

@media (max-width: 768px) {

    .main-header {
        position: relative;
        min-height: 70px;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1000;
    }

    /*
       IMPORTANT:
       Make hamburger visible on mobile
    */
    .menu-toggle {
        display: flex !important;
        flex-shrink: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Mobile navigation */

    #navbar {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 10px 15px 18px;

        background: rgba(6, 68, 32, 0.98);

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

        border-top: 2px solid #46bf34;

        box-shadow:
            0 15px 30px rgba(0, 0, 0, 0.25);

        /*
           Hidden by default
        */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-15px);

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

        z-index: 1050;
    }


    /*
       OPEN MENU
    */

    #navbar.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }


    /* Navigation links */

    #navbar a {
        width: 100%;
        padding: 14px 15px;

        display: flex;
        align-items: center;
        gap: 12px;

        color: #ffffff !important;

        font-size: 14px;
        font-weight: 600;

        border-radius: 8px;

        transition:
            background 0.25s ease,
            color 0.25s ease,
            padding-left 0.25s ease;
    }


    #navbar a:hover {
        color: #ffffff !important;
        background: rgba(70, 191, 52, 0.25);
        padding-left: 22px;
    }


    #navbar a.active {
        color: #ffffff !important;
        background: rgba(255, 136, 0, 0.22);
    }


    /* Font Awesome icons */

    #navbar a i {
        width: 22px;
        text-align: center;
        color: #ff8800;
        font-size: 16px;
    }


    /*
       Hide the desktop navigation indicator
       if it exists
    */

    #navbar #nav-indicator {
        display: none;
    }


    /*
       Make logo fit properly
    */

    .main-header .logo {
        max-width: calc(100% - 60px);
    }

    .main-header .logo img {
        max-height: 48px;
        width: auto;
    }


    .main-header .logo h1 {
        font-size: 20px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .main-header {
        padding: 8px 12px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    #navbar {
        padding: 8px 12px 15px;
    }

    #navbar a {
        padding: 13px 12px;
        font-size: 13px;
    }

}