/*=========================================================
            RESPONSIVE STYLESHEET
        Global Responsive Overrides
==========================================================*/


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

@media (max-width:1400px){

.container{
    max-width:1200px;
}

}


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

@media (max-width:1200px){

.hero h1{
    font-size:52px;
}

.section-title{
    font-size:36px;
}

.tracking-number{
    font-size:40px;
}

}


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

@media (max-width:992px){

section{
    padding:70px 0;
}

.hero{
    min-height:auto;
    padding:90px 0;
    text-align:center;
}

.hero img{
    margin-top:40px;
}

.hero h1{
    font-size:44px;
}

.section-title{
    font-size:34px;
}

.tracking-section{
    margin-top:0;
}

.tracking-box{
    padding:30px;
}

.contact-wrapper{
    padding:35px;
}

.contact-card{
    padding:35px;
}

.home-cta{
    padding:90px 0;
}

.floating-card{
    padding:30px;
}

.shipping-label{
    padding:30px;
}

.status-header{
    flex-direction:column;
    gap:20px;
}

.timeline-header{
    flex-direction:column;
}

}

/*=========================================================
Phones
==========================================================*/

@media (max-width:768px){

section{
    padding:60px 0;
}

.container{
    padding-left:18px;
    padding-right:18px;
}

/* Typography */

.section-title{
    font-size:28px;
}

.section-subtitle{
    margin-bottom:30px;
}

.hero h1{
    font-size:34px;
    line-height:1.3;
}

.hero p{
    font-size:16px;
}

.page-banner{
    min-height:230px;
}

/* Buttons */

.btn-main,
.btn-outline-main{

    width:100%;
    margin-bottom:12px;
    padding:13px 20px;

}

/* Cards */

.feature-box,
.service-card,
.process-step,
.pricing-card,
.info-card,
.metric-card,
.support-card{

    padding:25px;

}

.contact-card{

    padding:25px;

}

.contact-wrapper{

    padding:20px;

}

.floating-card{

    padding:22px;

}

.card-dashboard{

    padding:20px;

}

/* Icons */

.service-icon,
.info-icon,
.stat-icon,
.support-icon{

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

}

.cta-icon{

    width:80px;
    height:80px;
    font-size:32px;

}

/* Statistics */

.stat-card h2{

    font-size:34px;

}

/* Pricing */

.pricing-header h1{

    font-size:34px;

}

/* Tracking */

.tracking-box{

    padding:20px;

}

.tracking-number{

    font-size:28px;
    letter-spacing:1px;

}

.badge{

    font-size:13px;

}

.progress-tracker{

    overflow-x:auto;
    padding-bottom:15px;

}

.progress-step{

    min-width:130px;

}

/* Journey */

.journey-card{

    flex-direction:column;
    text-align:center;

}

.status-card{

    flex-direction:column;
    text-align:center;

}

/* Shipment Summary */

.shipment-summary{

    grid-template-columns:1fr;

}

/* Timeline */

.timeline-header{

    flex-direction:column;

}

.timeline-actions{

    flex-direction:column;

}

.timeline-actions .btn{

    width:100%;

}

/* Shipping Label */

.shipping-label{

    padding:18px;

}

/* Tables */

.table-responsive{

    overflow-x:auto;

}

.table{
    white-space:nowrap;
}

}

/*=========================================================
Small Phones
==========================================================*/

@media (max-width:576px){

.hero h1{
    font-size:30px;
}

.section-title{
    font-size:24px;
}

.company-logo{

    width:42px;
    height:42px;

}

.brand-title{

    font-size:1rem;

}

.brand-subtitle{

    display:none;

}

.service-content h4{

    font-size:20px;

}

.tracking-page .form-control{

    height:50px;

}

.tracking-page .btn{

    padding:12px;

}

.empty-timeline{

    padding:40px 15px;

}

}

/*=========================================================
Extra Small Phones
==========================================================*/

@media (max-width:400px){

.hero h1{

    font-size:26px;

}

.section-title{

    font-size:22px;

}

.tracking-number{

    font-size:22px;

}

}

@media (min-width:1600px){

.container{
    max-width:1500px;
}

.hero h1{
    font-size:68px;
}

}

@media (max-width:480px){

.btn-main,
.btn-outline-main{
    font-size:15px;
}

.hero h1{
    font-size:28px;
}

}