body {
    overflow-x: hidden;
}

.copy-area .copy a {
    color: #fdda66;
    font-weight: bold;
}

/*----------------------blog-new-one Latest File changed again to test------------------*/
.abacus-blog-card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

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

.abacus-blog-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.abacus-blog-content {
    padding: 15px;
}

.abacus-blog-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    min-height: 48px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.abacus-blog-date {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.abacus-read-more-1,
.abacus-read-more-2,
.abacus-read-more-3,
.abacus-read-more-4 {
    display: block;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.abacus-read-more-1 {
    background-color: #4d148c;
}

.abacus-read-more-2 {
    background-color: #4d148c;
}

.abacus-read-more-3 {
    background-color: #4d148c;
}

.abacus-read-more-4 {
    background-color: #4d148c;
}

.abacus-read-more-1:hover,
.abacus-read-more-2:hover,
.abacus-read-more-3:hover,
.abacus-read-more-4:hover {
    background-color: #ff6600;
    color: #ffffff;
}

.abacus-view-all-blogs {
    display: block;
    width: 200px;
    padding: 12px 0;
    background-color: #ff6600;
    color: #fff;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    margin: 20px auto 0;
    transition: background-color 0.3s ease;
}

.abacus-view-all-blogs:hover {
    background-color: #0056b3;
    color: #fff;
}

/*----------------------------abacus for students & Instructors----------------------*/


.container-abacus-stu-inst {
    margin-top: 150px;
    margin-bottom: 60px;
}

.abacus-box {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 40px 20px 20px 20px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    text-align: left;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.abacus-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.abacus-box h2 {
    font-size: 35px;
    color: #000000;
    margin-top: 90px;
    margin-bottom: 20px;
}

.abacus-box ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
    line-height: 1.6;
}

.abacus-box ul li {
    margin-bottom: 10px;
    color: #000;
    font-size: 18px;
}

.cta-button,
.buttonijoinasinstructor {
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 22px;
    font-weight: 700;
    color: #002424;
    cursor: pointer;
    transition: 0.3s ease;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
}

.buttonijoinasinstructor {
    background-color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.buttonijoinasinstructor:hover {
    background-color: #004d40;
    color: #fff;
}


.image-container {
    position: absolute;
    top: -125px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.box-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Instructor Box Styles */
.instructor-box {
    background-color: #e0f7fa;
}

.instructor-button {
    background-color: #00796b;
}

.instructor-button:hover {
    background-color: #004d40;
}

/* Student Box Styles */
.student-box {
    background-color: #f3e5f5;
}

.student-button {
    background-color: #8e24aa;
}

.student-button:hover {
    background-color: #4a0072;
}

/* Responsive Design */
@media (max-width: 768px) {
    .abacus-box {
        margin-top: 100px;
        height: auto;
    }

    .image-container {
        top: -65px;
    }
}

@media (max-width: 576px) {
    .abacus-box {
        padding: 60px 10px 20px 10px;
    }
}

/*------------------------------end abacus for students & Instructors-----------------*/


/*-------------------------testimonial----------------------------------*/
.testimonials-section {
    width: 100%;
    padding: 0px 8%;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    padding-bottom: 50px;
    padding-top: 50px;
}

.testimonials-section .section-header {
    max-width: 700px;
    text-align: center;
    margin: 30px auto 40px;
}

.section-header h1 {
    position: relative;
    font-size: 36px;
    color: #490f89;
}

.profile-image-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.testimonials-container {
    position: relative;
}

.testimonials-container .testimonial-card {
    padding: 20px;
}

.testimonial-card .test-card-body {
    background-color: #fff;
    /* box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.12); */
    padding: 20px;
    border-radius: 10px;
}

.test-card-body .quote {
    display: flex;
    align-items: center;
}

.test-card-body .quote i {
    font-size: 45px;
    color: var(--heading-clr);
    margin-right: 20px;
}

.test-card-body .quote h2 {
    color: #ff6200;
}

.test-card-body p {
    margin: 10px 0px 15px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-clr);
}

.test-card-body .ratings {
    margin-top: 20px;
}

.test-card-body .ratings i {
    font-size: 17px;
    color: var(--primary-clr);
    cursor: pointer;
}

.testimonial-card .profile {
    display: flex;
    align-items: center;
    margin-top: 25px;
}

.profile .profile-image {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
}

.profile .profile-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profile .profile-desc {
    display: flex;
    flex-direction: column;
}

.profile-desc span:nth-child(1) {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-clr);
}

.profile-desc span:nth-child(2) {
    font-size: 15px;
    color: var(--text-clr);
}

.owl-nav {
    position: absolute;
    right: 20px;
    bottom: -10px;
}

.owl-nav button {
    border-radius: 50% !important;
}

.owl-nav .owl-prev i,
.owl-nav .owl-next i {
    padding: 10px !important;
    border-radius: 50%;
    font-size: 18px !important;
    background-color: var(--card-clr) !important;
    color: var(--primary-clr);
    cursor: pointer;
    transition: 0.4s;
}

.owl-nav .owl-prev i:hover,
.owl-nav .owl-next i:hover {
    background-color: var(--primary-clr) !important;
    color: green;
}

/* .owl-dots {
    margin-top: 15px;
} */

/* .owl-dots .owl-dot span {
    background-color: #434753 !important;
    padding: 6px !important;
} */

/* .owl-dot.active span {
    background-color: var(--primary-clr) !important;
} */



/*------------------------------ benefits new one starts --------------------------*/

.benefits-container {
    width: 100%;
    padding: 0px 0;
    text-align: center;

}

.benefits-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
}

/* Responsive styles for different screen sizes */
@media (max-width: 768px) {
    .benefits-heading {
        font-size: 24px;
    }

    .benefits-list li {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .benefits-heading {
        font-size: 20px;
    }

    .benefits-list li {
        font-size: 14px;
    }
}

/*------------------------------ benefits new one ends --------------------------*/


/*------------------------about us----------------------------------*/

.about-abacus {
    padding: 20px 20px;
    border-radius: 8px;
    color: #000;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    min-height: 500px;
}

.about-abacus h3 {
    color: orangered;
}

.section-title {
    margin-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
}

.section-title span {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
}

.section-title p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

.embed-responsive {
    position: relative;
    height: 380px;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    background-color: #000;
    border-radius: 8px;
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.row {
    justify-content: center;
}

@media (max-width: 768px) {
    .about-abacus {
        padding: 50px 15px;
        max-width: 100%;
    }

    .section-title span {
        font-size: 1.2rem;
    }

    .section-title p {
        font-size: 0.9rem;
    }
}

.button-group {
    display: flex;
    gap: 10px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.btn-student {
    background-color: #28a745;
    color: white;
}

.btn-student:hover {
    background-color: #218838;/
}

.btn-instructor {
    background-color: #007bff;
    color: white;
}

.btn-instructor:hover {
    background-color: #0056b3;
}


/*-----------------------about us ends------------------------------*/

/*-----------------------contact--------------------------*/
.main-contact-container {
    /* background: linear-gradient(135deg, #8052c5, #a682e3); */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 800px;
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.contact-container {
    background-color: #a682e3;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Left Panel Styling */
.contact-left {
    background-color: #fff;
    padding: 30px;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-left h1 {
    color: #8052c5;
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: bold;
}

.contact-left img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.social-icons a {
    color: #8052c5;
    font-size: 20px;
    margin: 0 10px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.social-icons a:hover {
    color: #59379b;
}

/* Right Panel Styling */
.contact-right {
    background-color: #8052c5;
    padding: 30px;
    flex: 1;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-right h2 {
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: bold;
    color: #fff;
}

.form-control {
    border-radius: 25px;
    border: 2px solid #d6b3ff;
    padding: 10px 20px;
    background-color: transparent;
    color: #fff;
    margin-bottom: 20px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-control:focus {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    box-shadow: none;
    border: 2px solid #d6b3ff;
    color: #000;
}

.form-control::placeholder {
    color: #d6b3ff;
}

.btn-submit {
    background-color: #fff;
    color: #8052c5;
    border-radius: 25px;
    border: none;
    padding: 10px 30px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-submit:hover {
    background-color: #f0e6ff;
    color: #59379b;
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-container {
        flex-direction: column;
    }
}

@media (max-width: 576px) {

    .contact-left,
    .contact-right {
        padding: 30px;
    }

    .contact-left h1,
    .contact-right h2 {
        font-size: 24px;
    }

    .form-control,
    .btn-submit {
        width: 100%;
        max-width: 350px;
    }

    .social-icons {
        justify-content: center;
    }
}


/*---------------------------become abacus teacher------------------------*/
.container-abacus-how-to-become-teacher {
    background-color: rgb(0, 54, 136);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 700px;
    padding-bottom: 70px;
}

.abacus-how-to-become-teacher-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.abacus-how-to-become-teacher-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    overflow: visible;
    width: 100%;
    max-width: 380px;
    text-align: center;
    position: relative;
    padding: 15px 0px 0px;
    color: #fff;
    transition: transform 0.3s ease;
    margin-top: 40px;
    border: none;
    min-height: 270px;
}


/* Different Backgrounds for Each Box */
.abacus-how-to-become-teacher-card:nth-child(2) {
    background-color: #fff;
}

.abacus-how-to-become-teacher-card:nth-child(3) {
    background-color: #fff;
}

.abacus-how-to-become-teacher-card:nth-child(4) {
    background-color: #fff;
}

.abacus-how-to-become-teacher-card:nth-child(5) {
    background-color: #fff;
}

.abacus-how-to-become-teacher-card:nth-child(6) {
    background-color: #fff;
}

.abacus-how-to-become-teacher-card:hover {
    transform: translateY(-10px);
}

.abacus-how-to-become-teacher-icon img {
    width: 130px;
    height: auto;
}

.abacus-how-to-become-teacher-content h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    margin-top: 15px;
    font-weight: 700;
    color: #ff0026;
}

.abacus-how-to-become-teacher-content p {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 15px;
    margin-top: 15px;
    color: #000000;
}

.abacus-how-to-become-teacher-container h1 {
    color: #fff;
    text-align: center;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* .abacus-how-to-become-teacher-number-circle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #003688;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} */

@media (max-width: 768px) {
    .abacus-how-to-become-teacher-card {
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .abacus-how-to-become-teacher-card {
        max-width: 100%;
    }
}



/*--------------------------become abacus teacher ends------------------*/

/*--------------------------benefits of abacus---------------------------*/

.container-abacus-benefits {
    margin-top: 50px;
    padding: 20px;
    margin-bottom: 50px;
}

.content-box {
    padding: 15px;
}

.content-box h2 {
    margin-bottom: 20px;
}

.benefits-of-abacus {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
    /* Adjusts spacing between items */
}

.benefits-of-abacus .benefit-item {
    flex: 1 1 calc(50% - 20px);
    /* Adjusts width and margin */
    margin: 10px;
    padding: 15px;
    color: #000000;
    font-weight: 600;
    font-size: 18px;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: left;
    /* Aligns text to the left */
}

.benefit-1 {
    background-color: #9dccff;
    /* Blue */
}

.benefit-2 {
    background-color: #8cffa7;
    /* Green */
}

.benefit-3 {
    background-color: #ffe085;
    /* Yellow */
}

.benefit-4 {
    background-color: #b0f4ff;
    /* Teal */
}

.benefit-5 {
    background-color: #ff939d;
    /* Red */
}

.benefit-6 {
    background-color: #bb96ff;
    /* Purple */
}

.benefit-7 {
    background-color: #ffbe89;
    /* Orange */
}

.benefit-8 {
    background-color: #a4ffe4;
    /* Light Green */
}

.benefits-of-abacus li {
    list-style: none;
    /* Removes default list styling */
}

.img-box img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .benefits-of-abacus .benefit-item {
        flex: 1 1 100%;
        /* Stacks items vertically on small screens */
    }
}

/*-----------------------benefits of abacus ends--------------------------*/

.stats-section {
    background: linear-gradient(to right, #f9d0d7, #eff6ff, #94bff6);
    padding: 50px 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    /* Ensure stats boxes wrap on smaller screens */
    margin-top: 50px;
}

.stats-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    /* Enable flexbox for alignment */
    align-items: center;
    /* Center align items vertically */
    text-align: left;
    /* Align text to the left */
    padding: 20px 10px;
    /* Adjusted padding for balance */
    width: 280px;
    /* Increased width for better text alignment */
    margin: 10px;
    /* Provides spacing between stats boxes */
    border: 1px solid rgb(206, 206, 206);
}

.stats-box img {
    height: 100px;
    width: 100px;
    margin-right: 10px;
    /* Space between image and text */
}

.stats-box h3 {
    font-size: 24px;
    color: #2c2c2c;
    margin: 0;
    /* Removed bottom margin for better vertical alignment */
}

.stats-box p {
    font-size: 16px;
    color: #6c757d;
    margin: 0;
    /* Remove default margin for better alignment */
}

.stats-box-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Align text vertically centered */
}


@media (max-width: 576px) {
    .stats-box {
        width: 100%;
        /* Make stats boxes full width on small screens */
        margin: 10px 0;
        /* Vertical margin for better spacing */
    }
}


/*----------------------process circle-------------------------------*/
.container-abacus-stu-inst {
    margin-top: 60px;
    margin-bottom: 60px;
}

.testimonial-heading {
    text-align: center;
    margin-bottom: 30px;
    font-size: 32px;
    color: #333;
}

.feature-box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    /* ensures equal height in flex parent */
}

.feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.feature-box h5 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 800;
}

/* Paragraph Style */
.feature-box p {
    font-size: 16px;
    color: #000000;
}

/* Unique Background Colors */
.feature-box.bg1 {
    background-color: #f0f8ff;
    color: #023868;
}

.feature-box.bg1 h5 {
    color: #023868;
}

.feature-box.bg2 {
    background-color: #e6ffe6;
}

.feature-box.bg2 h5 {
    color: #016c21;
}

.feature-box.bg3 {
    background-color: #fffacd;
}

.feature-box.bg3 h5 {
    color: #635a00;
}

.feature-box.bg4 {
    background-color: #ffe4e1;
}

.feature-box.bg4 h5 {
    color: #a30e01;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .feature-box {
        padding: 15px;
    }
}


/*-----------------------------test your IQ Box-----------------------------*/


/* Styled Heading with Zoom Effect */
.jsm-heading {
    font-size: 28px;
    /* Reduced font size */
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    /* Reduced padding for height */
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9966, #ff5e62);
    /* Gradient Background */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* Shadow for depth */
    margin-bottom: 20px;
    /* Space below the heading */
    margin-left: auto;
    /* Centering the heading */
    margin-right: auto;
    /* Centering the heading */
    animation: zoom 2s infinite;
}

/* Box Styles */
.jsm-box {
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    width: 80%;
    color: white;
    text-align: center;
    transition: transform 0.2s ease;
    margin-left: auto;
    /* Centering the box */
    margin-right: auto;
    /* Centering the box */
    height: 300px;
    /* Set a fixed height for all boxes */
    display: flex;
    /* Use flexbox for the content */
    flex-direction: column;
    /* Stack children vertically */
    justify-content: center;
}

/* Different Gradients for Each Box */
.jsm-box:nth-child(1) {
    background: linear-gradient(135deg, #ff9966, #ff5e62);
}

.jsm-box:nth-child(2) {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
}

.jsm-box:nth-child(3) {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
}

.jsm-box:nth-child(4) {
    background: linear-gradient(135deg, #ee9ca7, #ffdde1);
}

.jsm-box:nth-child(5) {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
}

/* Styling Headings */
.jsm-box h4 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* Paragraph Styling */
.jsm-box p {
    font-size: 18px;
    margin-bottom: 15px;
    color: #fff;
}

/* Button Styles */
.jsm-btn {
    background-color: #ffffff;
    color: #333;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    /* Added margin for spacing */
    transition: background-color 0.3s ease;
    display: block;
    /* Make buttons block elements for stacking */
    width: 80%;
    /* Set a width for buttons */
    margin-left: auto;
    /* Center the button */
    margin-right: auto;
    /* Center the button */
}

.jsm-btn:hover {
    background-color: #ddd;
    color: #111;
}

/* Animation for Box Hover
.jsm-box:hover {
    transform: translateY(-5px);
} */

/* Zoom Animation for Heading */
@keyframes zoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Left Container Styling */
.jsm-container-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Ensure boxes stretch to the same height */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .jsm-box {
        width: 100%;
    }
}



/*--------------------------What we provide-------------------------*/
.main-heading {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
}

.provide-box {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.provide-box:hover {
    transform: translateY(-10px);
}

.provide-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.provide-text {
    font-size: 1rem;
    color: #555;
}

.title-student {
    color: #007bff;
    /* Blue */
}

.title-teacher {
    color: #28a745;
    /* Green */
}

.title-vedic-student {
    color: #dc3545;
    /* Red */
}

.title-vedic-instructor {
    color: #17a2b8;
    /* Cyan */
}

@media (max-width: 768px) {
    .provide-box {
        margin-bottom: 20px;
    }
}

.curriculum-card {
    border-radius: 25px;
    padding: 20px;
    height: 100%;
    text-align: center;
    color: white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.curriculum-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Background gradients */
.junior-level-card {
    background: linear-gradient(to right, #6a11cb, #2575fc);
    /* Gradient for Junior Level */
}

.senior-level-card {
    background: linear-gradient(to right, #ff9966, #ff5e62);
    /* Gradient for Senior Level */
}

.vedic-maths-card {
    background: linear-gradient(to right, #00c6ff, #0072ff);
    /* Gradient for Vedic Maths */
}

/* White circle for icons */
.icon-wrapper {
    background-color: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icon-wrapper img {
    width: 50px;
    height: 50px;
}

.card-title {
    font-weight: bold;
    font-size: 1.8rem;
    margin-top: 50px;
    margin-bottom: 15px;
    color: #ffffff;
}

.card-text {
    font-size: 1.2rem;
    color: #ffffff;
}

.unique-heading {
    margin-bottom: 60px;
    color: #333;
    text-align: center;
    font-size: 2.5rem;
}

/*--------------------------------junior abacus-----------------------------*/
/* Custom CSS styles */
.program-details {
    padding: 20px;
}

/* Unique background colors for each benefits box */
.benefits-box-1 {
    background-color: #e0f3ff;
}

/* Light blue */
.benefits-box-2 {
    background-color: #e6f9ec;
}

/* Light green */
.benefits-box-3 {
    background-color: #ffe6e9;
}

/* Light red */
.benefits-box-4 {
    background-color: #fff5d6;
}

/* Light yellow */
.benefits-box-5 {
    background-color: #e0f7f9;
}

/* Light teal */
.benefits-box-6 {
    background-color: #f2e7ff;
}

/* Light purple */

.benefits-box {
    display: flex;
    align-items: center;
    /* Centers icon and text vertically */
    padding: 5px 8px;
    /* Minimal padding */
    border-radius: 6px;
    /* Rounded corners */
    margin: 5px 0;
    /* Spacing between boxes */
    font-size: 0.85rem;
    /* Compact font size */
    height: 30px;
    /* Shorter height */
    color: #333;
    /* Dark text */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    text-align: center;
}

.benefits-box p {
    margin: 0px;
    font-weight: 500;
    font-size: 16px;
}

.benefits-icon {
    margin-right: 8px;
    /* Space between icon and text */
}

/* Responsive adjustments for mobile view */
@media (max-width: 576px) {
    .benefits-box {
        width: 100%;
        /* Full width on small screens */
        margin: 4px 0;
        /* Smaller spacing on mobile */
    }
}

.program-details h3 {
    margin-top: 10px !important;
    margin-bottom: 10px;
}

/* .section-heading {
    background-image: linear-gradient(to right, #ff6666, #ff9966); /* Gradient from left to right
    padding: 10px;
    border-radius: 8px;
    color: white;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
} */

.section-heading {
    font-size: 2rem;
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(to right, #00c6ff, #0072ff, #6a82fb, #fc5c7d);
    /* New vibrant gradient colors */
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.10);
    /* Stronger shadow for contrast */
    letter-spacing: 2px;
    /* Slight letter spacing for style */
    position: relative;
    /* padding-bottom: 10px; */
    display: inline-block;
    text-transform: uppercase;
}

.section-heading::after {
    content: '';
    display: block;
    width: 60%;
    height: 4px;
    background: linear-gradient(to right, #00c6ff, #0072ff, #6a82fb, #fc5c7d);
    /* Matching gradient for underline */
    margin: 10px auto 0;
    border-radius: 10px;
}






.age-group {
    font-size: 1rem;
    color: white;
    font-weight: 600;
    margin: 10px 0;
    padding: 5px 10px;
    background-color: #ff6600;
    border-radius: 5px;
    display: inline-block;
}

.age-group-p {
    font-size: 16px;
    /* Regular size for description */
    /*font-weight: 600;  Bold font weight */
    margin-top: 5px;
    /* Margin for spacing */
}

/* .syllabus-box {
    background-color: #f8f9fa; 
    border-radius: 8px; 
    display: flex; 
    height: 30px; 
    border: 2px dotted #000;
} */
.syllabus-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    padding: 5px 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-left: 5px solid #ff6600;
    transition: transform 0.3s ease;
    font-weight: 600;
    color: #333;
}

.syllabus-card:hover {
    transform: translateY(-5px);
    background-color: #fef4e8;
}


.program-img {
    max-width: 100%;
    height: auto;
    /* Maintain aspect ratio */
}

.know-more-btn {
    background-color: #4d148c;
    color: #fff;
    padding: 4px 10px;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    transition: all 0.3s ease;
    line-height: 26px;
}

.know-more-btn:hover {
    background-color: #ff6600;
    color: #fff;
    text-decoration: none;
}


/*------------------------------FAQS---------------------------------------------*/
.faq-container {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.faq-heading {
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.faq-item {
    background: white;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Active state styles */
.faq-item.active {
    background-color: #e9f5ff;
    border-left: 5px solid #01c875;
}

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.faq-icon span.faq-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
}

.faq-number-1 {
    background-color: #01c875;
}

.faq-number-2 {
    background-color: #2a93db;
}

.faq-number-3 {
    background-color: #d733a7;
}

.faq-number-4 {
    background-color: #f39b12;
}

/* Text span for the question */
.faq-text {
    flex: 1;
    margin-left: 1rem;
    font-weight: 500;
}

/* Toggle icon for each item */
.faq-toggle {
    font-size: 1.5rem;
}

/* Style for the collapsible content */
.faq-body {
    padding: 15px;
    display: none;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
    margin-top: 10px;
}

.faq-body.show {
    display: block;
}

/* Add padding for the FAQ list */
.faq-list {
    padding: 1rem;
}

/* Custom margin between two columns */
.faq-column {
    padding: 0 15px;
}


/*------------------------------------Gallery--------------------------------*/
.gallery-heading {
    font-size: 2.5rem;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.video-block {
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 10px;
    border: 2px solid;
    /* Border width */
    padding: 10px;
    background-color: #ffffff;
    margin-bottom: 20px;
}

.video-block:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Custom border colors for each video block */
.video-block-unique-1 {
    border-color: #ff5e62;
}

.video-block-unique-2 {
    border-color: #4db8ff;
}

.video-block-unique-3 {
    border-color: #66cc99;
}

.video-block-unique-4 {
    border-color: #ffcc00;
}

.video-block-unique-5 {
    border-color: #ff6699;
}

.video-block-unique-6 {
    border-color: #66ff99;
}

.video-block-unique-7 {
    border-color: #3399ff;
}

.video-block-unique-8 {
    border-color: #ff9933;
}

.video-container {
    position: relative;
    overflow: hidden;
    /* padding-top: 56.25%; */
    /* 16:9 Aspect Ratio */
    border-radius: 10px;
}

.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.student-info {
    padding: 15px;
    text-align: center;
}

.student-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #6c757d;
}

/* Unique name colors */
.student-name-unique-1 {
    color: #ff5e62;
}

.student-name-unique-2 {
    color: #4db8ff;
}

.student-name-unique-3 {
    color: #66cc99;
}

.student-name-unique-4 {
    color: #ffcc00;
}

.student-name-unique-5 {
    color: #ff6699;
}

.student-name-unique-6 {
    color: #66ff99;
}

.student-name-unique-7 {
    color: #3399ff;
}

.student-name-unique-8 {
    color: #ff9933;
}

/* Style for the "View All" button */
.view-all-btn {
    display: block;
    margin: 40px auto;
    text-align: center;
    margin-top: 0px;
}

.view-all-btn a {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 30px;
    color: #fff;
    background-color: #ff5e62;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.view-all-btn a:hover {
    background-color: #ff9966;
}

/*---------------------------------testimonials------------------------------------*/

.testimonial-card {
    background-color: #4d148c;
    color: #fff;
    border-radius: 15px;
    padding: 2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-top: 16px;
}

.testimonial-card .row {
    align-items: center;
    justify-content: center;
}

.testimonial-card img {
    width: 100%;
    max-width: 150px;
    border-radius: 10px;
    margin: 0 auto;
}

.testimonial-text {
    font-size: 1rem;
    color: #f1f1f1;
}

.testimonial-name {
    font-weight: bold;
    color: #ff6600;
    margin-top: 0.5rem;
}

.testimonial-role {
    color: #c2c2c2;
    font-style: italic;
}


.testimonial-quote {
    font-size: 2rem;
    color: #ffde59;
}

.testimonial-icons {
    position: absolute;
    top: 15%;
    right: 10%;
    font-size: 2rem;
    color: #ffd700;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    color: #fff;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* background-color: #ffde59;
    border-radius: 50%;
    padding: 10px; */
    color: #ffffff;
}

/* Additional spacing for carousel controls 
.carousel-control-prev {
    left: -3%;
}
.carousel-control-next {
    right: -3%;
}*/
.testimonial-heading {
    font-size: 2.5rem;
    color: #000000;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
}


.testimonial-card {
    background: #4d148c;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 30px;
    min-height: 300px;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 30px;
}

.testimonial-card .col-md-3 {
    flex-shrink: 0;
}

.testimonial-text {
    font-size: 15px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #ff6600 transparent;
}

.testimonial-text::-webkit-scrollbar {
    width: 6px;
}

.testimonial-text::-webkit-scrollbar-thumb {
    background-color: #ff6600;
    border-radius: 3px;
}

.testimonial-stars {
    color: #FF6600;
    margin-top: 10px;
    font-size: 18px;
}

.testimonial-name {
    font-weight: bold;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .testimonial-card {
        flex-direction: column;
        text-align: center;
        height: auto;
        max-height: none;
    }

    .testimonial-text {
        max-height: none;
        overflow: visible;
    }
}

/*-----------------------------------our Modules-------------------------------------------------------*/
.course-card {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 20px;
    transition: box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Ensures that content is spaced evenly */
    align-items: center;
    /* Center icon-box horizontally */
    position: relative;
    /* Adjusts positioning for ::before */
}

/* Inside border effect */
.course-card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 8px;
    pointer-events: none;
}

.course-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Full width */
    height: 200px;
    /* Fixed height for the icon box */
    overflow: hidden;
    /* Crops any overflow from the image */
    margin-bottom: 15px;
    padding: 0;
    /* Remove padding to prevent extra space */
    border-radius: 8px;
    /* Optional: Matches box styling */
}

.icon-box img {
    width: 100%;
    /* Full width of the icon box */
    height: 100%;
    /* Full height of the icon box */
    object-fit: cover;
    /* Ensures the image fills the box without stretching */
    border-radius: 8px;
    /* Optional: Matches box styling */
}




/* Custom background and shadow for each icon box */
.icon-box.abacus-students {
    color: white;

}

.icon-box.vedic-maths {
    background-color: #e83e8c;
    color: white;
}

.icon-box.abacus-instructors {
    background-color: #6610f2;
    color: white;
}

.icon-box.abacus-schools {
    background-color: #fd7e14;
    color: white;
}

.icon-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Ensures the image maintains its aspect ratio */
}

.course-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 10px;
    /* Added margin for spacing */
    height: 50px;
    /* Fixed height for heading */
    display: flex;
    align-items: center;
    /* Center content vertically */
    justify-content: center;
    /* Center content horizontally */
}

.course-description {
    font-size: 14px;
    color: #000000;
    /* font-weight: 300; */
    margin-bottom: 15px;
    /* Space below the paragraph */
    flex-grow: 1;
    /* Allows the description to take up space */
}

.demo-btn {
    background-color: #ff6600;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    margin-top: auto;
    /* Ensures button stays at the bottom */
    align-self: center;
}

.demo-btn:hover {
    background-color: #4d148c;
}

.demo-btn.vedic-maths {
    background-color: #4d148c;
}

.demo-btn.vedic-maths:hover {
    background-color: #ff6600;
}

.demo-btn.abacus-instructors {
    background-color: #ff6600;
}

.demo-btn.abacus-instructors:hover {
    background-color: #4d148c;
}

.demo-btn.abacus-schools {
    background-color: #4d148c;
}

.demo-btn.abacus-schools:hover {
    background-color: #ff6600;
}

.course-card {
    width: 100%;
    /* Ensures equal width */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .course-card {
        margin-bottom: 20px;
    }
}


/* General Styles */
.jsm-container-left {
    position: relative;
    /* For absolute positioning of the pseudo-element */
}

.jsm-box {
    border: 2px solid transparent;
    /* Default border to transparent */
    padding: 15px;
    margin: 15px 0;
    /* Space between boxes */
    position: relative;
    /* For pseudo-element positioning */
}

/* Vertical Line on Right Side */
@media (min-width: 992px) {

    /* Laptop and above */
    .jsm-container-left::after {
        content: '';
        /* Create an empty pseudo-element */
        position: absolute;
        right: 45px;
        /* Adjust this value for the distance from the box */
        top: 0;
        /* Start from the top of the heading */
        height: calc(80vh - 100px);
        /* Full height of the viewport minus header or margin */
        width: 2px;
        /* Width of the vertical line */
        background-color: #f7a7a7;
        /* Change this to your desired border color */
    }

    .jsm-heading {
        position: relative;
        /* To help align the vertical line */
        z-index: 1;
        /* Ensure the heading is above the line */
        margin-left: 73px;
    }
}

/* Ensure full width for video */
.embed-responsive {
    max-width: 100%;
    /* Make sure video is responsive */
    height: auto;
}



/*----------------add on services--------------*/

.abacus-programs-wrapper {
    padding: 60px 0;
}

.abacus-section-title {
    text-align: center;
    color: #4d148c;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
}

.abacus-program-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 30px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.abacus-program-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.abacus-text-content {
    flex: 1;
    padding-right: 20px;
}

.abacus-text-content h3 {
    font-size: 26px;
    font-weight: 700;
    color: #4d148c;
}

.abacus-text-content p {
    margin: 10px 0;
    color: #333;
    font-size: 15px;
}

.abacus-text-content .btn {
    /* margin-top: 15px; */
    border-radius: 50px;
    padding: 8px 22px;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-orange {
    background-color: #ff6600;
}

.btn-orange:hover {
    background-color: #4d148c;
}

.btn-purple {
    background-color: #4d148c;
}

.btn-purple:hover {
    background-color: #ff6600;
}

.abacus-image-holder {
    width: 180px;
    flex-shrink: 0;
}

.abacus-image-holder img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .abacus-program-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .abacus-text-content {
        padding-right: 0;
    }

    .abacus-image-holder {
        margin-top: 20px;
        width: 150px;
    }
}

/*--------about us------------*/
.language-section {
    background-color: #ffffff;
    border: 1px solid #fccb72;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 8px;
}

.language-subheading {
    color: #ff6600;
    font-weight: 600;
    font-size: 22px;
}

.language-heading {
    font-weight: 700;
    color: #0d1b3e;
}

.language-description {
    color: #555;
    font-size: 16px;
}

.language-features {
    list-style: none;
    padding-left: 0;
    color: #000000;
    font-weight: 500;
}

.language-features li {
    margin-bottom: 8px;
}

.btn-learn-more {
    background-color: #ff6600;
    color: #fff;
    border-radius: 30px;
    padding: 5px 25px;
    text-decoration: none;
}

.btn-learn-more:hover {
    background-color: #4d148c;
    color: #fff;
    border-radius: 30px;
    padding: 5px 25px;
    text-decoration: none;
}

.custom-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    height: 0;
    overflow: hidden;
}

.custom-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*---contact us section nav----*/
.contact-section-heading h1{
    background-color: #4d148c;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-weight: bold;
    font-size: 24px;
    margin: 0;
}

.contact-section-nav-link {
    display: block;
    width: 100%;
    padding: 15px 25px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
    font-size: 18px;
}

.contact-section-nav-link:hover {
    color: #000000;
    background-color: #ffffff;
    border: 2px solid #000000;
}

.franchisee-link {
    background-color: #f4436c;
}

.student-link {
    background-color: #ff6600;
}

.career-link {
    background-color: #99cc33;
}

.school-link {
    background-color: #55c2d5;
}

.contact-section-nav .col-6 {
    margin-bottom: 20px;
}

.breadcrumb-title span h1 {
  color: #ff6c0c;
  display: inline-block;
}


/*-------------Purchase page-----------*/
.purchase-page-hero {
      background: linear-gradient(rgba(77,20,140,0.8), rgba(77,20,140,0.8)), url('https://via.placeholder.com/1200x300') no-repeat center center/cover;
      color: #fff;
      padding: 60px 0;
      text-align: center;
      border-radius: 0 0 20px 20px;
    }
    .purchase-page-card {
      position: relative;
      background: #fff;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
      height: 100%;
    }
    .purchase-page-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.1);
    }
    .purchase-page-img {
      width: 100%;
      height: 260px;
      object-fit: cover;
    }
    @media (max-width: 767px) {
      .purchase-page-flex {
        flex-direction: row !important;
      }
      .purchase-page-img {
        width: 45%;
        height: auto;
      }
      .purchase-page-content {
        width: 55%;
        padding: 15px;
      }
    }
    .purchase-page-content {
      padding: 20px;
      text-align: left;
    }
    .purchase-page-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #4d148c;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .purchase-page-heading span {
      font-size: 14px;
      color: #333;
    }
    .purchase-page-rating i {
      color: #ffc107;
      font-size: 16px;
    }
    .purchase-page-price {
      color: #4d148c;
      font-weight: 600;
      font-size: 18px;
    }
    .purchase-page-btn {
      background: #ff6600;
      border: none;
      border-radius: 30px;
      font-weight: 500;
      font-size: 14px;
      padding: 8px 20px;
      color: #ffffff;
    }
    .purchase-page-btn:hover{
      background: #4d148c;
      border: none;
      border-radius: 30px;
      font-weight: 500;
      font-size: 14px;
      padding: 8px 20px;
      color: #ffffff;
    }
    
    .purchase-page-btn i {
      margin-left: 5px;
    }
    .purchase-page-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
    }
    .purchase-page-wishlist {
      background: #fff;
      border: 2px solid #ff6600;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff6600;
      font-size: 16px;
      transition: all 0.3s;
      cursor: pointer;
    }
    .purchase-page-wishlist:hover {
      background: #4d148c;
      color: #fff;
    }