@media (max-width: 991px) {

  .just-mobile {
    display: block !important;
}
    .navbar.fixed-top {
        width: 80px;
        border: none !important;
    }

    /* Background when mobile menu is open */
    .navbar.navbar-bg {
        background: #1A2A42 !important;
        width: 50%;
        height: 100vh;
        align-items: flex-start;
    }

    .navbar-nav .nav-item {
        padding: 0 0.7rem;
    }

    .navbar-nav .nav-item:not(:last-child)::after {
        height: 18px;
    }

    .navbar {
        border-bottom: none;
        width: 50%;
        transition: none;
    }

    .navbar a.navbar-brand.text-white {
        display: none;
    }

    .navbar a.btn.btn-primary {
        display: none;
    }

    .navbar button.navbar-toggler {
        border: none;
    }

    .navbar button.navbar-toggler span.navbar-toggler-icon {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);
    }

    .navbar button.navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }



    .navbar-nav {display: block;}


    .navbar-nav .nav-item a.nav-link {
        color: white !important;
        font-weight: 400;
        padding: 20px 0;
    }

    .navbar-nav .nav-item:hover {
        background: transparent;
    }

    .navbar-nav .nav-item {
        position: relative;
    }

    .navbar-nav .nav-item:not(:nth-last-child(2)):not(:nth-child(1)):not(:last-child)::before {
        content: '';
        position: absolute;
        height: 1px;
        width: 70px;
        bottom: 0px;
        background: #ffffff;
        background: linear-gradient(261deg, rgba(39, 60, 90, 0) 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
    }

    .navbar-nav .nav-item:not(:last-child)::after {
        display: none;
    }

    li.nav-item.just-mobile a {
        display: block !important;
        margin-bottom: 15px;
        margin-top: 20px;
    }

    li.nav-item.just-mobile a.btn.btn-primary {
        margin: 0;
        box-shadow: 0px -3px 11.5px 0px #FFFFFF47 inset;
        background: #2B4369;
        border: none;
        border-bottom: 1px solid #2B4369;
        border-radius: 4px;
        padding: 0.6rem 1.5rem;
        font-weight: 300;
        font-size: 1rem;
        color: white !important;
        margin-top: 25px;
        margin-bottom: 10px;
    }



    .top-passport-cards, .how-to-steps {
        flex-direction: column;
        align-items: center;
    }
    img {
        max-width: 100%;
    }


    /******************passport power*******************/

    .passport-index-title span{
        font-size: 2.3rem;
    }

    .passport-index-title span.text-vector {
        margin-bottom: 5px;
    }

    .passport-index-title span.text-vector.vector-lg {
        margin-left: 5px;
    }

    .passport-index-title span.text-vector.vector-md {
        margin-right: 0px;
    }

    .passport-index-title img {
        width: 80%;
    }

    .passport-index-desc {
        width: 100%;
    }

    .passport-details .row {
        flex-direction: column-reverse;
    }

    .passport-details img.img-passport {
        width: 40%;
        position: absolute;
        right: 20px;
        top: 70px;
    }

    .passport-details {
        margin-bottom: 20px;
    }

    .passport-power .visa-requirements-table, .passport-power .passport-details {
        padding: 25px 20px;
    }

    div#map-legend {
        position: relative;
        flex-direction: row; /* ensure they're in a row */
        gap: 5px; /* space between items */
        flex-wrap: wrap;
        max-width: 100%;
        display: flex;
        /* two per row */
        justify-content: space-between;
    }

    #map-legend .badge {
        flex: 0 0 calc(50% - 5px); /* two per row */
        box-sizing: border-box;
    }


    div#passportPower {
        margin-bottom: 0;
    }

    .global-map-section h3 {
        font-size: 2rem;
    }

    #globalMap{
        height: 250px;
    }


    /******************index*******************/

    button.passport-tab {
        font-size: 15px;
    }

    .top-passports-section {margin-top: -2px;padding-bottom: 61px;margin-bottom: -11px;}

    .top-passports-title {
        font-size: 2.1rem;
    }

    .top-passport-cards {
        gap: 40px;
    }

    .how-to-title {
        font-size: 2.6rem;
    }

    .how-to-step {
        width: 100%;
    }

    .how-to-desc {
        font-size: 1.3rem;
    }

    .col-select-country {
        width: 100%;
    }

    form#downloadForm .col-md-6 {
        margin-top: 5px;
    }


    /******************view-by-area*******************/

    .view-by-area-section .section-title img {
        margin: 0;
        width: 80%;
    }

    .view-by-area-section p.section-desc {
        font-size: 1rem;
    }

    .view-by-area-section .program-section p.program-desc.text-muted {
        font-size: 1rem;
    }

    .view-by-area-section button.carousel-btn.carousel-prev {
        left: -10%;
    }

    .view-by-area-section button.carousel-btn.carousel-next {
        right: -10%;
    }

    .view-by-area-section .program-section h3.all-title {
        font-size: 2.2rem;
    }

    .view-by-area-section .country-subsection {
        padding-top: 20px;
    }


    /********************smart-passport*************************/

    .how-to-smart .cell-PassportSelect {
        width: 100%;
    }

    .how-to-smart .col-select-country {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .how-to-section .visa-req-table.table-responsive {
        padding: 0;
    }

    .PassportSelect-result.yourPassportSelect-result {
        border-radius: 2px 2px 0 0;
        margin: 0;
    }



    .div-ProgramPassportSelect {
        border-radius: 0;
        border-left: 0;
    }

    .PassportSelect-result.ProgramPassportSelect-result {
        margin: 0;
    }

    .difference-result {
        margin: 0;
        border-top: 0;
        background: #15243b;
    }

    .difference-result h4{
        color: white;
    }

    .PassportSelect-result {
        box-shadow: 0px 4px 4px 0px #00000040;
    }

    .div-yourPassportSelect,
    .PassportSelect-result.difference-result {
        border-bottom-left-radius: 5px;
    }

    /****************passport-ranking********************/

    .search-wrap {
        width: 70%;
    }

    input#passportSearch {
        margin: 0 !important;
    }

    .ranking-passport-section .d-flex.flex-wrap.gap-2.align-items-center.mb-3 {
        justify-content: space-between;
    }

    div#passportTable_wrapper .row.mt-2.justify-content-between:nth-child(1),
    div#passportTable_wrapper .row.mt-2.justify-content-between:nth-child(3){
        display: none;
    }





    button.passport-tab {
        font-size: 14px !important;
        padding: 10px !important;
        justify-content: center;
    }

    .passport-details img.img-passport {
        width: 30%;
        top: 100px;
    }

    .tab-pane-visit [aria-controls="select2-your-passportSelect-container"] {
        margin-bottom: 8px;
    }

    .arrow-plane {justify-self: anchor-center;overflow: hidden;}

    .arrow-plane svg {
        width: 400px;
        transform: rotate(91deg);
    }

    .details-txt {
        max-width: 70%;
    }

    div#globalMap {
        height: 290px !important;
    }

    .bottom-footer .text-end,
    .bottom-footer .text-start {
        text-align: center !important;
        font-size: 10px;
    }

    .how-to-smart .col-select-country .div-yourPassportSelect, .how-to-smart .col-select-country .div-ProgramPassportSelect {
        border-radius: 0;
        border: none;
    }






    .passport-widget {
        transition: transform 0.2s ease;
    }
    
    .passport-widget:hover {
        transform: translateY(-2px);
    }
    
    .rank-badge-mobile {
        background: linear-gradient(135deg, #2B4369 0%, #94afe4 100%);
        color: white;
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        min-width: 60px;
        text-align: center;
    }
    
    .rank-badge-mobile .ord-suffix {
        font-size: 10px;
        opacity: 0.8;
    }
    
    .metric-item {
        text-align: center;
    }
    
    .metric-label {
        display: block;
        font-size: 11px;
        color: #4d4d4d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        font-weight: 500;
    }
    
    .metric-value {
        font-size: 16px;
        font-weight: 600;
        color: #212529;
    }
    
    .mob-num-mobile {
        font-size: 18px;
        font-weight: 700;
        color: #2B4369;
        margin-bottom: 4px;
    }
    
    .mob-bar-mobile {
        width: 100%;
        height: 6px;
        background: #e9ecef;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
    }
    
    .mob-bar-mobile span {
        display: block;
        height: 100%;
        width: var(--w, 0%);
        background: linear-gradient(90deg, #2B4369 0%, #7d98c3 100%);
        border-radius: 3px;
        transition: width 0.6s ease;
    }
    
    .destinations-mobile {
        font-size: 20px;
        font-weight: 700;
        color: #2B4369;
        line-height: 1;
    }
    
    .freedom-score-mobile {
        font-size: 24px;
        color: #2B4369;
    }
    .passport-widget .card-body {
        padding: 1rem !important;
    }
    
    .rank-badge-mobile {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 50px;
    }
    
    .mob-num-mobile {
        font-size: 16px;
    }
    
    .destinations-mobile {
        font-size: 18px;
    }
    
    .freedom-score-mobile {
        font-size: 20px;
    }

    .metric-value small.text-muted {
        color: #212529 !important;
    }

    /***************/

    form#downloadForm input.modal-input:active, form#downloadForm input.modal-input::placeholder, form#downloadForm input.modal-input,
    div#downloadModal .select2-container--default .select2-selection--single {
        height: 40px !important;
        min-height: initial !important;
    }

    form#downloadForm .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 39px !important;
    }

    form#downloadForm .verification-message.text-center.mb-3 {
        display: none !important;
    }

    button#downloadSubmitBtn {
        margin: 0 auto;
        margin-top: 20px !important;
    }

    form#downloadForm {
        margin: 0;
    }

    /******************/

    section.hero-thank-you {
        padding: 10px 30px;
        padding-top: 100px;
        padding-bottom: 80px;
    }

    section.hero-thank-you .btn-primary {
        margin: 0;
        font-size: 13px;
    }

    section.hero-thank-you h1#main-hero-title {
        font-size: 30px;
    }

    [data-page="thank-you"] span.navbar-toggler-icon {filter: none !important;}

    .footer-newsletter{
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    /********************************/

    .hero-section {
        background: url('../images/home-bg-m.jpg') top/cover no-repeat;
        align-content: end !important;
        flex-wrap: wrap;
        min-height: 700px;
    }

    #passport-ranking{
        background: url('../images/passport-ranking-mobile.jpg') top/cover no-repeat !important;
        align-content: start !important;
        padding-top: 90px;
    }



    .hero-content {
        padding: 0;
        padding-bottom: 40px;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    div#footer-menus-sc {
        margin: 0;
    }

    .improve-btn {
        width: 90%;
    }

    .top-passport-cards {
        width: 80%;
        margin: 0 auto;
    }

    .passport-card {
        width: 100% !important;
        max-width: initial !important;
        min-width: initial;
    }

    a.btn.btn-primary.show-more-btn {
        margin: 0;
        margin-top: 30px;
    }

    .footer-description-2 {
        margin-top: 30px;
    }

    nav.navbar.navbar-expand-lg.navbar-light {
        width: 80px;
    }

    nav.navbar.navbar-expand-lg.navbar-light.py-3.navbar-bg {
        width: 55%;
        min-width: 190px;
    }

    .passport-carousel-2-container.position-relative {
        width: 85%;
        margin: 0 auto;
    }

    .owl-carousel .owl-item img {height: 194px;}

    .view-by-area-section button.carousel-btn.carousel-prev {
        left: -14%;
    }

    .view-by-area-section button.carousel-btn.carousel-next {
        right: -14%;
    }

    .flag-img {
        height: initial !important;
    }

    .ranking-table th {
        align-content: center;
    }

    .input-group.search-wrap {
        width: 100%;
        max-width: initial;
    }

    button#rankingPrev, button#rankingNext {
        top: 1px !important;
    }

    div#rankingGlobalMap {
        height: 400px !important;
        min-height: initial;
    }

    
/* ========================================
   MOBILE PASSPORT WIDGETS
   ======================================== */

    #mobilePassportWidgets {
        padding: 0;
    }

    .mobile-passport-widget {
        background: transparent;
    }

    .mobile-passport-widget .widget-card {
        background: white;
        border: 1px solid #E7ECF2;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.2s ease;
    }

    .mobile-passport-widget .widget-card:hover {
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    }

    .mobile-passport-widget .widget-header {
        padding-bottom: 15px;
        border-bottom: 1px solid #EEF1F5;
    }

    .mobile-passport-widget .widget-country-name {
        text-decoration: none;
        font-weight: 500 !important;
        color: #0e1f3d;
        font-style: italic;
        font-size: 15px;
    }

    .mobile-passport-widget .widget-country-name:hover {
        color: #2B4369;
    }

    .mobile-passport-widget .widget-rank {
        display: none;
        font-size: 0.85rem;
        margin-top: 2px;
    }

    .mobile-passport-widget .widget-card span.fi {
        border-radius: 50%;
            box-shadow: 0px 8.07947px 8.07947px -2.01987px rgba(12, 12, 13, 0.1), 0px 8.07947px 8.07947px -2.01987px rgba(12, 12, 13, 0.05);
    }

    .mobile-passport-widget .rank-badge-mobile {
        background: linear-gradient(135deg, #2B4369 0%, #1a2956 100%);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .mobile-passport-widget .widget-stats {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-passport-widget .stat-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
    }

    .mobile-passport-widget .stat-label {
        font-size: 0.9rem;
        color: #6c757d;
        font-weight: 500;
    }

    .mobile-passport-widget .stat-value {
        font-size: 1rem;
        color: #0e1f3d;
        text-align: right;
        width: 50%;
    }

    .mobile-passport-widget .mobility-wrap {
        width: 100%;
        max-width: 250px;
    }

    .mobile-passport-widget .mob-num {
        font-size: 0.95rem;
        font-weight: 600;
        color: #0e1f3d;
        margin-bottom: 4px;
    }

    .mobile-passport-widget .mob-bar {
        background: #E7ECF2;
        height: 6px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .mobile-passport-widget .mob-bar > span {
        display: block;
        height: 100%;
        width: var(--w, 0%);
        background: linear-gradient(90deg, #2B4369 0%, #4a6fa5 100%);
        border-radius: 10px;
        transition: width 0.3s ease;
    }

    .mobile-passport-widget .stat-value.destinations {
        border-bottom: 2px solid #1a2956;
        transition: all 0.2s ease;
        padding: 0 10px;
        width: auto;
    }

    .mobile-passport-widget .stat-value.destinations:hover {
        color: #2B4369;
        border-bottom-color: #2B4369;
    }

    /****/

    .navbar {
    width: 100% !important;
    height: fit-content !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
}

.navbar a.navbar-brand.text-white {
    display: block;
    margin: 0 auto;
    padding-right: 40px;
}

ul.navbar-nav .header-logo {
    display: none;
}

.navbar-nav .nav-item::after {
    display: none !important;
}

.home-hero .tab-container {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: -99px;
    padding: 0 15px;
}

.home-hero .hero-content {
    position: initial;
    max-width: 70%;
    margin-left: 0;
}

.home-hero .top-passports-section {
    padding-top: 130px !important;
}

.home-hero {
    min-height: 320px;
    align-content: start !important;
    padding-top: 100px;
    position: relative;
}

.home-hero h1#main-hero-title {
    font-size: 28px !important;
}

.home-hero .hero-desc {
    font-size: 13px !important;
}
.top-passports-section {
    padding-top: 130px;
}

body[data-page="home"] .navbar {
    background: #989898;
}

}

@media (max-width: 600px) {
    .ranking-passport-section-2 input#rankingSearch {
        border: 1px solid #708198 !important;
    }

    #rankingGlobalMap{
        height: 300px;
        margin-top: -90px;
    }

    .map-container {
        margin-top: 30px;
        overflow: hidden;
    }

    .download-list-div p.text-muted {
        font-size: 16px;
    }

    .download-list-div {
        margin-top: 30px;
    }

    .legend-items {
        flex-direction: column;
        gap: 10px !important;
    }
    
    .legend-item {
        justify-content: flex-start;
    }
    
    .map-legend {
        padding: 15px;
    }

    /*******************/

    .passport-img {
        margin-left: 0 !important;
    }

    .passport-card {
        padding: 5px 15px;
    }

    .how-to-section h2#how-to-title {
        text-align: center;
    }

    .how-to-section p.how-to-desc.mb-4 {
        text-align: center;
        font-size: 18px;
    }

    [data-page="single-passport"] img.header-logo, [data-page="smart-passport"] img.header-logo, [data-page="view-by-area"] img.header-logo, body[data-page="thank-you"] img.header-logo{
        filter: none !important;
    }

    [data-page="single-passport"] .navbar:not(.navbar-bg),
    [data-page="smart-passport"] .navbar:not(.navbar-bg),
    [data-page="view-by-area"] .navbar:not(.navbar-bg) {
        background: #BFB6B6 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .hero-section h1#main-hero-title {
        font-size: 44px;
    }

    .hero-section h1#main-hero-title span.tbg-blue {
        margin-left: 8px;
    }

    .view-by-area-section img.passport-img {
        height: 160px;
    }

    section#passport-ranking {
        align-content: start !important;
        background-position: bottom !important;
        padding-top: 140px;
    }

    .global-map-section h3 {
        top: -20px;
        position: relative;
    }

    section.hero-section.d-flex.align-items-center.how-to-smart {
        padding-top: 100px;
    }

    section.how-to-smart p.hero-desc {
        max-width: 90%;
        margin-bottom: 20px;
    }

    .how-to-smart .col-select-country {
        padding: 0;
    }

    .PassportSelect-result.ProgramPassportSelect-result,
    .PassportSelect-result.yourPassportSelect-result {
        background: white;
    }

    .how-to-smart .hero-bg {
        background-position: right top;
    }

    .book-appointment a {
        font-size: 13px;
    }

    section.compare-passports-section .cell-PassportSelect {
        /* padding-left: calc(var(--bs-gutter-x) * .5); */
        /* padding-right: calc(var(--bs-gutter-x) * .5); */
        width: 100% !important;
        display: contents;
    }

    .passport-compare-box .col-md-3 {
        width: 100% !important;
        margin-bottom: 5px;
    }

    .card-select-passport .col-select-country {
        width: 100% !important;
    }

    .dynamic-hero-bg img:nth-child(5),
    .dynamic-hero-bg img:nth-child(4) {
        display: none;
    }

    .dynamic-hero-bg .row:nth-child(2),
    .dynamic-hero-bg .row:nth-child(1) {
        opacity: 0;
    }

    .single-hero .hero-content {
        padding-right: 13px;
        padding-top: 20px;
        padding-bottom: 0;
    }

    section.hero-section.d-flex.align-items-center.single-hero {
        align-content: start !important;
    }

    .dynamic-hero-bg {
        right: -80px;
        top: 80px;
    }

    .country-info-row {
        display: flex;
        justify-content: space-between;
    }

    .passport-details h3.country-name {
        max-width: 65%;
    }

    .details-txt {
        max-width: 65%;
    }

    .country-info-row .details-txt {
        max-width: initial;
    }

    .navbar-nav .nav-item {
        padding: 0;
    }

    .navbar-nav .nav-item a.nav-link {
        padding: 15px 10px;
    }

    .ranking-passport-section-2 div#map-legend {
        display: flex;
        width: 100%;
        max-width: initial;
    }

    section#program-view h1#main-hero-title {
        margin-top: 20px;
    }

    div#visaFilterBadges span.badge.badge-vf.vf-not-active:hover,
    div#map-legend span.badge.badge-vf.vf-not-active:hover {
        background: white !important;
        color: #469390 !important;
    }

    div#visaFilterBadges span.badge.badge-vr.vf-not-active:hover,
    div#map-legend span.badge.badge-vr.vf-not-active:hover {
        background: white !important;
        color: #832D5B !important;
    }

    div#visaFilterBadges span.badge.badge-ev.vf-not-active:hover,
    div#visaFilterBadges span.badge.badge-eta.vf-not-active:hover,
    div#map-legend span.badge.badge-ev.vf-not-active:hover,
    div#map-legend span.badge.badge-eta.vf-not-active:hover {
        background: white !important;
        color: #699FE2 !important;
    }

    div#visaFilterBadges span.badge.badge-voa.vf-not-active:hover,
    div#map-legend span.badge.badge-voa.vf-not-active:hover {
        background: white !important;
        color: #469390 !important;
    }

    .global-map-section span.badge.legend-item.top-10.rank-not-active:hover {
        background: white !important;
        color: #111a27 !important;
    }

    .global-map-section span.badge.legend-item.top-30.rank-not-active:hover {
        background: white !important;
        color: #344b6d !important;
    }

    .global-map-section span.badge.legend-item.top-50.rank-not-active:hover {
        background: white !important;
        color: #4f5e7a !important;
    }

    .global-map-section span.badge.legend-item.top-100.rank-not-active:hover {
        background: white !important;
        color: #708198 !important;
    }

    .global-map-section span.badge.legend-item.top-100plus.rank-not-active:hover {
        background: white !important;
        color: #9caabd !important;
    }

    .global-map-section span.badge.legend-item.top-na.rank-not-active:hover {
        background: white !important;
        color: #e6e6e6 !important;
    }

    .how-to-section-buttons {
        display: block;
    }

    .how-to-section-buttons a.btn.btn-primary.compare-your-passport {
        margin-bottom: 20px;
    }

    .mobile-compare-country {
        display: block;
        width: 100%;
        border: 1px solid #1C2842;
    }

    .mobile-compare-country .mobile-compare-header {
        background: #1C2842;
        padding: 15px;
        text-align: -webkit-center;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }

    .mobile-compare-country .mobile-compare-header .mobile-compare-country-expand {
        background: #F0F1F1;
        color: #1C2842;
        width: 70%;
        padding: 10px 15px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-compare-country .mobile-compare-header .mobile-compare-country-expand svg {
        width: 12px;
    }

    .mobile-compare-country-expand .passport-flag {
        border-radius: 30px;
        font-size: 18px;
        box-shadow: 0px 8.07947px 8.07947px -2.01987px rgba(12, 12, 13, 0.1), 0px 8.07947px 8.07947px -2.01987px rgba(12, 12, 13, 0.05);
    }

    .mobile-compare-country .mobile-compare-body {
        padding: 13px 40px 20px 40px;
    }

    .mobile-compare-name {
        display: flex;
        justify-content: space-between;
        font-size: 25px;
        margin-bottom: 15px;
    }

    .mobile-compare-country .mobile-compare-body .comparison-stats .stat-item {
        padding: 8px 7px;
        font-size: 11px;
    }
    section.compare-passports-section #passportComparisonContainer {
        display: initial;
    }
    .mobile-compare-name span.mobile-compare-country-rank span {
        font-size: small;
    }

    div#mobileCompareModalBody .comparison-header-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px !important;
    }
    div#mobileCompareModalBody .comparison-header-info h4 {
        font-size: 19px;
        margin: 0;
    }
    div#mobileCompareModalBody .remove-passport-btn {
        color: white;
        background: #832d5b;
        border: 1px solid #832d5b;
        padding: 1px 15px !important;
    }
    div#mobileCompareModalBody .comparison-stats {
        background: #2A4562;
        color: white !important;
        display: flex;
        justify-content: center;
        padding: 0 5px;
        border-radius: 4px;
    }
    div#mobileCompareModalBody .stat-item {
        cursor: pointer;
        padding: 5px 7px;
    }
    div#mobileCompareModalBody .stat-item {
        display: grid;
        text-align: center;
        font-size: 10px;
    }
    div#mobileCompareModalBody .stat-item:not(:last-child) {
        border-right: 1px solid white;
    }
    div#mobileCompareModalBody span.stat-number {
        color: white;
        font-weight: 600;
    }
    .how-to-smart .hero-bg {
        background-image: url('https://passportindex.citizenshipinvest.org/assets/frontend/images/smart-passport-m.jpg') !important;
        top: 20px;
        right: 0px;
    }

    section.hero-section.how-to-smart h1#main-hero-title {
        font-size: 45px;
        width: 60%;
        line-height: 45px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    section.how-to-smart p.hero-desc {max-width: 100%;}

    .visa-req-table {
        max-height: 400px;
    }
    .navbar-nav .nav-item a.nav-link {
        width: 100%;
    }
    div#navbarNav:not(.show) li.nav-item.active {
        background: transparent;
    }
    .footer-social a {
        margin-right: 14px;
        width: inherit;
    }
    .contact-us-sc {
        display: block;
    }

    div#footer-menus-sc {
        display: block;
    }

    .faq-section {
        padding: 30px 0 0px 0;
    }
    .faq-accordion {
        max-width: 100%;
        margin-top: 20px;
    }
    .faq-question, .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
        font-size: 15px;
        font-weight: 500;
    }

    .faq-answer-content {
        font-weight: 400;
    }
    .faq-question span.faq-nbr {
        top: -30px;
        left: initial;
        font-size: 20px;
    }

    .faq-question[aria-expanded="true"] {
        padding-top: 70px;
    }

    canvas#rotatingGlobe {
        width: 60% !important;
        margin: 0 auto;
        display: block;
    }

    .top-passport-cards a {
        width: 100%;
    }

    .passport-card .rank {
        line-height: 16px;
        margin-bottom: 6px !important;
    }
    section#passport-ranking {
        position: relative;
    }

    section#passport-ranking:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        background: #2D466B;
        background: linear-gradient(180deg, rgb(45 70 107 / 0%) 0%, rgb(45 70 107 / 0%) 25%, rgb(45 70 107 / 66%) 50%, rgba(45, 70, 107, 0.19) 100%);
    }

    section#passport-ranking .container {
        z-index: 2;
    }

    .faq-section #how-to-title {
        font-size: 29px;
        margin-bottom: 0 !important;
    }
}


/*****************************/

@media (max-width: 345px) {

    .top-passports-title {
        font-size: 29px;
    }

    .top-passports-desc {
        font-size: 16px;
    }

    a.btn.btn-primary.show-more-btn {
        font-size: 15px;
    }

    .how-to-title {
        font-size: 35px;
    }

    .how-to-section p.how-to-desc.mb-4 {
        font-size: 17px;
    }

    .how-to-section {
        padding: 40px 0 60px 0;
    }

    .footer-social a {
        margin-right: 0px;
        width: 35px;
        height: 35px;
    }

    .navbar-nav .nav-link, .navbar-nav .btn {
        font-size: 13px;
    }

    .hero-section h1#main-hero-title {
        font-size: 41px;
    }

    section#view-by-area {
        min-height: 620px;
    }

    .view-by-area-section .program-section h3.program-title {
        font-size: 25px;
    }

    .view-by-area-section .program-section p.program-desc.text-muted {
        font-size: 15px;
    }

    .view-by-area-section .program-section h3.all-title {
        font-size: 1.9rem;
    }

    .view-by-area-section img.passport-img {
        height: 125px;
    }

    a.btn.btn-view-details {
        font-size: 15px;
    }

    .hero-section h1#main-hero-title {
        font-size: 31px;
    }

    .dynamic-hero-bg {top: 30px;right: -30px;}

    .dynamic-hero-bg img:nth-child(6) {
        display: none;
    }

    .dynamic-hero-bg .row:nth-child(3) img:nth-child(4) {
        display: block;
    }
    .dynamic-hero-bg .row:nth-child(3) img:nth-child(2) {
        display: none;
    }

    .download-card h6 {
        padding: 0 20px;
        font-size: 21px;
        font-weight: 300;
    }

    .how-to-section-buttons a.btn.btn-primary {
        font-size: 13px;
    }

    .visa-requirements-table h4.visa-req-title {
        font-size: 17px;
    }

    .passport-power .visa-requirements-table, .passport-power .passport-details {
        padding: 15px;
    }

    .visa-req-table thead th:last-child {padding-right: 5px;width: 131px;}

    .visa-req-table thead th:first-child {
        padding-left: 6px;
    }

    tbody#visaReqTableBody td {
        font-size: 14px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 13px !important;
    }

    .home-hero .hero-content {
        max-width: 81%;
    }
    button.passport-tab {
        font-size: 13px !important;
    }

    .home-hero .hero-desc {
        font-size: 13px !important;
    }

    .home-hero {
        padding-top: 105px;
    }
}