/*
====================================
Small Screen - Tablate
====================================
*/
@media (max-width: 991px) {

    html {
        font-size: 45%;
    }

    .container {
        max-width: 720px;
        padding: 0 15px;
    }

    .header_wrapper {
        display: block;
        text-align: center;
        padding: 0;
    }

    .header_links {
        margin-top: 2.5rem;
    }

    .hero_text h2 {
        font-size: 5.2rem;
    }

    .hero_text p {
        font-size: 3rem;
    }

    .hero_wrapper {
        background: rgba(0, 0, 0, 0.4);
        top: 0;
        transform: translateY(0);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .hero_banner img {
        object-position: center;
    }

    .horizon_left::after {
        display: none;
    }

    .horizon_left h3,
    .horizon_right h3 {
        font-size: 3.85rem;
    }

    .horizon_right p {
        font-size: 2.2rem;
    }

    .horizon_right {
        margin-top: 3rem;
        text-align: center;
    }

    .horizon_left {
        text-align: center;
    }

    .horizon_left h3 br {
        display: none;
    }

    .bank_title h3 {
        font-size: 3.85rem;
    }

    .bank_wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .openbank_text {
        text-align: center;
    }

    .openbank_text h3 br {
        display: none;
    }

    .openbank_text h3 {
        font-size: 3.85rem;
    }

    .openbank_text h4 {
        font-size: 2.6rem;
    }

    .openbank_text.v2 {
        padding-bottom: 9rem;
    }

    .team_title h3 {
        font-size: 4.8rem;
    }

    .team_title {
        padding-bottom: 4rem;
    }

    .team_content {
        display: block;
        text-align: center;
    }

    .team_img {
        width: 21.2rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .team_details {
        width: 42.1rem;
        text-align: center;
        margin: 3rem auto;
    }

    .team_text {
        width: 70rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .team_details h3 {
        font-size: 3.8rem;
    }

    .team_wrapper {
        margin-top: 7.5rem;
    }

    .team_wrapper .swiper-button-next img, 
    .team_wrapper .swiper-button-prev img {
        width: 4rem!important;
    }

    .team_section {
        padding: 12.5rem 0rem 15rem;
    }

    .community_text {
        padding: 12rem 15rem;
        text-align: center;
    }

    .beauty_area {
        padding: 15rem 0rem 60rem;
    }

    .beauty_title h3 {
        font-size: 3.8rem;
    }

    .beauty_border {
        display: none;
    }

    .beauty_text p {
        font-size: 2.4rem;
    }

    .beauty_details h4 {
        font-size: 3.2rem;
    }

    .beauty_details p {
        font-size: 2.1rem;
    }

    .beauty_text {
        text-align: center;
    }

    .beauty_details {
        text-align: center;
        margin-top: 4rem;
    }

    .beauty_row {
        padding-top: 5rem;
    }

    .footer_area {
        padding: 14rem 0rem 5rem;
    }

    .footer_logo img {
        width: 40rem;
    }

    .more_btn p {
        font-size: 2.5rem;
    }

    .footer_bottom {
        flex-direction: column;
        gap: 4rem;
        text-align: center;
        padding-top: 7rem;
    }

    .social_media ul {
        padding: 3.5rem 0rem 6.5rem;
    }

    .footer_bottom p {
        font-size: 2.1rem;
    }

    .community_title {
        margin-right: 0rem;
    }

    
}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (max-width: 767px) {

    html {
        font-size: 45%;
    }

    .container {
        max-width: 540px;
        padding: 0 15px;
    }

    .header_area {
        padding: 3rem 0;
    }

    .logo img {
        width: 32rem;
    }

    .hero_banner img {
        object-position: 74%;
    }

    .bank_wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero_text h2 {
        font-size: 4.5rem;
    }

    .hero_text p {
        font-size: 2.65rem;
    }

    .hero_banner img {
        height: 58rem;
    }

    .team_text {
        max-width: 52rem;
        width: 100%;
    }

    .beauty_title h3 {
        font-size: 3.5rem;
    }

    .footer_logo img {
        width: 36rem;
    }

    .social_media img {
        width: 5rem;
    }

    .social_media ul {
        gap: 1.2rem;
    }

    .footer_bottom p {
        font-size: 2rem;
    }

    .footer_bottom img {
        width: 12rem;
    }

    .openbank_text {
        padding: 10rem 8rem 5rem;
    }

    .openbank_text.v2 {
        padding: 10rem 8rem;
    }

    .openbank_text h4 {
        font-size: 2.5rem;
    }

    .team_title h3 {
        font-size: 4.2rem;
    }

    .team_wrapper .swiper-button-next img, 
    .team_wrapper .swiper-button-prev img {
        width: 3.5rem!important;
    }

    .team_details h3 {
        font-size: 3.5rem;
    }

    .community_text {
        padding: 10rem 8rem;
    }

    .quote_text p {
        font-size: 2.3rem;
    }

    .quote_text img {
        width: 4.5rem
    }

    .quote_text .quote_1 {
        left: -2.5rem;
    }

    .community_title h3 {
        font-size: 3.5rem;
    }

    .community_title a {
        font-size: 2.2rem;
    }

    .beauty_area {
        padding: 12rem 0rem 52rem;
    }

    .beauty_title h3 {
        font-size: 3.2rem;
    }

    .horizon_left h3, 
    .horizon_right h3,
    .bank_title h3 {
        font-size: 3.5rem;
    }

    .hero_text h2 {
        letter-spacing: -0.2rem;
    }

    .modal_btn {
        padding: 40px 20px 0px;
    }

    .close_btn button {
        right: 15px;
    }

}

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

    html {
        font-size: 1.7vw;
    }

    .bank_wrapper {
        grid-gap: 3rem;
    }

    .horizon_left h3, .horizon_right h3, .bank_title h3 {
        font-size: 3.2rem;
    }

    .horizon_section {
        padding: 10rem 0rem 12rem;
    }

    .bank_title {
        padding: 10rem 0rem 5rem;
    }

    .hero_text h2 {
        font-size: 4.2rem;
    }

    .logo img {
        width: 30rem;
    }

    .header_links a {
        font-size: 2.1rem;
    }

    .bank_box span {
        font-size: 2.5rem;
    }

    .openbank_text {
        padding: 8rem 3rem 4rem;
    }

    .openbank_text h3 {
        font-size: 3.2rem;
    }

    .openbank_text h4 {
        font-size: 2.1rem;
    }

    .openbank_text.v2 {
        padding: 8rem 3rem;
    }

    .openbank_text p {
        font-size: 2rem;
    }

    .openbank_text.v2 h6 {
        font-size: 1.85rem;
    }

    .team_section {
        padding: 10rem 0rem 12rem;
    }

    .team_title h3 {
        font-size: 3.6rem;
    }

    .team_wrapper {
        padding: 0rem 3rem;
    }

    .team_wrapper .swiper-button-next img, 
    .team_wrapper .swiper-button-prev img {
        width: 3rem!important;
    }

    .team_text {
        max-width: 50rem;
    }

    .team_wrapper .swiper-button-next {
        right: 0rem;
    } 

    .team_wrapper .swiper-button-prev {
        left: 0rem;
    }

    .community_text {
        padding: 10rem 3rem 8rem;
    }

    .community_title h3 {
        font-size: 3.4rem;
    }

    .quote_text img {
        width: 4.2rem;
    }

    .quote_text .quote_1 {
        top: -5rem;
        left: -0.5rem;
    }

    .beauty_title h3 {
        font-size: 3rem;
    }

    .beauty_text p {
        font-size: 2.2rem;
    }

    .footer_area {
        padding: 12rem 0rem 5rem;
    }

    .footer_logo img {
        width: 34rem;
    }

    .footer_bottom {
        padding-top: 6rem;
    }

    .close_btn button {
        right: 8px;
    } 

    .modal_btn {
        padding: 40px 40px 0px;
    }

    .modal_btn ul {
        flex-direction: column;
    }

    .modal_btn ul li {
        width: 100%;
        margin-bottom: 16px;
    }

}