.container-type td{
    font-size: 16px;
    line-height: 32px;
}

.container-type .content{
    overflow:hidden;
}

.container-type {
    border-radius: 32px;
    padding:0 16px
}
.container-type .img{
    background: linear-gradient(311.47deg, #8D8C8A 10%, #FFFFFF 97.76%);
    /* background: linear-gradient(311.47deg, #8D8C8A 100%, #FFFFFF 100%); */
    border-radius:32px 32px 0 0;
    padding:32px;
    height:300px;
    display:flex;
    align-items:center
}

.container-type .img img{
    width: 100%;
    height: 230px;
    object-fit:contain
}

.container-type .detail{
    padding: 32px;
    background-color: #F6FAFF;
}

.container-type .detail .name{
    margin-top:-80px;
    padding: 16px 0px 16px 0px;
    border-radius: 16px;
    border: 1px solid #FFFFFF;
    gap: 10px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(30px);
    border: 1px solid #FFFFFF;
}

#location {
    /* padding: 0 64px; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#location .place{
    display: flex;
    flex-wrap: wrap; 
}

#location .box{
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    /* background-color: #121C45; */
}

#location .box img{
    width: 100%;
    height: 320px;
}

#location .box p{
    font-weight: 700;
    font-size: 17px;
    color: #5E6666;
}

#location .box i{
    color: #FF5E14;
}

#location .box .contents h1{

    margin-top: -60px;
    margin-left: 30px;
    margin-right: 30px;
    padding: 16px 0px 16px 0px;
    border-radius: 16px;
    border: 1px solid #FFFFFF;
    gap: 10px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(30px);
    border: 1px solid #FFFFFF;
}

#location .box .contents{

    background-color: #F6FAFF;
}

#toggling{

    justify-content: center;
    align-items: center;
}

.switch{

    position: relative;
    width: 500px;
    height: 60px;
    border-radius:30px;
}

.switch input{

    appearance: none;
    width: 500px;
    height: 60px;
    border-radius: 30px;
    background: #1e1e1e;
    outline: none;
}

.switch input::before,
.switch input::after{

    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bolder;
}

.switch input::before{

    content: "Truck";
    left: 100px;
}

.switch input::after{

    content: "Warehouse";
    right: 80px;
}

.switch input:checked{

    background: #FFEBE2;
}

.switch label{

    z-index: 1;
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 30px;
}

.switch input{

    transition: 0.25s;

}

.switch input:checked::before{

    color: black;
    transition: color 0.5s ;
}

.switch input:checked::after{

    color: white;
    transition: color 0.5s ;
}

.switch input:checked+label{

    left: 250px;
    right: 8px;
    background: #F0820A;
    transition: right 0.5s, left 0.4s 0.2s;
}

.switch input:not(:checked){

    background: #FFEBE2;
    transition: background 0.4s;
}

.switch input:not(:checked)::before{

    color: white;
    transition: color 0.5s;
}

.switch input:not(:checked)::after{

    color: black;
    transition: color 0.5s 0.2s;
}

.switch input:not(:checked)+label{

    left: 8px;
    right: 250px;
    background: #F0820A;
    transition: right 0.4s 0.2s, left 0.5s, background 0.35s;
}

.hide{

    display: none;
}


/*Carousel truck */

#truck .content{

    position: relative;
}

#truck .button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 22px);
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
}

#truck button{
    padding: 24px;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: 0px;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.1));
}

#truck .content .box{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    align-items: start;
    background: rgba(67, 67, 67, 0.07);
}

#truck .content .box .type{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    height: 100%;
    padding: 32px;
}
#truck .content .box .type.active{
    background: white;
    border-top: 4px solid #002D71;
}

#truck .content .box .type .truck-img{
    width: 300px;
    height: 200px;
}

#trucking-1-mobile{

    background: #F6FAFF;
}

#trucking-3-desktop{

    background: #F6FAFF;
}

@media(max-width: 1024px){
    
    #trucking-1-desktop{

        display: none !important;
    }

    #trucking-2-desktop{

        display: none !important;
    }

    #trucking-3-desktop{

        display: none !important;
    }

    .switch {
        position: relative;
        width: 350px;
        height: 60px;
        border-radius: 30px;
    }

    .switch input {
        appearance: none;
        width: 350px;
        height: 60px;
        border-radius: 30px;
        outline: none;
    }

    .switch input::before {
        content: "Truck";
        left: 59px;
    }

    .switch input:not(:checked)+label {
        left: 8px;
        right: 190px;
        background: #F0820A;
        transition: right 0.4s 0.2s, left 0.5s, background 0.35s;
    }

    .switch input::after {
        content: "Warehouse";
        right: 35px;
    }

    .switch input:checked+label {
        left: 190px;
        right: 8px;
        background: #F0820A;
        transition: right 0.5s, left 0.4s 0.2s;
    }

    #trucking-image{

        display: none !important;
    }

    #warehousing-image{

        display: none !important;
    }

    .fs-3{

        font-size: 18px !important;
    }

    #check{

        width: 25px !important;
        height: 25px !important;
    }

    #location .box .contents h1 {

        margin-top: -35px;
    }

    #location .box{

        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width:  1025px){

    #trucking-1-mobile{

        display: none !important;
    }

    #trucking-2-mobile{

        display: none !important;
    }

    #trucking-3-mobile{

        display: none !important;
    }   
}