* {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
    /* font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;

     */
    user-select: none;
    transition: 0.3s;
}

body{
    margin: auto;
}

.short{
    display: none;
}

.hero-img{
    width: 100%;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 90%);
}

.hero-content{
    position: absolute;
    z-index: 100;
    top: 300px;
    padding-left: 20px;
}

h1{
    color: #fff;
    font-size: 5rem;
    margin-bottom: 0;
}

.subtitle{
    z-index: 10;
    color: #fff;
    /* font-weight: bold; */
    margin-left: 10px;
}

.logo{
    position: absolute;
    top: -40px;
    width: 70px;
}

@media screen and (max-width: 1273px) {
    .hero-content{
        top: 200px;
    }
}

@media screen and (max-width: 1027px) {
    .hero-content{
        top: 100px;
    }
}

@media screen and (max-width: 813px) {
    .hero-content{
        top: 100px;
    }

    h1{
        font-size: 3rem;
    }
}

@media screen and (max-width: 617px) {
    .hero-content{
        top: 100px;
    }

    h1{
        font-size: 2rem;
    }
}

@media screen and (max-width: 500px) {
    .short{
        display: block;
        height: 400px;
    }

    .long{
        display: none;
    }
}


/* services */


.services{
    padding: 100px 30px;
}

.services-title{
    font-size: 3rem;
    text-align: center;
}

.services-subtitle{
    font-size: 1.2rem;
}

.service-content{
    display: flex;
    justify-content: center;
    align-items: center;
}

.service{
    margin-top: 100px;
    width: 400px;
    height: 300px;
    background-color: #000;
    cursor: pointer;
}

.service-img{
    width: 100%;
    height: 230px;
}

.service-sub{
    background-color: #000;
    color: #fff;
    margin: 0;
    font-weight: bold;
    padding: 10px;
    font-size: 1.3rem;

}

.service:hover .service-img{
    opacity: 0;
}

.service:hover .service-sub{
    animation: up 0.5s 1 forwards;
}



.ex-con{
    display: none;
    /* animation: fade-out 0.7s 1 forwards; */
}

.service:hover .ex-con{
    display: block;
    animation: fade-in 0.7s 1 forwards;
    position: relative;
    top: -160px;
    color: #fff;
}

@keyframes fade-in {
    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}

@keyframes fade-out {
    from{
        opacity: 1;
    }

    to{
        opacity: 0;
    }
}

@keyframes up {
    from {
        background: none;
        position: relative;
        top: -150px;
    }

    to{
        background-color: none;
        position: relative;
        top: -330px;
        font-size: 1.5rem;
    }
}

@keyframes down {
    from {
        background-color: none;
        position: relative;
        top: -330px;
        font-size: 1.5rem;
    }
    
    to{
        background: none;
        position: relative;
        top: -150px;
    }
}

.btn{
    padding: 10px;
    /* border-radius: 2px; */
    text-decoration: none;
}

.btn-light{
    border: 2px solid #fff;
    background: none;
    color: #fff;
}

.service-btn{
    margin-left: 20px;
    margin-top: 100px;
    position: relative;
    top: 20px;
}

.service-container{
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.services-content{
    margin: auto;
}


@media screen and (max-width: 835px){
    .service-container{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }

    .service{
        margin-top: 20px;
    }
}

/* about */

.about{
    background-color: #000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
    padding: 100px 60px;
    margin: 100px 0;
}

.about-img{
    width: 100%;
    margin: auto;
}

.about-title{
    color: #fff;
    font-size: 3rem ;
}

.about-content{
    color: #fff;
    font-size: 1.2rem;
}

.about-con{
    padding: 30px;
    margin: auto;
}

@media screen and (max-width: 1000px) {
    .about{
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 560px) {
    .about{
        padding: 20px;
    }
}

/* contact */

.contact{
    padding: 50px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.contact-section{
    width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
}

.contact-img{
    width: 50px;
    margin: auto 10px auto auto;
}

.contact-con{
    display: flex;
    flex-direction: column;
}

.contact-title{
    font-size: 1.5rem;
    margin: 0;
}

.contact-sub{
    color: #eca747  ;
}

@media screen and (max-width: 920px) {
    .contact{
        grid-template-columns: 1fr;
    }

    .contact-section{
        margin-top: 40px;
    }
}

.watermark{
    position: absolute;
    top: 0;
    background-color: #9B9B9B;
    width: 100%;
    height: 10000px;
}