/* font */
/* Thin (weight: 100) */
.raleway-thin {
  font-family: "Raleway", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
a{
  text-decoration: none;
  color: #fff;
}
.buttons a{
  text-decoration: none;
}
a .button3{
  width: 20%;
}

/* Light (weight: 300) */
.raleway-light {
  font-family: "Raleway", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* Regular (weight: 400) */
.raleway-regular {
  font-family: "Raleway", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Bold (weight: 700) */
.raleway-bold {
  font-family: "Raleway", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* Black (weight: 900) */
.raleway-black {
  font-family: "Raleway", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.montserrat-thin {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/* Light (weight: 300) */
.montserrat-light {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* Regular (weight: 400) */
.montserrat-regular {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Bold (weight: 700) */
.montserrat-bold {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* Black (weight: 900) */
.montserrat-black {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.lato-thin {
    font-family: "Lato", serif;
    font-weight: 100;
    font-style: normal;
  }


  .lato-light {
    font-family: "Lato", serif;
    font-weight: 300;
    font-style: normal;
  }

  .lato-regular {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: normal;
  }

  .lato-bold {
    font-family: "Lato", serif;
    font-weight: 700;
    font-style: normal;
  }
  .nav1 img{
    height: 50px;
    width: 80%;
    object-fit: contain;
    
    
    
    }
  .lato-black {
    font-family: "Lato", serif;
    font-weight: 900;
    font-style: normal;
  }

  .lato-thin-italic {
    font-family: "Lato", serif;
    font-weight: 100;
    font-style: italic;
  }

  .lato-light-italic {
    font-family: "Lato", serif;
    font-weight: 300;
    font-style: italic;
  }

  .lato-regular-italic {
    font-family: "Lato", serif;
    font-weight: 400;
    font-style: italic;
  }

  .lato-bold-italic {
    font-family: "Lato", serif;
    font-weight: 700;
    font-style: italic;
  }

  .lato-black-italic {
    font-family: "Lato", serif;
    font-weight: 900;
    font-style: italic;
  }
.container-fluid{
 margin: 0;
 padding: 0;
    width: 100%;
}
.nav1 {
  position: absolute;  /* Overlays main-bg */
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.714); /* Semi-transparent background */
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 10px;
  position: fixed;
  z-index: 10; /* Ensure it nav2 */
}

.white-icon {

    color: rgba(255, 255, 255, 0.894);
    font-size: 35px;


}
.n1{
    align-items: center;
    display: flex;
    justify-content: center;
    width: 10%;
}
.n2{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.n2 h3{
    color: white;
    font-size: 13px;
    padding-left: 10px;
    font-family: "Lato", serif;
    margin: 0; /* Remove default margin */

font-weight: 600;}
.n2 p{
    color: white;
    margin: 0; /* Remove default margin */
    font-family: "Lato", serif;

    font-size: 14px;
    padding-left: 10px;
    padding-top: 0px;
    font-weight: 350;

}
.social {

    color: rgba(255, 255, 255, 0.894);
    font-size: 25px;

}
.n3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 10%;


}
.n4{
    width: 20%;
    display: flex;
    align-items: center;


}
.n4 .boxx{
    color: aliceblue;
    width: 80%;
    height: 40px;
    background-color: transparent; /* Transparent background */
    border: 1px solid white; /* White border */
    box-sizing: border-box; /* Ensures border doesn't affect width/height */
    border-top-left-radius: 10px; /* Top-left corner rounded */
    border-bottom-right-radius: 10px; /* Bottom-right corner rounded */
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

}

.n4 .boxx p{
    font-family: "Lato", serif;
    font-size: 17px;
    margin: 0; /* Remove default paragraph margin */



}
/* @media (max-width: 768px) {
  .nav1{display: none;}
} */
.main-bg {
  background-image: url('img/bg.jpg');
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 130px; /* Add padding to avoid nav2 overlapping main content */
}

.mainsec {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligns content to the left */
  justify-content: center; /* Vertically center content */
  padding-left: 5%; /* Adjust this for the desired left padding */
  padding-top: 2%; /* ✅ Adjust this value for desired top spacing */

  height: 100%; /* Take full height of the parent (.main-bg) */
}

.mainsec h1 {
  color: white; /* Text color for better visibility */
  font-size: 60px;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
  font-family: "Lato", serif;
}

.mainsec p {
  color: white;
  font-size: 20px;
  margin-top: 15px;
  font-family: "Lato", serif;
  font-weight: 500;

}

.n5 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
/* for style other nav txt */
.btn3{
  color: rgb(202, 174, 48);
  font-family: "Lato", serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  text-decoration: none;
}
.menu-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}

/* Dropdown Toggle with Arrow */
.menu-item .dropdown-toggle {
  color: rgb(202, 174, 48);
  font-family: "Lato", serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  user-select: none;
  position: relative;
}


/* Add the arrow using pseudo-element */
.menu-item .dropdown-toggle::after {
  content: "▼"; /* Down arrow */
  font-size: 5px; /* Adjust size as needed */
  margin-left: 5px;
  transition: transform 0.3s ease-out;
}

/* Rotate the arrow when active */
.menu-item .dropdown-toggle.active::after {
  transform: rotate(270deg);
}
/* Dropdown Menu */
.menu-item .dropdown {
  display: none;
  position: absolute;
  top: 100%; /* Appears directly below the text */
  left: 0;
  background-color: #000000;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  z-index: 100;
  min-width: 150px;
}

.menu-item .dropdown p {
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #555;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item .dropdown p:hover {
  background-color: #555;
}

/* Show dropdown on hover */
.menu-item:hover .dropdown,
.menu-item .dropdown:hover {
  display: block;
}

/* Styles for nested dropdowns in desktop view */
.menu-item .dropdown .dropdown {
  display: none; /* initially hidden */
  position: absolute;
  left: 100%; /* Position to the right of the parent dropdown */
  top: 0;
  background-color: #000; /* Match the parent dropdown background */
  min-width: 150px; /* Ensure consistent width */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
  z-index: 101; /* Ensure it stacks on top */
}
/* Show dropdown on hover and ensure nested dropdowns are positioned correctly */
.menu-item:hover .dropdown,
.menu-item .dropdown:hover,
.menu-item .dropdown .dropdown-item:hover .dropdown {
  display: block;
}

/* Positioning for nested dropdown */
.menu-item .dropdown .dropdown {
  display: none;  /* Keep it hidden by default */
  position: absolute;
  left: 100%; /* Align to the right of the parent dropdown */
  top: 0;
  background-color: #000; /* Match the parent dropdown background */
  min-width: 150px; /* Consistent width */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
}
/* Adjusting dropdown visibility for nested items */
.menu-item.active .dropdown {
  display: block; /* Only display when parent menu item is active */
}

/* Submenu items inside nested dropdowns */
.menu-item .dropdown .dropdown p {
  padding-left: 20px; /* Indent submenu items for clear hierarchy */
}


.button5 {
  position: relative;
  display: inline-block;
  padding: 12px 25px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(45deg, #5b5b5b, #5a5a5a);
  background-size: 200% auto;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
  animation: gradientShift 3s infinite linear;
  text-decoration: none;
}

/* Gradient animation keyframes */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Scale effect on hover */
.button5:hover {
  transform: scale(1.05);
}

/* Optional shine overlay effect */
.button5::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
  opacity: 0;
  transition: all 0.5s ease;
}

.button5:hover::before {
  opacity: 1;
  left: 100%;
}



.button4 {
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 12px 25px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(45deg, #ffd900, #9e841c);
  background-size: 200% auto;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
  animation: gradientShift 3s infinite linear;

}

/* Gradient animation keyframes */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Scale effect on hover */
.button4:hover {
  transform: scale(1.05);
}

/* Optional shine overlay effect */
.button4::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
  opacity: 0;
  transition: all 0.5s ease;
}

.button4:hover::before {
  opacity: 1;
  left: 100%;
}

.buttons {
  display: flex;
  flex-direction: row;
  https://meet.google.com/yhx-pcuz-ukv



}
/* 📱 Responsive Buttons for Mobile View */
@media (max-width: 768px) {
  .button4 {
    padding: 8px 15x;       /* Smaller padding */
    font-size: 14px;         /* Smaller font size */
  }
  .button5 {
    padding: 8px 15x;       /* Smaller padding */
    font-size: 14px;         /* Smaller font size */
  }


}

.container-fluid, .row {
  padding: 0;
  margin: 0;
}

.about{
  background-color: #ffffff;
  padding: 20px;
  margin-top: 30px;

}
.about .h3{
  font-size: 40px;
  background: linear-gradient(90deg, #000000, #060606, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 45px;
  font-family: "Raleway", serif;
  font-weight: 600;

}
.about p {
  font-size: 16px;
  font-family: "Montserrat", serif;
  line-height: 1.9;       /* Adds line spacing */
  text-align: left;    /* Aligns both the start and end of the text */
}
.iti{
  width: 100%;
}

@media (max-width: 768px) {
  .about {
    display:flex ;
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .about{
    display: flex;
    flex-direction: column;
  }
  .about .h3 {
    font-size: 26px; /* Example for mobile font size */
  }
  .about p {
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
  }
  .about img{margin-top: 30px;}
}

.black{

    background-color: #000;
    height: auto;
    width: 100%;
    padding: 35px;
    margin-top: 30px;
    margin-bottom: 30px;

  }
.cost2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.cost1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;


}
.cost1 h3{
  font-size: 40px;
  background: linear-gradient(90deg, #ffffff, #ffffff, #514f4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 45px;
  font-family: "Raleway", serif;
  font-weight: 600;

}
.cost1 p {
  font-size: 16px;
  color: white;
  font-family: "Montserrat", serif;
  line-height: 1.9;       /* Adds line spacing */
  text-align: start;    /* Aligns both the start and end of the text */
}

@media (max-width: 767px) {
  .cost1 h3 {
    font-size: 26px; /* Example for mobile font size */
  }
  .cost1 p {
    font-size: 15px;
    line-height: 1.9;
    text-align: start;
  }

}
 .black img{
      height: auto;
      width: 400px;
  padding-left: 10%;
 } 

.black .button4{
width: 170px;
}
  .button3 {
    position: relative;
    display: inline-block;
    padding: 12px 25px;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(45deg, #daa002c8, #ffcd03);
    background-size: 200% auto;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease;
    animation: gradientShift 3s infinite linear;
    width: 180px;



  }


  /* Gradient animation keyframes */
  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  /* Scale effect on hover */
  .button3:hover {
    transform: scale(1.05);
  }

  /* Optional shine overlay effect */
  .button3::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.5s ease;
  }

  .button3:hover::before {
    opacity: 1;
    left: 100%;
  }


      /* Container for the entire section */
      .company-formation-section {
        width: 100%;
        padding: 40px;
        background-color: #000; /* Example background color */
      }

      /* Heading styles */
      .company-formation-section h2 {
        font-size: 45px;
        background: linear-gradient(90deg, #ffffff, #ffffff, #514f4f);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        font-family: "Raleway", serif;
        font-weight: 600;
        text-align: center;
        margin-bottom: 20px;
      }

      /* Paragraph styles */
      .company-formation-section p {
        font-size: 16px;
        color: white;
        font-family: "Montserrat", serif;
        line-height: 1.9;
        text-align: justify;
        margin: 0 auto 20px auto;
        max-width: 800px; /* optional max width */
      }

      /* Steps container */
      .steps-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* center all steps horizontally */
        gap: 30px; /* spacing between steps */
        max-width: 1000px;
        margin: 0 auto;
      }

      /* Individual step wrapper */
      .step-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 140px; /* adjust as needed */
      }

      /* Circle for step number */
      .step-circle {
        width: 60px;
        height: 60px;
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: bold;
        margin-bottom: 10px;
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      /* Hover effect for circle */
      .step-circle:hover {
        background-color: #ebb801;
        color: #fff; /* keeps the text visible on hover */
        cursor: pointer;
      }

      /* Step description */
      .step-box p {
        font-size: 16px;
        color: #fff;
        font-family: "Montserrat", serif;
        text-align: center;
        line-height: 1.4;
        margin: 0;
      }
      .step-box h5{
        font-size: 20px;
        color: #fff;
        font-family: "Montserrat", serif;
        text-align: center;
        line-height: 1.4;
        margin: 0;
      }

      /* Responsive styles (mobile view) */
      @media (max-width: 767px) {
        .company-formation-section h1 {
          font-size: 26px; /* as requested */
        }

        .company-formation-section p {
          font-size: 15px; /* as requested */
          line-height: 1.9;
          text-align: justify;
        }

        .steps-container {
          flex-direction: column;
          align-items: center;
        }

        .step-box {
          width: 100%;
          max-width: 300px;
        }
      }


.white{
  background-color: white;
  width: 100%;
height: auto;
padding: 10px;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.box h3 {
  background: linear-gradient(90deg, #000000, #5b5b5b, #010101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 35px;
  font-family: "Raleway", serif;
  font-weight: 700;
  transition: color 0.3s ease;
}
.box p {
  font-size: 16px;
  color: rgb(0, 0, 0);
  font-family: "Montserrat", serif;
  line-height: 1.5;       /* Adds line spacing */
  text-align: center;     /* Aligns both the start and end of the text */
  transition: color 0.3s ease;
}

@media (max-width: 767px) {
  .box h3 {
    font-size: 26px; /* Example for mobile font size */
  }
  .box p {
    font-size: 15px;
    line-height: 1.9;
    text-align: center;
  }
}

/* Original Box Backgrounds */
.box1 {
  width: 100%;
  height: 400px;
  background-color: #f5f5f5;
  transition: background-color 0.3s ease;
}
.box2 {
  width: 100%;
  height: 400px;
  background-color: #f4f4f4;
  transition: background-color 0.3s ease;
}
.box3 {
  width: 100%;
  height: 400px;
  background-color: #dcdcdc;
  transition: background-color 0.3s ease;
}

.boxes {
  display: flex;
  flex-direction: row;
}
/* Responsive styles (mobile view) */
@media (max-width: 767px) {
  .boxes {
    gap: 20px;
  }
}

/* Hover Effects for all boxes */
.box:hover {
  background-color: #000; /* Change background to black */
}
.box:hover h3 {
  background: none; /* Remove gradient */
  background: linear-gradient(90deg, #bb7e1d, #ffd900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.box:hover p {
  color: #fff; /* White sub text on hover */
}
.box:hover h5 {
  color: #fff; /* White sub text on hover */
}
.service-section{
  padding: 20px;
  margin-bottom: 0px;
 background-color: #f0f0f0;
  text-align: center;

}
.service-section h2{

  background: linear-gradient(90deg, #000000, #5b5b5b, #010101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 35px;
  font-family: "Raleway", serif;
  font-weight: 700;
  transition: color 0.3s ease;
  padding-top: 30px;
}


.underline-full {

  width: 95%; /* Full width */
  height: 0.5px; /* Thickness of the underline */
  background-color: #00000041; /* Color of the underline */
  margin-bottom: 30px;
  margin-top: 30px; /* Space between the text and the underline */
}

.boxs-sec {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;


}
.boxs-sec .b1{


  background-color: #ffffff;
  height: 210px;
  width: 95%;
  margin: 30px auto;
  border-radius: 10px;
  display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 40px;
gap: 15px;
text-align: center;
transition: all 0.3s ease; /* Smooth transition for hover effects */
box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Optional: adds initial subtle shadow */
}

.boxs-sec .b1:hover {
  background: linear-gradient(45deg, #eaeaea, #9b9b9b); /* Gold gradient on hover */  box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Increased shadow for depth */
  transform: translateY(-5px); /* Slightly raise the box */
}
.b1 i{
  font-size: 50px;
}
.b1 p{
  padding-left: 10px;
  color: rgb(0, 0, 0);
  font-family: "Montserrat", serif;
  line-height: 1.5;       /* Adds line spacing */
  transition: color 0.3s ease;

}
@media (max-width: 767px) {
  .boxs-sec {
gap: 30px;  }
}
.contents{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  background-color: #ffffff;
  padding: 30px;
}
.c1{
  padding-right: 50px;
}
.c1 h3{
  background: linear-gradient(90deg, #000000, #000000, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 45px;
  font-family: "Raleway", serif;
  font-weight: 600;

}
.c1 p{
  font-size: 16px;
  color: rgb(0, 0, 0);
  font-family: "Montserrat", serif;
  line-height: 1.9;       /* Adds line spacing */
  text-align: start;
}
@media (max-width: 767px) {
  .c1 h3 {
    font-size: 26px; /* Example for mobile font size */
  }
  .c1 p {
    font-size: 15px;
    line-height: 1.9;
    text-align: start;
  }
}
.c1{
  padding-right: 50px;
}
.c3 h3{
  background: linear-gradient(90deg, #000000, #000000, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 45px;
  font-family: "Raleway", serif;
  font-weight: 600;

}
.c3 p{
  font-size: 16px;
  color: rgb(0, 0, 0);
  font-family: "Montserrat", serif;
  line-height: 1.9;       /* Adds line spacing */
  text-align: start;
}

.c3{
  padding-left: 50px;
}
@media (max-width: 767px) {
  .c3 h3 {
    font-size: 26px; /* Example for mobile font size */
    padding-top: 30px;
  }
  .c3 p {
    font-size: 15px;
    line-height: 1.9;
    text-align: start;
  }
  .c2 img{
    padding-top: 30px;
  }
  .c3{
    padding-left: 0%;
  }

}







.details-section{
  display: flex;
  flex-direction: row;
  padding: 30px;
  flex-wrap: wrap;
  margin-top: 40px;

}
.details-section img{
  height: 400px;


}
.sec-2 h3{
  font-size: 40px;
  background: linear-gradient(90deg, #000000, #000000, #514f4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 45px;
  font-family: "Raleway", serif;
  font-weight: 600;
}
.sec-2 p{
  font-size: 16px;
  color: rgb(0, 0, 0);
  font-family: "Montserrat", serif;
  line-height: 1.9;       /* Adds line spacing */
  text-align: start;
}
@media (max-width: 767px) {
  .sec-2 h3 {
    font-size: 26px; /* Example for mobile font size */
    padding-top: 30px;
  }
  .sec-2 p {
    font-size: 15px;
    line-height: 1.9;
    text-align: start;
  }
}

.testimonialCarousel .carousel-control-prev-icon,
.testimonialCarousel .carousel-control-next-icon {
  background-color: #000; /* Adjust the color to match your brand */
  border-radius: 50%;
  padding: 10px;
}

.blockquote {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #555;
  position: relative;
}

.blockquote::before,
.blockquote::after {
  font-family: "Arial", sans-serif;
  font-size: 3rem;
  position: absolute;
  color: #ccc;
}


.blockquote-footer {
  font-size: 0.85rem;
  color: #666;
}

.blockquote-footer cite {
  font-weight: bold;
}

.carousel-item {
  transition: transform 2s ease, opacity 2s ease; /* Smooth transition for carousel items */
}

.rounded-circle {
  border: 3px solid #fff; /* Add a border around the client photos */
  box-shadow: 0 0 10px #0003; /* Optional: Add a subtle shadow for depth */
}

.cc h2{
  background: linear-gradient(90deg, #000000, #000000, #010101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 35px;
  font-family: "Raleway", serif;
  font-weight: 700;
  transition: color 0.3s ease;
}
.contact-for{
  margin-top: 20px;
}
@media (max-width: 767px) {
  .cc h2 {
    font-size: 26px; /* Example for mobile font size */
    padding-top: 30px;
  }
}


.faq-section, .enquiry-section {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.faq-question {
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  display: none;
  padding: 10px;
  border-top: 1px solid #ccc;
  color: #666;
}

.faq-item:not(:last-child) {
  margin-bottom: 10px;
}

.arrow {
  transition: transform 0.3s ease;
}

.faq-question.collapsed .arrow {
  transform: rotate(-180deg);
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


.faq-section h2{
  background: linear-gradient(90deg, #000000, #000000, #010101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 35px;
  font-family: "Raleway", serif;
  font-weight: 700;
  transition: color 0.3s ease;
}
@media (max-width: 767px) {
  .cc h2 {
    font-size: 26px; /* Example for mobile font size */
    padding-top: 30px;
  }
}

ul {
  margin: 0px;
  padding: 0px;
}
.footer-section {
background: #151414;
position: relative;
margin-top: 40px;
}
.footer-cta {
border-bottom: 1px solid #373636;
}
.single-cta i {
color:   #b9a03f;
font-size: 30px;
float: left;
margin-top: 8px;
}
.cta-text {
padding-left: 15px;
display: inline-block;
}
.cta-text h4 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 2px;
}
.cta-text span {
color: #757575;
font-size: 15px;
}
.footer-content {
position: relative;
z-index: 2;
}
.footer-pattern img {
position: absolute;
top: 0;
left: 0;
height: 330px;
background-size: cover;
background-position: 100% 100%;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo img {
  max-width: 150px;
}
.footer-text p {
margin-bottom: 14px;
font-size: 14px;
    color: #7e7e7e;
line-height: 28px;
}
.footer-social-icon span {
color: #fff;
display: block;
font-size: 20px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
}
.footer-social-icon a {
color: #fff;
font-size: 16px;
margin-right: 15px;
}
.footer-social-icon i {
height: 40px;
width: 40px;
text-align: center;
line-height: 38px;
border-radius: 50%;
}
.facebook-bg{
background: #3B5998;
}
.twitter-bg{
background: #55ACEE;
}
.google-bg{
background:   #b9a03f;
}
.footer-widget-heading h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
position: relative;
}
.footer-widget-heading h3::before {
content: "";
position: absolute;
left: 0;
bottom: -15px;
height: 2px;
width: 50px;
background:   #b9a03f;
}
.footer-widget ul li {
display: inline-block;
float: left;
width: 50%;
margin-bottom: 12px;
}
.footer-widget ul li a:hover{
color:  #b9a03f;
}
.footer-widget ul li a {
color: #878787;
text-transform: capitalize;
}
.subscribe-form {
position: relative;
overflow: hidden;
}
.subscribe-form input {
width: 100%;
padding: 14px 28px;
background: #2E2E2E;
border: 1px solid #2E2E2E;
color: #fff;
}
.subscribe-form button {
  position: absolute;
  right: 0;
  background:  #b9a03f;
  padding: 13px 20px;
  border: 1px solid  #b9a03f;
  top: 0;
}
.subscribe-form button i {
color: #fff;
font-size: 22px;
transform: rotate(-6deg);
}
.copyright-area{
background: #202020;
padding: 25px 0;
}
.copyright-text p {
margin: 0;
font-size: 14px;
color: #878787;
}
.copyright-text p a{
color:  #b9a03f;
}
.footer-menu li {
display: inline-block;
margin-left: 20px;
}
.footer-menu li:hover a{
color: #b9a03f;
}
.footer-menu li a {
font-size: 14px;
color: #878787;
}


.con-bg {
  width: 100%;
  height: 50vh;
  background-size: cover; /* Cover the entire area */
  background-position: center; /* Center the image within the area */
  background-repeat: no-repeat; /* Do not repeat the image */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.con-bg .h2{
color: white;
font-family: "Lato", serif;
font-weight: 600;
font-size: 50px;
padding-top: 100px;
}


.con-bg {
  background-image: url('img/cont.jpg');
  width: 100%;
  height: 70vh;
  background-size: cover; /* Cover the entire area */
  background-position: center; /* Center the image within the area */
  background-repeat: no-repeat; /* Do not repeat the image */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.con-bg .h2{
color: white;
font-family: "Lato", serif;
font-weight: 600;
font-size: 50px;
padding-top: 100px;
}

.detailss {
  background-image: url(img/contact2.png);
  background-size: cover; /* Covers the entire area, might crop the image */
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
  background-color: #000;
  display: flex;
  flex-direction: row;
  padding: 20px;
}
.detailss h4 {
  color: #fff;
  font-family: "Lato", serif;

  font-size: 20px;
  margin-bottom: 5px;
}

.detailss p {
  font-family: "Lato", serif;

  margin: 5px 0;
  color: white;
}

.social-icons a {
  color: #fff;
  margin-right: 10px;
  font-size: 20px;
}

.info-block {
  margin-bottom: 20px;
}
.detailss .info-block i {
  color: #a89e0d; /* Change the color according to your design */
  margin-right: 10px;
  font-size: 20px; /* Adjust the size as needed */
}

.social-icons a {
  color: #e2e2e2; /* This should match your theme's colors */
  font-size: 24px; /* Adjust the size as needed */
  margin: 0 5px; /* Space between icons */
}

.social-icons {
  margin-top: 20px; /* Space above the social icons */
}
.maps{
  padding-top: 20px;
}

@media (max-width: 767px) {
  .con-bg .h2 {
    font-size: 26px; /* Adjusts font size for mobile devices */
    padding-top: 30px; /* Adds space above the text for better layout on mobile */
  }
  .con-bg{
    height: 30vh;

  }
  .con-bg .h2{
    padding-top: 100px;

  }
  .maps{
    padding-top: 20px;
  }


}
.con-bg P{
  color: white;
  text-decoration: none;
}
.con-bg a {
  text-decoration: none; /* Removes the underline */
  color: #ffffff; /* Changes the color to black, or choose any hex color you prefer */
}
.ccc{
  padding: 30px;
}
.write-review-btn {
  background-color: rgba(180, 153, 4, 0.71);
  color: rgb(255, 255, 255);
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.write-review-btn:hover {
  background-color: darkgoldenrod;
  color: white;
}
.formabt{
  padding: 30px;
  padding-top:30px
}

@media (max-width: 767px) {
  .ccc{
padding: 0;  }
.formabt{
  padding: 30px;
}
}

.blog-section{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}
.blogs-card {
  display: flex;
  flex-direction: column;
padding: 18px;
  width: calc(100% - 20px); /* Adjusting width to account for margins */
  background-color: #f3f3f3;
  height: auto;
  margin: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Adds subtle shadow */
}
.blogs-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Bolder shadow on hover */
  transform: translateY(-2px); /* Slightly raises the card */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}
.blogs-card img{
   width: 100%;
   height: 230px;
   object-fit:cover;
   padding-bottom:15px;
}
.blogs-card h3{
  font-size: 20px;
  background: linear-gradient(90deg, #000000, #000000, #514f4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-family: "Lato", serif;
  font-weight: 600;



}
.blogs-card p{
  font-size: 15px;
  color: #333;
  font-family: "Lato", serif;


}
.read-more-btn {
  background-color: rgb(21, 21, 21);       /* Golden background */
  color: rgb(255, 255, 255);                 /* Text color */
  border: none;                 /* Removes the default border */
  padding: 10px 20px;           /* Padding around the text */
  font-weight: bold;            /* Makes the font bold */
  border-radius: 5px;           /* Rounded corners */
  transition: all 0.3s ease;    /* Smooth transition for hover effects */
  cursor: pointer;              /* Changes the cursor to a pointer */
}

.read-more-btn:hover {
  background-color: rgb(209, 186, 36); /* Darker shade of gold for hover effect */
  color: white;                    /* Change text color on hover */
}
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
margin-top: 15px;
}

.page-item {
  margin: 0 5px;
}

.page-link {
  display: block;
  padding: 5px 10px;
  background-color: #000000;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.page-link:hover {
  background-color: #000000;
  color: white;
}

.page-item.disabled .page-link {
  background-color: #ccc;
  pointer-events: none;
}
.page-item.active .page-link {
  background-color: #ffffff; /* Change to any color you prefer, example gold */
  color: black; /* Adjust text color if necessary */
  border-color: #000000;
}

.page-item.active .page-link:hover {
  background-color: #f9de8d; /* Slightly darker shade of gold for hover */
}
.calc{
  padding-top: 30px;
  display: flex;
  flex-direction: row;
}
.calc .sec-11{
  width: 100%;
  height: 400px;
  background-color: #020202;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.calc .sec-22{
  width: 100%;
  height: auto;
  background-color: #dddddd;
  border-radius: 8px;

}
.sec-11 h3{
  background: linear-gradient(90deg, #e7e7e7, #a4a4a4, #393737);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 35px;
  font-family: "Raleway", serif;
  font-weight: 600;
}

.sec-11 p{
  font-size: 16px;
  color: rgb(255, 255, 255);
  font-family: "Montserrat", serif;
  line-height: 1.9;       /* Adds line spacing */
  text-align: start;
}
  .calculator-container {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .calculator-container label {
      display: block;
      font-weight: bold;
      margin: 2px 0 5px;
      text-align: left;
    }

    .calculator-container input,
    .calculator-container select {
      width: 100%;
      padding: 12px;
      margin-bottom: 12px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background: #fff;
      box-sizing: border-box;
    }

    .button3 {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        background: #e5c303;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 10px;


    }
   .button3 a{
        text-decoration:none;
    }

    .button3:hover {
        background: #ae9400;
    }

    .output {
      margin-top: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .a9 {
      padding-top: 10px;
    }

    .dropdown-content {
      background: #f8f9fa;
      padding: 15px;
      margin-top: 10px;
      border-radius: 5px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      display: none;
    }

    .required {
        color: red;
        font-weight: bold;
    }
    /* Change the track (background) color of the range slider */
    .calculator-container input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 5px;
        background: #000000; /* Yellow */
        border-radius: 5px;
        outline: none;
        opacity: 0.9;
        transition: opacity .15s ease-in-out;
    }

    /* Change the thumb (circle) color */
    .calculator-container input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: #ffcd03; /* Yellow */
        border-radius: 50%;
        cursor: pointer;
    }

    /* For Firefox */
    .calculator-container input[type="range"]::-moz-range-thumb {
        background: #31312f; /* Yellow */
    }

    /* For Microsoft Edge */
    .calculator-container input[type="range"]::-ms-thumb {
        background: #ffcd03; /* Yellow */
    }
@media (max-width: 767px) {
  .sec-11 h3 {
    font-size: 26px; /* Example for mobile font size */
  }
  .sec-11 p {
    font-size: 15px;
    line-height: 1.9;
    text-align: start;
  }
}
.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.form-container {
  height: auto;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-container label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.form-container input,
.form-container select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-container button {
  padding: 10px 30px;
  border: none;
  border-radius: 4px;
  background-color: #f1c40f;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  margin-bottom: 8px;
}

.form-container button:hover {
  background-color: #e1b307;
}

.btn-secondary {
  background-color: #002366;
  color: #fff;
}
.radio-group {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: normal;
  margin: 0;
}

.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .radio-group {
    flex-direction: column;
    align-items: flex-start;
  }
}
.form-row {
  display: flex;
  gap: 20px;
}


.thank-you {
  text-align: center;
}
.main-bgrd {
  background-image: url('img/main-bg.jpg');
  width: 100%;
  height: auto; /* Default height */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  padding-top: 90px; /* Push content below fixed navbar */
  padding-bottom: 150px;
}

.bar1 {
  width: 100%;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  border-bottom: 0.5px solid #ffffff67;
  position: fixed;
  top: 0;               /* explicitly add top positioning */
  left: 0;              /* explicitly add left positioning */
  z-index: 9999 !important;    /* force highest priority */
  transition: background-color 0.3s ease-in-out;
}
.bar1 .bartext{
  width: 65%;
  justify-content: space-between;
  text-align: center;
  align-items: center;
display: flex;
flex-direction: row;
color: white;
font-weight: 300;

}
.bartext p{
    font-family: "Lato", serif;
}

.bar1 img{
width: 120px;
height: 12vh;

}

/* Initially hide the dropdown with opacity */
/* Initially hidden dropdown */
.dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: visibility 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* When hovering over dropdown parent */
.dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.bartext p:active,
.bartext .dropdown-toggle:active,
.bartext .dropdown-item:active {
  color: inherit !important;
  background-color: inherit !important;
}

.navbar-btnn {
  width: 15%;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px 18px;
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  border-radius: 25px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.3s ease-in-out;
  margin-left: auto;
  height: fit-content;
  align-self: center;
  position: relative;
  overflow: hidden;
  animation: fadeInBounce 0.8s ease-in-out;
}

/* Hover Effect - Glowing and Scaling */
.navbar-btnn:hover {
  background-color: #ffffff;
  color: #000000;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* Click Animation - Shrinks slightly */
.navbar-btnn:active {
  transform: scale(0.95);
}

/* Button Entry Animation */
@keyframes fadeInBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse Animation (Optional) - Pulses every 4s */
@keyframes pulseEffect {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}

/* Apply Pulse Effect */
.navbar-btnn {
  animation: fadeInBounce 0.8s ease-in-out, pulseEffect 4s infinite ease-in-out;
}

.sectn1{
  padding: 30px;
  display: flex;
  flex-direction: column;
  
}
.sectn1 .p2 {
  font-family: "Lato", serif;
width: 170px;
  font-size: 10px;
  color: white;
  padding: 8px 15px; /* Adjust spacing inside the border */
  border: 1px solid white; /* White border */
  border-radius: 25px; /* Rounded edges */
  background-color: #00000067;
  display: inline-block; /* Ensures the border wraps around the text */
}
.sectn1 h1{
  padding-top: 30px;
  color: white;  
  font-family: "Inter", sans-serif;
  font-size: 65px;
  font-weight: 620;
  /* Animation */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMove 1.5s ease-in-out forwards;

}
.sectn1 h2{
  color: white;  
  font-family: "Inter", sans-serif;
  font-size: 65px;
  font-weight: 620;

  /* Animation */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMove 1.5s ease-in-out forwards;
}
#animated-text-container {
  display: inline-block;
  width: 150px; /* Fixed width to prevent shifting */
  text-align: center;
}

#animated-text {
  color: gold;
  font-family: "Inter", sans-serif;
  font-size: 65px;
  font-weight: 620;
  display: inline-block;
  width: 100%;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Smooth fade-out effect */
.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

/* Smooth fade-in effect */
.fade-in {
  opacity: 1;
  transform: translateY(0);
}
/* Moves "UAE" to the right */
#uae-text {
  display: inline-block;
  margin-left: 120px; /* Adjust this value to push it further */
  font-size: 65px;
  font-weight: 620;
  color: white;
}
.sectn1 .h5 { 
  color: white;
  font-size: 15px;
  font-family: "Inter", sans-serif;
  font-weight: 200;
  line-height: 1.6; /* Adjusts line spacing */
  letter-spacing: 1px; /* Adds space between letters */
  word-spacing: 2px; /* Adds space between words */

  /* Animation */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMove 1.5s ease-in-out forwards;
}

/* Keyframes for smooth fade-in and slight movement */
@keyframes fadeInMove {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animated-btn {
  padding: 12px 24px;
  width: 180px;
  margin-top: 20px;
  background-color: transparent;
  border: 2px solid white;
  color: white;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* Hover Effect: Fill Background */
.animated-btn:hover {
  background-color: white;
  color: black;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Click Effect: Slight Shrink */
.animated-btn:active {
  transform: scale(0.95);
}

/* Animation for Entry */
.animated-btn {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMove 1.5s ease-in-out forwards;
}

@keyframes fadeInMove {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.stats-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #00000000; /* Dark background */
  padding: 20px 0px; /* Reduced padding */
  border-radius: 10px;
  text-align: left; /* Align text to the left */
  color: white;
  max-width: 50%; /* Ensures it fits within the container */
}

.stats-box {
  flex: 1;
  text-align: left; /* Aligns text left */
}

.stats-box h2 {
  font-size: 32px; /* Reduced size to fit */
  font-weight: 700;
  margin-bottom: 5px;
}

.stats-box p {
  font-size: 14px; /* Smaller text */
  color: #c0c0c0;
  margin: 0;
}

/* Divider Line */
.divider {
  width: 1px; /* Thinner line */
  height: 50px; /* Adjust height */
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 15px; /* Reduce space */
}

/* Number Styling */
.number {
  font-size: 36px; /* Reduced size */
  font-weight: 700;
  color: white;
}

/* Colors for Highlights */
.highlight-blue {
  color: #48cae4;
}

.highlight-orange {
  color: #ff8800;
}

.highlight-pink {
  color: #ff6699;
}

/* Responsive Design */
@media (max-width: 768px) {
  .stats-section {
    flex-direction: column;
    gap: 15px;
    max-width: 100%;
    padding: 10px 0;
  }

  .divider {
    display: none; /* Hide dividers on mobile */
  }

  .stats-box h2 {
    font-size: 28px;
  }

  .stats-box p {
    font-size: 12px;
  }

}
.sectn2 img {
  max-width: 100%; /* Ensures image does not exceed container width */
  height: auto;
  width: 400px; /* Default width */
  padding-top: 60px;
  display: block;
  margin: 0 auto; /* Centers image */
}
.sectn2 {
  position: relative; /* Container to position elements absolutely */
  overflow: hidden; 
}

.sectn2 .main-image {
  max-width: 100%;
  height: auto;
  width: 400px;
  padding-top: 60px;
  display: block;
  margin: 0 auto;
}

.sectn2 .corner-img {
  position: absolute;
  width: 180px;
  height: auto;
  transition: transform 0.3s ease-out;
}

/* Slightly adjust position initially */
.sectn2 .top-left {
  top: 80px; /* slightly lower */
  left: 20px;
}

.sectn2 .bottom-right {
  bottom: 30px; /* slightly higher */
  right: 20px;
}
.sectn2 .corner-img.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Fix for Smaller Screens */
@media (max-width: 768px) {
  .sectn2 img {
    width: auto; /* Make it responsive for smaller screens */
    padding-top: 45px;
  }
}
/* Adjust background height for mobile */
@media (max-width: 992px) {
  .main-bgrd {
    height: auto; /* Allow content to define height */
    padding-bottom: 80px;
  }
}

/* Responsive Navbar (Hide Desktop Navbar & Adjust Mobile Layout) */
@media (max-width: 768px) {
  .bar1 {
    display: none; /* Hide desktop navbar */
  }
  .black img{
    padding: 0;
    margin-top: 15px;
  }
}

/* Section Alignment for Mobile */
@media (max-width: 768px) {
  .sectn1 {
    text-align: center;
    align-items: center;
  }

  .sectn1 h1, .sectn1 h2 {
    font-size: 40px; /* Reduce size for smaller screens */
  }

  .sectn1 .p2 {
    font-size: 12px;
    width: auto;
    padding: 6px 12px;
  }

  .h5 {
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    width: 90%;
  }

  .animated-btn {
    width: 100%;
    padding: 10px;
  }

  .stats-section {
    display: none;
    /* flex-direction: column;
    gap: 15px;
    max-width: 100%; */
  }

  .divider {
    display: none; /* Hide dividers on mobile */
  }

  .stats-box h2 {
    font-size: 24px;
  }

  .stats-box p {
    font-size: 12px;
  }

  /* Ensure animated text stays centered */
  #animated-text-container {
    width: auto;
  }

  #uae-text {
    margin-left: 0;
  }
}

/* Adjust Image for Mobile */
@media (max-width: 768px) {
  .sectn2 {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }

  .sectn2 img {
    width: 80%; /* Reduce image size */
    max-width: 300px;
  }
  
}

#whatsapp-icon{
  position:absolute;
  left:0;
  height:50px;
  width:50px;
  bottom:0;
  cursor:pointer;

}
.chat-content{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  flex-direction:column;
}
.chat-content a{
  color:white;
  text-decoration:none;
  font-size:11px;
}
.chat-content-2{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-evenly;
  flex-direction:row;
}
.whatsapp-icon-2{
  width:20px;
  height:20px;

}
.chat-span{
  color:white;
}
.need-help{
width:220px;
height:50px;
display:flex;
align-items:center;
flex-direction:column;
justify-content:space-evenly;
border-radius:5px;
background-color:black;
color:white;

}
.need-help span{
font-size:12px;
}
.fixed-social-medias{
  position: fixed;
  display: flex;
  left:10px;
  bottom:10px;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
  height: 50px;
  width: 330px;
  z-index:1000;
}
.fixed-social-medias img{
  height: 50px;
  width: 50px;
}
.popup {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
z-index: 1;
left:50px;
bottom:50px;
width:250px;
height:100px;
background-color: #2DB742;
border-radius:5px;
}
@media (min-width:320px) and (max-width:480px){
    .fixed-social-medias{
    z-index:10;
  }
}