@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: black;
}

.main {
    background-image: url(assets/images/background-image.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: max(1200px, 100vw);
    position: relative;
}

.main .box {
    height: 100vh;
    width: 100%;
    opacity: 0.5;
    position: absolute;
    top: 0;
    background-color: black;
}

nav {
    max-width: 62%;
    display: flex;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    position: relative;
    z-index: 1;
}

.logo img {
    height: 40px;
    width: 148px;
}

.buttons button {

    background-color: red;
    color: white;
    padding: 7px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

.main-text {
    color: white;
    position: relative;
    height: calc(100% - 90px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 181px 8px;
}

@media screen and (max-width:652px) {
    .main-text {
        padding: 90px 8px;
    }
}

.main-text> :first-child,
.text> :first-child,
.fifth h2 {
    font-family: 'Poppins', sans-serif;

    font-size: 48px;
    font-weight: 900;
    color: white;

}


@media screen and (max-width:1410px) {

    .main-text> :first-child,
    .text> :first-child,
    .fifth h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 32px;
        font-weight: 700;
        color: white;
    }

    .main-text> :first-child,
    .text> :first-child,
    .fifth h2 {
        text-align: center;
    }

}

.fifth h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: white;
    text-align: center;
}

.main-text,
.text> :nth-child(2) {
    font-family: 'Martel Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: white;
}

.main-text> :nth-child(3) {
    font-family: 'Martel Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

.signin {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

@media screen and (max-width: 1410px) {

    .signin {
        flex-wrap: wrap;
        justify-content: center;
    }
}

div button {
    background-color: red;
    cursor: pointer;
    color: white;
    border: none;
    padding: 7px 15px;
    border-radius: 3px;
    font-size: 26px;
    font-weight: 500;
}

.signin input {
    outline: 1px solid #b7b7b7;
    padding: 9px 12px 9px 12px;
    border-radius: 3px;
    font-size: 16px;
    width: 344px;
    color: white;
    background-color: #28282880;
    font-weight: 400;
    border: none;
}

@media screen and (max-width:640px) {
    .signin input {
        width: 249px;
    }
}

input::placeholder {
    color: rgb(197, 195, 195);

}

.seperation {
    height: 11px;
    background-color: #262626;
}

.first,
.second,
.third,
.fourth {
    display: flex;
    justify-content: center;
    padding: 72px 0px;
    align-items: center;
    max-width: 65vw;
    margin: auto;
}

@media screen and (max-width: 1410px) {

    .first,
    .second,
    .third,
    .fourth {
        flex-wrap: wrap;
    }

    .first-order {
        order: 1;

    }

    .sec-order {
        order: 2;


    }

    /* .second,.fourth{
        flex-direction: column-reverse;
    } */
    .main-text,
    .text> :nth-child(2) {
        font-size: 18px;
        text-align: center;
        font-weight: 400;

    }
}

.text {
    display: flex;
    flex-direction: column;
    padding: 34px 0px;
}

.first img,
.second img,
.third img,
.fourth img {

    width: 580px;
}

@media screen and (max-width:710px) {

    .first img,
    .second img,
    .third img,
    .fourth img {
        width: 280px;
    }
}

.first .image,
.second .image,
.third .image {
    position: relative;
}




.tv-video {
    position: absolute;
    right: 24px;
    top: 59px;
    z-index: -1;
}

@media screen and (max-width:710px) {
    .tv-video {
        position: absolute;
        right: 40px;
        top: 44px;
        z-index: -1;
        width: 202px;
    }
}

.tv-video2 {
    position: absolute;
    width: 354px;
    right: 116px;
    top: 50px;
    z-index: -1;
}

@media screen and (max-width:710px) {
    div button {

        font-size: 18px;
    }

    nav {
        max-width: 100%;
        display: flex;
        margin: auto;
        justify-content: space-around;
        align-items: center;
        height: 90px;
        gap: 43px
    }

    .tv-video2 {
        position: absolute;
        width: 166px;
        right: 59px;
        top: 25px;
        z-index: -1;
    }

    .main-text,
    .text> :nth-child(2) {
        font-family: 'Martel Sans', sans-serif;
        font-size: 18px;
        font-weight: 400;
        color: white;
    }
}

.fifth {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 0px;
}

.fifth>div {
    font-family: 'Martel Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: white;
    background-color: rgb(45, 45, 45);
    margin: 5px 0px;
    display: flex;
    justify-content: space-between;
    width: 59%;
    padding: 24px;
    transition: all 0.5s ease-out;
}

h2 {
    margin-bottom: 12px;
}

.faq:hover {
    background-color: #414141;
}

form span {
    font-family: 'Martel Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    padding: 0px 44px;
    color: white;
    text-align: center;
}

form {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form .signin {
    margin-top: 15px;
}

footer {
    display: flex;
    font-size: 14px;
    padding: 28px 0px;
    font-weight: 400;
    flex-direction: column;
    justify-content: center;
    width: 62%;
    margin: auto;
    gap: 20px;
}

@media screen and (max-width:760px) {
    footer {
        display: flex;
        font-size: 14px;
        padding: 28px 0px;
        font-weight: 400;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding: 24px;
        gap: 20px;
    }
}

footer a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media screen and (max-width: 1450px) {
    .footer-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.footerElement {
    display: flex;
    flex-direction: column;
}

.footerElement a {
    margin: 6px 0px;
}

footer button {
    display: flex;
    width: 126px;
    height: 32px;
    color: white;
    background-color: #9792922b;
    border-radius: 3px;
    border: 1px solid #ffffff66;
    justify-content: space-evenly;
    align-items: center;
}

footer>span {
    color: rgba(255, 255, 255, 0.7)
}

@media screen and (max-width: 459px) {


    .main {
        background-size: cover;
        overflow: hidden;
    }
}