@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
::-webkit-scrollbar {
    width: 10px
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 50px rgb(34, 25, 25);
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(236, 104, 104, 0.473);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(179, 90, 90, 0.473);
}
.webSurface {
    background-color: rgb(34, 25, 25);
    background-size: cover;
    height: 260vh;
}
.logo {
    width: 90px;
    height: auto;
    position: absolute;
    top: 1%;
    left: 1%;
}
.logo:hover {
    transform: scale(1.09);
    transition: transform .3s;
}
.navbar ul {
    float: right;
    margin-right: 20px;
}
.navbar ul li {
    list-style: none;
    margin: 0 8px;
    display: inline-block;
    line-height: 60px;
    position: relative;
}
.navbar ul li a {
    text-decoration: none;
    color: white;
    font-size: 23px;
    padding: 6px 20px;
    transition: .7s;
    background: rgba(236, 104, 104, 0.473);
    border-radius: 10px;
}
.navbar ul li a:hover {
    background: rgba(236, 104, 104, 0.295);
    transition: .7s;
}
.webSurface .text .dir1 {
    position: absolute;
    top: 24%;
    left: 20%;
    color: rgba(236, 104, 104, 0.473);
    font-size: 18px;
    transform: translate(-30%, -30%);
}
.webSurface .text .dir2 {
    position: absolute;
    top: 1070%;
    left: 22%;
    color: rgba(236, 104, 104, 0.473);
    font-size: 18px;
    transform: translate(-31%, -30%);
}
.webSurface .text .dir3 {
    position: absolute;
    top: 1195%;
    left: 24%;
    color: rgba(236, 104, 104, 0.473);
    font-size: 18px;
    transform: translate(-31%, -30%);
}
.content1 {
    position: absolute;
    top: 130%;
    left: 7%;
    color: white;
    font-size: 18px;
}
.content2 {
    position: absolute;
    top: 1170%;
    left: 9%;
    color: white;
    font-size: 18px;   
}
.content3 {
    position: absolute;
    top: 2340%;
    left: 11%;
    color: white;
    font-size: 18px;   
}
.d1 {
    position: absolute;
    top: 70%;
    left: 75%;
    transform: translate(-70%, -80%);
}
.d2 {
    position: absolute;
    top: 140%;
    left: 75%;
    transform: translate(-70%, -80%);
}
.d3 {
    position: absolute;
    top: 220%;
    left: 75%;
    transform: translate(-70%, -80%);
}
.d1 img:hover {
    transform: scale(1.06);
    transition: .5s;
}
.d2 img:hover {
    transform: scale(1.06);
    transition: .5s;
}
.d3 img:hover {
    transform: scale(1.06);
    transition: .5s;
}
@media (min-width: 1400px) {
    .d1 {
        position: absolute;
        top: 52%;
        left: 75%;
        transform: translate(-70%, -80%);
    }
    .d2 {
        position: absolute;
        top: 97%;
        left: 75%;
        transform: translate(-70%, -80%);
    }
    .d3 {
        position: absolute;
        top: 150%;
        left: 75%;
        transform: translate(-70%, -80%);
    }
}
@media (min-width: 1366px) {
    .d1 {
        position: absolute;
        top: 60%;
        left: 75%;
        transform: translate(-70%, -80%);
    }
    .d2 {
        position: absolute;
        top: 120%;
        left: 75%;
        transform: translate(-70%, -80%);
    }
    .d3 {
        position: absolute;
        top: 187%;
        left: 75%;
        transform: translate(-70%, -80%);
    }
}