@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;
  }
}


* {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.index-main-project {
     background-color: #0b4251;
}

.index-main-feedback {
    margin-bottom: 60px;
}

.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*/









/*animation start here*/


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

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

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



/*hinz renovation start here*/

.sec2main3-content22 {
    transition: 2s;
    transition-delay: 2s;
}

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

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


/*weikeen comment*/


.sec3-about11-container11-text {
    transition: 2s;
    transition-delay: 6s;
}

.sec3-about11-container11-text {
    transform: translateX(20%);
    opacity: 0;
}

.show-animate .sec3-about11-container11-text {
    transform: translateX(0);
    opacity: 1;
}



/*the yellow box*/


.sec2main3-content-img1 {
    transition: opacity 1s ease, transform 0.6s ease;
    transition-delay: 3s;
}

.sec2main3-content-img1 {
    transform: scale(0.6);
    opacity: 0;
}

.show-animate .sec2main3-content-img1 {
    transform: scale(1);
    opacity: 1;
}

/*the lines and text here*/


.sec3-about2-mission1-line {
    transition: 0.8s;
    transition-delay: 8s;
}

.sec3-about2-mission1-line {
    transform: translateX(20%);
    opacity: 0;
}

.show-animate .sec3-about2-mission1-line {
    transform: translateX(0);
    opacity: 1;
}


.sec3-about2-vision1-line {
    transition: 0.8s;
    transition-delay: 8s;
}

.sec3-about2-vision1-line {
    transform: translateX(20%);
    opacity: 0;
}

.show-animate .sec3-about2-vision1-line {
    transform: translateX(0);
    opacity: 1;
}

/*mission*/

.sec3-about2-mission2 {
    transition: opacity 1s ease, transform 0.6s ease;
    transition-delay: 8.25s;
}

.sec3-about2-mission2 {
    transform: scale(0.6);
/*    transform: translateX(20%);*/
    opacity: 0;
}

.show-animate .sec3-about2-mission2 {
    transform: scale(1);
/*    transform: translateX(0);*/
    opacity: 1;
}

/*vision*/

.sec3-about2-vision2 {
    transition: opacity 1s ease, transform 0.6s ease;
    transition-delay: 8.25s;
}

.sec3-about2-vision2 {
    transform: scale(0.6);
/*    transform: translateX(20%);*/
    opacity: 0;
}

.show-animate .sec3-about2-vision2 {
    transform: scale(1);
/*    transform: translateX(0);*/
    opacity: 1;
}


/*client feedback*/


.top-testimonials  {
    transition: opacity 1s ease, transform 0.6s ease;
    transition-delay: 1s;
}

.top-testimonials  {
    transform: scale(0.6);
    opacity: 0;
}

.show-animate .top-testimonials  {
    transform: scale(1);
    opacity: 1;
}


.bottom-testimonials  {
    transition: opacity 1s ease, transform 0.6s ease;
    transition-delay: 0.75s;
}

.bottom-testimonials  {
    transform: scale(0.6);
    opacity: 0;
}

.show-animate .bottom-testimonials  {
    transform: scale(1);
    opacity: 1;
}











/*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*/
    
    
}


/*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*/
    
    
}


/*media 920px ends here*/








/*media 600px start 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;
            /*color: red;*/
        }
    
    
/*copy until here*/
    
    
}


/*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 (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*/
    
    
    
}




/*media desktop start here*/

@media (min-width: 1600px){
    
    

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


    
    

    
    
    
    
}

/*media desktop ends here*/





/*media gaming laptop start here*/

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

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



    
    
    
    
}


/*media gaming laptop end here*/