/*===================Risk Free================*/
.tutor__process {
    background-color: #C6C4F3;


     /* 1rem margin at top and bottom */
    padding: 2rem; /* Ensure no extra padding */
}

.class__container {
  
    display: grid;
    grid-template-columns: 2fr 1fr; /* Single column layout */
    align-items: center;
    gap: 5rem;
    height: 100%;
    width: 100%; /* Ensure it takes full width */
    max-width: 76%; /* Optional: constrain to a max-width */
    margin: 0 auto; /* Center the container */
    padding: 0 2rem; /* Add padding for spacing inside the container */
}

.class_categories {
    
    margin-bottom: 0;
    margin-top: 0;
}

.class_category h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: #F7F7F7;
}

.class__left h2{
    text-align: center;
    margin-bottom: 1rem;
    color: #F7F7F7;

}

.class_categories__container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%; /* Ensure it takes full width */
}

.class_categories__right {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    gap: 1.2rem;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    position: relative;
}

.class_category {
    background: #2b70c9;
    padding: 1rem;
    border-radius: 4rem;
    transition: all 400ms ease;
    text-align: center;
    width: 100%; /* Adjust width for individual items */
}

.class_category:first-child, 
.class_category:last-child {
    align-self: flex-start; /* Align the first and last items to the left */
}

.class_category:nth-child(2) {
    align-self: flex-end; /* Align the middle item to the right */
    margin-left: auto; /* Push the middle item to the right */
}

.class_category:hover {
    filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, .4));
    z-index: 1;
}

.class_category__icon {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, .4));
    border-radius: 0.9rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.class_category h3 {
    font-size: 1.6rem;
    color: #ffde00;
    margin: 1rem 0;
}

.class_category p {
    font-size: 1.3rem;
    color: #F7F7F7;
    margin-bottom: 0.1rem;
}

.class__right {
    height: 100%; /* Ensures the background color covers the full height */
    display: flex; /* Use flexbox to align the image */
    align-items: center; /* Center the image vertically */
    justify-content: center; /* Center the image horizontally */
    padding: 1rem; /* Optional: Add some padding around the content */
    box-sizing: border-box; /* Include padding in the height/width calculation */
}

.class__right-image img {
    max-width: 100%; /* Ensures the image scales properly */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures image doesn’t overflow */
}

/*===================video================*/
.header__right-video {
    position: relative;
    
    max-width: 100%; /* Adjust the width as needed */
    height: auto;
    border: 5px solid #6A1B9A; /* Nice frame */
    border-radius: 10px;
    overflow: hidden;
}

.header__right-video video {
    width: 100%;
    border-radius: 5px;
    height: 100%; /* Ensures video matches the container height */
    display: block; /* Removes any gaps caused by inline elements */


}



.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.play-button img {
    width: 50px;
    height: 50px;
}


/*===================button container================*/

.button-container {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: .9rem;
    margin-top: .2rem;
    height: auto; /* Allow height to adjust based on content */
    width: 80%;  /* Ensure buttons fill their grid cell */
}


.full-width {
    grid-column: span 2; /* Span across both columns to make it full width */
    width: 100%; /* Ensure the button takes up the full width */
    text-align: center;  /* Center the text in the button */

}


/*===================books================*/
.books {
    background-color: #C6C4F3;

    position: relative;
    overflow: hidden;
    min-height: auto; /* Let height adjust based on content */
    margin: 1rem 0; /* 1rem margin at top and bottom */
    padding: 2rem; /* Ensure no extra padding */
}

.books__container {
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}




.books__left p {
    margin: 1rem 0 1rem;
    font-size: 1rem;
}

.books__left h1, 
.books__left h4, 
.books__left p {
    text-align: left;
}



.books__left h2 {
    margin-bottom: 1rem; /* Reduce the bottom margin */
    text-align: center;
    color: var(--color-blue);
}
.books__left h4 {
    margin-bottom: 1rem; /* Reduce the bottom margin */
    color: var(--color-blue);
   
    
}


.books__right h2 {
    margin-bottom: 1rem; /* Reduce the bottom margin */
    color: var(--color-green);
    
}

.books__right h4 {
    margin-bottom: 1rem; /* Reduce the bottom margin */
    color: var(--color-blue);
    
}




.books__list {
    list-style: none;
    padding-top: 50px;
}

.padded-item{
    padding-top: 0;
}

.books__list li {
   
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.books__list li i {
    color: #6A1B9A; /* Bright orange for checkmark */
    margin-right: 0.75rem;
}

.books__right img {
    max-width: 100%; /* Ensure the image fits within its container */
    max-height: 350px; /* Set maximum height */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Ensures the entire image is visible */
}


/* Highlighted text style */
.highlight {
    color: var(--color-text);
    font-weight: bold;
    display: grid;

    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.highlight__title {
    text-align: center; /* Centers the text */
    max-width: 100%; /* Ensures it doesn’t overflow */
    margin: 0 5rem .1rem 5rem; /* Adds 1rem margin to the bottom */

    
}

.full-width-header {
    background-color: #D0EEF9; /* Background color for the full width */
    max-width: 100%; /* Full width of the viewport */
    padding: 2rem 0; /* Padding for vertical space */
    margin: 0 auto; /* Center the container */
    text-align: center; /* Center the text */
}



/*===================kids group class================*/

.kids-group {
    background-color: #F7F7F7;
    padding: 0 0; /* Vertical padding for section */
}

.kids-group-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.kids-group-text {
    text-align: left;
}

.kids-group-text p {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.kids-group-text p i {
    color: #6A1B9A; /* Color for checkmark */
    margin-right: 0.75rem;
}

.kids-group-image {
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    flex-direction: column; /* Ensures that any text (h2, h4) is above the image */
    min-height: 100%; /* Optional: Adjust this if the container has a set height */
}

.kids-group-image h2 {
    margin-bottom: 0.5rem;
    color: var(--color-green); /* Replace with your actual color variable */
}

.kids-group-image h4 {
    margin-bottom: 1rem;
    color: var(--color-blue); /* Replace with your actual color variable */
    text-align: center; /* Horizontally centers the text */
    max-width: 900px;

    

}

.kids-group-image img {
    max-width: 60%; /* Restrict image width */
    height: auto;
    object-fit: contain;
}


































/*===================For Tablets================*/
@media screen and (max-width:1024px) {
    .container {
        width: var(--container-width-md);
    }
    .class__container {
        display: grid;
        grid-template-columns: 1fr; /* Single column layout for tablets */
        align-items: center;
        gap: 2rem; /* Adjust gap for tablet screens */
        padding: 0 1rem; /* Add padding for spacing */
    }

    .class_categories__container {
        flex-direction: column; /* Stack items vertically on tablets */
        align-items: center; /* Center items horizontally */
    }

    .class_categories__right {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 1rem; /* Adjust gap for tablets */
    }

    .class_category {
        width: 100%; /* Ensure categories take full width */
        padding: 1rem; /* Adjust padding */
        border-radius: 1rem; /* Adjust border radius for tablets */
    }
    .class__right {
        display: none; /* Hide the right section on mobile */
    }

    .books__container {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 2rem; /* Adjust gap for tablets */
    }

    .books__right {
        order: 1; /* Make the right part come first on tablets */
    }

    .books__left {
        order: 2; /* Make the left part come second on tablets */
    }

    .books__image {
        order: 3; /* Ensure the image comes last on tablets */
    }

    .header__right-video {
        width: 100%; /* Ensure video takes full width */
        height: auto; /* Maintain aspect ratio */
        border: 4px solid #4aae01; /* Adjust border for tablets */
        border-radius: 8px; /* Adjust border-radius for tablets */
    }

    .play-button {
        width: 70px; /* Adjust play button size */
        height: 70px;
    }

    .play-button img {
        width: 40px; /* Adjust play button image size */
        height: 40px;
    }

    .highlight__title {
        margin-bottom: 3rem; /* Adjust bottom margin */
    }

    .button-container {
        grid-template-columns: repeat(2, 1fr); /* Keep 2x2 layout for tablets */
        grid-gap: 15px;
        height: auto; /* Allow height to adjust based on content */
        width: 100%;  /* Ensure buttons fill their grid cell */
    }


}


/*===================For Mobile================*/
@media screen and (max-width: 600px) {
    .container {
        width: 94%; /* Ensure containers take full width */
    }

    .class_categories__container,
    .books__container,
    .highlight__title {
        width: 100%; /* Ensure containers take 95% width */
        max-width: 100%; /* Limit the maximum width to 95% */
        margin-bottom: 2rem;
    }

    /*===================Tutoring Process===============*/
    .class__container {
        display: grid;
        grid-template-columns: 1fr; /* Single column layout */
        align-items: center;
        gap: 5rem;
        height: 100%;
        width: 100%; /* Ensure it takes full width */
        max-width: 100%; /* Optional: constrain to a max-width */
        margin: 0 auto; /* Center the container */
        padding: 0; /* Add padding for spacing inside the container */
    }

    .class_categories__right {
        grid-template-columns: 1fr; 
        gap: 0.7rem;
    }

    .class_category {
        padding: 1rem;
        border-radius: 1rem;
        text-align: center;
        width: 100%; /* Ensure it takes full width */
    }

    .class__right {
        display: none; /* Hide the right section on mobile */
    }

    .books__container {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .books__right {
        order: 1; /* Make the right part come first on mobile */
    }

    .books__left {
        order: 2; /* Make the left part come second on mobile */
    }

    .books__image {
        order: 3; /* Ensure the image comes last on mobile */
    }

    .books__right img {
        max-width: 100%;
    }
    .button-container {
        grid-template-columns: 1fr; /* Stack buttons vertically on mobile */
        width: 100%; /* Full width on mobile */
    }

    .btn {
        width: 100%; /* Make sure buttons take full width on mobile */
    }

    .full-width {
        grid-column: span 1; /* On mobile, no need for spanning two columns */
        font-size: .9rem;
    }


    .header__right-video {
        position: relative;
        max-width: 100%;
        height: auto; /* Ensure the height adjusts based on the content */
        overflow: hidden; /* Hide overflow to avoid cutting off video */
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        border: 4px solid #4aae01; /* Adjust border for mobile */
        border-radius: 8px; /* Adjust border-radius for mobile */
        margin-bottom: 2rem; /* Add margin below video for spacing */
    }

    .header__right-video video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        object-fit: cover; /* Ensure video covers the container */
    }


    .kids-group-image img {
        max-width: 100%; /* Restrict image width */

    }



}