@font-face {
            font-family: 'Rockia';
            src: url('https://res.cloudinary.com/dmyeqw7of/raw/upload/v1736999331/rockia.regular_o5eqdb.otf') format('opentype');
        }
@font-face {
    font-family: 'Slogan';
    src: url('https://res.cloudinary.com/dmyeqw7of/raw/upload/v1739335976/manbow.clear-regular_xxatsx.otf') format('opentype');
}
:root{
  --font-small: calc(1vw + 1vh + 1px);
}
/* General Reset */

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }

    body {
      width:100vw;
      height:100vh;
      padding:10px 5px;
      font-family: 'Raleway', sans-serif;

      overflow-x: hidden;

    }
body::-webkit-scrollbar {
  width: 5px;
}
 
body::-webkit-scrollbar-track {
  background: #ddd;
}
 
body::-webkit-scrollbar-thumb {
  background: #666; 
}

    header {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(11px);

      display: flex;

      justify-content: space-between;

      align-items: center;

      z-index: 10;

      height: 80px;

      padding: 15px 30px;

      transition: height 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;

      opacity: 1;

    }

    header.hidden {

      opacity: 0;

    }

    .logo-container {

      display: flex;

      align-items: center;

    }

    .header-logo {

      height: 80px;

      transition: height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;

      opacity: 0; /* Hidden on preload */

    }

    header.scrolled .header-logo {

      opacity: 1; /* Show when scrolling down */

    }

    .header-buttons {

      display: flex;
      wrap:no-wrap;

      gap: 2px;

    }

    .btn-header {
      width:clamp(100px,140px,150px);
      padding: 8px 10px;

      border: 1.5px solid rgba(212, 50, 17,1);

      color: rgba(212, 50, 17,1);

      background: transparent;

      border-radius: 4px;

      font-size: 14px;

      font-weight: light;

      text-transform: uppercase;

      cursor: pointer;

      transition: background-color 0.3s ease, color 0.3s ease;

    }

    .btn-header:hover {

      background-color: rgba(212, 50, 17,1);

      color: #ffffff;

    }

     .hero-container {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: 10px;
            margin-top:100px;
            padding:5px;
            transition: all 0.3s ease-in-out;
        }

     .hero-box {
            flex: 1 1 400px; /* Adjust width dynamically, ensuring responsiveness */
            
            
            height: auto;
            background: linear-gradient(135deg, #D43211, #0A1420);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction:column;
            color: white;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
.hero-box:first-child{
  background: url("https://res.cloudinary.com/dmyeqw7of/image/upload/v1737189815/1737189259277_on6lmz.png") #F6F5EF no-repeat right bottom / 150px auto;
  justify-content: flex-start;
  align-items: flex-start;
  
}

    .content-logo {

     

      margin: 120px auto 50px;

      text-align: center;

      transition: transform 0.3s ease, opacity 0.3s ease;

    }

    .content-logo img {

      width: 50%;

    }

    .content-logo.hidden {

      transform: scale(0.8);

      opacity: 0;

    }

    section {

      padding: 80px 20px;
      

      font-size: 18px;

      line-height: 1.6;

      text-align: center;

      opacity: 0;

      transform: translateY(50px);

      transition: opacity 0.6s ease, transform 0.6s ease;

    }

    

    section.active[data-direction="bottom"] {

      transform: translateY(0);

      opacity: 1;

    }

    section.active[data-direction="left"] {

      transform: translateX(0);

      opacity: 1;

    }

    section.active[data-direction="right"] {

      transform: translateX(0);

      opacity: 1;

    }

    section[data-direction="left"] {

      transform: translateX(-50px);

    }

    section[data-direction="right"] {

      transform: translateX(50px);

    }

    section:nth-child(even) {

      background-color: #f9f9f9;

    }

    footer {
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 15px 10px;

      text-align: center;

      background-color: rgba(10,20,32,1);

      color: #fff;

      font-size: var(--font-small);

    }


/* AWAS LOGO SECTION */
.logo-container {
  display: flex;
 
  user-select:none;
  align-items: flex-start;
  gap: clamp(5px, 1vw, 10px);
  width: 100%;
  background-color: transparent;
  justify-content: flex-start;
  padding:5px 20px;
  
}
.logo-container:nth-child(1){
  opacity:1;
}
.logo-slogan{
  font-family: 'Slogan', sans-serif;
  font-size:calc(1vw + 0.7vh);
  font-weight:100;
  margin:20px 0 0 25px;
  color: rgba(10, 20, 32, 1);
  
}




/* Logo */
.logo-svg svg {
           height: calc(15vw + 1rem);
        }

        #right-side {
            stroke-dasharray:1550;
  stroke-dashoffset: 1550;
            animation: drawRight 2s ease-out forwards;
            fill: transparent;
            stroke-width:1;
        }

        @keyframes drawRight {
            0% {
   stroke:rgba(10, 20, 32, 1);
    stroke-width: 0.9;
    stroke-dasharray: 1550;
    stroke-dashoffset: 800;
    fill: rgba(10, 20, 32,0);
  }
  75% {
    stroke:rgba(10, 20, 32, 0.4);
    stroke-dashoffset: 0; 
    stroke-width: 0.75;
    fill: rgba(10, 20, 32,0.1);
  }
 
  100% {
    stroke:rgba(10, 20, 32, 1);
     stroke-width: 0.7;
    stroke-dashoffset: 0;
    
    fill: rgba(5, 5, 5,1);
  }
        }

        #compass {
            transform-origin: center;
            transform-box: fill-box;
            animation: rotateCompass 1.5s ease-in-out 1 both ;
            animation-delay: 0.81s;
            transform-style: preserve-3d;
            fill: transparent;
            stroke-width:1;
            
            
        }
        #compass .st1{
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
                animation: fillCompass 2s ease-in-out 1 both ;
        }

        @keyframes fillCompass {
            0% {
                stroke-dashoffset: 777;
                stroke-dasharray: 1040;
                fill: transparent;
                stroke: rgba(212, 50, 17,1);
            }
          70% {
                
                fill:  rgba(212, 50, 17,0);
                stroke: rgba(10, 20, 38,0.2);
            }
            100% {
                
                stroke-dasharray: 0;
                stroke-dashoffset:0;
                fill: rgba(212, 50, 17,1);
                stroke: rgba(10, 20, 32, 0);                    
            }
        }

        #left-side {
            opacity: 0;
            animation: revealLeft 0.8s ease-out forwards;
            animation-delay: 0.7s;
        }

        @keyframes revealLeft {
            0% {
                opacity: 0;
                transform: translateX(-20px);
                filter: blur(1px);
            }
            70% {
                opacity: 1;
                transform: translateX(4px);
                filter: blur(0.2px);
            }
          100% {
                opacity: 1;
                transform: translateX(0);
                filter: blur(0);
            }
        }

.logo-svg {
  flex:1;
  cursor: pointer;
}



/* Text Container */
.text-container {
  flex:1;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(5px, 1vw, 10px);
  margin-left: 0.2rem;
  margin-top: calc(1vw + 2vh);
  width: 100%;
  justify-content: center;
  
}

@media screen and (max-width: 600px) {
  .text-container {
    align-items: flex-start;
    margin-left: 0;
    
  }
  .awas-svg-text {
   font-size: clamp(180px, calc(20vw + 20vh + 1px), 220px);
    
  }
 
  .logo-svg svg{
    height: calc(16vw + 3rem);
  }
  .company-text{
    
    margin-left: 0px;
        
    font-size: clamp(16px, calc(1vh + 1vw + 1px) , 2rem);
    
/*     font-size: clamp(calc(1vw + 1vh + 0.1rem), 4vw, 3rem); */
  
    
  
  }
  .stats-container {

                gap: 5px; /* Reduce gap for small screens */

            }

            .stat-number {

                font-size: clamp(1.4rem, 6vw, 1.8rem); /* Adjust font size */

            }

            .stat-label {

                font-size: clamp(0.8rem, 4vw, 1rem); /* Smaller label text */

            }
  
 
}




/* AWAS SVG Text */
.awas-svg {
  
 
  margin: 0 0 -10px 0; 
 
}

.awas-svg-text {
  font-family: 'Rockia', sans-serif;
  font-size: clamp(200px, 220px, 240px);
  
  
/*   stroke-dasharray: 1580;
  stroke-dashoffset: 1580;  */
  animation: strokeToFill 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.awas-reset{
  fill: none;
  stroke: #333;
  stroke-width: 0.9;
  stroke-dasharray: 1580;
  stroke-dashoffset: 1580; 
}

@keyframes strokeToFill {
  0% {
   stroke:rgba(51,51,51,0.7);
    stroke-width: 0.5;
    stroke-dashoffset: 1580;
    stroke-dasharray: 1580;
    
    fill: rgba(51,51,51,0);
  }
 
  75% {
    stroke:rgba(51,51,51,0.7);
    stroke-dashoffset: 0;
    
    
    fill: rgba(51,51,51,0.7);
  }
  
  100% {
     stroke-width: 0.5;
    stroke:rgba(51,51,51,0.7);
    
    
    
    fill: rgba(212, 50, 17,1);
  }
}




.company-text{
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase; 
/*     font-size: clamp(16px, 5vw, 37px); */
  font-size: clamp(calc(1vw + 1vh + 1px), 4vw, 30px);
  

  
    font-weight:500;
    color: #333;
    letter-spacing: 0.1em;
    line-height: 0.7; /* Adjusted for tighter spacing */
    margin: 5px 0 0 14px; /* Reduced margin for compact spacing */
    opacity: 0;
    text-align: left;

    animation: slide-in-elliptic-bottom-fwd 1.1s cubic-bezier(0.3, 1.2, 0.3, 1) 1s forwards;
}
.engineering-text{
  letter-spacing: 0.15em;
  animation-delay: 0.8s;
}
@keyframes slide-in-elliptic-bottom-fwd {
          0% {
            -webkit-transform: translateY(100px) rotateX(20deg) scale(0.8);
                    transform: translateY(100px) rotateX(20deg) scale(0.8);
            -webkit-transform-origin: 50% 100%;
                    transform-origin: 50% 100%;
            opacity: 0;
          }
          100% {
            -webkit-transform: translateY(0) rotateX(0) scale(1);
                    transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% -1400px;
      transform-origin: 50% -1400px;
            opacity: 1;
  }
}
/* Video Section */
.video-section {
    width:90%;
    padding: 20px 20px 120px;
   }

.video-container video {
    width: 100%;
    height: auto;
    
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}

 /* End of AWAS Logo */


/* HERO BOX -  Right column */
.flex-image-container{
  display: flex;

    justify-content: space-between;

    width:100%;
    height:100%;

    background-color:rgba(0,0,0,0.3) ;
     backdrop-filter: blur(5px);

    border: 1px solid #ddd;

    border-radius: inherit; /* Rounded corners for the container */

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Subtle shadow */

    padding: 15px; /* Inner spacing for the container */

    gap: 10px; /* Space between columns */

    box-sizing: border-box;

}

.left-column {

    flex: 1; /* Equal space with right column */

    display: flex;

    flex-direction: column;

    gap: 10px; /* Space between grids */

}

.left-top {

    flex: 3; /* 30% height */

    background-color: white;

    border: 1px solid #ccc;

    border-radius: 10px; /* Rounded corners */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.left-bottom {

    flex: 7; /* 70% height */

    background-color: white;

    border: 1px solid #ccc;

    border-radius: 10px; /* Rounded corners */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

/* Right Column */

.right-column {

    flex: 1; /* Equal space with left column */

    display: flex;

    flex-direction: column;

    gap: 10px; /* Space between grids */

}

.right-top,

.right-bottom {

     /* Equal heights (50% each) */

    background-color: white;

    border: 1px solid #ccc;

    border-radius: 10px; /* Rounded corners */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.slider-container {
            position: relative;
            width:auto;
            height:240px;
            overflow: hidden;
            user-select:none;
            border-radius:inherit;
        }
        .image-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .before-image {
            position: absolute;
            width: 40%;
            height: 100%;
            overflow: hidden;
          object-fit: contain;
        }
        .slider {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 40%;
            width: 3px;
            background: #ffffff;
            cursor: ew-resize;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .slider:hover {
            background: #dedede;
        }
        .slider-btn {
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            backdrop-filter: blur(3px);
            cursor: pointer;
        }
        .slider-btn:active {
            cursor: grabbing;
        }
      .comp-arrow{
        color:rgba(10,20,32,1);
      }
        
     

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/* Mobile Design: Fix Two Columns */

@media (max-width: 768px) {

    .flex-container {

        flex-direction: row; /* Keep two-column layout */

        flex-wrap: wrap; /* Allow grids to wrap neatly */

        gap: 10px;
    }
}

/* Stats Sec */
.stats-body{
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:5vw;

            
  
}

.stats-wrapper {

            display: flex;

            justify-content: center;

            align-items: center;

            width: 98%;

            
            

            padding: 20px;

            background-color: #ffffff;

            border-radius: 10px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

            overflow: hidden; /* Prevents any scroll */

            box-sizing: border-box;

        }

        .stats-container {

            display: flex;

            justify-content: space-between;

            width: 100%;
            

            gap: 10px;

            flex-wrap: no-wrap; /* Allows wrapping in smaller screens */

            box-sizing: border-box;

        }

        .stat-box {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            flex: 1 1 33% ; /* Ensures flexible columns */

            min-width: 33.33%;

            padding: 5px;

            box-sizing: border-box;

        }

        .stat-number {

            font-size: clamp(1.5rem, 4vw, 2.2rem);

            font-weight: 600;

            color: #fff;

            position: relative;

            display: flex;

            justify-content: center;

            align-items: center;

            transition: all 0.3s ease-in-out;

        }

        /* 3D effect for the plus sign */

        .plus-sign {

            opacity: 0;

            transform: translateX(-5px) scale(0.8);

            transition: opacity 0.5s ease, transform 0.5s ease;

            font-size: 1.4rem;

            color: rgba(10,20,32,1);

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);

        }

        .stat-label {

            font-size: clamp(0.8rem, 2vw, 1.1rem);

            color: #eaeaea;

            margin-top: 5px;

            font-weight: 500;

            text-align: center;

            line-height: 1.1;

            word-wrap: break-word; /* Allow label to break into multiple lines */

        }

/* Our Service Section */
  .services-wrapper {
            
            width: 100%;
            padding: 20px;
            overflow: hidden;
        }
        .services-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 15px;
            width: 100%;
        }
        .service-card {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            aspect-ratio: 4 / 5;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            color: #fff;
            text-align: left;
            cursor: pointer;
        }
        .service-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.95));
            z-index: 1;
        }
        .service-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            background: transparent;
            -webkit-user-select: none;
            transform: translateY(40%);
            opacity: 0.8;
            transition: transform 0.4s ease-out, opacity 0.4s ease-out;
        }
        .service-card:hover .service-content {
            transform: translateY(0);
            opacity: 1;
        }
        .service-icon {
            font-size: 38px;
            margin-bottom: 5px;
        }
        .service-title {
            font-size: 1.4em;
            font-weight: bold;
            line-height:1.2em;
        }
        .service-description {
            font-family:'Open Sans', sans-serif;
            font-size: 1em;
            text-align: justify;
            width:90%;
            margin-top: 10px;
            line-height:1.1em;
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }
        .service-card:hover .service-description {
            opacity: 1;
        }
        .service-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.service-slogan {
    text-align: center;
    font-size: var(--font-small);
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    padding: 10px;
    position: relative;
}

.service-slogan::before,
.service-slogan::after {
    content: "";
    width: 50px;
    height: 3px;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}


/* End of Service Section */

/*  Testimonials */
.testimonial-wrapper{
  width:100%;
  display:flex;
  justify-content: center;
  align-items: center;
}

.testimonial-section {

            width: 90%;

            max-width: 800px;

            background: #fff;

            padding: 30px;

            border-radius: 12px;

            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);

            text-align: center;

            position: relative;

            overflow: hidden;
            min-height: 350px;

        }

        .testimonial {

            display: none;

            animation: fadeIn 0.8s ease-in-out;

        }

        .testimonial.active {

            display: block;

        }

        .profile-img {

            width: 80px;

            height: 80px;

            border-radius: 50%;

            object-fit: cover;

            margin-bottom: 15px;

        }

        .testimonial p {

            font-size: 16px;

            color: #555;

            margin-bottom: 15px;

        }

        .customer-name {

            font-weight: bold;

            color: #333;

        }

        .customer-title {

            font-size: 14px;

            color: #777;

        }

        /* Navigation Buttons */

        .controls {

            display: flex;

            align-items: center;

            justify-content: space-between;
          bottom: 5px;

            margin-top: 15px;

        }

        .btn-test {

            background: none;
            margin:0;
            padding:6px 12px;
            border: 2px solid #ff6f00;
            color: #ff6f00;
            font-size: 14px;
            cursor: pointer;
            border-radius: 50%;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-test:hover {

            background: #ff6f00;

            color: #fff;

        }

        /* Dots Indicator */

        .dots {

            display: flex;

            gap: 8px;

            justify-content: center;

        }

        .dot {

            width: 12px;

            height: 12px;

            border-radius: 50%;

            border: 2px solid #ff6f00;

            background: transparent;

            cursor: pointer;

            transition: 0.3s;

        }

        .dot.active {

            background: #ff6f00;

        }

        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(10px); }

            to { opacity: 1; transform: translateY(0); }

        }

/*  End of testimonials*/

/*  Footer */
.footer-section{
  display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding: 40px;
            color: white;
            position: relative;
} 
.contact-form {
            flex: 1;
            min-width: 280px;
            max-width: 350px;
            height: auto;
            padding: 20px;
            margin:0 -15px 0 0;
            background: white;
            color: black;
            border-radius: 10px;
            text-align: center;
            filter: grayscale(100%) contrast(1.2);
            position: relative;
            z-index: 1;
        }
        .contact-form h2 {
            font-size: 1.5rem;
        }
        .contact-form input, .contact-form textarea, .contact-form select{
            width: 80%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
      .contact-form select{
        width:86%;
      }
      
        .contact-form label { font-weight: 600; display: block; margin: 10px 0 -3px 25px; text-align:left;}
      
        .contact-form button {
            background: black;
            color: white;
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom:20px;
        }
        .contact-form button:hover { background: #0056b3; }
      
        .info-card {
            flex: 1.7;
            margin:0 0 0 -15px;
            
            padding: 40px;
            background: linear-gradient(135deg, rgba(212, 50, 17,1), #4a0d06);
            border-radius: 10px;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
            position: relative;
            z-index: 1;
        }
         .logos {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }
        .logos img {
            height: 50px;
        }
      .logos img:first-child{
        height:75px;
        filter:invert(1);
      }
        .info-card .slogan {
            text-align: center;
            font-family: 'Slogan', sans-serif;
            font-size:calc(2vw + 1.2vh + 1px);
            font-weight:100;
            margin:15px 0;
            color: #fff;
        }
        .mid-section {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            gap:10px;
        }
      
        .mid-section div {
            
            height: 240px;
            
            border-radius: 10px;
        }
      .mid-section div:first-child{
        flex:1;
        width:140px;
        height:140px;
        
      }
#google-map{
  flex:2;
}
.mid-section div img{
  width:auto;  
  height:inherit;
}
       .map-section {
            flex-grow: 1;
            height: 120px;
        }
        #google-map iframe {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
        .bottom-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 25px;
            
        }
        .bottom-info div {
            display: flex;
            align-items: center;
            gap: 10px;
        }
      .bottom-info a{
        color: #ffffff;
        text-decoration: none;
      }
        .bottom-info-copyright {
            text-align: center;
            margin-top: 25px;
        }
        .material-icons {
            color: white;
        }
      @media screen and (max-width: 600px) {
        .footer-section{
          padding: 20px;
        }
        .contact-form{
          margin:0 0 20px 0;
        }
        .info-card{
          width:98%;
          margin: 0 0 20px 0;
        }
        .logos{
          flex-direction: column;
          gap: 5px;
        } 
        .info-card .slogan{
          font-size:calc(1vw + 1vh + 1px);
        } 
        .mid-section {
                flex-direction: column;
                align-items: center;
            }
        .mid-section div{
          flex:1;
        }
        .bottom-info{
          grid-template-columns: repeat(1, 1fr);
           font-size:calc(1vw + 1vh + 2px);
          text-align:left;
        }
        
      }

/*  End of Footer */

/* Left Top Colmn */
.top-left-container {

      position: relative;

      width: inherit;

      height: 100%;

      background: #4CAF50 center / cover no-repeat;

      background-image: url('https://res.cloudinary.com/dmyeqw7of/image/upload/v1740652442/left_top_bg_ykk25n.jpg');

      color: #ffffff;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: inherit;

      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);

      overflow: hidden;

      cursor: pointer;

      transition: transform 0.4s ease-in-out;

    }

    .top-left-container:active {

      transform: scale(1.02);

    }

    .top-left-overlay {

      position: absolute;

      top: 0;

      left: -100%;

      width: 100%;

      height: 100%;

      background-color: rgba(0, 0, 0, 0.7);

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: inherit;

      transition: transform 0.4s ease-in-out;

    }

    .top-left-container.active .top-left-overlay {

      transform: translateX(100%);

    }

    .top-left-text {
      font-size:clamp(14px, calc(1vw + 1vh + 1px), 18px);
      text-shadow: 0 0 20px rgba(0,0,0,0.8);
      position: relative;

      z-index: 2;

      text-align: center;

      padding: 0 1rem; 

      transform: translateX(0);

      opacity: 1;

      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-in-out;

    }

    .top-left-container.active .top-left-text {

      transform: translateX(-100%);

      opacity: 0;

    }

    .top-left-overlay p {

      font-size: clamp(14px, 15px, 16px);

      

      transform: translateX(-100%);
      text-align: center;
      padding: 0 1rem;

      opacity: 0;

      animation: revealText 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;

    }

    @keyframes revealText {

      0% {

        opacity: 0;

        transform: translateX(-100%);

      }

      100% {

        opacity: 1;

        transform: translateX(0);

      }

    }

/*  Endd of Left top Column*/

/*  Left Bottom Carousel*/
  .carousel {
            position: relative;
            width: inherit;
            height: 100%;
            overflow: hidden;
            border-radius: inherit;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .slides {
            display: flex;
            height: 100%;
            transition: transform 0.6s ease-in-out;
        }
        .slide {
            min-width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }
        .indicator {
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.3s;
            transform: scale(0.7);
            
        }
        .indicator.active {
            background: white;
            transform: scale(1.1);
            transition: scale 0.8s ease-in-out;
        }

/* End of Carousels */