.rubik {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
  }


  .montserrat {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
  }
  
  .montserrat{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
  
  }
.bg-custom-dark-blue{


    background-color:#003362;
}

.border-blue{
    border-color:#003362;
}
.border-blue_2{
  border-color:#1C8DA2;
}
.bg-custom-dark-blue_2{


    background-color:#0392B4;
}
.text-custom-light-blue{
    color:#1C8DA2;
}
.bg-custom-light-blue{
    background-color:#1C8DA2;
}
.border-b-light-blue{
    border-color:#1C8DA2;
}
.border-orange{
    border-color:#F5A100;
}
.bg-custom-dark-yellow{
background-color:#F5A100;
}


.text-custom-orang{
    color:#F5A100;
}
.text-custom-dark-gray{
    color:#1F242C;
}
.text-custom-dark-gray-2{
    color:#616670;
}
.text-custom-dark-gray-3{
    color:#414141;
}
.text-custom-light-gray{
    color:#616670;
}
.text-custom-light-gray-2{
    color:#222222;
}
.bg-custom-light-green{
    background-color:#89C03C;
}
.bg-custom-dark-gray{
    background-color: #1F242C;
}
.bg-custom-light-gray{
    background-color:#F9FAFB;
}
details[open] summary {
    color: #1C8DA2; 
}

details summary {
    transition: color 0.3s ease-in-out;
}

details:not([open]) summary:hover {
    color: #1C8DA2;
}
.accent{accent-color: #1C8DA2; }
p { 
  font-size: 20px; 
}
div.vertical-line{
    width: 2px;
    
    height: 100%; 
    float: left; 
     
  }
  /* Custom slide shadow */
  .swiper-slide-shadow {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); /* Adjust shadow intensity here */
  }

  
.error-message {
    color: red;
    font-size: 12px;
  }
  .true-message {
    color:green ;
    font-size: 12px;
  }
  .error-border {
    border-color: red !important;
  }
  .true-border{
border-color: green !important;
  }
  @keyframes fill-left-to-right {
    0% {
      background-size: 0% 100%;
      background-color: #fff;
    }
    100% {
      background-size: 100% 100%;
      background-color: #FB923C;
    }
  }
  
  .animate-fill {
    background-image: linear-gradient(to right, #FB923C, #FB923C);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-color: #fff !important;
  
    -webkit-animation: fill-left-to-right 10s ease-out forwards;
    animation: fill-left-to-right 10s ease-out forwards;
  }
 

  @keyframes loop-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }
  
  .animate-loop-scroll {
    animation: loop-scroll 50s linear infinite;
  }
  


.dropdown {
    
    width: 100%; /* Ensure it takes full width */
}
.dropdown-content {
  
   
    background-color: #F6F6F6;
    min-width: 230px;
    height:400px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1000; /* Ensure it appears above other elements */
   
}

.dropdown-content a {
    color: black;
    text-decoration: none;
 
}

.carousel{
  height:500px;
}

.carousel .carousel-item{
width:400px;
}

/* CSS Code */
.swiper-wrapper {
width: 100%;
height: max-content !important;
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;

}


.carousel-3D-swiper-section {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
max-width: 1000px;
margin: auto;
overflow: hidden;

position: relative; 
}


.carousel-3D-swiper-title {
text-align: center;
font-size: 3rem;
color: orangered;
}


.carousel-3D-swiper .swiper-slide {
position: relative;
}


.details {
padding: 25px 20px;
font-weight: 600;
text-align: center;
background-color: #f44336;
}

.details span {
display: block;
font-size: 16px;
color: #f44336;
}

.details h3 {
margin: 0;
font-weight: bold;
font-size: 24px;
line-height: 1.1;
}

.details p {
margin: 8px 0 0;
opacity: 0.65;
font-size: 14px;
font-weight: 500;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
overflow: hidden;
}


.up-arrow {
width: 0;
height: 0;
border-top:20px solid #084954;

border-left: 20px solid transparent;
}

 /* Hide the default arrow */
 summary::-webkit-details-marker {
  display: none !important;
  }
   summary {
 /* Optional styling for the summary text */
  cursor: pointer; /* Add pointer cursor to indicate interactivity */
  font-weight: bold; /* Example: make text bold */
  }

  .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }


  

  /* Style for the input field */
#mobile_code {
  border: 1px solid #ccc; /* Border color */
  border-radius: 4px; /* Rounded corners */
  padding: 10px; /* Padding inside the input */
  font-size: 16px; /* Font size */
  width: 100%; /* Full width */
}

/* Style for the country code dropdown */
.intl-tel-input {
  width: 100%; /* Full width */

  
}

/* Style for the selected country flag */
.intl-tel-input .flag-container {
  margin-right: 10px; /* Space between flag and input */
}

/* Style for the dropdown menu */
.intl-tel-input .country-list {
  background-color: white !important;
  max-height: 200px !important; /* Maximum height of the dropdown */
  overflow-y: auto; /* Scroll if content exceeds max height */
  position:absolute !important;
  z-index: 0;
}
/* Style for country code text */
.intl-tel-input .country {
  padding: 10px; /* Padding for each country item */
  font-size: 14px; /* Font size for country items */
  color: #333 !important; /* Text color */
}

/* Style for the active country item */
.intl-tel-input .country.active {
  background-color: #f0f0f0 !important; /* Background color for active item */
}

.masonry {
  column-count: 3;
  column-gap: 1rem;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}


.active {
  color: #1C8DA2;
}