:root {
    /*Color Variables */
    --black: #1C232B;
    --grey: #6C7289;   
    --cream: #F2EAE2;  
    --white:#FFFFFF;  
    --green-500: #3D8168;  
    --green-700: #1A4032;
       
    /* Text Presets with Responsive Font Sizes */
    --text-preset-1: 700 clamp(24px, 4.5vw, 32px)/1 "Fraunces", sans-serif;
    --text-preset-2: 700 clamp(12px, 2vw, 14px)/1.1 "Montserrat", sans-serif;
    --text-preset-3: 400 clamp(12px, 2vw, 14px)/1.6 "Montserrat", sans-serif;
    --text-preset-4: 400 clamp(10px, 1.8vw, 12px)/1.2 "Montserrat", sans-serif;
    --text-preset-5: 400 clamp(11px, 1.9vw, 13px)/1.2 "Montserrat", sans-serif;


}

html, body {
    height: 100%; /* Ensures full height */
    background-color: var(--cream);
    display: flex;
    justify-content: center; /* Centers the container horizontally */
    align-items: center; /* Centers vertically if needed */
}

.t1 {
    font: var(--text-preset-1);
    margin-top: 24px;
    margin-left: 32px;
    }

.t2 {
    font: var(--text-preset-2);
    margin-top: 32px;
    margin-left: 32px;
    }
.t22 {
    font: var(--text-preset-2);

    }

.t3 {
    font: var(--text-preset-3);
    margin-top: 24px;
    margin-left: 32px;
    }
    
.t4 {
    font: var(--text-preset-4);
    letter-spacing: 5px;
    margin-top: 32px;
    margin-left: 32px;
    }
        
.t5 {
    font: var(--text-preset-5);
    text-decoration: line-through;  
    margin-left: 32px;
    
    }

.t6 {
    font: var(--text-preset-1);
    color: var(--green-500);
    margin-top: 320px;
    margin-left: 32px;
    }


.span1 {
    display: inline-block;  /* Now it respects margin & padding */
    margin-top: 32px;
    margin-left: 32px;
    font: var(--text-preset-1);
    color: var(--green-500);
    
    }

/* Card Container */
.container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    flex-wrap: wrap; 
    gap: 0px; /* Space between cards */
    
    
}

/* Card Styling */
.card1 {
    width: 300px;
    padding: 0px;
    background: var(--white);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 12px;  /* Top-left corner */
    border-bottom-left-radius: 12px; /* Bottom-left corner */
   
    
}
.card2 {
    width: 300px;
    padding: 0px;
    background: var(--white);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    
}
/* Image Styling */
.card1 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents distortion */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
    background-color:var(--green-500); /* Green color */
    color: white;
    font: var(--text-preset-5);
    font-weight: bold;
    padding: 8px 16px;
    border:none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 32px;
    margin-left: 32px;
    margin-bottom: 32px; /* Ensures space below the button */
    width: 236px;
    
}

/* Hover Effect */
.btn:hover {
    background-color:var(--green-700); /* Darker green */
}

/* Button Icon */
.btn img {
    width: 20px;  /* Adjust size as needed */
    height: 20px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Prevents cutting */
    border-radius: 0; /* Removes any rounded edges */
}