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


/* Add this at the very top of your CSS */
@media only screen and (max-width: 1400px) {
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }
}



* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /*outline: 1px solid red;*/
}


body {
    font-family: "Roboto", sans-serif;
    background-color: white; /*bg-gray-100 */
    overflow-x: hidden;
    /*max-width: 100%;*/
}



.main-hero {
    z-index: 10;
}


/*whatsapp button here*/

 /* WhatsApp container */
        .whatsapp-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 140px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        
        /* WhatsApp button */
        .whatsapp-button {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #25d366;
            color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            width: 80px;
            height: 80px;
            position: relative;
            z-index: 2;
            transition: transform 0.2s;
            text-decoration: none;
        }
        
        .whatsapp-button span{
            font-size: 3.6vw;
        }
        
        .whatsapp-button:hover {
            transform: scale(1.2);
        }

        /* WhatsApp icon */
        .whatsapp-icon {
            width: 60%;
            height: auto;
        }

        /* Circular text */
        .circular-text {
            position: absolute;
            width: 100%;
            height: 100%;
            animation: rotate 10s linear infinite;
        }

        .circular-text svg {
            width: 100%;
            height: 100%;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 1.2vw;
            letter-spacing: 5px;
        }

        .circular-text text {
/*            fill: #f2c864; */
            /* Changed to golden yellow color */
/*            fill: red;*/
        }

        .circular-text path {
            font-size: 11px;
            font-weight: 500;
        }

      /* Dual Text Layers */
        .text-light {
            fill: #0b4251; /* Teal for light backgrounds */
            opacity: 1;
            transition: opacity 0.5s;
        }
        
        .text-dark {
            fill: #f2c864; /* Gold for dark backgrounds */
            opacity: 0;
            transition: opacity 0.5s;
        }
        

/* Dynamic Switching - Fixed Version */
body.dark-active .text-light {
    opacity: 0;
}

body.dark-active .text-dark {
    opacity: 1;
}

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Pause on hover */
        .whatsapp-container:hover .circular-text {
            animation-play-state: paused;
        }

/*can copy until here*/








/*introduction project page here*/



.service-sec2main3 {
    width: 100%;
    height: 94vh;
/*    border: 2px solid blue;*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.service1-sec2-img {
    width: 100%;
    height: 740px;
/*    border: 2px solid black;*/
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    /*overflow-x: hidden;*/
}

.service1-sec2-img img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.service-sec2main3-content {
    width: 86%;
    height: 67vh;
/*    border: 2px solid red;*/
}

.service-sec2main3-content1 {
    width: 100%;
    height: 15vh;
/*    border: 2px solid green;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.service-sec2main3-content2 {
    width: 100%;
    height: 52vh;
/*    border: 1px solid orange;*/
    display: flex;
    flex-direction: row;
}

/*title for intro*/

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

.service-sec2main3-title-img img {
    width: 100%;
}

.service-sec2main3-content1 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 4.2vw;
    color: #0b4251;
    z-index: 1;
    /*color: red;*/
/*
    margin-top: 5px;
    border: 2px solid red;
*/
}

.service-sec2main3-content1 p{
    font-weight: 400;
    font-size: 1.2vw;
    color: #bdccd0;
    letter-spacing: 1px;
    z-index: 1;
    /*color: red;*/
}








/*description to our services*/

.service-sec2main3-content22 {
    width: 45%;
    height: 100%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.service-sec2main3-content222 {
    width: 82%;
    height: 95%;
/*    border: 2px solid cyan;*/
}

.service-sec2main3-content222 p {
    font-weight: 400;
    font-size: 1.2vw;
    color: #0b4251;
    margin-bottom: 35px;
    z-index: 1;
    /*color: red;*/
}



/*the one image rectangle to give a space*/


.service-sec2main3-content-img {
    width: 55%;
    height: 100%;
/*    border: 2px solid pink;*/
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}









/*project showcasing start here*/

.project-main {
    width: 100%;
    height: auto;
/*    border: 2px solid orange;*/
    background-color: #bdccd0;
}

       
        /*.container {*/
         main {
            padding: 2rem 0; /* py-8 */
            margin: 0 auto;  /* mx-auto */
            width: 86%; /* container */
/*            border: 2px solid red;*/
            /*box-sizing: border-box;*/
        }
        

        .filter-buttons {
            margin-bottom: 2rem; /* mb-8 */
            text-align: center;
            z-index: 1;
            /*border: 2px solid red;*/
        }

        .filter-button {
            background-color: #B4C5C9; /* bg-gray-200 */
            color: white; /* text-gray-700 */
            padding: 0.5rem 1rem; /* py-2 px-4 */
/*            border-radius: 1rem;  rounded-full */
            margin: 0 0.5rem; /* mx-2 */
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
            border: none;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 1.4vw;
        }

        .filter-button:hover {
            background-color: #f2c864; /* hover:bg-blue-500 */
            color: white;         /* hover:text-white */
            font-size: 1.4vw;
        }
        .filter-button.active {
            background-color: #f2c864; /* bg-blue-500 */
            color: white;         /* text-white */
            font-size: 1.4vw;
        }
        

        /*.project-grid {*/
        /*    display: grid;*/
        /*    grid-template-columns: 1fr;*/
             /*1 column by default */
        /*    gap: 1.5rem;   */
             /*gap-6 */
        /*}*/
        
        
        .project-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1.5rem; /*3 columns on medium screens and up */
            }
        

/*.project-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/
/*  gap: 1.5rem;*/
/*  max-width: 100%;*/
/*  box-sizing: border-box;*/
/*}*/

        
        
        /*@media (min-width: 640px) {*/
        /*    .project-grid {*/
        /*        grid-template-columns: repeat(2, 1fr);*/
                /* 2 columns on small screens and up */
        /*    }*/
        /*}*/
        

        /*@media (min-width: 1024px) {*/
        /*    .project-grid {*/
        /*        grid-template-columns: repeat(3, 1fr);*/
                /* 3 columns on medium screens and up */
        /*    }*/
        /*}*/

        
        .project-card {
            background-color: white; /* bg-white */
/*            border-radius: 0.5rem;   rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
            overflow: hidden;
/*            width: 90%;*/
            transition: transform 0.3s ease, box-shadow 0.3s ease;
/*            border: 2px solid red;*/
        }

        .project-card:hover {
            transform: translateY(-0.25rem);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .project-card a {
        text-decoration: none;
        }

/*        .project-card img {*/
/*
            width: 100%;
            height: 12rem;  
*/
/*            object-fit: cover;*/
/*            width: 400px;*/
/*            height: 220px;*/
/*            border: 2px solid blue;*/
/*        }*/
        
        
        .project-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            /*border: 2px solid red;*/
        }


        .project-card-content {
            padding: 1.5rem;    /* p-6 */
            
        }

        .project-card-content h3 {
            margin-bottom: 0.5rem; /* mb-2 */
            color: #0b4251;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 2vw;
            text-decoration: none;
            
        }

        .project-card-content p {
            color: #0b4251;  /* text-gray-700 */
            font-weight: 400;
            font-size: 1.1vw;
        }



/*project-lorry start here*/


.project-connect {
    width: 100%;
    height: 60vh;
    /*border: 2px solid red;*/
    position: relative;
}

/*this one should be 1425px for the connect*/

.project-connect1 {
    /*width: 1440px;*/
    /*height: 460px;*/
/*    background-color: royalblue;*/
/*    border: 2px solid aqua;*/
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

/*project lorry start here*/

.project-lorry {
    width: 780px;
    height: 360px;
/*    background-color: royalblue;*/
/*    border: 2px solid yellow;*/
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    margin-left: -220px;
}

.project-connect2 {
    width: 100%;
    height: 100%;
/*    background-color: aquamarine;*/
}

.project-connect3 {
    width: 120px;
    height: 120px;
/*    background-color: royalblue;*/
/*    border: 2px solid blue;*/
    position: absolute;
    right: 0;
    margin-right: 94px;
    margin-bottom: 10px;
    animation: rotate 0.6s linear infinite;
}

.project-connect4 {
    width: 120px;
    height: 120px;
/*    background-color: royalblue;*/
/*    border: 2px solid red;*/
    position: absolute;
    left: 0;
    margin-left: 132px;
    margin-bottom: 9px;
    animation: rotate 0.6s linear infinite;
}





/*keyframes start over here*/

 @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }




/*animation start over here*/


.whatsapp-container {
    transition: 2s;
    transition-delay: 6s;
}

.whatsapp-container {
    transform: translateX(60%);
    opacity: 0;
}

.show-animate .whatsapp-container {
    transform: translateX(0);
    opacity: 1;
}


/*introduction start here*/



.service-sec2main3-content222 {
    transition: 2s;
    transition-delay: 1s;
}

.service-sec2main3-content222 {
    transform: translateX(-40%);
    opacity: 0;
}

.show-animate .service-sec2main3-content222 {
    transform: translateX(0);
    opacity: 1;
}


/*lorry move*/


.project-lorry {
    transition: 1.25s;
/*    transition-delay: 0.5s;*/
}

.project-lorry {
    transform: translateX(-75%);
}

.show-animate .project-lorry {
    transform: translateX(0);
}





       













/*media 1194px start here*/



@media (max-width: 1194px) {
    
    
/*media whatsapp copy here*/
    
     .whatsapp-container {
            bottom: 15px;
            right: 10px;
        }
    
    .whatsapp-button {
            width: 65px;
            height: 65px;
        }
    
     .circular-text {
            position: absolute;
            width: 85%;
            height: 85%;
        }
    
    .circular-text svg {
            font-size: 1.5vw;
        }
    
     .whatsapp-button span{
            font-size: 3.8vw;
            /*color: red;*/
        }
    
    
/*copy until here*/


/*project start here below*/

.service-sec2main3 {
    width: 100%;
    /*height: 94vh;*/
    height: 480px;
    /*border: 2px solid red;*/
    margin-top: 120px;
}


.service1-sec2-img {
    width: 100%;
    height: 740px;
    /*border: 2px solid black;*/
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service1-sec2-img img {
    width: 109%;
    position: absolute;
    top: 0;
    left: 0;
    /*border: 2px solid black;*/
}


/*the height of the text*/


/*.service-sec2main3-content {*/
/*    width: 86%;*/
    /*height: 67vh;*/
/*    height: 330px;*/
    /*border: 2px solid yellow;*/
/*}*/





.service-sec2main3-content1 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 4.6vw;
    color: #0b4251;
    z-index: 1;
    /*color: red;*/
}

.service-sec2main3-content1 p{
    font-weight: 400;
    font-size: 1.6vw;
    color: #bdccd0;
    letter-spacing: 1px;
    z-index: 1;
    /*color: red;*/
}


.service-sec2main3-content222 p {
    font-weight: 400;
    font-size: 1.6vw;
    color: #0b4251;
    margin-bottom: 35px;
    z-index: 1;
    /*color: aquamarine;*/
}



/*below project showcasing*/

         .project-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            /*border: 2px solid red;*/
        }


        .project-card-content h3 {
            margin-bottom: 0.5rem; /* mb-2 */
            color: #0b4251;
            font-size: 2.6vw;
            text-decoration: none;
            /*color: red;*/
            
        }

        .project-card-content p {
            color: #0b4251;  /* text-gray-700 */
            font-weight: 400;
            font-size: 1.6vw;
            /*color: red;*/
        }
        
        
        
/*try below here for project*/



        .filter-buttons {
            margin-bottom: 2rem; /* mb-8 */
            text-align: center;
            z-index: 1;
            /*border: 2px solid red;*/
        }

        .filter-button {
            background-color: #B4C5C9; /* bg-gray-200 */
            color: white; /* text-gray-700 */
            padding: 0.5rem 1rem; /* py-2 px-4 */
/*            border-radius: 1rem;  rounded-full */
            margin: 0 0.5rem 1rem; /* mx-2 */
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
            border: none;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 1.6vw;
            /*color: red;*/
        }

        .filter-button:hover {
            background-color: #f2c864; /* hover:bg-blue-500 */
            color: white;         /* hover:text-white */
            font-size: 1.6vw;
        }
        .filter-button.active {
            background-color: #f2c864; /* bg-blue-500 */
            color: white;         /* text-white */
            font-size: 1.6vw;
            /*color: red;*/
        }






    
    
}


/*media 1194px ends here*/



        




/*media 920px start here*/



@media (max-width: 920px) {
    
    
/*media whatsapp copy here*/
    
     .whatsapp-container {
            bottom: 15px;
            right: 10px;
        }
    
    .whatsapp-button {
            width: 65px;
            height: 65px;
        }
    
     .circular-text {
            position: absolute;
            width: 85%;
            height: 85%;
        }
    
    .circular-text svg {
            font-size: 2vw;
        }
    
     .whatsapp-button span{
            font-size: 5vw;
            /*color: red;*/
        }
    
    
/*copy until here*/


        .project-grid {
                grid-template-columns: repeat(2, 1fr); /*2 columns on small screens and up */
            }
        
            
        .project-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            /*border: 2px solid red;*/
        }



.service-sec2main3-content {
    width: 86%;
    /*height: 67vh;*/
    height: 340px;
    /*border: 2px solid yellow;*/
    margin-top: -50px;
}

.service-sec2main3-content1 {
    width: 100%;
    /*height: 15vh;*/
    height: 112.5px;
    /*border: 2px solid green;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


.service-sec2main3-content2 {
    width: 100%;
    /*height: 52vh;*/
    height: 260px;
    /*border: 1px solid orange;*/
    display: flex;
    flex-direction: row;
}


.service-sec2main3-title-img {
    width: 25px;
    height: 10px;
    margin-left: 15px;
    z-index: 1;
    /*border: 2px solid red;*/
/*    border: 2px solid yellow;*/
}



.service-sec2main3 {
    width: 100%;
    /*height: 94vh;*/
    height: 410px;
    /*border: 2px solid red;*/
    margin-top: 130px;
}



.service1-sec2-img {
    width: 100%;
    height: 740px;
    /*border: 2px solid black;*/
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service1-sec2-img img {
    width: 130%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-10%);
    /*border: 2px solid black;*/
}










    
    
}


/*media 920px ends here*/









/*media 870px to adjust start here*/

@media (max-width: 870px) {
    
.service-sec2main3-content {
    width: 86%;
    /*height: 67vh;*/
    height: 340px;
    /*border: 2px solid yellow;*/
    margin-top: -70px;
}
    
    
.service-sec2main3 {
    width: 100%;
    /*height: 94vh;*/
    height: 390px;
    /*border: 2px solid red;*/
    margin-top: 130px;
}
    
    
    
.service1-sec2-img img {
    width: 137%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-10%);
    /*border: 2px solid black;*/
}
    
    
    
    
}


/*media 870px to adjust end here*/






/*media starts here*/

@media (max-width: 600px) {
    
    
    
/*media whatsapp copy here*/
    
     .whatsapp-container {
            bottom: 15px;
            right: 10px;
        }
    
    .whatsapp-button {
            width: 65px;
            height: 65px;
        }
    
     .circular-text {
            position: absolute;
            width: 85%;
            height: 85%;
        }
    
    .circular-text svg {
            font-size: 2.8vw;
        }
    
     .whatsapp-button span{
            font-size: 7vw;
        }
    
    
/*copy until here*/
    
    
    
             
             
        .filter-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /*.project-grid {*/
                /*grid-template-columns: repeat(2, 1fr);*/
                /*2 columns on small screens and up */
        /*    }*/
             
        .project-grid {
            grid-template-columns: 1fr; /*Stack columns on small screens */
        }
        
        /* .project-grid {*/
        /*    display: grid;*/
        /*    grid-template-columns: 1fr;*/
             /*1 column by default */
            /*gap: 1.5rem;   */
             /*gap-6 */
        /*}*/
             
        .project-card-content h3 {
            font-size: 5vw;
            text-decoration: none;
            
        }

        .project-card-content p {
            font-weight: 400;
            font-size: 3vw;
        }
             
        .filter-button {
            font-size: 4.5vw;
            width: 100%;
            margin: 0.5rem 0;
            /*color: red;*/
        }
        
        
        .filter-button:hover {
            background-color: #f2c864; /* hover:bg-blue-500 */
            color: white;         /* hover:text-white */
            font-size: 4.5vw;
        }
        .filter-button.active {
            background-color: #f2c864; /* bg-blue-500 */
            color: white;         /* text-white */
            font-size: 4.5vw;
        }
             
            
        /*.project-card img {*/
        /*    object-fit: cover;*/
            /*width: 433px;*/
            /*height: 238px;*/
        /*    width: 505px;*/
        /*    height: 277px;*/
            /*border: 2px solid red;*/
        /*}*/
        
        
         .project-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            /*border: 2px solid red;*/
        }
             
             

/*intro of project showcasing*/
    
    
.service-sec2main3 {
    width: 100%;
    /*height: 80vh;*/
    height: 600px;
    margin-bottom: 0px;
    margin-top: 0px;
    /*border: 2px solid blue;*/
}
    

    
.service1-sec2-img {
    width: 730px;
    height: 379px;
    /*border: 2px solid red;*/
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
}

.service1-sec2-img img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-8%);
    /*transform: translateX(-18%);*/
}


.service-sec2main3-content {
    width: 86%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

.service-sec2main3-content1 {
    width: 100%;
    /*height: 15vh;*/
    /*height: 112.5px;*/
    height: auto;
    margin-bottom: 10px;
    /*border: 2px solid green;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.service-sec2main3-content2 {
    width: 100%;
    /*height: 55vh;*/
    height: 412.5px;
/*    border: 1px solid aqua;*/
    display: flex;
    flex-direction: column;
}

/*title what we do*/

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

.service-sec2main3-content1 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 6.5vw;
    color: #0b4251;
/*
    margin-top: 5px;
    border: 2px solid red;
*/
}

.service-sec2main3-content1 p{
    font-weight: 400;
    font-size: 2.6vw;
    color: #bdccd0;
    letter-spacing: 1px;
}

    
    

/*selection to our services    big selection here*/

.service-sec2main3-content22 {
    width: 100%;
    height: 47%;
    /*border: 2px solid orange;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.service-sec2main3-content222 {
    width: 85%;
    height: 95%;
/*    border: 2px solid cyan;*/
}

.service-sec2main3-content222 p {
    font-weight: 400;
    font-size: 3vw;
    color: #0b4251;
}




/*the one image rectangle*/


.service-sec2main3-content-img {
    width: 100%;
    height: 53%;
/*    border: 2px solid orange;*/
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
/*    overflow: hidden;*/
/*    display: none;*/
}
    
    
    
    
    
    
    
    
    
/*project-lorry start here*/


.project-connect {
    width: 100%;
    /*height: 45vh;*/
    /*height: 337.5px;*/
    height: 290px;
    /*border: 2px solid red;*/
}

.project-connect1 {
    width: 920px;
    height: 297px;
/*    background-color: royalblue;*/
/*    border: 2px solid aqua;*/
}
 
        
/*lorry start here*/

    
.project-lorry {
    width: 559px;
    height: 258px;
/*    background-color: royalblue;*/
/*    border: 2px solid yellow;*/
    /*margin-left: -260px;*/
    margin-left: -200px;
}

.project-connect3 {
    width: 86px;
    height: 86px;
    margin-right: 70px;
    margin-bottom: 10px;
}

.project-connect4 {
    width: 86px;
    height: 86px;
    margin-left: 108px;
    margin-bottom: 9px;
}
   
   
    
    
    
    
    
    
    
    
    
    
             
             
             
             
             
             
}


/*media 600px ends here*/






@media (max-width: 545px){
    
    
/*whatsapp again*/
    
    
.circular-text svg {
            font-size: 3.2vw;
        }
    
.whatsapp-button span {
            font-size: 7vw;
            /*color: red;*/
        }
    
    
    
    
    
    
}





@media (max-width: 495px){
    
    
/*whatsapp again*/
    
    
.circular-text svg {
            font-size: 3.5vw;
        }
    
.whatsapp-button span {
            font-size: 8vw;
            /*color: red;*/
        }
    
    
    
    
    
    
}





@media (max-width: 445px){
    
    
/*whatsapp again*/
    
    
.circular-text svg {
            font-size: 4vw;
        }
    
.whatsapp-button span {
            font-size: 9vw;
            /*color: red;*/
        }
    
    
    
    
    
    
}











/*media start here*/

@media (max-width: 428px) {
    
    
/*media whatsapp copy here*/
    
     .whatsapp-container {
            bottom: 15px;
            right: 10px;
        }
    
    .whatsapp-button {
            width: 65px;
            height: 65px;
        }
    
     .circular-text {
            position: absolute;
            width: 85%;
            height: 85%;
        }
    
    .circular-text svg {
            font-size: 4.2vw;
        }
    
     .whatsapp-button span{
            font-size: 10vw;
        }
    
    
/*copy until here*/





/*428px project all start below here*/


   .filter-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
             
        /*.project-grid {*/
        /*    grid-template-columns: 1fr;*/
            /* Stack columns on small screens */
        /*}*/
             
        .project-card-content h3 {
            font-size: 5.5vw;
            text-decoration: none;
            /*color: yellow;*/
        }

        .project-card-content p {
            font-weight: 400;
            font-size: 3.2vw;
            /*color: aqua;*/
        }
             
        .filter-button {
            font-size: 5.5vw;
            width: 100%;
            margin: 0.5rem 0;
            /*color: red;*/
        }
        
        
        .filter-button:hover {
            background-color: #f2c864; /* hover:bg-blue-500 */
            color: white;         /* hover:text-white */
            font-size: 5.5vw;
        }
        
        .filter-button.active {
            background-color: #f2c864; /* bg-blue-500 */
            color: white;         /* text-white */
            font-size: 5.5vw;
        }
             
            
        /*.project-card img {*/
        /*    object-fit: cover;*/
        /*    width: 433px;*/
        /*    height: 238px;*/
            /*border: 2px solid red;*/
        /*}*/
        
        
         .project-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            /*border: 2px solid red;*/
        }
             
             

/*intro of project showcasing*/
    
    
.service-sec2main3 {
    width: 100%;
    /*height: 80vh;*/
    height: 530px;
    margin-bottom: 0px;
    /*border: 2px solid blue;*/
}
    
    
.service1-sec2-img {
    width: 730px;
    height: 379px;
    /*border: 2px solid red;*/
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
}

.service1-sec2-img img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*transform: translateX(-8%);*/
    transform: translateX(-18%);
}


.service-sec2main3-content {
    width: 86%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

.service-sec2main3-content1 {
    width: 100%;
    /*height: 15vh;*/
    /*height: 112.5px;*/
    height: auto;
    margin-bottom: 10px;
    margin-top: 15px;
    /*border: 2px solid green;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.service-sec2main3-content2 {
    width: 100%;
    /*height: 55vh;*/
    height: 412.5px;
    /*border: 1px solid aqua;*/
    display: flex;
    flex-direction: column;
}

/*title what we do*/

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

.service-sec2main3-content1 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 7vw;
    color: #0b4251;

    /*border: 2px solid red;*/

}

.service-sec2main3-content1 p{
    font-weight: 400;
    font-size: 3vw;
    color: #bdccd0;
    letter-spacing: 1px;
    /*border: 2px solid red;*/
}

    
    

/*selection to our services    big selection here*/

.service-sec2main3-content22 {
    width: 100%;
    height: 47%;
    /*border: 2px solid orange;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.service-sec2main3-content222 {
    width: 85%;
    height: 95%;
/*    border: 2px solid cyan;*/
}

.service-sec2main3-content222 p {
    font-weight: 400;
    font-size: 3.2vw;
    color: #0b4251;
    /*border: 2px solid aqua;*/
}




/*the one image rectangle*/


.service-sec2main3-content-img {
    width: 100%;
    height: 53%;
/*    border: 2px solid orange;*/
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
/*    overflow: hidden;*/
/*    display: none;*/
}
    
    
    
    
    
    
    
    
    
/*project-lorry start here*/


.project-connect {
    width: 100%;
    /*height: 45vh;*/
    /*height: 337.5px;*/
    height: 280px;
    /*border: 2px solid red;*/
}

.project-connect1 {
    width: 920px;
    height: 297px;
/*    background-color: royalblue;*/
/*    border: 2px solid aqua;*/
}
 
        
/*lorry start here*/

    
.project-lorry {
    width: 559px;
    height: 258px;
/*    background-color: royalblue;*/
/*    border: 2px solid yellow;*/
    margin-left: -260px;
    /*margin-left: -200px;*/
}

.project-connect3 {
    width: 86px;
    height: 86px;
    margin-right: 70px;
    margin-bottom: 10px;
}

.project-connect4 {
    width: 86px;
    height: 86px;
    margin-left: 108px;
    margin-bottom: 9px;
}
   
   
 




    
    
}


/*media 428px ends here*/







/*media desktop start here*/

@media (min-width: 1600px){
    
    
    .circular-text svg {
            font-size: 0.9vw !important;
            /*color: red;*/
            /*border: 2px solid red;*/
        }
    
    .whatsapp-button span {
            font-size: 2.6vw !important;
            /*color: aqua;*/
        }


.service-sec2main3 {
    width: 100%;
    height: 121vh !important;
    /*border: 2px solid blue;*/
}


/*.project-card img {*/
/*            object-fit: cover;*/
/*            width: 551px;*/
/*            height: 303px;*/
            /*border: 2px solid blue;*/
/*        }*/
        
     /*.project-card img {*/
     /*       width: 100%;*/
     /*       height: auto;*/
     /*       object-fit: cover;*/
     /*       display: block;*/
            /*border: 2px solid red;*/
     /*   }*/





/*project lorry start here*/

.project-lorry {
    width: 945px;
    height: 436px;
    /*border: 2px solid yellow;*/
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    margin-left: -220px;
}

.project-connect2 {
    width: 100%;
    height: 100%;
    /*background-color: aquamarine;*/
}

.project-connect3 {
    width: 130px;
    height: 130px;
/*    background-color: royalblue;*/
/*    border: 2px solid blue;*/
    position: absolute;
    right: 0;
    margin-right: 120px;
    margin-bottom: 22px;
    animation: rotate 0.6s linear infinite;
}

.project-connect4 {
    width: 130px;
    height: 130px;
/*    background-color: royalblue;*/
/*    border: 2px solid red;*/
    position: absolute;
    left: 0;
    margin-left: 164px;
    margin-bottom: 23px;
    animation: rotate 0.6s linear infinite;
}






/*lorry move*/


.project-lorry {
    transition: 1.25s;
/*    transition-delay: 0.5s;*/
}

.project-lorry {
    transform: translateX(-78%);
}

.show-animate .project-lorry {
    transform: translateX(0);
}


    
    


}

/*media desktop ends here*/





@media (min-width: 1500px) and (min-height: 864px) and (max-width: 1599px){
    
    
.service-sec2main3 {
    width: 100%;
    height: 95vh;
    /*border: 2px solid aqua;*/
}

 
 
    
    
    
    
}



/*media 1500px end here*/








/*media gaming laptop start here*/

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

.circular-text svg {
            font-size: 1.1vw;
        }
    
     .whatsapp-button span{
            font-size: 3.5vw;
            /*color: red;*/
        }



.service-sec2main3 {
    width: 100%;
    height: 84vh;
    /*border: 2px solid blue;*/
}



/*.project-card img {*/
/*            object-fit: cover;*/
/*            width: 454px;*/
/*            height: 250px;*/
            /*border: 2px solid blue;*/
/*        }*/


 .project-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            /*border: 2px solid red;*/
        }



    
    
    
    
}


/*media gaming laptop end here*/