/* General Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color:#FDFBFE;;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: hidden;
    /* Adjust the body width, background color, padding, and max-width */
}

/* Header Frame */
.header-frame {
    position: relative;
    width: 100%;
    max-width: 1100px; /* Change this to adjust header banner width */
    height: 435px; /* Adjust height of header banner */
    border-radius: 20px; /* Adjust border radius of the banner */
    background-color: #505FF5; /* Change header background color */
    margin: 43px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Background Circles */
.background-circles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.circle-group {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-group.left {
    left: -150px; /* Adjust position of the left circle group */
    top: 50%;
    transform: translateY(-50%);
}

.circle-group.right {
    right: -150px; /* Adjust position of the right circle group */
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
}

.big-circle {
    width: 500px; /* Adjust size of big circle */
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(268deg, #8E76F6 1.79%, #505FF5 36.72%);
    /* Adjust gradient color of the big circle */
}

.small-circle {
    position: absolute;
    width: 250px; /* Adjust size of small circle */
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(268deg, #8E76F6 1.33%, #505FF5 49.07%);
    /* Adjust gradient color of the small circle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Header Content */
.header-content {
    text-align: center;
    color: #FFF;
    z-index: 1;
}

.header-title {
    font-size: 100px; /* Adjust size of the header title */
    font-weight: 600;
}

.header-subtitle {
    font-size: 18px; /* Adjust size of the subtitle */
    font-weight: 500;
    margin-bottom: 20px;
    max-width: 600px; /* Adjust max-width for subtitle */
    margin-left: auto;
    margin-right: auto;
}

.cta-btn {
    width: 250px; /* Adjust width of the button */
    height: 60px; /* Adjust height of the button */
    border-radius: 30px; /* Adjust button border radius */
    background: linear-gradient(90deg, #F4C4FB 0%, #D1C1FA 100%);
    /* Adjust button background gradient */
    color: #505FF5; /* Adjust button text color */
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 100% */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    transform: scale(1.05); /* Slightly increase the size by 5% */
    transition: transform 0.3s ease; /* Smooth transition effect */
}

/* Back Button */
.back-button {
    position: absolute;
    bottom: 22px;
    left: 22px;
    width: 52px;
    height: 52px;
    border-radius: 50%; /* Adjust shape of back button */
    background: rgba(255, 255, 255, 0.2); /* Adjust back button background */
    border: 1px solid white; /* Add 1px white border */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.4); /* Adjust back button hover effect */
}

.back-button svg {
    width: 29px;
    height: 29px;
}

/* Text Sections */
.text-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1100px;
    margin: 135px auto 0 auto;
    padding: 0 10px;
    position: relative;
    /* Adjust margins, padding, and max-width of the text section */
}

.text-frame {
    flex: 1;
    padding: 20px;
    padding-top: 50px;
    margin-left: -20px; /* Align text frame to the left */
    /* Adjust padding, margins, and alignment of the text frame */
}

.main-title {
    font-size: 36px;
    font-weight: 500;
    color: #000;
    letter-spacing: -0.25px;
    line-height: 34px;
    margin-bottom: 20px;
    width: 350px; /* Fixed width of the main title */
    margin-bottom: 10;
    text-align: left;
}

.description {
    font-size: 14px; /* Adjust font size */
    font-weight: 500; /* Adjust font weight */
    color: #000; /* Adjust text color */
    color: #000;
    margin-bottom: 20px;
    width: 450px; /* Fixed width of the main title */
    margin-top: 15px;
    text-align: left;
}

.bold-text {
    font-weight: 700; /* Make the bold text bolder */
}

/* Point Boxes */
.point-box {
    width: 480px;
    background-color: #F8FAFD; /* Adjust background color of point box */
    border-radius: 25px; /* Adjust border radius of point boxes */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px; /* Adjust padding inside point boxes */
    margin-bottom: 10px; /* Adjust space between point boxes */
    margin-left: -10px;
    transition: background-color 0.3s ease;
    position: relative;
}

.point-box:hover {
    background-color: #D7EFFC; /* Adjust hover background color for point boxes */
}

.point-text h2 {
    font-size: 20px; /* Adjust font size of point titles */
    font-weight: 500;
    color: #000;
    margin-bottom: 10px;
}

.point-text p {
    font-size: 14px; /* Adjust font size of point descriptions */
    font-weight: 500;
    color: #000;
}

.point-icon {
    width: 32px;
    height: 32px;
    background-color: #FFF;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 17px;
    right: 22px;
}

/* Section Image */
.section-image {
    width: 50%; /* Adjust the image width */
    height: auto;
    position: absolute;
    right: 0;
    object-fit: cover;
    border-radius: 10px;
    /* Adjust how images fit into the container, alignment, and size */
}

/* Info Banners */
.info-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Adjust max-width for info banners */
    height: 300px; /* Adjust the height of the info banners */
    border-radius: 20px; /* Adjust border radius of banners */
    margin: 100px auto;
    padding: 30px; /* Adjust padding inside the info banners */
    color: #FFF;
    width: 100%;
}

.banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.banner-text {
    flex: 1;
    max-width: 600px; /* Adjust max-width for text inside banners */
}

.banner-title {
    width: 607px;
    height: 41px;
    flex-shrink: 0;
    color: #FFF;
    font-family: Poppins;
    font-size: 45px;
    font-style: italic;
    font-weight: 500;
    line-height: 57px; /* 114% */
    letter-spacing: -0.25px;
    margin-bottom: 30px;
    margin-left: 30;
}

.banner-subtext {
    width: 600px;
    height: 65px;
    flex-shrink: 0;
    color: #FFF;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 125% */
    margin-bottom: 30px;
    margin-left: 30;

}

.banner-btn {
    width: 500px; /* Button width */
    height: 80px; /* Button height */
    border-radius: 25px; /* Rounded corners */
    margin-left: 0; /* Align the button perfectly with the text in the banner */
    display: flex;
    justify-content: flex-start; /* Align text to the left */
    align-items: center;
    position: relative; /* Allows positioning of the icon inside the button */
    flex-shrink: 0; /* Prevent shrinking */
    background-color:#FFFFFF; /* Background color */
    color: #FE6FD5; /* Button text color */
    font-size: 20px; /* Text size */
    font-weight: 600; /* Text weight */
    cursor: pointer;
    padding-left: 20px; /* Adds left padding to create space between text and left edge */
    outline: none; /* Removes any outline */
    border: none; /* Removes default border */
    box-sizing: border-box; /* Ensure padding and width work as expected */
    position: relative; /* Important for positioning the icon */
    margin-left: 30;

}

.icon-container {
    width: 32px; /* Icon container width */
    height: 32px; /* Icon container height */
    border-radius: 5px; /* Rounded corners */
    position: absolute; /* Allows for absolute positioning inside the button */
    top: 15px; /* 15px from the top of the button */
    right: 15px; /* 15px from the right of the button */
    background-color: #FE6FD5; /* Background color for the icon container */
    display: flex;
    justify-content: center;
    align-items: center; /* Center the icon inside the container */
}

.banner-btn:hover {
    background-color: #FFF0FA; /* Adjust hover background color for the button */
}

.banner-image {
    width: 250px; /* Adjust width of banner images */
    height: auto; /* Adjust height of banner images */
    object-fit: cover;
    margin-right: 50px;
}


/* INFO BANNER 2 Styling with Higher Specificity */

/* Button Styling in Info Banner 2 */
.info-banner[style*="background: linear-gradient(90deg, #FFDEBB 0%, #FF7D8B 100%);"] .banner-btn {
    background-color: #FFFFFF; /* Button background color */
}

/* Icon Container Styling in Info Banner 2 with higher specificity */
.info-banner[style*="background: linear-gradient(90deg, #FFDEBB 0%, #FF7D8B 100%);"] .banner-btn .icon-container {
    background-color: #FFAEA4 !important; /* Icon container background color */
}

/* Button Hover Effect in Info Banner 2 */
.info-banner[style*="background: linear-gradient(90deg, #FFDEBB 0%, #FF7D8B 100%);"] .banner-btn:hover {
    background-color: #FFEDEA; /* Button background color on hover */
}

/* Responsive Design */
@media (max-width: 1200px) {
    body {
        max-width: 100%;
    }

    .text-section, .info-banner {
        max-width: 1000px; /* Adjust width for smaller screens */
    }
}

@media (max-width: 992px) {
    .text-section {
        flex-direction: column;
    }

    .section-image {
        width: 100%; /* Make the image full width for smaller screens */
        height: auto;
        margin-left: 0;
        margin-top: 20px;
        position: static;
    }

    .info-banner {
        flex-direction: column;
        height: auto;
    }

    .banner-content {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .header-title {
        font-size: 36px; /* Adjust header title size for tablet screens */
    }

    .cta-btn {
        width: 100%; /* Make button full width for tablet screens */
    }

    .main-title {
        font-size: 28px; /* Adjust main title size for smaller screens */
    }
}

@media (max-width: 576px) {
    .header-title {
        font-size: 28px; /* Adjust header title size for small mobile screens */
    }

    .text-section, .info-banner {
        padding: 10px; /* Adjust padding for small screens */
    }

    .point-box {
        flex-direction: column;
    }

    .point-icon {
        position: static;
        margin-top: 10px;
    }
}