/*==================================================
    REMUNERX WEBSITE V2
    RESPONSIVE.CSS
    Part 1 - Desktop & Laptop
==================================================*/

/*=========================================
    LARGE DESKTOP
==========================================*/

@media (min-width:1600px){

    .container{

        max-width:1480px;

    }

    .hero{

        padding:220px 0 150px;

    }

    h1{

        font-size:82px;

    }

    h2{

        font-size:56px;

    }

    p{

        font-size:20px;

    }

}

/*=========================================
    DESKTOP
==========================================*/

@media (max-width:1400px){

    .container{

        width:94%;

    }

    .hero-grid{

        gap:60px;

    }

    .platform-grid{

        gap:60px;

    }

    .facepoint-grid{

        gap:60px;

    }

}

/*=========================================
    LAPTOP
==========================================*/

@media (max-width:1200px){

    section{

        padding:100px 0;

    }

    h1{

        font-size:60px;

    }

    h2{

        font-size:44px;

    }

    h3{

        font-size:28px;

    }

    .hero-grid{

        grid-template-columns:1fr 1fr;

        gap:50px;

    }

    .hero-stats{

        gap:18px;

    }

    .stat-box{

        padding:22px;

    }

    .feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .industry-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .pricing-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .testimonial-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .trusted-logos{

        grid-template-columns:repeat(3,1fr);

    }

}

/*=========================================
    SMALL LAPTOP
==========================================*/

@media (max-width:1100px){

    .dashboard-window{

        max-width:620px;

    }

    .dashboard-body{

        grid-template-columns:80px 1fr;

    }

    .sidebar{

        padding:18px 10px;

    }

    .sidebar-item{

        padding:12px;

    }

    .window-header{

        padding:0 18px;

    }

    .hero-left p{

        font-size:18px;

    }

}

/*==================================================
    REMUNERX WEBSITE V2
    RESPONSIVE.CSS
    Part 2 - Tablet & Mobile
==================================================*/

/*=========================================
    TABLET
==========================================*/

@media (max-width:992px){

    section{

        padding:80px 0;

    }

    .container{

        width:92%;

    }

    h1{

        font-size:48px;

        text-align:center;

    }

    h2{

        font-size:38px;

        text-align:center;

    }

    .section-title{

        text-align:center;

    }

    .section-title p{

        margin:auto;

    }

    /* HERO */

    .hero{

        padding:140px 0 80px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-left{

        text-align:center;

    }

    .hero-left p{

        margin:0 auto 35px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-stats{

        max-width:700px;

        margin:auto;

    }

    /* DASHBOARD */

    .dashboard-window{

        max-width:100%;

        margin:auto;

    }

    .floating-card{

        display:none;

    }

    /* SECTIONS */

    .platform-grid,

    .facepoint-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .platform-image,

    .facepoint-image{

        order:1;

    }

    .platform-content,

    .facepoint-content{

        order:2;

        text-align:center;

    }

    .platform-list{

        max-width:650px;

        margin:auto;

    }

}

/*=========================================
    SMALL TABLET
==========================================*/

@media (max-width:768px){

    h1{

        font-size:40px;

    }

    h2{

        font-size:32px;

    }

    h3{

        font-size:24px;

    }

    p{

        font-size:16px;

    }

    section{

        padding:70px 0;

    }

    /* HERO */

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stats{

        grid-template-columns:1fr;

    }

    /* DASHBOARD */

    .dashboard-body{

        grid-template-columns:70px 1fr;

    }

    .dashboard-content{

        padding:18px;

    }

    .sidebar-item span{

        display:none;

    }

    .sidebar-item{

        padding:12px 8px;

    }

    .window-title{

        display:none;

    }

    /* GRIDS */

    .feature-grid,

    .industry-grid,

    .testimonial-grid,

    .pricing-grid,

    .stats-grid,

    .payroll-grid,

    .facepoint-list{

        grid-template-columns:1fr;

    }

    .kpi-grid{

        grid-template-columns:1fr;

    }

    .trusted-logos{

        grid-template-columns:repeat(2,1fr);

    }

    /* CTA */

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

    /* FOOTER */

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-bottom{

        flex-direction:column;

        gap:20px;

    }

}

/*==================================================
    REMUNERX WEBSITE V2
    RESPONSIVE.CSS
    Part 3 - Mobile & Utilities
==================================================*/

/*=========================================
    MOBILE
==========================================*/

@media (max-width:576px){

    .container{

        width:94%;

    }

    section{

        padding:60px 0;

    }

    h1{

        font-size:34px;

        line-height:1.15;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:15px;

        line-height:1.7;

    }

    .hero{

        padding:120px 0 60px;

    }

    .hero-tag{

        font-size:13px;

        padding:10px 16px;

    }

    .hero-buttons{

        gap:12px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

    .dashboard-window{

        border-radius:18px;

    }

    .dashboard-body{

        grid-template-columns:60px 1fr;

    }

    .sidebar{

        padding:12px 6px;

    }

    .sidebar-item{

        padding:10px 6px;

    }

    .sidebar-item i{

        font-size:18px;

    }

    .dashboard-content{

        padding:14px;

    }

    .chart-card,

    .activity-card,

    .feature-card,

    .pricing-card,

    .testimonial-card,

    .industry-card,

    .payroll-card{

        padding:20px;

        border-radius:20px;

    }

    .attendance-chart{

        height:150px;

    }

    .price{

        font-size:38px;

    }

    .trusted-logos{

        grid-template-columns:1fr;

    }

    .logo-item{

        height:70px;

    }

}

/*=========================================
    SMALL PHONES
==========================================*/

@media (max-width:400px){

    h1{

        font-size:30px;

    }

    h2{

        font-size:24px;

    }

    .hero{

        padding-top:105px;

    }

    .dashboard-window{

        border-radius:16px;

    }

    .window-right img{

        width:34px;

        height:34px;

    }

    .dot{

        width:10px;

        height:10px;

    }

    .btn{

        padding:14px 18px;

        font-size:15px;

    }

}

/*=========================================
    LANDSCAPE PHONES
==========================================*/

@media (max-height:600px) and (orientation:landscape){

    .hero{

        padding:100px 0 50px;

    }

    section{

        padding:50px 0;

    }

}

/*=========================================
    TOUCH DEVICES
==========================================*/

@media (hover:none){

    .feature-card:hover,

    .pricing-card:hover,

    .testimonial-card:hover,

    .industry-card:hover,

    .payroll-card:hover,

    .btn:hover{

        transform:none;

    }

}

/*=========================================
    PRINT
==========================================*/

@media print{

    .header,

    .footer,

    .hero-buttons,

    .scroll-indicator,

    .floating-card{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

    section{

        padding:20px 0;

        page-break-inside:avoid;

    }

}

/*=========================================
    LOGO
=========================================*/

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    width:250px;
    height:65px;
    object-fit:contain;
    display:block;
}

/* Tablet */

@media (max-width:992px){

    .logo img{
        width:200px;
        height:52px;
    }

}

/* Mobile */

@media (max-width:768px){

    .logo img{
        width:170px;
        height:44px;
    }

}

/* Small Mobile */

@media (max-width:480px){

    .logo img{
        width:150px;
        height:39px;
    }

}

/*=========================================
    END OF RESPONSIVE.CSS
==========================================*/