/* ==========================================
   ADIRNVM WEBSITE
   STYLE.CSS PART 1
   Global Reset
   Variables
   Typography
   Loader
   Header
   Navigation
   Mobile Menu
   Buttons
   Hero Section
   Feature Bar
========================================== */

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

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

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    color:#222;
    background:#ffffff;
    line-height:1.7;
}

img{
    max-width:100%;
    display:block;
}

ul{
    list-style:none;
}

a{
    text-decoration:none;
}

button,
input,
textarea{
    font-family:'Poppins',sans-serif;
}

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

:root{

    --primary:#0EA63A;
    --primary-dark:#008B2D;

    --secondary:#FF9D00;

    --white:#ffffff;

    --black:#111111;

    --text:#555555;

    --light:#f8f9fb;

    --border:#ebebeb;

    --shadow:
    0 10px 35px rgba(0,0,0,0.08);

    --radius:18px;

    --transition:.35s ease;
}

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

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

/* ==========================================
   TYPOGRAPHY
========================================== */

.section-tag{
    display:inline-block;

    color:var(--secondary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;
}

h1,h2,h3,h4,h5,h6{
    color:var(--black);
    line-height:1.2;
}

p{
    color:var(--text);
}

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

#loader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#fff;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.6s ease;
}

.loader-content img{

    width:220px;

    animation:pulse 1.6s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.06);
        opacity:.8;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

.loader-hide{

    opacity:0;
    visibility:hidden;
}

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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    background:#fff;

    transition:.4s ease;
}

header.sticky{

    box-shadow:0 5px 25px rgba(0,0,0,0.08);
}

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;
}

.logo img{

    width:180px;
}

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

#navMenu ul{

    display:flex;

    align-items:center;

    gap:35px;
}

#navMenu ul li a{

    color:#222;

    font-size:15px;

    font-weight:500;

    transition:var(--transition);
}

#navMenu ul li a:hover{

    color:var(--secondary);
}

#navMenu ul li a.active{

    color:var(--secondary);
}

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

.header-btns{

    display:flex;

    align-items:center;

    gap:15px;
}

.call-btn{

    padding:12px 24px;

    border-radius:12px;

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

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);
}

.call-btn:hover{

    background:var(--primary);

    color:#fff;
}

.contact-btn{

    padding:13px 28px;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);
}

.contact-btn:hover{

    background:var(--primary-dark);
}

/* ==========================================
   MOBILE TOGGLE
========================================== */

#mobileToggle{

    display:none;

    border:none;

    background:none;

    font-size:28px;

    color:#222;

    cursor:pointer;
}

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

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    padding:15px 34px;

    border-radius:14px;

    font-weight:600;

    transition:var(--transition);
}

.primary-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);
}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    color:var(--secondary);

    padding:15px 34px;

    border-radius:14px;

    font-weight:600;

    transition:var(--transition);
}

.secondary-btn:hover{

    background:var(--secondary);

    color:#fff;
}

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

.hero-section{

    padding-top:160px;

    padding-bottom:90px;

    background:#fff;
}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    align-items:center;

    gap:60px;
}

.hero-content h1{

    font-size:72px;

    font-weight:800;

    line-height:1.05;

    margin-top:20px;

    margin-bottom:25px;
}

.hero-content h1 span{

    color:var(--secondary);

    display:block;
}

.hero-tag{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    letter-spacing:1px;
}

.hero-content p{

    font-size:18px;

    max-width:580px;

    margin-bottom:35px;
}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;
}

.hero-image{

    position:relative;
}

.hero-image img{

    width:100%;

    border-radius:35px;

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

/* ==========================================
   FEATURE BAR
========================================== */

.feature-bar{

    margin-top:50px;

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:var(--shadow);

    display:grid;

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

    gap:25px;
}

.feature-box{

    display:flex;

    align-items:center;

    gap:15px;
}

.feature-icon{

    width:60px;
    height:60px;

    background:#f2fff5;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;
}

.feature-icon i{

    color:var(--primary);

    font-size:24px;
}

.feature-box h4{

    font-size:17px;

    margin-bottom:4px;
}

.feature-box p{

    font-size:14px;
}

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

@media(max-width:992px){

    #mobileToggle{
        display:block;
    }

    .header-btns{
        display:none;
    }

    #navMenu{

        position:fixed;

        top:90px;

        right:-100%;

        width:300px;

        height:calc(100vh - 90px);

        background:#fff;

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

        padding:40px 25px;

        transition:.4s ease;
    }

    #navMenu.active{
        right:0;
    }

    #navMenu ul{

        flex-direction:column;

        align-items:flex-start;

        gap:22px;
    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;
    }

    .hero-content p{

        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{

        justify-content:center;
    }

    .feature-bar{

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

    .hero-content h1{

        font-size:54px;
    }
}

@media(max-width:768px){

    .hero-content h1{

        font-size:42px;
    }

    .feature-bar{

        grid-template-columns:1fr;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .primary-btn,
    .secondary-btn{

        width:100%;
    }
}
/* ==========================================
   ADIRNVM WEBSITE
   STYLE.CSS PART 2
   ABOUT SECTION
   SERVICES SECTION
========================================== */

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

.about-section{

    padding:120px 0;

    background:var(--light);
}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.about-image{

    position:relative;
}

.about-image img{

    width:100%;

    border-radius:30px;

    box-shadow:var(--shadow);

    object-fit:cover;
}

.about-content h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:25px;

    line-height:1.15;
}

.about-content h2 span{

    color:var(--primary);
}

.about-content p{

    font-size:17px;

    margin-bottom:35px;

    max-width:650px;
}

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

.stats-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:35px;
}

.stat-card{

    background:#fff;

    border-radius:20px;

    padding:28px 20px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,0.06);

    transition:var(--transition);
}

.stat-card:hover{

    transform:translateY(-6px);

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

.stat-card h3{

    font-size:42px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:8px;
}

.stat-card span{

    color:var(--text);

    font-size:15px;

    font-weight:500;
}

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

.services-section{

    padding:120px 0;

    background:#ffffff;
}

.section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 70px auto;
}

.section-header h2{

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:20px;
}

.section-header h2 span{

    color:var(--secondary);
}

.section-header p{

    font-size:18px;

    max-width:700px;

    margin:auto;
}

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

.services-grid{

    display:grid;

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

    gap:30px;
}

.service-card{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

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

    transition:var(--transition);

    position:relative;

    overflow:hidden;
}

.service-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:5px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s ease;
}

.service-card:hover::before{

    transform:scaleX(1);
}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,0.10);
}

.service-card i{

    width:80px;
    height:80px;

    background:#f2fff5;

    color:var(--primary);

    font-size:32px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;
}

.service-card h3{

    font-size:24px;

    margin-bottom:15px;

    font-weight:700;
}

.service-card p{

    font-size:15px;

    margin-bottom:25px;

    min-height:90px;
}

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);
}

.service-card a:hover{

    color:var(--secondary);
}

.service-card a::after{

    content:"→";

    transition:.3s ease;
}

.service-card a:hover::after{

    transform:translateX(5px);
}

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

@media(max-width:992px){

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;
    }

    .about-content{

        text-align:center;
    }

    .about-content p{

        margin-left:auto;
        margin-right:auto;
    }

    .about-content .primary-btn{

        margin:auto;
    }

    .about-content h2{

        font-size:42px;
    }

    .section-header h2{

        font-size:42px;
    }
}

@media(max-width:768px){

    .about-section,
    .services-section{

        padding:80px 0;
    }

    .about-content h2{

        font-size:34px;
    }

    .section-header h2{

        font-size:34px;
    }

    .stats-grid{

        grid-template-columns:1fr;
    }

    .service-card{

        padding:30px 25px;
    }

    .service-card h3{

        font-size:22px;
    }

    .service-card p{

        min-height:auto;
    }

    .stat-card h3{

        font-size:34px;
    }
}

@media(max-width:480px){

    .about-content h2{

        font-size:30px;
    }

    .section-header h2{

        font-size:30px;
    }

    .service-card{

        text-align:center;
    }

    .service-card i{

        margin-left:auto;
        margin-right:auto;
    }
}
/* ==========================================
   ADIRNVM WEBSITE
   STYLE.CSS PART 3
   WHY CHOOSE US
   CTA SECTION
   CONTACT SECTION
   MAP
   FOOTER
   SOCIAL ICONS
   FLOATING WHATSAPP
   FINAL RESPONSIVE
========================================== */

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

.why-section{

    padding:120px 0;

    background:var(--light);
}

.why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.why-content h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:25px;
}

.why-content h2 span{

    color:var(--secondary);
}

.why-content p{

    margin-bottom:30px;

    font-size:17px;
}

.why-list{

    margin-bottom:35px;
}

.why-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-weight:500;
}

.why-list li i{

    color:var(--primary);

    font-size:18px;
}

.why-image img{

    width:100%;

    border-radius:30px;

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

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

.cta-section{

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

    padding:70px 0;
}

.cta-wrapper{

    display:grid;

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

    gap:30px;

    text-align:center;
}

.cta-item{

    color:#fff;
}

.cta-item i{

    font-size:48px;

    margin-bottom:15px;
}

.cta-item h4{

    color:#fff;

    font-size:20px;

    font-weight:600;
}

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

.contact-section{

    padding:120px 0;

    background:#fff;
}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;
}

.contact-left h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:25px;
}

.contact-left h2 span{

    color:var(--primary);
}

.contact-left p{

    margin-bottom:35px;
}

.contact-details{

    display:flex;

    flex-direction:column;

    gap:25px;
}

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;
}

.contact-item i{

    width:55px;
    height:55px;

    background:#f2fff5;

    color:var(--primary);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;
}

.contact-item h4{

    margin-bottom:6px;
}

.contact-item a{

    color:var(--text);

    transition:var(--transition);
}

.contact-item a:hover{

    color:var(--primary);
}

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

.contact-right{

    background:#fff;

    padding:40px;

    border-radius:25px;

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

.contact-right form{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.contact-right input,
.contact-right textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #ddd;

    border-radius:12px;

    outline:none;

    transition:var(--transition);
}

.contact-right textarea{

    min-height:180px;

    resize:none;
}

.contact-right input:focus,
.contact-right textarea:focus{

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

.contact-right button{

    border:none;

    cursor:pointer;

    background:var(--primary);

    color:#fff;

    padding:16px;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    transition:var(--transition);
}

.contact-right button:hover{

    background:var(--primary-dark);
}

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

.map-section{

    width:100%;

    height:500px;
}

.map-section iframe{

    width:100%;

    height:100%;

    border:none;
}

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

footer{

    background:#111;

    color:#fff;

    padding-top:90px;
}

.footer-grid{

    display:grid;

    grid-template-columns:
    1.5fr
    1fr
    1fr
    1fr;

    gap:40px;
}

.footer-column img{

    width:200px;

    margin-bottom:25px;
}

.footer-column h3{

    color:#fff;

    margin-bottom:25px;

    font-size:22px;
}

.footer-column p{

    color:#ccc;
}

.footer-column ul li{

    margin-bottom:12px;
}

.footer-column ul li a{

    color:#ccc;

    transition:var(--transition);
}

.footer-column ul li a:hover{

    color:var(--secondary);
}

.footer-column a{

    color:#ccc;
}

.footer-column a:hover{

    color:var(--secondary);
}

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

.social-icons{

    display:flex;

    gap:12px;

    margin-bottom:25px;
}

.social-icons a{

    width:45px;
    height:45px;

    background:#222;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);
}

.social-icons a:hover{

    background:var(--secondary);

    transform:translateY(-3px);
}

.footer-bottom{

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

    margin-top:60px;

    padding:25px 0;

    text-align:center;
}

.footer-bottom p{

    color:#aaa;
}

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

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;
    height:65px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    z-index:9999;

    box-shadow:
    0 10px 30px rgba(37,211,102,.35);

    transition:var(--transition);
}

.floating-whatsapp:hover{

    transform:scale(1.1);
}

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

@media(max-width:992px){

    .why-grid,
    .contact-grid{

        grid-template-columns:1fr;
    }

    .why-content,
    .contact-left{

        text-align:center;
    }

    .why-list li{

        justify-content:center;
    }

    .why-content h2,
    .contact-left h2{

        font-size:42px;
    }

    .cta-wrapper{

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

    .footer-grid{

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

@media(max-width:768px){

    .why-section,
    .contact-section{

        padding:80px 0;
    }

    .why-content h2,
    .contact-left h2{

        font-size:34px;
    }

    .contact-right{

        padding:25px;
    }

    .cta-wrapper{

        grid-template-columns:1fr;
    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;
    }

    .social-icons{

        justify-content:center;
    }

    .contact-item{

        justify-content:center;
    }

    .contact-item div{

        text-align:left;
    }

    .map-section{

        height:350px;
    }
}

@media(max-width:480px){

    .why-content h2,
    .contact-left h2{

        font-size:30px;
    }

    .floating-whatsapp{

        width:58px;
        height:58px;

        font-size:28px;

        right:18px;
        bottom:18px;
    }
}

/* ==========================================
   END OF STYLE.CSS
========================================== */