/* =========================================
   BRAND YOUR AUDIO - PRICING PAGE FINAL CSS
========================================= */


*{
box-sizing:border-box;
}


html,
body{

margin:0;
padding:0;

background:#050816;

color:white;

font-family:Arial,Helvetica,sans-serif;

overflow-x:hidden;

}






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


.pricing-hero{

background:#050816;

padding:90px 20px 60px;

text-align:center;

}


.pricing-hero h1{

font-size:48px;

margin-bottom:25px;

}


.pricing-hero p{

max-width:850px;

margin:auto;

font-size:18px;

line-height:1.7;

color:#b9c4dd;

}



.hero-buttons{

margin-top:35px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}


.hero-buttons a{

background:#00d4ff;

color:#00111c;

padding:14px 30px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

}



/* =====================
PRICING TITLE AREA
===================== */


.pricing-page{

background:#050816;

padding:50px 20px;

text-align:center;

}


.pricing-page h2{

font-size:38px;

margin-bottom:50px;

}



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


.pricing-container{

display:flex;

justify-content:center;

align-items:stretch;

gap:30px;

flex-wrap:wrap;

}



.price-box{

width:330px;

background:#10172d;

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

border-radius:22px;

padding:35px 30px;

display:flex;

flex-direction:column;

text-align:left;

}



.price-box h3{

text-align:center;

font-size:25px;

}



.plan-description{

color:#b9c4dd;

line-height:1.6;

min-height:85px;

}



.price-box h1{

text-align:center;

font-size:40px;

color:#00d4ff;

margin:25px 0;

}



.price-box p{

line-height:1.6;

color:#dbe3f5;

}



.price-box a{

margin-top:25px;

background:#00d4ff;

color:#00111c;

padding:14px;

border-radius:30px;

text-align:center;

text-decoration:none;

font-weight:bold;

}



.recommended-plan{

border:2px solid #00d4ff;

}



.recommended-badge{

background:#00d4ff;

color:#00111c;

padding:8px;

border-radius:20px;

text-align:center;

font-weight:bold;

margin-top:-55px;

margin-bottom:20px;

}



/* =====================
COMPARISON
===================== */


.comparison{

background:#050816;

padding:70px 20px;

overflow-x:auto;

}



.comparison h2{

text-align:center;

font-size:36px;

margin-bottom:35px;

}



.comparison table{

width:100%;

min-width:700px;

border-collapse:collapse;

background:#10172d;

}



.comparison th,
.comparison td{

padding:18px;

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

text-align:center;

}



.comparison th{

color:#00d4ff;

}



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


.services{

background:#050816;

padding:70px 20px;

text-align:center;

}



.services h2{

font-size:36px;

}



.services>p{

max-width:800px;

margin:20px auto 40px;

color:#b9c4dd;

}



.service-list{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.service-card{

width:300px;

background:#10172d;

padding:30px;

border-radius:20px;

text-align:left;

}



.service-card h3{

color:#00d4ff;

}



.service-card p{

color:#dbe3f5;

}



/* =====================
OTHER SECTIONS
===================== */


.timeline,
.enterprise,
.faq{

background:#050816;

color:white;

}



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


@media(max-width:768px){


.pricing-hero{

padding:60px 20px;

}


.pricing-hero h1{

font-size:34px;

}



.pricing-page h2{

font-size:30px;

}



.pricing-container{

flex-direction:column;

align-items:center;

}



.price-box{

width:100%;

max-width:380px;

}



.recommended-badge{

margin-top:-45px;

}



.comparison{

padding:40px 10px;

}



.services{

padding:50px 15px;

}



.service-list{

flex-direction:column;

align-items:center;

}



.service-card{

width:100%;

max-width:380px;

}

}


/* =====================================
   PRICING MOBILE CLEAN FIX
   ===================================== */

@media(max-width:768px){

.pricing-hero{

    padding:50px 20px;
    text-align:center;

}


.pricing-hero h1{

    font-size:32px;

}


.pricing-hero p{

    font-size:16px;
    line-height:1.6;

}


.pricing-container{

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

}


.price-box{

    width:100%;
    max-width:380px;

}


.recommended-plan{

    transform:none;

}


/* COMPARISON TABLE */

.comparison{

    width:100%;
    overflow-x:auto;

}


.comparison table{

    min-width:700px;

}


/* SERVICES */

.service-list{

    display:flex;
    flex-direction:column;

}


.service-card{

    width:100%;

}

}