@import url('https://fonts.googleapis.com/css2?family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap');
 html {
   scroll-behavior: smooth;
 }

 body::-webkit-scrollbar {
   display: none;
 }

 body {
   font-family: "Poppins", sans-serif;
   background: #fff;
   color: #222;
   min-height: 100vh;
 }

 ::selection {
   background-color: #ff5622;
   color: white;
 }

 /* Header Css */
 .headerMainDiv {
   background-color: #ff5722;
   display: flex;
   align-items: center;
   height: 100px;
 }

 .marginDiv {
   max-width: 1150px;
   width: 100%;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr var(--middle-column-width, auto) 1fr;
   gap: 10px;
 }

 .headerLinks {
   display: flex;
   align-items: center;
   justify-content: start;
 }

 .headerLinks div {
   display: flex;
   gap: 15px;
   margin-right: 15px;
 }

 .headerLinks a {
   text-decoration: none;
   color: white;
   cursor: pointer;
   transition: all .2s ease;
 }

 .headerLinks a:hover {
   color: #000;
 }

 .headerLogo {
   cursor: pointer;
 }

 .headLogo {
   height: 100px;
   width: 150px;
 }
.headLogoP{
  position: relative;
    top: -35px;
    left: 15px;
    font-size: 22px;
    color: white;
    letter-spacing: 4px;
    font-family: "Vend Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
 .headerButtonContainer {
   display: flex;
   align-items: center;
   justify-content: end;
 }

 button {
   cursor: pointer;
   padding: 0;
   margin: 0;
   border: none;
   background: none;
   cursor: pointer;
 }

 .headerContactButton {
   --primary-color: #ffffff;
   --hovered-color: #000;
   position: relative;
   display: flex;
   font-weight: 600;
   font-size: 20px;
   gap: 0.5rem;
   align-items: center;
 }

 .headerContactButton a {
   text-decoration: none;
   margin: 0;
   position: relative;
   font-size: 20px;
   color: var(--primary-color);
 }

 .headerContactButton::after {
   position: absolute;
   content: "";
   width: 0;
   left: 0;
   bottom: -7px;
   background: var(--hovered-color);
   height: 2px;
   transition: 0.3s ease-out;
 }

 .headerContactButton a::before {
   position: absolute;
   content: "Contact";
   width: 0%;
   inset: 0;
   color: var(--hovered-color);
   overflow: hidden;
   transition: 0.3s ease-out;
 }

 .headerContactButton:hover::after {
   width: 100%;
 }

 .headerContactButton:hover a::before {
   width: 100%;
 }

 .headerContactButton:hover svg {
   transform: translateX(4px);
   color: var(--hovered-color);
 }

 .headerContactButton svg {
   color: var(--primary-color);
   transition: 0.2s;
   position: relative;
   width: 15px;
   transition-delay: 0.2s;
 }

 nav {
   display: flex;
   color: rgb(0, 0, 0);
   padding: 10px 30px;
   align-items: center;
   justify-content: center;
   background-color: #ffffff;
   position: relative;
   height: 45px;
 }

 .nav-div {
   align-content: center;
 }

 nav ul {
   display: flex;
   gap: 30px;
   align-items: center;
 }

 nav ul li {
   list-style-type: none;
 }

 nav ul li a {
   font-size: 18px;
   font-weight: 600;
   text-decoration: none;
   color: #000000;
   padding: 7px 25px;
   transition: all .3s ease-in-out;
 }

 nav ul li a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   height: 4px;
   width: 0%;
   transition: all .3s ease;
 }

 nav ul li a:hover::after {

   width: 100%;
 }

 .menu-icon {
   display: none;
   align-content: end;
 }

 .menu-icon i {
   color: #000000;
   font-size: 25px;
 }

 .headerBottom {
   height: 45px;
 }



 /* section 1 css */
 .backVideo {
   width: 100vw;
   position: absolute;
   z-index: -1;
   top: 100;
   height: 1000px;
 }

 .sec-1 {
   display: flex;
   align-items: center;
   height: 700px;
 }




























 @media (max-aspect-ratio: 16/9) {
   .backVideo {
     width: 100%;
     height: auto;
   }


 }

 @media (max-width: 1024px) {
   .marginDiv {
     max-width: 800px;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }

   .headerLinks {
     position: absolute;
     top: 109px;
     left: 10px;
     z-index: 1;
   }

   .headerLinks a {
     color: #000;
   }

   nav {
     align-items: flex-end;
     justify-content: end;
   }

   nav ul {
     position: absolute;
     top: 45px;
     left: 0;
     right: 0;
     width: 100vw;
     flex-direction: column;
     text-align: center;
     background: #ffffff;
     gap: 0;
     overflow: hidden;
   }

   nav ul li {
     padding: 10px;

   }

   .menu-icon {
     display: block;

   }

   #menuList {
     transition: all 0.5s;
     z-index: 1;
   }
 }


 @media (max-width: 375px) {
   .marginDiv {
     align-items: center;
     justify-content: center;
   }

   .headerMainDiv {
     height: 80px;
   }

   .headLogo {
     width: 150px;
   }

   .headerLinks {
     top: 95px;
   }

   .headerButtonContainer {
     display: none;
   }
 }





 /* Basic Reset */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
 }

 html {
   scroll-behavior: smooth;
 }

 ::selection {
   background-color: #ff5622;
   color: white;
 }

 /* ======= HEADER ======= */
 .headerMainDiv {
   background-color: #ff5722;
   display: flex;
   align-items: center;
   height: 100px;
 }

 .marginDiv {
   max-width: 1150px;
   width: 100%;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .headerLinks {
   display: flex;
   gap: 15px;
 }

 .headerLinks a {
   text-decoration: none;
   color: white;
   transition: all 0.2s ease;
 }

 .headerLinks a:hover {
   color: #000;
 }


 .headerButtonContainer {
   display: flex;
   align-items: center;
   justify-content: end;
 }

 /* Contact Button */
 .headerContactButton {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 18px;
   font-weight: 600;
   color: #fff;
   background: none;
   border: none;
   cursor: pointer;
 }

 .headerContactButton a {
   text-decoration: none;
   color: #fff;
 }

 .headerContactButton:hover a {
   color: #000;
 }

 .headerContactButton svg {
   width: 16px;
   transition: 0.3s;
 }

 .headerContactButton:hover svg {
   transform: translateX(4px);
   color: #000;
 }

 /* ======= NAVBAR ======= */
 nav {
   display: flex;
   justify-content: center;
   align-items: center;
   background: #fff;
   height: 50px;
   position: relative;
 }

 nav ul {
   display: flex;
   gap: 30px;
   list-style: none;
   align-items: center;
 }

 nav ul li a {
   font-size: 18px;
   font-weight: 600;
   text-decoration: none;
   color: #000;
   position: relative;
   transition: 0.3s;
 }

 nav ul li a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -5px;
   width: 0%;
   height: 2px;
   background: #ff5722;
   transition: 0.3s ease;
 }

 nav ul li a:hover::after {
   width: 100%;
 }

 nav ul li a:hover {
   color: #ff5722;
 }

 .menu-icon {
   display: none;
   cursor: pointer;
 }

 .menu-icon i {
   font-size: 25px;
   color: #000;
 }

 /* ======= HERO SECTION ======= */
 .backVideo {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 800px;
   object-fit: cover;
   z-index: -2;
 }

 .sec-1 {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 800px;
   text-align: center;
   color: #fff;
 }

 .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.697);
   z-index: -1;
 }

 .sec-1-headings {
   position: relative;
   z-index: 1;
   padding: 20px;
 }

 .sec-1-headings h2 {
   font-size: 40px;
   color: #ff5722;
   letter-spacing: 2px;
   margin-bottom: 30px;
 }

 .sec-1-headings h3 {
   font-size: 28px;
   font-weight: 400;
   margin-bottom: 20px;
 }

 .sec-1-headings p {
   font-size: 1.2rem;
 }





 /* Floating Button */
.slide-btn {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: black;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 8px 0 0 8px;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Slider that opens upward */
.bottom-slider {
  position: fixed;
  top: calc(50% + 75px);
  right: 0;
  transform: translateY(-50%);
  width: 50px;
  height: 0;
  background: #25D366;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.3s ease;
  z-index: 9998;
}

/* When slider is active */
.bottom-slider.show {
  height: 100px; /* slider height */
}

/* WhatsApp icon */
.whatsapp-link i {
  color: white;
  font-size: 30px;
}


.slide-btn.rotate i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
/* Tooltip container */
.slide-btn {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: black;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 8px 0 0 8px;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* allow tooltip to show outside */
}

/* Tooltip text */
.slide-btn .tooltip {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 180px;
  background: #222; /* dark but modern */
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  position: absolute;
  right: 60px; /* distance from button */
  top: 50%;
  transform: translateY(-50%) translateX(10px); /* start slightly shifted */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10000;
  pointer-events: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Tooltip arrow */
.slide-btn .tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #222; /* arrow pointing to button */
}

/* Show tooltip on hover */
.slide-btn:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) translateX(0); /* slide in smoothly */
}



 /* ======= RESPONSIVE DESIGN ======= */

 /* Tablets */
 @media (max-width: 1024px) {
   .marginDiv {
     flex-wrap: wrap;
   }

   nav ul {
     position: absolute;
     top: 50px;
     left: 0;
     right: 0;
     width: 100%;
     flex-direction: column;
     background: #fff;
     overflow: hidden;
     max-height: 0;
     transition: all 0.5s ease;
   }

   #menuList {
     transition: all 0.5s;
   }

   .menu-icon {
     display: block;
     position: absolute;
     right: 25px;
   }

   .headerLinks {
     display: none;
   }

   .headLogo {
     width: 160px;
   }

   .sec-1-headings h2 {
     font-size: 2.5rem;
   }

   .sec-1-headings h3 {
     font-size: 1.5rem;
   }

   .sec-1-headings p {
     font-size: 1rem;
   }
 }

 /* Mobile */
 @media (max-width: 480px) {
   .headerMainDiv {
     height: 100px;
   }

   .headLogo {
     width: 120px;
     height: auto;

   }
   .headLogoP{
    font-size: 18px;
    top: -30px;
    left: 8px;
   }

   .headerButtonContainer {
     display: none;
   }

   .sec-1-headings h2 {
     font-size: 2rem;
   }

   .sec-1-headings h3 {
     font-size: 1.2rem;
   }

   .sec-1-headings p {
     font-size: 0.9rem;
   }

   .marginDiv {
     align-items: center;
     justify-content: center;
   }
 }

















 .marginDiv2 {

   max-width: 1150px;
   width: 100%;
   margin: auto;
 }

 .affiliation {
   padding: 150px 0;
   text-align: center;

 }

 .affiliation h2 {

   font-size: 50px;
   margin-bottom: 80px;
   color: #ff5722;
 }

 /* --- Slider container --- */
 .slider-container {
   overflow: hidden;
   position: relative;
 }

 .slider {
   display: flex;
   transition: transform 0.6s ease-in-out;
 }

 .slide {
   flex: 0 0 20%;
   /* 5 per view on desktop */
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 2px;
 }

 .slide img {
   cursor: pointer;
   width: 100%;
   max-width: 300px;
   object-fit: contain;
   transition: filter 0.3s ease;
   background: transparent;
   mix-blend-mode: darken;
   filter: brightness(1.1) contrast(1.2);
 }

 /* --- Dots navigation --- */
 .dots {
   display: flex;
   justify-content: center;
   margin-top: 1rem;
 }

 .dot {
   width: 10px;
   height: 10px;
   background: #ccc;
   border-radius: 50%;
   margin: 0 6px;
   cursor: pointer;
   transition: background 0.3s ease;
 }

 .dot.active {
   background: #f15a24;
 }

 .secondSlider {
   background-color: rgba(241, 241, 241, 0.582);
   padding: 100px 0;
 }







 .services {
   padding: 150px 20px;
   background: #000000;
 }

 .section-title {
   text-align: center;
   font-size: 50px;
   margin-bottom: 40px;
   color: #ff5722;
 }

 .container {
   display: flex;
   flex-direction: column;
   gap: 50px;
   align-items: center;
   justify-content: center;
 }

 .services-grid {
   display: grid;
   max-width: 1050px;
   width: 100%;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
 }

 .service-card {
   background: #fff;
   padding: 50px 20px;
   border-radius: 12px;
   height: 250px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
   gap: 20px;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
 }

 .service-card:hover {
   transform: translateY(-10px) scale(1.005);
   box-shadow: 0 0px 1px 5px #ff5722;
 }

 .service-card img {
   width: 100px;
   height: 100px;
   object-fit: contain;
   margin-bottom: 15px;
 }

 .service-card h3 {
   font-size: 20px;
   margin-bottom: 10px;
 }

 .service-card p {
   font-size: 0.95em;
   color: #555;
 }


























 .parallax-section {
   position: relative;
   height: 800px;
   /* Adjust as needed */
   background-image: url('../images/home/dubaiBackground.jpg');
   /* Your background image */
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: #fff;
 }

 .parallax-section .content {
   background: rgba(0, 0, 0, 0.923);
   /* Optional overlay to make text readable */
   padding: 60px 40px;
   border-radius: 10px;
   max-width: 600px;
 }







 .contact-box {
   background-color: #000000;
   padding: 60px 25px;
   border-radius: 10px;
   width: 380px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }

 .contact-box h2 {
   margin-top: 20px;
   margin-bottom: 80px;
   font-size: 30px;
   font-weight: 600;
 }


 .contact-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 25px;
 }

 .contact-item i {
   font-size: 18px;
   margin-right: 12px;
   color: #fff;
   min-width: 20px;
 }

 .contact-item p {
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
 }

 .contact-item a {
   color: #fff;
   text-decoration: none;
 }

 .contact-item a:hover {
   text-decoration: underline;
 }











 .stats-section {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 200px;
   background-color: #ff5722;
   /* Light gray background */
   padding: 80px 20px;
   text-align: center;
 }

 .stat-box h2 {
   font-size: 40px;
   color: #ffffff;
   /* Orange color for numbers */
   margin-bottom: 20px;
   font-weight: 700;
 }

 .stat-box p {
   font-size: 18px;
   color: #ffffff;
   margin: 0;
 }




 .why-choose-us {
   padding: 60px 20px;
   background-color: #f9f9f9;
 }

 .why-choose-us .container {
   max-width: 1200px;
   margin: 0 auto;
 }

 .why-choose-us .section-title {
   font-size: 40px;
   text-align: center;
   margin-bottom: 20px;
 }

 .why-choose-us .intro {
   font-size: 16px;
   text-align: center;
   max-width: 800px;
   color: #555;
 }

 .why-choose-us .features {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 30px;
 }

 .why-choose-us .feature {
   background: white;
   padding: 30px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
 }

 .why-choose-us .feature h3 {
   font-size: 25px;
   margin-bottom: 30px;
   color: #ff5722;
 }

 .why-choose-us .feature ul {
   list-style: disc inside;
   margin: 0;
   padding: 0;
   color: #666;
 }

 .compnyName {
   color: #ff5722;
 }

 .why-choose-us .feature ul li {
   margin-bottom: 30px;
 }




 .site-footer {
   background-color: #ffffff;
   /* dark footer background */
   color: #ff5722;
   padding: 60px 20px 30px;
   font-family: Arial, sans-serif;
 }

 .site-footer a {
   font-size: 16px;
   font-weight: 500;
   color: #000000;
   text-decoration: none;
   transition: all .5s ease;
 }

 .site-footer a:hover {
   color: #ff5722;
 }

 .footer-inner.container {
   max-width: 1200px;
   margin: 0 auto;
 }

 .footer-cols {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
 }

 .footer-col {
   flex: 1 1 200px;
 }

 .footer-col h4 {
   font-size: 25px;
   text-align: start;
   margin-bottom: 25px;
   color: #000000;
 }

 .footer-col ul {
   list-style: none;
   text-align: start;
   padding: 0;
   margin: 0;
 }

 .footer-col ul li {
   margin-bottom: 25px;
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .social-links a {
   display: inline-block;
   color: #ff5722;
   margin-right: 8px;
   font-size: 1.1rem;
   transition: all .3s ease;
 }

 .social-links a:hover {
   transform: translateY(-10px);
 }

 .footer-bottom {
   padding: 25px 0 20px 0;
   width: 100%;
   background-color: #ff5722;
   text-align: center;
   font-size: 0.9rem;
   color: #ffffff;
 }












 /* INDUSTRIES SECTION */
 .industries-section {
   background-color: #fff;
   font-family: 'Poppins', sans-serif;
   padding: 80px 0 0;
   position: relative;
   overflow: hidden;
   margin: 100px 0 100px 0;
 }

 .industries-section::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 180px;
   z-index: 0;
 }

 .container {
   position: relative;
   z-index: 2;
   width: 90%;
   margin: 0 auto;
   text-align: center;
 }

 .section-title {
   color: #f15a24;
   font-size: 50px;
   font-weight: 700;
   margin-bottom: 60px;
 }

 /* GRID */
 .industries-grid {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   gap: 20px;
   flex-wrap: wrap;
 }

 /* CARD */
 .industry-card {
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 100px 100px 0 0;
   width: 240px;
   height: 240px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   transition: all 0.3s ease;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }

 .card-inner {
   text-align: center;
   padding: 0 20px;
 }

 .divider {
   width: 90px;
   height: 3px;
   background-color: #f15a24;
   margin: 0 auto 30px auto;
   border-radius: 2px;
 }

 .industry-card h3 {
   font-size: 16px;
   font-weight: 700;
   color: #000000;
   margin-bottom: 8px;
 }

 .industry-card p {
   font-size: 14px;
   color: #000000;
   line-height: 1.5;
   margin: 0;
 }

 /* Hover Effect */
 .industry-card:hover {
   cursor: pointer;
   transform: translateY(-8px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }

 /* RESPONSIVE */

 @media (max-width: 1024px) {
   .industry-card {
     background-color: #ff5722;


   }

   .social-col h4 {
     text-align: center;

   }

   .divider {
     border-color: #fff;
     background-color: #fff;
   }
 }

 @media (max-width: 992px) {
   .industries-grid {
     gap: 30px;
   }

   .industries-section {
     background-color: white;
   }

   .industry-card {
     width: 45%;
     height: 220px;
   }

 }

 @media (max-width: 576px) {
   .industry-card {
     width: 90%;
     height: 200px;
   }

   .section-title {
     font-size: 26px;
   }
 }




 /* ---------- RESPONSIVE DESIGN ---------- */
 @media (max-width: 480px) {
   .contact-box {
     width: 90%;
     padding: 25px 20px;
   }

   .contact-box h2 {
     font-size: 20px;
   }

   .contact-item i {
     font-size: 16px;
   }

   .contact-item p {
     font-size: 13px;
   }

 }










 /* Responsive adjustments */
 @media (max-width: 768px) {
   .parallax-section {
     height: 700px;
   }

   .parallax-section h2 {
     font-size: 2em;
   }

   .stats-section {
     flex-direction: column;
     gap: 120px;
   }

   .footer-cols {
     flex-direction: column;
     gap: 20px;
   }

   .site-footer {
     padding: 40px 15px 20px;
   }
 }




 /* --- Responsive --- */
 @media (max-width: 900px) {
   .slide {
     flex: 0 0 33.33%;
     /* 3 per view */
   }
 }

 @media (max-width: 600px) {
   .slide {
     flex: 0 0 50%;
     /* 2 per view */
   }

   .why-choose-us .section-title {
     font-size: 2rem;
   }

   .why-choose-us .intro {
     font-size: 1rem;
   }
 }

 @media (max-width: 400px) {
   .slide {
     flex: 0 0 100%;
     /* 1 per view */
   }

   .services {
     padding-left: 10px;
     padding-right: 10px;
   }
 }

 @media (max-width: 320px) {
   .service-card img {
     height: 80px;
     width: 80px;
   }

   .service-card {
     padding-left: 0px;
     padding-right: 0px;
   }

   .services {
     padding-left: 0;
     padding-right: 0;
   }

 }