/* 
Theme Name: Serenus
Theme URL: https://cellarcode.com
Description: Serenus Teema
Author: Cellar Code
Author URI: https://cellarcode.com
Template: coachify
Version: 1.0
Text Domain: serenus
*/

/*@import url("../coachify/style.css");*/

@font-face {
  font-family: 'Brittany Signature';
  src: url('fonts/BrittanySignature.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
	--g-primary-color: #101032;
	--g-primary-color-rgb: 16, 16, 50;
	--g-secondary-color: #24296B;
	--g-secondary-color-rgb: 36, 41, 107;
	--g-button-background-color: #5B82FF;
	--g-button-background-color-rgb: 80, 135, 80;
  --g-color-primary-accent-color: #ADD8E630;

	--g-heading-color: var(--g-primary-color);
	--g-font-color: var(--black-color);
	--g-background-color: var(--white-color);
}


.primary-color {
  color: var(--g-primary-color);
}

.secondary-color {
  color: var(--g-secondary-color);
}

.primary-bg {
  background-color: var(--g-primary-color);
}

.secondary-bg {
  background-color: var(--g-secondary-color);
}

.button-bg {
  background-color: var(--g-button-background-color);
}

/* Links styling */
a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--g-secondary-color);
}

a:visited {
  color: var(--g-secondary-color);
}

:is(button, [type=button], [type=reset], [type=submit]) {
	background-color: var(--g-button-background-color);
	color: var(--white-color);
  border: none;
  padding: 0.5em 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.header-main {
	background-color: var(--g-primary-color);
}

.header-main .nav-menu li a,
.header-main .menu-item a {
    color: white !important;
}

.sub-menu {
	background-color: #000747 !important;
}

.elementor-element-70069a5 .elementor-spacer-inner {
    background-color: #5b82ff;
}

.mobile-header-wrap,
.mobile-header-wrapper {
    background-color: rgb(0, 7, 71);
}

.submenu-toggle-btn {
	color: white !important;
}

.elementor-element-f8bf213 {
  background-color: var(--g-color-primary-accent-color) !important;
}

.footer-t {
    display: none;
}

.elementor-icon svg[width="113"][height="21"] {
    display: none !important;
}

img[src*="saunamokki-1"] {
    width: 100%;
    min-width: 600px;
     max-width: 1200px;
    display: block;
    margin: 0 auto;
    height: auto;
}

.elementor-image-box-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Tai vaihtoehtoinen ratkaisu */
.elementor-image-box-wrapper {
    text-align: center;
    width: 100%;
}

figure.elementor-image-box-img {
    margin: 0 auto;
    display: block;
}

.elementor-element-025ff7a .elementor-icon svg {
    opacity: 0;
}


        .info-card {
                     background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 56rem;
            width: 1500px;
	    display: flex;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .info-card:hover {
            transform: scale(1.02);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .info-card-image {
            overflow: hidden;
	    position: relative;
        }

        .info-card-image img {
            width: 100%;
	    height: 100% !important;
            object-fit: cover;
            display: block;
	    object-position: right;
            transition: transform 0.4s ease-in-out;
        }

        .info-card:hover .info-card-image img {
            transform: scale(1.05);
        }

        .info-card-content {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .info-card-title {
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.75rem;
        }

        .info-card-description {
            color: #4b5567;
            line-height: 1.625;
            margin-bottom: 1.5rem;
        }

        .info-card-location-title {
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.75rem;
        }

        .info-card-location-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .info-card-location-item {
            display: flex;
            align-items: flex-start;
        }

        .info-card-icon {
            width: 1.25rem;
            height: 1.25rem;
            color: #059669;
            margin-right: 0.75rem;
            margin-top: 0.25rem;
            flex-shrink: 0;
        }

        .info-card-location-text {
            color: #4b5567;
        }

        .info-card-location-text strong {
            font-weight: 600;
            color: #374151;
        }

	.elementor-element-665e15b {
		display:none;
	}

	.instagram-section {
		display: none;
	}

	.elementor-element-adbe410 h3.elementor-heading-title {
    font-family: 'Brittany Signature', cursive;
    font-size: 30px !important;
}

.blog svg.fallback-svg {
  display: none !important;
}

.elementor-element-d57e1eb .elementor-widget-image img {
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 10; /* Keeps both images the same shape */
}

/* 2. Hover effect for those images */
.elementor-element-d57e1eb .elementor-widget-image:hover img {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* 3. Style the specific text widget (ID: 6325783) */
.elementor-element-6325783 {
    margin-top: 35px !important; /* Adds space between images and text */
    padding-left: 15px;
    border-left: 3px solid #0D173B; /* Adds the blue accent line */
}


        @media (min-width: 768px) {
            .info-card {
                display: flex;
            }

            .info-card-image,
            .info-card-content {
                width: 70%;
            }

            .info-card-image img {
                height: 100%;
            }

            .info-card-content {
                padding: 2.5rem;
            }

            .info-card-title {
                font-size: 1.875rem;
                line-height: 2.25rem;
            }
        }

	@media screen and (max-width: 768px) {
		.info-card {
			flex-direction: column;
			width: 100%;
		}

		.elementor-element-025ff7a .elementor-icon-wrapper::before {
			width: 220px;
		}

		.serenus-facility-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .facility-image-wrapper img {
        aspect-ratio: auto;
    }
	}