/*==========================================
    IMPORT FONT
==========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.cap-wrapper{
    max-width:900px;
    margin:50px auto;
    padding:20px;
    font-family:'Poppins',sans-serif;
}

/*==========================================
    SEARCH CARD
==========================================*/

.cap-card{
    background:#fff;
    border-radius:15px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    text-align:center;
}

.cap-card h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:12px;
    color:#2b2b2b;
    text-transform:uppercase;
    letter-spacing:1px;
}

.cap-card p{
    color:#777;
    margin-bottom:30px;
}

/*==========================================
    SEARCH BOX
==========================================*/

.cap-search-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
}

.cap-search-box input{

    width:420px;
    height:55px;

    border:2px solid #e4e4e4;
    border-radius:8px;

    padding:0 20px;

    font-size:16px;

    transition:.3s;
}

.cap-search-box input:focus{

    border-color:#9a4d11;

    outline:none;

    box-shadow:0 0 15px rgba(154,77,17,.15);

}

.cap-search-box button{

    height:55px;

    padding:0 30px;

    background:#9a4d11;

    color:#fff;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.cap-search-box button:hover{

    background:#7d3d0d;

}

/*==========================================
    RESULT CARD
==========================================*/

.cap-result-card{

    margin-top:35px;

    background:#fff;

    border-radius:15px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    overflow:hidden;

    padding-bottom: 40px;

}

.cap-result-card h2{

    margin:0;

    padding:25px;

    background:#9a4d11;

    color:#fff;

    font-size:28px;

    text-align:center;

}

.cap-result-card h3{

    text-align:center;

    margin:35px 0 25px;

    font-size:28px;

}

/*==========================================
    TABLE
==========================================*/

.cap-table{

    width:100%;

    border-collapse:collapse;

}

.cap-table tr{

    border-bottom:1px solid #eee;

}

.cap-table th{

    width:220px;

    background:#f7f7f7;

    color:#444;

    text-align:left;

    padding:16px;

    font-weight:600;

}

.cap-table td{

    padding:16px;

    color:#555;

}

/*==========================================
    STATUS COLORS
==========================================*/

.cap-status{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    background:#fff5e6;

    color:#d98200;

}

/*==========================================
    TRACKING TIMELINE
==========================================*/

.cap-timeline{

    position:relative;

    margin:30px;

    padding-left:38px;

    list-style:none;

}

.cap-timeline:before{

    content:'';

    position:absolute;

    left:10px;

    top:0;

    bottom:0;

    width:3px;

    background:#ddd;

}

.cap-timeline li{

    position:relative;

    margin-bottom:25px;

    color:#555;

    font-size:15px;

    line-height:24px;

}

.cap-dot{

    position:absolute;

    left:-36px;

    top:5px;

    width:18px;

    height:18px;

    background:#28a745;

    border-radius:50%;

    border:4px solid #fff;

    box-shadow:0 0 0 3px #28a745;

}

/*==========================================
    LOADING
==========================================*/

.cap-loading{

    text-align:center;

    background:#fff8dd;

    padding:20px;

    border-radius:10px;

    margin-top:25px;

    font-size:18px;

}

/*==========================================
    ERROR
==========================================*/

.cap-error{

    background:#ffe4e4;

    color:#d10000;

    padding:20px;

    border-radius:10px;

    text-align:center;

    margin-top:25px;

}

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

@media(max-width:768px){

.cap-card{

padding:25px;

}

.cap-card h2{

font-size:30px;

}

.cap-search-box{

flex-direction:column;

}

.cap-search-box input{

width:100%;

}

.cap-search-box button{

width:100%;

}

.cap-table th,
.cap-table td{

display:block;

width:100%;

}

.cap-table th{

background:#9a4d11;

color:#fff;

}

.cap-timeline{

margin:20px;

}

}