.left-radius-3 {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.right-radius-3 {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.right-top-radius {
    border-top-right-radius: 20px;
}

.right-bottom-radius {
    border-bottom-right-radius: 20px;
}

/*  todo .. everyone image needs own frame ... probably*/

/*q site desktom right related start*/

.frame31-site-right {
    width: 304px;
    height: 180px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*        border-radius: 20px;*/
    gap: 1px;
}

.image-container31-site-right {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex; /* Add flex to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border-radius: 20px;
    border: 1px solid #e6e6e6;
}

    .image-container31-site-right img {
        width: 150%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 20px;
    }

    .image-container31-site-right a {
        display: flex; /* Make anchor flex container */
        width: 100%;
        height: 100%;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
    }

.frame32-site-right {
    width: 304px;
    height: 180px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 20px;
    gap: 1px;
}

.image-container32-site-right {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex; /* Add flex to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border: 1px solid #e6e6e6;
}

    .image-container32-site-right img {
        width: 150%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .image-container32-site-right a {
        display: flex; /* Make anchor flex container */
        width: 100%;
        height: 100%;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
    }

.frame33-site-right {
    width: 304px;
    height: 180px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    /*   justify-content: space-between;*/
    /*       border-radius: 20px;*/
    gap: 1px;
}

.image-container33-site-right {
    width: calc((100% - 2px) / 3);
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex; /* Add flex to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border: 1px solid #e6e6e6;
}

    .image-container33-site-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .image-container33-site-right a {
        display: flex; /* Make anchor flex container */
        width: 100%;
        height: 100%;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
    }

/*q site desktom right related end*/

.aaaImage {
    height: 60px;
    width: 50px;
    border-radius: 10px;
}

.category-container32 {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between; /* Changed to space-between to put text on left, image on right */
    align-items: center;
    border: 1px solid white;
    height: 66px;
    width: 300px;
    margin-bottom: 10px; /* Added margin for spacing between containers */
    /*        background-color: #F2F4F6;*/
    border-radius: 10px;
    font-size: 10px
}

    .category-container32 img {
        height: 60px;
        width: 45px;
        object-fit: cover;
        object-position: center;
        margin-right: 2px; /* Add some spacing from the right edge */
    }

    .category-container32 a {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between; /* Changed to space-between */
        align-items: center;
        text-decoration: none;
        color: #333;
        padding: 0 2px; /* Added padding for text */
    }

.aaa-background-0 {
    background-color: #f0f0ff;
}

.aaa-background-1 {
    background-color: #e1f3f7;
}

.aaa-background-2 {
    background-color: #ffede7;
}

.aaa-background-3 {
    background-color: #f3fcf2;
}

.explore-container {
    margin-left: 20px;
}

.explore-title {
    font-size: 18px;
    margin-bottom: 20px;
}

.image-grid {
    display: flex;
    width: 560px;
    height: 300px;
    background: #fff;
    /*        border-radius: 20px;*/
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.portrait-section {
    width: 220px;
    height: 100%;
    position: relative;
}

.landscape-section {
    width: 320px;
    height: 100%;
    margin-left: 1px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.image-container {
    position: relative;
    overflow: hidden;
    /*       border-radius: 20px;*/
    border: 1px solid #e6e6e6;
}

.portrait-container {
    width: 100%;
    height: 100%;
}

.landscape-container {
    width: 100%;
    height: 50%;
}



.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Gradient overlay for text visibility ... todo same as more explore */
.image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    pointer-events: none;
}

/* category info images ... desktop lists categories, attributes, subjects */

/*just 1 image for category*/

.frame-info-480-300-lists-d {
    width: 560px;
    height: 300px;
    overflow: hidden;
    display: flex;
    position: relative;
    /*  this comments has solved problem with left shift of images with different aspect ratios 1.33 2.17  .. object-fit: cover*/
}

.image-container-info-480-300-lists-d {
    position: absolute; /* Changed to absolute */
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #e6e6e6;
}

    .image-container-info-480-300-lists-d img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 100%;
        object-fit: cover;
        /*#20256e*/
    }

/*   2 images for category*/
.image-grid-2-lists-d {
    display: flex;
    width: 560px;
    height: 300px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    gap: 1px;
    padding: 0;
    margin: 0;
}

.image-section2-lists-d {
    flex: 1; /* Instead of width: 100%, flex makes equal halves */
    position: relative;
    overflow: hidden;
    display: block;
    border: 1px solid #e6e6e6;
}

.image-container-2-lists-d {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .image-container-2-lists-d img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
/*2  ends*/

/*3 images for category*/

.image-grid-3-lists-d {
    display: flex;
    width: 560px;
    height: 300px;
    background: #fff;
    overflow: hidden;
    gap: 1px;
    padding: 0;
    margin: 0;
}

.portrait-section-3-lists-d {
    width: 243px;
    /*        Original width as specified height: 100%;*/
    position: relative;
}

.landscape-section-3-lists-d {
    width: 315px;
    /*     Remaining width (480px - 203px - 2px gap)*/
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /*     2px gap between landscape images*/
}

.image-container-3-lists-d {
    position: relative;
    overflow: hidden;
    display: block;
    border: 1px solid #e6e6e6;
}

.portrait-section-3-lists-d .image-container-3-lists-d {
    width: 100%;
    height: 100%;
}

.landscape-section-3-lists-d .image-container-3-lists-d {
    width: 100%;
    height: 50%;
    /*  Accounts for the 2px gap*/
}

.image-container-3-lists-d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*   categories info end .. lists desktop*/

/*    more explore -- desktop lists */

.frame-more-explore-lists-d {
    width: 560px;
    height: 250px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1px;
}

.image-container-more-explore-lists-d {
    width: calc(25% - 2px);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .image-container-more-explore-lists-d a {
        width: 100%;
        height: 220px;
        display: block;
    }

    .image-container-more-explore-lists-d img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 20px;
        border: 1px solid #e6e6e6;
    }

    .image-container-more-explore-lists-d label {
        font-size: 11.8px;
        font-weight: 100;
        display: block;
        margin-top: 4px;
    }

/*        more explore end*/


.info-styles {
    margin-left: 20px !important;
    margin-top: 20px;
    width: 560px;
    font-size: 12.8px;
    line-height: 1.28em;
    background-color: #e1f3f7;
    /*        background-color: #f0f0ff;    */ /*bing has this*/
    border-radius: 20px;
    padding: 15px;
}

.scroll-container-m {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.scroll-content-m {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 0 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    margin-top: 0;
    overflow-y: visible; /* allow shadows to show above/below */
    padding-top: 4px;
    padding-bottom: 4px;
}

    .scroll-content-m::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }

.category-group-m {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 0.5rem 0 0;
}

.category-link-m {
    font-size: 12.8px;
    font-weight: 400;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 10px;
}

.subcategory-link-m {
    font-size: 12.8px;
    font-weight: 400;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 10px;
}

.decoration-class:hover,
.decoration-class:focus,
.decoration-class:active {
    text-decoration: none;
}

.span-class {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.link-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.icon-height {
    height: 12px;
}

.frame-img-profile2 {
    width: 227px;
    height: 340px;
    overflow: hidden;
    border-radius: 10px;
}

.image-container-profile2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #20256e;
}

    .image-container-profile2 img {
        /*height and width are set by aspect ratio*/
        object-fit: cover;
        object-position: center;
    }

.video-content2 {
    width: 590px;
    height: 340px;
    border-radius: 10px;
    flex-shrink: 0;
}

.scroll-container4a {
    width: 100%;
    /*  max-width: 500px;*/
    position: relative;
    padding: 0px 0;
}

.scroll-content4a {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    overflow-y: visible; /* allow shadows to show above/below */
    padding-top: 4px;
    padding-bottom: 4px;
}

    .scroll-content4a::-webkit-scrollbar {
        display: none;
    }

.category-group4a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0px;
    /*    border: 1px solid #e5e7eb;
        border-radius: 20px;
        background-color: #fff;*/
}

.category-link4a {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 10px;
}

.subcategory-link4a {
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 10px;
}

.scroll-button4 {
    border-color: gray;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /*     background-color: #cacaca;*/
    /*        border: 1px solid gray;*/
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    /*        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    z-index: 10;
    /*      color: gray;*/
}

    .scroll-button4.left {
        left: -16px;
    }

    .scroll-button4.right {
        right: -16px;
    }

    .scroll-button4:hover {
        background-color: #f9fafb;
    }

    .scroll-button4.visible {
        display: flex;
    }

    /*main qsite more explore starts*/
.frame-more-explore-site-m {
    width: calc(100vw - 30px);
    height: 48vw;
    overflow: hidden;
    display: flex;
    gap: 2px;
}

.image-container-more-explore-site-m {
    width: calc((100vw - 40px) / 3);
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    position: relative;
}

    .image-container-more-explore-site-m img {
        width: 150%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border: 1px solid #e6e6e6;
    }

.more-explore-link {
    flex: 1;
}

/*main qsite more explore ends*/

.scroll-container4 {
    width: 100%;
    /*  max-width: 500px;*/
    position: relative;
}

.scroll-content4 {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.5rem;
    padding-top: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
}

.some-references-2 {
    /*border-color: aqua;*/
    font-size: 14px;
    font-weight: 600;
    padding-inline-end: 2px;
    padding-inline-start: 2px;
    float: right;
    /*   padding-top: 5px;*/
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    line-height: 18px; /*same as svg height  */
}

/*
        related image ... just desktop  .. qsite right*/

.frame-related-site-right {
    width: 300px;
    height: 180px;
    overflow: hidden;
    display: flex;
    position: relative;
}

.image-container-related-site-right {
    /*     width: 300px;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    position: absolute;
    border: #e6e6e6 1px solid;
}

    .image-container-related-site-right img {
        width: 150%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

/*
        related image ... just desktop  end */


/*more explore qSite desktop bottom  .. starts*/

.frame-more-explore-site {
    width: 1000px;
    height: 260px;
    overflow: hidden;
    display: flex;
    gap: 2px;
}

.image-container-more-explore-site {
    width: 164px;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    position: relative;
}

    .image-container-more-explore-site img {
        width: 100%;
        height: 150%;
        object-fit: cover;
        object-position: center;
        border: 1px solid #e6e6e6;
    }

/*more explore qSite desktop bottom ..ends*/



/*related desktop site bottom  starts*/

    /*  todo .. everyone image needs own frame ... probably*/
    .site-related-bottom-frame323 {
        width: 645px;
        height: 320px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 16px;
    }

    .site-related-bottom-href-c {
        width: calc(25% - 8px);
        text-decoration: none !important;
        border-radius: 10px;
        border: 1px solid #ccc;
        position: relative;
        height: 320px;
        display: block;
    }

    .site-related-bottom-image-container323 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

        .site-related-bottom-image-container323 img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            object-position: center;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .site-related-bottom-image-container323 label {
            font-weight: 600;
            display: block;
            margin-top: 4px;
        }

    .site-related-bottom-label-c {
        padding: 5px 5px;
        /*        text-decoration: none;*/
        text-align: center;
        font-size: 12.8px;
    }

    .site-related-bottom-span-c {
        top: 0;
        padding: 5px;
        text-align: center;
        display: block;
    }

    .site-related-bottom-country-c {
        top: 0;
        padding: 5px;
        right: 0;
        display: block;
        height: 15px;
        color: #3aa5ba;
        text-align: right;
        font-size: 12px;
        font-weight: 500;
    }

    .site-related-bottom-info-icon {
        bottom: 0;
        padding: 5px;
        position: absolute;
        right: 0;
    }
/*4*/

/*related desktop site bottom  ends*/

/*related mobile site bottom  starts*/

    .site-related-bottom-frame323-m {
        width: 100%;
        height: 260px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2px;
    }

    .site-related-bottom-href-c-m {
        width: calc(33% - 2px);
        text-decoration: none !important;
        display: block;
        border-radius: 10px;
        border: 1px solid #ccc;
        position: relative;
    }

    .site-related-bottom-image-container323-m {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

        .site-related-bottom-image-container323-m img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            object-position: center;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

    .site-related-bottom-label-c-m {
        padding: 5px 5px;
        text-decoration: none;
        font-size: 11.8px;
        font-weight: 600;
        margin-top: 4px;
        /*        border: 1px solid #ccc;
        border-radius: 10px;*/
        text-align: center;
    }

    .site-related-bottom-span-c-m {
        top: 0;
        padding: 5px;
        text-align: center;
        display: block;
    }

    .site-related-bottom-info-icon-m {
        bottom: 0;
        padding: 5px;
        position: absolute;
        right: 0;
    }

    .site-related-bottom-country-c-m {
        top: 0;
        padding: 5px;
        right: 0;
        display: block;
        height: 15px;
        color: #3aa5ba;
        text-align: right;
        font-size: 12px;
        font-weight: 500;
    }

/*related mobile site bottom  ends*/

/*follow desktop q site bottom  starts*/

.outer-f {
    width: 1000px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.inner-f {
    width: 400px;
    height: 100px;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center contents vertically */
    align-items: center; /* Center contents horizontally */
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: #000000;
}

    .inner-f label {
        width: 100%; /* Make label take full width */
        text-align: center; /* Center the text */
        font-size: 14px;
        margin-bottom: 5px; /* Space between label and icons */
    }

    .inner-f .icon-container {
        display: flex;
        justify-content: center;
        align-items: center; /* Add vertical centering */
        /*gap: 2px;*/ /* Space between icons */
    }

.icon-container label {
    display: flex;
    align-items: center;
    height: 80px;
    text-align: center;
    font-size: 14px;
    width: 100px;
}

.color-style {
    color: #808080;
}

/*follow desktop q site bottom  ends*/


/*lists another sites  starts*/

.other-sites-displayed {
    display: inline-block !important;
    color: #666666;
    background-color: #f5f5f5;
    font-size: 16px;
    padding: 10px 10px;
    border-radius: 12px;
    width: 360px !important;
}

.other-sites-displayed2 {
    /*        display: inline-block !important;*/
    color: #666666;
    /*        background-color: #f5f5f5;*/
    background-color: #f0f0ff;
    font-size: 16px;
    padding: 10px 10px;
    border-radius: 12px;
    width: 560px !important;
}

/*#divAnotherSites a:hover {*/
/* Add any hover effects you want here */
/*}*/

/*lists another sites  ends*/