/*==================================================
    LARGE DESKTOP
==================================================*/

@media(min-width:1400px){

    .awards-slider-section{
        padding:85px 6%;
    }

    .awards-slider{
        max-width:1550px;
    }

    .awards-track{
        gap:25px;
    }

    .award-slide{
        flex:0 0 calc((100% - 75px) / 4);
    }

    .award-box{
        height:390px;
    }

    .award-arrow{
        width:54px;
        height:54px;
    }



        .about-section{
        padding:140px 0 155px;
    }

    .about-container{
        width:88%;
        max-width:1500px;

        gap:90px;
    }

    .about-content h2{
        font-size:62px;
    }

    .about-content p{
        font-size:13px;
    }

    .about-visual{
        height:600px;
    }

    .about-image-main{
        width:79%;
        height:510px;
    }

    .about-image-small{
        width:46%;
        height:295px;
    }

    .about-experience{
        width:155px;
        height:155px;

        right:4%;
        bottom:40px;
    }

    .about-experience strong{
        font-size:43px;
    }

    .stats-container{
        width:92%;
    }

    .stat-item strong{
        font-size:48px;
    }

    .project-showcase{
        padding:80px 0 75px;
    }

    .project-showcase .section-top{
        width:92%;
        margin-bottom:35px;
    }

    .premium-project-card{
        flex-basis:calc((92vw - 48px) / 3);
        width:calc((92vw - 48px) / 3);
    }

    .premium-project-image{
        height:270px;
    }

    .premium-project-info{
        min-height:270px;
        padding:24px;
    }

    .premium-project-info h3{
        font-size:23px;
    }

       .awards-slider-section{
        padding:75px 5%;
    }

    .award-box{
        height:350px;
    }

       .awards-slider-section{
        padding:65px 5%;
    }

    .awards-track{
        gap:20px;
    }

    .award-slide{
        flex:0 0 calc((100% - 40px) / 3);
    }

    .award-box{
        height:330px;
    }

    .award-arrow{
        width:48px;
        height:48px;
    }

    .award-prev{
        left:14px;
    }

    .award-next{
        right:14px;
    }
}

/* =========================================================
   LAPTOP
   1201px - 1399px
========================================================= */

@media(min-width:1201px) and (max-width:1399px){

    .about-section{
        padding:115px 0 130px;
    }

    .about-container{
        width:89%;
        gap:65px;
    }

    .about-content h2{
        font-size:53px;
    }

    .about-visual{
        height:535px;
    }

    .about-image-main{
        width:79%;
        height:450px;
    }

    .about-image-small{
        width:47%;
        height:255px;
    }

    .about-experience{
        width:135px;
        height:135px;
        right:3%;
        bottom:30px;
    }

    .about-experience strong{
        font-size:36px;
    }
}

/* =========================================================
   RESPONSIVE CSS
   991px
========================================================= */

@media(max-width:991px){

    .section-top h2,
    .section-center h2{
        font-size:42px;
    }


       .about-section{
        padding: 90px 45px 100px 45px;
        overflow:hidden;
    }

    .about-container{
        width:90%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:55px;
    }

    .about-content{
        width:100%;
        max-width:750px;
    }

    .about-content h2{
        max-width:700px;
        font-size:48px;
        line-height:1.08;
        letter-spacing:-1.5px;
    }

    .about-content p{
        max-width:700px;
        font-size:13px;
        line-height:1.9;
    }

    .about-visual{
        width:100%;
        max-width:850px;
        height:510px;
        margin:0 auto;
    }

    .about-image-main{
        width:80%;
        height:420px;
    }

    .about-image-small{
        width:46%;
        height:225px;
    }

    .about-experience{
        right:3%;
        bottom:25px;
        width:125px;
        height:125px;
    }

    .about-experience strong{
        font-size:33px;
    }


    .stats-section{
        padding:60px 0;
    }

    .stats-container{
        flex-wrap:wrap;
    }

    .stat-item{
        flex:1 1 50%;
        padding:20px;
    }

    .stat-item:nth-child(2)::after{
        display:none;
    }

    .stat-item:nth-child(3)::after{
        display:block;
    }

    .project-showcase{
     padding: 70px 50px 65px 50px;
    }

    .project-showcase .section-top{
        align-items:center;
    }

    .project-showcase .section-top h2{
        font-size:46px;
    }

    .premium-project-card{
        flex-basis:calc((92vw - 24px) / 2);
        width:calc((92vw - 24px) / 2);
    }

    .premium-project-image{
        height:280px;
    }

        .awards-slider-section{
        padding:55px 6%;
    }

    .awards-track{
        gap:20px;
    }

    .award-slide{
        flex:0 0 calc((100% - 20px) / 2);
    }

    .award-box{
        height:320px;
    }

}


/* =========================================================
   RESPONSIVE CSS
   767px
========================================================= */

@media(max-width:767px){

    .container{
        width:90%;
    }

    .section-top{
        width:90%;
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        margin-bottom:35px;
    }

    .section-top h2,
    .section-center h2{
        font-size:36px;
        letter-spacing:-1px;
    }

    .section-center{
        margin-bottom:40px;
    }

    .section-center p{
        font-size:11px;
    }


    /* HERO */

    .hero-dots{
        bottom:14px;
        gap:6px;
    }

    .hero-dot{
        width:6px;
        height:6px;
    }

    .hero-dot.active{
        width:22px;
    }


    /* ABOUT */
    .about-section{
        padding:75px 0 85px;
    }

    .about-container{
        width:90%;
        gap:45px;
    }

    .about-content .section-tag{
        font-size:9px;
        letter-spacing:2.5px;
        margin-bottom:16px;
    }

    .about-content .section-tag::before{
        width:30px;
    }

    .about-content h2{
        font-size:42px;
        line-height:1.08;
        letter-spacing:-1.3px;
        margin-bottom:22px;
    }

    .about-content p{
        font-size:12.5px;
        line-height:1.85;
    }

    .about-btn{
        margin-top:15px;
        padding:15px 23px;
    }

    .about-visual{
        height:465px;
    }

    .about-image-main{
        width:82%;
        height:380px;
    }

    .about-image-small{
        width:47%;
        height:205px;
        padding:7px;
    }

    .about-experience{
        width:110px;
        height:110px;
        right:2%;
        bottom:20px;
    }

    .about-experience strong{
        font-size:29px;
    }

    .about-experience span{
        margin-top:7px;
        font-size:6.5px;
        letter-spacing:1.5px;
    }


    /* STATS */

    .stats-section{
        padding:45px 0;
    }

    .stats-container{
        width:90%;
        flex-direction:row;
    }

    .stat-item{
        flex:1 1 50%;
        padding:18px 10px;
    }

    .stat-item strong{
        font-size:40px;
    }

    .stat-item strong span{
        font-size:22px;
    }

    .stat-item p{
        font-size:7px;
        letter-spacing:1.5px;
    }

    .stat-item:nth-child(3)::after{
        display:none;
    }


    /* PROJECT */

    .project-showcase{
        padding: 60px 45px 55px 45px
    }

    .project-showcase .section-top{
        width:90%;
        margin-bottom:30px;
        flex-direction:row;
        align-items:flex-end;
        gap:15px;
    }

    .project-showcase .section-tag{
        margin-bottom:12px;
        padding-left:28px;
        font-size:9px;
        letter-spacing:1.8px;
    }

    .project-showcase .section-tag::before{
        width:19px;
    }

    .project-showcase .section-top h2{
        font-size:37px;
        line-height:1.2;
    }

    .project-slider-controls{
        gap:7px;
    }

    .project-arrow{
        width:42px;
        height:42px;
        font-size:12px;
    }

    .premium-project-card{
        flex-basis:90vw;
        width:90vw;
    }

    .premium-project-image{
        height:260px;
    }

    .premium-project-info{
        min-height:260px;
        padding:23px 21px 24px;
    }

    .premium-project-type{
        font-size:9px;
        letter-spacing:1.7px;
    }

    .premium-project-info h3{
        margin-bottom:11px;
        font-size:23px;
    }

    .premium-project-info p{
        font-size:13px;
        line-height:1.65;
    }

    .premium-project-meta{
        margin-top:17px;
        padding-top:15px;
        gap:9px 15px;
    }

    .premium-project-meta span{
        font-size:9px;
    }

    .project-slider-bottom{
        width:90%;
        margin-top:28px;
    }

    .view-all{
        font-size:9px;
        letter-spacing:1px;
        gap:7px;
    }

    .project-slider-dots{
        gap:5px;
    }

    .project-slider-dots button,
    .project-slider-dots span{
        width:6px;
        height:6px;
    }

    .project-slider-dots button.active,
    .project-slider-dots span.active{
        width:20px;
    }


    /* AWARDS */
.awards-section{
        padding:65px 20px;
    }

    .awards-heading{
        margin-bottom:35px;
    }

    .awards-heading h2{
        font-size:38px;
    }

    .awards-heading p{
        font-size:13px;
    }

    .awards-main{
        min-height:380px;
    }

    .awards-main img{
        min-height:380px;
    }

    .awards-main-overlay{
        padding:35px 25px 25px;
    }

    .awards-main-overlay h3{
        font-size:25px;
    }

    .award-card{
        grid-template-columns:105px 1fr;
        min-height:135px;
    }

    .award-card-content{
        padding:18px;
    }

    .award-card-content h3{
        font-size:15px;
    }

    .awards-bottom{
        margin-top:30px;
        gap:15px;
    }

    .awards-link{
        white-space:nowrap;
        font-size:9px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:640px){

      .awards-slider-section{
        padding: 45px 90px 45px 90px;
    }

    .awards-slider{
        width:100%;
    }

    .awards-track{
        gap:15px;
    }

    .award-slide{
        flex:0 0 100%;
    }

    .award-box{
        height:380px;
    }


    /* BUTTONS ALWAYS VISIBLE ON MOBILE */

    .award-arrow{

        width:42px;
        height:42px;

        opacity:1;

        transform:
            translateY(-50%)
            scale(1);

        background:rgba(255,255,255,.95);
    }

    .awards-slider:hover .award-arrow{

        opacity:1;

        transform:
            translateY(-50%)
            scale(1);
    }


    .award-prev{
        left:8px;
    }

    .award-next{
        right:8px;
    }

    .award-arrow i{
        font-size:12px;
    }


       .about-section{
        padding:65px 0 75px;
    }

    .about-section::before{
        top:30px;
        right:-280px;
        width:450px;
        height:450px;
    }

    .about-section::after{
        bottom:-250px;
        left:-300px;
        width:500px;
        height:500px;
    }

    .about-container{
        width:90%;
        gap:40px;
    }

    .about-content{
        width:100%;
        max-width:none;
    }

    .about-content h2{
        font-size:36px;
        line-height:1.1;
        letter-spacing:-1px;
        margin-bottom:20px;
    }

    .about-content p{
        font-size:12px;
        line-height:1.85;
        margin-bottom:13px;
    }

    .about-btn{
        padding:14px 21px;
        font-size:8px;
        letter-spacing:1.7px;
    }


    /* ==============================================
       MOBILE IMAGE AREA
    ============================================== */

    .about-visual{
        position:relative;
        width:100%;
        height:420px;
        margin:0;
        display:block;
    }

    .about-image-main{
        position:absolute;

        top:0;
        right:0;
        width:88%;
        height:330px;
        margin:0;
    }

    .about-image-main img{
        object-position:center center;
    }

    .about-image-small{
        position:absolute;

        left:0;
        bottom:0;
        width:50%;
        height:175px;
        padding:6px;
    }

    .about-image-small img{
        object-position:center center;
    }

    .about-experience{
        right:0;
        bottom:18px;
        width:100px;
        height:100px;
    }

    .about-experience strong{
        font-size:27px;
    }

    .about-experience span{
        margin-top:6px;
        font-size:6px;
        line-height:1.5;
        letter-spacing:1.4px;
    }

}
/* =========================================================
   RESPONSIVE CSS
   480px
========================================================= */

@media(max-width:480px){

    .section-top h2,
    .section-center h2{
        font-size:31px;
    }

    .section-tag{
        font-size:9px;
        letter-spacing:2px;
    }

    /* HERO */

    .hero-dots{
        bottom:10px;
    }

    .hero-dot.active{
        width:20px;
    }


    /* ABOUT */
 .about-section{
    padding: 55px 40px 65px 40px;
    }

    .about-container{
        width:92%;
        gap:35px;
    }

    .about-content .section-tag{
        font-size:8px;
        letter-spacing:2px;
    }

    .about-content h2{
        font-size:32px;
        letter-spacing:-.7px;
    }

    .about-content p{
        font-size:11.7px;
        line-height:1.8;
    }

    .about-btn{
        padding:13px 19px;
        font-size:7.5px;
    }

    .about-visual{
        height:375px;
    }

    .about-image-main{
        width:89%;
        height:290px;
    }

    .about-image-small{
        width:51%;
        height:155px;
        padding:5px;
    }

    .about-experience{
        width:90px;
        height:90px;
        right:0;
        bottom:15px;
    }

    .about-experience strong{
        font-size:23px;
    }

    .about-experience span{
        font-size:5.5px;
        letter-spacing:1.2px;
    }


    /* STATS */

    .stats-section{
        padding: 35px 35px;
    }

    .stats-container{
        width:94%;
    }

    .stat-item{
        padding:15px 5px;
    }

    .stat-item strong{
        font-size:32px;
    }

    .stat-item strong span{
        font-size:18px;
    }

    .stat-item p{
        margin-top:8px;
        font-size:6px;
        letter-spacing:1px;
    }


    /* PROJECT */

    .project-showcase{
        padding: 50px 50px;
    }

    .project-showcase .section-top{
        width:90%;
        margin-bottom:25px;
        flex-direction: column;
        align-items: center;
    }

    .project-showcase .section-top h2{
        font-size:32px;
        text-align: center;
    
    }

    .project-arrow{
        width:38px;
        height:38px;
    }

    .premium-project-card{
        flex-basis:90vw;
        width:90vw;
    }

    .premium-project-image{
        height:235px;
    }

    .premium-project-info{
        min-height:250px;
        padding: 21px 77px 10px 10px;
    }

    .premium-project-info h3{
        font-size:21px;
    }

    .premium-project-info p{
        font-size:12px;
    }

    .premium-project-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .project-slider-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }


    /* AWARDS */
    .awards-slider-section{
        padding:40px;
    }

    .award-box{
        height:340px;
    }

    .award-arrow{
        width:38px;
        height:38px;
    }

    .award-prev{
        left:6px;
    }

    .award-next{
        right:6px;
    }

    .award-arrow i{
        font-size:11px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .hero-slide,
    .project-track,
    .premium-project-card,
    .premium-project-image img,
    .project-arrow,
    .project-view-link,
    .view-all,
    .project-slider-dots button,
    .project-slider-dots span,
    .awards-track,
    .award-box,
    .award-box img,
    .award-box::after,
    .award-arrow,
    .award-arrow i{
        transition:none!important;
    }
}



@media (max-width: 360px) {
    .project-showcase .section-to{
        
        flex-direction: column;
    }

        .award-box{
        height:200px;
    }

    .award-arrow{
        width:35px;
        height:35px;
    }

    
    .about-section{
        padding:40px;
    }

    .about-container{
        width:92%;

        gap:32px;
    }

    .about-content h2{
        font-size:29px;

        line-height:1.08;
    }

    .about-content p{
        font-size:11.3px;
    }

    .about-visual{
        height:340px;
    }

    .about-image-main{
        width:88%;

        height:260px;
    }

    .about-image-small{
        width:51%;

        height:140px;
    }

    .about-experience{
        width:82px;
        height:82px;

        bottom:12px;
    }

    .about-experience strong{
        font-size:21px;
    }

    .about-experience span{
        font-size:5px;

        letter-spacing:1px;
    }
}