@charset "UTF-8";
/* CSS Document */

        *{
            padding: 0;
            margin: 0;
        }
        
        body {
            font-family: "Roboto", sans-serif;
            background-color: #0b4251;
        }

/*
html {
    visibility: hidden;
}
*/

/*
html.wf-loaded {
    visibility: visible;
}
*/

/*title that mostly the same*/

.sec4main1 {
    width: 100%;
    height: 20vh;
/*    background-color: #0b4251;*/
    /*border: 2px solid red;*/
}

.sec4main1-title {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: row;
    
}

.sec4main1-title1 {
    width: 45%;
    height: 100%;
/*    border: 2px solid blue;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.sec4main1-title11 {
    width: 85%;
    height: 75%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}


.sec4main1-title1 p{
    font-weight: 400;
    font-size: 1.2vw;
    color: white;
    text-align: right;
    z-index: 1;
    /*color: red;*/
}

/*this will be the big title*/

.sec4main1-title2 {
    width: 55%;
    height: 100%;
/*    border: 2px solid pink;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.sec4main1-title22 {
    width: 75%;
    height: 75%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.sec4main1-title22-img {
    width: 31px;
    height: 12px;
    margin-left: 15px;
    z-index: 1;
    /*border: 2px solid red;*/
/*    border: 2px solid yellow;*/
}

.sec4main1-title22-img img {
    width: 100%;
}

.sec4main1-title2 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 4.2vw;
    color: white;
    z-index: 1;
    /*color: red;*/
/*
    margin-top: 5px;
    border: 2px solid red;
*/
}

.sec4main1-title2 p{
    font-weight: 400;
    font-size: 1.2vw;
    color: white;
    letter-spacing: 1px;
    z-index: 1;
    /*color: red;*/
}

/*can copy until here*/

/*button start here*/

.sec4-content-btn {
    padding: 15px 25px;
/*    margin-top: 30px;*/
    text-decoration: none;
    background-color: #f2c864;
    transition: 0.4s;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 0.8vw;
    position: absolute;
    top: 0;
    z-index: 1;
}

/*sliding start here*/


        .project-slider-container {
            overflow: hidden;
            padding: 20px 0;
            position: relative;
            width: 100%;
            height: 45vh;
/*            border: 2px solid cyan;*/
/*            background-color: #0b4251;*/
        }

        .project-slider-track {
            display: flex;
            width: calc(5 * 420px + 4 * 2rem);
            gap: 2rem;
            padding-left: 14px;
/*            border: 2px solid cyan;*/
        }
        
        .project-slider-track:first-child{
/*            background-color: red;*/
        }
        
        .project-slider-track:last-child{
/*            background-color: yellow;*/
            margin-left: 20px;
        }

        .project-slider-wrapper {
            display: flex;
            width: 200%; /* Double width for seamless looping */
            animation: slideLeft 15s linear infinite;
        }

        .project-slider-wrapper:hover {
            animation-play-state: paused;
        }

        .project-box {
/*            flex: 0 0 auto;*/
            width: 420px;
            height: 320px;
            position: relative;
/*            overflow: hidden;*/
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            background-color: darkgrey;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
/*            border: 2px solid cyan;*/
            flex-shrink: 0;
        }

        .project-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .project-description {
            width: 88%;
            height: auto;
            position: absolute;
/*            bottom: 0;*/
            margin-top: 280px;
            background-color: white;
/*            border: 2px solid pink;*/
/*            display: none;*/
            padding: 1rem;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
        }

        .project-description h3 {
            margin-bottom: 0.2rem;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 2.2vw;
            color: #0b4251;
        }

        .project-description p {
            font-weight: 400;
            font-size: 1.1vw;
            line-height: 1.5vw;
            color: #0b4251;
        }


/*image and connector*/

.sec4main1-btn {
    width: 100%;
    height: 60vh;
/*    border: 2px solid red;*/
    margin-top: 90px;
    position: relative;
    display: flex;
    justify-content: center;
/*    align-items: center;*/
}

.sec4main1-btn1 {
    width: 86%;
    height: 90%;
/*    border: 2px solid pink;*/
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sec4main1-btn11 {
    width: 490px;
    height: 360px;
/*    border: 2px solid purple;*/
    position: absolute;
/*
    margin-right: 650px;
    margin-top: 80px;
*/
}

.sec4main1-btn11 img {
    width: 100%;
}


.sec4main1-btn2 {
    width: 100%;
    height: 470px;
/*    border: 2px solid cyan;*/
}

.sec4main1-btn2 img {
    width: 100%;
}







/*all hover here*/

.sec4-content-btn:hover{
    box-shadow: 0 0 5px #f2e064,
                0 0 15px #f2e064,
                0 0 30px #f2e064,
                0 0 60px #f2e064,
                0 0 120px #f2e064;
    border: 0.8px solid white;
}




/*keyframes and media here*/


@keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-78.6%); /* Move by half the width, should be 79.45*/
            }
}




/*media tablets 1194px start here*/


@media (max-width: 1194px){
    
    
.sec4main1 {
    width: 100%;
    /*height: 20vh;*/
    height: 165px;
/*    background-color: #0b4251;*/
    /*border: 2px solid red;*/
}
    


.sec4main1-title2 h1 {
    font-size: 4.6vw;
    color: white;
    z-index: 1;
    /*color: red;*/
}

.sec4main1-title2 p{
    font-weight: 400;
    font-size: 1.6vw;
    color: white;
    letter-spacing: 1px;
    z-index: 1;
    /*color: red;*/
}
    
    
/*paragraph text*/

.sec4main1-title1 p{
    font-weight: 400;
    font-size: 1.6vw;
    color: white;
    text-align: right;
    z-index: 1;
    /*color: red;*/
}
    
    
    

.sec4main1-btn {
    width: 100%;
    /*height: 60vh;*/
    height: 350px;
    /*border: 2px solid green;*/
    margin-top: 90px;
}



.sec4main1-btn11 {
    width: 385px;
    height: 283px;
    /*border: 2px solid purple;*/
    position: absolute;
}



 .project-description h3 {
            margin-bottom: 0.2rem;
            font-size: 2.6vw;
            color: #0b4251;
            /*color: red;*/
        }

.project-description p {
            font-weight: 400;
            font-size: 1.6vw;
            line-height: 1.5vw;
            color: #0b4251;
            /*color: red;*/
        }




/*button here*/
    
.sec4-content-btn {
    font-size: 1.2vw;
}
    
    
    
    
    
@keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-95.6%); /* Move by half the width, should be 79.45*/
            }
}
    
    
    
    
}





/*media tablets end here*/


/*tablets portrait view*/

@media (max-width: 920px) {
    
    
    
.sec4main1-btn {
    width: 100%;
    /*height: 60vh;*/
    height: 265px;
    /*border: 2px solid aqua;*/
    margin-top: 40px;
}


.sec4main1-btn11 {
    width: 305px;
    height: 224px;
    /*border: 2px solid purple;*/
    position: absolute;
}



/*button here*/
    
.sec4-content-btn {
    /*font-size: 1.2vw;*/
    margin-top: -40px;
    /*border: 2px solid red;*/
}
    
    
    
/*sub tag start here*/


.sec4main1-title22-img {
    width: 25px;
    height: 10px;
    margin-left: 15px;
    z-index: 1;
    /*border: 2px solid red;*/
/*    border: 2px solid yellow;*/
}
    
    
    
    
    
    
    
@keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-125.6%); /* Move by half the width, should be 79.45*/
            }
}
    
    
    
}


/*media 920px end here*/





@media (max-width: 768px) {
            .project-box {
                width: 280px;
            }
            .project-slider-track {
                gap: 1rem;
            }
}








@media (max-width: 600px) {
    
    
.sec4main1 {
    width: 100%;
    /*height: 30vh;*/
    /*height: 225px;*/
    height: auto;
    /*border: 2px solid red;*/
}

.sec4main1-title {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: column;
    
}

.sec4main1-title1 {
    width: 100%;
    height: 60%;
/*    border: 2px solid blue;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.sec4main1-title11 {
    width: 80%;
    height: 90%;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.sec4main1-title1 p{
    font-weight: 400;
    font-size: 3vw;
    text-align: left;
}


.sec4main1-title2 {
    width: 100%;
    height: 40%;
/*    border: 2px solid pink;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 10px;
}

.sec4main1-title22 {
    width: 80%;
    height: 90%;
/*    border: 2px solid green;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.sec4main1-title22-img {
    width: 18px;
    height: 7px;
    margin-left: 15px;
/*    border: 2px solid yellow;*/
}

.sec4main1-title22-img img {
    width: 100%;
}

.sec4main1-title2 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 6.5vw;
/*
    margin-top: 5px;
    border: 2px solid red;
*/
}

.sec4main1-title2 p {
    font-weight: 400;
    font-size: 2.6vw;
    letter-spacing: 1px;
}
    
/*button here*/
    
.sec4-content-btn {
    padding: 10px 20px;
/*    margin-top: 15px;*/
    text-decoration: none;
    background-color: #f2c864;
    transition: 0.4s;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 2.2vw;
}

/*image sliding & connector*/
    
.sec4main1-btn {
    width: 100%;
    /*height: 43vh;*/
    height: 290px;
    /*border: 2px solid red;*/
    margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: center;
/*    align-items: center;*/
}

.sec4main1-btn1 {
    width: 86%;
    height: 90%;
/*    border: 2px solid pink;*/
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sec4main1-btn11 {
    width: 271px;
    height: 199px;
/*    border: 2px solid purple;*/
    position: absolute;
/*
    margin-right: 650px;
    margin-top: 80px;
*/
}

.sec4main1-btn11 img {
    width: 100%;
}
    

.sec4main1-btn2 {
    width: 100%;
    height: 290px;
    /*border: 2px solid cyan;*/
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*object-fit: cover;*/
    /*overflow: hidden;*/
}

.sec4main1-btn2 img {
    width: 160%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid yellow;*/
}
    
    
    
    
    
    
    
/*sliding content*/
            
            .project-slider-container{
                /*height: 40vh;*/
                height: 325px;
                /*border: 2px solid aqua;*/
                display: flex;
                justify-content: center;
                align-items: center;
                /*flex-direction: row;*/
            }
            
            .project-box {
                width: 280px;
                height: 213px;
            }
            
            .project-description {
                padding: 0.75rem;
                margin-top: 200px;
            }
            .project-description h3 {
                font-size: 4vw;
                /*color: red;*/
            }
            .project-description p {
                font-size: 2.5vw;
                line-height: 2.2vw;
                /*color: yellow;*/
            }
            
            .project-slider-track {
            gap: 3rem;
            padding-left: 20px;
        }
        
        .project-slider-track:last-child{
            margin-left: 30px;
        }
            
             .project-slider-wrapper {
            display: flex;
            width: 200%; /* Double width for seamless looping */
            animation: slideLeft 15s linear infinite;
        }
            
            
              @keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-140%); /* Move by half the width, should be 169.55 or 137.25*/
            }
        }
        









}

/*media 600px ends here*/








@media (max-width: 570px){
    
    
.sec4main1-btn {
    width: 100%;
    /*height: 40vh;*/
    height: 280px;
    /*border: 2px solid red;*/
}




.sec4main1-btn2 {
    width: 100%;
    height: 280px;
    /*border: 2px solid cyan;*/
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*object-fit: cover;*/
    /*overflow: hidden;*/
}

.sec4main1-btn2 img {
    width: 160%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid yellow;*/
}
    
    
    
.sec4-content-btn {
    margin-top: -25px;
    /*border: 2px solid red;*/
}
    
    
    
    
    
    
    
    
}

/*media 570px end here*/









@media (max-width: 550px){
    
    

  .project-slider-wrapper {
            display: flex;
            width: 200%; /* Double width for seamless looping */
            animation: slideLeft 15s linear infinite;
        }
            
            
    @keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-153%); /* Move by half the width, should be 169.55 or 137.25*/
            }
        }
    
    
.sec4main1-btn {
    width: 100%;
    /*height: 40vh;*/
    height: 270px;
    /*border: 2px solid red;*/
}




.sec4main1-btn2 {
    width: 100%;
    height: 270px;
    /*border: 2px solid cyan;*/
}

.sec4main1-btn2 img {
    width: 160%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid yellow;*/
}


.sec4-content-btn {
    margin-top: -25px;
    /*border: 2px solid red;*/
}
    
    
    
}

/*media 550px end here*/




@media (max-width: 530px){
    
.sec4main1-btn {
    width: 100%;
    /*height: 40vh;*/
    height: 270px;
    /*border: 2px solid red;*/
}




.sec4main1-btn2 {
    width: 100%;
    height: 270px;
    /*border: 2px solid cyan;*/
}

    
    
    
.sec4main1-btn2 img {
    width: 170%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid yellow;*/
}
    

.sec4-content-btn {
    margin-top: -20px;
    /*border: 2px solid red;*/
}
    
    
    
    
    
}


/*media 530px end here*/



@media (max-width: 500px){
    
    
.sec4main1-btn2 img {
    width: 180%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid aqua;*/
}
    
    

    
}

/*media 500px end here*/



@media (max-width: 465px){
    
    
.sec4main1-btn2 img {
    width: 190%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid pink;*/
}
    
    

    
}

/*media 500px end here*/











@media (max-width: 450px){
    
    
    
    .project-slider-wrapper {
            display: flex;
            width: 200%; /* Double width for seamless looping */
            animation: slideLeft 15s linear infinite;
        }
            
            
    @keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-188.5%); /* Move by half the width, should be 169.55 or 137.25*/
            }
        }
    
    
.sec4main1-btn2 img {
    width: 200%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid red;*/
}
    
    
    
    
    
    
    
}

/*media 450px end here*/



















@media (max-width: 428px) {
    
    
     .project-slider-wrapper {
            display: flex;
            width: 200%; /* Double width for seamless looping */
            animation: slideLeft 15s linear infinite;
        }
            
            
              @keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-197.5%); /* Move by half the width, should be 169.55 or 137.25*/
            }
        }
        
        
        /*image sliding & connector*/
    
.sec4main1-btn {
    width: 100%;
    /*height: 40vh;*/
    height: 280px;
    /*border: 2px solid red;*/
    margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: center;
/*    align-items: center;*/
}

.sec4main1-btn1 {
    width: 86%;
    height: 95%;
    /*border: 2px solid pink;*/
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sec4main1-btn11 {
    width: 271px;
    height: 199px;
/*    border: 2px solid purple;*/
    position: absolute;
/*
    margin-right: 650px;
    margin-top: 80px;
*/
}

.sec4main1-btn11 img {
    width: 100%;
}


.sec4main1-btn2 {
    width: 100%;
    height: 280px;
    /*height: 310px;*/
    /*border: 2px solid cyan;*/
    /*background-color: red;*/
    /*z-index: -1;*/
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*object-fit: cover;*/
    /*overflow: hidden;*/
}

.sec4main1-btn2 img {
    width: 220%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid yellow;*/
}
        
        
/*the title here*/
        
.sec4main1-title2 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 7vw;

    /*border: 2px solid red;*/

}

.sec4main1-title2 p {
    font-weight: 400;
    font-size: 3vw;
    letter-spacing: 1px;
}
        
        
/*description here*/
     
.sec4main1-title11 {
    width: 90%;
    height: 90%;
    /*border: 2px solid cyan;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.sec4main1-title1 p{
    font-weight: 400;
    font-size: 3.2vw;
    text-align: left;
}   
        
        


            .project-description h3 {
                font-size: 5vw;
                /*color: red;*/
            }
            
            .project-description p {
                font-size: 3vw;
                line-height: 2.2vw;
                /*color: yellow;*/
            }
        
        
        
        
        
        
        
        
        
        
        
        
    
}

/*media 428px end here*/




@media (max-width: 400px){
    
    
.sec4main1-btn2 img {
    width: 240%;
    height: auto;
    /*height: 100%;*/
    /*border: 2px solid green;*/
}
    
    

    
}

/*media 400px end here*/







@media (min-width: 1600px){
    
    
    
.project-slider-wrapper {
            display: flex;
            width: 200%; /* Double width for seamless looping */
            animation: slideLeft 15s linear infinite;
        }
    
    
    
@keyframes slideLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-59.4%); /* Move by half the width, should be 79.45*/
            }
}
    
    
    
    



/*image and connector*/

.sec4main1-btn {
    width: 100%;
    height: 62vh;
    /*border: 2px solid red;*/
}



.sec4main1-btn11 {
    width: 565px;
    height: 415px;
    /*border: 2px solid purple;*/
    position: absolute;
/*
    margin-right: 650px;
    margin-top: 80px;
*/
}

.sec4main1-btn11 img {
    width: 100%;
}


.sec4main1-btn2 {
    width: 100%;
    height: 470px;
    /*border: 2px solid cyan;*/
}

.sec4main1-btn2 img {
    width: 100%;
}

    
    
    
    
    
    
    
    
    
    
    
    
}

/*media 1600px end here*/





/*media gaming laptop start here*/

@media (min-width: 1445px) and (min-height: 864px) and (max-width: 1599px){
    

.sec4main1-btn {
    width: 100%;
    height: 54vh;
    /*border: 2px solid red;*/
}


    
    
    
    
}


/*media gaming laptop end here*/