.elementor-kit-7{--e-global-color-primary:#1E3456;--e-global-color-secondary:#DAAD89;--e-global-color-text:#191919;--e-global-color-33f826f:#3D5D8C80;--e-global-color-534b286:#3D5D8C;--e-global-color-6bed761:#B07268;--e-global-color-b216e11:#7B3F32;--e-global-color-86a3f8b:#6A835D;--e-global-color-eb21384:#FFFFFF;--e-global-color-4cbca04:#F1EFEB;--e-global-color-24a2fb7:#191919;--e-global-color-dfb9d70:#F1EFEBA1;--e-global-typography-primary-font-family:"Italiana";--e-global-typography-primary-font-size:3.8em;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:1em;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6rem;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-weight:500;--e-global-typography-d4623dc-font-family:"Open Sans";--e-global-typography-d4623dc-font-size:0.875rem;--e-global-typography-d4623dc-font-weight:400;--e-global-typography-d4623dc-line-height:1.6em;--e-global-typography-5341c0e-font-family:"Open Sans";--e-global-typography-5341c0e-font-size:0.9375rem;--e-global-typography-5341c0e-font-weight:600;--e-global-typography-5341c0e-line-height:1.4em;--e-global-typography-2e906f8-font-family:"Poppins";--e-global-typography-2e906f8-font-size:1.125rem;--e-global-typography-2e906f8-font-weight:400;--e-global-typography-2e906f8-line-height:1.7em;color:var( --e-global-color-text );font-family:"Karla", Sans-serif;font-size:1rem;font-weight:400;line-height:1.4rem;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-b216e11 );font-family:"Open Sans", Sans-serif;font-size:1rem;font-weight:600;line-height:1.4em;color:var( --e-global-color-eb21384 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-b216e11 );border-radius:100em 100em 100em 100em;padding:1rem 1.5rem 1rem 1.5rem;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-eb21384 );color:var( --e-global-color-b216e11 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-b216e11 );border-radius:100em 100em 100em 100em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-b216e11 );font-family:"Open Sans", Sans-serif;font-size:1rem;font-weight:400;line-height:1.6rem;}.elementor-kit-7 a:hover{color:var( --e-global-color-text );}.elementor-kit-7 h1{color:var( --e-global-color-text );font-family:"Italiana", Sans-serif;font-weight:400;text-transform:uppercase;line-height:1.15em;letter-spacing:0px;}.elementor-kit-7 h2{color:var( --e-global-color-text );font-family:"Montserrat", Sans-serif;font-size:1.2em;font-weight:600;text-transform:uppercase;line-height:1.2em;letter-spacing:0.04em;}.elementor-kit-7 h3{color:var( --e-global-color-text );font-family:"Italiana", Sans-serif;font-size:2.2em;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:0.03em;}.elementor-kit-7 h4{color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:1.6rem;font-weight:700;line-height:1.4em;}.elementor-kit-7 h5{color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:1.4rem;font-weight:500;line-height:1.4em;}.elementor-kit-7 h6{color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:1rem;font-weight:500;line-height:1.2em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:2rem;}.elementor-element{--widgets-spacing:2rem 2rem;--widgets-spacing-row:2rem;--widgets-spacing-column:2rem;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-primary-font-size:3.5em;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-size:1em;}.elementor-kit-7 h1{line-height:1.2em;}.elementor-kit-7 h3{font-size:1.6rem;line-height:1.4em;}.elementor-kit-7 h4{font-size:1.4rem;}.elementor-kit-7 h5{font-size:1.2rem;}.elementor-kit-7 h6{font-size:0.8rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:2rem;--container-default-padding-right:1rem;--container-default-padding-bottom:2rem;--container-default-padding-left:1rem;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:3em;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-size:0.8em;--e-global-typography-text-font-size:1.2rem;--e-global-typography-d4623dc-font-size:0.8rem;--e-global-typography-5341c0e-font-size:1.2rem;font-size:1.2rem;}.elementor-kit-7 a{font-size:1.2rem;}.elementor-kit-7 h1{font-size:3.2em;line-height:1.2em;letter-spacing:0px;}.elementor-kit-7 h2{line-height:1.4em;letter-spacing:0.3px;}.elementor-kit-7 h3{font-size:2.2em;line-height:1.4em;}.elementor-kit-7 h4{font-size:1.2rem;line-height:1.4rem;letter-spacing:0.3px;}.elementor-kit-7 h5{font-size:1rem;line-height:1.2em;letter-spacing:0.3px;}.elementor-kit-7 h6{font-size:0.7rem;line-height:1.1em;letter-spacing:0.3px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-size:1.2rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:1rem;--container-default-padding-right:0.5rem;--container-default-padding-bottom:1rem;--container-default-padding-left:0.5rem;}}/* Start custom CSS *//* Start changing text color of the CTAS in sams widget: ONLY contained image content widget */
/*
#contained-image-content-bttn-color .contact-button{
    color: #FFFFFF ;
}


#contained-image-content-bttn-color .contact-button:hover {
    color: #1E3456;
}
*/
/* END changing text color of sams CTAS*/

/* Start of image change on hover (cards)*/
#change-image-container {
  position: relative;
  overflow: hidden; /* Ensures no overflow from the images */
}

#change-image-container #change-image {
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

/* Add an additional class for the hover image */
#change-image-container #hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the container */
  opacity: 0; /* Hide hover image by default */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

#change-image-container:hover #change-image {
  opacity: 0; /* Hide default image on hover */
}

#change-image-container:hover #hover-image {
  opacity: 1; /* Show hover image on hover */
}
/* End of image change on hover (cards)*/




/* Rounded top image for cards start */
.elementor-kit-7 .hover-container:hover .rounded-top img {
  transition: border-radius 0.3s ease-in-out;
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
}
/* Rounded top image for cards end */


/* CSS For rounded image hover + container grow start */
.elementor-kit-7 .hover-container-grow {
  position: relative;
  overflow: hidden; /* Ensures child elements stay within the container */
  width: 100%; /* Full width */
  height: 87vh; /* Initial height */
  transition: height 0.5s ease; /* Smooth transition for height change */
}

.elementor-kit-7 .hover-container-grow:hover {
  height: 100vh;
}

.elementor-kit-7 .hover-container-grow:hover .rounded-top img {
  transition: border-radius 0.3s ease-in-out;
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
}


@media (max-width: 1366px) {
 .elementor-kit-7 .hover-container-grow {
     height: 96vh;
 }
}

/* CSS For rounded image hover + container grow end */

/* CSS For the 4 column Hot tub, swim spa, service, and sauna card template */

.elementor-kit-7 .shrink-card {
  position: relative;
  overflow: hidden; /* Ensures child elements stay within the container */
  width: 100%; /* Full width */
  height: 80vh; /* Initial height */
  transition: height 0.5s ease; /* Smooth transition for height change */
}

.elementor-kit-7 .shrink-card:hover {
  height: 90vh; /* Expand container height on hover */
}

.elementor-kit-7 .shrink-card .card-image {
  transition: transform 0.3s ease; /* Smooth transition for image scaling */
}

.elementor-kit-7 .shrink-card:hover .card-image {
  transform: scale(0.8); /* Shrink the image on hover */
}

.elementor-kit-7 .shrink-card .card-header {
  position: absolute;
  width: 100%;
  top: 80%; /* Initially below the card */
  z-index: 1; /* Ensure header appears above image */
  opacity: 1; /* Initially visible */
  transition: top 0.7s ease, opacity 0.5s ease; /* Transition for position and opacity */
}

.elementor-kit-7 .shrink-card:hover .card-header {
  animation: moveHeader 1.2s forwards; /* Apply animation on hover */
}

/* Keyframes for the animation */
@keyframes moveHeader {
  0% {
    top: 80%; /* Initial position */
    opacity: 1; /* Initially visible */
  }
  10% {
    opacity: 0; /* Fade out during movement */
  }
  20% {
    top: 3%;
    opacity: 0; /* Fade out during movement */
  }
  100% {
    top: 3%; /* Final position */
    opacity: 1; /* Finally visible */
  }
}

.elementor-kit-7 .shrink-card .card-text {
  position: absolute;
  bottom: 0%; /* Position text box at the bottom */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center text box */
  width: 90%; /* Full width with some padding */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease;
  z-index: 2; /* Ensure text box is above other elements */
}

.elementor-kit-7 .shrink-card:hover .card-text {
  opacity: 1; /* Show text box on hover */
}

/* Responsive Design */

@media (max-width: 1366px) {
  .elementor-kit-7 .shrink-card:hover .card-image {
    transform: scale(0.85); /* Shrink the image to 75% on mobile screens */
  }
  .elementor-kit-7 .shrink-card .card-text {
    bottom: 0%;
  }
  .elementor-kit-7 .shrink-card:hover {
    height: 90vh;
  }
}/* End custom CSS */