/*======================================================
            POINTECH SOLUTIONS
            RESPONSIVE.CSS
======================================================*/

/*======================================================
            LARGE DEVICES (1200px)
======================================================*/

@media (max-width:1200px){

    .hero-section h1{

        font-size:52px;

    }

    .section-title,
    h2{

        font-size:38px;

    }

}

/*======================================================
            LAPTOPS (992px)
======================================================*/

@media (max-width:992px){

    section{

        padding:70px 0;

    }

    .top-bar{

        display:none;

    }

    .navbar{

        background:var(--primary);

        padding:12px 0;

    }

    .navbar-collapse{

        background:var(--primary);

        padding:20px;

        border-radius:10px;

        margin-top:15px;

    }

    .nav-link{

        margin-left:0;

        padding:12px 0;

    }

    .hero-section{

        text-align:center;

        padding-top:120px;

        min-height:auto;

    }

    .hero-section h1{

        font-size:46px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-buttons .btn{

        margin-bottom:15px;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-image{

        margin-top:50px;

        max-width:450px;

        margin-left:auto;

        margin-right:auto;

    }

    #about img,
    #training img{

        margin-bottom:40px;

    }

    .cta-section{

        text-align:center;

    }

    .cta-section .text-lg-end{

        text-align:center !important;

        margin-top:30px;

    }

}

/*======================================================
            TABLETS (768px)
======================================================*/

@media (max-width:768px){

    section{

        padding:60px 0;

    }

    .hero-section h1{

        font-size:38px;

    }

    .hero-section p{

        font-size:15px;

    }

    h2{

        font-size:32px;

    }

    .section-subtitle{

        font-size:13px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:15px;

    }

    .hero-buttons .btn{

        width:100%;

        margin-right:0;

    }

    .hero-features{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .feature-item{

        font-size:15px;

    }

    .counter-box{

        margin-bottom:30px;

    }

    .counter-box h2{

        font-size:42px;

    }

    .service-card,

    .service-box,

    .why-card,

    .process-card,

    .testimonial-card{

        margin-bottom:20px;

    }

    .contact-info{

        margin-bottom:40px;

    }

    .info-box{

        margin-bottom:25px;

    }

    .footer{

        text-align:center;

    }

    .footer-links{

        margin-bottom:30px;

    }

    .social-icons{

        justify-content:center;

    }

}

/*======================================================
            MOBILE DEVICES (576px)
======================================================*/

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .logo{

        height:48px;

    }

    .hero-section{

        padding-top:110px;

    }

    .hero-section h1{

        font-size:30px;

        line-height:1.3;

    }

    .hero-subtitle{

        font-size:12px;

        padding:6px 15px;

    }

    h2{

        font-size:28px;

    }

    p{

        font-size:15px;

    }

    .btn{

        width:100%;

        padding:14px 20px;

    }

    .hero-buttons{

        gap:15px;

    }

    .about-feature{

        margin-bottom:20px;

    }

    .service-icon{

        width:70px;

        height:70px;

        line-height:70px;

        font-size:28px;

    }

    .service-box i{

        font-size:36px;

    }

    .why-card i{

        width:70px;

        height:70px;

        line-height:70px;

        font-size:28px;

    }

    .process-card .step{

        width:38px;

        height:38px;

        line-height:38px;

        font-size:14px;

    }

    .info-box{

        flex-direction:column;

        text-align:center;

    }

    .info-box i{

        margin:0 auto 15px;

    }

    .accordion-button{

        font-size:15px;

    }

    .back-to-top{

        width:45px;

        height:45px;

        line-height:45px;

        right:15px;

        bottom:15px;

        font-size:18px;

    }

}

/*======================================================
            EXTRA SMALL DEVICES (400px)
======================================================*/

@media (max-width:400px){

    .hero-section h1{

        font-size:26px;

    }

    h2{

        font-size:24px;

    }

    .navbar-brand{

        font-size:22px;

    }

    .service-card{

        padding:25px 18px;

    }

    .service-box{

        padding:25px 18px;

    }

    .why-card{

        padding:25px 18px;

    }

    .testimonial-card{

        padding:25px;

    }

}

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

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

    .hero-section{

        min-height:auto;

        padding:140px 0 80px;

    }

}

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

@media print{

    .navbar,

    .top-bar,

    .back-to-top,

    .hero-buttons,

    .social-icons,

    .btn,

    footer{

        display:none !important;

    }

    body{

        color:#000;

        background:#fff;

    }

    section{

        padding:20px 0;

    }

}