/* ---- Overall Page Styles ---- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size);
    padding: 10px;
    background-color: var(--background-color);
    color: var(--text-color);
}

.wrapper {
    display: flex;
    justify-content: space-between;
    align-content: center;
    column-gap: 10px;
}

/* ---- Themes ---- */

.dark-theme {
    --background-color: #222831;
    --container-color: #393e46;
    --text-color: white;
    --border-radius: 20px;
    --bold-color: #8F00FF;
}

.light-theme {
    --background-color: #fafafa;
    --container-color: #e4e5f1;
    --text-color: black;
    --border-radius: 20px;
    --bold-color: #7DF9FF;
}

/* --- Font size --- */

.small-font {
    --font-size: small;
}

.medium-font {
    --font-size: medium;
}

.large-font {
    --font-size: large;
}


/* ---- End of Overall Page Styles ---- */

/* ---- Side Bar ---- */

.side-bar {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    height: 98%;
    width: 20%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--container-color);
    border-radius: var(--border-radius);
    transition: .3s;
    z-index: 1;
}

.side-bar-logo-expand-con, .side-bar-links-con, .side-bar-trending-con, .side-bar-tablet-extra-section {
    padding: 10px 0;
}

.side-bar-tablet-extra-section {
    display: none;
}

/* Side bar logo and Expand Button */

.side-bar-logo-expand-con {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.side-bar-logo {
    display: flex;
    align-content: center;
}

.side-bar-logo .logo-icon {
    font-size: 1em;
    margin: auto;
}

.close-side-bar-btn {
    cursor: pointer;
    transition: 0.3s;
}

.close-side-bar-btn .expand-icon {
    transition: 0.3s;
}

.close-side-bar-btn:hover .expand-icon {
    transform: scale(0.7);
}

.close-side-bar-btn.active .expand-icon {
    transform: rotate(180deg);
}


/* Side Bar Links */

.side-bar-links-con {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.side-bar-links {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    padding: 10px 0px;
    border-radius: var(--border-radius);
}

.left-icon-side {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0 5px;
}

.left-icon-side .side-bar-icons {
    margin: auto;
}

.color-active {
    background-color: var(--bold-color)
}

.side-bar-links:hover {
    background-color: var(--bold-color)
}

.side-bar.active .expand:hover .tooltip, .side-bar.active .home:hover .tooltip,.side-bar.active .countries:hover .tooltip, 
.side-bar.active .discover:hover .tooltip, .side-bar.active .about:hover .tooltip,
.side-bar.active .contact:hover .tooltip, .side-bar.active .help:hover .tooltip, .side-bar.active .settings:hover .tooltip {
    visibility: visible;
}

.tooltip {
    position: absolute;
    z-index: 111;
    padding: 5px 7.5px;
    top: 0;
    left: 30px;
    visibility: hidden;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

.side-bar-trending-con {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

/* -- Side Bar Active -- */

.side-bar.active {
    width: 2.5%;
    padding: 5px;
    row-gap: 60px;
}

.side-bar.active .left-icon-side {
    margin: auto;
}

.side-bar.active .side-bar-trending-con  {
    display: none;
}

.side-bar.active .right-side {
    display: none;
}

.side-bar.active .side-bar-titles {
    display: none;
}

/* ---- Mobile Navigation ---- */ 

.mobile-navigation-panel {
    display: none;
}

/* ---- Main Content ---- */

.main-content {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    justify-content: center;
    margin-left: 21%;
    width: 80%;
    border-radius: var(--border-radius);
    transition: .3s;
}

.main-content.active {
    margin-left: 3.25%;
    width: 97.5%;
}

.header-panel-nav {
    position: sticky;
    top: 5px;
    z-index: 111;
    width: 100%;
    display: flex;
    padding: 10px;
    border-radius: var(--border-radius);
    justify-content: space-between;
    align-items: center;
    align-content: center;
    background-color: var(--container-color);
    transition: 0.3s;
}

.navigation-btns-con {
    display: flex;
    column-gap: 5px;
    align-items: center;
}

.hidden-buttons {
    visibility: hidden;
}

.navigation-btns-con .navigation-btns {
    text-decoration: none;
    color: var(--text-color);
    padding: 10px;
    border-radius: 50%;
    transition: 0.3s;
}

.navigation-btns-con .navigation-btns:hover {
    background-color: var(--background-color);
}

.image-icon {
    color: var(--text-color);
}

.header-panel-search-btn {
    cursor: pointer;
}

.mobile-close-btn {
    cursor: pointer;
}

.mobile-menu {
    padding-left: 5px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 45px;
    width: 30px;
    margin: auto;
}

.mobile-menu .line {
    height: 2px;
    width: 60%;
    margin: 5px 0;
    background-color: var(--text-color);
    border-radius: 5px;
    transition: 0.3s;
}

.mobile-menu .line-1 {
    transform: translateX(5px);
}

.mobile-menu .line-3 {
    transform: translateX(-5px);
}

.mobile-menu.active .line-1{
    transform: translateX(-5px);
}

.mobile-menu.active .line-3{
    transform: translateX(5px);
}

/* ------ Expanded Search Bar Section ------ */

.search-bar-section {
    position: fixed;
    justify-content: center;
    width: 78.75%;
    right: 0;
    bottom: 0px;
    height: 0;
    background-color: var(--background-color);
    transition: 0.3s;
    overflow: hidden;
    z-index: 1;
}

.search-bar-section.active {
    height: 100vh;
}

.main-content.active .search-bar-section {
    width: 96.5%;
}

.search-bar-section-wrapper {
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

/* Search Bar Section Header */

.search-bar-section-header {
    display: flex;
    padding: 10px 0;
    align-items: center;
}

.search-input-container {
    width: 95%;
    height: 60px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--container-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
}

.search-input {
    background-color: var(--container-color);
    width: 90%;
    height: 100%;
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 0.95em;
}

.search-input::placeholder {
    color: var(--text-color);
}

.search-btn {
    cursor: pointer;
    transition: 0.3s;
}

.search-btn:hover {
    color: grey
}

.close-btn-container {
    width: 5%;
    display: flex;
    justify-content: center;
}

.search-close-btn {
    font-size: 1em;
    padding: 15px;
    background-color: var(--container-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: 0.3s;
}

.search-close-btn:hover {
    opacity: 0.7;
}

/* Search Bar Section Body */

.search-content-section {
    display: flex;
    height: 70%;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 10px;
}

.search-content-header {
    font-size: 1.5em;
}

.search-content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.search-content-body {
    display: flex;
    column-gap: 10px;
}

.main-content.active .search-country-card {
    height: 230px;
}
.search-country-card {
    width: 25%;
    height: 200px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: var(--border-radius);
}


.search-country-card-image {
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius);
}

/* ---- Main Header ---- */

/* Default Theme */ 

.main-header-default {
    background-image: url(../australia/images/aus-1.JPEG);
    position: relative;
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-content: center;
}


.kerry-theme {
    background: url(../ireland/images/ireland-1.jpeg);
    position: relative;
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-content: center;
}

.padar-theme {
    background: url(../indonesia/images/indo-11.jpeg);
    position: relative;
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-content: center;
}

.main-header .kerry-theme .padar-theme,  h1 {
    margin: auto;
    color: white;
}

.background-selection {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    background-color: var(--container-color);
    color: white;
    padding: 15px;
    border-radius: var(--border-radius);
    transition: 0.3s;
    width: 5%;
    row-gap: 10px;
    cursor: pointer;
}

.background-selection:hover {
    transform: scale(1.1);
}

.background-selection.active {
    width: 17.5%;
    transform: scale(1);
}

.background-selection-header {
    display: flex;
    justify-content: center;
}

.background-selection .image-icon {
    font-size: 2em;
}

.background-selection-body {
    display: none;
}

.background-selection.active .background-selection-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 10px;
}

.theme-selector-ddm {
    width: 100%;
    border-radius: 20px;
    padding: 3px;
    border: 2px solid white;
    font-family: inherit;
    background-color: inherit;
    color: inherit;
    transition: 0.3s;
}

.theme-selector-ddm:focus {
    background-color: var(--container-color);
}


.theme-selector-ddm .ddm-option {
    padding: 5px;
}

.change-bg-header {
    border-radius: 20px;
    padding: 3px;
    border: 2px solid white;
    color: inherit;
    background-color: inherit;
}

/*  ----- End Of Main Header ----- */

/*  ----- Section Overall Styles ----- */

.sections-con {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    border-radius: var(--border-radius);
}

.countries-section, .video-section, .social-section, .top-picks-section {
    padding: 10px;
    background-color: var(--container-color);
    border-radius: var(--border-radius);
}

.section-header {
    display: flex;
    flex-direction: column;
}

/*  ----- Top Picks Section ----- */

.top-picks-section {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    column-gap: 10px;
    row-gap: 10px;
}

.top-picks-con {
    display: flex;
    column-gap: 10px;
}

.top-picks-left-con {
    width: 40%;
}

.top-picks-right-con {
    width: 60%;
    display: flex;
    column-gap: 10px;
}

.country-large {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
}

.country-large-image {
    height: 260px;
    width: 100%;
    border-radius: var(--border-radius);
    transition: .3s;
}

.main-content.active .country-large-image {
    height: 300px;
}

.country-footer {
    padding: 5px;
}

.top-picks-right-con .country-small {
    width: 50%;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
}

.top-picks-right-con .country-small .country-image-small {
    height: 260px;
    width: 100%;
    border-radius: var(--border-radius);
    transition: .3s;
}

.country-small-footer {
    display: flex;
    justify-content: center;
    padding: 5px;
}

.main-content.active .top-picks-right-con .country-small .country-image-small {
    height: 300px;
}
   
/*  ----- Video/Text Section ----- */

.video-section {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    background-color: var(--background-color);
    padding: 0;
}

.video-con {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
}

.video-left-con {
    width: 60%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    border-radius: var(--border-radius);
    background-color: var(--container-color);
}

.video-left-con .video {
    height: 400px;
    width: 100%;
    border-radius: var(--border-radius);
    border: none;
}

.main-content.active .video-left-con .video {
    height: 500px;
}

.video-right-con {
    background-color: var(--container-color);
    border-radius: var(--border-radius);
    width: 40%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    justify-content: flex-start;
    align-content: center;
}

.small-video-section {
    height: 180px;
    width: 100%;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
}

.main-content.active .small-video-section {
    height: 230px;
}

.small-video-container {
    width: 60%;
}

.main-content.active .small-video-container {
    width: 70%;
}

.small-video-container .video {
    height: 100%;
    width: 100%;
    border-radius: 20px 0 0 20px;
    border: none;
}

.title {
    padding: 10px;
    width: 40%;
    background: var(--background-color);
    border-radius: 0 20px 20px 0
}

.small-video-container .title {
    width: 30%;
}

/*  ----- End of video/text section----- */

/*  ----- Countries Section ----- */

.countries-section {
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.countries-section .section-header {
    display: flex;
    flex-direction: column;
}

.countries-section .section-header .row-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.see-more-btn {
    text-decoration: none;
    color: var(--text-color);
}

.countries-con {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    column-gap: 10px;
}

.countries-con .country-small {
    width: 50%;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
}

.countries-con .country-small .country-image-small {
    height: 220px;
    width: 100%;
    border-radius: var(--border-radius);
    transition: .3s;
}

.main-content.active .countries-con .country-small .country-image-small {
    height: 270px;
}

/*  ----- End of countries section ----- */

/*  ----- Social Section ----- */

.social-section {
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.social-section .section-header {
    display: flex;
    flex-direction: column;
}

.social-button-container {
    display: flex;
    justify-content: center;
    align-content: center;
    column-gap: 10px;
}

.tab-container {
    width: 100%;
}

.tab-box {
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 50px;
}

.tab-box .social-btn.active {
    opacity: 0.6;
}

.content-box .content {
    display: none;
    animation: fade .5s ease;
}

@keyframes fade {
    from{opacity: 0;}
    to{ opacity: 1;}
}

.content-box .content.active {
    display: block;
}

.content .tik-tok-container {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 50px 0;
}

.no-content-card {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.no-content-card .no-content-card-header {
    display: flex;
    justify-content: center;
    align-content: center;
}

.no-content-card .no-content-card-header .icon {
    font-size: 6em;
}

.no-content-card .no-content-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    row-gap: 10px;
    text-align: center;
}

.no-content-card .no-content-card-body .no-content-card-body-text {
    margin: auto;
}

.social-btn {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 15px;
    text-decoration: none;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.social-btn-icon {
    font-size: 1.5em;
}

.social-posts-container {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 10px 0;
    column-gap: 10px;
}

.instagram-post {
    width: 30%;
    display: flex;
    padding: 10px;
    flex-direction: column;
    background-color: var(--background-color);
    border-radius: 20px;
    text-decoration: none;
    color: var(--text-color);
    transition: .3s;
}

.instagram-post:hover .instagram-post-icon {
    color: blueviolet;
}

.instagram-post-header {
    display: flex;
    padding: 10px;
    justify-content: space-between;
}

.instagram-post-header-icon-con {
    width: 10%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.instagram-post-icon {
    margin: auto;
    font-size: 1.75em;
    transition: .3s;
}

.instagram-post-image {
    height: 400px;
    width: 100%;
    border-radius: 20px;
    transition: .3s;
}

.main-content.active .instagram-post-image {
    height: 450px;
}

.main-content.active .instagram-post {
    width: 25%;
}

/*  ----- Footer ----- */

.footer {
    background-color: var(--container-color);
    padding: 10px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.social-btn-footer {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 15px;
    text-decoration: none;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.footer-row-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.logo-social-con {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.logo-con-1 {
    display: flex;
    margin: auto;
}

.col-list {
    width: 20%;
    display: flex;
    flex-direction: column;
}

.footer-row-2 {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    padding: 5px
} 

.footer-links {
    color: var(--text-color);
    text-decoration: none;
    transition: .3s;
}

.footer-links:hover {
    color: var(--background-color);
}

/* Mobile Panel Navigation */

.mobile-navigation-panel-section {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    display: none;
    align-content: center;
    align-items: center;
    transition: 0.3s;
}

.main-content.mobile-active .mobile-navigation-panel-section {
    display: none;
}

.mobile-navigation-panel {
    width: 90%;
    margin: 5px auto;
    padding: 10px 0px;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;  
    align-items: center;    
    align-content: center;
    transition: 0.3s;
}

.mobile-navigation-panel-btns-con {
    display: flex;
    flex-direction: row;
}

.mobile-navigation-panel-btns {
    padding: 15px 20px;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
}

.mobile-navigation-panel-btns.active {
    background-color: var(--container-color);
    border-radius: var(--border-radius);
}

.mobile-nav-panel-icons {
    font-size: 1em;
}

.mobile-navigation-panel-title {
    color: var(--text-color);
}

.mobile-navigation-panel.active {
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
}

/*  ----- Mobile Screen ----- */

@media only screen and (max-width:440px){

        /* Hidden Elements on Mobile */
        
        .hidden {
            display: none;
        }

        .side-bar {
            top: 10px;
            left: -300px;
            bottom: 10px;
            height: 98%;
            width: 30%;
            row-gap: 0px;
        }

        .side-bar-logo {
            flex-direction: column;
        }
    
        .close-side-bar-btn {
            display: none;
        }

        .side-bar-trending-con {
            display: none;
        }

        .side-bar-tablet-extra-section {
            display: none;
        }
    
        .side-bar.mobile-active {
            width: 30%;
            height: 98%;
            left: 10px;
            row-gap: 0px;
        }
        
        .search-bar-con {
            display: none;
        }

        .mobile-menu {
            display: block; 
        }

        .header-panel-logo-con {
            display: none;
        }

        .header-panel-search-btn {
            display: none;
        }

        /* Search Bar Section */

        .search-bar-section {
            width: 100%;
            row-gap: 10px;
        }

        .search-input-container {
            width: 100%;
        }
        
        .search-input {
            width: 90%;
        }

        .close-btn-container {
            display: none;
        }

        .search-bar-section-wrapper{
            width: 100%;
        }

        .search-content-body {
            display: inline-block;
            column-gap: 0px;
            width: 100%;
            overflow: auto;
            white-space: nowrap;
        }
        
        .search-country-card {
            width: 70%;
            display: inline-block;
        }

        /* Main Content */
    
        .main-content {
            width: 100%;
            margin-left: 0%;
        }
    
        .main-content.mobile-active {
            width: 66%;
            margin-left: 35%;
            opacity: 0.6;
        }

        .background-selection {
            width: 15%;
        }

        .background-selection.active {
            width: 50%;
        }
    
        /* Top Picks Section */

        .top-picks-con {
            display: flex;
            flex-direction: column;
            row-gap: 10px;
        }

        .top-picks-left-con {
            width: 100%;
        }

        .top-picks-right-con {
            width: 100%;
        }

        .country-large-image {
            height: 220px;
        }

        .main-content.mobile-active .country-large-image {
            height: 180px;
        }

        .top-picks-right-con .country-small .country-image-small {
            height: 140px;
        }

        .main-content.mobile-active .top-picks-right-con .country-small .country-image-small {
            height: 120px;
        }

        /* Video/Text Section */

        .video-con {
            flex-direction: column;
            row-gap: 10px;
        }

        .video-left-con {
            width: 100%;
        }

        .video-left-con .video {
            height: 280px;
        }

        .video-right-con {
            width: 100%;
            row-gap: 10px;
        }

      
        .main-content.mobile-active .video {
            height: 260px;
        }

        /* Countries Section */

        .countries-con {
            flex-wrap: wrap;
            row-gap: 10px;
            column-gap: 10px;
        }

        .countries-con .country-small {
            width: 48%;
        }
        
        .countries-con .country-small .country-image-small {
            height: 140px;
        }

        .main-content.mobile-active .countries-con .country-small {
            width: 100%;
        }

        /* Social */

        .tab-box {
            column-gap: 20px;
        }

        .main-content.mobile-active .tab-box {
            column-gap: 5px;
        }

        .content-box {
            width: 100%;
        }

        .content {
            width: 100%;
        }

        .social-posts-container {
            display: inline-block;
            column-gap: 20px;
            width: 100%;
            overflow: auto;
            white-space: nowrap;
        }


        .instagram-post {
            display: inline-block;
            margin: 0px 0 0 5px;
            width: 90%;
        }

        .main-content.mobile-active .instagram-post-image {
            height: 270px;
        }

        .main-content.mobile-active .instagram-post-icon {
            display: none;
        }

        /* Footer */
 
        .footer-row-1 {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .logo-social-con {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
        }
        
        .col-list {
            display: none;
        }
       
        .footer-row-2 {
            display: flex;
            justify-content: center;
        }

        /* Mobile Navigation Panel  */ 

        .mobile-navigation-panel-section {
            display: flex;
            z-index: 1;
        }

    }

/* ----- Portrait Tablet ----- */

@media screen and (min-width:768px) and (max-width: 991px){
        
    .side-bar {
        top: 10px;
        left: -300px;
        bottom: 10px;
        height: 98%;
        width: 30%;
        row-gap: 0px;
    }

    .close-side-bar-btn {
        display: none;
    }

    .side-bar-tablet-extra-section {
        display: flex;
        border: 2px solid white;
        border-radius: var(--border-radius);
        height: 300px;
    }

    .side-bar.mobile-active {
        width: 33%;
        height: 98%;
        left: 10px;
        row-gap: 0px;
    }
    
    .search-bar-con {
        display: none;
    }

    .mobile-menu {
        display: block; 
    }

   
    /* Mobile Navigation Panel  */ 

    .mobile-navigation-panel-section {
        display: flex;
        z-index: 1;
    }

    .mobile-navigation-panel {
        width: 40%;
    }

    .mobile-search-bar-con.active {
        height: 94vh;
        margin-top: 10px;
        z-index: 1;
    }

    .header-panel-search-btn {
        display: none;
    }

    .mobile-search-bar-con {
        width: 70%;
    }
             
    .mobile-country-card  .mobile-country-card-image {
        height: 200px;
    }

    /* Main Content */

    .main-content {
        width: 100%;
        margin-left: 0%;
    }

    .main-content.mobile-active {
        width: 66%;
        margin-left: 35%;
        opacity: 0.6;
    }

    .background-selection {
        width: 7.5%;
    }

    .background-selection.active {
        width: 30%;
    }
    
    /* Top picks Section */

    .country-large-image {
        height: 220px;
    }

    .main-content.mobile-active .country-large-image {
        height: 180px;
    }

    .top-picks-right-con .country-small .country-image-small {
        height: 220px;
    }

    .main-content.mobile-active .top-picks-right-con .country-small .country-image-small {
        height: 180px;
    }

    /* Video Section */

    .main-content.mobile-active .video-con {
        margin: 10px 0;
        flex-direction: column;
        row-gap: 10px;
        flex-flow: column-reverse;
    }

    .main-content.mobile-active .video-left-con {
        width: 100%;
    }

    .main-content.mobile-active .video-right-con {
        width: 100%;
    }

    .video-right-con .video {
        height: 350px;
        width: 100%;
    }

    .main-content.mobile-active .video-right-con .video {
        height: 310px;
    }

    /* Countries Section */

    .countries-con .country-small .country-image-small {
        height: 200px;
    }
    
    .main-content.mobile-active .countries-con .country-small .country-image-small {
        height: 120px;
    }

    /* Social Section */

    .main-content.mobile-active .hidden {
        display: none;
    }

    .main-content.mobile-active .instagram-post {
        width: 90%;
    }

    /* Footer */ 

    .main-content.mobile-active .col-list {
        display: none;
    }

    .main-content.mobile-active .logo-social-con {
        width: 100%;
    }

    .main-content.mobile-active .footer-row-2 {
        margin: auto;
    }

    /* Pop Up Search Section */

    .search-bar-section {
        width: 100%;
    }

    .search-content-section {
        display: flex;
        row-gap: 10px;
    }

    .search-content-container {
        row-gap: 10px;
    }

    
}