/*=========================================================
HERO SECTION
=========================================================*/

.hero-section{

    position:relative;

    width:100%;

    overflow:visible;

    background:#f5f7fb;

}


/*=========================================================
SWIPER
=========================================================*/

.heroSwiper{

    width:100%;

    height:480px;

}


/*=========================================================
SLIDE
=========================================================*/

.hero-slide{

    width:100%;

    height:480px;

    position:relative;

    overflow:hidden;

}


.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}


/*=========================================================
OVERLAY
=========================================================*/

.hero-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.15);

}


/*=========================================================
PAGINATION
=========================================================*/

.heroSwiper .swiper-pagination{

    bottom:100px !important;

}


.heroSwiper .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#ffffff;

    opacity:.6;

    transition:.35s;

}


.heroSwiper .swiper-pagination-bullet-active{

    width:34px;

    border-radius:30px;

    background:var(--primary);

    opacity:1;

}


/*=========================================================
TRACKING BOX
=========================================================*/

.tracking-wrapper{

    position:absolute;

    left:50%;

    bottom:-70px;

    transform:translateX(-50%);

    width:100%;

    z-index:50;

}


.tracking-box{

    background:#ffffff;
    opacity:0.96;
    max-width:950px;

    margin:auto;

    padding:35px;

    border-radius:18px;

    box-shadow:0 20px 55px rgba(0,0,0,.15);

}


/*=========================================================
HEADING
=========================================================*/

.tracking-heading{

    text-align:center;

    margin-bottom:25px;

}


.tracking-heading h2{

    font-size:32px;

    color:var(--primary);

    margin-bottom:8px;

}


.tracking-heading p{

    color:#666;

    font-size:15px;

}


/*=========================================================
FORM
=========================================================*/

.tracking-form{

    display:flex;

    gap:15px;

}


.tracking-input{

    flex:1;

    height:58px;

    border:1px solid #d9d9d9;

    border-radius:50px;

    padding:0 22px;

    font-size:15px;

    transition:.3s;

}


.tracking-input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(6,48,94,.08);

}


.tracking-btn{

    min-width:220px;
    width:220px;
    height:58px;
    border:none;

    border-radius:50px;

    background:#E56A08;

    color:#E56A08;

    font-size:15px;

    font-weight:600;

    cursor:pointer; 

    transition:.35s;

}


.tracking-btn:hover{

    background:#E56A08;

}


.tracking-btn i{

    margin-right:8px;

}


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

@media(max-width:991px){

.heroSwiper{

height:380px;

}

.hero-slide{

height:380px;

}

.tracking-wrapper{

bottom:-60px;

}

.tracking-box{

padding:28px;

max-width:90%;

}

.tracking-heading h2{

font-size:26px;

}

.tracking-form{

flex-direction:column;

}

.tracking-btn{

width:100%;

height:56px;

}

.tracking-input{

height:56px;

}

}


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

@media(max-width:768px){

.heroSwiper{

height:250px;

}

.hero-slide{

height:250px;

}

.heroSwiper .swiper-pagination{

bottom:15px !important;

}

.tracking-wrapper{

position:relative;

left:auto;

bottom:auto;

transform:none;

margin-top:-25px;

padding:0 15px 30px;

}

.tracking-box{

padding:22px;

border-radius:14px;

}

.tracking-heading{

margin-bottom:20px;

}

.tracking-heading h2{

font-size:22px;

}

.tracking-heading p{

font-size:14px;

}

.tracking-form{

gap:12px;

}

.tracking-input{

height:52px;

font-size:14px;

}

.tracking-btn{

height:52px;

font-size:14px;

}

}


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

@media(max-width:480px){

.heroSwiper{

height:200px;

}

.hero-slide{

height:200px;

}

.tracking-heading h2{

font-size:20px;

}

.tracking-box{

padding:18px;

}

}