html {
    scroll-behavior: smooth;
}
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    margin: auto;
    padding: 0px;
    text-align: center;
}
header {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
    z-index: 112;
    background-color: #000000;
    height: 90px;
}
header .one {
    margin-right: 9px;
}
header .two {
    font-size: 26px;
    margin-left: 4px;
    font-weight: bold;
}
header h2, a {
    color: white;
    text-decoration: none;
    margin-left: 0px;
}
header .zero_link {
    margin-right: 30px;
}
header .first_link {
    margin-right: 30px;
}
header .sec_link {
    margin-right: 30px;
}
.landing {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://uploads.audi-mediacenter.com/system/production/media/119075/images/f4076741890dadd6938f83a773476bf2ea4dede8/A234333_web_2880.jpg?1698538264");
    background-color: #333;
    height: calc(100vh - 90px);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 50px;
}
.buttom {
    background-color: #333;
    border-radius: 26px;
    position: sticky;
    padding: 6px;
    width:40px;
    margin-left: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-bottom: 0px;
}

.first {
    padding: 60px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.first .text_1 {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 30px;
    margin-left: 26px;
    margin-right: 0px;
    font-size: 18px;
}

.first .image_1 {
    margin-right: 18px;
    width: 40%;
    height: 280px;
    display: flex;
    margin-left: 4px;
    margin-top: 80px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    border-radius: 15px;

}
.first .text_1 div:nth-child(2) {
    font-size: 25px;
    font-weight: bold;
}   
.first .text_1 div:nth-child(3) {
    color: rgb(119, 0, 0);
}
.first .first_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.first .first_1 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 8px;
    margin-right: 28px;
    font-size: 19px;
}

.first .first_1 .text .one{
    font-size: 25px;
    font-weight: bold;
}
.first .first_1 .text .two{
    color: rgb(22, 131, 0);
}








.second {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.second .text {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 18px;
    margin-left: 0px;
    margin-right: 10px;
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 25px;
}
.second .text .one {
    font-size: 30px;
    font-weight: bold;
}
.second .text .two {
    color: rgb(4, 29, 168);
}
.second .image_1 {
    width: 40%;
    height: 270px;
    display:flex;
    margin-right: 10px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    border-radius: 15px;

}
.second .image_2 {
    width: 50%;
    height: 270px;
    display:flex;
    margin-right: 0px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    border-radius: 15px;

}



.third {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.third .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    margin-left: 35px;
    margin-right: 20px;
    font-size: 19px;
    margin-top: 30px;
}
.third .text .one {
    font-size: 40px;
    font-weight: bold;
}
.third .text .two {
    color: rgb(255, 0, 234);
    gap: 20px;
}
.third .image {
    width: 34.8%;
    height: 330px;
    border-radius: 15px;
    display:flex;
    margin-top: 40px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    margin-bottom: 10px;
}   








.page_1 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.486), rgba(19, 17, 17, 0.719)), url("https://www.racefans.net/wp-content/uploads/2023/12/racefansdotnet-21-12-02-00-02-21-1.jpg");
    background-color: #fcecec;
    height: calc(100vh - 90px);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 60px;
}
.container {
    background-color: #fff;
    /* padding: 70px; */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    margin: auto;
}
.team_1 {  
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.team_1 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    margin-left: 0px;
    margin-left: 30px;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
   
}
.team_1 .text .one {
    font-size: 35px;
    font-weight: bold;
}
.team_1 .text .two {
    color: rgb(201, 50, 143);
}
.team_1 .image {
    width: 50%;
    height: 390px;
    border-radius: 15px;
    display:flex;
    margin-bottom: 35px;
    margin-top: 45px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    margin-bottom: 20px;
    margin-top: 25px;
    margin-right: 10px;
}
.ingred_1 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.ingred_1 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
    margin-left: 20px;
    margin-right: 50px;
    font-size: 20px;
    margin-top: 60px;
    margin-bottom: 50px;
}
.ingred_1 .text .one {
    font-size: 35px;
    font-weight: bold;
}
.ingred_1 .text .two {
    color: rgb(226, 0, 0);
}
.ingred_1 .image {
    width: 60%;
    height: 380px;
    border-radius: 15px;
    display:flex;
    margin-right: 10px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
}
.step_1 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.step_1 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
    margin-left: 40px;
    margin-bottom: 40px;
    font-size: 18px;
    margin-top: 50px;

}
.step_1 .text .one {
    font-size: 25px;
    font-weight: bold;
}
.step_1 .text .two {
    color: rgb(0, 173, 150);
}
.step_1 .image {
    width: 70%;
    height: 380px;
    border-radius: 15px;
    display:flex;
    margin-right: 0px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
}





.page_2 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://e0.365dm.com/23/05/2048x1152/skysports-f1-h2h-red-bull-mercedes_6152973.jpg?20230512123305");
    background-color: #333;
    height: calc(100vh - 90px);
    width: 100%;
    background-position: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 50px;
}
.driver_2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.driver_2 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    margin-left: 70px;
    margin-right: 50px;
    font-size: 20px;
    padding-top: 35px;
    padding-bottom: 40px;
}
.driver_2 .text .one {
    font-size: 40px;
    font-weight: bold;
}
.driver_2 .text .two {
    color: rgb(0, 109, 49);
}
.driver_2 .image {
    margin-left: 30px;
    width: 65%;
    height: 320px;
    border-radius: 15px;
    display: flex;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;

}
.ingred_2 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ingred_2 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 6px;
    margin-left: 50px;
    margin-right: 80px;
    font-size: 20px;
    padding-top: 40px;
    padding-bottom: 45px;
}
.ingred_2 .text .one {
    font-size: 40px;
    font-weight: bold;
}
.ingred_2 .text .two {
    color: rgb(15, 0, 155);
}
.ingred_2 .image {
    margin-right: 30px;
    width: 65%;
    height: 350px;
    border-radius: 15px;
    display: flex;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;

}
.step_2 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.step_2 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    margin-left: 70px;
    margin-right: 40px;
    font-size: 18px;
    padding-top: 50px;
    padding-bottom: 40px;
}
.step_2 .text .one {
    font-size: 28px;
    font-weight: bold;
}
.step_2 .text .two {
    color: rgb(119, 0, 0);
}
.step_2 .image {
    margin-left: 20px;
    width: 60%;
    height: 367px;
    border-radius: 10px;
    display: flex;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    border-radius: 15px;
 
}






.page_3 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.651), rgba(0, 0, 0, 0.3)), url("pj-f123-bel-w01-rus-unmarked.jpg.adapt.crop191x100.628p.jpg");
    background-color: #333;
    height: calc(100vh - 90px);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 60px;
}
.car_3 {
    display: flex;
    justify-content: space-between;
    align-items: center
}
.car_3 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    margin-left: 70px;
    margin-right: 20px;
    font-size: 19px;
    padding-top: 50px;
    padding-bottom: 40px;
}
.car_3  .text .one {
    font-size: 35px;
    font-weight: bold;
}
.car_3 .text .two {
    color: rgb(69, 1, 158);
}
.car_3 .image {
    width: 60%;
    height: 375px;
    border-radius: 15px;
    display:flex;
    margin-right: 0px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;

}
.ingred_3 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.ingred_3 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    margin-left: 40px;
    margin-right: 20px;
    font-size: 19px;
    padding-top: 50px;
    padding-bottom: 40px;
}
.ingred_3 .text .one {
    font-size: 35px;
    font-weight: bold;
}
.ingred_3 .text .two {
    color: rgb(161, 179, 0);
}
.ingred_3 .image {
    width: 70%;
    height: 350px;
    display:flex;
    margin-left: 10px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    border-radius: 15px;
}
.step_3 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.step_3  .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 18px;
    margin-left: 40px;
    margin-right: 20px;
    font-size: 19px;
    padding-top: 50px;
    padding-bottom: 40px;
}
.step_3 .text .one {
    font-size: 35px;
    font-weight: bold;
}
.step_3 .text .two {
    color: rgb(1, 141, 36);
}
.step_3 .image {
    width: 70%;
    height: 360px;
    display:flex;
    margin-right: 5px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    border-radius: 15px;
}




.page_4 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.486), rgba(19, 17, 17, 0.719)), url("2524215.jpg");
    background-color: #fcecec;
    height: calc(100vh - 90px);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 60px;
}
.container {
    background-color: #fff;
    /* padding: 70px; */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    margin: auto;
}
.race_1 {  
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.race_1 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    margin-left: 0px;
    margin-left: 30px;
    font-size: 20px;
    padding-bottom: 50px;
    padding-top: 40px;
   
}
.race_1 .text .one {
    font-size: 35px;
    font-weight: bold;
}
.race_1 .text .two {
    color: rgb(201, 50, 143);
}
.race_1 .image {
    width: 50%;
    height: 380px;
    border-radius: 15px;
    display:flex;
    margin-bottom: 35px;
    margin-right: 10px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
    margin-bottom: 20px;
    margin-top: 25px;
}
.ingred_1 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.ingred_1 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
    margin-left: 20px;
    margin-right: 50px;
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 40px;
}
.ingred_1 .text .one {
    font-size: 35px;
    font-weight: bold;
}
.ingred_1 .text .two {
    color: rgb(226, 0, 0);
}
.ingred_1 .image {
    width: 60%;
    height: 360px;
    border-radius: 15px;
    display:flex;
    margin-left: 8px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
}
.steps_1 {
    border-top: 8px solid rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center
}
.steps_1 .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
    margin-left: 40px;
    padding-bottom: 40px;
    font-size: 18px;
    padding-top: 50px;
    padding-bottom: 50px;

}
.steps_1 .text .one {
    font-size: 25px;
    font-weight: bold;
}
.steps_1 .text .two {
    color: rgb(0, 173, 150);
}
.steps_1 .image {
    width: 60%;
    height: 350px;
    border-radius: 15px;
    display:flex;
    margin-right: 10px;
    border-top: #333;
    border-bottom: #333;
    border-left: #333;
    border-right: #333;
    border-style: double;
    border-width: 10px;
}












.type {  
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://media.formula1.com/image/upload/content/dam/fom-website/manual/Misc/2021manual/2021BritishManualAdds/2022CarImages/2022CarImageSTUDIO/2022%20F1%20Car%20Race%20Service%20-%20Ryan%20Davis-5.jpg");
    background-color: #333;
    height: calc(45vh - 4px);
    width: 100%;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    background-clip: border-box;
    display: flex;
    color: #f8f8f8; 
}
.info {
    font-weight: bold;
    text-align: left;
    gap: 20px;
    margin-left: 65px;
    font-size: 20px;
    justify-content: space-between;
    margin-top: 60px;
    display: block;
}
.follow {
    font-weight: bold;
    text-align: left;
    gap: 200px;
    margin-left: 250px;
    font-size: 20px;
    justify-content: space-between;
    margin-top: 60px;
}
.box_three {
    .tit_f { 
           justify-content: left;
        color: white;
        font-family: Arial, Helvetica, sans-serif; 
        font-weight: bold;
        margin-top: 60px;
        margin-left: 280px;
        font-size: 20px;
            }
    div:nth-child(2) {
        color: rgb(255, 255, 255);
        margin: 10px 0;
        margin-left: 300px;
        font-weight: 700;
        gap: 30px;
                     }
    div:nth-child(3){
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        input:nth-child(1) {
            background-color: transparent;
            color: rgb(255, 255, 255);
            border: 5px solid rgb(0, 0, 0);
            padding: 18px;
            border-radius: 10px;
            &::placeholder {
                color: rgb(255, 255, 255);
            }
        }
    }
        input:nth-child(2) {
            position: absolute;
            margin-right: 18px;
            background-color: rgb(0, 0, 0);
            border: unset;
            cursor: pointer;
            color: rgb(255, 255, 255);
            padding: 5px;
            border-radius: 50px;
            margin-left: 80px;
            font-weight: bold;
            font-size: 16px;
        }
    }
footer .rights {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://media.formula1.com/image/upload/content/dam/fom-website/manual/Misc/2021manual/2021BritishManualAdds/2022CarImages/2022CarImageSTUDIO/2022%20F1%20Car%20Race%20Service%20-%20Ryan%20Davis-5.jpg");
    background-color: #333;
    height: calc(9vh - 1px);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    background-position: bottom;
    display: flex;
    color: #f8f8f8; 
    border-top: 2px solid rgb(255, 255, 255);
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}