/* --- Global & Typography Settings --- */
:root {
    --color-primary: #4a7044; /* Deep Green for the background */
    --color-text-light: #f9f9f9; /* Near White for elegance */
    --font-heading: 'Playfair Display', serif; /* Classic, bold heading font */
    --font-body: 'Montserrat', sans-serif; /* Clean, modern body font */
	--color-primary1: #f9f9f9; /*  ear White for the background */
	--color-text-light1: #4a7044; /* Deep Green for elegance */
}

/* --- body */{
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: #333;
    display: flex;   
    min-height: 100vh; }/* Ensures the container is centered vertically */


/* --- Main Container Layout (Elegant Split) --- */
.elegant-container {
    display: flex;
    flex-direction: column; 
    width: 100%;
	justify-content: center;
    align-items: center;
    max-width: 1200px; /* Constrain the overall width */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Base heading styles */
h1, h2, h3, h4 {
  font-family: inherit;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

/* Mobile-first sizes */
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }

/* Optional: weight control */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 500; }
h4 { font-weight: 500; }



/* --- Image Side --- */
.image-side {
    width: 100%;
    padding: 2rem; /* Creates a clean white border/padding around the image */
    background-color: white; /* Ensures the padding is white */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Image Sidefor contact changed width (from 100) color and padding from 2--- */
.image-side-cont {
    width: 88%;
    padding: 2rem; /* Creates a clean white border/padding around the image */
    background-color: #4a7044; /* Ensures the padding is green */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}


.image-side img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 300px; /* Optional: Constrain height on smaller screens */
    object-fit: cover;
}


.card-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
	background: #000; /* optional letterbox fill */
    display: block;
}

/* --- Text Side --- */
.text-side {
    width: 100%;
    background-color: var(--color-primary);
    padding: 3rem 4rem; /* Generous padding for an open feel */
    box-sizing: border-box;
    color: var(--color-text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* --- Text Side --- */
.text-side1 {
    width: 100%;
    background-color: var(--color-primary1);
    padding: 3rem 4rem; /* Generous padding for an open feel */
    box-sizing: border-box;
    color: var(--color-text-light1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.heading {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--color-text-light); /* Underline for elegance */
    padding-bottom: 0.5rem;
}

.body-text {
    font-family: var(--font-body);
    font-weight: 300; /* Light weight for a modern look */
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
}

/* --- Media Query for Desktop (Horizontal Split) --- */
@media (min-width: 768px) {
    .elegant-container {
        flex-direction: row; /* Horizontal layout on wider screens */
        min-height: 600px; /* Ensure a minimum height for the elegant split */
    }

    .image-side, .text-side {
        width: 50%; /* Equal 50/50 split */
        padding: 4rem; /* Increase padding for desktop */
    }

    .image-side img {
        max-height: none; 
    }
}