/*==================================================
    PT ARTHA REKA NUSANTARA
    Responsive Stylesheet
==================================================*/


/*=========================================
    Large Desktop
=========================================*/

@media (max-width:1400px){

    .container-custom{
        max-width:1140px;
    }

}


/*=========================================
    Laptop
=========================================*/

@media (max-width:1200px){

    h1{
        font-size:58px;
    }

    h2{
        font-size:40px;
    }

    .section{
        padding:100px 0;
    }

    .hero{
        min-height:90vh;
    }

    .cta-title{
        font-size:38px;
    }

}


/*=========================================
    Tablet
=========================================*/

@media (max-width:991px){

    .container-custom{
        max-width:960px;
    }

    h1{
        font-size:48px;
    }

    h2{
        font-size:36px;
    }

    h3{
        font-size:28px;
    }

    p{
        font-size:16px;
    }

    .section{
        padding:80px 0;
    }

    .section-header{
        margin-bottom:50px;
    }

    .hero{

        text-align:center;
        padding-top:120px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        margin-top:60px;

    }

    .floating-card{

        position:relative;

        display:inline-flex;

        margin-top:20px;

    }

    .cta-wrapper{

        padding:50px 35px;
        text-align:center;

    }

    .footer{

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact li{

        justify-content:center;

    }

}


/*=========================================
    Mobile
=========================================*/

@media (max-width:768px){

    h1{

        font-size:40px;

        line-height:1.2;

    }

    h2{

        font-size:32px;

    }

    h3{

        font-size:26px;

    }

    .section{

        padding:70px 0;

    }

    .section-title{

        font-size:32px;

    }

    .section-description{

        font-size:15px;

    }

    .btn-primary-custom,
    .btn-secondary-custom{

        width:100%;

        display:block;

        margin-bottom:15px;

        text-align:center;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:15px;

    }

    .card-custom{

        padding:30px;

    }

    .cta-title{

        font-size:30px;

    }

    .cta-wrapper{

        padding:40px 25px;

    }

    .footer-logo{

        margin:auto;
        margin-bottom:25px;

    }

}


/*=========================================
    Small Mobile
=========================================*/

@media (max-width:576px){

    .container-custom{

        padding-left:18px;
        padding-right:18px;

    }

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:24px;

    }

    p{

        font-size:15px;

    }

    .section{

        padding:60px 0;

    }

    .card-custom{

        padding:25px;

    }

    .icon-box{

        width:60px;
        height:60px;
        font-size:24px;

    }

    .footer{

        padding-top:70px;

    }

    #backToTop{

        width:48px;
        height:48px;
        right:20px;
        bottom:20px;

    }

}

/*=========================================
    Timeline Responsive
=========================================*/

@media (max-width:768px){

    .timeline::before{

        left:25px;

    }

    .timeline-item{

        flex-direction:column;

        padding-left:60px;

    }

    .timeline-year{

        width:90px;

        min-width:90px;

        height:42px;

        font-size:14px;

        margin-bottom:20px;

    }

    .timeline-content{

        margin-left:0;

    }

    .timeline-content::before{

        left:-44px;

    }

}

@media (max-width:991px){

    .why-image{

        margin-top:50px;

    }

    .why-floating-card{

        position:relative;

        left:0;

        bottom:0;

        margin-top:25px;

    }

}

/*=========================================
    WHY OUR SERVICES
=========================================*/

@media (max-width:991px){

    .service-badge{

        position:relative;

        right:0;

        bottom:0;

        margin-top:25px;

        width:100%;

    }

}
@media (max-width:991px){

    .product-floating-card{

        position:relative;

        left:0;

        bottom:0;

        margin-top:25px;

        max-width:100%;

    }

}

@media (max-width:991px){

    .map-wrapper iframe{

        height:420px;

    }

}