@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');
:root{
    --dark-1: #131313;
    --dark-2: #424242;
    --dark-3: #727272;
    --primary-color: #FF900E;
}

body{
    font-family: 'Work Sans', sans-serif;
    margin: 0;
}

header{
    background-color: rgba(255, 144, 14, 0.1);
    margin-bottom: 1px solid black;
    box-shadow: 0 4px 2px -2px gray;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;
    margin-right: 30px;
}
nav h1{
    font-size: 45px;
    color: var(--dark-1);
}

nav ul{
    display: flex;
    gap: 10px;
}
nav ul li{
    list-style-type: none;
}

nav ul li a{
    font-size: 18px;
    text-decoration: none;
    color: var(--dark-2);
}

.header-container{
    text-align: center;
}

.header-container-texts h1{
    font-size: 64px;
    color: var(--dark-1);
}

.header-container-texts p{
    color: var(--dark-3);
}

.header-container button, .quick-list-text button, .news-letter-submit{
    background-color: var(--primary-color);
    color: #ffff;
    border: none;
    border-radius: 8px;
    padding: 20px 25px;
    font-size: 20px;
    margin-top: 32px;
    margin-bottom: 50px;
    cursor: pointer;
}

.header-container img{
    margin: 30px;
}

/* main section */
.quick-list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 73px;
    margin-top: 85px;
}

.quick-list-img{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.quick-list-img img{
    border-radius: 8px;
}

.quick-list-text{
    max-width: 537px;
}

.quick-list-text h2{
    font-size: 45px;
}

.text1{
    color: var(--dark-3);
    font-weight: 500;
}

.text2{
    color: var(--dark-1);
    font-weight: 700;
}

.text3{
    color: var(--primary-color);
    font-weight: 700;
}

.quick-list-text p{
    font-size: 16px;
    color: var(--dark-3);
}

/* features section */
.features{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 130px;
    margin-left: 30px;
    margin-right: 30px;
}

.feature-text{
    max-width: 586px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.feature-text > h2{
    font-weight: 700;
    font-size: 45px;
    border-left: 5px solid var(--primary-color);
    padding-left: 20px;
}

.feature-text p{
    font-size: 16px;
    color: var(--dark-3);
    margin-bottom: 30px;
}

.feature-items{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.feature-item{
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
}

.feature-img{
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: 60px;
}

.feature-pic{
    position: absolute;
    top: 0;
    right: 0;
}


.feature-img-text{
    position: absolute;
    bottom: -70px;
    left: -70px;
    background-color: var(--primary-color);
    color: #ffff;
    border-radius: 8px;
    padding: 45px;
    text-align: center;
}

.large-text{
    font-weight: 700;
    font-size: 65px;
}

.small-text{
    font-size: 25px;
}
/* .feature-img img{
    position: absolute;
    top: 0;
    right: 0;
} */

/* facts */
.facts{
    margin-bottom: 180px;
    margin-left: 30px;
    margin-right: 30px;
}

.facts h2, .news-letter h2{
    font-weight: 700;
    font-size: 45px;

}

.facts > p{
    font-weight: 400;
    font-size: 16px;
    color: var(--dark-3);
    width: 542px;
}

.some-facts{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 125px;
    margin-top: 100px;
}
.fact{
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 50px 35px;
    text-align: center;
    transition: transform 2s;
    width: 190px;
}

.fact:hover{
    transform: rotate(90deg);
}

.fact img{
    width: 45px;
}

.fact h4{
    font-size: 45px;
    margin: 0;
}

.fact p{
    font-size: 20px;
    color: var(--dark-3);
    margin: 0;
}

/* news-letter */
.news-letter{
    margin-left: 30px;
    margin-right: 30px;
    background-color: rgba(255, 144, 14, 0.1);
    padding: 20px;
    border-radius: 8px;
}

.news-letter-form{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.news-letter-email{
   height: 45px;
   border: 1px solid var(--primary-color);
   border-radius: 8px;
   width: 300px;
   font-size: 18px;
   padding: 10px;
}

.news-letter-email:focus{
    border: 3px solid var(--primary-color);
    outline: none;
}

/* sponsor */
.sponsor{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sponsor-text{
    width: 542px;
}
.sponsor h2{
    font-size: 45px;
    color: var(--dark-1);
}

.sponsor p{
    color: var(--dark-3);
    font-size: 16px;
}

.sponsor-img{
    display: flex;
    gap: 150px;
    margin-top: 50px;
}
/* footer */
footer{
    text-align: center;
    border-radius: 8px;
    margin-bottom: 30px;
    margin-top: 130px;
}

footer p{
    color: var(--dark-2);
    background-color: rgba(255, 144, 14, 0.1);
    padding: 40px;
    margin-left: 30px;
    margin-right: 30px;
}

/* responsive */

@media only screen and (max-width: 600px) {
    nav{
        flex-direction: column;
    }

    nav ul{
        flex-direction: column;
    }

    .header-container-texts p{
        margin-left: 30px;
        margin-right: 30px;
    }
    
    .header-container img{
        width: 70%;
    }

    .quick-list{
        flex-direction: column;
    }

    .quick-list-img{
        grid-template-columns: repeat(1, 1fr);
    }

    .quick-list-text{
        margin-right: 30px;
        margin-left: 30px;
    }

    .features{
        flex-direction: column;
        text-align: center;
        margin-left: 0;
    }

    .feature-text{
        margin-left: 30px;
    }

    .feture-pic img{
        width: 70%;
    }

    .feature-pic{
        position: static;
        text-align: center;
    }

    .feature-img{
        position: relative;
    }

    .feature-img-text{
        position: absolute;
        bottom: -25px;
        left: 130px;
    }

    .large-text{
        font-size: 30px;
    }

    .facts > p, .facts > h2{
        text-align: justify;
        width: auto;
    }

    .some-facts{
        flex-direction: column;
    }

    .sponsor-text p, .sponsor-text h2{
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }

    .sponsor-img{
        flex-direction: column;
    }
}