@tailwind base;
@tailwind components;
@tailwind utilities;

/* font-family: 'Holtwood One SC', serif; */

@font-face {
    font-family: 'AlverataInformal-Bold';
    src: url('./assets/AlverataInformal-Bold.ttf') format('truetype');
}

#scrollable-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}

#scrollable-container::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, and Opera */
}

#featuredscrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}

#featuredscrollbar::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, and Opera */
}


.swiper-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}

.swiper-container::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, and Opera */
}


#scrollable-blogContainer {
  /* -ms-overflow-style: none;  */
  /* scrollbar-width: none;     */
}

#scrollable-blogContainer::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, and Opera */
}


/* Hide the second paragraph initially */
/* Initially hide the content */
.hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* Expanded state */
.show-content {
  max-height: 500px; /* Adjust the height based on content */
}

/* Rotate the Plus icon */
.rotate {
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}


/* .titlefont{
    font-size: 3.125rem;
    font-weight: 400;
    line-height: 3.4375rem;
    letter-spacing: 0.125rem;
    
} */
@font-face {
  font-family: 'Satoshi'; 
  src: url('/assets/fonts/Satoshi-Black.woff2') format('woff2'),
       url('/assets/fonts/Satoshi-Regular.woff') format('woff');
  /* font-weight: normal; */
  font-style: normal;
}

/* Optional: Set as a global font family */
body {
  font-family: 'Satoshi', sans-serif;
}


@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Libre+Franklin:wght@500&display=swap');

@layer utilities {
    .herobg {
        /* background: linear-gradient(215deg, #f7db8d 2%, rgba(255, 199, 39, 0.00) 50%); */
    }
  }

  @media (max-width: 1024px) {
    #navbar-default ul {
      width: 100%;
      text-align: left;

    }
  
    #navbar-default ul li {
    }
  }


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* toggle switch */

/* .toggle-switch {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: auto;
    border: 1px solid #6070FF;
    height: 50px;
    background-color: #ddd;
    border-radius: 17.05px;
    overflow: hidden;
    padding-top: 9px;
    padding-bottom: 9px;

  } */
  
  .toggle-switch input[type="radio"] {
    display: none;
  }
  

  
  #option1:checked ~ .toggle-slider {
    left: 0;
    background-color: #6070FF; /* Green background for Option 1 */
  }
  
  #option2:checked ~ .toggle-slider {
    left: 50%;
    background-color:#6070FF;/* Red background for Option 2 */
  }
  
  /* .toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color:#6070FF;
    transition: all 0.3s ease;
    border-radius: 17.05px;
  } */
  
  #option1:checked ~ label[for="option1"] {
    color: #fff;
  }
  
  #option2:checked ~ label[for="option2"] {
    color: #fff;
  }
  
  /* .toggle-label {
    color: #000;
    transition: color 0.3s ease;
  } */
  

  .toggle-switch {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 150%;
    max-width: 372px; /* or use a percentage that fits your layout */
    /* max-width: 372px;  */
    /* border: 1px solid #6070FF; */
    /* height: 50px; */
    background-color:transparent;
    border-radius: 17.05px;
    overflow: hidden;
}

.toggle-label {
    flex: 1;
    text-align: center;
    padding: 9px 0; 
    margin: 5px;
    white-space: nowrap; /* Prevent the text from wrapping to the next line */
    /* overflow: hidden; Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis (...) if the text overflows */
    transition: color 0.3s ease;
    background-color:  #FF9A6C;
    z-index: 1;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    /* background-color: #FF9A6C; */
    transition: all 0.3s ease;
    border-radius: 17.05px;
}



.poppins-thin {
  font-family: "Poppins", system-ui;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", system-ui;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", system-ui;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", system-ui;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", system-ui;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", system-ui;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", system-ui;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", system-ui;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", system-ui;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", system-ui;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", system-ui;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", system-ui;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", system-ui;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", system-ui;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", system-ui;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", system-ui;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", system-ui;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", system-ui;
  font-weight: 900;
  font-style: italic;
}