@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&family=Milonga&family=Monda:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--main-color: #ED4D2C;
  --button-color: #2ced73 ;
 } 
body{
  font-family: "Saira", sans-serif;
  font-size: 16px;
  background-color: #E0F7FF;
	font-weight: 400;
	margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.fa-outline {
    stroke: currentColor;
    stroke-width: 1px;
    fill: none;
  }
  .khand {
    font-family: "Khand", sans-serif;
  }
  .monda {
    font-family: "Monda", sans-serif;
  }
  .condensed {
    font-family: "Saira Semi Condensed", sans-serif;
  }
  .saira {
    font-family: "Saira", sans-serif;
  }
.bg-button{
    background-color:var(--button-color);
  }
.text-button{
    color:var(--button-color);
  }
.p-text{
  color: #4D4D4D;
}
.primary-text{
	color:var(--main-color);
}
.primary-bg{
	background-color:var(--main-color);
}
/* styles.css */

.nav-links a {
  transition: color 0.3s ease;
}

/* .navbar li:hover a {
  color: var(--button-color);
} */

.toggle-button {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.toggle-button .bar {
  width: 25px;
  height: 3px;
  background-color: #000000;
  margin: 4px 0;
  transition: 0.3s;
}

/* Responsive Styles */
@media (max-width: 1023px) {
  .nav-links {
    position: fixed;
    right: -200px;
    top: 0;
    height: 100vh;
    width: 200px;
    background-color: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease;
    overflow-y: scroll;
    z-index: 9;
  }

  /* .nav-links li {
    margin: 20px 0;
  } */

  .toggle-button {
    display: flex;
  }
}
.banner-bg-h{
  height: calc(100% + 220px);
}
.nav-links.active {
  right: 0;
}

.toggle-button.toggle .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-9px, 10px);
}

.toggle-button.toggle .bar:nth-child(2) {
  opacity: 0;
}

.toggle-button.toggle .bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

.navbar a.activemenu {
  color:var(--main-color);
}
.dropdown-menu a.activemenu {
  color:var(--main-color);
  font-weight: 700;
} 
.activemenu {
  color:var(--main-color);
}



/* Dropdown Styles */
/* Base styles for mainlink */
/* Dropdown and icon styling */

.dropdown-toggle .icon-down::before {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.dropdown-toggle .icon-up::before {
  content: "\f0d8";
  font-family: "Font Awesome 5 Free";
  color:var(--main-color);
  font-weight: 900;
}

.dropdown-toggle .icon-up + .mainlink {
  color:var(--main-color);
}

.dropdown-menu.hidden {
  display: none;
}

.dropdown-menu.visible {
  display: block;
}

/* Highlight mainlink when dropdown is open */
.dropdown.open .mainlink {
  color:var(--main-color);
}
.dropdown-menu {
  list-style-type: none;
  padding: 10px 0;
  margin: 0;
  display: none;
  background-color: #333; /* Change this to your desired background color */
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.fs-icon svg path {
  transition: fill 0.9s ease; /* Adjust the duration and easing as desired */
  transition: stroke 0.9s ease; /* Adjust the duration and easing as desired */

}
.fs-icon:hover svg  path{
  fill: #ffffff; /* Change to the desired hover color */
}
.fs-icon:hover.facebook svg  path {
  fill:  none; /* Change to the desired hover color */

}
.fs-icon:hover svg  path{
  stroke: #ffffff; /* Change to the desired hover color */
}



/* banner */

.slider-trackbanner {
	transition: transform 0.5s ease-in-out;
}

/* boxhover */
.box, .box-1 {
  position: relative;
  background-color: #D9D9D9;
  overflow: hidden;
  padding: 20px;
}

.box::before , .box-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:var(--main-color);
  transform: scaleX(0);
  transform-origin: bottom;
  transition: transform 1s ease-in-out;
  z-index: 0;
}

.box:hover::before, .box-1:hover::before{
  transform: scaleX(1);
}

.box div, .box p, .box-1 div, .box-1 p {
  position: relative;
  z-index: 1;
}
      
.box-1{
  background-color:var(--main-color);
}
.box-1::before {
  background-color: #D9D9D9;
}


.hover-overlay {
  transition: transform 0.9s ease-in-out;
}
.hover-overlay:hover {
  transform: translateY(100%);
}


/* circle */
.circle {
  position: relative;
  border-radius: 50%;
}

.segment {
  position: absolute;
  display: flex;
  justify-content: center;
  left: 0px;
  right: 0px;
  margin:0px auto ;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}
.segment img{
  cursor: pointer;

}
/* .segment.active {
  background-color: #ffeb3b;
} */




/* icon */
.segment-icon {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  left: 0px; 
  right: 0px;
  margin: auto;
  top: 0px;
  bottom: 0px;
  transition: transform 0.3s;
  transform-origin: center center;
}

.icon-img {
  max-width: 100%;
  max-height: 100%;
}

.segment-icon.active {
  transform: scale(1.1);
}


.segment:nth-child(1) { transform: rotate(359.99deg) translateX(0px) translateY(0px); }
.segment:nth-child(2) { transform: rotate(32.72deg) translateX(13.4%) translateY(-8%); }
.segment:nth-child(3) { transform: rotate(65.45deg) translateX(22.6%) translateY(-29.1%); }
.segment:nth-child(4) { transform: rotate(98.18deg) translateX(24.8%) translateY(-57.1%); }
.segment:nth-child(5) { transform: rotate(130.91deg) translateX(19%) translateY(-82.8%); }
.segment:nth-child(6) { transform: rotate(163.63deg) translateX(7.2%) translateY(-98%); }
.segment:nth-child(7) { transform: rotate(196.36deg) translateX(-6.8%) translateY(-97.9%); }
.segment:nth-child(8) { transform: rotate(229.09deg) translateX(-18.7%) translateY(-82.7%); }
.segment:nth-child(9) { transform: rotate(261.81deg) translateX(-24.5%) translateY(-57.2%); }
.segment:nth-child(10) { transform: rotate(294.54deg) translateX(-22.6%) translateY(-29.2%); }
.segment:nth-child(11) { transform: rotate(327.27deg) translateX(-13.4%) translateY(-8%); }

@media (min-width: 1536px) {
/* Position icons evenly around the circle */
.segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -410px) rotate(0deg); }
.segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -410px) rotate(-32.73deg); }
.segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -410px) rotate(-65.45deg); }
.segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -410px) rotate(-98.18deg); }
.segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -410px) rotate(-130.91deg); }
.segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -410px) rotate(-163.64deg); }
.segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -410px) rotate(-196.36deg); }
.segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -410px) rotate(-229.09deg); }
.segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -410px) rotate(-261.82deg); }
.segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -410px) rotate(-294.55deg); }
.segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -410px) rotate(-327.27deg); }

}
@media (min-width: 1280px) and (max-width: 1536px) {
  /* Position icons evenly around the circle */
  .segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -340px) rotate(0deg); }
  .segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -340px) rotate(-32.73deg); }
  .segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -340px) rotate(-65.45deg); }
  .segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -340px) rotate(-98.18deg); }
  .segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -340px) rotate(-130.91deg); }
  .segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -340px) rotate(-163.64deg); }
  .segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -340px) rotate(-196.36deg); }
  .segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -340px) rotate(-229.09deg); }
  .segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -340px) rotate(-261.82deg); }
  .segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -340px) rotate(-294.55deg); }
  .segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -340px) rotate(-327.27deg); }
  
  }
  
  @media (min-width: 768px) and (max-width: 1280px) {
    /* Position icons evenly around the circle */
    .segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -260px) rotate(0deg); }
    .segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -260px) rotate(-32.73deg); }
    .segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -260px) rotate(-65.45deg); }
    .segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -260px) rotate(-98.18deg); }
    .segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -260px) rotate(-130.91deg); }
    .segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -260px) rotate(-163.64deg); }
    .segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -260px) rotate(-196.36deg); }
    .segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -260px) rotate(-229.09deg); }
    .segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -260px) rotate(-261.82deg); }
    .segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -260px) rotate(-294.55deg); }
    .segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -260px) rotate(-327.27deg); }
    
    }
    @media (min-width: 639px) and (max-width: 768px) {
      /* Position icons evenly around the circle */
      .segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -215px) rotate(0deg); }
      .segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -215px) rotate(-32.73deg); }
      .segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -215px) rotate(-65.45deg); }
      .segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -215px) rotate(-98.18deg); }
      .segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -215px) rotate(-130.91deg); }
      .segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -215px) rotate(-163.64deg); }
      .segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -215px) rotate(-196.36deg); }
      .segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -215px) rotate(-229.09deg); }
      .segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -215px) rotate(-261.82deg); }
      .segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -215px) rotate(-294.55deg); }
      .segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -215px) rotate(-327.27deg); }
      
      }
      @media  (min-width: 600px) and (max-width: 639px) {
        .mobile-content{
          padding: 20px;
          /* font-size: 10px; */
        }
        .shape{
          width: 27%;
        }
      
        .h-100vw{
          height: calc(100vw - 60px);
        }
   /* Position icons evenly around the circle */
   .segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -280px) rotate(0deg); }
   .segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -280px) rotate(-32.73deg); }
   .segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -280px) rotate(-65.45deg); }
   .segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -280px) rotate(-98.18deg); }
   .segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -280px) rotate(-130.91deg); }
   .segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -280px) rotate(-163.64deg); }
   .segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -280px) rotate(-196.36deg); }
   .segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -280px) rotate(-229.09deg); }
   .segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -280px) rotate(-261.82deg); }
   .segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -280px) rotate(-294.55deg); }
   .segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -280px) rotate(-327.27deg); }
   
   }
   @media  (min-width: 550px) and (max-width: 600px) {
    .mobile-content{
      padding: 20px;
      /* font-size: 10px; */
    }
    .h-100vw{
      height: calc(100vw - 60px);
    }
/* Position icons evenly around the circle */
.segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -250px) rotate(0deg); }
.segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -250px) rotate(-32.73deg); }
.segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -250px) rotate(-65.45deg); }
.segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -250px) rotate(-98.18deg); }
.segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -250px) rotate(-130.91deg); }
.segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -250px) rotate(-163.64deg); }
.segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -250px) rotate(-196.36deg); }
.segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -250px) rotate(-229.09deg); }
.segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -250px) rotate(-261.82deg); }
.segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -250px) rotate(-294.55deg); }
.segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -250px) rotate(-327.27deg); }

   }
   @media  (min-width: 500px) and (max-width: 550px) {
    .mobile-content{
      padding: 20px;
      /* font-size: 10px; */
    }
    .h-100vw{
      height: calc(100vw - 60px);
    }
/* Position icons evenly around the circle */
.segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -220px) rotate(0deg); }
.segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -220px) rotate(-32.73deg); }
.segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -220px) rotate(-65.45deg); }
.segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -220px) rotate(-98.18deg); }
.segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -220px) rotate(-130.91deg); }
.segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -220px) rotate(-163.64deg); }
.segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -220px) rotate(-196.36deg); }
.segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -220px) rotate(-229.09deg); }
.segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -220px) rotate(-261.82deg); }
.segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -220px) rotate(-294.55deg); }
.segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -220px) rotate(-327.27deg); }

   }
   @media  (min-width: 450px) and (max-width: 500px) {
    .mobile-content{
      padding: 20px;
      /* font-size: 9px; */
    }
    .h-100vw{
      height: calc(100vw - 60px);
    }
/* Position icons evenly around the circle */
.segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -210px) rotate(0deg); }
.segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -210px) rotate(-32.73deg); }
.segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -210px) rotate(-65.45deg); }
.segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -210px) rotate(-98.18deg); }
.segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -210px) rotate(-130.91deg); }
.segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -210px) rotate(-163.64deg); }
.segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -210px) rotate(-196.36deg); }
.segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -210px) rotate(-229.09deg); }
.segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -210px) rotate(-261.82deg); }
.segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -210px) rotate(-294.55deg); }
.segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -210px) rotate(-327.27deg); }

   }
   @media  (min-width: 400px) and (max-width: 450px) {
    .mobile-content{
      padding: 20px;
      /* font-size: 8px; */
    }
    .h-100vw{
      height: calc(100vw - 60px);
    }
/* Position icons evenly around the circle */
.segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -183px) rotate(0deg); }
.segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -183px) rotate(-32.73deg); }
.segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -183px) rotate(-65.45deg); }
.segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -183px) rotate(-98.18deg); }
.segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -183px) rotate(-130.91deg); }
.segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -183px) rotate(-163.64deg); }
.segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -183px) rotate(-196.36deg); }
.segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -183px) rotate(-229.09deg); }
.segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -183px) rotate(-261.82deg); }
.segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -183px) rotate(-294.55deg); }
.segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -183px) rotate(-327.27deg); }

   }
   @media  (max-width: 400px) {
    .mobile-content{
      padding: 20px;
      /* font-size: 7px; */
    }
    .h-100vw{
      height: calc(100vw - 60px);
    }
/* Position icons evenly around the circle */
.segment-icon:nth-child(1) { transform: rotate(0deg) translate(0px, -153px) rotate(0deg); }
.segment-icon:nth-child(2) { transform: rotate(32.73deg) translate(0px, -153px) rotate(-32.73deg); }
.segment-icon:nth-child(3) { transform: rotate(65.45deg) translate(0px, -153px) rotate(-65.45deg); }
.segment-icon:nth-child(4) { transform: rotate(98.18deg) translate(0px, -153px) rotate(-98.18deg); }
.segment-icon:nth-child(5) { transform: rotate(130.91deg) translate(0px, -153px) rotate(-130.91deg); }
.segment-icon:nth-child(6) { transform: rotate(163.64deg) translate(0px, -153px) rotate(-163.64deg); }
.segment-icon:nth-child(7) { transform: rotate(196.36deg) translate(0px, -153px) rotate(-196.36deg); }
.segment-icon:nth-child(8) { transform: rotate(229.09deg) translate(0px, -153px) rotate(-229.09deg); }
.segment-icon:nth-child(9) { transform: rotate(261.82deg) translate(0px, -153px) rotate(-261.82deg); }
.segment-icon:nth-child(10) { transform: rotate(294.55deg) translate(0px, -153px) rotate(-294.55deg); }
.segment-icon:nth-child(11) { transform: rotate(327.27deg) translate(0px, -153px) rotate(-327.27deg); }

   }
   @media  (max-width: 639px) {
    .toggle-button.toggle .bar:nth-child(1) {
      transform: rotate(-45deg) translate(-4px, 5px);
    }
    .toggle-button .bar {
      width: 20px;
      height: 3px;
      background-color: #000000;
      margin: 2px 0;
      transition: 0.3s;
    }
    
    .shape{
      width: 28%;
    }
    .segment:nth-child(1) { transform: rotate(359.99deg) translateX(0px) translateY(0px); }
.segment:nth-child(2) { transform: rotate(32.72deg) translateX(13.4%) translateY(-8%); }
.segment:nth-child(3) { transform: rotate(65.45deg) translateX(22.6%) translateY(-29.1%); }
.segment:nth-child(4) { transform: rotate(98.18deg) translateX(24.8%) translateY(-57.1%); }
.segment:nth-child(5) { transform: rotate(130.91deg) translateX(19%) translateY(-82.8%); }
.segment:nth-child(6) { transform: rotate(163.63deg) translateX(7.2%) translateY(-98%); }
.segment:nth-child(7) { transform: rotate(196.36deg) translateX(-6.8%) translateY(-97.9%); }
.segment:nth-child(8) { transform: rotate(229.09deg) translateX(-18.7%) translateY(-82.7%); }
.segment:nth-child(9) { transform: rotate(261.81deg) translateX(-24.5%) translateY(-57.2%); }
.segment:nth-child(10) { transform: rotate(294.54deg) translateX(-22.6%) translateY(-29.2%); }
.segment:nth-child(11) { transform: rotate(327.27deg) translateX(-13.4%) translateY(-8%); }
  }


  /* church9  */

 @media (min-width:  1536px) {
  .contain {
     margin-right: calc(100% - 700px);
  }
 }
 @media (min-width: 1280px) and (max-width: 1536px) {
     .contain {
         margin-right: calc(100% - 588px);
     }
 }
 @media (min-width: 1024px) and (max-width: 1280px) {
     .contain {
         margin-right: calc(100% - 458px);
     }
 }
 /* accordian */
 .atitleclass {
  margin-left: 31%; /* Adjust this value as needed */
}
 
.atitle {
  transition: margin-left 0.8s ease; /* Smooth transition when margin changes */
}

/* Example of custom styles */
.iti__flag {
  background-color: #ffffff;
}
.iti  {
  width: 100%;

}

.iti--separate-dial-code .iti__selected-flag {
  background-color: rgb(255, 255, 255)!important;
}
/* popup */
.modal {
  transition: opacity 0.3s ease;
}
.modal-active {
  opacity: 1;
  pointer-events: auto;
}
.modal-inactive {
  opacity: 0;
  pointer-events: none;
}
/* OWL CARASOULE */
.owl-dots{
  position: absolute;
  bottom: -70px;
  left: 0px;
  right: 0px;
  margin: auto;
  height: max-content; 
  display: flex;
 justify-content: center;
  gap:20px;
} 
.owl-dots .owl-dot {
outline-offset: 5px;
border-spacing: 1px;
outline: #F26722 solid 1px!important;
background-color: #f2672200!important;
border-radius: 50%;
width: 10px; /* Dot size */
height: 10px; /* Dot size */
transition: all linear 600ms;
display: inline-block; /* Align dots inline */
}

/* Active dot styles */
.owl-dots .owl-dot.active { 
outline: #F26722 solid 1px!important;
background-color: #F26722!important;
}

.owl-carousel .owl-prev {
  background: url('../images/home/arrow1.svg')  center no-repeat !important;
  position: absolute;
  bottom: -80px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  background-color: #f5f5f500!important; 
  color: rgba(255, 255, 255, 0)!important; /* Change arrow color */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid #ED4D2C!important;
  font-size: 200px;
  transition: all ease 800ms;
  background-size: 40%!important; /* Adjust this value as needed for smaller screens */
}

/* Style for the next button */
.owl-carousel .owl-next {
  background: url('../images/home/arrow2.svg')  center no-repeat !important;
  position: absolute;
  bottom: -80px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  background-color: #f5f5f500!important; 
  color: rgba(255, 255, 255, 0)!important; /* Change arrow color */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 200px;
  border-radius: 100%;
  border: 1px solid #ED4D2C!important;
  z-index: 999;
  right:0px;
  transition: all ease 800ms;
  background-size: 40%!important; /* Adjust this value as needed for smaller screens */
}

/* Optional: Hover effect for buttons */
.owl-carousel .owl-prev:hover{
    background: url('../images/home/arrow-hover1.svg')  center no-repeat !important;
  background-color: #ED4D2C!important;
}
.owl-carousel .owl-next:hover {
  background: url('../images/home/arrow-hover2.svg')  center no-repeat !important;
  background-color: #ED4D2C!important;
}

/* <style> */
  
.tab-btn.active, .tab-btn:hover {
  background-color: #ED4D2C;
  color: #ffffff; 
}
 
.img-overlay {
  position: relative;
  overflow: hidden; /* Ensures the pseudo-element stays confined */
  cursor: pointer;
}

.img-overlay::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ED4D2C;
  opacity: 0; /* Initially invisible */
  z-index: 99;
  transition: opacity 0.3s ease; /* Smooth transition for the overlay */
}

.img-overlay:hover::before {
  opacity: 0.5; /* Show overlay on hover with some transparency */
}

/* </style> */
@media (max-width: 1024px) {
  .atitleclass {
    margin-left: 28%; /* Adjust this value as needed */
  }
  .owl-dots{
    position: absolute;
    bottom: -40px;
  }
  .owl-dots .owl-dot {
    outline-offset: 3px;
    width: 7px; /* Dot size */
    height: 7px; /* Dot size */
  }
}