/* Mobile */
@media (max-width: 320px) {
    #background-video {
        height: 24%!important;
    }

    .mobi-overlay {
        background-color: rgba(255 255 255 / 50%)!important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 24%!important;
    }
}
@media (max-width: 767px) {
    .h1, h1 {
        font-size: 30px!important;
    }

    .h2, h2 {
        font-size: 25px!important;
    }

    .h3, h3 {
        font-size: 20px!important;
    }


    br {
        display: none;
    }

    iframe {
        height: auto;
        width: 100%;
    }

    .navbar-light .navbar-toggler {
        color:#0D2237;
        border-color: transparent;
        text-align: right;
    } 
    
    .navbar-light .navbar-toggler i {
        font-size: 30px;
        font-weight: 400;
        padding-right: 10px;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        text-align: center;
        padding: 15px 0;
        box-shadow: 3px 8px 3px -4px rgb(0 0 0 / 10%);
    }

    .nav-link {
        display: block;
        padding: 5px 0;
    }

    .nav-link.active .nav-item {
        font-size: 16px;
    }

    .navbar-collapse .dropdown-menu {
        position: static;
        top: 228%;
        left: 30px;
        float: none;
        min-width: 10rem;
        padding: 0;
        margin: 0.125rem 0 0;
        font-size: 15px;
        text-align: center;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 0;
        border-radius: 0;
        box-shadow: none!important;
    }

    .topbar, .header-icons, .krugerrands-absolute {
        display: none;
    }

    .mobi-logo img {
        width: 100%;
    }

    .mobi-header-icons {
        display: block;
    }

    .mobi-header-icons p, .mobi-header-icons a {
        margin-bottom: 5px;
        color: #070644;
        font-weight: 500;
        display: inline-block;
        padding: 0 10px;
    }
    
    .mobi-header-icons i {
        vertical-align: middle;
        line-height: 20px;
        font-size: 20px;
        color: #070644;
        width: 30px;
        text-align: center;
    }

    .header {
        padding: 0px;
    }

    /* Home page */
    #background-video {
        height: 19%;
    }

    .mobi-overlay {
        background-color: rgba(255 255 255 / 50%)!important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 19%;
    }

    .home-header .card {
        margin-bottom: 30px;
    }

    .home-intro .card-body h5, .home-intro .card-body a, .home-intro .card-body i {
        font-size: 25px;
        line-height: 20px;
        margin-right: 0px;
    }

    .home-intro .card-body .whatsapp i {
        font-size: 30px;
    }

    .home-sections .card {
        padding: 0px;
    }

    .home-sections .card h4:after {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .section1 {
        background-position: top 102% right;
        background-size: 50%;
        margin-bottom: 0;
        padding-bottom: 25%;
    }

    .section2 {
        background-position: top 102% right;
        background-size: 50%;
        margin-bottom: 0;
        padding-bottom: 25%;
    }

    .section3 {
        background-position: top 102% right;
        background-size: 50%;
        margin-bottom: 0;
        padding-bottom: 25%;
    }

    .knowledge-hub, .associated-partners, .why-invest, .our-pledge, .associated-partners, .team, .blogs, .blog-page {
        padding: 10% 0;
    }

    .home-intro, .mission-vision {
        padding-top: 10%;
        padding-bottom: 10%;
    }

    /* Other */
    .krugerrands-header, .gold-header {
        text-align: center;
        background-position: center left 50%;
    }

    .krugerrands-header img, .gold-header img {
        width: 40%;
        margin-bottom: 20px;
    }

    .why-invest i {
        font-size: 23px;
        margin-right: 15px;
    }

    .mobi-krugerrands, .mobi-gold-silver {
        display: block;
        margin-bottom: -20%;
        margin-top: 5%;
    }

    .mobi-krugerrands .card img {
        width: 60%;
    }

    .why-invest .mobi-krugerrands .card {
        padding: 15px;
        margin: 10px 20px;
    }

    .mobi-gold-silver img {
        padding: 0 20px;
    }

    .our-process, .faqs {
        background-size: 200%;
        padding: 25% 0 5% 0;
    }

    .faqs .card-header {
        padding: 0;
        margin-bottom: 0;
    }

    .faqs .card-header span {
        float: right;
        font-size: 20px;
        cursor: pointer;
        line-height: 27px;
    }

    .faqs .accordion-heading {
        margin-bottom: 0;
        display: inline;
    }

    .faqs .accordion .card-body {
        padding: 1.25rem 0 0 0;
    }

    .mission-vision ul {
        width: 90%;
    }

    .mission-vision .media {
        margin-right: 0;
        display: block;
        padding: 15px 0 15px 15px;
    }
    .mission-vision .media img {
        margin-bottom: 20px;
    }

    .our-pledge i {
        font-size: 25px;
        line-height: 25px;
        margin: 0 20px;
    }

    .contact {
        padding: 5% 0 10% 0;
    }

    .contact dt, .contact dd {
        font-size: 14px;
    }

    .blog-header {
        padding: 15% 0;
    }

    /* Footer */
    footer, .footer-img {
        text-align: center;
    } 

    .footer img {
        width: 60%;
        height: auto;
    }

    .associated-partners img {
        width: 60%;
        height: auto;
    }
}

/* Tablet & small screens: */
@media (min-width: 768px) and (max-width: 991px) {
    .h1, h1 {
        font-size: 35px!important;
    }

    .h2, h2 {
        font-size: 30px!important;
    }

    .h3, h3 {
        font-size: 25px!important;
    }

    .h5, h5 {
        font-size: 15px;
    }

    br {
        display: none;
    }
    .navbar-light .navbar-toggler {
        color:#0D2237;
        border-color: transparent;
        text-align: right;
    } 
    
    .navbar-light .navbar-toggler i {
        font-size: 30px;
        font-weight: 400;
        padding-right: 10px;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
        background-color: #fff;
        text-align: center;
        padding: 15px;
        box-shadow: 3px 8px 3px -4px rgb(0 0 0 / 10%);
    }    

    .nav-link {
        display: block;
        padding: 5px 0;
    }

    .nav-link.header-icons {
        display: inline-flex;
        padding: 10px 0 0 0;
    }

    .nav-link.active .nav-item {
        font-size: 16px;
    }

    .navbar-collapse .dropdown-menu {
        position: static;
        top: 228%;
        left: 30px;
        float: none;
        min-width: 10rem;
        padding: 0;
        margin: 0.125rem 0 0;
        font-size: 15px;
        text-align: center;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 0;
        border-radius: 0;
        box-shadow: none!important;
    }

    .mobi-logo img {
        width: 50%;
    }

    .header-icons {
        text-align: center;
    }

    .header-icons i {
        margin-left: 10px;
    }

    .dropdown .dropdown-content {
        right: -20px;
        left: auto;
    }

    .dropdown .dropdown-content br {
        display: block!important;
    }

    /* Home */

    .home-intro .card-body h5, .home-intro .card-body a {
        font-size: 20px;
        line-height: 20px;
    }

    .home-intro .card-body i {
        width: 10px;
        margin-right: 20px;
        line-height: 20px;
    }

    .home-intro .card-body .whatsapp i {
        font-size: 26px;
    }

    .home-sections .card {
        padding: 0px;
    }

    .home-sections .card h4:after {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .section1 {
        background-position: right 0 top 100%;
        background-size: 26%;
        padding-bottom: 100px;
    }

    .section2 {
        background-position: left 0 top 100%;
        background-size: 26%;
        padding-bottom: 100px;
    }

    .section3 {
        background-position: right 0% top 100%;
        background-size: 26%;
        padding-bottom: 100px;
    }
    
    /* Others */
    .krugerrands-header img {
        width: 90%;
        height: auto;
    }

    .krugerrands-header, .gold-header, .about-header, .blog-header, .contact-header {
        background-position: center left 17%;
        background-size: 25%;
    }

    .our-process {
        background-size: 220%;
        padding: 25% 0 5% 0;
    }

    .faqs .card, .faqs .accordion>.card:not(:last-of-type) {
        padding: 10px 0;
    }

    .faqs .accordion>.card>.card-header {
        line-height: 30px;
    }

    .mission-vision li {
        margin-left: 37px;
        margin-bottom: 0px;
        line-height: 20px;
    }


    .mission-vision .media {
        margin-right: -3.4%;
    }

    .mission-vision .media-body {
        padding: 5px 0;
    }

    .our-pledge i {
        font-size: 20px;
        line-height: 30px;
        margin: 0 10px 0 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .h1, h1 {
        font-size: 35px!important;
    }

    .h2, h2 {
        font-size: 30px!important;
    }

    .h3, h3 {
        font-size: 25px!important;
    }

    .dropdown .dropdown-content {
        right: -20px;
        left: auto;
    }

    .dropdown .dropdown-content br {
        display: block!important;
    }

    .nav-link {
        padding: 0 0 0 1.4rem;
    }

    .header-icons i {
        width: 40px;
    }

    .home-intro h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .home-intro .card-body h5, .home-intro .card-body a {
        font-size: 25px;
    }

    .home-intro .card-body i {
        width: 25px;
        margin-right: 15px;
    }

    .home-intro .card-body .whatsapp i {
        font-size: 30px;
    }

    .home-sections .card {
        padding: 0px;
    }

    .home-sections .card h4:after {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .section1 {
        background-position: right 0% top 79%;
        background-size: 20%;
    }

    .section2 {
        background-position: left 0% top 79%;
        background-size: 20%;
    }

    .section3 {
        background-position: right 0% top 80%;
        background-size: 20%;
    }

    .krugerrands-header, .gold-header, .about-header, .blog-header, .contact-header {
        background-position: center left 14%;
        background-size: 20%;
    }

    .krugerrands-header img, .gold-header img {
        width: 90%;
    }

    .krugerrands-absolute {
        margin-bottom: -16%;
        margin-top: 2%;
    }

    .why-invest i {
        font-size: 25px;
    }

    .why-invest .card {
        padding: 10px;
    }

    .our-process {
        background-size: 150%;
        padding: 20% 0 5% 0;
    }

    .krugerrands-absolute .card img {
        width: 80%;
    }

    .mission-vision .media {
        margin-right: -3.4%;
    }

    .mission-vision  .media-body {
        -ms-flex: 1;
        flex: 1;
        padding: 10px 0;
    }

    .mission-vision li {
        margin-left: 37px;
        margin-bottom: 10px;
        line-height: 15px;
    }
}

/* Laptop: */
@media (min-width: 1200px) and (max-width: 1600px) {
    .dropdown .dropdown-content {
        right: -20px;
        left: auto;
    }

    .dropdown .dropdown-content br {
        display: block!important;
    }

    .header {
        padding: 5px 0;
    }

    #background-video {
        height: 103%;
    }

    .home-sections .card {
        padding: 0px;
    }

    .section1 {
        background-position: right 19% top 85%;
        background-size: 20%;
    }

    .section2 {
        background-position: left 19% top 77%;
        background-size: 20%;
    }

    .section3 {
        background-position: right 19% top 78%;
        background-size: 20%;
    }

    .krugerrands-header img, .gold-header img {
        width: 80%;
    }

    .krugerrands-header, .gold-header, .about-header, .blog-header, .contact-header {
        background-position: center left 12%;
    }

    .why-invest i {
        font-size: 25px;
        line-height: 40px;
    }

    .our-process {
        background-size: 200%;
        padding: 20% 0 5% 0;
    }

    .mission-vision .media {
        margin-right: -2.7%;
    }

    .mission-vision li {
        margin-bottom: 7px;
        line-height: 15px;
    }

    .footer img {
        width: 80%;
        height: auto;
    }
}

@media (min-width: 1280px) and (max-width: 1600px) {
    .section1 {
        background-position: right 29% top 85%;
        background-size: 20%;
        padding-bottom: 100px;
    }

    .section2 {
        background-position: left 29% top 69%;
        background-size: 20%;
        padding-bottom: 100px;
    }

    .section3 {
        background-position: right 29% top 78%;
        background-size: 20%;
        padding-bottom: 100px;
    }

    .krugerrands-header, .gold-header, .about-header, .blog-header, .contact-header {
        background-position: center left 15%;
    }

    .mission-vision .media {
        margin-right: -6.2%;
    }
}

/* 14” HD Laptop */
@media (min-width: 1391px) and (max-width: 1600px) {
    #background-video {
        height: 115%;
    }

    .home-intro h2 {
        font-size: 35px;
    }

    .section1 {
        background-position: right 29% top 87%;
        background-size: 20%;
    }

    .section2 {
        background-position: left 29% top 77%;
        background-size: 20%;
    }

    .section3 {
        background-position: right 29% top 71%;
        background-size: 20%;
    }

    .krugerrands-header, .gold-header, .about-header, .blog-header, .contact-header {
        background-position: center left 18%;
        background-size: 15%;
    }

    .our-process {
        background-size: 170%;
        padding: 20% 0 5% 0;
    }

    .krugerrands-absolute .card img {
        width: 80%;
    }

    .mission-vision .media {
        margin-right: -11.1%;
    }

    .our-pledge i {
        font-size: 25px;
        margin: 0 15px;
    }
}

@media (min-width: 1440px) and (max-width: 1600px) {
    .mission-vision .media {
        margin-right: -13.3%;
    }

    #background-video {
        height: 101%;
    }

    .section1 {
        background-position: right 29% top 83%;
        background-size: 20%;
    }

    .section2 {
        background-position: left 29% top 73%;
        background-size: 20%;
    }

    .section3 {
        background-position: right 29% top 60%;
        background-size: 20%;
    }
}

@media (min-width: 2550px) and (max-width: 3000px) {

    .section1 {
        background-position: right 30% top 37%;
        background-size: 15%;
        padding-bottom: 90px;
    }

    .section2 {
        background-position: left 30% top 37%;
        background-size: 15%;
        padding-bottom: 90px;
    }

    .section3 {
        background-position: right 30% top 34%;
        background-size: 15%;
        padding-bottom: 90px;
    }

    .krugerrands-header, .gold-header, .about-header, .blog-header, .contact-header {
        background-position: center left 35%;
    }

    .mission-vision .media {
        margin-right: -63.1%;
    }
    
    .blog-header {
        padding: 6% 0;
    }

    .mission-vision ul {
        width: 50%;
    }
}