/* ====================
   Text + Image Block Layouts (50/50)
   ==================== */

   .custom-text-image-block {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    width: 100%;
       
}

/* 67% Layout */
.text-left-67 .custom-text-image-block, .text-right-67 .custom-text-image-block {
    min-height: 500px; 
}

.text-left .custom-text-image-block, .text-right .custom-text-image-block {
    min-height: 600px; 
}

.circle-image-left .custom-text-image-block,
.circle-image-right .custom-text-image-block {
    min-height: 500px; 
}

/* ==========================
   Text Left, Image Right (50/50)
   ========================== */

   .text-left, .text-right {
    width: 95%;
    max-height: 680px;
    min-height: 650px;
    border-radius: 8px;

    display: flex;
    flex-direction: row;
    align-items: stretch; 
  
}

.text-left .text, .text-right .text {
    flex: 1;
    width: 50%;
    text-align: left; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    padding: 60px;  
    min-height: 100%; 
    background-color: inherit; 
    box-sizing: border-box; 
    margin: 0; 
}

/* Remove margin-left and margin-right for equal space between text and image */
.text-left .text, .text-right .text {
    margin: 0; 
}

/* Text styling */
.text-left .text h1, .text-right .text h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 0px;
    color: inherit;
    padding: 20px;
    
}

.text-left .text h2, .text-right .text h2 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 0px;
    color: inherit;
    padding: 20px;
    text-align: center;
}

.text-left .text h3, .text-right .text h3 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0px;
    color: inherit;
    padding: 20px;
    
}

.text-left .text h4, .text-right .text h4 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0px;
    color: inherit;
    padding: 60px;
   
}

.text-left .text h5, .text-right .text h5 {
    font-size: 1.8rem;
    font-weight: bold;
    color: inherit;
    padding: 20px;
    
}

.text-left .text p, .text-right .text p {
    font-size: 1.5rem;
    color: inherit;
    margin-top: 0; 
}

/* Image Styling */
.text-left .image, .text-right .image {
    flex: 1;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 680px;
}

.text-left .image img, .text-right .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 680px;
    padding:20px;
}

.text-right h1, .text-left h1{
    line-height: 2;
}

/* ==========================
   Circle Image Layouts (Common Styles)
   ========================== */

/* Container for both left & right circle image layouts */
.circle-image-left .circle-image-container,
.circle-image-right .circle-image-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10%;
    gap: 20px;
    min-height: 550px;
    
}

/* Ensure spacing between image and text */
.circle-image-left .circle-image-container .circle,
.circle-image-right .circle-image-container .circle {
    border-radius: 50%;
    width: 350px;
    height: 350px;
    object-fit: cover;
    
}

/* Set text styles for paragraphs inside both layouts */
.circle-image-left .custom-text-image-block p,
.circle-image-right .custom-text-image-block p {
    font-size: 24px;
    margin: 15px 0;
    text-align: left;
}

.circle-image-right .text h4,
.circle-image-left .text h4 {
    text-align: left; 
    font-size: 25px;
    font-weight: bold;
    
}

.circle-image-right .text h3,
.circle-image-left .text h3 {
    text-align: left; 
    font-size: 30px;
    font-weight: bold;
   

}

.circle-image-right .text h2,
.circle-image-left .text h2 {
    text-align: center; 
    font-size: 35px;
    font-weight: bold;

}

.circle-image-right .text h1,
.circle-image-left .text h1 {
    text-align: left; 
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 15px;
}

/* Adjust text positioning */
.circle-image-left .text{
    font-size: 18px;
    max-width: 500px;
    text-align: left; 
    margin-left: 0; 
}

.circle-image-right .text {
    font-size: 18px;
    max-width: 500px;
    text-align: left; 
    margin-left: 0; 
}

/* ==========================
   Individual Layout Adjustments
   ========================== */

/* Circle Image Left (Text on Right) */
.circle-image-left .circle-image-container {
    flex-direction: row; 
}

/* Circle Image Right (Text on Left) */
.circle-image-right .circle-image-container {
    flex-direction: row; 
}

/* ---- Full Image Background Color Block ---- */
.full-image-background .custom-text-image-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.full-image-background .custom-text-image-block .text {
    background-color: white;
    padding: 20px;
    text-align: center;
}

.full-image-background .custom-text-image-block .image img {
    width: 100%;
    height: auto;
    max-height: 500px; 
}


/* ==========================
   67/33 Layout Styles
   ========================== */
.text-left-67, .text-right-67 {
    display: flex;
    flex-direction: row;
    align-items: stretch; 
    width: 100%;
    height: 100%; 
}

.text-left-67 .text, .text-right-67 .text {
    flex: 1;
    text-align: left; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    padding: 80px;  
    min-height: 100%; 
    background-color: inherit; 
    box-sizing: border-box; 
    margin: 0; 
    width: 67%; 
}

/* Text styling */
.text-left-67 .text h2, .text-right-67 .text h2 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 0px;
    color: inherit;
    
}

.text-left-67 .text p, .text-right-67 .text p {
    font-size: 2rem;
    color: inherit;
    margin-top: 0; 
}

/* Image Styling */
.text-left-67 .image, .text-right-67 .image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-left-67 .image img, .text-right-67 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 680px;
}

/* =====================
   Additional Utility Styles
   ===================== */
.custom-text-image-block .text h2 {
    margin-top: 0;
}

.custom-text-image-block .text p {
    margin: 15px;
}

@media (max-width: 768px) {
    .custom-text-image-block {
        flex-direction: column;
        text-align: center;
    }

    .text-left, .text-right,
    .text-left-67, .text-right-67 {
        flex-direction: column;
        max-height: unset;
        min-height: unset;
    }

    .text-left .text, .text-right .text,
    .text-left-67 .text, .text-right-67 .text {
        width: 100%;
        padding: 40px;
        text-align: center;
    }

    .text-left .image, .text-right .image,
    .text-left-67 .image, .text-right-67 .image {
        width: 100%;
        height: auto;
    }

    .text-left .image img, .text-right .image img,
    .text-left-67 .image img, .text-right-67 .image img {
        max-height: 400px;
    }

}