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

 body {

     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     /* font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif; */
 }

 .container {
     display: flex;
     width: 100%;
     height: 625px;
     background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
         url('Assets/img/Background Img.jpg');
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .logo-img {
     width: 183px;
     height: 103px;
     position: absolute;
     top: -2%;
     left: 10%;

 }

 #lang {

     color: rgb(255, 255, 255);
     background-color: #000000;
     padding: 5px 10px;
     border: 0.1px solid rgb(119, 114, 114);
     border-radius: 4px;
     height: 34px;
     width: 120px;

     position: absolute;
     right: 20vw;
     top: 4vh;
     text-align: center;
     font-size: 15px;
 }

 #lang option {
     height: 35px;
     width: 100;
     font-weight: 20px;

 }

 .sign-out {
     position: absolute;
     top: 3.6%;
     right: 10vw;
     height: 31px;
     width: 90px;
     border: 0.1px solid rgb(102, 101, 99);
     border-radius: 4px;
     background-color: #ec1c1c;

 }

 .sign-out p {
     margin-top: 3%;
     font-weight: bolder;
     color: white;
     text-align: center;
 }


 .hero-text {

     position: absolute;
     /* left: 34%; */
     bottom: 40%;
     left: 32vw;
     color: white;
     font-size: 35px;
     font-weight: bolder;
     align-items: center;
 }

 .sub-content {

     color: white;
     font-weight: 200px;
     position: absolute;
     bottom: 33vh;
     left: 36vw;
     font-size: 23px;
 }

 #sign-up {
     position: absolute;
     bottom: 20vh;
     left: 40vw;
     font-size: 23px;
     font-weight: bolder;
     color: white;
     background-color: rgba(255, 0, 0, 0.877);
     height: 3rem;
     width: 15rem;
     border: 0;
     border-radius: 7px;
     cursor: pointer;
     padding: 0.75rem 1.5rem;
 }

 @media (max-width: 480px) {
     .main-content {
         font-size: medium;
     }

     .sub-title {
         font-size: 10px;
     }
 }

 .middle {
     background-color: black;
 }

 .imgs {
     width: 85vw;
     display: flex;
     flex-direction: row;
     gap: 20px;
     margin-left: 10vw;
     overflow-x: auto;
     overflow-y: hidden;

 }

 .trnd {
     color: white;
     margin-left: 8vw;
     margin-bottom: 20px;

 }

 .imgs img {

     border-radius: 10px;
     flex-shrink: 0;
     /* Prevent images from shrinking in flex*/
     transition: transform 0.3s;
     margin-bottom: 50px;
 }

 .imgs img:hover {
     transform: scale(1.1);
     cursor: pointer;
 }

 .imgs::-webkit-scrollbar {
     /*  it hides the visible part of the scrollbar at bottom */
     height: 8px;
 }

 .sub-mid {
     background-color: black;
     height: 30%;
     width: 100%;
 }

 .sub-mid h2 {
     color: white;
     margin-left: 6%;

 }

 .reason-container {
     display: grid;
     /* grid-template-columns: repeat(2, 1fr ); */
     grid-template-columns: 1fr 1fr;
     row-gap: 15px;
     column-gap: 1px;
     margin-top: 1%;
     margin-left: 7%;
     margin-right: 7%;
 }

 .reason-box {
     height: 200px;
     width: 98%;
     border-radius: 15px;
     background: linear-gradient(to right, #1a1f3c, #3a0e2a);
     margin-bottom: 10%;
 }

 .reason-container ul h2 {
     margin-top: 20px;
     margin-left: 15px;
     color: white;
 }

 .reason-container ul p {
     color: #cacedc;
     font-weight: 600;
     margin-top: 18px;
     margin-left: 20px;
 }

 .reason-container ul img {
     margin-left: 80%;
 }

 .question-container {
     background-color: rgb(0, 0, 0);
     height: 60%;
     width: 100%;

 }

 .question-box {
     display: grid;
     grid-template-columns: 1fr;
 }

 .question-container h2 {
     color: white;
     margin-left: 6%;
 }

 .question-box ul {
     height: 15vh;
     width: 85vw;
     margin-left: 8%;
     margin-top: 2%;
     margin-bottom: 3%;
     background-color: #4d4b4b;


     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 2rem;
     border-radius: 5px;
     cursor: pointer;
 }

 .question-box ul p {
     font-size: 25px;
     font-weight: 500;
     color: white;
     margin: 0;
 }

 .question-box ul span {
     font-size: 50px;
     color: white;
     line-height: 1;
 }

 footer {
     background-color: black;
     height: 90vh;
     width: 100%;
 }

 footer button {
     color: rgb(252, 249, 249);
     background-color: rgb(235, 13, 13);
     border-radius: 4px;
     border: 0;
     height: 50px;
     width: 250px;
     padding: 2px;
     margin-left: 8%;
     margin-top: 4%;
     font-size: 35px;
     cursor: pointer;
 }

 .contact {
     color: aliceblue;
     margin-top: 5%;
     font-size: 18px;
     margin-left: 8%;
     margin-bottom: 2%;

 }

 .number {
     margin-top: 9%;

     color: aliceblue;
     text-decoration: underline;
 }

 .footer-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     row-gap: 5px;
     margin-left: 8%;
 }

 .footer-container ul {
     color: aliceblue;
     text-decoration: underline;
 }
 
 .bottom-lang{
    color: rgb(211, 227, 241);
    background-color: black;
    margin-left: 7.8%;
    margin-top: 3%;
    border-radius: 3px;
    font-size: larger;
    padding: 5px;
    margin-bottom: 2%;
 }

footer p{
    color: rgb(187, 201, 212);
    margin-top: 3%;
    font-size: 15px;
    margin-left: 8%;
 }
 @media screen and (max-width: 1024px) {
    .reason-container {
        grid-template-columns: 1fr;
        margin: 2% 5%;
    }

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

    #lang, .sign-out {
        top: 2vh;
        right: 5vw;
    }

    .hero-text {
        font-size: 25px;
        left: 20vw;
        bottom: 45%;
    }

    .sub-content {
        font-size: 18px;
        left: 22vw;
    }

    #sign-up {
        font-size: 18px;
        left: 28vw;
        width: 12rem;
    }
}

@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto;
        padding: 2rem 1rem;
    }

    .logo-img {
        width: 140px;
        height: auto;
        left: 5%;
        top: 1%;
    }

    #lang, .sign-out {
        position: static;
        margin-top: 1rem;
        margin-right: 1rem;
    }

    .hero-text {
        position: static;
        text-align: center;
        font-size: 20px;
        margin: 2rem 0;
    }

    .sub-content {
        position: static;
        text-align: center;
        font-size: 16px;
        margin-bottom: 1rem;
    }

    #sign-up {
        position: static;
        display: block;
        margin: 0 auto 2rem auto;
        font-size: 18px;
        width: 80%;
    }

    .imgs {
        margin-left: 5vw;
        gap: 10px;
    }

    .reason-container {
        grid-template-columns: 1fr;
        margin: 2% 5%;
    }

    .reason-box {
        width: 100%;
        height: auto;
        padding: 1rem;
    }

    .reason-container ul img {
        margin-left: 60%;
        width: 80px;
    }

    .question-box ul {
        padding: 1rem;
        width: 90%;
        margin-left: 5%;
    }

    footer button {
        width: 90%;
        font-size: 24px;
        margin-left: 5%;
    }

    .footer-container {
        grid-template-columns: 1fr;
        margin-left: 5%;
    }

    .bottom-lang {
        margin-left: 5%;
    }

    footer p {
        margin-left: 5%;
    }
}

@media screen and (max-width: 480px) {
    .logo-img {
        width: 120px;
        top: 0;
    }

    .hero-text h1 {
        font-size: 18px;
    }

    .sub-content {
        font-size: 14px;
    }

    #sign-up {
        font-size: 16px;
    }

    .imgs img {
        width: 140px;
        height: auto;
    }

    .reason-container ul img {
        margin-left: 50%;
        width: 60px;
    }

    .question-box ul p {
        font-size: 18px;
    }

    .question-box ul span {
        font-size: 32px;
    }

    footer button {
        font-size: 18px;
        height: 45px;
    }
}