* {
    margin: 0;
    padding: 0;
    font-family: "Poppins";
    font-weight: 900;
    color: white;
}

html {
    background-color: black;
}

:root {
    --maxxheight: calc(min(100vw, 1920px) * 9 / 16);
}

.bg {
    margin: auto;
    height: min(110svh, 1.1 * var(--maxxheight));
    max-width: 1920px;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)) padding-box, url(assets/bg.jpg) border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.navbar {
    padding-top: min(4vh, calc(0.04 * var(--maxxheight)));
    filter: none;
    list-style: none;
    color: white;
    width: min(100vw, calc(min(73vw, 0.73 * 1920px) + 4rem));
    max-width: 1228px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.navbar>:first-child {
    margin-right: auto;
}

.navbar img, select, button {
    display: block;
}

.navbar img {
    width: min(min(25vh, 0.25 * var(--maxxheight)), 148px);
}

.navbar .items {
    border: none;
    padding: 0 6px;
}

select {
    background-color: rgba(24, 24, 24, 0.847);
    font-family: "Roboto";
    display: flex;
    align-items: center;
    color: white;
    outline: none;
    border: 0.1px solid #ffffff62;
    border-radius: 3px;
    font-size: min(15px, min(2.8vh, 0.028 * var(--maxxheight)));
    font-weight: 500;
    padding: 0px min(18px, min(3vh, 0.03 * var(--maxxheight)));
    aspect-ratio: 124/32;
    height: min(32px, min(5vh, 0.05 * var(--maxxheight)));
    min-width: 0;
}

.navbar select:focus {
    outline: 2px solid white;
    outline-offset: 2px;
    color: white;
}

option {
    color: black;
    background-color: white;
    font-family: "Roboto";
    font-weight: 500;
}

.navbar button {
    display: flex;
    align-items: center;
    font-family: "Roboto";
    justify-content: center;
    border: none;
    border-radius: 5px;
    background-color: rgb(239, 8, 8);
    color: white;
    font-weight: 600;
    transition: background-color 0.2s linear;
    font-size: min(15px, min(2.8vh, 0.028 * var(--maxxheight)));
    height: min(32px, min(5vh, 0.05 * var(--maxxheight)));
    aspect-ratio: 76/32;
}

.navbar button:hover {
    cursor: pointer;
    background-color: rgb(196, 11, 11);
}

nav {
    background: linear-gradient(black, rgba(0, 0, 0, 0));
    width: 100%;
}

.maintext {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    padding-bottom: min(10vh, 0.1 * var(--maxxheight));
    justify-content: center;
    gap: min(13px, min(2vh, 0.02 * var(--maxxheight)));
}

.text1,
.text2,
.text3 {
    color: white;
    text-align: center;
}

.text1 {
    font-size: min(calc(40px + 0.7vw), min(9vh, 0.09 * var(--maxxheight)));
    max-width: 70%;
    line-height: min(65px, min(11vh, 0.11 * var(--maxxheight)));
    font-weight: bolder;
}

.text2 {
    font-size: min(calc(20px + 0.3vw), min(3vh, 0.03 * var(--maxxheight)));
    font-family: "Roboto";
    font-weight: 600;
    margin-bottom: min(20px, min(2vh, 0.02 * var(--maxxheight)));
}

.text3 {
    font-size: min(calc(15px + 0.2vw), min(2.7vh, 0.027 * var(--maxxheight)));
    font-weight: 400;
}

.userinfo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
}

input {
    min-width: 0;
    height: min(56px, min(9vh, 0.09 * var(--maxxheight)));
    padding: min(24px, min(3vh, 0.03 * var(--maxxheight))) min(16px, min(2vh, 0.02 * var(--maxxheight)));
    font-size: min(calc(100%), min(3vh, 0.03 * var(--maxxheight)));
    outline: none;
    box-sizing: border-box;
    color: gray;
    background-color: rgba(20, 20, 20, 0.789);
    border: none;
    border-radius: 5px;
    border: 0.1px solid #ebebeb62;
    /* aspect-ratio: 642 / 65; */
    width: 30vw;
    max-width: 576px;
}

input::placeholder {
    font-size: min(calc(100%), min(3vh, 0.03 * var(--maxxheight)));
    font-weight: 400;
}

input:focus {
    outline: 2px solid white;
    outline-offset: 2px;
    color: white;
    font-weight: 400;
}

.getstart {
    font-family: "Roboto";
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background-color: rgb(239, 8, 8);
    color: white;
    min-width: 0;
    font-weight: 700;
    transition: background-color 0.2s linear;
    font-size: min(26px, min(4vh, 0.04 * var(--maxxheight)));
    aspect-ratio: 211/56;
    height: min(56px, min(9vh, 0.09 * var(--maxxheight)));
    aspect-ratio: 211/56;
}

.getstart:hover {
    cursor: pointer;
    background-color: rgb(196, 11, 11);
}

.arc {
    position: absolute;
    width: 100%;
    height: min(5vw, 0.05 * 1920px);
    bottom: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 0%, #081b66, #010619, black);
    border-radius: 100%;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
    border-top: 4px solid rgb(165, 0, 0);
}

section {
    width: min(100vw, calc(min(73vw, 0.73 * 1920px) + 4rem));
    max-width: 1228px;
    margin: auto;
}

.trend {
    font-size: min(27px, min(5vh, 0.05 * var(--maxxheight)));
    font-weight: 600;
}

.imagess {
    margin-top: min(30px, min(5vh, 0.05 * var(--maxxheight)));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ima1 {
    background: url(assets/AAAABe3NxIeT-EiMKJriLsq8x8p__gp0aw4_RllFLL-j1x3SJ12_XCDqpO5f1lI-f9T2KvZ67PmXoLhrx691oMEpwq5_hu6u5Xu44P17UMZa.webp);
}

.ima2 {
    background: url(assets/AAAABRkXM8hFLe8CWQIE_G1c9voWyN359tVygK3KQSozXU2E7OODrX_x-6senbaphRMFjlSBuZVWPI_4bMBTqJQocNrxu6Mxzy-bo3ULy523.webp);
}

.ima3 {
    background: url(assets/AAAABXIpU6Lz9l0tvx3mTTW9sCAXNOOXjsxa8wjUw4_MYBkGihaBn3MPrw0JFMgJQxbIAQkoJWNszVs4bplO-V4nPKzunpoGtgWqulc-d0Ax37a46qv2bLPZrFo7ZmivdaWt5yd3h2nEdQ.webp);
}

.ima4 {
    background: url(assets/AAAABYEpB1yOguPpivhuxzxnMAKlf-veaR79eQd7x_3HoiHPpF8drzQNtn2YoNzOuCtwsWeuUMk6AVsfCMRRl-tSrEPUeHMn_8uCrph5CcPmVbc5McXsxq7cZQHNPEC4XJF1QsFrf1alTA.webp);
}

.ima5 {
    background: url(assets/AAAABZBz0clOwylytxr_IGH7ahR6Z4njfU3qU5F2p1M2NoeJss21QGAepbRQZb0IPzmj54m9Z8DRXunTBl9gVu8gY-vpZJTkdJySJGApQknK.webp);
}

.imagess .img1 {
    aspect-ratio: 197/276;
    width: 20%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    position: relative;
    transition: transform 0.2s linear;
    transform-origin: center center;
}

.img1 div {
    transition: transform 0.2s linear;
    position: absolute;
    font-family: "Roboto";
    top: 45%;
    right: 80%;
    color: black;
    font-weight: bolder;
    font-size: min(110px, min(18vh, 0.18 * var(--maxxheight)));
    text-shadow:
        -1px -1px 0 rgb(255, 255, 255),
        1px -1px 0 rgb(255, 255, 255),
        -1px 1px 0 rgb(255, 255, 255),
        1px 1px 0 rgb(255, 255, 255);
}

.img1:hover {
    cursor: pointer;
    transform: scale(105%, 105%);
}

.reason {
    margin-top: min(50px, min(8.4vh, 0.084 * var(--maxxheight)));
}

.cards {
    margin-top: min(20px, min(8vh, 0.08 * var(--maxxheight)));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card {
    background: linear-gradient(to bottom right, #192146, #210e17);
    display: flex;
    flex-direction: column;
    width: 21%;
    border-radius: 20px;
    padding: 2% 1.5%;
    gap: min(17px, min(3vh, 0.03 * var(--maxxheight)));
    height: min(285px, min(48vh, 0.48 * var(--maxxheight)));
}

.ct1 {
    font-size: min(20px, min(3.5vh, 0.035 * var(--maxxheight)));
    font-weight: 700;
    line-height: min(29px, min(4.6vh, 0.046 * var(--maxxheight)));
}

.ct2 {
    font-weight: 500;
    font-size: min(15px, min(2.8vh, 0.028 * var(--maxxheight)));
    color: rgb(174, 174, 174);
    line-height: min(19px, min(3.2vh, 0.032 * var(--maxxheight)));
}

.card img {
    align-self: flex-end;
    margin-top: auto;
    height: min(75px, min(12vh, 0.12 * var(--maxxheight)));
}

.faq {
    margin-top: min(20px, min(8vh, 0.08 * var(--maxxheight)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(10px, min(1.6vh, 0.016 * var(--maxxheight)));
}

.que {
    box-sizing: border-box;
    display: flex;
    font-family: "Roboto";
    width: 100%;
    background-color: rgb(35, 35, 35);
    height: min(82px, min(13.8vh, 0.138 * var(--maxxheight)));
    align-items: center;
    padding: 0 2.5%;
    font-weight: 400;
    font-size: min(23px, min(3.8vh, 0.038 * var(--maxxheight)));
    transition: background-color 0.2s linear;
    transition-delay: 0.1s;
}

.que img {
    margin-left: auto;
    height: 50%;

}

.que:hover {
    transition-delay: 0s;
    background-color: rgb(71, 71, 71);
}

.join {
    margin: min(75px, min(12vh, 0.12 * var(--maxxheight))) 0;
    display: flex;
    flex-direction: column;
    gap: min(13px, min(2vh, 0.02 * var(--maxxheight)));
}

.join input {
    width: 53%;
}

.phone {
    font-weight: 500;
    color: rgb(170, 170, 170);
    font-size: min(calc(16px), min(2.7vh, 0.027 * var(--maxxheight)));
}

.phone a {
    font-weight: 500;
    color: rgb(170, 170, 170);
}

.griditems {
    font-weight: 500;
    color: rgb(170, 170, 170);
    font-size: min(14px, min(2.3vh, 0.023 * var(--maxxheight)));
}

.gridd {
    margin: min(50px, min(8.4vh, 0.084 * var(--maxxheight))) 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(307px,100%), 1fr));
    row-gap: min(10px, min(1.6vh, 0.016 * var(--maxxheight)));
}

.end {
    margin: min(40px, min(6.7vh, 0.067 * var(--maxxheight))) 0;
}

.end2 {
    font-size: min(13px, min(2vh, 0.02 * var(--maxxheight)));
    color: rgb(98, 98, 98);
    margin-bottom: min(100px, min(16.8vh, 0.168 * var(--maxxheight)));
}

@media (max-width: 800px) and (min-height: 600px) {
    .bg {
        height: 80svh;
    }

    .navbar {
        margin-top: 18px;
    }

    .navbar img {
        width: min(89px, 25vw);
    }

    select {
        height: min(30px, 8.3vw);
        font-size: min(14px, 3.8vw);
    }

    .navbar {
        gap: min(10px, 3vw);
        width: 85vw;
    }

    .navbar .items {
        padding: 0px;
    }

    .navbar button {
        height: min(30px, 8.3vw);
        font-size: min(14px, 3.8vw);
    }

    .maintext {
        gap: 10px;
    }

    .text1 {
        font-size: min(29px,8vw);
        max-width: 80%;
        font-weight: 700;
        line-height: min(40px,9.2vw);
    }

    .text2 {
        font-size: min(16px,4.5vw);
        font-weight: 400;
    }

    .text3 {
        margin-top: 5px;
        font-size: min(4vw,14px);
        max-width: 80%;
    }

    .userinfo {
        flex-direction: column;
        gap: 17px;
    }

    input {
        margin-top: 10px;
        width: 80vw;
        /* min-width: 0; */
        height: auto;
        max-height: 45px;
        aspect-ratio: 291/45;
        font-size: min(16px, 4vw);
        /* font-size: 100%; */
        padding-left: min(5vw, 11px);
        padding-top: 0;
        padding-bottom: 0;
    }
    input::placeholder {
        font-size: min(14px,4vw);
        /* font-size: 100%; */
    }
    .getstart{
        width: min(156px,43vw);
        aspect-ratio: 156/45;
        height: auto;
        font-size: min(18px,5vw);
    }
    section{
        width: 85vw;
    }
    .trend{
        margin-top: 30px;
        font-size: min(5vw,18px);
    }
    .reason{
        margin-top: 50px;
    }
    .imagess{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: min(8vw,29px);
        align-items: center;
        justify-items: center;
    }
    .imagess .img1{
        width: 80%;
    }
    .imagess div{
        font-size: min(15vw);
    }
    .cards{
        flex-direction: column;
        gap: 10px;
    }
    .card{
        width: 100%;
        height: min(230px, 81vw);
        padding: min(18px,5vw);
        box-sizing: border-box;
    }
    .ct1{
        font-size: min(18px,6.4vw);
        /* font-size: 18px; */
        line-height: normal;
    }
    .ct2{
        font-size: min(14px,5vw);
        /* font-size: 14px; */
        line-height: normal;
    }
    .card img{
        width: min(72px,26vw); 
        height: min(72px,26vw);
        /* width: 72px;
        height: 72px; */
    }
    .faq{
        gap:7px;
    }
    .que{
        height: min(70px,20vw);
        padding: 0 7%;
        font-size: min(18px,5vw);
    }
    .que img{
        width: 10%;
    }
    .join{
        margin-top: 50px;
        align-items: flex-start;
    }
    .join .text3{

        max-width: 100%;
        text-align: left;
    }
    .join input{
        width: 85vw;
        height: auto;
        flex-grow:1;
        min-width: 0;
        max-height: 45px;
    }
    .info2{
        align-items: flex-start;
    }
    .phone {
        font-size: min(17px,4.5vw);
        margin: 30px 0;
        margin-top: 100px;
    }
    .gridd {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .enditem{
        margin-top: 50px;
    }
    .griditems{
        font-size: min(13px,3.8vw);
    }
    .end{
        margin: 30px 0;

    }
    .end2{
        margin-bottom: 60px;
        }
}