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

body {
    background : #111827;
    color      : #fff;
    overflow-x : hidden;
    font-family: "Poppins", sans-serif;
    font-style : normal;
    width      : 100%;
    margin     : 0;
    padding    : 0;
    line-height: 1.6;
    box-sizing : border-box;
}

html {
    margin    : 0;
    padding   : 0;
    font-size : 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

a {
    text-decoration: none;
    color          : inherit;
}

@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

}

@media (max-width: 480px) {
    body {
        font-size: 0.9rem;
    }

    .container {
        padding: 0 0.5rem;
    }

}


.bg-custom-dark {
    background-color: #10141d;
}

.logo-gradient {
    background-image: url('./assets/img/home/logo.png');
    width           : 64px;
    height          : 64px;
}

.nav-link.active {
    color      : #3b82f6 !important;
    font-weight: 500;
}

.hamburger {
    display       : none;
    flex-direction: column;
    gap           : 5px;
    cursor        : pointer;
}

@media (max-width:768px) {
    .hamburger {
        display  : block;
        color    : white;
        font-size: 30px;
    }

    .android {
        height: 250px;
    }

}

@media (max-width:480px) {
    .hamburger {
        font-size: 30px;
        display  : block;
        color    : white;
    }

    .android {
        height: 200px;
    }


}

.franchise {

    background             : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text;
    color                  : transparent;
}

.android {
    margin-top: 6.8%;
}

.trial {
    background     : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    color          : white;
    border         : none;
    display        : flex;
    align-items    : center;
    /* gap         : 6px; */
    align-items    : center;
    justify-content: center;
    column-gap     : 1.5rem;
}


.trial span {
    font-size  : 17px;
    font-weight: 400 !important;
}

.boot_icon {
    transform      : rotate(41deg);
    background     : white;
    width          : 42px;
    height         : 42px;
    border-radius  : 100%;
    color          : #9f3fc9;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

body {
    font-family     : 'Inter', sans-serif;
    background-color: #1a1a2e;
    /* Dark background color */
    color           : #fff;
}


/* Hero Section */
.hero-section {
    position: relative;
}

.hero-card {
    background   : linear-gradient(150deg, #FF0083 0%, #00A0FF 100%);
    border-radius: 30px;
    padding      : 2.5rem;
    position     : relative;
    z-index      : 1;
    box-shadow   : 0 10px 40px rgba(0, 0, 0, 0.5);
    height       : 700px;
    display      : flex;
    align-items  : center;
    margin-top   : 25px;
}

.hero-content {
    color   : #fff;
    position: relative;
    z-index : 2;
}

.heading {
    margin-top: 20px;
}

@media (max-width:768px) {
    .heading {
        width: 300px;
    }

}

@media (max-width:480px) {
    .heading {
        width: 300px;
    }

}

.hero-stats {
    margin-top   : 30px;
    margin-bottom: 30px;
    font-size    : 1.1rem;
    font-weight  : 500;
    color        : rgba(255, 255, 255, 0.8);
}

.hero-stats i {
    color: #ffc107;
    /* Star color */
}

.explore-btn {
    color          : #fff;
    text-decoration: none;
    font-weight    : 600;
    margin-left    : 20px;
    position       : relative;
    padding-bottom : 2px;
}

.explore-btn::after {
    content         : '';
    position        : absolute;
    width           : 100%;
    height          : 2px;
    background-color: #fff;
    bottom          : 0;
    left            : 0;
    transition      : width 0.3s ease;
}

.explore-btn:hover::after {
    width: 0;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero-card {
        flex-direction : column;
        justify-content: center;
        text-align     : center;
        height         : auto;
        padding-bottom : 15px;
        /* Add space for the phone mockup */
    }

    .nav-link {
        margin: 5px 0;
    }

    .navbar .d-flex {
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    .hero-card {
        padding-bottom: 15px;
    }

}

.built-for-every-body-section {
    padding: 5rem 0;
}

/* Styling for the text and button card on the left */
.content-card {
    background-color: #15162D;
    border-radius   : 20px;
    padding         : 4rem 3rem;
    color           : #fff;
    height          : 100%;
    /* Ensure card matches height of image collage */
    display         : flex;
    flex-direction  : column;
    justify-content : center;
}

.content-card h2 {
    font-size    : 2.5rem;
    font-weight  : 700;
    line-height  : 1.3;
    margin-bottom: 1.5rem;
}

.frame_1 {
    height: 549px;
    width : 600px;
}

@media(max-width:480px) {
    .frame_1 {
        height     : 300px;
        width      : 370px;
        margin-left: 3%;
    }
}

@media(max-width:768px) {
    .frame_1 {
        height     : 300px;
        width      : 370px;
        margin-left: 3%;
    }
}

.content-card p {
    font-size    : 1rem;
    font-weight  : 400;
    color        : rgba(255, 255, 255, 0.7);
    line-height  : 1.6;
    margin-bottom: 2rem;
}

/* Styling for the "Contact" button */
.contact-btn {
    background     : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    border         : none;
    width          : 200px;
    border-radius  : 50px;
    padding        : 1rem 2rem;
    color          : #fff;
    font-weight    : 600;
    display        : inline-flex;
    align-items    : center;
    gap            : 1rem;
    text-decoration: none;
    transition     : transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.contact-btn:hover {
    transform : scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    color     : #fff;
}

.contact-btn i {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius   : 50%;
    width           : 30px;
    height          : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 0.8rem;
}

/* Show collage on larger screens */
@media (min-width: 992px) {}


/* Responsive adjustments for mobile/smaller screens */
@media (max-width: 992px) {
    .content-card {
        padding      : 2rem;
        margin-bottom: 2rem;
    }

}

.transformation_card_heading {
    display      : grid;
    place-content: center;
    place-items  : center;
    margin-top   : 5rem;
}

.transformation_card_heading h1 {
    font-size    : clamp(2.5rem, 6vw, 3.2rem);
    font-weight  : 600;
    margin-bottom: 1rem !important;
    text-align   : center;
}

.transformation_card_heading p {
    text-align: center;
    font-size : clamp(0.9rem, 2vw, 1rem);
    max-width : 800px;
    padding   : 0 1rem;
}

.transformation_card_heading h1 span {
    background             : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    background-clip        : text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-container {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap                  : 1.5rem;
    padding              : 0 2rem;
    justify-content      : center;
    margin-top           : 5rem;
    max-width            : 1200px;
    margin               : 5rem auto;
}

@media (max-width: 1024px) {
    .transformation_card_heading {
        margin-top: 3rem;
    }

    .card-container {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap                  : 1rem;
        padding              : 0 1rem;
    }
}

@media (max-width: 768px) {
    .transformation_card_heading h1 {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .transformation_card_heading p {
        font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    }

    .card-container {
        grid-template-columns: 1fr;
        gap                  : 1.5rem;
        margin-top           : 3rem;
    }
}

/* Card */
.card-container .card {
    width           : 280px;
    background-color: #1e293b;
    border-radius   : 1rem;
    overflow        : hidden;
    box-shadow      : 0 4px 10px rgba(0, 0, 0, 0.3);
    transition      : transform 0.3s ease;
    margin          : auto;
    /* Center the card on mobile screens */
}

.card-container .card:hover {
    transform: translateY(-8px);
}

/* Header with gradient and watermark text */
.card-container .card-header {
    background     : linear-gradient(90deg, #A855F7 0%, #EC4899 100%);
    padding        : 1rem;
    position       : relative;
    color          : white;
    height         : 7rem;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : flex-start;
}

.sec_header {
    background: linear-gradient(90deg, #3B82F6 0%, #06B6D4 100%) !important;
}

.third_header {
    background: linear-gradient(90deg, #22C55E 0%, #10B981 100%) !important;
}

.fourth_header {
    background: linear-gradient(90deg, #F97316 0%, #EF4444 100%) !important;
}

.card-container .card-top {
    display       : flex;
    flex-direction: column;
    row-gap       : 0.5rem;
}

.card-container .card-top h3 {
    font-size  : clamp(1rem, 2.5vw, 1.1rem);
    font-weight: bold;
    margin     : 0;
}

.badge {
    background-color: #facc15;
    color           : #1e293b;
    font-size       : clamp(0.6rem, 1.5vw, 0.7rem);
    padding         : 0.2rem 0.5rem;
    border-radius   : 999px;
    font-weight     : 600;
    width           : max-content;
    white-space     : nowrap;
}

/* Watermark text */
.bg-text {
    position      : absolute;
    top           : 5.2rem;
    right         : 0rem;
    font-size     : clamp(2.5rem, 8vw, 3.3rem);
    font-weight   : bold;
    color         : rgba(255, 255, 255, 0.1);
    pointer-events: none;
    user-select   : none;
    transform     : translateY(-50%);
}

/* Card Details */
.card-container .card-details {
    padding: 1.2rem;
}

/* Stats Row */
.stats {
    display        : flex;
    justify-content: space-between;
    font-size      : clamp(0.75rem, 2vw, 0.85rem);
    color          : #e2e8f0;
    margin-bottom  : 1rem;
    flex-wrap      : wrap;
    gap            : 0.5rem;
}

.stats i {
    margin-right: 4px;
    color       : #fff;
}

/* Features List */
.features {
    list-style   : none;
    margin-bottom: 1.5rem;
    padding      : 0;
}

.features li {
    display      : flex;
    align-items  : center;
    color        : #cbd5e1;
    font-size    : clamp(0.8rem, 2vw, 0.9rem);
    margin-bottom: 0.5rem;
}

.features i {
    color       : #22c55e;
    margin-right: 8px;
}

/* Price and Button */
.price-section {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 1rem;
}

.price {
    color      : white;
    font-size  : clamp(1.1rem, 3vw, 1.3rem);
    font-weight: bold;
}

.card-container .btn {
    background   : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    color        : white;
    border       : none;
    padding      : 0.4rem 1rem;
    border-radius: 0.5rem;
    font-weight  : 600;
    cursor       : pointer;
    transition   : background 0.3s;
    flex-grow    : 1;
    text-align   : center;
    white-space  : nowrap;
    min-width    : 100px;
}

.card-container .btn:hover {
    opacity: 0.9;
}

.choose_btn1 {
    background: linear-gradient(90deg, #A855F7 0%, #EC4899 100%);
}

.choose_btn2 {
    background: linear-gradient(90deg, #3B82F6 0%, #06B6D4 100%) !important;
}

.choose_btn3 {
    background: linear-gradient(90deg, #22C55E 0%, #10B981 100%) !important;
}

.choose_btn4 {
    background: linear-gradient(90deg, #F97316 0%, #EF4444 100%) !important;
}

@media (max-width: 768px) {
    .card-container .card {
        width    : 100%;
        max-width: 350px;
        margin   : 0 auto;
    }

    .bg-text {
        font-size: clamp(2rem, 10vw, 3rem);
        top      : 50%;
        right    : -1rem;
        transform: translateY(-50%) rotate(-5deg);
    }

    .price-section {
        flex-direction: column;
        align-items   : stretch;
    }

    .card-container .btn {
        width  : 100%;
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 480px) {
    .card-container .card-header {
        height : 6rem;
        padding: 0.8rem;
    }

    .card-container .card-top h3 {
        font-size: 0.95rem;
    }

    .badge {
        font-size: 0.65rem;
        padding  : 0.15rem 0.4rem;
    }

    .bg-text {
        font-size: clamp(1.8rem, 12vw, 2.5rem);
        right    : -0.5rem;
    }

    .card-container .card-details {
        padding: 1rem;
    }

    .stats {
        font-size: 0.7rem;
        gap      : 0.3rem;
    }

    .features li {
        font-size: 0.8rem;
    }

    .price {
        font-size: 1rem;
    }
}



.programs-section {
    padding: 2rem 0;
}

.section-header {
    text-align   : center;
    margin-bottom: 3rem;
}

.section-title {
    font-size  : 2.5rem;
    font-weight: 800;
    color      : #fff;
    line-height: 1.3;
}

.section-subtitle {
    font-size  : 1rem;
    font-weight: 400;
    color      : rgba(255, 255, 255, 0.6);
}

.program-card {
    background-color: #15162D;
    border-radius   : 20px;
    padding         : 2rem;
    height          : 100%;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
}

.card-title {
    font-size    : 20px;
    font-weight  : 700;
    color        : #fff;
    margin-bottom: 1rem;
}

.card-text {
    font-size  : 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color      : rgba(255, 255, 255, 0.8);
}

.program-card:hover {
    background: linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
}

/* Spacing for cards */
.card-margin-bottom {
    margin-bottom: 2rem;
}

@media (max-width: 992px) {
    .programs-section .row {
        flex-direction: column;
        align-items   : center;
    }

    .programs-section .col-lg-3,
    .programs-section .col-lg-6 {
        margin-bottom: 2rem;
    }

    .programs-section .card-margin-bottom {
        margin-bottom: 2rem !important;
        /* Override desktop spacing */
    }
}



.gym-class-timings-section {
    padding   : 2rem 0;
    text-align: center;
}

.gym-section-header {
    text-align   : center;
    margin-bottom: 3rem;
}

.gym-section-title {
    font-size  : 2.5rem;
    font-weight: 800;
    color      : #fff;
    line-height: 1.3;
}

.gym-section-subtitle {
    font-size  : 1rem;
    font-weight: 400;
    color      : rgba(255, 255, 255, 0.6);
}

.gym-carousel-container {
    display                   : flex;
    align-items               : center;
    justify-content           : flex-start;
    /* Aligned to the start to allow for scroll */
    gap                       : 1rem;
    position                  : relative;
    padding                   : 0 1rem;
    margin-top                : 3rem;
    overflow-x                : auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type          : x mandatory;
    padding-bottom            : 20px;
    scroll-behavior           : smooth;
}

.gym-carousel-container::-webkit-scrollbar {
    display: none;
}

.gym-timing-card {
    background-color : #15162D;
    border-radius    : 20px;
    padding          : 2rem 1.5rem;
    min-width        : 280px;
    height           : 500px;
    display          : flex;
    flex-direction   : column;
    justify-content  : flex-start;
    text-align       : left;
    position         : relative;
    cursor           : pointer;
    transition       : all 0.3s ease-in-out;
    scroll-snap-align: center;
}

.gym-timing-card.active {
    z-index: 10;
}

.gym-timing-card:hover {
    transform: translateY(-5px);
}

.gym-timing-card .gym-day-title {
    font-size    : 1.5rem;
    font-weight  : 700;
    color        : #fff;
    margin-bottom: 1.5rem;
    text-align   : center;
}

.gym-timing-entry {
    display      : flex;
    align-items  : center;
    padding      : 1rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.gym-timing-entry:last-child {
    border-bottom: none;
}

.gym-timing-entry i {
    margin-right: 1rem;
    color       : rgba(255, 255, 255, 0.8);
}

.gym-timing-entry p {
    margin     : 0;
    font-size  : 0.9rem;
    font-weight: 400;
    color      : rgba(255, 255, 255, 0.8);
}

.gym-timing-entry .gym-time {
    font-weight: 600;
    min-width  : 60px;
}

.gym-timing-entry .gym-age {
    font-size     : 0.8rem;
    /* margin-left: auto; */
    color         : rgba(255, 255, 255, 0.6);
}

.gym-card-active {
    background: linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.gym-carousel-nav {
    display        : flex;
    justify-content: center;
    align-items    : center;
    gap            : 20px;
    margin-top     : 3rem;
    color          : rgba(255, 255, 255, 0.6);
    font-size      : 0.9rem;
    font-weight    : 600;
}

.gym-carousel-nav .gym-nav-button {
    cursor: pointer;
}

.gym-carousel-nav .gym-dots-container {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.gym-carousel-nav .gym-dot {
    width           : 8px;
    height          : 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius   : 50%;
    transition      : background-color 0.3s ease;
    cursor          : pointer;
}

.gym-carousel-nav .gym-dot.active {
    background-color: #fff;
}

.gym-carousel-nav a {
    color          : #fff;
    text-decoration: none;
    transition     : color 0.3s ease;
}

.gym-carousel-nav a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .gym-carousel-container {
        flex-wrap      : nowrap;
        justify-content: flex-start;
    }
}


.main-container {
    width        : 100%;
    max-width    : 1300px;
    margin       : 2rem;
    border-radius: 20px;
    overflow     : hidden;
    box-shadow   : 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Left-side card with text content */
.left-card {
    background-color: #1C2432;
    padding         : 5rem 4rem;
    position        : relative;
    z-index         : 1;
    border-radius   : 20px;
    height          : 100%;
}

/* Background image for the left card */
.left-card::before {
    content            : '';
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 100%;
    height             : 100%;
    background-image   : url('https://storage.googleapis.com/assist-image-gen-prod/Frame%202147208003.jpg');
    background-size    : cover;
    background-position: center;
    opacity            : 0.3;
    z-index            : -1;
}

/* Heading styling */
.left-card h1 {
    font-size  : clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
}

/* Gradient for the "Gymnastics Brand" text */
.left-card h1 span {
    background             : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text;
    color                  : transparent;
}

.pricing-table-row-label span {
    background             : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip        : text;
    color                  : transparent;
}

/* Descriptive paragraph text styling */
.left-card p {
    font-size  : 1rem;
    color      : rgba(255, 255, 255, 0.7);
    margin-top : 1rem;
    line-height: 1.6;
}

/* List styling to match the screenshot */
.left-card ul {
    list-style  : none;
    padding-left: 0;
    margin-top  : 2rem;
}

.left-card ul li {
    position     : relative;
    padding-left : 1.5rem;
    margin-bottom: 1rem;
    font-size    : 0.95rem;
    color        : rgba(255, 255, 255, 0.9);
}

/* Custom checkmark icon using Font Awesome */
.left-card ul li::before {
    content    : '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position   : absolute;
    left       : 0;
    top        : 2px;
    color      : #00FFC2;
}

/* Right-side card with the form */
.right-card {
    background-color: #262D3D;
    padding         : 3rem 2rem;
    border-radius   : 20px;
    height          : 100%;
}

.right-card h2 {
    font-size    : 1.5rem;
    font-weight  : 600;
    margin-bottom: 2rem;
}

/* Icon next to the form title */
.right-card .title-icon {
    color       : #fff;
    margin-right: 0.5rem;
    font-size   : 1.25rem;
}

/* Styling for form inputs */
.form-control,
.form-select {
    background-color: #313A4A;
    border          : 1px solid #414B5B;
    color           : #fff;
    padding         : 0.75rem 1rem;
    border-radius   : 10px;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


.required-text {
    color     : #FF6347;
    font-size : 0.8rem;
    text-align: right;
    margin-top: 1rem;
}


.apply-btn {
    background   : linear-gradient(93deg, #FF0083 3.33%, #00A0FF 100.85%);
    border       : none;
    color        : #fff;
    font-weight  : 600;
    padding      : 1rem;
    border-radius: 10px;
    width        : 100%;
    transition   : transform 0.2s ease;
    margin-top   : 1rem;
}

.apply-btn:hover {
    transform : scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


.bottom-arrow {
    position       : absolute;
    bottom         : 2rem;
    left           : 2rem;
    width          : 40px;
    height         : 40px;
    background     : rgba(255, 255, 255, 0.1);
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #fff;
    font-size      : 1.25rem;
    transition     : background 0.3s ease;
}

.bottom-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
}


@media (max-width: 992px) {
    .main-container {
        margin : 1rem;
        padding: 0;
    }

    .left-card {
        padding      : 2rem;
        border-radius: 20px 20px 0 0;
    }

    .right-card {
        padding      : 2rem;
        border-radius: 0 0 20px 20px;
    }

    .left-card h1 {
        font-size: 2rem;
    }
}

/* Container for the entire section */
.body-1 {
    background     : #111827;
    color          : #fff;
    font-family    : 'Inter', sans-serif;
    display        : flex;
    align-items    : center;
    justify-content: center;
    min-height     : 100vh;
    margin         : 0;
    overflow       : hidden;
}

/* Container for the entire section, centered */
.tumble-testimonial-section {
    width         : 100%;
    max-width     : 1200px;
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

/* Top text block styling */
.tumble-testimonial-text {
    text-align   : center;
    margin-bottom: 3rem;
}

.tumble-testimonial-text h1 {
    font-size  : clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    color      : #121422;
}

.tumble-testimonial-text p {
    font-size  : 1rem;
    color      : #555c65;
    max-width  : 600px;
    margin     : 0.5rem auto 0;
    line-height: 1.5;
}


.gymnastics-kit-card-glowing-border {
    border             : 1px solid;
    border-image-slice : 1;
    border-image-source: linear-gradient(to right, #ec4899, #8b5cf6);
    box-shadow         : 0 0 15px rgba(139, 92, 246, 0.5);
}

.gymnastics-kit-pagination-link {
    transition: all 0.2s ease;
}

.gymnastics-kit-pagination-link.active {
    background-image: linear-gradient(to right, #ec4899, #8b5cf6);
    color           : white;
    font-weight     : 600;
}

.gymnastics-kit-pagination-link:disabled {
    opacity: 0.5;
    cursor : not-allowed;
}

.body-2 {
    font-family          : 'Inter', sans-serif;
    background           : linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    color                : white;
    min-height           : 100vh;
    display              : flex;
    align-items          : center;
    justify-content      : center;
    padding              : 20px;
    margin-left          : 5%;
    margin-right         : 5%;
    border-radius        : 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius   : 50px;
    -ms-border-radius    : 50px;
    -o-border-radius     : 50px;
}

.contact-card {
    background-color: rgba(30, 41, 59, 0.8);
    /* Semi-transparent dark background */
    backdrop-filter : blur(5px);
    /* Optional blur effect to match the image */
    border-radius   : 2rem;
    padding         : 3rem;
    box-shadow      : 0 10px 20px rgba(0, 0, 0, 0.5);
    max-width       : 1200px;
    width           : 100%;
    margin-left     : 2.5%;
}

.contact-card-title {
    font-size    : 2.5rem;
    font-weight  : 700;
    margin-bottom: 0.5rem;
}

.contact-card-subtitle {
    color        : #ccc;
    font-size    : 1rem;
    margin-bottom: 2rem;
}

.form-control,
.form-select {
    background-color: #121422;
    border          : none;
    color           : white;
    border-radius   : 1.5rem;
    padding         : 1.5rem 1.5rem;
    font-size       : 1rem;
}

.form-control::placeholder {
    color: #9ca3af;
}

.form-control:focus,
.form-select:focus {
    background-color: #121422;
    color           : white;
    box-shadow      : 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
}

.form-control.textarea {
    height: 100%;
}

.gradient-submit-btn {
    background     : linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    border         : none;
    color          : white;
    font-weight    : 600;
    padding        : 0.75rem 2rem;
    border-radius  : 2rem;
    transition     : all 0.2s ease-in-out;
    box-shadow     : 0 5px 15px rgba(0, 0, 0, 0.3);
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.gradient-submit-btn:hover {
    transform: scale(1.05);
    opacity  : 0.9;
}

.gradient-submit-btn svg {
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .contact-card {
        padding: 2rem;
    }

    .contact-card-title {
        font-size: 2rem;
    }

    .contact-card-subtitle {
        font-size: 0.9rem;
    }
}



.progress-card-container {
    max-width: 1200px;
    margin   : auto;
}

.progress-card {
    margin-left  : 5%;
    background   : linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    border-radius: 1.5rem;
    padding      : 4rem;
    color        : #ffffff;
    position     : relative;
    overflow     : hidden;
    box-shadow   : 0 10px 20px rgba(0, 0, 0, 0.15);
}

.progress-card-title {
    font-size     : 30px;
    font-weight   : 600;
    line-height   : 50px;
    letter-spacing: -5.06%;
    font-family   : "Poppins", sans-serif;
    margin-bottom : 1rem;
    vertical-align: middle;
}

.progress-card-text {
    font-size    : clamp(0.9rem, 1.5vw, 1rem);
    font-weight  : 400;
    line-height  : 1.5;
    color        : rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width    : 450px;
}

/* The complex graphic on the right side */
.progress-graphic {
    position : absolute;
    top      : 50%;
    right    : 0;
    transform: translateY(-50%) translateX(25%);
    width    : 450px;
    height   : 450px;
    z-index  : 1;
}

.graphic-ring-1 {
    position     : absolute;
    width        : 100%;
    height       : 100%;
    border       : 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow   : 0 0 20px rgba(255, 255, 255, 0.1);
    margin-left  : -40%;
}

.graphic-ring-2 {
    position     : absolute;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -50%);
    width        : 80%;
    height       : 80%;
    border       : 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow   : 0 0 20px rgba(255, 255, 255, 0.1);
    margin-left  : -40%;
}

.graphic-logo-circle {
    position        : absolute;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    width           : 50%;
    height          : 50%;
    background-color: #111422;
    border-radius   : 1.5rem;
    display         : flex;
    justify-content : center;
    align-items     : center;
    box-shadow      : 0 5px 15px rgba(0, 0, 0, 0.4);
    margin-left     : -40%;
}


.trophy-icon,
.gym-icon {
    position       : absolute;
    width          : 40px;
    height         : 40px;
    background     : linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    border-radius  : 50%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    backdrop-filter: blur(5px);
    box-shadow     : 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-left    : -40%;
}

.trophy-icon {
    top : 15%;
    left: 15%;
}

.gym-icon {
    bottom: 15%;
    right : 15%;

}

.group {
    margin-right: 793%;
}

.trophy-icon svg,
.gym-icon svg {
    width : 24px;
    height: 24px;
    color : #ffffff;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .progress-card {
        padding: 2rem;
    }

    .progress-card-title {
        font-size: 2rem;
    }

    .progress-card-text {
        font-size: 0.9rem;
    }

    .progress-graphic {
        position : relative;
        width    : 300px;
        height   : 300px;
        margin   : 2rem auto 0;
        transform: none;
    }

    .download-btn {
        width          : 100%;
        justify-content: center;
    }
}

.bottom-right-image {
    position: absolute;
    bottom  : 0px;
    right   : 0px;
    width   : 200px;
    height  : 250px;

}

@media (max-width: 768px) {
    .bottom-right-image {
        width : 100px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .bottom-right-image {
        width : 100px;
        height: 150px;
    }
}

.pricing-card {
    max-width  : 1200px;
    text-align : center;
    margin-left: 10%;
}

.header-text h1 {
    color      : #63b3ed;
    font-size  : 2.5rem;
    font-weight: 700;
}

.header-text p {
    max-width  : 600px;
    margin     : 0 auto;
    color      : #fff;
    font-size  : 0.9rem;
    line-height: 1.5;
    padding-top: 10px;
}

.age-buttons {
    margin-top     : 30px;
    display        : flex;
    justify-content: center;
    gap            : 15px;
    flex-wrap      : wrap;
}

.age-buttons .btn {
    color        : #fff;
    border       : none;
    border-radius: 50px;
    padding      : 8px 20px;
    font-weight  : 600;
    cursor       : pointer;
    transition   : transform 0.2s, box-shadow 0.2s;
}

@media (max-width: 768px) {
    .age-buttons {
        width      : 150px;
        margin-left: 10%;
    }
}

@media (max-width: 480px) {
    .age-buttons {
        width      : 150px;
        margin-left: 10%;
    }
}

/* .age-buttons .btn:hover {
    background: linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    transform : translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-pink {
    background: var(--pink-gradient);
}

.btn-blue {
    background: var(--blue-gradient);
} */

/* 
.pricing-table-container {
    margin-top      : 40px;
    padding         : 20px;
    background-image: url("./assets/img/home/shadow.png");
    border-radius   : 20px;
    box-shadow      : 0 10px 20px rgba(0, 0, 0, 0.3);
    position        : relative;

}

.back-frame {
    background-image: url("./assets/img/home/shadow-1.png");


} */

/* .pricing-table {
    display              : grid;
    grid-template-columns: 1fr repeat(4, 1fr);
    gap                  : 10px;
    color                : #fff;
    text-align           : center;
}

.pricing-table-header {
    font-weight   : 600;
    text-transform: uppercase;
    padding       : 15px 0;
    color         : #fff;
    font-size     : 1.1rem;
}

.pricing-table-header:first-child {
    visibility    : hidden;
    pointer-events: none;
}

.pricing-table-row-label {
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    padding        : 15px;
    text-transform : uppercase;
    font-weight    : 700;
    font-size      : 0.9rem;
    background     : var(--dark-purple-gradient);
    border-radius  : 10px;
    color          : #fff;
    text-align     : left;
}

.pricing-cell {
    padding         : 15px 5px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius   : 10px;
    position        : relative;
}

.pricing-cell:hover {
    background: linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    transform : scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    z-index   : 10;
    transition: all 0.3s ease-in-out;
}

.pricing-cell .price {
    font-size  : 1.5rem;
    font-weight: 700;
    display    : block;
}

.pricing-cell .old-price {
    font-size      : 0.8rem;
    color          : #8c8c9a;
    text-decoration: line-through;
    margin-left    : 5px;
}

.buy-now-btn {
    background     : var(--pink-gradient);
    color          : var(--primary-text);
    border         : none;
    padding        : 8px 15px;
    border-radius  : 50px;
    margin-top     : 10px;
    font-weight    : 600;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 5px;
}

.buy-now-btn-white-text {
    color: var(--primary-text);
}

.buy-now-btn .arrow-icon {
    background     : linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    border-radius  : 50%;
    width          : 24px;
    height         : 24px;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.badge {
    position     : absolute;
    top          : -10px;
    right        : 10px;
    font-size    : 0.7rem;
    font-weight  : 700;
    color        : var(--primary-text);
    padding      : 5px 10px;
    border-radius: 10px;
}

.badge-15 {
    background: #111827;
}

.badge-35 {
    background: #111827;
} */

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .pricing-table-header:first-child {
        visibility : visible;
        padding-top: 0;
    }

    .pricing-table-row-label {
        justify-content: center;
        text-align     : center;
    }

    .pricing-table {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-table-header {
        margin-bottom: -6%;
        margin-top   : -24%;
    }

    .pricing-table-row-label {
        grid-column: 1 / -1;
        margin-top : 20px;
    }

    .pricing-cell {
        padding: 10px 5px;
    }

    .pricing-cell .price {
        font-size: 1.2rem;
    }

    .buy-now-btn {
        font-size: 0.8rem;
        padding  : 6px 12px;
    }

    .badge {
        font-size: 0.6rem;
        padding  : 3px 8px;
        top      : -5px;
        right    : 5px;
    }
}

@media (max-width: 767.98px) {
    .header-text h1 {
        font-size: 2rem;
    }

    .header-text p {
        font-size: 0.8rem;
    }

    .age-buttons {
        flex-direction: column;
    }

    .pricing-table {
        grid-template-columns: repeat(2, 1fr);
    }
}


.footer {
    background: radial-gradient(141.47% 63.67% at 100% 0%, rgba(255, 0, 131, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(113.69% 51.83% at 0.49% 1.14%, rgba(0, 160, 255, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%), #020817;
    padding   : 40px 20px;
    margin-top: 5rem;
}

.footer .footer-top {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : flex-start;
    border-bottom  : 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom : 30px;
    column-gap     : 4rem;
    max-width      : 1200px;
    margin         : 0 auto;
}

.footer .description {
    color     : #CBD5E1;
    font-size : clamp(13px, 2vw, 14px);
    text-align: center;
    max-width : 600px;
    margin    : 0 auto;
}

.footer .social-icons {
    display        : flex;
    gap            : 15px;
    margin-top     : 20px;
    justify-content: center;
}

.footer .social-icons a {
    color        : white;
    font-size    : clamp(16px, 3vw, 18px);
    padding      : 10px;
    border-radius: 50%;
    transition   : background 0.3s;
}

.footer .social-icons a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.footer .footer-columns {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    margin-top     : 30px;
    gap            : 30px;
    max-width      : 1200px;
    margin-left    : auto;
    margin-right   : auto;
}

.footer .footer-column {
    flex      : 1 1 150px;
    text-align: center;
}

.footer-column ul li {
    margin-bottom: 0.75rem;
    line-height  : 1.4;
}

.footer-column:not(:first-child) {
    border-left : 1px solid #4a5568;
    padding-left: 2rem;
}

.footer .footer-column h4 {
    font-weight  : 700;
    margin-bottom: 10px;
    font-size    : clamp(15px, 3vw, 16px);
    color        : white;
}

.footer .footer-column ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.footer .footer-column ul li {
    margin-bottom  : 8px;
    font-size      : clamp(13px, 2vw, 14px);
    color          : #CBD5E1;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.footer .footer-column ul li i {
    margin-right: 8px;
}

@media (max-width: 1024px) {

    .footer .footer-top {
        column-gap    : 2rem;
        padding-bottom: 20px;
    }

    .footer .logo-section {
        flex         : 1 1 100%;
        margin-bottom: 20px;
    }

    .footer .footer-columns {
        gap: 20px;
    }
}

@media (max-width: 768px) {

    .footer {
        padding   : 30px 15px;
        margin-top: 3rem;
    }

    .footer .footer-top {
        flex-direction: column;
        align-items   : center;
        gap           : 20px;
        padding-bottom: 20px;
    }

    .footer .logo-section {
        margin-bottom: 10px;
    }

    .footer .footer-columns {
        flex-direction: column;
        align-items   : center;
        margin-top    : 20px;
    }

    .footer .footer-column {
        flex         : none;
        width        : 100%;
        max-width    : 250px;
        margin-bottom: 20px;
    }

    .footer .footer-column:last-child {
        margin-bottom: 0;
    }

    .footer .footer-column ul li {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 20px 10px;
    }

    .footer .social-icons {
        margin-top: 15px;
    }

    .footer .social-icons a {
        font-size: 16px;
        padding  : 8px;
    }
}

.card {
    background   : linear-gradient(135deg, #16213e, #1a1a2e);
    border-radius: 15px;
    overflow     : hidden;
}

.card-img-top {
    object-fit: cover;
    height    : 200px;

}

.card-img-top:hover {
    background: linear-gradient(135deg, #00d4ff, #ff00ff);
}

.btn-gradient {
    background   : linear-gradient(135deg, #00d4ff, #ff00ff);
    border       : none;
    padding      : 10px 20px;
    border-radius: 25px;
    transition   : transform 0.3s;
}

.page {
    background-color: #111827;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : column;
    margin-top      : 1%;
    margin-bottom   : 1%;
    font-family     : sans-serif;
}

.page-number {
    display      : flex;
    padding      : 12px;
    border-radius: 12px;
    color        : #cbd5e0;
    align-items  : center;
}

.page-number a {
    color          : #90cdf4;
    text-decoration: none;
    padding        : 8px 12px;
    margin         : 0 4px;
    border-radius  : 8px;
    display        : flex;
    align-items    : center;
    transition     : background-color 0.3s, color 0.3s;
}

.page-number a:hover {
    background-color: #4a5568;
}

.page-number a.active {
    background-color: #4299e1;
    color           : white;
}

.page-number .arrow {
    font-size: 1.2em;
}

.btn-gradient:hover {
    transform: scale(1.1);
}

.page-link {
    background-color: #16213e;
    color           : #00d4ff;
    border          : none;
}

.page-item.active .page-link {
    background-color: #00d4ff;
    color           : #fff;
}

.page-link:hover {
    background-color: #ff00ff;
    color           : #fff;
}

.phone-container {
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 50px 0;
    background-color: #111827;
    flex-wrap       : wrap;
    gap             : 30px;
}

.phone {
    width           : 300px;
    height          : 600px;
    background-color: #000;
    border          : 10px solid #333;
    border-radius   : 40px;
    box-shadow      : 0 0 20px rgba(0, 0, 0, 0.5);
    position        : relative;
    overflow        : hidden;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    cursor          : pointer;

}

.phone-screen {
    width          : 100%;
    height         : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.phone-screen video {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 30px;
}

.phone:before {
    content         : '';
    position        : absolute;
    top             : 10px;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 80px;
    height          : 10px;
    background-color: #333;
    border-radius   : 5px;
    z-index         : 2;
}


.phone:after {
    content         : '';
    position        : absolute;
    bottom          : 10px;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 50px;
    height          : 5px;
    background-color: #333;
    border-radius   : 2.5px;
    z-index         : 2;
}

@media (max-width: 768px) {
    .phone {
        width : 250px;
        height: 500px;
    }
}

@media (max-width: 480px) {
    .phone {
        width : 250px;
        height: 500px;
    }
}

.footer-column ul {
    list-style: none;
    padding   : 0;
}

.footer-column ul li a {
    text-decoration: none;
    color          : inherit;
}

.rules-container {
    max-width: 1000px;
}

.rules-card {
    background-color: #2b3040;
    border          : none;
    border-radius   : 10px;
    box-shadow      : 0 4px 8px rgba(0, 0, 0, 0.2);
}

.rules-card-header {
    background-color: #2b3040;
    border-bottom   : none;
    color           : #ffffff;
    font-size       : 1.5rem;
    font-weight     : bold;
    text-align      : center;
}

.rules-list-item {
    background-color: #2b3040;
    border          : none;
    color           : #ffffff;
    padding         : 1rem 1.25rem;
}

.list-group-flush>.list-group-item {
    background-color: #2b3040;
    color           : #ffffff;
}

.rules-title {
    font-size    : 2rem;
    font-weight  : bold;
    color        : #ffffff;
    text-align   : center;
    margin-bottom: 2rem;
}

.privacy-container {
    margin-top : 2.5%;
    margin-left: 20%;
    max-width  : 1000px;
}

.privacy-main-title {
    color        : #ffffff;
    font-size    : 2.5rem;
    margin-bottom: 30px;
}

.privacy-section-title {
    color        : #ffffff;
    font-size    : 1.8rem;
    margin-top   : 40px;
    margin-bottom: 20px;
}

.privacy-paragraph {
    color      : #ffffff;
    font-size  : 1rem;
    line-height: 1.6;
}

.privacy-contact-info {
    /* color: #ffffff; */
    line-height: 1.6;
}

.privacy-list {
    color          : #ffffff;
    list-style-type: none;
    padding-left   : 0;
    margin-top     : 10px;
}

.privacy-list-item {
    color        : #ffffff;
    position     : relative;
    padding-left : 25px;
    margin-bottom: 10px;
    line-height  : 1.6;
}

.privacy-list-item::before {
    content    : "\2022";
    font-weight: bold;
    display    : inline-block;
    width      : 20px;
    margin-left: -20px;
    position   : absolute;
    left       : 0;
    top        : 0;
}

.privacy-link {
    color: inherit;
}

.terms-container {
    max-width : 1000px;
    margin    : 0 auto;
    margin-top: 2.5%;
}

.terms-main-title {
    color        : #ffffff;
    font-size    : 2.5rem;
    margin-bottom: 30px;
}

.terms-section-title {
    color        : #ffffff;
    font-size    : 1.8rem;
    margin-top   : 40px;
    margin-bottom: 20px;
}

.terms-paragraph {
    color      : #ffffff;
    font-size  : 1rem;
    line-height: 1.6;
}

.terms-list {
    color          : #ffffff;
    list-style-type: none;
    padding-left   : 0;
    margin-top     : 10px;
}

.terms-list-item {
    color        : #ffffff;
    position     : relative;
    padding-left : 25px;
    margin-bottom: 10px;
    line-height  : 1.6;
}

.terms-list-item::before {
    content    : "\2022";
    font-weight: bold;
    display    : inline-block;
    width      : 20px;
    margin-left: -20px;
    position   : absolute;
    left       : 0;
    top        : 0;
}

.terms-contact-info a {
    color          : #d1d2d3;
    text-decoration: none;
}

.terms-contact-info a:hover {
    color: #ffffff;
}

.terms-last-updated {
    margin-top: 40px;
    font-size : 0.9rem;
    color     : #999;
}

.refund-container {
    max-width : 1000px;
    margin    : 0 auto;
    margin-top: 2.5%;
}

.refund-main-title {
    color        : #ffffff;
    font-size    : 2.5rem;
    margin-bottom: 30px;
}

.refund-intro-text {
    color        : #ffffff;
    font-size    : 1rem;
    line-height  : 1.6;
    margin-bottom: 40px;
}

.refund-section-title {
    color        : #ffffff;
    font-size    : 1.8rem;
    margin-top   : 40px;
    margin-bottom: 20px;
}

.refund-list {
    color          : #ffffff;
    list-style-type: none;
    padding-left   : 0;
    margin-top     : 10px;
}

.refund-list-item {
    color        : #ffffff;
    position     : relative;
    padding-left : 25px;
    margin-bottom: 10px;
    line-height  : 1.6;
}

.refund-list-item::before {
    content    : "\2022";
    font-weight: bold;
    display    : inline-block;
    width      : 20px;
    margin-left: -20px;
    position   : absolute;
    left       : 0;
    top        : 0;
}

.refund-contact-info a {
    color          : #d1d2d3;
    text-decoration: none;
}

.refund-contact-info a:hover {
    color: #ffffff;
}

.refund-last-updated-text {
    margin-top: 40px;
    font-size : 0.9rem;
    color     : #999;
}

.branches-main-container {
    padding: 50px 20px;
}

.branches-heading-container {
    text-align   : center;
    margin-bottom: 50px;
}

.branches-heading-container h1 {
    font-size     : 2.5rem;
    font-weight   : 700;
    color         : #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.branches-card {
    background-color: #161b22;
    border          : none;
    border-radius   : 12px;
    overflow        : hidden;
    box-shadow      : 0 4px 15px rgba(0, 0, 0, 0.3);
    transition      : transform 0.3s ease, box-shadow 0.3s ease;
    height          : 100%;
}

.branches-card:hover {
    transform : translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.branches-card-img-top {
    width          : 100%;
    height         : 200px;
    object-fit     : cover;
    object-position: center;
}

.branches-card-body {
    padding: 20px;
}

.branches-card-title {
    font-size    : 1.5rem;
    font-weight  : 600;
    color        : #ffffff;
    margin-bottom: 15px;
}

.branches-card-text {
    font-size    : 0.9rem;
    color        : #9ca3af;
    margin-bottom: 10px;
}

.branches-card-text i {
    margin-right: 8px;
    color       : #007bff;
}

.branches-card-text a {
    color          : #007bff;
    text-decoration: underline;
}

.branches-whatsapp-bubble {
    position: fixed;
    bottom  : 20px;
    right   : 20px;
    z-index : 1000;
    cursor  : pointer;
}

.branches-whatsapp-bubble img {
    width        : 60px;
    height       : auto;
    border-radius: 50%;
    box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.4);
    transition   : transform 0.3s ease;
}

.branches-whatsapp-bubble:hover img {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .branches-heading-container h1 {
        font-size: 2rem;
    }

    .branches-card-img-top {
        height: 150px;
    }

    .branches-whatsapp-bubble img {
        width: 50px;
    }
}

.price-plans-body {
    font-family     : sans-serif;
    background-color: #f0f0f0;
    display         : flex;
    justify-content : center;
    align-items     : center;
    min-height      : 100vh;
    padding         : 20px;
    background-image: linear-gradient(93deg, #00A0FF 3.33%, #FF0083 100.85%);
    margin-left     : 5%;
}

.price-plans-container {
    max-width        : 800px;
    width            : 100%;
    background-color : #fff;
    border-radius    : 15px;
    padding          : 20px;
    box-shadow       : 0 4px 15px rgba(0, 0, 0, 0.2);
    background-image : url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 16c0-4.4-3.6-8-8-8s-8 3.6-8 8h16zM0 8c4.4 0 8-3.6 8-8s-3.6-8-8-8v16zM5 8c0 4.4 3.6 8 8 8s8-3.6 8-8h-16zM8 5c-4.4 0-8 3.6-8 8s3.6 8 8 8v-16z" fill="%23CCE0FF" fill-opacity="0.25" fill-rule="evenodd" opacity="0.08"%3E%3C/path%3E%3C/svg%3E');
    background-repeat: repeat;
}

.price-plans-header {
    text-align   : center;
    margin-bottom: 20px;
}

.price-plans-logo {
    font-size   : 1.5rem;
    font-weight : bold;
    color       : #ff007f;
    display     : inline-block;
    margin-right: 10px;
}

.price-plans-title {
    font-size    : 2.5rem;
    font-weight  : bold;
    color        : #333;
    margin-bottom: 0;
}

.price-plans-subtitle {
    font-size  : 1.2rem;
    font-weight: bold;
    color      : #555;
    margin-top : -5px;
}

.price-plans-grid {
    display              : grid;
    gap                  : 20px;
    grid-template-columns: 1fr 1fr;
}

.price-plans-card {
    background-color  : #e6f0ff;
    border-radius     : 10px;
    padding           : 20px;
    position          : relative;
    box-shadow        : 0 4px 8px rgba(0, 0, 0, 0.1);
    border            : 2px solid transparent;
    border-image      : linear-gradient(to right, #ff007f, #00c6ff);
    border-image-slice: 1;
    background-image  : linear-gradient(to top, #ffeff7, #e6f0ff);
}

.price-plans-card-title {
    font-size  : 1.2rem;
    font-weight: bold;
    color      : #0d6efd;
}

.price-plans-card-program {
    font-size: 1rem;
    color    : #555;
}

.price-plans-list {
    list-style: none;
    padding   : 0;
    margin    : 15px 0 0;
}

.price-plans-list li {
    font-size    : 0.9rem;
    color        : #333;
    margin-bottom: 8px;
}

.price-plans-list li::before {
    content    : "\2022";
    color      : #0d6efd;
    font-weight: bold;
    display    : inline-block;
    width      : 1em;
    margin-left: -1em;
}

.price-plans-price {
    font-weight: bold;
    color      : #333;
    margin-left: 5px;
}

.price-plans-badge {
    position        : absolute;
    top             : 10px;
    right           : 10px;
    background-color: #ff007f;
    color           : #fff;
    padding         : 3px 8px;
    border-radius   : 5px;
    font-size       : 0.8rem;
    font-weight     : bold;
    transform       : rotate(45deg) translate(20px, -5px);
    opacity         : 0;
}

.price-plans-card:nth-child(2) .price-plans-badge {
    opacity         : 1;
    transform       : none;
    background-color: #ff007f;
    right           : 15px;
    top             : 15px;
    z-index         : 10;
}

.price-plans-footer {
    text-align: center;
    margin-top: 20px;
    font-size : 0.9rem;
    color     : #555;
}

.price-plans-line {
    height          : 2px;
    background-color: #ccc;
    margin          : 15px 0;
    background-image: linear-gradient(to right, #ff007f, #00c6ff);
}