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

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

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

:root{

    --primary:#E30613;
    --primary-dark:#B8000C;
    --secondary:#FFD200;

    --black:#111111;
    --dark:#1F2937;

    --white:#FFFFFF;

    --gray:#6B7280;
    --gray-light:#F5F7FA;
    --border:#E5E7EB;

    --success:#22C55E;

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);
    --shadow-md:0 12px 30px rgba(0,0,0,.12);
    --shadow-lg:0 25px 60px rgba(0,0,0,.18);

    --radius:18px;
    --radius-sm:12px;

    --transition:.35s ease;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:#fff;

    color:var(--dark);

    overflow-x:hidden;

    line-height:1.7;

}

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

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--black);

    font-weight:700;

    line-height:1.2;

}

p{

    color:var(--gray);

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    width:100%;

    display:block;

}

ul{

    list-style:none;

}

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

.container{

    width:100%;

    max-width:1280px;

    margin:auto;

    padding:0 20px;

}

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

section{

    padding:100px 0;

    position:relative;

}

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

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:14px;

}

.section-title h2{

    font-size:46px;

    margin-bottom:18px;

}

.section-title h2 span{

    color:var(--primary);

    font-size:inherit;

    letter-spacing:0;

    text-transform:none;

}

.section-title p{

    font-size:17px;

}

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

.btn-primary,
.btn-secondary,
.btn-daftar{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    box-shadow:0 12px 30px rgba(227,6,19,.35);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.btn-secondary{

    border:2px solid #fff;

    color:#fff;

}

.btn-secondary:hover{

    background:#fff;

    color:var(--primary);

}

.btn-daftar{

    background:var(--primary);

    color:#fff;

}

.btn-daftar:hover{

    background:var(--primary-dark);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

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

::selection{

    background:var(--primary);

    color:#fff;

}

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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:.4s ease;

}

header.scrolled{

    background:#ffffff;

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

}

/*==================================================
NAVBAR
==================================================*/

.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:56px;

    width:auto;

    transition:.35s;

}

header.scrolled .logo img{

    height:52px;

}

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

.menu{

    display:flex;

    align-items:center;

    gap:40px;

}

.menu li{

    position:relative;

}

.menu a{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    position:relative;

    transition:.35s;

}

/* warna menu saat navbar putih */

header.scrolled .menu a{

    color:var(--black);

}

/* hover */

.menu a:hover{

    color:var(--secondary);

}

header.scrolled .menu a:hover{

    color:var(--primary);

}

/* active */

.menu a.active{

    color:var(--secondary);

}

header.scrolled .menu a.active{

    color:var(--primary);

}

/* underline */

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

header.scrolled .menu a::after{

    background:var(--primary);

}

.menu a:hover::after,

.menu a.active::after{

    width:100%;

}

/*==================================================
BUTTON DAFTAR
==================================================*/

.btn-daftar{

    height:50px;

    padding:0 28px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-size:15px;

    font-weight:700;

    box-shadow:0 10px 25px rgba(227,6,19,.25);

}

.btn-daftar:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(227,6,19,.35);

}

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

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    z-index:10001;

}

.menu-toggle span{

    width:28px;

    height:3px;

    border-radius:20px;

    background:#ffffff;

    transition:.35s;

}

header.scrolled .menu-toggle span{

    background:var(--black);

}

/* animasi */

.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}

/*==================================================
MOBILE OVERLAY
==================================================*/

.mobile-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9990;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

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

.hero-slider{

    position:relative;

    width:100%;

    height:100vh;

    min-height:760px;

    overflow:hidden;

}

.slider{

    position:relative;

    width:100%;

    height:100%;

}

/*==================================================
SLIDE
==================================================*/

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:opacity 1s ease,
               visibility 1s ease;

}

.slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1);

    transition:transform 8s linear;

}

.slide.active img{

    transform:scale(1.08);

}

/*==================================================
OVERLAY
==================================================*/

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.20) 100%
    );

    z-index:1;

}

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

.hero-content{

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    max-width:650px;

    z-index:5;

    color:#fff;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:68px;

    line-height:1.1;

    color:#fff;

    margin-bottom:25px;

}

.hero-content h1 span{

    color:var(--secondary);

}

.hero-content p{

    font-size:20px;

    color:#fff;

    opacity:.95;

    margin-bottom:35px;

}

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

.hero-button{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:40px;

}

/*==================================================
INFO
==================================================*/

.hero-info{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

}

.hero-info div{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-size:15px;

}

.hero-info i{

    color:var(--secondary);

}

/*==================================================
PREV NEXT
==================================================*/

.hero-prev,
.hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    color:#fff;

    cursor:pointer;

    transition:.35s;

    z-index:20;

}

.hero-prev{

    left:40px;

}

.hero-next{

    right:40px;

}

.hero-prev:hover,
.hero-next:hover{

    background:var(--primary);

    transform:translateY(-50%) scale(1.08);

}

/*==================================================
DOTS
==================================================*/

.hero-dots{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:20;

}

.hero-dots .dot{

    width:12px;

    height:12px;

    border-radius:20px;

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

    cursor:pointer;

    transition:.35s;

}

.hero-dots .dot.active{

    width:42px;

    background:var(--secondary);

}

/*==================================================
SCROLL DOWN
==================================================*/

.scroll-down{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    z-index:30;

}

.scroll-down a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.scroll-down span{

    width:26px;

    height:42px;

    border:2px solid #fff;

    border-radius:30px;

    position:relative;

}

.scroll-down span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:4px;

    height:8px;

    background:#fff;

    border-radius:20px;

    transform:translateX(-50%);

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

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

    }

}

/*==================================================
PAKET V2
PART 2
LAYOUT & CARD
==================================================*/

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

.paket{

    padding:120px 0;

    background:#f7f9fc;

    position:relative;

    overflow:hidden;

}

.paket::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-280px;

    top:-280px;

    border-radius:50%;

    background:rgba(227,6,19,.04);

}

.paket::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-350px;

    bottom:-350px;

    border-radius:50%;

    background:rgba(255,213,0,.05);

}

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

.paket .container{

    max-width:1320px;

    margin:auto;

    padding:0 20px;

    position:relative;

    z-index:2;

}

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

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

.paket-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}

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

.paket-card{

    background:#fff;

    border-radius:28px;

    padding:35px;

    position:relative;

    display:flex;

    flex-direction:column;

    border:1px solid #ececec;

    box-shadow:

        0 15px 40px rgba(0,0,0,.06);

    transition:.35s;

    overflow:hidden;

    min-height:680px;

}

.paket-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 25px 60px rgba(227,6,19,.15);

}

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

.paket-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

/*==============================
LABEL
==============================*/

.paket-label{

    background:#eef2f7;

    color:#374151;

    font-size:13px;

    font-weight:700;

    padding:8px 18px;

    border-radius:999px;

}

.paket-label.merah{

    background:#E30613;

    color:#fff;

}

.paket-label.emas{

    background:#FFD54A;

    color:#111;

}

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

.paket-icon{

    width:82px;

    height:82px;

    border-radius:22px;

    background:linear-gradient(135deg,#E30613,#ff4b57);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    box-shadow:

        0 18px 35px rgba(227,6,19,.25);

}

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

.paket-card h3{

    font-size:36px;

    font-weight:800;

    color:#111827;

    margin-bottom:18px;

    line-height:1.2;

}

/*==============================
DESCRIPTION
==============================*/

.paket-desc{

    color:#6b7280;

    font-size:15px;

    line-height:1.8;

    margin-bottom:28px;

    min-height:90px;

}

/*==============================
POPULAR
==============================*/

.ribbon{

    position:absolute;

    top:22px;

    right:-52px;

    width:190px;

    text-align:center;

    background:#FFD200;

    color:#111;

    font-size:12px;

    font-weight:800;

    padding:8px 0;

    transform:rotate(45deg);

    letter-spacing:1px;

}

/*==================================================
PAKET V2
PART 3
PRICE • FEATURE • BUTTON • HOVER
==================================================*/

/*==============================
PRICE
==============================*/

.paket-price{

    display:flex;

    align-items:flex-end;

    gap:8px;

    margin-bottom:30px;

    padding-bottom:25px;

    border-bottom:1px solid #ececec;

}

.paket-price .currency{

    font-size:18px;

    font-weight:700;

    color:#E30613;

    margin-bottom:8px;

}

.paket-price strong{

    font-size:46px;

    line-height:1;

    font-weight:800;

    color:#E30613;

    letter-spacing:-1px;

}

.paket-price small{

    font-size:15px;

    color:#777;

    margin-bottom:8px;

}

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

.paket-feature{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:16px;

    flex:1;

}

.paket-feature li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#4b5563;

    font-size:15px;

    line-height:1.7;

}

.paket-feature li i{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#E30613;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    flex-shrink:0;

    transition:.35s;

}

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

.paket-btn{

    width:100%;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    border-radius:16px;

    background:linear-gradient(135deg,#E30613,#c50012);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    transition:.35s;

    box-shadow:0 15px 35px rgba(227,6,19,.22);

    position:relative;

    overflow:hidden;

}

.paket-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.paket-btn:hover::before{

    left:140%;

}

.paket-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(227,6,19,.28);

}

.paket-btn:active{

    transform:scale(.98);

}

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

.paket-card:hover .paket-icon{

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

}

.paket-card:hover h3{

    color:#E30613;

}

.paket-card:hover .paket-feature li{

    transform:translateX(6px);

}

.paket-card:hover .paket-feature li i{

    background:#FFD200;

    color:#111;

}

/*==============================
POPULAR
==============================*/

.paket-card.populer{

    border:2px solid #E30613;

}

.paket-card.populer .paket-btn{

    background:linear-gradient(135deg,#ff0022,#E30613);

}

/*==============================
EQUAL HEIGHT
==============================*/

.paket-card{

    display:flex;

    flex-direction:column;

}

.paket-feature{

    flex:1;

}

.paket-btn{

    margin-top:auto;

}

/*==============================
TRANSITION
==============================*/

.paket-card,
.paket-icon,
.paket-feature li,
.paket-feature li i,
.paket-btn,
.paket-card h3{

    transition:all .35s ease;

}

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

.paket-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.16),
        transparent 45%
    );

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.paket-card:hover::after{

    opacity:1;

}

/*==============================
TOP BORDER
==============================*/

.paket-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #E30613,
        #ff4b57,
        #FFD200
    );

}

/*==================================================
PAKET V2
PART 4
RESPONSIVE FINAL
==================================================*/

/*==============================
1400px
==============================*/

@media (max-width:1400px){

    .paket .container{

        max-width:1200px;

    }

    .paket-grid{

        gap:24px;

    }

}

/*==============================
1200px
==============================*/

@media (max-width:1200px){

    .paket{

        padding:100px 0;

    }

    .paket-grid{

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

        gap:30px;

    }

    .paket-card{

        min-height:unset;

    }

    .section-title h2{

        font-size:42px;

    }

}

/*==============================
992px
==============================*/

@media (max-width:992px){

    .paket{

        padding:90px 0;

    }

    .paket-grid{

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

        gap:24px;

    }

    .paket-card{

        padding:30px;

    }

    .paket-card h3{

        font-size:32px;

    }

    .paket-price strong{

        font-size:40px;

    }

    .paket-desc{

        min-height:auto;

    }

}

/*==============================
768px
==============================*/

@media (max-width:768px){

    .paket{

        padding:80px 0;

    }

    .paket-grid{

        grid-template-columns:1fr;

        gap:24px;

        max-width:560px;

        margin:auto;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:16px;

    }

    .paket-card{

        min-height:auto;

        padding:28px;

    }

    .paket-icon{

        width:72px;

        height:72px;

        font-size:30px;

    }

    .paket-card.populer{

        transform:none;

    }

}

/*==============================
576px
==============================*/

@media (max-width:576px){

    .paket .container{

        padding:0 18px;

    }

    .section-title h2{

        font-size:30px;

    }

    .section-title p{

        font-size:15px;

    }

    .paket-card{

        padding:24px;

        border-radius:22px;

    }

    .paket-card h3{

        font-size:28px;

    }

    .paket-price strong{

        font-size:34px;

    }

    .paket-price small{

        font-size:14px;

    }

    .paket-btn{

        height:52px;

        font-size:15px;

    }

}

/*==============================
430px
==============================*/

@media (max-width:430px){

    .paket{

        padding:70px 0;

    }

    .paket-grid{

        gap:20px;

    }

    .paket-card{

        padding:22px;

    }

    .paket-card h3{

        font-size:26px;

    }

    .paket-price{

        gap:6px;

    }

    .paket-price strong{

        font-size:30px;

    }

    .paket-price .currency{

        font-size:16px;

    }

    .paket-feature li{

        font-size:14px;

    }

}

/*==============================
375px
==============================*/

@media (max-width:375px){

    .section-title h2{

        font-size:26px;

    }

    .paket-card{

        padding:20px;

    }

    .paket-card h3{

        font-size:24px;

    }

    .paket-price strong{

        font-size:28px;

    }

    .paket-icon{

        width:64px;

        height:64px;

        font-size:26px;

    }

}

/*==============================
320px
==============================*/

@media (max-width:320px){

    .paket .container{

        padding:0 14px;

    }

    .paket-card{

        padding:18px;

    }

    .paket-card h3{

        font-size:22px;

    }

    .paket-price strong{

        font-size:24px;

    }

    .paket-btn{

        height:48px;

        font-size:14px;

    }

}

/*==================================================
DESKTOP FIX
==================================================*/

@media (min-width:1201px){

    .paket-grid{

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

    }

    .paket-card{

        min-height:700px;

    }

    .paket-desc{

        min-height:72px;

    }

    .paket-feature{

        min-height:170px;

    }

}

/*==================================================
TEXT FIX
==================================================*/

.paket-card h3{

    word-break:normal;

    overflow-wrap:break-word;

}

.paket-desc{

    word-break:normal;

    overflow-wrap:break-word;

}

.paket-feature li{

    word-break:break-word;

}

/*==================================================
BUTTON FIX
==================================================*/

.paket-btn{

    flex-shrink:0;

}

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

.paket-grid{

    align-items:stretch;

}

.paket-card{

    display:flex;

    flex-direction:column;

}

.paket-feature{

    flex:1;

}

.paket-btn{

    margin-top:auto;

}

/*==================================================
KEUNGGULAN
==================================================*/

.keunggulan{

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.keunggulan::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-250px;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
    rgba(227,6,19,.08),
    transparent 70%);

    border-radius:50%;

}

.keunggulan::after{

    content:"";

    position:absolute;

    bottom:-250px;

    left:-250px;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
    rgba(255,210,0,.08),
    transparent 70%);

    border-radius:50%;

}

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

.keunggulan-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:35px;

}

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

.keunggulan-card{

    background:#ffffff;

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

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

    transition:.4s;

    border:1px solid rgba(0,0,0,.05);

    overflow:hidden;

    position:relative;

}

.keunggulan-card:hover{

    transform:translateY(-12px);

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

}

/*==================================================
TOP BORDER
==================================================*/

.keunggulan-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

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

    transition:.4s;

}

.keunggulan-card:hover::before{

    width:100%;

}

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

.keunggulan-card .icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#ffffff;

    font-size:36px;

    transition:.4s;

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

}

.keunggulan-card:hover .icon{

    transform:rotateY(180deg);

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

    color:#111;

}

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

.keunggulan-card h3{

    font-size:24px;

    margin-bottom:18px;

    color:var(--black);

}

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

.keunggulan-card p{

    font-size:15px;

    color:#666;

    line-height:1.8;

}

/*==================================================
HOVER BACKGROUND
==================================================*/

.keunggulan-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    180deg,
    transparent,
    rgba(227,6,19,.03));

    opacity:0;

    transition:.35s;

}

.keunggulan-card:hover::after{

    opacity:1;

}

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

.keunggulan-card{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
COVERAGE
==================================================*/

.coverage{

    background:linear-gradient(135deg,#E30613 0%,#B8000C 100%);

    position:relative;

    overflow:hidden;

}

.coverage::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

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

    border-radius:50%;

}

.coverage::after{

    content:"";

    position:absolute;

    bottom:-200px;

    left:-200px;

    width:500px;

    height:500px;

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

    border-radius:50%;

}

/*==================================================
WRAPPER
==================================================*/

.coverage-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 520px;

    gap:70px;

    align-items:center;

}

/*==================================================
LEFT
==================================================*/

.coverage-left{

    color:#fff;

}

.coverage-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-weight:600;

    margin-bottom:25px;

}

.coverage-left h2{

    font-size:50px;

    color:#fff;

    line-height:1.2;

    margin-bottom:25px;

}

.coverage-left h2 span{

    color:#FFD200;

}

.coverage-left p{

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

    font-size:17px;

    margin-bottom:35px;

}

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

.coverage-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.coverage-list li{

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

    font-size:17px;

}

.coverage-list i{

    color:#FFD200;

    font-size:18px;

}

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

.coverage-form{

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:40px;

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

}

/*==================================================
INPUT
==================================================*/

.input-group{

    position:relative;

    margin-bottom:22px;

}

.input-group i{

    position:absolute;

    left:18px;

    top:20px;

    color:#E30613;

    font-size:18px;

}

.input-group input,

.input-group textarea{

    width:100%;

    border:none;

    outline:none;

    background:#fff;

    border-radius:16px;

    padding:18px 18px 18px 55px;

    font-size:15px;

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

    transition:.35s;

}

.input-group textarea{

    resize:none;

    min-height:140px;

}

.input-group input:focus,

.input-group textarea:focus{

    box-shadow:0 0 0 3px rgba(227,6,19,.18);

}

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

.coverage-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:50px;

    background:#FFD200;

    color:#111;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:.35s;

}

.coverage-btn:hover{

    background:#fff;

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,0,0,.20);

}

.coverage-btn i{

    font-size:18px;

}

/*==================================================
PROMO
==================================================*/

.promo{

    background:#F8FAFC;

    position:relative;

    overflow:hidden;

}

.promo::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(227,6,19,.05);

}

.promo::after{

    content:"";

    position:absolute;

    bottom:-220px;

    right:-220px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,210,0,.08);

}

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

.promo-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.promo-card{

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

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

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.promo-card:hover{

    transform:translateY(-12px);

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

}

/*==================================================
TOP LINE
==================================================*/

.promo-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

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

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.promo-card:hover::before{

    transform:scaleX(1);

}

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

.promo-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:36px;

    transition:.4s;

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

}

.promo-card:hover .promo-icon{

    transform:rotateY(180deg);

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

    color:#111;

}

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

.promo-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.promo-card p{

    color:#666;

    font-size:15px;

    line-height:1.8;

    margin-bottom:25px;

}

/*==================================================
TAG
==================================================*/

.promo-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:#FFECEC;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

}

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

.promo-cta{

    margin-top:80px;

    padding:70px 50px;

    border-radius:30px;

    text-align:center;

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

    color:#fff;

    box-shadow:0 30px 70px rgba(227,6,19,.25);

}

.promo-cta h3{

    color:#fff;

    font-size:38px;

    margin-bottom:20px;

}

.promo-cta p{

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

    max-width:700px;

    margin:0 auto 35px;

    font-size:17px;

    line-height:1.8;

}

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

.promo-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:58px;

    padding:0 40px;

    border-radius:50px;

    background:#25D366;

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.35s;

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

}

.promo-btn:hover{

    transform:translateY(-4px);

    background:#1EBE5D;

}

.promo-btn i{

    font-size:22px;

}

/*==================================================
TESTIMONI
==================================================*/

.testimoni{

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.testimoni::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-220px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(227,6,19,.05);

}

.testimoni::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-220px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,210,0,.08);

}

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

.testimoni-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:35px;

}

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

.testi-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

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

    transition:.4s;

    border:1px solid rgba(0,0,0,.05);

    display:flex;

    flex-direction:column;

    height:100%;

}

.testi-card:hover{

    transform:translateY(-10px);

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

}

/*==================================================
RATING
==================================================*/

.rating{

    display:flex;

    gap:6px;

    margin-bottom:25px;

}

.rating i{

    color:#FFD200;

    font-size:18px;

}

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

.testi-card p{

    color:#555;

    font-size:15px;

    line-height:1.9;

    flex:1;

    margin-bottom:30px;

}

/*==================================================
USER
==================================================*/

.testi-user{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:auto;

}

.testi-user img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #fff;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.testi-user h4{

    font-size:18px;

    margin-bottom:5px;

    color:var(--black);

}

.testi-user span{

    color:#777;

    font-size:14px;

}

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

.testimoni-counter{

    margin-top:80px;

    display:grid;

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

    gap:30px;

}

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

.counter-box{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.counter-box:hover{

    transform:translateY(-8px);

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

}

.counter-box h3{

    font-size:42px;

    color:var(--primary);

    margin-bottom:10px;

    font-weight:800;

}

.counter-box span{

    color:#666;

    font-size:15px;

    font-weight:500;

}

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

.testi-card,

.counter-box{

    animation:fadeUp .8s ease both;

}

/*==================================================
FAQ
==================================================*/

.faq{

    background:#F8FAFC;

    position:relative;

    overflow:hidden;

}

.faq::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(227,6,19,.05);

}

.faq::after{

    content:"";

    position:absolute;

    bottom:-250px;

    right:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,210,0,.08);

}

/*==================================================
WRAPPER
==================================================*/

.faq-wrapper{

    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;

}

/*==================================================
ITEM
==================================================*/

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

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

    transition:.35s;

}

.faq-item:hover{

    transform:translateY(-4px);

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

}

.faq-item.active{

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

}

/*==================================================
QUESTION
==================================================*/

.faq-question{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:28px 30px;

    cursor:pointer;

}

.faq-question h3{

    font-size:20px;

    color:var(--black);

    padding-right:20px;

    line-height:1.5;

}

.faq-question i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFECEC;

    color:var(--primary);

    font-size:18px;

    transition:.35s;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

    background:var(--primary);

    color:#fff;

}

/*==================================================
ANSWER
==================================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 30px 30px;

    color:#666;

    font-size:15px;

    line-height:1.9;

}

/*==================================================
ACTIVE
==================================================*/

.faq-item.active .faq-answer{

    max-height:300px;

}

.faq-item.active .faq-answer p{

    display:block;

}

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

.faq-item{

    animation:fadeUp .7s ease both;

}

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

.footer{

    background:#111111;

    color:#ffffff;

    position:relative;

    overflow:hidden;

    padding:90px 0 0;

}

.footer::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-220px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(227,6,19,.08);

}

.footer::after{

    content:"";

    position:absolute;

    bottom:-250px;

    left:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,210,0,.05);

}

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

.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:50px;

    padding-bottom:60px;

}

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

.footer-logo{

    width:170px;

    margin-bottom:25px;

}

.footer-col p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:30px;

}

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

.footer-col h3{

    color:#ffffff;

    font-size:22px;

    margin-bottom:25px;

    position:relative;

}

.footer-col h3::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    background:var(--primary);

    margin-top:10px;

    border-radius:20px;

}

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

.footer-col ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-col ul li{

    color:#d5d5d5;

    transition:.3s;

}

.footer-col ul li:hover{

    transform:translateX(8px);

}

.footer-col ul li a{

    color:#d5d5d5;

    transition:.3s;

}

.footer-col ul li a:hover{

    color:#FFD200;

}

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

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    line-height:1.8;

}

.footer-contact i{

    color:var(--secondary);

    width:20px;

    margin-top:4px;

}

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

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#fff;

    font-size:18px;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-6px);

}

/*==================================================
BOTTOM
==================================================*/

.footer-bottom{

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

    padding:30px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:#bdbdbd;

}

.footer-links{

    display:flex;

    gap:30px;

}

.footer-links a{

    color:#d5d5d5;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--secondary);

}

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

.footer-col{

    transition:.35s;

}

.footer-col:hover{

    transform:translateY(-6px);

}

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

.floating-wa{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

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

    z-index:999;

    transition:.35s;

}

.floating-wa:hover{

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

    background:#1EBE5D;

}

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

#backToTop{

    position:fixed;

    right:25px;

    bottom:105px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

    box-shadow:0 12px 30px rgba(227,6,19,.25);

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    transform:translateY(-5px);

    background:var(--primary-dark);

}

/*==================================================
PRELOADER
==================================================*/

#preloader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.6s;

}

#preloader.hide{

    opacity:0;

    visibility:hidden;

}

.loader{

    position:relative;

    width:140px;

    height:140px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.loader img{

    width:70px;

    z-index:2;

}

.loader-ring{

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    border:5px solid #eee;

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

    animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

.fade-in{

    animation:fadeIn 1s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*==================================================
ZOOM
==================================================*/

.zoom-in{

    animation:zoomIn .8s ease forwards;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.text-center{

    text-align:center;

}

.text-white{

    color:#fff;

}

.bg-primary{

    background:var(--primary);

}

.bg-light{

    background:#F8FAFC;

}

.shadow{

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

}

.rounded{

    border-radius:var(--radius);

}

.w-100{

    width:100%;

}

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

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

/*==================================================
SMOOTH TRANSITION
==================================================*/

a,
button,
input,
textarea,
img{

    transition:all .35s ease;

}

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

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

    outline:none;

}

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

/*==================================================
COVERAGE PAGE
PART 1
LAYOUT • HERO • GRID
==================================================*/

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

.page-hero{

    position:relative;

    padding:140px 0 90px;

    background:linear-gradient(135deg,#E30613 0%,#c30010 100%);

    overflow:hidden;

}

.page-hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    left:-320px;

    top:-320px;

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

}

.page-hero::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    right:-280px;

    bottom:-280px;

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

}

.page-content{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:900px;

    margin:auto;

}

.page-content h1{

    font-size:58px;

    font-weight:800;

    color:#fff;

    margin:20px 0;

    line-height:1.15;

}

.page-content p{

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

    font-size:19px;

    line-height:1.8;

    max-width:760px;

    margin:auto;

}

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

.coverage-page{

    position:relative;

    padding:110px 0;

    background:#f8fafc;

    overflow:hidden;

}

.coverage-page::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    left:-220px;

    top:150px;

    background:rgba(227,6,19,.04);

}

.coverage-page::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    right:-300px;

    bottom:-250px;

    background:rgba(255,213,0,.05);

}

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

.coverage-page .container{

    position:relative;

    z-index:2;

    max-width:1320px;

    margin:auto;

    padding:0 20px;

}

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

.coverage-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:start;

}

/*==============================
LEFT
==============================*/

.coverage-info{

    padding-right:10px;

}

.coverage-info h2{

    font-size:46px;

    color:#111827;

    line-height:1.2;

    margin:22px 0;

    font-weight:800;

}

.coverage-info>p{

    color:#6b7280;

    font-size:17px;

    line-height:1.9;

    margin-bottom:45px;

}

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

.info-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:#ffe5e7;

    color:#E30613;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

}

/*==============================
RIGHT CARD
==============================*/

.coverage-form-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

        0 18px 45px rgba(0,0,0,.08);

    position:relative;

    overflow:hidden;

}

.coverage-form-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(

        90deg,

        #E30613,

        #ff4b57,

        #FFD54A

    );

}

.form-header{

    margin-bottom:35px;

}

.form-header h3{

    font-size:32px;

    color:#111827;

    font-weight:800;

    margin-bottom:12px;

}

.form-header p{

    color:#6b7280;

    line-height:1.8;

    font-size:15px;

}

/*==================================================
COVERAGE PAGE
PART 2
INFO • ICON • HOVER
==================================================*/

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

.coverage-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*==============================
ITEM
==============================*/

.coverage-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

    background:#fff;

    padding:28px;

    border-radius:22px;

    border:1px solid rgba(0,0,0,.05);

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

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.coverage-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#E30613;

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.coverage-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(227,6,19,.12);

}

.coverage-item:hover::before{

    transform:scaleY(1);

}

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

.coverage-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #E30613,
        #ff4b57
    );

    color:#fff;

    font-size:30px;

    box-shadow:0 18px 35px rgba(227,6,19,.20);

    transition:.35s;

}

.coverage-item:hover .coverage-icon{

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

}

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

.coverage-item h4{

    font-size:22px;

    font-weight:700;

    color:#111827;

    margin-bottom:10px;

}

.coverage-item p{

    color:#6b7280;

    line-height:1.8;

    font-size:15px;

}

/*==============================
GLASS EFFECT
==============================*/

.coverage-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.16),
        transparent 45%
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.coverage-item:hover::after{

    opacity:1;

}

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

.coverage-form-card{

    transition:.35s;

}

.coverage-form-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(227,6,19,.12);

}

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

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:22px;

}

.form-group label{

    font-size:14px;

    font-weight:600;

    color:#374151;

    margin-bottom:8px;

}

/*==============================
INPUT
==============================*/

.form-group input,

.form-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #dbe2ea;

    border-radius:14px;

    background:#fff;

    font-size:15px;

    color:#111827;

    transition:.30s;

    outline:none;

    resize:none;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9ca3af;

}

.form-group input:focus,

.form-group textarea:focus{

    border-color:#E30613;

    box-shadow:0 0 0 4px rgba(227,6,19,.10);

}

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

.coverage-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #E30613,
        #c60012
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:.35s;

    box-shadow:0 15px 35px rgba(227,6,19,.20);

}

.coverage-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(227,6,19,.28);

}

.coverage-btn i{

    font-size:20px;

}

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

.coverage-item,

.coverage-icon,

.coverage-btn,

.coverage-form-card,

.form-group input,

.form-group textarea{

    transition:all .35s ease;

}

/*==================================================
COVERAGE PAGE
PART 3
FAQ • CTA • MAP • BOTTOM CTA
==================================================*/

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

.coverage-cta{

    padding:100px 0;

    background:#fff;

}

.cta-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    padding:60px;

    border-radius:30px;

    background:linear-gradient(135deg,#E30613,#c50012);

    color:#fff;

    box-shadow:0 30px 60px rgba(227,6,19,.20);

}

.cta-content{

    flex:1;

}

.cta-content h2{

    font-size:42px;

    font-weight:800;

    margin:20px 0;

    line-height:1.2;

}

.cta-content p{

    font-size:17px;

    line-height:1.8;

    opacity:.95;

}

.cta-action{

    flex-shrink:0;

}

.btn-whatsapp{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    background:#25D366;

    color:#fff;

    border-radius:16px;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    transition:.35s;

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

}

.btn-whatsapp:hover{

    transform:translateY(-4px);

}

/*==============================
FAQ
==============================*/

.coverage-faq{

    padding:110px 0;

    background:#f8fafc;

}

.coverage-faq .faq-list{

    max-width:900px;

    margin:60px auto 0;

}

.coverage-faq .faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.05);

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

}

.coverage-faq .faq-question{

    width:100%;

    border:none;

    background:#fff;

    padding:24px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#111827;

    transition:.3s;

}

.coverage-faq .faq-question:hover{

    color:#E30613;

}

.coverage-faq .faq-question i{

    color:#E30613;

    transition:.3s;

}

.coverage-faq .faq-answer{

    display:none;

    padding:0 28px 24px;

}

.coverage-faq .faq-answer p{

    color:#6b7280;

    line-height:1.8;

    font-size:15px;

}

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

.coverage-map{

    padding:110px 0;

    background:#fff;

}

.map-card{

    margin-top:60px;

    border-radius:28px;

    overflow:hidden;

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

}

.map-card iframe{

    width:100%;

    height:500px;

    border:0;

}

/*==============================
BOTTOM CTA
==============================*/

.coverage-bottom{

    padding:110px 0;

    background:#f8fafc;

}

.bottom-card{

    text-align:center;

    padding:70px 50px;

    border-radius:30px;

    background:#fff;

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

}

.bottom-card h2{

    font-size:42px;

    color:#111827;

    font-weight:800;

    margin-bottom:20px;

}

.bottom-card p{

    font-size:17px;

    color:#6b7280;

    line-height:1.8;

    max-width:700px;

    margin:0 auto 35px;

}

.bottom-card .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:16px;

    background:#E30613;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:0 15px 35px rgba(227,6,19,.20);

}

.bottom-card .btn-primary:hover{

    background:#c50012;

    transform:translateY(-4px);

}

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

.cta-box,
.faq-item,
.map-card,
.bottom-card{

    transition:.35s;

}

.faq-item:hover,
.map-card:hover,
.bottom-card:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 55px rgba(0,0,0,.10);

}

/*==================================================
COVERAGE PAGE
PART 4
RESPONSIVE FINAL
==================================================*/

/*==============================
1400px
==============================*/

@media (max-width:1400px){

    .coverage-page .container,
    .coverage-cta .container,
    .coverage-faq .container,
    .coverage-map .container,
    .coverage-bottom .container{

        max-width:1200px;

    }

}

/*==============================
1200px
==============================*/

@media (max-width:1200px){

    .page-content h1{

        font-size:50px;

    }

    .coverage-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .coverage-info{

        padding-right:0;

    }

    .cta-box{

        flex-direction:column;

        text-align:center;

        gap:35px;

    }

    .cta-content{

        max-width:750px;

    }

}

/*==============================
992px
==============================*/

@media (max-width:992px){

    .page-hero{

        padding:120px 0 70px;

    }

    .page-content h1{

        font-size:42px;

    }

    .page-content p{

        font-size:17px;

    }

    .coverage-page{

        padding:90px 0;

    }

    .coverage-info h2{

        font-size:38px;

    }

    .cta-content h2{

        font-size:36px;

    }

    .bottom-card h2{

        font-size:36px;

    }

    .map-card iframe{

        height:420px;

    }

}

/*==============================
768px
==============================*/

@media (max-width:768px){

    .page-hero{

        padding:110px 0 60px;

    }

    .page-content h1{

        font-size:34px;

    }

    .page-content p{

        font-size:16px;

    }

    .coverage-page{

        padding:80px 0;

    }

    .coverage-form-card{

        padding:30px;

    }

    .coverage-item{

        padding:22px;

    }

    .coverage-icon{

        width:60px;

        height:60px;

        min-width:60px;

        font-size:24px;

    }

    .coverage-item h4{

        font-size:19px;

    }

    .faq-question{

        font-size:16px;

        padding:20px;

    }

    .faq-answer{

        padding:0 20px 20px;

    }

    .cta-box{

        padding:40px 30px;

    }

    .bottom-card{

        padding:50px 30px;

    }

}

/*==============================
576px
==============================*/

@media (max-width:576px){

    .page-content h1{

        font-size:30px;

    }

    .coverage-info h2{

        font-size:30px;

    }

    .coverage-info>p{

        font-size:15px;

    }

    .coverage-form-card{

        border-radius:22px;

        padding:24px;

    }

    .form-header h3{

        font-size:26px;

    }

    .coverage-btn{

        height:54px;

        font-size:15px;

    }

    .cta-content h2{

        font-size:30px;

    }

    .btn-whatsapp{

        width:100%;

        justify-content:center;

    }

    .bottom-card h2{

        font-size:30px;

    }

    .map-card iframe{

        height:350px;

    }

}

/*==============================
430px
==============================*/

@media (max-width:430px){

    .coverage-page .container{

        padding:0 18px;

    }

    .page-content h1{

        font-size:28px;

    }

    .coverage-item{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .coverage-icon{

        margin-bottom:10px;

    }

    .faq-question{

        text-align:left;

        font-size:15px;

    }

}

/*==============================
375px
==============================*/

@media (max-width:375px){

    .page-content h1{

        font-size:26px;

    }

    .coverage-info h2{

        font-size:27px;

    }

    .form-header h3{

        font-size:24px;

    }

    .bottom-card{

        padding:40px 20px;

    }

    .bottom-card h2{

        font-size:26px;

    }

}

/*==============================
320px
==============================*/

@media (max-width:320px){

    .page-content h1{

        font-size:22px;

    }

    .coverage-form-card{

        padding:18px;

    }

    .coverage-item{

        padding:18px;

    }

    .coverage-btn{

        height:50px;

        font-size:14px;

    }

}

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

.coverage-item,
.coverage-form-card,
.coverage-btn,
.btn-whatsapp,
.faq-item,
.map-card,
.bottom-card{

    transition:all .35s ease;

}

/*==================================================
SCROLL MARGIN
==================================================*/

.coverage-page,
.coverage-cta,
.coverage-faq,
.coverage-map,
.coverage-bottom{

    scroll-margin-top:100px;

}