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

.upcoming-branches{

    padding:120px 0;

    background:#151515;
}

.upcoming-branches .section-heading{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;
}

.upcoming-branches .section-heading span{

    color:#ff8c04;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;
}

.upcoming-branches .section-heading h2{

    margin:15px 0;

    font-size:60px;
}

.upcoming-branches .section-heading p{

    color:#bdbdbd;

    line-height:1.8;
}

.branches-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    padding:0 20px;
}

.branch-card{

    background:#1f1f1f;

    border-radius:30px;

    padding:45px;

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

    transition:.3s;

    text-align:center;
}

.branch-card:hover{

    transform:translateY(-8px);

    border-color:#ff8c04;

    box-shadow:
    0 0 30px rgba(255,140,4,.15);
}

.branch-icon{

    font-size:48px;

    margin-bottom:20px;
}

.branch-card h3{

    font-size:32px;

    margin-bottom:15px;

    color:white;
}

.branch-card p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:25px;
}

.coming-badge{

    display:inline-block;

    background:
    linear-gradient(
        90deg,
        #fff72d,
        #ff8c04,
        #ff1700
    );

    color:black;

    font-weight:700;

    padding:10px 20px;

    border-radius:50px;

    font-size:14px;
}

/* MOBILE */

@media(max-width:768px){

    .upcoming-branches{

        padding:80px 20px;
    }

    .upcoming-branches .section-heading h2{

        font-size:40px;
    }

    .branch-card{

        padding:30px;
    }
}