*{
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
}

.First-Section{
    width: 100%;
    height: 100vh;
    background-image: url(../images/back-1134x680.jpg);
    background-size: cover;
}

.Overlay{
    width: 100%;
    height: 100vh;
    background-color: rgba(182, 37, 25, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Nav-Bar{
    width: 100%;
    height: 100px;
    background-color: rgba(219, 219, 219, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.Nav-Bar img{
    width: 50px;
}

.Nav-List ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Nav-List a{
    text-decoration: none;
    color: white;
}

.Nav-List p{
    color: white;
    margin: 0;
    font-size: 0.7rem;
}

.fa-facebook-f, .fa-twitter, .fa-instagram{
    color: white;
    font-size: 2rem;
}

.Nav-Bar li{
    padding: 30px 55px;
    transition: all 0.2s ease-in-out;
}

.New-Releases{
    padding: 30px 20px !important;
    transition: all 0.2s ease-in-out;
}

.Nav-List li:hover{
    background-color: rgba(255, 255, 255, 0.1);
}

.Home-Content{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 20px;
}

.Content{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.Content h2{
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 20px 0;
    margin: 0;
}

.Content h1{
    color: white;
    font-size: 3.75rem;
    margin: 0;
    padding: 0;
}

.Home-View{
    height: 52px;
    width: 200px;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.Home-View:hover{
    background-color: rgba(255, 255, 255, 0.1);
}

.Content a{
    text-decoration: none;
    color: black;
}

.fa-arrow-left-long, .fa-arrow-right-long{
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    transition: transform 0.3s ease-in-out;
}

.fa-arrow-left-long:hover{
    transform: translateX(-15px);
}

.fa-arrow-right-long:hover{
    transform: translateX(15px);
}

.Product-Image{
    width: 30%;
}

.Product-Image img{
    width: 100%;
}

.Second-Section{
    background-color: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Client{
    width: 90%;
}

.Header-Content{
    width: 100%;
    padding-bottom: 20px;
}

.Header-Content p{
    font-size: 1.563rem;
}

.Header-Content h2{
    font-size: 2.813rem;
}

.Clients-Content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    font-size: 1.563rem;
    padding: 10px;
}

.Client-img{
    width: 33%;
}

.Client-img img{
    width: 100%;
}

.Third-Section{
    height: 510px;
    width: 100%;
    background-image: url(../images/back-1134x680.jpg);
    background-size: cover;
}

.Third-Overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(182, 37, 25, 0.7);
    display: flex;
    align-items: center;
}

.Third-Text{
    width: 50%;
    height: 100%;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.Third-Text h6{
    font-size: 1.25rem;
}

.Third-Text h2{
    font-size: 2.375rem;
}

.Text-Line{
    display: flex;
    gap: 30px;
    padding: 25px 0;
    font-size: 1.25rem;
}

.Third-Text a{
    text-decoration: none;
    color: white;
    font-size: 1.25rem;
    transition: all 0.3s ease-in-out;
}

.Third-Text a:hover{
    opacity: 0.2;
}

.Third-Text .fa-arrow-right-long{
    vertical-align: middle;
}

.Third-Image{
    width: 50%;
    height: 100%;
}

.Third-Image img{
    width: 100%;
    height: 100%;
}

.Fourth-Section{
    width: 100%;
    height: 270px;
    padding: 50px;
}

.Fourth-Images{
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
}

.Fourth-Image{
    width: 10%;
    opacity: 0.1;
    transition: all 0.3s ease-in-out;
}

.Fourth-Image img{
    width: 100%;
}

.Fourth-Image:hover{
    opacity: 1;
}

.Fifth-Section{
    background-color: #EEEEEE;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Blog{
    width: 90%;
}

.Blog .Header-Content{
    width: 100%;
    padding-bottom: 0px;
}

.Blog .Header-Content h2{
    font-size: 2.5rem;
}

.Blog-Content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    font-size: 1.563rem;
    padding: 10px;
}

.Blog-img{
    width: 30%;
    position: relative;
}

.Blog-img img{
    width: 100%;
}

.Blog-img p{
    font-size: 0.813rem;
    margin: 10px 0;
}

.Blog-img h2{
    font-size: 1.25rem;
    font-weight: 500;
}

.Date-Text{
    position: absolute;
    right: -75px;
    top: 40px;
    transform: rotateZ(90deg);
}

.Date-Text p{
    font-size: 1rem;
}

.Fifth-Read .fa-arrow-right-long{
    color: black;
    vertical-align: middle;
}

.Fifth-Read a{
    text-decoration: none;
    color: black;
    font-size: 1.25rem;
    transition: all 0.3s ease-in-out;
}

.Fifth-Read a:hover{
    opacity: 0.1;
}

.Sixth-Section{
    height: 500px;
    width: 100%;
}

.Sixth-Content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 140px 50px;
}

.Six-Card{
    width: 20%;
    display: flex;
    flex-direction: column;
}

.top{
    align-self: flex-start;
}

.bottom{
    align-self: flex-end;
}

.Six-Card h2{
    font-size: 1.25rem;
    padding: 40px 0 20px;
}

.Six-Card p{
    font-size: 1.25rem;
}

.fa-2xl{
    font-size: 5rem;
}

.Seventh-Section{
    height: 510px;
    width: 100%;
    background-image: url(../images/back-1134x680.jpg);
    background-size: cover;
}

.Seventh-Overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(182, 37, 25, 0.7);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.Seventh-Text{
    width: 50%;
    height: 100%;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.Seventh-Text h6{
    font-size: 1.25rem;
}

.Seventh-Text h2{
    font-size: 2.375rem;
}

.Seventh-Section .Text-Line{
    display: flex;
    gap: 30px;
    padding: 25px 0;
    font-size: 1.25rem;
}

.Seventh-Text a{
    text-decoration: none;
    color: white;
    font-size: 1.25rem;
    transition: all 0.3s ease-in-out;
}

.Seventh-Text a:hover{
    opacity: 0.2;
}

.Seventh-Text .fa-arrow-right-long{
    vertical-align: middle;
}

.Seventh-Image{
    height: 90%;
}

.Seventh-Image img{
    width: 100%;
    height: 100%;
}

.Seventh-Read{
    margin-left: 50px;
}

.Eighth-Section{
    height: 510px;
    width: 100%;
}

.Eighth-Content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 100px;
}

.Eighth-Text{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.Eighth-Text h2{
    font-size: 1.875rem;
}

.Eighth-Text .Percentage{
    margin: 10px 0 0 10px;
}

.Eighth-Text .Bar{
    height: 5px;
    background-color: black;
    border-radius: 5px;
    margin-bottom: 10px;
}

.Bar1{
    width: 95%;
}

.Bar2{
    width: 90%;
}

.Bar3{
    width: 85%;
}

.Eighth-Image{
    height: 90%;
    width: 45%;
}

.Eighth-Image img{
    width: 100%;
    height: 100%;
}

hr{
    margin-bottom: 20px;
}

.Ninth-Section{
    height: 500px;
    width: 100%;
}

.Ninth-Content{
    height: 100%;
    width: 100%;
    background-color: #1D1D1F;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 80px;
}

.Content{
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.Content .Header{
    display: flex;
    align-items: center;
    gap: 20px;
}

.Header img{
    width: 20%;
}

.Texts h2{
    font-size: 3.125rem;
}

.Texts p{
    font-size: 1.125rem;
    color: #B2B2B2;
    margin-bottom: 20px;
}

.Footer{
    background-color: black;
    width: 100%;
    height: 70px;
}

.Footer-Content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Footer-Content p{
    color: white;
    font-size: 1.25em;
}