/* this css will apply when screen goes to 1200px or less than 1200px */
@media (max-width:1200px) {
    .hover-button-arrow,
    .hover-button-arrow-line,
    .button-2-arrow-line{
        /* display: none; */
        width: 60px;
    }
    /* .button-2-arrow-line{
        display: none;
    } */
    /* follow section */
    #right-follow{
        display: none;
    }
    #left-follow {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    #follow-follow{
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    /* services section */
    .card {
        width: 44%;
    }
}

/* this css will apply when screen goes to 1140px or less than 1140px */
@media (max-width:1140px) {

    /* sections */
    header,
section,
footer {
    padding-left:5vw;
    padding-right:5vw;
}
    /* footer section */
    footer{
        flex-direction: column;
        gap: 6vh;
    }
    .footer-left-side{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 0vh;
    }
    .footer-left-side img{
        width: 100px;
        margin-left: 0px;
    margin-top: 0px;
}
    .footer-left-side p{
        text-align: center;
    }

    .footer-center-side .verticle-line{
        height:1px;
        width: 70vw;
    }
    
    .footer-right-side{
        align-items: center;
    }
}

/* this css will apply when screen goes to 1020px or less than 1020px */
@media (max-width:1020px) {

    /* hero-section */
    #hero-section, #staff-section {
        flex-direction: column-reverse;
        align-items: center;
        gap: 10px;
        padding-top: 170px;
    }



    #hire-section {
        width: 100%;
        min-height: 50%;
        align-items: center;
    }

    .hire-desc {
        text-align: center;
        font-size: 14px;
    }

    #profile-section {
        width: 100%;
        height: 50%;
        justify-content: center;
    }

    .img-cont {
        width: 280px;
        height: 300px;
        display: flex;
        align-items: end;
        margin-top: -10px;
    }

    /* about section */
    #about-section {
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        /* padding-top: 4vw;
        padding-bottom: 4vw; */
    }

    #about-title,
    #about-sub-title,
    #about-desc {
        text-align: center;
    }

    #about-title{
        font-size: 24px;
    }

   

    #left-about{
        width: 100%;
        height: 50%;
        justify-content: center;
    }
    #right-about{
        width: 100%;
        min-height: 50%;
    }
    #about-img-cont{
            width: 280px;
            height: 300px;
    }

    .hover-button{
        justify-content: center;
    }

    /* work-section */
    #work-section{
        flex-direction: column;
        justify-content: center;
    }
    .work-right-side,
    .work-left-side{
        width: 100%;
    }

    .work-left-side{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .work-right-side{
        align-items: center;
    }

    #work-sub-title{
        display: none;
    }
    
    #work-sub-title-1{
        display: inline;
        scale: 1;
    }
    /* service section */
    #service-top{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #service-sub-title {
        display: none;
    }
    
    #service-sub-title-1 {
        display: inline;
        scale: 1;
    }
    #services-cards {
        display: flex;
        justify-content: center;
    }
}
@media (max-width:850px) {
    .card{
        padding: 0.6vw;
    }
}
/* this css will apply when screen goes to 750px or less than 750px */
@media (max-width:750px) {
    #links div .ri-menu-3-line {
        display: block;
    }

    #nav-links {
        display: none;
    }

    .hire-name {
        font-size: 20px;
        text-align: center;
    }
        #about-desc {
            font-size: 14px;
        }

    .hire-title {
        font-size: 24px;
        text-align: center;
    }

    #right-follow {
        display: none;
    }

    #follow-section {
        justify-content: center;
    }
    #follow-follow{
        align-items: center;
    }

    #left-follow {
        flex-direction: column;
    }

    #left-follow p {
        text-align: center;
    }
    /* about section */

    .image-flex img{
        width: 210px;
    }

    .image-2{
        margin-top: -125px;
    }
    /* services section */
    .card {
        width: 100%;
    }

    
}

/* this css will apply when screen goes to 650px or less than 650px */
@media (max-width:650px) {
    /* about section */
    #about-section{
        gap: 5vh;
    }

    .image-flex {
        flex-direction: column;
        align-items: center;
    }
    
    .image-2{
        margin-top: 0px;
    }
    /* work-section */
   .image-flex{
    width: 100%;
}
.image-flex img {
    width: 70%;
}

.work-right-side{
    width: 100%;
}
}
@media (max-width:650px) {
    /* contact section */
    .contact-title {
        font-size: 18px;
    }
    
    .contact-sub-title{
        font-size:18px;
    }

    /* footer section */
    .footer-sub-title {
        font-size: 1.8vh;
        font-weight: 200;
    }
}
@media (max-width:550px) {
   /* work-section */
   .image-flex{
    width: 100%;
}
.image-flex img {
    width: 100%;
}

.work-right-side{
    width: 100%;
}
}
@media (max-width:500px) {

    .image-grid {
        grid-template-columns: 1fr;
    }
    .absolute-div-6{
        height: 100%;
    }
}