/* ==================== [ 1500px ] ==================== */
@media (min-width: 1500px) {

    /* ==================== [ Common Start ] ==================== */
    .container {
        max-width: calc(var(--container) + (var(--container-padding) * 2));
    }

    /* ==================== [ Common End ] ==================== */
}

/* ==================== [ 1399px ] ==================== */
@media (max-width: 1439px) {
    .home-page-img { min-width: 1000px; height: auto; background-size: contain; background-repeat: repeat; width: 100%; aspect-ratio: 1440 / 119; }
}


/* ==================== [ 1399px ] ==================== */
@media (max-width: 1399px) {
    :root {
        /* Font sizes */
        --fs-sm: 14px;
        --fs-base: 16px;
        --fs-h1: 40px;
        --fs-h2: 32px;
        --fs-h3: 26px;
        --fs-h4: 24px;
        --fs-h5: 22px;
        --fs-h6: 20px;

        --fs-24: 20px;
        --lh-32: 30px;
        
        --fs-20: 18px;
        --fs-26: 22px;

        /* Line heights */
        --lh-sm: 20px;
        --lh-base: 24px;
        --lh-h1: 50px;
        --lh-h2: 40px;
        --lh-h3: 34px;
        --lh-h4: 32px;
        --lh-h5: 28px;
        --lh-h6: 24px;
    }


    .docs-content .main-content-block .content-left .copy-anchor { top: 3px; }

    .docs-content .main-content-wrapper { padding-block: 0; }

    .module.module-3 .module-heading .subtitle * { font-size: 18px; }
    .module.module-3 .module-heading .title * { margin-bottom: 16px; }

    .thumbnail-card .text .title * { font-size: 30px; }
    .thumbnail-card .text { gap: 6px; }
}

/* ==================== [ 1199px ] ==================== */
@media (max-width: 1199px) {
    .docs-content .main-content-block .content-right { display: none; }

    /* brand-hub start */
    .brand-hub-block .brand-hub-item .brand-hub-content { padding:  20px; }
    .brand-hub-main .heading .title * { font-size: 50px; letter-spacing: -4%; }
    /* brand-hub end */

    .media-libraries { padding-bottom: 70px; }
    .brand-hub-item .brand-hub-content .title * { font-size: 50px; letter-spacing: -3px; }
    .media-libraries-main .heading .title * { font-size: 50px; letter-spacing: -3px; }

    .header .container-fluid {
        padding-inline: 60px
    }

    .header .navbar .navbar-nav {
        gap: 20px
    }

    .header li:has(>.seprator) {
        margin-right: 0px
    }

    .header li:has(>.seprator) .seprator {
        margin-left: 0px
    }

    .module.module-2 .module-heading .disc * { font-size: 16px; }
    .module-image-description .download-link-wrapper { margin-top: 30px; }

    .collections-card .image-content { width: 80px; }

    .brand-hub { margin-bottom: 80px; }
    .brand-hub-main .heading { padding-block: 80px; }
}

@media(max-width: 992px) {
    body:has(.navbar-collapse.show) {
        overflow: hidden
    }

    .module-spacing .module { padding-top: 30px; }
}

/* ==================== [ 991px ] ==================== */
@media (max-width: 991px) {
    :root {
        /* Font sizes */
        --fs-sm: 14px;
        --fs-base: 16px;
        --fs-h1: 34px;
        --fs-h2: 26px;
        --fs-h3: 24px;
        --fs-h4: 22px;
        --fs-h5: 20px;
        --fs-h6: 18px;

        --fs-24: 18px;
        --lh-32: 28px;
        
        --fs-20: 16px;
        --fs-26: 20px;

        /* Line heights */
        --lh-sm: 20px;
        --lh-base: 24px;
        --lh-h1: 44px;
        --lh-h2: 34px;
        --lh-h3: 30px;
        --lh-h4: 28px;
        --lh-h5: 26px;
        --lh-h6: 24px;

        --paragraph-font-size: 16px;
    }

    h1, h2, h3, h4, h5, h6 { margin-block: 0 20px; }

    /* .side-navigation-wrapper .bg-sidebar { position: fixed; inset: 0; background-color: var(--white); opacity: .7; } */

    .docs-content .main-content-block .content-left { max-width: 100%; width: 100%; }

    /* brand-hub start */
    /* .brand-hub { padding: 40px 0; } */


    .brand-hub-block .brand-hub-item .image { height: 460px; }

    /* brand-hub end */

    /* media-libraries start */
    /* .media-libraries-main .heading .disc * { font-size: 22px; line-height: 130%; } */
    .media-libraries-main .heading { margin-bottom: 40px; }

    /* media-libraries end */

    .docs-content .main-content-block .content-left .copy-anchor { top: 0; }
    .docs-content .footer-text.footer-big { padding-block: 16px; }


    /* brand-hub start */
    /* .brand-hub { padding: 100px 0 40px; } */
    .brand-hub-main .heading { padding-block: 70px; }
    .brand-hub-block .brand-hub-item .image { height: 460px; }
    .brand-hub-main .heading .title * { font-size: 44px; letter-spacing: -3%; }
    .brand-hub-item .brand-hub-content .title * { font-size: 40px; letter-spacing: -2px; }
    /* brand-hub end */

    /* media-libraries start */
    .media-libraries-main .heading .title * { font-size: 40px; letter-spacing: -2px; }
    /* .media-libraries-main .heading .disc * { font-size: 22px; line-height: 130%; } */
    .media-libraries-main .heading { margin-bottom: 40px; }
    /* media-libraries end */

    .header { padding: 14px 0; }
    .header .top-nav {
        padding-inline: 24px
    }

    .header .hidden-mob {
        display: none
    }

    .header .container-fluid {
        padding-inline: 40px
    }

    .header .navbar {
        padding: 10px 0;
        width: 100%;
        overflow-x: clip
    }

    .header .navbar .navbar-nav .dropdown>.dropdown-menu {
        position: absolute;
        visibility: visible !important;
        opacity: 1 !important;
        top: 112px;
        position: fixed;
        height: calc(100% - 112px);
        width: 100%;
        max-width: 100%;
        left: 100%;
        transition: left .3s ease-in-out;
        -webkit-transition: left .3s ease-in-out;
        -moz-transition: left .3s ease-in-out;
        -ms-transition: left .3s ease-in-out;
        -o-transition: left .3s ease-in-out;
        padding: 20px;
        overflow: auto;
        margin: 0;
        box-shadow: none !important;
        border: 0 !important
    }

    .header .navbar .navbar-nav .dropdown:hover>.dropdown-menu {
        visibility: visible !important;
        opacity: 1 !important;
        top: 112px;
        height: calc(100% - 112px);
        width: 100%;
        max-width: 100%;
        left: 100%;
        transition: left .3s ease-in-out;
        -webkit-transition: left .3s ease-in-out;
        -moz-transition: left .3s ease-in-out;
        -ms-transition: left .3s ease-in-out;
        -o-transition: left .3s ease-in-out;
        padding: 20px;
        overflow: auto
    }

    .header .navbar .navbar-nav .dropdown:hover>a:after {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg)
    }

    .header .navbar .navbar-nav .dropdown>.dropdown-menu.show {
        left: 0
    }

    .header .navbar .navbar-nav .dropdown .dropdown-menu {
        filter: unset;
        -webkit-filter: unset
    }

    .header .navbar .navbar-nav .dropdown .dropdown-menu li .dropdown-item {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(0, 0, 0, .1)
    }

    .header .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-menu-title {
        cursor: pointer;
        position: relative;
        padding: 10px 0;
        margin-bottom: 20px;
        display: flex !important;
        align-items: center;
        gap: 10px
    }

    .header .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-menu-title::before {
        position: relative;
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.8894 2.58002L10.7027 1.40002L4.10937 8.00002L10.7094 14.6L11.8894 13.42L6.46938 8.00002L11.8894 2.58002Z" fill="%235F3DC4"/> </svg> ')
    }

    .header .navbar .navbar-nav .dropdown .dropdown-toggle::before {
        display: none
    }

    .header .navbar .navbar-nav {
        gap: 0
    }

    .header .nav-menu-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        gap: 20px;
        overflow: auto
    }

    .header .navbar-toggler {
        z-index: 1
    }

    .header .navbar-collapse {
        padding: 112px 20px 20px 20px;
        z-index: 1;
        position: fixed;
        top: 0;
        right: -100vw;
        width: 100%;
        transition: height 0s, right .3s ease-in-out !important;
        height: 100dvh !important;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        width: 100%;
        -webkit-transition: height 0s, right .3s ease-in-out !important;
        -moz-transition: height 0s, right .3s ease-in-out !important;
        -ms-transition: height 0s, right .3s ease-in-out !important;
        -o-transition: height 0s, right .3s ease-in-out !important
    }

    .header .navbar-collapse ul {
        width: 100%
    }

    .header .navbar-collapse.show {
        right: 0
    }

    .header .nav-item .nav-link {
        padding: 12px 20px;
        font-size: 16px;
        letter-spacing: .8px;
        font-weight: 500;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }

    .header .nav-item.hidden-desk {
        display: block
    }

    .header .action-parent {
        margin-top: auto
    }

    .header .dropdown>a:hover::after {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg)
    }

    .header .dropdown .dropdown-toggle::after {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg)
    }

    .header li:has(>.seprator) {
        display: none
    }

    .header .navbar .navbar-nav .dropdown .subDD .dropdown-menu {
        top: 112px !important;
        height: calc(100% - 112px)
    }

    .side-navigation-wrapper { display: flex; position: fixed; left: -100%; bottom: 0; z-index: 21; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; }
    .side-navigation-wrapper.open { left: 0;  }
    .side-navigation-wrapper .sidebar-navigation { height: calc(100vh - 84px); top: 80px; }

    /* .main-title { padding: 100px 0 20px; } */

    /* .docs-content { padding-top: 0; } */
    .side-navigation-wrapper { display: none; }

    /* Module CSS */
    .module-wrapper { padding-block: 0 60px; }
    .module { padding-top: 60px; }
    .docs-content .footer-wrapper { margin-top: 60px; }
    .docs-content .content-left { padding-top: 60px; }

    .module.module-3 .module-heading .subtitle * { font-size: 16px; }
}

/* ==================== [ 767px ] ==================== */
@media (max-width: 767px) {
    :root {
        --fs-26: 16px;
    }

    .card-parent-block .card .title * { font-size: 18px; }

    .card-parent-block .card .disc * { font-size: 14px; }

    .card-parent-block .row>* { padding-inline: 8px; }

    .card-parent-block .row { margin-inline: -8px; row-gap: 16px; }

    /* brand-hub start */
    .brand-hub-block .brand-hub-item .image { height: 380px; }
    /* brand-hub end */

    /* media-libraries start */
    .media-libraries-item { max-width: 100%; margin: 0 auto; }
    /* media-libraries end */

    /* brand-hub start */
    .brand-hub-block .brand-hub-item .image { height: 380px; }
    .brand-hub-main .heading .title * { font-size: 36px; }
    .brand-hub-item .brand-hub-content .title * { font-size: 30px;  }
    /* brand-hub end */

    /* media-libraries start */
    .media-libraries {padding-bottom: 40px}
    .media-libraries-item { max-width: 100%;  margin: 0 auto; }
    .media-libraries-main .heading .title * { font-size: 30px; }
    /* media-libraries end */

    /* Header  */
    .header .container-fluid { padding-inline: 24px }

    /* Module CSS */
    .module-wrapper { padding-block: 0 40px; }
    .module { padding-top: 40px; }
    .docs-content .content-left { padding-top: 40px; }
    .docs-content .footer-wrapper { margin-top: 40px; }

    .image-text-module { flex-direction: column; align-items: start; }
    .image-text-module.module-5 { flex-direction: column; }
    .module .row { row-gap: 20px; margin-inline: -10px; }
    .module .row >* { padding-inline: 10px; }
    .module-card { gap: 12px; }
    .module-card .module-card-text { gap: 8px; }

    .image-text-module { gap: 24px; }

    /* Typeface */
    .typeface-img-block { padding: 20px 30px; }
    .type-item-block { gap: 30px; }
    .type-item-block .preview { gap: 24px; }
    .type-item-block .preview-big * { font-size: 60px; }
    .type-item-block .preview-all * { font-size: 14px; }

    .type-item-title span { top: -10px; font-size: 8px; }
    
    .module-image-description .download-link-wrapper { margin-top: 20px; }

    .brand-hub { margin-bottom: 50px; }
    .brand-hub-main .heading { padding-block: 50px; }
}

/* ==================== [ 575px ] ==================== */
@media (max-width: 575px) {
    .row { row-gap: 10px; }
    
    /* Typeface */
    .type-item-block .preview { border-right: unset; flex-wrap: wrap; gap: 16px; }
    .typeface-img-block * { font-size: 24px; }
}