/*.heading-text {*/
/*    font-size: 3rem;*/
/*    color: white; !* Ensure visibility *!*/
/*}*/

/*.button {*/
/*    display: inline-block;*/
/*    border-radius: 4px;*/
/*    background-color: #e6dfdd;*/
/*    border: none;*/
/*    font-weight: bold;*/
/*    text-align: center;*/
/*    font-size: 20px;*/
/*    padding: 20px;*/
/*    width: 150px;*/
/*    transition: all 0.5s;*/
/*    cursor: pointer;*/
/*    margin: 5px;*/
/*}*/

/*.btn-text{*/
/*    color: black;*/
/*}*/

/*.button span {*/
/*    cursor: pointer;*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    transition: 0.5s;*/
/*}*/

/*.button span:after {*/
/*    content: '\00bb';*/
/*    position: absolute;*/
/*    opacity: 0;*/
/*    top: 0;*/
/*    right: -20px;*/
/*    transition: 0.5s;*/
/*}*/

/*.button:hover span {*/
/*    padding-right: 25px;*/
/*}*/

/*.button:hover span:after {*/
/*    opacity: 1;*/
/*    right: 0;*/
/*}*/

/*.main.container {*/
/*    background: black;*/
/*}*/

/*.main {*/
/*    position: relative; !* Needed for absolute positioning of the overlay *!*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    text-align: center;*/
/*    border-radius: 15px;*/
/*    max-height: 560px;*/
/*    min-height: 560px;*/
/*}*/

/*.outside {*/

/*    margin-right: 12%;*/
/*    margin-left: 12%;*/
/*    padding-top: 10%;*/
/*    border-radius: 15px;*/
/*    height: 100vh;*/
/*}*/

/*.main::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-image: url("../assets/4.jpg");*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    opacity: 0.65;*/
/*    z-index: 1;*/
/*    border-radius: 15px;*/
/*}*/

/*.text-container {*/
/*    position: relative; !* Ensure it stays above the overlay *!*/
/*    z-index: 2;*/
/*    margin-right: 2%;*/
/*    margin-left: 2%;*/
/*}*/

/*.text-container button {*/
/*    margin-top: 10px;*/
/*    position: relative;*/
/*    z-index: 2; !* Keep it above the background *!*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .container {*/
/*        align-items: center;*/
/*    }*/

/*    .box {*/
/*        width: 90%;*/
/*        height: 150px;*/
/*    }*/

/*    .outside{*/
/*        margin: 0;*/
/*        border-radius: 0;*/
/*    }*/

/*    .main{*/
/*        border-radius: 0;*/
/*        max-height: 100vh;*/
/*        min-height: 100vh;*/
/*    }*/
/*    .main::before {*/
/*        border-radius: 0;*/

/*    }*/
/*}*/


/*@media (max-width: 480px) {*/
/*    .logo {*/
/*        max-width: 50%;*/
/*    }*/
/*}*/

/*@media (min-width: 200px) and (max-width: 768px) {*/
/*    .logo {*/
/*        max-width: 60%;*/
/*    }*/
/*    .heading-text {*/
/*        font-size: 2rem; !important;*/
/*    }*/
/*    .button {*/
/*        border-radius: 4px;*/
/*        font-size: 13px;*/
/*        padding: 13px;*/
/*        width: 100px;*/
/*        transition: all 0.5s;*/
/*        cursor: pointer;*/
/*        margin: 3px;*/
/*    }*/
/*}*/

/*@media (min-width: 2000px) and (max-width: 2500px)  {*/
/*    .main {*/
/*        max-height: 750px;*/
/*        min-height: 750px;*/
/*    }*/
/*}*/

/*@media (min-width: 2400px) and (max-width: 3100px)  {*/
/*    .main {*/
/*        max-height: 940px;*/
/*        min-height: 940px;*/
/*    }*/
/*}*/




html, body {
    height: 100%; /* Ensure the body takes up full height */
    margin: 0;
}

.outside.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ensure the container takes up the full height */
    margin: 0 12%; /* Margin for responsiveness */
}

.main.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    width: 100%; /* Ensure it stretches */
    max-width: 100%; /* To avoid exceeding the viewport width */
    min-height: 560px; /* You can adjust this based on your design needs */
    background: black;
}

.main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    width: 100%;
}

.main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/4.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.65;
    z-index: 1;
    border-radius: 15px;
}

.text-container {
    position: relative;
    z-index: 2;
    margin: 0 2%; /* Adjust to allow some padding */
}

.text-container button {
    margin-top: 10px;
    position: relative;
    z-index: 2; /* Ensure it stays above the background */
}

.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #e6dfdd;
    border: none;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    padding: 20px;
    width: 150px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span {
    padding-right: 25px;
}

.button:hover span:after {
    opacity: 1;
    right: 0;
}

.heading-text {
    font-size: 3rem;
    color: white; /* Ensure visibility */
}

.btn-text{
    color: black;
}

@media (max-width: 768px) {
    .outside {
        margin: 0; /* Remove margin on small screens */
        padding-top: 0; /* Adjust padding if needed */
        border-radius: 0;
    }

    .outside.container {
        margin: 0;
    }
    .main.container {
        border-radius: 0;
        min-height: 100vh;
        max-height: 100vh;
    }

    .main {
        border-radius: 0;
        min-height: 100vh; /* Fill the viewport height */
        max-height: 100vh;
    }

    .main::before {
        border-radius: 0; /* Remove border-radius on smaller screens */
    }

    .heading-text {
        font-size: 2rem; /* Reduce font size for smaller screens */
    }

    .button {
        font-size: 13px;
        padding: 13px;
        width: 100px;
        margin: 3px;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .main.container {
        min-height: 360px;
        max-height: 360px;
    }
}
@media (min-width: 1024px) and (max-width: 1359px) {
    .main.container {
        min-height: 410px;
        max-height: 410px;
    }
}
@media (min-width: 1360px) and (max-width: 1700px) {
    .main.container {
        min-height: 500px;
        max-height: 500px;
    }
}

@media (min-width: 2000px) and (max-width: 2500px) {
    .main.container {
        max-height: 750px;
        min-height: 750px;
    }
}

@media (min-width: 2400px) and (max-width: 3100px) {
    .main.container {
        max-height: 840px;
        min-height: 840px;
    }
}