html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}



/* =========================
           FEATURES
        ========================= */

.features {
    background: #edf7ff;
    border-bottom: 1px solid #dce8f3;
}

.features-container {
    width: 1150px;
    max-width: 94%;
    margin: auto;
    min-height: 70px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 25px;
    border-right: 1px solid #cadcea;
}

    .feature:last-child {
        border-right: none;
    }

.feature-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #d6efff;
    color: #03418d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.feature h4 {
    color: #10275b;
    font-size: 13px;
    font-weight: 800;
}

.feature p {
    margin-top: 4px;
    font-size: 10px;
    color: #344054;
}

/* =========================
           MAIN
        ========================= */

main {
    width: 1150px;
    max-width: 94%;
    margin: auto;
    padding: 26px 0;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 22px;
}

    .section-title::before,
    .section-title::after {
        content: "";
        width: 65px;
        height: 3px;
        background: #ffc400;
    }

    .section-title h2 {
        color: #0c2455;
        font-size: 25px;
        font-weight: 800;
    }

/* =========================
           BOOKING CARDS
        ========================= */

.booking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.booking-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(20,40,70,.10);
    transition: .3s;
}

    .booking-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(20,40,70,.17);
    }

.card-image {
    height: 80px;
    background-position: center;
    background-size: cover;
    position: relative;
}

.football {
    background-image: linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)), url("/images/football.png");
}

.cricket {
    background-image: linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)), url("/images/cricket.jpg");
}

.multi-sport {
    background-image: linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)), url("/images/circketnet.jpg");
}

.sport-icon {
    position: absolute;
    left: 14px;
    bottom: -17px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #39d353;
    color: #fff;
    font-size: 16px;
}

.cricket-icon {
    background: #8737df;
}

.multi-icon {
    background: #ff851b;
}

.card-content {
    padding: 17px 20px 18px;
}

    .card-content h3 {
        font-size: 15px;
        color: #111;
        margin-bottom: 7px;
    }

    .card-content p {
        font-size: 12px;
        line-height: 1.5;
        color: #555;
        min-height: 36px;
    }

.book-now {
    display: inline-block;
    margin-top: 10px;
    background: #00245c;
    color: #fff;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    transition: .3s;
}

    .book-now:hover {
        background: #ffc400;
        color: #111;
    }

/* =========================
           EVENTS + NEWS
        ========================= */

.bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.panel {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(20,40,70,.10);
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #edf0f4;
}

    .panel-header h2 {
        color: #0a2b68;
        font-size: 17px;
        font-weight: 800;
    }

.view-all {
    color: #006eff;
    font-size: 11px;
    font-weight: 700;
}

.event-list {
    padding: 8px 20px 12px;
}

.event {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f4;
}

    .event:last-child {
        border-bottom: none;
    }

.date-box {
    width: 42px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #072966;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .date-box strong {
        font-size: 16px;
        line-height: 17px;
    }

    .date-box span {
        font-size: 8px;
        font-weight: 700;
    }

.event-details {
    flex: 1;
}

    .event-details h4 {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .event-details p {
        font-size: 10px;
        color: #666;
    }

.status {
    background: #dff8e8;
    color: #078329;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
}

/* NEWS */

.news-list {
    padding: 8px 20px 12px;
}

.news {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f4;
}

    .news:last-child {
        border-bottom: none;
    }

.news-image {
    width: 82px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
}

.news:nth-child(1) .news-image {
    background-image: url("images/football-news.jpg");
}

.news:nth-child(2) .news-image {
    background-image: url("images/cricket-news.jpg");
}

.news:nth-child(3) .news-image {
    background-image: url("images/team-news.jpg");
}

.news-content h4 {
    font-size: 11px;
    margin-bottom: 4px;
}

.news-content span {
    display: block;
    font-size: 9px;
    color: #777;
    margin-bottom: 3px;
}

.news-content p {
    font-size: 9px;
    color: #555;
}