/* Button Content Section (Separate Grid Layout) */
#email .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal columns for this section */
    /*gap: 20px;*/
    max-width: 1200px;
    margin: 0 auto;
}

/* Left Column (Buttons) */
#email .col-md-4 {
    grid-column: span 4;
}

/* Right Column (Content) */
#email .col-md-8 {
    grid-column: span 8;
}

/* Button Styling */
.content-btn {
    position: relative;
    display: block;
    padding: 12px 20px;
    background-color: #1a2836;
    color: white;
    text-align: center;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    width: 100%; /* Full width for buttons */
}

.content-btn:hover {
    background-color: #068ed9;
    color: #ffffff;
}

.content-btn:hover:before {
    background-color: #ffffff;
}

.content-btn::before {
    content: '';
    height: 10px;
    width: 10px;
    background-color: #068ed9;
    border-radius: 360px;
    position: absolute;
    left: 10%;
    top: 40%;
}

/* Content Styling */
.content-item {
    display: none; /* Hide all content by default */
}

.content-item.active {
    display: block; /* Show content when the active class is added */
}

/* Content Styling */
.content-desc {
    display: none; /* Hide all content by default */
}

.content-desc.active {
    display: block; /* Show content when the active class is added */
}

#email .content-item img {
    width: 70%;
    display: block;
    margin: 0 auto;
}

/* Media Queries for Responsiveness */

/* Medium Screens - 768px to 991px */
@media (max-width: 991px) {
    #email .row {
        grid-template-columns: repeat(12, 1fr);
    }

    /* Left Column spans 12 on medium screens */
    #email .col-md-4 {
        grid-column: span 12;
    }

    /* Right Column spans 12 on medium screens */
    #email .col-md-8 {
        grid-column: span 12;
    }
}

/* Small Screens - 480px to 767px */
@media (max-width: 768px) {
    #email .row {
        grid-template-columns: repeat(12, 1fr);
    }

    /* Left Column spans 12 on smaller screens */
    #email .col-md-4 {
        grid-column: span 12;
    }

    /* Right Column spans 12 on smaller screens */
    #email .col-md-8 {
        grid-column: span 12;
    }
}

.email-bl1 {
    background-color: #36516f;
}
.email-bl1 #msg {
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0 0 20px 0;
}

.desctext {
    color: #068ed9;
    font-size: 1rem;
}

.email-bl2 {
    background-color: #304152;
}
.email-bl3 {
    background-color: white;
    color: #1A2836;
}
.email-bl3 h5 {
    margin: 0 0 0 0;
}
.email-bl3 hr {
    margin: 0 0 30px 0;
}

.email-demo {
    color: color(srgb 0.1016 0.1584 0.2127);
}

.content-btn.active {
    background-color: color(display-p3 0 0.445 0.855);
    color: #fff;
    border-color: #022f23;
}