/*=====================================================
    SERVICE.CSS
    NGO Environmental Solutions Website
    Part 1
    Global Styles
    Hero Section
    Services Introduction
======================================================*/

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

:root{

    --primary:#138A36;
    --primary-dark:#0f6d2a;
    --primary-light:#1fb857;

    --teal:#20B2AA;
    --teal-dark:#168a84;

    --gold:#F4C430;

    --dark:#151515;
    --text:#555;
    --light:#f8fbf9;
    --white:#ffffff;

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

    --shadow-lg:
        0 35px 70px rgba(0,0,0,.12);

    --radius:22px;

    --transition:.4s ease;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
    line-height:1.8;

}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:.35s;

}

ul{

    list-style:none;

}

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

.container{

    width:90%;
    max-width:1240px;
    margin:auto;

}

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

section{

    position:relative;
    overflow:hidden;

}

.section-padding{

    padding:110px 0;

}

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

.section-title{

    max-width:760px;
    margin:0 auto 70px;
    text-align:center;

}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

}

.section-title h2{

    color:var(--dark);

    font-size:46px;

    line-height:1.25;

    margin-bottom:20px;

    font-weight:700;

}

.section-title p{

    color:#666;

    font-size:17px;

    line-height:1.9;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

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

    color:#fff;

    box-shadow:
        0 15px 35px rgba(19,138,54,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(19,138,54,.35);

}

.btn-secondary{

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

    color:var(--primary);

    background:#fff;

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}

/*====================================================
SERVICE HERO
Professional Full Screen Slider
====================================================*/

.service-hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height:720px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* Slider */

.service-hero .hero-slider{
    position:absolute;
    inset:0;
    z-index:1;
}

.service-hero .slide{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    opacity:0;
    visibility:hidden;

    transform:scale(1);

    transition:
    opacity 1.5s ease,
    visibility 1.5s ease;
}

.service-hero .slide.active{
    opacity:1;
    visibility:visible;
    animation:kenBurns 10s linear forwards;
}

.service-hero .overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.45),
        rgba(0,0,0,.30)
    );

    z-index:2;
}

.service-hero .hero-content{

    position:relative;

    z-index:10;

    max-width:820px;

    color:#fff;
}

.service-hero .subtitle{

    display:inline-block;

    padding:12px 28px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:25px;
}

.service-hero h1{

    font-size:68px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

   /* animation:fadeLeft 1.2s ease; */
}

.service-hero p{

    font-size:20px;

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

    line-height:1.9;

    max-width:700px;

    margin-bottom:40px;
}


.service-hero .slider-navigation{

    position:absolute;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    gap:15px;

    z-index:20;
}

.service-hero .dot{

    width:14px;

    height:14px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.4s;
}

.service-hero .dot.active{

    background:#fff;

    transform:scale(1.3);
}

.service-hero .scroll-down{

    position:absolute;

    left:50%;

    bottom:95px;

    transform:translateX(-50%);

    color:#fff;

    font-size:32px;

    z-index:20;

    animation:bounce 2s infinite;
}

.service-hero::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:rgba(32,178,170,.12);

    top:-180px;
    right:-150px;

    filter:blur(30px);

    z-index:2;

    animation:floatOne 8s ease-in-out infinite;
}

.service-hero::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(244,196,48,.12);

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

    filter:blur(25px);

    z-index:2;

    animation:floatTwo 10s ease-in-out infinite;
}







/*===============================
SERVICES INTRO
================================*/

.services-intro{

    padding:110px 0;

    background:#fff;

}

.intro-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    align-items:center;

}

.intro-image{

    position:relative;

}

.intro-image img{

    border-radius:25px;

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

}

.intro-image::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:30px;

    border:8px solid rgba(19,138,54,.12);

    top:-35px;
    left:-35px;

    z-index:-1;

}

.intro-content h2{

    font-size:44px;

    color:var(--dark);

    margin-bottom:20px;

}

.intro-content p{

    margin-bottom:20px;

    font-size:17px;

    color:#666;

}

/*===============================
INTRO LIST
================================*/

.intro-list{

    margin-top:35px;

}

.intro-list li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    color:#444;

    font-weight:500;

}

.intro-list li i{

    color:var(--primary);

    font-size:18px;

}

/*===============================
UTILITY ANIMATIONS
================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    transition:1s;

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}

.fade-right{

    opacity:0;

    transform:translateX(70px);

    transition:1s;

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}
/*==========================================
End of Part 1
==========================================*/

/*=====================================================
    SERVICE.CSS
    PART 2
    Main Service Sections
======================================================*/

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

.service-section{
    padding:110px 0;
    background:#fff;
    position:relative;
}

.service-section:nth-child(even){
    background:var(--light);
}

/* Decorative background */

.service-section::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(32,178,170,.05);
    top:-120px;
    right:-120px;
}

.service-section::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(244,196,48,.08);
    left:-90px;
    bottom:-90px;
}

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

.service-grid{

    display:grid;

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

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}

.service-grid.reverse .service-image{

    order:2;

}

.service-grid.reverse .service-content{

    order:1;

}

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

.service-image{

    position:relative;

}

.service-image img{

    width:100%;

    border-radius:28px;

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

    transition:.6s ease;

}

.service-image:hover img{

    transform:scale(1.05);

}

/* Floating Border */

.service-image::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border:8px solid rgba(19,138,54,.12);

    border-radius:30px;

    left:-35px;

    top:-35px;

    z-index:-1;

}

/* Floating Circle */

.service-image::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    background:rgba(32,178,170,.12);

    bottom:-40px;

    right:-40px;

    z-index:-1;

}

/*====================================
IMAGE BADGE
====================================*/

.image-badge{

    position:absolute;

    right:25px;

    bottom:25px;

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    box-shadow:var(--shadow);

    display:flex;

    align-items:center;

    gap:15px;

}

.image-badge i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

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

    font-size:22px;

}

.image-badge h4{

    color:var(--dark);

    font-size:20px;

    margin-bottom:3px;

}

.image-badge span{

    color:#777;

    font-size:14px;

}

/*====================================
CONTENT
====================================*/

.service-content h5{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

    font-size:15px;

}

.service-content h2{

    font-size:46px;

    line-height:1.25;

    color:var(--dark);

    margin-bottom:25px;

}

.service-content p{

    color:#666;

    font-size:17px;

    margin-bottom:25px;

    line-height:1.9;

}

/*====================================
ICON
====================================*/

.service-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:36px;

    margin-bottom:28px;

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

    box-shadow:
    0 20px 40px rgba(19,138,54,.25);

    transition:.4s;

}

.service-content:hover .service-icon{

    transform:rotate(-10deg) scale(1.08);

}

/*====================================
FEATURE LIST
====================================*/

.service-list{

    margin:35px 0;

}

.service-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;

    color:#444;

    font-weight:500;

}

.service-list li i{

    color:var(--primary);

    margin-top:5px;

    font-size:17px;

}

/*====================================
HIGHLIGHT BOXES
====================================*/

.highlight-boxes{

    display:grid;

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

    gap:20px;

    margin:35px 0;

}

.highlight-box{

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:0 12px 28px rgba(0,0,0,.06);

    transition:.35s;

}

.highlight-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.highlight-box h4{

    color:var(--dark);

    margin-bottom:10px;

    font-size:20px;

}

.highlight-box p{

    margin:0;

    font-size:15px;

}


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

.service-content .icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    color:#fff;

    font-size:38px;

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

}

.icon.green{

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

}

.icon.blue{

    background:linear-gradient(
        135deg,
        #1f9fb5,
        #38c6df
    );

}

.icon.yellow{

    background:linear-gradient(
        135deg,
        #f7b500,
        #ffd84d
    );

}

/*====================================================
SERVICE LIST
====================================================*/

.service-content ul{

    margin-bottom:35px;

}

.service-content ul li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    font-weight:500;

    color:#444;

    font-size:16px;

}

.service-content ul li i{

    color:var(--primary);

    font-size:18px;

}

.service-content .btn-primary{

    margin-top:10px;

}



/*====================================
SERVICE STATS
====================================*/

.service-mini-stats{

    display:flex;

    gap:25px;

    margin-top:40px;

    flex-wrap:wrap;

}

.mini-stat{

    display:flex;

    align-items:center;

    gap:15px;

}

.mini-stat i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:22px;

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

}

.mini-stat h3{

    color:var(--dark);

    font-size:28px;

    margin-bottom:2px;

}

.mini-stat span{

    color:#666;

    font-size:14px;

}

/*====================================
BUTTON AREA
====================================*/

.service-actions{

    margin-top:40px;

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/*====================================
HOVER GLOW
====================================*/

.service-content{

    transition:.4s;

}

.service-content:hover{

    transform:translateY(-5px);

}

/*====================================
FLOATING LEAF
====================================*/

.floating-leaf{

    position:absolute;

    color:rgba(19,138,54,.08);

    font-size:70px;

    animation:leafFloat 8s ease-in-out infinite;

}

.leaf-left{

    left:3%;

    top:20%;

}

.leaf-right{

    right:4%;

    bottom:15%;

}

@keyframes leafFloat{

    0%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-18px) rotate(12deg);
    }

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

}



/*==========================================
End of Part 2
==========================================*/

/*=====================================================
    SERVICE.CSS
    PART 3
    Why Choose Us
    Our Process
    Impact Statistics
======================================================*/

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

.why-choose{
    padding:110px 0;
    background:var(--light);
    position:relative;
    overflow:hidden;
}

.why-choose::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(19,138,54,.05);
    top:-180px;
    left:-180px;
}

.why-choose::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(32,178,170,.06);
    right:-120px;
    bottom:-120px;
}

.why-grid{

    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

/*=========================================
FEATURE CARD
=========================================*/

.feature-card{

    background:#fff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.4s ease;

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

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

    transform:scaleX(0);

    transition:.45s;

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-card:hover{

    transform:translateY(-12px);

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

}

.feature-card i{

    width:90px;
    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

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

    font-size:34px;

    color:#fff;

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

    transition:.4s;

}

.feature-card:hover i{

    transform:rotate(10deg) scale(1.08);

}

.feature-card h3{

    font-size:24px;

    color:var(--dark);

    margin-bottom:15px;

}

.feature-card p{

    color:#666;

    line-height:1.8;

}

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

.process{

    padding:110px 0;

    background:#fff;

    position:relative;

}

.process::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:rgba(244,196,48,.08);

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

}

.process::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(32,178,170,.06);

    right:-100px;
    top:-100px;

}

.process-grid{

    position:relative;

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

/*=========================================
PROCESS CONNECTOR
=========================================*/

.process-grid::before{

    content:"";

    position:absolute;

    top:42px;

    left:8%;

    width:84%;

    height:4px;

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

    border-radius:50px;

    z-index:0;

}

/*=========================================
PROCESS STEP
=========================================*/

.process-step{

    position:relative;

    z-index:2;

    text-align:center;

}

.process-step .step-number{

    width:85px;
    height:85px;

    margin:auto;

    border-radius:50%;

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

    font-size:30px;
    font-weight:700;

    color:#fff;

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

    box-shadow:0 18px 35px rgba(19,138,54,.25);

    transition:.4s;

}

.process-step:hover .step-number{

    transform:translateY(-8px) rotate(10deg);

}

.process-step h3{

    margin-top:25px;

    color:var(--dark);

    font-size:22px;

    margin-bottom:12px;

}

.process-step p{

    color:#666;

    font-size:15px;

    line-height:1.8;

}

/*=========================================
STEP GLOW
=========================================*/

.process-step::after{

    content:"";

    position:absolute;

    width:120px;
    height:120px;

    border-radius:50%;

    background:rgba(19,138,54,.06);

    left:50%;
    top:42px;

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

    transition:.4s;

    z-index:-1;

}

.process-step:hover::after{

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

    background:rgba(32,178,170,.08);

}

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

.impact{

    padding:110px 0;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        rgba(19,138,54,.94),
        rgba(19,138,54,.94)
    ),

    url("../images/forest-bg.jpg")
    center/cover no-repeat;

}

.impact::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(32,178,170,.12);

    top:-180px;
    right:-150px;

    filter:blur(30px);

}

.impact::after{

    content:"";

    position:absolute;

    width:340px;
    height:340px;

    border-radius:50%;

    background:rgba(244,196,48,.12);

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

    filter:blur(30px);

}


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

.process{

    padding:110px 0;

    background:#ffffff;

}

.process-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    position:relative;

}



/*====================================================
CONNECTING LINE
====================================================*/

.process-grid::before{

    content:"";

    position:absolute;

    top:40px;

    left:10%;

    width:80%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #20b2aa,
        #f4c430
    );

    z-index:0;

    border-radius:20px;

}



/*====================================================
STEP CARD
====================================================*/

.step{

    position:relative;

    z-index:2;

    text-align:center;

}

.step .number{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--primary),
        #20b2aa
    );

    box-shadow:0 15px 35px rgba(19,138,54,.25);

    transition:.45s;

}

.step:hover .number{

    transform:translateY(-10px) rotate(10deg);

    background:linear-gradient(
        135deg,
        #20b2aa,
        #f4c430
    );

}

.step h3{

    margin-top:25px;

    font-size:20px;

    color:#111;

    margin-bottom:12px;

}

.step p{

    color:#666;

    font-size:15px;

    line-height:1.7;

}



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

.step::after{

    content:"";

    position:absolute;

    left:50%;

    top:40px;

    width:120px;

    height:120px;

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

    border-radius:50%;

    background:rgba(19,138,54,.06);

    z-index:-1;

    transition:.45s;

}

.step:hover::after{

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

    background:rgba(32,178,170,.08);

}


/*=========================================
IMPACT GRID
=========================================*/

.impact-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

}

/*=========================================
STAT CARD
=========================================*/

.stat-card{

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

    backdrop-filter:blur(12px);

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

    border-radius:24px;

    padding:40px 25px;

    text-align:center;

    transition:.4s;

}

.stat-card:hover{

    transform:translateY(-10px);

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

}

.stat-card i{

    width:85px;
    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

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

    color:#fff;

    font-size:34px;

    background:linear-gradient(
        135deg,
        var(--teal),
        var(--gold)
    );

}

.stat-card h2{

    color:#fff;

    font-size:52px;

    margin-bottom:12px;

    font-weight:700;

}

.stat-card h4{

    color:#fff;

    font-size:22px;

    margin-bottom:12px;

}

.stat-card p{

    color:rgba(255,255,255,.85);

    line-height:1.8;

    font-size:15px;

}

/*=========================================
COUNTER
=========================================*/

.counter{

    display:inline-block;

    font-weight:800;

    letter-spacing:1px;

}

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

.impact-icon{

    position:absolute;

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

    animation:impactFloat 8s ease-in-out infinite;

}

.icon-one{

    left:6%;
    top:18%;
    font-size:60px;

}

.icon-two{

    right:7%;
    bottom:16%;
    font-size:75px;

    animation-duration:11s;

}

@keyframes impactFloat{

    0%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-20px) rotate(12deg);
    }

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

}



/*==========================================
End of Part 3
==========================================*/

/*=====================================================
  SERVICES.CSS
  PART 4 - RESPONSIVE DESIGN & FINAL POLISH
=====================================================*/


/*=====================================================
  TABLETS (991px)
=====================================================*/

@media (max-width:991px){

.service-grid{
    grid-template-columns:1fr;
    gap:60px;
}

.service-grid.reverse{
    direction:ltr;
}

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

.service-content ul{
    display:inline-block;
    text-align:left;
}

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

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

.process-grid::before{
    display:none;
}

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

.service-hero h1{
    font-size:52px;
}

.service-hero p{
    max-width:100%;
}

}


/*=====================================================
  MOBILE (768px)
=====================================================*/

@media (max-width:768px){

.container{
    width:92%;
}

.service-hero{
    min-height:520px;
    padding:120px 0 80px;
}

.service-hero h1{
    font-size:42px;
    line-height:1.25;
}

.service-hero p{
    font-size:16px;
}

.services-intro{
    padding:80px 0;
}

.section-title h2{
    font-size:34px;
}

.section-title p{
    font-size:16px;
}

.service-block{
    padding:80px 0;
}

.service-content h2{
    font-size:34px;
}

.service-content .icon{
    margin:auto auto 25px;
}

.service-image::before,
.service-image::after{
    display:none;
}

.feature-grid{
    grid-template-columns:1fr;
}

.process-grid{
    grid-template-columns:1fr;
}

.step{
    max-width:360px;
    margin:auto;
}

.stats-grid{
    grid-template-columns:1fr;
}

.service-cta{
    padding:90px 0;
}

.service-cta h2{
    font-size:36px;
}

.service-buttons{
    flex-direction:column;
    align-items:center;
}

.service-buttons a{
    width:100%;
    max-width:320px;
}

}


/*=====================================================
  SMALL PHONES (576px)
=====================================================*/

@media (max-width:576px){

.service-hero{
    min-height:460px;
    padding:100px 0 70px;
}

.service-hero .subtitle{
    font-size:13px;
    padding:10px 22px;
}

.service-hero h1{
    font-size:34px;
}

.service-hero p{
    font-size:15px;
}

.section-title h2{
    font-size:30px;
}

.service-content h2{
    font-size:28px;
}

.service-content p{
    font-size:15px;
}

.service-content ul li{
    font-size:15px;
}

.service-content .icon{
    width:75px;
    height:75px;
    font-size:30px;
}

.feature-card{
    padding:35px 25px;
}

.feature-card i{
    width:75px;
    height:75px;
    font-size:28px;
}

.stat-card{
    padding:35px 20px;
}

.stat-card h2{
    font-size:40px;
}

.service-cta h2{
    font-size:30px;
}

.service-cta p{
    font-size:16px;
}

}


/*=====================================================
  LARGE DESKTOPS
=====================================================*/

@media (min-width:1400px){

.container{
    max-width:1320px;
}

.service-grid{
    gap:100px;
}

.service-hero h1{
    font-size:74px;
}

.service-content h2{
    font-size:48px;
}

.service-content p{
    font-size:18px;
}

}


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

.fade-up{

    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;

}

.fade-up.active{

    opacity:1;
    transform:translateY(0);

}

.fade-left{

    opacity:0;
    transform:translateX(-60px);
    transition:all .8s ease;

}

.fade-left.active{

    opacity:1;
    transform:translateX(0);

}

.fade-right{

    opacity:0;
    transform:translateX(60px);
    transition:all .8s ease;

}

.fade-right.active{

    opacity:1;
    transform:translateX(0);

}


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

.float{

    animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{
    transform:translateY(0);
}

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

100%{
    transform:translateY(0);
}

}


/*=====================================================
  ROTATE
=====================================================*/

.rotate{

    animation:rotate 14s linear infinite;

}

@keyframes rotate{

from{
    transform:rotate(0deg);
}

to{
    transform:rotate(360deg);
}

}


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

.btn-primary,
.btn-secondary{

    transition:all .35s ease;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary:hover{

    transform:translateY(-4px);

}


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

.service-image{

    overflow:hidden;

}

.service-image img{

    transition:transform .8s ease;

}

.service-image:hover img{

    transform:scale(1.08);

}


/*=====================================================
  CARD HOVER
=====================================================*/

.feature-card,
.stat-card{

    transition:all .35s ease;

}

.feature-card:hover,
.stat-card:hover{

    transform:translateY(-10px);

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef4ef;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/*=====================================================
  TEXT HIGHLIGHT
=====================================================*/

.highlight{

    color:var(--primary);
    font-weight:700;

}

.highlight-blue{

    color:#20b2aa;
    font-weight:700;

}

.highlight-gold{

    color:#f4c430;
    font-weight:700;

}


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

::selection{

    background:var(--primary);
    color:#fff;

}


/*=====================================================
  SMOOTH SCROLL
=====================================================*/

html{

    scroll-behavior:smooth;

}


/*=====================================================
  END OF FILE
=====================================================*/


/*==========================================
End of Part 4
==========================================*/