@import url(../css/header.css);

@import url(../css/footer.css);
.row > *{
  padding: 0;
}


:root {

  /* --textColor: #413F39;

    --headingColor: #21201D;

    --brownColor: #BFA078;

    --darkBrown: #937957;

    --lightBrown: #FAF6EB; */

  --blue: #007bbd;

  --teal: #1da6a1;

  --black: #000;

  --darkGray: #2b3236;

  --montserrat-bold: "Montserrat Bold", sans-serif;

  --montserrat-semibold: "Montserrat SemiBold", sans-serif;

  --montserrat-medium: "Montserrat Medium", sans-serif;

  --montserrat-regular: "Montserrat Regular", sans-serif;

  --opensans-bold: "Opensans Bold", sans-serif;

  --opensans-semibold: "Opensans SemiBold", sans-serif;

  --opensans-light: "Opensans Light", sans-serif;

  --opensans-regular: "Opensans Regular", sans-serif;

}



/* font */

@font-face {

  font-family: "Montserrat";

  src: url(../../assets/fonts/Montserrat.ttf);

}

@font-face {

  font-family: "Montserrat Bold";

  src: url(../../assets/fonts/Montserrat-Bold.ttf);

}



@font-face {

  font-family: "Montserrat SemiBold";

  src: url(../../assets/fonts/Montserrat-SemiBold.ttf);

}



@font-face {

  font-family: "Montserrat Medium";

  src: url(../../assets/fonts/Montserrat-Medium.ttf);

}



@font-face {

  font-family: "Montserrat Regular";

  src: url(../../assets/fonts/Montserrat-Regular.ttf);

}



@font-face {

  font-family: "Opensans Bold";

  src: url(../../assets/fonts/OpenSans-Bold.ttf);

}



@font-face {

  font-family: "Opensans SemiBold";

  src: url(../../assets/fonts/OpenSans-SemiBold.ttf);

}



@font-face {

  font-family: "Opensans Light";

  src: url(../../assets/fonts/OpenSans-Light.ttf);

}



@font-face {

  font-family: "Opensans Regular";

  src: url(../../assets/fonts/OpenSans-Regular.ttf);

}



.wrapper {

  max-width: 1576px;

  width: 100%;

  margin: auto;

}



section {

  padding: 100px 30px;

}



img {

  max-width: 100%;

  height: auto;

}



/* heading with clamp */

h1 {

  font-family: var(--montserrat-bold);

  font-size: 60px;

  font-style: normal;

  font-weight: 700;

  line-height: normal;

  margin-bottom: 20px;

  color: var(--black);

}



h2 {

  font-family: var(--montserrat-semibold);

  font-size: 45px;

  font-style: normal;

  font-weight: 600;

  line-height: normal;

  margin-bottom: 20px;

  color: var(--black);

}



h3 {

  font-family: var(--montserrat-semibold);

  font-size: 24px;

  font-style: normal;

  font-weight: 600;

  line-height: normal;

  margin-bottom: 20px;

  color: var(--black);

}



/* h4 {

    font-family: "Roboto Condensed", sans-serif;

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 20px;

    text-transform: capitalize;

}



h5 {

    text-align: center;

    font-family: "Roboto Condensed",sans-serif;

    font-size: clamp(1.25rem, 1.1703rem + 0.3268vw, 1.5625rem);

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    text-transform: uppercase;

} */



p {

  font-family: var(--opensans-light);

  font-size: 16px;

  font-style: normal;

  font-weight: 400;

  line-height: 25px;

  color: var(--darkGray);

}



a {

  transition: 0.5s ease all;

  -webkit-transition: 0.5s ease all;

  -moz-transition: 0.5s ease all;

  -ms-transition: 0.5s ease all;

  -o-transition: 0.5s ease all;

  gap: 0 15px;

}



a path {

  transition: 0.5s ease all;

}



a {

  text-decoration: none;

  font-size: 18px;

  font-style: normal;

  font-weight: 600;

  line-height: normal;

  font-family: var(--montserrat-semibold);

}



span {

  font-family: var(--opensans-light);

}



p:last-child {

  margin-bottom: 0;
  color: #fff;

}



/* clamp contents */

.post_title {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-line-clamp: 1;

}



.post_text {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-line-clamp: 2;

}



/* color */

.text-blue {

  color: var(--blue);

}



.text-teal {

  color: var(--teal);

}



.text-darkGray {

  color: var(--darkGray);

}



/* fonts */

.font-montserrat-bold {

  font-family: var(--montserrat-bold);

}



.font-montserrat-semibold {

  font-family: var(--montserrat-semibold);

}



.font-montserrat-medium {

  font-family: var(--montserrat-medium);

}



.font-montserrat-regular {

  font-family: var(--montserrat-regular);

}



.font-opensans-bold {

  font-family: var(--opensans-bold);

}



.font-opensans-semibold {

  font-family: var(--opensans-semibold);

}



.font-opensans-light {

  font-family: var(--opensans-light);

}



.font-opensans-regular {

  font-family: var(--opensans-regular);

}



/* margins and gaps */

.mb-10 {

  margin-bottom: 10px;

}

.mb-20 {

  margin-bottom: 20px;

}



.mb-30 {

  margin-bottom: 30px;

}



.mb-40 {

  margin-bottom: 40px;

}



.mb-50 {

  margin-bottom: 50px;

}



.gap-50 {

  gap: 50px;

}



.gap-20 {

  gap: 20px;

}



/* custom hover css global */

/* Base style for the button container */

.radial-button {

  position: relative;

  /* Needed for positioning the pseudo-element */

  overflow: hidden;

  /* Crucial to hide the expanding circle until it's within the button */



  /* Dimensions and Borders */

  border: 2px solid var(--blue);

  border-radius: 50px;



  /* Taller button */

  display: inline-flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  padding: 0;



  /* Initial background is the blue color */

  background-color: var(--blue);



  /* Add a subtle shadow */

  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */

  /* transition: box-shadow 0.3s ease-in-out; */

  /* Transition for shadow */

}



/* Pseudo-element for the expanding white circle */

.radial-button::before {

  content: "";

  position: absolute;

  top: 50%;

  right: 0;

  /* Starts from the right edge */

  transform: translate(50%, -50%) scale(0);

  /* Start scaled to 0, centered vertically on the right */

  background-color: white;

  border-radius: 50%;

  /* Makes it a circle */

  /* Initial size is small, will expand */

  width: 0;

  height: 0;

  transition: all 0.6s ease-out;

  /* Transition for expansion */

  z-index: 0;

  /* Behind the text */

}



/* Style for the text content */

.radial-button .text-content {

  position: relative;

  /* Needed to keep text above the pseudo-element */

  z-index: 1;



  /* Initial text color is WHITE */

  color: white;



  /* Transition for the text color change */

  transition: color 0.6s ease-out;

  display: block;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* HOVER EFFECT: Expand the circle and change text color */



.radial-button:hover::before {

  /* Expand the circle to cover the entire button */

  transform: translate(0%, -50%) scale(1);

  /* Move to center and scale to full size */

  /* Make the circle large enough to cover the entire button from the right */

  width: 300px;

  /* Adjust as needed for button size */

  height: 300px;

  /* Adjust as needed for button size */

  right: -50px;

  /* Adjust this to make it appear to originate slightly outside and cover fully */

}



/* Alternatively, you can calculate the transform more precisely:

        .radial-button:hover::before {

            transform: translate(-50%, -50%) scale(3); // Adjust scale based on button size

            width: 100%;

            height: 100%;

            right: 0;

        }

        */



.radial-button:hover .text-content {

  /* Change the text color to the primary blue (contrasting the white hover background) */

  color: var(--blue);

}

/* end custom hover */



/* ------------------------------------------------------------------ */

/* NEW .radial-button-teal (Transparent -> Solid Teal Fill) */

/* ------------------------------------------------------------------ */



.radial-button-teal {

  position: relative;

  overflow: hidden;

  border: 2px solid var(--teal); /* Teal Border */

  border-radius: 50px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  padding: 0;

  background-color: transparent; /* Initial background is transparent */

  text-decoration: none; /* Ensure it looks like a button */

  min-width: 150px; /* Set a minimum width */

}



.radial-button-teal::before {

  content: "";

  position: absolute;

  top: 50%;

  right: 0;

  transform: translate(50%, -50%) scale(0);

  background-color: var(--teal); /* Teal fill on hover */

  border-radius: 50%;

  width: 0;

  height: 0;

  transition: all 0.6s ease-out;

  z-index: 0;

}



.radial-button-teal .text-content {

  position: relative;

  z-index: 1;

  color: var(--teal); /* Initial text is TEAL */

  transition: color 0.6s ease-out;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.75rem 2rem; /* Add padding here for button height */

  font-size: 1rem;

  font-weight: 600;

}



.radial-button-teal:hover::before {

  /* Expand the teal circle to cover the entire button */

  transform: translate(0%, -50%) scale(1);

  width: 300px;

  height: 300px;

  right: -50px;

}



.radial-button-teal:hover .text-content {

  /* Change the text color to WHITE (contrasting the teal hover background) */

  color: white;

}

/* end of radial button teal */



/* --- WRAPPER STYLE (for the element that holds the ::before pseudo-element) --- */

.radial-button-wrapper {

  position: relative;

  overflow: hidden; /* Crucial to hide the expanding circle */

  z-index: 1;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;



  /* Match button dimensions and borders, but for the wrapper */

  border: 2px solid var(--blue);

  border-radius: 50px;



  /* Initial background (optional on wrapper, but good for fallback) */

  background-color: var(--blue);

}



/* Pseudo-element for the expanding white circle, applied to the WRAPPER */

.radial-button-wrapper::before {

  content: "";

  position: absolute;



  /* INCREASED SIZE: Set a larger fixed size for the circle for guaranteed coverage */

  width: 800px;

  height: 600px;



  background-color: white;

  border-radius: 50%; /* Makes it a circle */



  /* Anchor the center of the circle to the right edge of the button */

  top: 50%;

  /* ADJUSTED: Move the origin point slightly left to ensure it covers the left edge */

  right: -20px;



  /* Start scaled to 0, centered vertically on the right */

  transform: translate(50%, -50%) scale(0);



  transition: all 0.7s ease-out; /* Transition for expansion */

  z-index: 0; /* Behind the input text */

}



/* HOVER EFFECT: Expand the circle on the WRAPPER */

.radial-button-wrapper:hover::before {

  /* Only scale the large circle up to 1 (full size) to reveal it */

  transform: translate(13%, -50%) scale(1);

}



/* --- INPUT STYLE (The actual submit button) --- */

.radial-button-submit {

  /* Input styling resets */

  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;



  /* Ensure the input is transparent and sits on top of the pseudo-element container */

  position: relative;

  z-index: 2; /* MUST be higher than the wrapper's pseudo-element (z-index: 0) */



  /* Make input transparent so wrapper's background and ::before shows through */

  background-color: transparent !important;

  border: none !important;

  box-shadow: none !important;

  outline: none;



  /* Sizing and Text - Keep these on the input to ensure text layout is correct */

  display: inline-block;

  cursor: pointer;

  padding: 1rem 2.5rem;

  font-size: 1.125rem;

  font-weight: 600;

  text-align: center;

  line-height: 1.5;



  /* Initial text color is WHITE */

  color: white;



  /* Transition for the text color change */

  transition: color 0.6s ease-out;



  /* Ensure it fills the wrapper */

  width: 100%;

  height: 100%;

}



/* HOVER EFFECT: Change text color on the input when the wrapper is hovered */

/* Note: We use the wrapper's hover state to target the child input */

.radial-button-wrapper:hover .radial-button-submit {

  /* Change the text color to the primary blue */

  color: var(--blue);

}


.radial-button-transteal {

  position: relative;

  overflow: hidden;

  border: 2px solid var(--teal); /* Teal Border */

  border-radius: 50px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  padding: 0;

  background-color: var(--teal); /* Initial background is transparent */

  text-decoration: none; /* Ensure it looks like a button */

  min-width: 150px; /* Set a minimum width */

}



.radial-button-transteal::before {

  content: "";

  position: absolute;

  top: 50%;

  right: 0;

  transform: translate(50%, -50%) scale(0);

  background-color: transparent; /* Teal fill on hover */

  border-radius: 50%;

  width: 0;

  height: 0;

  transition: all 0.6s ease-out;

  z-index: 0;

}



.radial-button-transteal .text-content {

  position: relative;

  z-index: 1;

  color: #fff; /* Initial text is TEAL */

  transition: color 0.6s ease-out;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.75rem 2rem; /* Add padding here for button height */

  font-size: 1rem;

  font-weight: 600;

}



.radial-button-transteal:hover::before {

  /* Expand the teal circle to cover the entire button */

  transform: translate(0%, -50%) scale(1);

  width: 300px;

  height: 300px;

  right: -50px;

}



.radial-button-transtealteal:hover .text-content {

  /* Change the text color to WHITE (contrasting the teal hover background) */

  color: white;

}


/* End Custom Radial Hover CSS */



@media (max-width: 1199px) {

  section {

    padding: 70px 30px;

  }



  h1 {

    font-size: 55px;

  }

}



@media (max-width: 767px) {

  section {

    padding: 50px 20px;

  }



  h1 {

    font-size: 45px;

  }



  h2 {

    font-size: 35px;

  }

}


nav.sh-breadcrumbs {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}

nav.sh-breadcrumbs a {
    color: var(--p, #2B3236);
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

nav.sh-breadcrumbs span {
    color: var(--p, #2B3236);
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}