/*==============================
  Arjun Scrap Dealer
  Premium CSS v1
==============================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{
    background:#f5f7f6;
    color:#222;
    overflow-x:hidden;
    overflow-y:auto;
}

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

/* HEADER */

header{
position:fixed;
top:0;
left:0;
width:100%;
background:#ffffff;
box-shadow:0 4px 20px rgba(0,0,0,.08);
z-index:999;
}

header .container{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 0;
}

.logo img{
height:180px;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav ul li a{
text-decoration:none;
color:#222;
font-weight:600;
transition:.3s;
}

nav ul li a:hover{
color:#0a8f39;
}

/* BUTTONS */

.call-btn,
.whatsapp-btn{

display:inline-block;
padding:14px 28px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.35s;
}

.call-btn{
background:#0a8f39;
color:#fff;
}

.call-btn:hover{
background:#08742f;
transform:translateY(-3px);
}

.whatsapp-btn{
background:#25D366;
color:#fff;
margin-left:10px;
}

.whatsapp-btn:hover{
background:#1ebc59;
transform:translateY(-3px);
}

/* HERO */
/* ===== HERO SECTION ===== */
/* =========================
   HERO SECTION
========================= */
.hero {
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 4% 45px;
    box-sizing: border-box;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 48%,
        #f4f8f6 100%
    );
    overflow: hidden;
}

/* LEFT SIDE */

.hero-content {
    width: 52%;
    z-index: 2;
}

.hero h1 {
    margin: 0;
    font-size: clamp(38px, 4.5vw, 70px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
    color: #071c17;
}

.hero h1 span {
    color: #087c3d;
}

.hero-subtitle {
    margin: 20px 0 28px;
    font-size: clamp(20px, 2vw, 30px);
    color: #222;
    font-weight: 500;
}


/* FEATURES */

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 32px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 145px;
}

.feature-icon {
    width: 48px;
    height: 48px;
    border: 3px solid #087c3d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #087c3d;
    font-size: 25px;
    font-weight: 800;
}

.feature strong,
.feature small {
    display: block;
}

.feature strong {
    font-size: 17px;
    color: #222;
}

.feature small {
    font-size: 15px;
    color: #333;
    margin-top: 3px;
}


/* BUTTONS */

.hero-buttons {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.hero-buttons a {
    width: 260px;
    min-height: 82px;
    padding: 12px 20px;
    box-sizing: border-box;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    transition: 0.25s ease;
}

.hero-buttons a:hover {
    transform: translateY(-3px);
}

.hero-buttons a > span {
    font-size: 42px;
}

.hero-buttons strong,
.hero-buttons small {
    display: block;
}

.hero-buttons strong {
    font-size: 23px;
}

.hero-buttons small {
    font-size: 16px;
    margin-top: 4px;
}


/* CALL BUTTON */

.call-btn {
    background: #087c3d;
    color: white;
}


/* WHATSAPP BUTTON */

.whatsapp-btn {
    background: white;
    color: #087c3d;
    border: 2px solid #087c3d;
}


/* RIGHT IMAGE */

.hero-image {
    width: 48%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image img {
    width: 520px;
    max-width: none;
    height: auto;
    object-fit: contain;
    display: block;
}


/* TRUST BADGE */

.trust-badge {
    position: absolute;
    right: 2%;
    bottom: 1%;
    background: #087c3d;
    color: white;
    padding: 10px 18px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}

.trust-title {
    font-size: 20px;
    font-weight: 800;
}

.trust-badge p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.4;
}


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

@media (max-width: 900px) {

    .hero {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .hero-content {
        width: 100%;
    }

    .hero h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 20px;
    }

    .hero-features {
        justify-content: center;
    }

    .feature {
        text-align: left;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        width: 100%;
        margin-top: 35px;
    }

    .hero-image img {
        width: 100%;
    }

    .trust-badge {
        right: 0;
        bottom: 0;
        padding: 12px 16px;
    }

    .trust-title {
        font-size: 15px;
    }

    .trust-badge p {
        font-size: 12px;
    }
}


@media (max-width: 550px) {

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

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

    .hero-buttons a {
        width: 100%;
        max-width: 330px;
    }

    .hero-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 10px;
    }

    .feature {
        min-width: 0;
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
        flex-shrink: 0;
    }

    .feature strong {
        font-size: 14px;
    }

    .feature small {
        font-size: 12px;
    }
}

/* SECTION */

section{

padding:80px 0;
}

.section-title{

text-align:center;
margin-bottom:50px;
}

.section-title h2{

font-size:42px;
color:#0a8f39;
margin-bottom:10px;
}

.section-title p{

color:#666;
font-size:18px;
}

/* CARDS */

.card{

background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
}

.card:hover{

transform:translateY(-8px);
}

/* FOOTER */

footer{

background:#111;
color:#fff;
padding:35px;
text-align:center;
margin-top:50px;
}

/* LOADER */

#loader{

position:fixed;
width:100%;
height:100%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
}

.spinner{

width:65px;
height:65px;
border:6px solid #ddd;
border-top:6px solid #0a8f39;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/* MOBILE */

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;
text-align:center;
}

.hero h2{

font-size:40px;
}

nav{

display:none;
}

.logo img{

height:60px;
}

header .container{

flex-direction:column;
gap:15px;
}

.whatsapp-btn{

margin-left:0;
margin-top:10px;
display:inline-block;
}
}
/* Rates */

.rates-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.rate-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
text-align:center;
}

.rate-card:hover{
transform:translateY(-10px);
}

.rate-card img{
width:100%;
height:220px;
object-fit:cover;
}

.rate-card h3{
margin:20px 0 10px;
font-size:24px;
}

.rate-card h4{
font-size:28px;
color:#0a8f39;
margin-bottom:25px;
}
.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
}

.service-grid .card{
text-align:center;
}

.service-grid .card i{
font-size:50px;
color:#0a8f39;
margin-bottom:20px;
}

.service-grid .card h3{
font-size:22px;
}
/* WHY SECTION */

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.why-grid .card{
text-align:center;
}

.why-grid .card i{
font-size:55px;
color:#0a8f39;
margin-bottom:20px;
}

.why-grid .card h3{
font-size:24px;
margin-bottom:10px;
}

.why-grid .card p{
color:#666;
line-height:1.7;
}
/* HOW IT WORKS */

.steps-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.steps-grid .card{
text-align:center;
position:relative;
}

.step-number{
width:50px;
height:50px;
background:#0a8f39;
color:#fff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
font-weight:bold;
margin:0 auto 20px;
}

.steps-grid i{
font-size:55px;
color:#0a8f39;
margin-bottom:20px;
}

.steps-grid h3{
margin-bottom:15px;
font-size:24px;
}

.steps-grid p{
color:#666;
line-height:1.8;
}
/* CONTACT */

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:center;

}

.contact-info{

background:#fff;

padding:35px;

border-radius:20px;

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

}

.contact-info h3{

font-size:34px;

color:#0a8f39;

margin-bottom:20px;

}

.contact-info p{

font-size:18px;

margin:18px 0;

line-height:1.8;

}

.contact-info i{

color:#0a8f39;

margin-right:10px;

}

.contact-buttons{

margin-top:30px;

}

.map iframe{

width:100%;

height:450px;

border:0;

border-radius:20px;

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}
/* Floating Buttons */

.floating-call,
.floating-whatsapp{

position:fixed;

width:60px;
height:60px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:#fff;

text-decoration:none;

z-index:999;

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

transition:.3s;

}

.floating-call{

left:20px;
bottom:20px;
background:#0a8f39;

}

.floating-whatsapp{

right:20px;
bottom:20px;
background:#25D366;

}

.floating-call:hover,
.floating-whatsapp:hover{

transform:scale(1.1);

}

/* Top Button */

#topBtn{

position:fixed;

right:20px;
bottom:95px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:#111;

color:white;

font-size:22px;

display:none;

cursor:pointer;

z-index:999;

}

/* Footer */

.footer-banner img{

width:100%;

display:block;

}

footer{

background:#111;

color:white;

padding:60px 0 20px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

footer h3{

margin-bottom:15px;

}

footer p{

margin:10px 0;

line-height:1.8;

color:#ddd;

}

footer hr{

margin:35px 0;

border-color:#333;

}

.copyright{

text-align:center;

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}
/* =========================
   BULK DEAL SECTION
========================= */

.bulk-deal {
    width: 94%;
    margin: 20px auto 45px;
    padding: 10px 20px 0;
    background: #ffffff;
    border: 1px solid #dfe8e2;
    border-radius: 18px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.bulk-deal h2 {
    text-align: center;
    margin: -5px 0 12px;
    font-size: 28px;
    font-weight: 900;
    color: #111;
    letter-spacing: 1px;
}

.bulk-categories {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: stretch;
}

.bulk-item {
    text-align: center;
    padding: 10px 8px 15px;
    border-right: 1px solid #aebdb4;
}

.bulk-item:last-child {
    border-right: none;
}

.bulk-icon {
    font-size: 45px;
    line-height: 1;
    margin-bottom: 8px;
}

.bulk-item span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}


/* GREEN BENEFIT BAR */

.bulk-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #087c3d;
    border-radius: 12px;
    margin: 8px 0 0;
    padding: 13px 20px;
}

.bulk-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: white;
    border-right: 1px solid rgba(255,255,255,0.6);
}

.bulk-benefit:last-child {
    border-right: none;
}

.benefit-icon {
    font-size: 38px;
}

.bulk-benefit strong,
.bulk-benefit small {
    display: block;
}

.bulk-benefit strong {
    font-size: 17px;
}

.bulk-benefit small {
    font-size: 15px;
    margin-top: 2px;
}


/* MOBILE */

@media (max-width: 800px) {

    .bulk-deal {
        width: 96%;
        overflow-x: auto;
    }

    .bulk-categories {
        min-width: 850px;
    }

    .bulk-benefits {
        min-width: 700px;
    }
}
.logo{
    display:flex;
    align-items:center;
    padding:0;
    margin:0;
}

.logo img{
    width:140px;      /* Logo ka size */
    height:auto;
    margin-top:-8px;  /* Thoda upar */
    display:block;
}
.hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.hero-image{
    flex:1;
    text-align:right;
}
.view-all-container{
    text-align:center;
    margin:40px 0;
}

.view-all-btn{
    display:inline-block;
    background:#16a34a;
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
    transition:.3s ease;
    box-shadow:0 10px 25px rgba(22,163,74,.3);
}

.view-all-btn:hover{
    background:#15803d;
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(22,163,74,.5);
}
/* ===== VIEW ALL SCRAP RATES BUTTON ===== */

.view-all-container{
    text-align:center;
    margin:35px 0 20px;
}

.view-all-btn{
    border:none;
    background:#0f9d58;
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 8px 20px rgba(15,157,88,.25);
}

.view-all-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(15,157,88,.4);
}

#ratesArrow{
    display:inline-block;
    margin-left:8px;
    transition:transform .3s ease;
}


/* ===== ALL SCRAP RATES ===== */

.all-rates-section{
    display:none;
    width:92%;
    max-width:1100px;
    margin:25px auto 60px;
    animation:ratesOpen .4s ease;
}

.all-rates-title{
    text-align:center;
    margin-bottom:25px;
}

.all-rates-title h2{
    font-size:30px;
    margin-bottom:8px;
    color:#123;
}

.all-rates-title p{
    color:#666;
    font-size:15px;
}


/* ===== TABLE ===== */

.scrap-table{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:1px solid #e8e8e8;
}


/* ===== EACH ROW ===== */

.scrap-row{
    display:grid;
    grid-template-columns:110px 1fr 180px;
    align-items:center;
    min-height:105px;
    padding:12px 25px;
    border-bottom:1px solid #eeeeee;
    transition:all .25s ease;
}

.scrap-row:last-child{
    border-bottom:none;
}

.scrap-row:hover{
    background:#f3fff8;
    transform:scale(1.005);
}


/* ===== PHOTO ===== */

.scrap-photo{
    width:105px;
    height:105px;
    border-radius:14px;
    background:#f5f5f5;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.scrap-photo img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:4px;
}


/* ===== NAME ===== */

.scrap-name{
    font-size:18px;
    font-weight:700;
    color:#18202a;
}


/* ===== RATE ===== */

.scrap-rate{
    justify-self:end;
    background:#0f9d58;
    color:#fff;
    padding:10px 18px;
    border-radius:30px;
    font-size:17px;
    font-weight:700;
    min-width:120px;
    text-align:center;
}


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

@keyframes ratesOpen{
    from{
        opacity:0;
        transform:translateY(-15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


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

@media(max-width:600px){

    .all-rates-section{
        width:94%;
    }

    .all-rates-title h2{
        font-size:24px;
    }

    .scrap-row{
        grid-template-columns:70px 1fr;
        gap:12px;
        padding:12px;
        min-height:90px;
    }

    .scrap-photo{
        width:60px;
        height:60px;
    }

    .scrap-name{
        font-size:15px;
    }

    .scrap-rate{
        grid-column:2;
        justify-self:start;
        font-size:14px;
        padding:7px 14px;
        min-width:auto;
        margin-top:-8px;
    }

    .view-all-btn{
        font-size:15px;
        padding:13px 22px;
    }
}

/* ===== RATE CARD IMAGES ===== */

.rate-card img{
    width:100%;
    height:180px;
    object-fit:contain;
    display:block;
}

@media(max-width:600px){
    .rate-card img{
        height:130px;
    }
}
/* ===== TODAY SCRAP RATES GRID FIX ===== */

.rates-grid{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:25px !important;
}

/* Mobile */
@media(max-width:600px){
    .rates-grid{
        grid-template-columns:1fr !important;
    }
}

/* RATE CARDS - 3 + 3 */
.rates-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 25px !important;
    width: 100%;
}

/* Mobile */
@media (max-width: 600px) {
    .rates-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================
   MOBILE ONLY - FINAL FIX
========================= */

@media only screen and (max-width:600px){

    /* HEADER */
    header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        width:100% !important;
        height:68px !important;
    }

    header .container{
        width:94% !important;
        height:68px !important;
        padding:6px 0 !important;
        display:flex !important;
        flex-direction:row !important;
        justify-content:space-between !important;
        align-items:center !important;
    }

    .logo img{
        width:115px !important;
        height:auto !important;
        margin:0 !important;
    }

    nav{
        display:none !important;
    }

    header .call-btn{
        display:inline-flex !important;
        padding:9px 16px !important;
        margin:0 !important;
        font-size:13px !important;
        white-space:nowrap !important;
    }


    /* HERO */
    .hero{
        width:100% !important;
        min-height:auto !important;

        /* header ke neeche se start */
        padding:95px 15px 35px !important;

        margin:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;

        text-align:center !important;
        overflow:hidden !important;
    }

    .hero-content{
        width:100% !important;
        order:1 !important;
    }

    .hero h1{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        font-size:32px !important;
        line-height:1.1 !important;
        letter-spacing:-.8px !important;

        margin:0 0 14px !important;
    }

    .hero-subtitle{
        font-size:17px !important;
        margin:12px 0 22px !important;
    }


    /* FEATURES */
    .hero-features{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        gap:16px 8px !important;

        margin-bottom:24px !important;
    }

    .feature{
        min-width:0 !important;
        gap:7px !important;
        text-align:left !important;
    }

    .feature-icon{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        font-size:18px !important;
    }

    .feature strong{
        font-size:13px !important;
    }

    .feature small{
        font-size:11px !important;
    }


    /* HERO BUTTONS */
    .hero-buttons{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:12px !important;
    }

    .hero-buttons a{
        width:100% !important;
        max-width:340px !important;
        min-height:68px !important;
        padding:10px 16px !important;
    }

    .hero-buttons a > span{
        font-size:31px !important;
    }

    .hero-buttons strong{
        font-size:20px !important;
    }

    .hero-buttons small{
        font-size:13px !important;
    }


    /* HERO IMAGE */
    .hero-image{
        width:100% !important;
        order:2 !important;

        position:relative !important;
        display:block !important;

        margin-top:25px !important;
    }

    .hero-image img{
        width:100% !important;
        max-width:420px !important;
        height:auto !important;

        margin:auto !important;
        display:block !important;
    }


    /* SMALL TRUST BADGE */
    .trust-badge{
        position:absolute !important;

        right:8px !important;
        bottom:8px !important;
        left:auto !important;

        width:auto !important;
        max-width:125px !important;

        padding:6px 9px !important;

        border-radius:9px !important;

        box-shadow:0 4px 12px rgba(0,0,0,.18) !important;
    }

    .trust-title{
        font-size:11px !important;
        line-height:1.1 !important;
    }

    .trust-badge p{
        font-size:8px !important;
        line-height:1.2 !important;
        margin:3px 0 0 !important;
    }


    /* TODAY'S SCRAP RATES — 2 IN ONE ROW */
    .rates-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

        gap:12px !important;

        padding:0 12px !important;
    }

    .rate-card{
        width:100% !important;

        border-radius:15px !important;

        overflow:hidden !important;
    }

    .rate-card img{
        width:100% !important;
        height:110px !important;

        object-fit:contain !important;
        padding:7px !important;
    }

    .rate-card h3{
        font-size:15px !important;
        line-height:1.2 !important;

        margin:7px 5px 4px !important;
    }

    .rate-card h4{
        font-size:18px !important;

        margin:0 5px 12px !important;
    }


    /* VIEW ALL */
    .view-all-container{
        margin:25px 0 15px !important;
    }

    .view-all-btn{
        font-size:15px !important;
        padding:13px 24px !important;
    }

}


/* VERY SMALL PHONE */
@media only screen and (max-width:380px){

    .logo img{
        width:105px !important;
    }

    header .call-btn{
        padding:8px 13px !important;
        font-size:12px !important;
    }

    .hero h1{
        font-size:29px !important;
    }

    .rate-card img{
        height:95px !important;
    }

    .rate-card h3{
        font-size:14px !important;
    }

    .rate-card h4{
        font-size:17px !important;
    }
}



/* =========================
   MOBILE HEADER + TRUST FIX
========================= */

@media (max-width: 600px){

    /* HEADER */
    header{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:72px;
        z-index:9999;
    }

    header .container{
        width:100%;
        height:72px;
        padding:8px 16px;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }

    .logo{
        display:flex;
        align-items:center;
    }

    .logo img{
        width:125px !important;
        height:auto !important;
        margin:0 !important;
    }

    header .call-btn{
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        padding:10px 18px !important;
        margin:0 !important;
        font-size:15px;
        border-radius:30px;
        white-space:nowrap;
    }

    nav{
        display:none !important;
    }


    /* HERO */
    .hero{
        margin-top:72px !important;
        width:100%;
        min-height:auto;
        padding:28px 16px 35px !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        overflow:hidden;
    }

    .hero-content{
        width:100% !important;
        order:1;
    }

    .hero h1{
        font-size:32px !important;
        line-height:1.08 !important;
        letter-spacing:-1px !important;
        margin:0 0 14px !important;
    }

    .hero-subtitle{
        font-size:17px !important;
        margin:12px 0 22px !important;
    }

    /* FEATURES */
    .hero-features{
        width:100%;
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:16px 10px !important;
        margin-bottom:24px !important;
    }

    .feature{
        min-width:0 !important;
        gap:8px;
        text-align:left;
    }

    .feature-icon{
        width:42px !important;
        height:42px !important;
        min-width:42px;
        font-size:20px !important;
    }

    .feature strong{
        font-size:14px !important;
    }

    .feature small{
        font-size:12px !important;
    }


    /* CALL / WHATSAPP */
    .hero-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:14px !important;
    }

    .hero-buttons a{
        width:100% !important;
        max-width:100% !important;
        min-height:70px !important;
        padding:10px 18px !important;
        border-radius:14px;
    }

    .hero-buttons a > span{
        font-size:32px !important;
    }

    .hero-buttons strong{
        font-size:21px !important;
    }

    .hero-buttons small{
        font-size:14px !important;
    }


    /* HERO IMAGE */
    .hero-image{
        order:2;
        width:100% !important;
        margin-top:25px !important;
        position:relative !important;
        display:block !important;
    }

    .hero-image img{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        display:block;
        border-radius:12px;
    }


    /* TRUST BADGE */
    .trust-badge{
        position:absolute !important;
        right:10px !important;
        bottom:10px !important;
        left:auto !important;

        padding:8px 11px !important;
        border-radius:10px !important;

        max-width:155px !important;
        box-sizing:border-box;
    }

    .trust-title{
        font-size:13px !important;
        line-height:1.2 !important;
    }

    .trust-badge p{
        font-size:10px !important;
        line-height:1.25 !important;
        margin:4px 0 0 !important;
    }


    /* TODAY'S RATES - 2 CARDS */
    .rates-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
        width:100% !important;
    }

    .rate-card{
        border-radius:14px !important;
        padding:10px !important;
    }

    .rate-card img{
        width:100% !important;
        height:95px !important;
        object-fit:contain !important;
    }

    .rate-card h3{
        font-size:15px !important;
        margin:8px 0 5px !important;
    }

    .rate-card h4{
        font-size:17px !important;
        margin-bottom:8px !important;
    }

}