/* ===================================
   BUSINESS SUPPORT PREMIUM PAGE
=================================== */

body{
    background:#f4f7fc;
    overflow-x:hidden;
}

/* HERO SECTION */

.gst-hero{

    height:92vh;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
    linear-gradient(
    rgba(0,0,0,0.60),
    rgba(0,0,0,0.70)
    ),

    url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1800");

    background-size:cover;

    background-position:center;

    animation:heroZoom 15s ease-in-out infinite alternate;
}

/* HERO ANIMATION */

@keyframes heroZoom{

    0%{
        background-size:100%;
    }

    100%{
        background-size:110%;
    }
}

/* FLOATING GLOW */

.gst-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

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

    border-radius:50%;

    top:-150px;
    left:-100px;

    filter:blur(80px);

    animation:floatGlow 8s infinite alternate;
}

.gst-hero::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:
    rgba(0,102,255,0.15);

    border-radius:50%;

    bottom:-120px;
    right:-120px;

    filter:blur(90px);

    animation:floatGlow2 10s infinite alternate;
}

@keyframes floatGlow{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(80px,60px);
    }
}

@keyframes floatGlow2{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(-80px,-60px);
    }
}

/* HERO CONTENT */

.gst-overlay{

    position:relative;

    z-index:5;

    max-width:850px;

    padding:40px;
}

.gst-overlay h1{

    font-size:78px;

    color:white;

    margin-bottom:25px;

    font-weight:700;

    line-height:1.2;

    text-shadow:
    0 0 25px rgba(255,255,255,0.15);
}

.gst-overlay p{

    font-size:22px;

    color:#dbeafe;

    line-height:1.9;

    margin-bottom:40px;
}

/* HERO BUTTON */

.gst-overlay button{

    padding:18px 40px;

    border:none;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    #00c896,
    #0066ff
    );

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:0.4s;

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

.gst-overlay button:hover{

    transform:
    translateY(-6px)
    scale(1.03);

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

/* MAIN SECTION */

.gst-main{

    width:92%;

    margin:90px auto;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;
}

/* LEFT CONTENT */

.gst-text{

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

    backdrop-filter:blur(18px);

    padding:55px;

    border-radius:35px;

    border:
    1px solid rgba(255,255,255,0.25);

    box-shadow:
    0 15px 45px rgba(0,0,0,0.08);

    position:relative;

    overflow:hidden;
}

/* TOP GLOW */

.gst-text::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:
    rgba(0,200,150,0.08);

    border-radius:50%;

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

    filter:blur(60px);
}

.gst-text h2{

    font-size:34px;

    color:#071a2f;

    margin-bottom:20px;

    margin-top:40px;

    position:relative;
}

.gst-text h2::after{

    content:"";

    display:block;

    width:70px;
    height:4px;

    margin-top:12px;

    border-radius:20px;

    background:
    linear-gradient(
    90deg,
    #00c896,
    #0066ff
    );
}

.gst-text p{

    font-size:18px;

    line-height:2;

    color:#444;

    margin-bottom:20px;
}

/* LIST */

.gst-text ul{

    margin-top:20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    padding:0;
}

.gst-text ul li{

    list-style:none;

    background:white;

    padding:18px 20px;

    border-radius:18px;

    font-size:17px;

    color:#222;

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

    transition:0.4s;
}

.gst-text ul li:hover{

    transform:
    translateY(-6px);

    background:
    linear-gradient(
    135deg,
    #00c896,
    #0066ff
    );

    color:white;
}

/* SIDE FORM */

.gst-side-form{

    background:
    linear-gradient(
    135deg,
    #02111f,
    #071a2f,
    #003566
    );

    padding:40px;

    border-radius:35px;

    position:sticky;

    top:120px;

    height:fit-content;

    overflow:hidden;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.18);
}

/* FORM GLOW */

.gst-side-form::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    background:
    rgba(0,255,200,0.10);

    border-radius:50%;

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

    filter:blur(60px);
}

.gst-side-form h2{

    text-align:center;

    color:white;

    font-size:36px;

    margin-bottom:30px;

    position:relative;

    z-index:2;
}

.gst-side-form form{

    display:flex;

    flex-direction:column;

    gap:18px;

    position:relative;

    z-index:2;
}

.gst-side-form input,
.gst-side-form select,
.gst-side-form textarea{

    padding:17px 18px;

    border:none;

    border-radius:16px;

    outline:none;

    font-size:16px;

    color:white;

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

    backdrop-filter:blur(12px);
}

.gst-side-form input::placeholder,
.gst-side-form textarea::placeholder{

    color:#dbeafe;
}

.gst-side-form option{

    color:black;
}

.gst-side-form button{

    padding:18px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #00c896,
    #00a2ff
    );

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:0.4s;
}

.gst-side-form button:hover{

    transform:
    translateY(-5px);

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

/* FEATURES */

.gst-features{

    width:92%;

    margin:100px auto;

    text-align:center;
}

.gst-features h1{

    font-size:55px;

    color:#071a2f;

    margin-bottom:55px;
}

/* GRID */

.feature-grid{

    display:grid;

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

    gap:30px;
}

/* BOX */

.feature-box{

    background:white;

    padding:45px 30px;

    border-radius:30px;

    transition:0.4s;

    position:relative;

    overflow:hidden;

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

/* HOVER GLOW */

.feature-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(0,200,150,0.08),
    rgba(0,102,255,0.08)
    );

    opacity:0;

    transition:0.4s;
}

.feature-box:hover::before{

    opacity:1;
}

.feature-box:hover{

    transform:
    translateY(-12px)
    scale(1.02);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.15);
}

.feature-box h2{

    font-size:28px;

    margin-bottom:18px;

    color:#003566;

    position:relative;

    z-index:2;
}

.feature-box p{

    line-height:1.9;

    color:#555;

    position:relative;

    z-index:2;
}

/* RESPONSIVE */

@media(max-width:1000px){

    .gst-main{

        grid-template-columns:1fr;
    }

    .feature-grid{

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

    .gst-overlay h1{

        font-size:55px;
    }

    .gst-text ul{

        grid-template-columns:1fr;
    }
}

@media(max-width:700px){

    .feature-grid{

        grid-template-columns:1fr;
    }

    .gst-overlay h1{

        font-size:40px;
    }

    .gst-overlay p{

        font-size:18px;
    }

    .gst-text,
    .gst-side-form{

        padding:30px;
    }

    .gst-features h1{

        font-size:38px;
    }
}
/* ===================================
   FLOATING LUXURY BACKGROUND
=================================== */

/* BODY */

body{

    background:
    linear-gradient(
    135deg,
    #eef4ff,
    #f8fbff,
    #edf6ff
    );

    position:relative;

    overflow-x:hidden;
}

/* =========================
   FLOATING BLUR CIRCLE 1
========================= */

body::before{

    content:"";

    position:fixed;

    width:450px;
    height:450px;

    background:
    rgba(0,102,255,0.15);

    border-radius:50%;

    top:-120px;
    left:-120px;

    filter:blur(90px);

    z-index:-1;

    animation:
    floatingShape1 10s infinite alternate ease-in-out;
}

/* =========================
   FLOATING BLUR CIRCLE 2
========================= */

body::after{

    content:"";

    position:fixed;

    width:400px;
    height:400px;

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

    border-radius:50%;

    bottom:-120px;
    right:-120px;

    filter:blur(90px);

    z-index:-1;

    animation:
    floatingShape2 12s infinite alternate ease-in-out;
}

/* =========================
   EXTRA FLOATING SHAPES
========================= */

.gst-main::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

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

    border-radius:50%;

    top:-80px;
    right:10%;

    filter:blur(60px);

    animation:
    floatingShape3 8s infinite alternate ease-in-out;
}

.gst-main::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(0,200,255,0.18);

    border-radius:50%;

    bottom:-50px;
    left:5%;

    filter:blur(50px);

    animation:
    floatingShape4 7s infinite alternate ease-in-out;
}

/* =========================
   PARTICLES
========================= */

.particles{

    position:fixed;

    width:100%;
    height:100%;

    top:0;
    left:0;

    pointer-events:none;

    z-index:-1;
}

.particles span{

    position:absolute;

    display:block;

    width:12px;
    height:12px;

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

    border-radius:50%;

    animation:
    particleMove 20s linear infinite;
}

/* RANDOM POSITIONS */

.particles span:nth-child(1){

    left:10%;
    animation-duration:18s;
    animation-delay:0s;
}

.particles span:nth-child(2){

    left:25%;
    animation-duration:22s;
    animation-delay:2s;
}

.particles span:nth-child(3){

    left:40%;
    animation-duration:16s;
    animation-delay:4s;
}

.particles span:nth-child(4){

    left:55%;
    animation-duration:24s;
    animation-delay:1s;
}

.particles span:nth-child(5){

    left:70%;
    animation-duration:19s;
    animation-delay:3s;
}

.particles span:nth-child(6){

    left:85%;
    animation-duration:26s;
    animation-delay:5s;
}

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

@keyframes floatingShape1{

    0%{

        transform:
        translate(0,0)
        scale(1);
    }

    100%{

        transform:
        translate(80px,60px)
        scale(1.15);
    }
}

@keyframes floatingShape2{

    0%{

        transform:
        translate(0,0)
        scale(1);
    }

    100%{

        transform:
        translate(-70px,-50px)
        scale(1.12);
    }
}

@keyframes floatingShape3{

    0%{

        transform:
        translateY(0);
    }

    100%{

        transform:
        translateY(40px);
    }
}

@keyframes floatingShape4{

    0%{

        transform:
        translateX(0);
    }

    100%{

        transform:
        translateX(40px);
    }
}

/* PARTICLE FLOAT */

@keyframes particleMove{

    0%{

        transform:
        translateY(100vh)
        scale(0);

        opacity:0;
    }

    20%{

        opacity:1;
    }

    80%{

        opacity:1;
    }

    100%{

        transform:
        translateY(-120px)
        scale(1.5);

        opacity:0;
    }
}
/* ===================================
   DARK PREMIUM SECTION
=================================== */

.dark-premium-section{

    position:relative;

    width:92%;

    margin:120px auto;

    padding:100px 60px;

    border-radius:40px;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #020617,
    #071428,
    #0f172a
    );

    box-shadow:
    0 20px 60px rgba(0,0,0,0.35);
}

/* OVERLAY GLOW */

.dark-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top left,
    rgba(0,255,200,0.18),
    transparent 35%
    ),

    radial-gradient(
    circle at bottom right,
    rgba(0,102,255,0.18),
    transparent 35%
    );

    animation:
    premiumGlow 8s infinite alternate;
}

/* CONTENT */

.dark-content{

    position:relative;

    z-index:2;

    text-align:center;
}

.dark-content h1{

    font-size:58px;

    color:white;

    max-width:950px;

    margin:auto;

    line-height:1.3;

    margin-bottom:25px;

    font-weight:700;

    text-shadow:
    0 0 20px rgba(0,255,200,0.2);
}

.dark-content p{

    color:#cbd5e1;

    font-size:20px;

    line-height:1.9;

    max-width:850px;

    margin:auto;

    margin-bottom:70px;
}

/* CARD GRID */

.dark-card-grid{

    display:grid;

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

    gap:35px;
}

/* GLASS CARDS */

.dark-card{

    position:relative;

    padding:45px 35px;

    border-radius:30px;

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

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

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:0.5s;
}

/* CARD GLOW */

.dark-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,200,0.12),
    rgba(0,102,255,0.12)
    );

    opacity:0;

    transition:0.5s;
}

.dark-card:hover::before{

    opacity:1;
}

/* HOVER */

.dark-card:hover{

    transform:
    translateY(-12px)
    scale(1.03);

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

/* TITLE */

.dark-card h2{

    position:relative;

    z-index:2;

    color:white;

    font-size:30px;

    margin-bottom:20px;
}

/* TEXT */

.dark-card p{

    position:relative;

    z-index:2;

    color:#dbeafe;

    font-size:17px;

    line-height:1.9;
}

/* GLOW ANIMATION */

@keyframes premiumGlow{

    0%{

        transform:
        scale(1)
        rotate(0deg);
    }

    100%{

        transform:
        scale(1.08)
        rotate(2deg);
    }
}

/* RESPONSIVE */

@media(max-width:1000px){

    .dark-card-grid{

        grid-template-columns:1fr;
    }

    .dark-content h1{

        font-size:42px;
    }
}

@media(max-width:700px){

    .dark-premium-section{

        padding:70px 25px;
    }

    .dark-content h1{

        font-size:34px;
    }

    .dark-content p{

        font-size:17px;
    }
}
/* ===================================
   ULTRA PREMIUM HORIZONTAL SECTION
=================================== */

.premium-horizontal-section{

    width:92%;

    margin:90px auto;

    display:flex;

    flex-direction:column;

    gap:35px;
}

/* CARD */

.premium-horizontal-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:35px;

    background:
    linear-gradient(
    135deg,
    #071a2f,
    #0d2b45,
    #003566
    );

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

    box-shadow:
    0 20px 50px rgba(0,0,0,0.25);

    transition:0.5s;
}

/* GLOW EFFECT */

.premium-horizontal-card::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:
    radial-gradient(
    rgba(0,255,213,0.18),
    transparent 70%
    );

    top:-160px;
    right:-120px;

    filter:blur(70px);

    animation:premiumGlow 8s infinite alternate;
}

.premium-horizontal-card::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    background:
    radial-gradient(
    rgba(0,102,255,0.15),
    transparent 70%
    );

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

    filter:blur(70px);

    animation:premiumGlow2 9s infinite alternate;
}

/* HOVER */

.premium-horizontal-card:hover{

    transform:
    translateY(-10px)
    scale(1.01);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.35);
}

/* TITLE */

.premium-title{

    position:relative;

    z-index:2;

    margin-bottom:35px;
}

.premium-title h2{

    font-size:42px;

    color:white;

    font-weight:700;

    letter-spacing:1px;
}

/* LINE */

.premium-line{

    width:90px;
    height:5px;

    margin-top:12px;

    border-radius:20px;

    background:
    linear-gradient(
    90deg,
    #00ffd5,
    #0066ff
    );

    box-shadow:
    0 0 18px rgba(0,255,213,0.5);
}

/* TAGS WRAP */

.premium-tags{

    position:relative;

    z-index:2;

    display:flex;

    flex-wrap:wrap;

    gap:20px;
}

/* SINGLE TAG */

.premium-tag{

    padding:18px 26px;

    border-radius:60px;

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

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.1);

    color:white;

    font-size:16px;

    font-weight:500;

    letter-spacing:0.3px;

    transition:0.4s;

    cursor:pointer;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.15);
}

/* TAG HOVER */

.premium-tag:hover{

    transform:
    translateY(-8px)
    scale(1.05);

    background:
    linear-gradient(
    135deg,
    rgba(0,255,213,0.22),
    rgba(0,102,255,0.22)
    );

    border:
    1px solid rgba(0,255,213,0.25);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.28),
    0 0 25px rgba(0,255,213,0.18);
}

/* ANIMATIONS */

@keyframes premiumGlow{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(70px,40px);
    }
}

@keyframes premiumGlow2{

    0%{
        transform:translate(0,0);
    }

    100%{
        transform:translate(-70px,-40px);
    }
}

/* MOBILE */

@media(max-width:768px){

    .premium-horizontal-card{

        padding:30px;
    }

    .premium-title h2{

        font-size:32px;
    }

    .premium-tags{

        flex-direction:column;
    }

    .premium-tag{

        width:100%;
    }
}
/* FIX CLICK ISSUE */

.gst-hero::before,
.gst-hero::after,
.dark-overlay,
.dark-premium-section::before,
.dark-premium-section::after{

    pointer-events:none;
}

/* NAVBAR ALWAYS ON TOP */

.navbar{

    position:relative;

    z-index:9999;
}
/* ===================================
   TESTIMONIAL SECTION
=================================== */

.testimonial-section{

    width:92%;

    margin:120px auto;

    overflow:hidden;
}

/* HEADING */

.testimonial-heading{

    text-align:center;

    margin-bottom:60px;
}

.testimonial-heading h1{

    font-size:55px;

    color:#071a2f;

    margin-bottom:15px;
}

.testimonial-heading p{

    font-size:20px;

    color:#555;
}

/* SLIDER */

.testimonial-slider{

    position:relative;

    overflow:hidden;

    width:100%;
}

/* TRACK */

.testimonial-track{

    display:flex;

    gap:30px;

    width:calc(350px * 16);

    animation:scrollSlider 35s linear infinite;
}

/* CARD */

.testimonial-card{

    min-width:350px;

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

    backdrop-filter:blur(15px);

    border-radius:30px;

    padding:40px 30px;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.08);

    border:
    1px solid rgba(255,255,255,0.2);

    transition:0.4s;

    position:relative;

    overflow:hidden;
}

/* GLOW EFFECT */

.testimonial-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,200,0.08),
    rgba(0,102,255,0.08)
    );

    opacity:0;

    transition:0.4s;
}

.testimonial-card:hover::before{

    opacity:1;
}

.testimonial-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.15);
}

/* STARS */

.stars{

    font-size:24px;

    color:#ffb400;

    margin-bottom:20px;

    position:relative;

    z-index:2;
}

/* TEXT */

.testimonial-card p{

    font-size:17px;

    line-height:1.9;

    color:#444;

    margin-bottom:25px;

    position:relative;

    z-index:2;
}

/* NAME */

.testimonial-card h3{

    font-size:24px;

    color:#071a2f;

    margin-bottom:8px;

    position:relative;

    z-index:2;
}

/* ROLE */

.testimonial-card span{

    color:#0066ff;

    font-weight:500;

    position:relative;

    z-index:2;
}

/* AUTO SLIDER */

@keyframes scrollSlider{

    0%{

        transform:translateX(0);
    }

    100%{

        transform:translateX(calc(-350px * 8));
    }
}

/* PAUSE ON HOVER */

.testimonial-slider:hover .testimonial-track{

    animation-play-state:paused;
}

/* MOBILE */

@media(max-width:768px){

    .testimonial-heading h1{

        font-size:38px;
    }

    .testimonial-heading p{

        font-size:17px;
    }

    .testimonial-card{

        min-width:300px;
    }
}
/* ===================================
   PREMIUM FORM UPGRADE
=================================== */

/* INPUT BOX */

.input-box{

    position:relative;

    display:flex;

    align-items:center;
}

/* ICON */

.input-box i{

    position:absolute;

    left:18px;

    color:#00ffd5;

    font-size:16px;

    z-index:5;
}

/* INPUTS */

.input-box input,
.input-box select,
.input-box textarea{

    width:100%;

    padding:
    18px 18px 18px 50px;

    border:none;

    border-radius:18px;

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

    color:white;

    font-size:16px;

    outline:none;

    transition:0.4s;

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

    backdrop-filter:blur(10px);
}

/* PLACEHOLDER */

.input-box input::placeholder,
.input-box textarea::placeholder{

    color:#cbd5e1;
}

/* FOCUS GLOW */

.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus{

    border:
    1px solid rgba(0,255,213,0.4);

    box-shadow:
    0 0 20px rgba(0,255,213,0.18);

    transform:
    translateY(-2px);
}

/* TEXTAREA */

.textarea-box{

    align-items:flex-start;
}

.textarea-box i{

    top:20px;
}

/* SUBMIT BUTTON */

.gst-side-form button{

    margin-top:10px;
}

/* WHATSAPP BUTTON */

.whatsapp-btn{

    margin-top:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-decoration:none;

    padding:18px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #25d366,
    #128c7e
    );

    color:white;

    font-size:17px;

    font-weight:600;

    transition:0.4s;

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

/* WHATSAPP HOVER */

.whatsapp-btn:hover{

    transform:
    translateY(-5px)
    scale(1.02);

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

/* ICON */

.whatsapp-btn i{

    font-size:22px;
}
/* ===================================
   BLOG SECTION
=================================== */

.blog-section{

    width:92%;

    margin:120px auto;
}

/* HEADING */

.blog-heading{

    text-align:center;

    margin-bottom:60px;
}

.blog-heading h1{

    font-size:52px;

    color:#071a2f;

    margin-bottom:15px;
}

.blog-heading p{

    font-size:18px;

    color:#555;
}

/* GRID */

.blog-grid{

    display:grid;

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

    gap:35px;
}

/* CARD */

.blog-card{

    background:white;

    border-radius:30px;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.08);

    transition:0.4s;
}

/* IMAGE */

.blog-image{

    height:250px;

    overflow:hidden;
}

.blog-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.5s;
}

/* CONTENT */

.blog-content{

    padding:30px;
}

.blog-content span{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:30px;

    background:
    rgba(0,102,255,0.1);

    color:#0066ff;

    font-size:14px;

    font-weight:600;
}

.blog-content h2{

    font-size:28px;

    color:#071a2f;

    line-height:1.5;

    margin-bottom:18px;
}

.blog-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:25px;
}

/* BUTTON */

.blog-content a{

    text-decoration:none;

    color:#0066ff;

    font-weight:600;

    transition:0.4s;
}

.blog-content a:hover{

    letter-spacing:1px;
}

/* HOVER */

.blog-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.15);
}

.blog-card:hover img{

    transform:scale(1.08);
}

/* MOBILE */

@media(max-width:1000px){

    .blog-grid{

        grid-template-columns:1fr;
    }
}
/* ===================================
   FLOATING WHATSAPP BUTTON
=================================== */

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:70px;
    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #25d366,
    #128c7e
    );

    color:white;

    font-size:38px;

    text-decoration:none;

    z-index:99999;

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

    transition:0.4s;

    animation:
    whatsappFloat 2.5s infinite ease-in-out;
}

/* HOVER */

.floating-whatsapp:hover{

    transform:
    scale(1.12)
    translateY(-5px);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.35);
}

/* GLOW EFFECT */

.floating-whatsapp::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    background:
    rgba(37,211,102,0.35);

    z-index:-1;

    animation:
    pulse 2s infinite;
}

/* ICON */

.floating-whatsapp i{

    position:relative;

    z-index:2;
}

/* FLOAT */

@keyframes whatsappFloat{

    0%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-8px);
    }

    100%{

        transform:translateY(0);
    }
}

/* PULSE */

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:0.7;
    }

    70%{

        transform:scale(1.4);

        opacity:0;
    }

    100%{

        opacity:0;
    }
}

/* MOBILE */

@media(max-width:768px){

    .floating-whatsapp{

        width:60px;
        height:60px;

        font-size:32px;

        right:18px;
        bottom:18px;
    }
}
/* FLOATING WHATSAPP BUTTON */

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;
    height:65px;

    background:#25d366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:35px;

    text-decoration:none;

    z-index:99999;

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

    animation:whatsappFloat 2s infinite;
}

/* HOVER */

.floating-whatsapp:hover{

    transform:scale(1.1);

    transition:0.3s;
}

/* FLOAT ANIMATION */

@keyframes whatsappFloat{

    0%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-8px);
    }

    100%{

        transform:translateY(0);
    }
}