/*========== GOOGLE FONTS ==========*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/*========== GOOGLE FONTS ==========*/

/*========== VARIABLES CSS ==========*/
:root {
    --header-height: 3.5rem;
    --nav-width: 219px;
    --first-color: #2b3991;
    --second-color: #00adef;
    --third-color: #cc0c01;
    --fourth-color: #f7f7f7;
    --fifth-color: #6d6d6d;

    /* Primary Color with Opacity */
    --first-color-75: #2b3991bf;
    --first-color-50: #2b399180;
    --first-color-25: #2b399140;
    --first-color-10: #2b39911a;

    --second-color-75: #00adefbf;
    --second-color-50: #00adef80;
    --second-color-25: #00adef40;
    --second-color-10: #00adef1a;

    --first-color-75: #cc0c01bf;
    --first-color-50: #cc0c0180;
    --first-color-25: #cc0c0140;
    --first-color-10: #cc0c011a;

    /* End */

    --body-color: #e4e9f7;
    --text-color: #fff;
    --text-color-black: #000000;

    --success: #0dff00;
    --error: #cc0c01;

    /*========== Trasnition ==========*/
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;

    --header-height: 3.5rem;
    --nav-width: 240px;

    --dark-first-color: #0e174d;
    --gray-color: #bfc1c2;
    --box-shadow-color: #4e73df;
    --active-color: #ffffffb3;
    --background-color: #e7e7e7;
    --border-bg-color: #4e73df;
    --footer-bg-color: #4e73df;

    --modal-content-custom-background: #ffffff;

    /*========== Font and typography ==========*/
    --heading-font: "Work Sans", sans-serif;
    --body-font: "Roboto", sans-serif;
    --normal-font-size: 0.938rem;
    --small-font-size: 0.75rem;
    --smaller-font-size: 0.75rem;
    --very-smaller-font-size: 0.65rem;

    --font-1: 40px;
    --font-2: 32px;
    --font-3: 28px;
    --font-4: 24px;
    --font-5: 20px;
    --font-6: 16px;
    --font-7: 12px;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    /*========== z index ==========*/
    --z-fixed: 100;

    /*========== opacity ==========*/
    --opacity-25: 0.25;
    --opacity-50: 0.5;
    --opacity-75: 0.75;
    --opacity-100: 1;
}

/*========== summernote ==========*/

/* Align toolbar to the center */
.toolbar-center {
    display: flex !important;
    justify-content: center;
}

/* Ensure the text starts at the left */
.summernote {
    text-align: left !important;
}

/* .btn-close {
    filter: invert(1);
} */

/* Default styles (for desktop and larger screens) */
.responsive-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 50vh;
    /* Make the height 50% of the viewport height */
    overflow: hidden;
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobile devices (small screens) */
@media (max-width: 400px) {
    .responsive-iframe-container {
        padding-bottom: 75%;
        height: 85vh;
        /* Adjust height for mobile */
    }
}

/* Tablets (medium screens) */
@media (min-width: 481px) and (max-width: 768px) {
    .responsive-iframe-container {
        /* padding-bottom: 60%; Adjust aspect ratio to 16:10 for tablets */
        height: 85vh;
        /* Adjust height for tablets */
    }
}

/* Laptops and small desktops */
@media (min-width: 769px) and (max-width: 1024px) {
    .responsive-iframe-container {
        padding-bottom: 56.25%;
        /* 16:9 aspect ratio for laptops */
        height: 85vh;
        /* Adjust height for laptops */
}
}

/* Large desktops */
@media (min-width: 1025px) {
    .responsive-iframe-container {
        padding-bottom: 56.25%;
        /* 16:9 aspect ratio for large screens */
        height: 85vh;
        /* Adjust height for large desktops */
    }
}