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


@import 'swiper/swiper-bundle.css';

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: white;
  width: 100vw;
  color: #000;
  font-family: "Poppins", sans-serif;

}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}


/* poppins font styles */
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* poppins font styles end  */

.bear-bg {
  background-image: url('./assets/hero-cont-bg.svg');
  background-size:contain; /* Adjust as needed */
  background-position: center; /* Adjust as needed */
  background-repeat: no-repeat;
  height: 28rem;
}

.custom-shape {
  background-image: url('./assets/community-bg.svg');
  background-repeat: no-repeat;
  background-size:cover;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@media only screen and (max-width: 600px) {
  .custom-shape {
    background-image: none;
    background-repeat: no-repeat;
    background-size:cover;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}


/* swiper CSS */

@media (max-width: 768px) {
  .mobile-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mobile-center .flex {
    justify-content: center;
  }
}


/* scroll */
.scroll-to-top {
  display: none; /* Hidden by default */
}

.bg-custom {
  background-image: url('./assets/images/servicedata-bg.png');
  background-size: cover;
  background-position: center;
}

/* nav  */
@media only screen and (min-width: 768px){
  .parent:hover .child {
      opacity:1;
      height:auto;
      overflow:none;
      transform: translateY(0);
  }
  .child {
      opacity:0;
      height:0;
      overflow:hidden;
      transform: translateY(-10%);
  }
}


/* popup */
#popup {
  display: none; 
  position: fixed;
  top: 10;
  left: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Popup image styling */


/* Close button styling */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

      /*popup */


      @media (max-width: 768px) {
        /* Modal should be visible on small screens */
        #modal {
          display: flex;
        }
      }