/* Google Fonts Import */
/* @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Quicksand:wght@300;400;500;600;700&display=swap'); */

:root {
    --primary-color: #4ECDC4;
    /* Teal */
    --secondary-color: #FF6B6B;
    /* Coral */
    --accent-color: #FFE66D;
    /* Yellow */
    --dark-color: #2D3436;
    --light-color: #F7FFFF;
    --text-color: #555;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --border-radius: 20px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Quicksand', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-color);
    overflow-x: hidden;
    max-width: 1920px;
    margin: 0 auto;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for boxed look */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fredoka', cursive;
    color: var(--dark-color);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 60px 0;
    padding-top: 40px;
    /* Reduced top padding for tighter flow after hero */
}

.center {
    text-align: center;
}

/* Typography Helpers */
.highlight {
    color: var(--secondary-color);
}

.accent-text {
    color: var(--primary-color);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--white);
    border: 2px solid var(--secondary-color);
}

.btn-secondary {
    background-color: var(--white);
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.btn-large {
    font-size: 1.1rem;
    padding: 15px 40px;
    margin: 10px;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    height: 80px;
    position: fixed;
    width: 100%;
    max-width: 1920px;
    /* Match body max-width */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-family: 'Fredoka', cursive;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-color);
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    font-weight: 600;
    color: var(--dark-color);
}

.nav-links a:hover {
    color: var(--primary-color);
}

.btn-nav {
    background-color: var(--primary-color);
    color: var(--white) !important;
    padding: 10px 25px;
    border-radius: 50px;
}

.btn-nav:hover {
    background-color: #3dbdb4;
}

.menu-toggle {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: var(--transition);
    background-color: var(--dark-color);
}

/* Mobile Nav */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 999;
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-link {
    font-size: 2rem;
    margin: 20px 0;
    font-family: 'Fredoka', cursive;
    color: var(--dark-color);
}

/* Hero Section */

/* Hero Section */

/* Hero Section */
.hero {
    position: relative;
    min-height: 85vh;
    /* Keep height but move content up via padding */
    display: flex;
    align-items: flex-start;
    /* Move content to top */
    background-color: #CDF0EA;
    overflow: hidden;
    padding: 130px 0 100px;
    /* Increased top padding to clear nav */
}


.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 2;
}

.hero-text {
    flex: 1;
    padding-right: 50px;
    animation: fadeInLeft 1s ease-out;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 25px;
    color: var(--dark-color);
    line-height: 1.1;
}

.hero h1 .highlight {
    color: var(--secondary-color);
    position: relative;
    display: inline-block;
}

.hero h1 .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: rgba(255, 230, 109, 0.6);
    z-index: -1;
    border-radius: 5px;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 35px;
    color: #555;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInRight 1s ease-out;
}

.blob-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #ffffff;
    border-radius: 46% 54% 39% 61% / 55% 36% 64% 45%;
    z-index: -1;
    animation: blobFloat 10s infinite alternate;
    opacity: 0.6;
}

.dog-img {
    width: 100%;
    max-width: 550px;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
    animation: float 6s ease-in-out infinite;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
}

/* Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes blobFloat {
    0% {
        border-radius: 46% 54% 39% 61% / 55% 36% 64% 45%;
        transform: rotate(0deg);
    }

    100% {
        border-radius: 58% 42% 61% 39% / 46% 57% 43% 54%;
        transform: rotate(10deg);
    }
}

/* About Section */
.about-section {
    background-color: var(--white);
    padding-top: 0;
    margin-top: -50px;
    /* Pull content up over the excessive whitespace of the wave */
    position: relative;
    /* Ensure it stays on top if needed, though wave is z-index 1, this needs to be higher? Text is content. */
    z-index: 2;
    /* Ensure text sits on top of anything if overlap occurs */
}

.row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.col-img,
.col-text {
    flex: 1;
}

.img-wrapper {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.img-wrapper img {
    border-radius: var(--border-radius);
    transform: scale(1);
    transition: var(--transition);
}

.img-wrapper:hover img {
    transform: scale(1.05);
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Decorate line under title */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    background-color: var(--primary-color);
    margin-top: 10px;
    border-radius: 10px;
}

.center .section-title::after {
    margin: 10px auto 0;
}

.feature-list {
    margin-top: 20px;
}

.feature-list li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Services */
.services-section {
    background-color: #f9fdfd;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.service-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    border-bottom: 5px solid transparent;
}

.service-card:hover {
    transform: translateY(-10px);
    border-bottom: 5px solid var(--primary-color);
}

.icon-circle {
    width: 100px;
    height: 100px;
    background: #eafbf9;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Info Banner */
.info-banner {
    background: linear-gradient(135deg, var(--primary-color), #3dbdb4);
    color: var(--white);
    text-align: center;
    padding: 60px 20px;
}

.info-banner h3 {
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 10px;
}

.info-banner strong {
    font-size: 1.2rem;
    color: var(--accent-color);
}

/* Gallery */
.gallery-section {
    background-color: var(--white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.gallery-item {
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 250px;
    box-shadow: var(--shadow);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Contact */
.contact-section {
    background-color: #fff9f0;
    /* Ultra light coral/orange hint */
}

.reverse-mobile {
    align-items: flex-start;
}

.col-form,
.col-info {
    flex: 1;
}

.form-card,
.info-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    height: 100%;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.info-item .icon {
    font-size: 1.5rem;
    margin-right: 15px;
    background: #fff4f4;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.info-item h4 {
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.link-text {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

.map-embed {
    margin-top: 30px;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #eee;
}

.form-status {
    margin-top: 15px;
    font-weight: 600;
    text-align: center;
}

.form-status.success {
    color: green;
}

.form-status.error {
    color: var(--secondary-color);
}

/* Footer */
footer {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 30px 0;
    text-align: center;
}

.small {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 10px;
}

/* Animations */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 3s infinite ease-in-out;
}

/* Media Queries */
@media (max-width: 991px) {
    .container {
        padding: 0 30px;
    }

    .hero h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
    }

    .hero {
        padding: 90px 0 40px;
        height: auto;
        min-height: auto;
        display: block;
    }

    .hero-container {
        flex-direction: column-reverse;
        /* Image on top? Or text on top? Let's do Text on top for conversion, actually, looking at the design, maybe Image then Text is cuter? Let's stick to valid HTML order (Text first) but visual order might be good. Let's do flex-direction: column; so Text is top. */
        flex-direction: column;
        text-align: center;
    }

    .hero-text {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        margin: 0 auto 30px;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
    }

    .hero-image {
        width: 100%;
        margin-top: 20px;
    }

    .blob-bg {
        width: 300px;
        height: 300px;
    }

    /* Stack other sections */
    .row {
        flex-direction: column;
    }

    .reverse-mobile {
        flex-direction: column-reverse;
    }

    .info-card {
        margin-bottom: 40px;
    }
}