.elementor-kit-7{--e-global-color-primary:#000000;--e-global-color-secondary:#1D1D1F;--e-global-color-text:#1D1D1F;--e-global-color-accent:#CB3202;--e-global-color-337b993:#FFFAEB;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Plus Jakarta Sans";--e-global-typography-accent-font-weight:500;font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-7 h1{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-7 h2{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-7 h3{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-7 h4{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-7 h5{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-7 h6{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */a {
  color: #1d1d1f;
}

a:hover {
  color: #1d1d1f;
}


/* Define the rotation keyframes */
@keyframes rotate-down {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes rotate-up {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Apply the rotation animation */
.e-n-menu-dropdown-icon-opened {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
  animation: rotate-down 0.3s forwards;
}

.e-n-menu-dropdown-icon-closed {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
  animation: rotate-up 0.3s forwards;
}

/* Default styles for desktop */
.scroll-container {
  position: relative;
  height: 500px; /* Height for desktop */
  overflow: hidden;
  display: inline-block; /* Ensures proper hover behavior */
}

/* Style the image */
.scroll-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for dimming */
}

/* Hidden description with gradient overlay */
.hidden-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(40, 40, 40, 0.8)); /* Gradient overlay with 80% opacity */
  color: white; /* Text color */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Smooth transition for showing */
  z-index: 1; /* Ensure it appears above the images */
}

/* Desktop and tablet behavior: Dim the scroll-container on hover and keep hidden-description visible */
.scroll-container:hover .scroll-image {
  opacity: 0.5; /* Dim the image to 50% opacity */
}

.scroll-container:hover .hidden-description {
  opacity: 1; /* Show the description on hover */
}

.scroll-container:hover,
.scroll-container:hover .hidden-description {
  opacity: 1;
}

/* Media query for mobile devices */
@media (max-width: 768px) { /* Adjust the max-width value as needed for your mobile breakpoint */
  .scroll-container {
    height: 300px; /* Height for mobile */
  }

  /* On mobile, show the overlay immediately without hover */
  .scroll-image {
    opacity: 0.5; /* Dim the image to 50% by default */
    position: relative;
  }

  .hidden-description {
    opacity: 1; /* Show the description by default on mobile */
  }

  /* Disable hover effects on mobile, as they're not needed */
  .scroll-container:hover .scroll-image,
  .scroll-container:hover .hidden-description {
    opacity: 1; /* Ensure no hover effects apply on mobile */
  }
}

/* Selected text color */
::selection {
    background: #F38558; /* Background color for selected text */
    color: #fff; /* Optional: Text color for selected text */
}/* End custom CSS */