.cg_sr_banner {
    
    /* Replace with your image */
    background-size: cover;
    background-position: center;
    height: 300px;
    position: relative;
    color: white;
}

.cg_sr_banner_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Dark overlay */
}

.cg_sr_banner_content {
    position: relative;
    z-index: 2;
}

a:hover {
    text-decoration: none !important;
}

.ttl {
    font-size: 50px !important;
    color: #F5E61B;
}





.bg-redd {
    background-color: #F81F1F !important;
}

.text-red {
    color: #F81F1F;
}

.button-92 {
    --c: #fff;
    /* text color */
    background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p, 100%)/300% no-repeat,
        #F81F1F;
    /* background color */
    color: #0000;
    border: none;
    transform: perspective(500px) rotateY(calc(20deg*var(--_i, -1)));
    text-shadow: calc(var(--_i, -1)* 0.08em) -.01em 0 var(--c),
        calc(var(--_i, -1)*-0.08em) .01em 2px #0004;
    outline-offset: .1em;
    transition: 0.3s;
}

.button-92:hover,
.button-92:focus-visible {
    --_p: 0%;
    --_i: 1;
}

.button-92:active {
    text-shadow: none;
    color: var(--c);
    box-shadow: inset 0 0 9e9q #0005;
    transition: 0s;
}

.button-92 {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    cursor: pointer;
    padding: .1em .3em;
}



#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

#customers td,
#customers th {
    border: 0.25px solid #ffffffa3;
    padding: 8px;
    color: #fff;
}


#customers tr:hover {
    background-color: #000000ca;
}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #f81f1f;
    color: white;
}

/* Float buttons */
.cg_sr_float-buttons {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 99;
}

.cg_sr_float-buttons button {
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 50px;
}


/* CSS */
.button-93 {
    --c: #fff;
    /* text color */
    background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p, 100%)/300% no-repeat,
        #D90000;
    /* background color */
    color: #0000;
    border: none;
    transform: perspective(500px) rotateY(calc(20deg*var(--_i, -1)));
    text-shadow: calc(var(--_i, -1)* 0.08em) -.01em 0 var(--c),
        calc(var(--_i, -1)*-0.08em) .01em 2px #0004;
    outline-offset: .1em;
    transition: 0.3s;
    width: 100px;
}

.button-93:hover,
.button-93:focus-visible {
    --_p: 0%;
    --_i: 1;
}

.button-93:active {
    text-shadow: none;
    color: var(--c);
    box-shadow: inset 0 0 9e9q #0005;
    transition: 0s;
}

.button-93 {
    font-weight: bold;
    font-size: 2rem;
    margin: 0;
    cursor: pointer;
    padding: .1em .3em;
}



.tag-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
}

.rail-container {
    overflow: hidden;
    height: 36px;
    padding-top: 6px;
    cursor: pointer;
    scroll-behavior: smooth;
}

.tag {
    background: #e3ebf7;
    border-radius: 8px;
    padding: 3px 8px 4px;
    margin: 5px 4px;
    color: #333;
    font-weight: 500;
    user-select: none;
    border: 1px solid #e3ebf7;
    transition-duration: 0.25s;
    white-space: nowrap;
}

.tag:first-child {
    margin-left: 16px;
}

.tag:last-child {
    margin-right: 16px;
}

.tag:hover {
    background: #d40000;
    color: #fff;
}

.tag:active {
    background: #d40000;
}

.tag-selected {
    background: #d40000;
    color: #fff;
    border: 1px solid #d40000;
}

.tag-selected:hover {
    background: #d40000;
    color: #fff;
}

.tag-selected:active {
    background: #d40000;
    color: #fff;
}







.faq-container {
    width: 80%;
    margin: 50px auto;
    font-family: Arial, sans-serif;
}

.faq-question {
    background-color: #343434;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.faq-question i {
    margin-left: 10px;
}

.faq-answer {
    padding: 15px;
    background-color: #343434;
    border-left: 3px solid #ff0000;
    margin-bottom: 10px;
    display: none;
    /* Hidden by default */
    transition: 2s ease-in-out;
    color: #fff;
}

.faq-question.active+.faq-answer {
    display: block;

}




.cg_buttons {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cg_btn {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    flex: 1;
}

.cg_btn.type {
    background-color: #fa3535;
}

.cg_btn.call {
    background-color: #17a2b8;
}

.cg_btn.whatsapp {
    background-color: #25d366;
    width: 100%;
    /* Default to full width for WhatsApp */
}




.btn-left-con,
.btn-right-con {
    position: absolute;
}

.btn-right-con {
    right: 0;
}

.btn-left,
.btn-right {
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 100%;
    cursor: pointer;
    transition-duration: 0.25s;
    box-shadow: 0 0 16px 24px #000000;
    background: #d40000;
}

.btn-left {
    margin-left: 2px;
}

.btn-right {
    margin-right: 2px;
}

.btn-left:hover,
.btn-right:hover {
    background: #d40000;
}

.btn-left:active,
.btn-right:active {
    background: #d40000;
}

.d-none {
    display: none;
}




body,
html {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

/* Main Profile Card */
.cg_sr_profile_card {
    display: flex;
    flex-direction: row;
    margin: 20px auto;
    background-color: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    max-width: 900px;
}

/* Background Image with Blur */
.cg_sr_image {
    flex: 0 0 370px;
    /* Fixed width for the image */
    overflow: hidden;
    position: relative;
}

.bg-blur {
    background-image: url('images/bnr/yg/9.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    /* Blur effect */
    height: 100%;
    position: relative;
}

.bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    /* Ensure it stays above the blurred background */
    text-align: center;
}

.bg-foreground {
    width: 80%;
    height: auto;
    border-radius: 10px;
    z-index: 3;
    position: relative;
}

/* Text Area */
.cg_sr_text {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
}

h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

.cg_sr_subtitle {
    font-size: 16px;
    color: #9e9e9e;
    margin-bottom: 20px;
}

p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cg_sr_buttons {
    display: flex;
    gap: 10px;
}

.button-93,
.button-92 {
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    border: none;
    cursor: pointer;
}

.button-93 {
    background-color: #004DFF;
    /* WhatsApp green */
}

.button-92 {
    background-color: #D90000;
    /* Blue for portfolio */
}

/* Responsiveness */
@media (max-width: 768px) {
    .cg_sr_profile_card {
        flex-direction: column;
        /* Stack the image and text vertically */
    }

    .cg_sr_image {
        width: 100%;
        /* Make the image take full width */
    }

    .bg-foreground {
        width: 100%;
    }

    .cg_sr_text {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    h4 {
        font-size: 20px;
    }

    .cg_sr_subtitle {
        font-size: 14px;
    }

    p {
        font-size: 13px;
    }

    .button-93,
    .button-92 {
        padding: 8px 15px;
        font-size: 12px;
    }
}





.cg_sr_card_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    margin: 50px 0px;
}

.cg_sr_card {
    background-color: #2c2c2c;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    max-width: 350px;
    width: 100%;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Blurred background image */
.cg_sr_card .blurred-bg {
    height: 250px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    /* Blur effect */
    z-index: 1;
    opacity: 0.7;
    /* Add some transparency to the blur */
}

/* Upper image (non-blurred) */
.cg_sr_card img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    border-bottom: 4px solid #fff;
    /* Border to separate from the content */
}

.cg_sr_card_info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    z-index: 3;
    background-color: #333;
    /* Dark background for text */
}

.cg_sr_name_age {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cg_sr_name_age h4 {
    font-size: 18px;
    margin: 0;
    color: #ffffff;
    /* White text for contrast */
}

.cg_sr_verified {
    font-size: 14px;
    color: #25d366;
}

.cg_sr_verified i {
    color: #25d366;
    margin-right: 5px;
}

.cg_sr_card p {
    font-size: 14px;
    line-height: 1.6;
    color: #ddd;
    /* Lighter gray for text */
}

/* Hover effect */
.cg_sr_card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
    transform: translateY(-5px);
}

/* Responsiveness */
@media (max-width: 768px) {
    .cg_sr_card_container {
        flex-direction: column;
        align-items: center;
    }

    .cg_sr_card {
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .cg_sr_card_info {
        padding: 15px;
    }

    .cg_sr_name_age h4 {
        font-size: 16px;
    }

    .cg_sr_card p {
        font-size: 13px;
    }
}



.cg_sr_image_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns on desktop */
    gap: 20px;
    margin-bottom: 30px;
}

.cg_sr_image_grid img {
    width: 100%;
    height: 300px;
    /* Set height to 300px */
    border-radius: 10px;
    object-fit: cover;
    /* Ensures the image fits the container while maintaining aspect ratio */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
}

.cg_sr_image_grid img:hover {
    transform: scale(1.05);
}

/* Responsiveness for tablet and mobile */
@media (max-width: 768px) {
    .cg_sr_image_grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

@media (max-width: 480px) {
    .cg_sr_image_grid {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
    }
}

/* Divider */
hr {
    border: none;
    border-top: 1px solid #555;
    margin: 40px 0;
}

/* Horizontal card section */
.cg_sr_card_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.cg_sr_horizontal_card {
    display: flex;
    background-color: #2c2c2c;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    width: 100%;
    transition: all 0.3s ease;
}

.cg_sr_horizontal_card img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    flex-shrink: 0;
}

.cg_sr_horizontal_card_info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cg_sr_horizontal_card_info h3 {
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.cg_sr_horizontal_card_info p {
    font-size: 14px;
    color: #cccccc;
    margin: 0;
}

.cg_sr_horizontal_card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
    transform: translateY(-5px);
}







.card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns on desktop */
    gap: 20px;
    margin-top: 20px;
}

.sr_card {
    border-radius: 10px;
    border: 0.25px solid #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s, box-shadow 0.3s;
}

.sr_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}

/* Responsiveness */
@media (max-width: 768px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

@media (max-width: 480px) {
    .card-container {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
    }
}


.main-gallery {
    padding: 20px; 
    border-radius: 10px;
}

.filters-button-group {
    text-align: center;
    margin-bottom: 20px;
}

.filters-button-group .button {
    background-color: #D90000;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 5px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.filters-button-group .button.is-checked {
    background-color: #ffffff;
    color: #D90000;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.grid-item {
    padding: 10px;
    width: calc(25% - 20px); /* Four items per row */
    position: relative;
    box-sizing: border-box; /* Ensure padding is included in width */
}

.grid-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.grid-item img:hover {
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .grid-item {
        width: calc(33.33% - 20px); /* Three items per row */
    }
}

@media (max-width: 768px) {
    .grid-item {
        width: calc(50% - 20px); /* Two items per row */
    }
}

@media (max-width: 480px) {
    .grid-item {
        width: 100%; /* One item per row */
    }
}