@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@400;700&display=swap');

:root {
    --primary-pink: #DB859E; 
    --text-grey: #0000;
}



body {
    font-family: 'Montserrat';
    overflow-x: hidden;
    font-size: 1.2rem; ;
    color: #000000;
    /* background-color: ; */
}

.welcome{
    font-family: 'Montserrat';
    overflow-x: hidden;
    font-size: 1.5rem;
    color: #000000;
    
}

/* Updated to Playfair Display as per your earlier brand style */
.serif-font {
    font-family: 'Playfair Display', 'Georgia', 'serif';
}

.navbar-brand {
    letter-spacing: 4px;
    /* font-size: 0rem; */
}

.nav-link {
    font-size: 1.3rem;
    font: bold;
    letter-spacing: 1px;
    color: #000 !important;
}

/* This will only affect the elements where you add the 'serif-font' class */
.serif-font {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700;
    font-style: normal;
    /* This will fix the & symbol appearance specifically for this font */
}

.logo-ampersand {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600; /* Adjust weight to match the logo's thickness */
    padding: 0 5px;   /* Adds a little breathing room around the sign */
}

/* Pink Title Bars */
.section-title-bar {
    background-color: var(--primary-pink);
    color: white;
    text-align: center;
    padding: 90px 0;
    font-size: 1.8rem;
    letter-spacing: 5px;
}
html {
    scroll-behavior: smooth;
}

/* This creates an offset so the heading doesn't hide behind the navbar */
#about-section {
    scroll-margin-top: 80px; /* Adjust this number to match the height of your navbar */
}
/* Service Blobs - Merged and Fixed */
.service-blob {
    width: 180px;  /* Larger size looks better with text */
    height: 180px;
    background-color: #f8f8f8;
    overflow: hidden;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s ease-in-out; /* Smooth transition for hover */
    cursor: pointer;
}

/* HOVER EFFECT: 20% Increase */
.service-blob:hover {
    transform: scale(1.2);
}

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

.pink-text {
    color: var(--primary-pink);
    font-size: 0.9rem;
    letter-spacing: 1px;
}


/*contact us*/
/* Color Palette */
.bg-pink-light {
    background-color: #e8b4b4; /* Matching the reference header */
    color: white;
}

.tracking-widest {
    letter-spacing: 0.5rem;
}

/* Custom Input Styling */
.custom-input {
    background-color: #f8e8e8; /* Soft pink tint for form fields */
    border: 1px solid #d8a8a8;
    border-radius: 4px;
    padding: 12px;
}

.custom-input:focus {
    background-color: #fff;
    border-color: #e8b4b4;
    box-shadow: 0 0 0 0.25rem rgba(232, 180, 180, 0.25);
}

/* Submit Button */
.btn-pink-submit {
    background-color: #d19a9a;
    color: white;
    padding: 10px;
    border: none;
    transition: 0.3s;
}

.btn-pink-submit:hover {
    background-color: #b87e7e;
    color: white;
}
/* Official Brand Colors on Hover */
.bi-facebook:hover { color: #1877F2; }
.bi-instagram:hover { color: #E4405F; }
.bi-twitter-x:hover { color: #000000; }

.rounded-circle {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#contact {
    scroll-margin-top: 80px; /* Adjust this number based on the height of your navbar */
}





/* Modal Styling */
.modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}

.modal-header {
    background-color: var(--primary-pink);
    color: white;
    border-radius: 20px 20px 0 0;
}

.modal-title {
    letter-spacing: 1px;
}

/* Customizing the Read More Button */
.btn-outline-dark {
    border: 1px solid #333;
    transition: all 0.3s ease;
}

.btn-outline-dark:hover {
    background-color: var(--primary-pink);
    border-color: var(--primary-pink);
    color: white;
}