@import url("https://fonts.googleapis.com/css2?family=Changa&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* background-color: #fff; */
}

/*-----NAV BAR DESIGN------*/

.navbar-brand {
  font-family: "Kdam Thmor Pro", sans-serif;
  color: #fff;
}

.navbar-brand:hover {
  font-family: "Kdam Thmor Pro", sans-serif;
  color: #fff;
}
.navbar-toggler {
  /* color: #ffffff !important; */
  /* border-color: #ffffff !important; */
  outline: none !important;
  background-color: #ffffff !important;
}

/* Target the path elements inside the SVG for the toggler icon */
.navbar-toggler-icon path {
  fill: #ffffff !important;
}

.bg-dark {
  background-color: #ffffff !important;
  box-shadow: 0px 3px 2px rgba(142, 142, 142, 0.3);
  border-bottom: solid 1px #eaeaea;
}

.navbar-nav .nav-item,
.navbar-nav .nav-item .nav-link {
  color: #2c2c2c !important;
  font-size: 14px;
  font-family: "Kdam Thmor Pro", sans-serif;
}
.navbar-nav .nav-item .nav-link:focus {
  color: #2c2c2c !important;
}
.navbar-nav .nav-item .nav-link::after {
  content: "";
  width: 0%;
  height: 2px;
  background: #2c2c2c;
  display: block;
  margin: auto;
  transition: 0.5s;
  margin-top: 0px;
  transition: all 1s ease;
}
.navbar-nav .nav-item .nav-link:hover::after {
  width: 100%;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: #2c2c2c !important;
  color: #fff;
}

marquee {
  font-family: "Kdam Thmor Pro", sans-serif;
}

.heading_para {
  color: #292929;
  font-weight: 500;
  text-align: center;
  font-family: "Changa", sans-serif;
}
.fa-long-arrow-right {
  color: #292929;
  font-weight: 500;
  padding: 15px;
}

.para {
  color: #292929;
  font-weight: 400;
  font-size: 18px;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Changa", sans-serif;
}
.heading1 {
  color: #292929;
  font-weight: 500;
  text-align: center;
  font-family: "Changa", sans-serif;
}

.underline {
  content: "";
  width: 10%;
  height: 4px;
  display: block;
  margin: auto;
  transition: 0.5s;
  margin-top: 10px;
  border-bottom: 4px solid #292929;
  /*animation: animate 6s linear infinite; */
}

.readmore {
  text-decoration: none;
  color: red;
}

/*service Section*/

.container_drop {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 50px 0;
  gap: 40px 60px;
}
.container_drop .drop {
  position: relative;
  width: 350px;
  height: 350px;
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
  transition: 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container_drop .drop:nth-child(1) {
  border-radius: 47% 53% 70% 30% / 30% 43% 57% 70%;
}
.container_drop .drop:nth-child(2) {
  border-radius: 49% 51% 75% 25% / 31% 49% 51% 69%;
}
.container_drop .drop:nth-child(3) {
  border-radius: 65% 35% 35% 65% / 41% 51% 49% 59%;
}

.container_drop .drop:hover {
  border-radius: 50%;
}

.container_drop .drop .content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 40px;
  gap: 15px;
}

.container_drop .drop .content h2 {
  position: relative;
  width: 80px;
  height: 80px;
  background: #eff0f4;
  border-radius: 50%;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    inset -2px -5px 10px rgba(255, 255, 255, 1),
    15px 15px 10px rgba(0, 0, 0, 0.05), 15px 00px 15px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: var(--clr);
}

.container_drop .drop .content a {
  position: relative;
  padding: 10px 25px;
  background: var(--clr);
  text-decoration: none;
  color: #fff;
  border-radius: 25px;
  font-weight: 500;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  opacity: 0.75;
  transition: 0.5s;
}
.container_drop .drop .content a:hover {
  opacity: 1;
}

/*Service Sectin End*/

.social_media a {
  display: inline-block;
  text-decoration: none;
  width: 30px; /* Adjust the width and height as needed for your desired size */
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  text-align: center;
  background-color: #2c2c2c;
  color: #ffffff;
  border-radius: 50%;
}