/* general */
@media (min-width: 375px) {
    /* NAVBAR */
    .navbar {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        padding: 1rem 0;
        
    }
    .navbar-nav .nav-link{
        color: black;
    }
    /* perspective */
    .perspective{
        margin-top: 6rem;
    }
    .perspective .left-col {
        width: 100%;
        text-align: center;
    }
    .perspective .left-col h1{
        font-size: 2.5rem;
        padding-top: 0.5rem;
        font-weight: 800;
    }
    .perspective .left-col img{
        display: none;
    }
    .perspective .right-col{
        width: 100%;
    }
    .perspective .right-col h2{
        margin: 2rem 0;
        padding-left: 0.5rem;
    }
    .perspective .right-col p{
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }
    /* WHY SUNED */
    .why-suned{
        margin-top: 1rem;
    }
    .why-suned .left-col{
        width: 100%;
    }
    .why-suned .left-col h1{
        font-size: 2rem;
    }
    .why-suned .left-col img{
        display: none;
    }
    .why-suned .right-col{
        width: 100%;
        padding-top: 1rem;
    }
    .why-suned .right-col h2{
        display: none;
    }
    .why-suned .right-col p{
        padding: 0 0.5rem;
        font-size: 0.8rem;
    }
}

/* Mặc định: Mobile nhỏ (<480px) */
@media (min-width: 480px) {
    /* perspective */
    .perspective{
        margin-top: 6rem;
    }
    .perspective .left-col {
        width: 100%;
        text-align: center;
    }
    .perspective .left-col h1{
        font-size: 2.5rem;
        padding-top: 0.5rem;
        font-weight: 800;
    }
    .perspective .left-col img{
        display: none;
    }
    .perspective .right-col{
        width: 100%;
    }
    .perspective .right-col h2{
        margin: 2rem 0;
        padding-left: 0.5rem;
    }
    .perspective .right-col p{
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }
    /* WHY SUNED */
    .why-suned{
        margin-top: 1rem;
    }
    .why-suned .left-col{
        width: 100%;
    }
    .why-suned .left-col h1{
        font-size: 2rem;
    }
    .why-suned .left-col img{
        display: none;
    }
    .why-suned .right-col{
        width: 100%;
        padding-top: 1rem;
    }
    .why-suned .right-col h2{
        display: none;
    }
    .why-suned .right-col p{
        padding: 0 0.5rem;
        font-size: 0.8rem;
    }
}

/* Tablet (>=769px) */
@media (min-width: 769px) {
    /* perspective */
    .perspective{
        margin-top: 6rem;
    }
    .perspective .left-col {
        width: 50%;
        text-align: center;
    }
    .perspective .left-col h1{
        font-size: 2.5rem;
        padding-top: 0.5rem;
        font-weight: 800;
    }
    .perspective .left-col img{
        display: block;
        width: 100%;
        padding-top: 2rem;
    }
    .perspective .right-col{
        width: 50%;
    }
    .perspective .right-col h2{
        margin: 2rem 0;
        padding-left: 0.5rem;
    }
    .perspective .right-col p{
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }
    /* WHY SUNED */
    .why-suned{
        margin-top: 1rem;
    }
    .why-suned .left-col{
        width: 50%;
    }
    .why-suned .left-col h1{
        font-size: 2rem;
    }
    .why-suned .left-col img{
        display: block;
    }
    .why-suned .right-col{
        width: 50%;
        padding-top: 1rem;
    }
    .why-suned .right-col h2{
        display: block;
        padding-bottom: 1.5rem;
    }
    .why-suned .right-col p{
        padding: 0 0.5rem;
        font-size: 0.8rem;
    }
}

/* Laptop nhỏ (>=992px) */
@media (min-width: 992px) {
    /* perspective */
    .perspective{
        margin-top: 6rem;
    }
    .perspective .left-col {
        width: 50%;
        text-align: center;
    }
    .perspective .left-col h1{
        font-size: 3rem;
        padding-top: 0.5rem;
        font-weight: 800;
    }
    .perspective .left-col img{
        display: block;
        width: 100%;
        padding-top: 2rem;
    }
    .perspective .left-col .img-2{
        display: none;
    }
    .perspective .right-col{
        width: 50%;
    }
    .perspective .right-col h2{
        margin: 2rem 0;
        padding-left: 0.5rem;
    }
    .perspective .right-col p{
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }
    /* WHY SUNED */
    .why-suned{
        margin-top: 2rem;
    }
    .why-suned .left-col{
        width: 50%;
    }
    .why-suned .left-col h1{
        font-size: 3rem;
        font-weight: 800;
    }
    .why-suned .left-col img{
        display: block;
    }
    .why-suned .right-col{
        width: 50%;
        padding-top: 1rem;
    }
    .why-suned .right-col h2{
        display: block;
        padding-bottom: 1.5rem;
    }
    .why-suned .right-col p{
        padding: 0 0.5rem;
        font-size: 0.8rem;
    }
}

/* Màn hình lớn (>=1200px) */
@media (min-width: 1200px) {
    /* perspective */
    .perspective{
        margin-top: 6rem;
    }
    .perspective .left-col {
        width: 50%;
        text-align: center;
    }
    .perspective .left-col h1{
        font-size: 3rem;
        padding-top: 0.5rem;
        font-weight: 800;
    }
    .perspective .left-col img{
        display: block;
        width: 100%;
        padding-top: 2rem;
    }
    .perspective .left-col .img-2,.perspective .left-col .img-1{
        display: none;
    }
    .perspective .right-col{
        width: 50%;
    }
    .perspective .right-col h2{
        margin: 2rem 0;
        padding-left: 0.5rem;
    }
    .perspective .right-col p{
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }
    /* WHY SUNED */
    .why-suned{
        margin-top: 2rem;
    }
    .why-suned .left-col{
        width: 50%;
    }
    .why-suned .left-col h1{
        font-size: 3rem;
        font-weight: 800;
    }
    .why-suned .left-col img{
        display: block;
    }
    .why-suned .right-col{
        width: 50%;
        padding-top: 1rem;
    }
    .why-suned .right-col h2{
        display: block;
        padding-bottom: 1.5rem;
    }
    .why-suned .right-col p{
        padding: 0 0.5rem;
        font-size: 0.8rem;
    }
}

/* Màn hình lớn (>=1440px) */
@media (min-width: 1440px) {
    /* perspective */
    .perspective .left-col .img-1{
        display: block;
    }
    .perspective .right-col h2{
        margin: 2rem 0;
        padding-left: 0.5rem;
        font-size: 2.5rem;
    }
    .perspective .right-col p{
        font-size: 1rem;
        padding: 0 0.5rem;
    }
    /* WHY SUNED */
    .why-suned .right-col{
        width: 50%;
        padding-top: 1rem;
    }
    .why-suned .right-col h2{
        display: block;
        padding-bottom: 3rem;
        font-size: 2.5rem;
    }
    .why-suned .right-col p{
        padding: 0 0.5rem;
        font-size: 1rem;
    }
}

/* Màn hình lớn (>=1680px) */
@media (min-width: 1680px) {
    /* perspective */
    .perspective .left-col .img-1{
        display: none;
    }
    .perspective .right-col h2{
        margin: 2rem 0;
        padding-left: 0.5rem;
        font-size: 2.5rem;
    }
    .perspective .right-col p{
        font-size: 1rem;
        padding: 0 0.5rem;
    }
    /* WHY SUNED */
    .why-suned .right-col{
        width: 50%;
        padding-top: 1rem;
    }
    .why-suned .right-col h2{
        display: block;
        padding-bottom: 3rem;
        font-size: 2.5rem;
    }
    .why-suned .right-col p{
        padding: 0 0.5rem;
        font-size: 1rem;
    }
}