/* ======= Google font import -poppins ====== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
/* ====== Colors ======= */

:root {
    --red: #A50029;
    --white: #ffff;
    --black: #000;
    --gray: #858585;
    --light-gray: #F2F2F2;
    --main-width: 1500px;
}

body{
    height: 100vh;
    position: relative;
}

.car_detail_list{
    h3{
        font-size: 19px;
    }
    padding-top: 100px;
    margin: 0 3%;
    .body-detail{
        padding-bottom: 2rem;
        font-size: 15px;
        .main_info{
            display: flex;
            margin-top: 2rem;
            .container-img{
                height: 500px;
                width: 55%;
                swiper-container{
                    height: 100%;
                }
                 swiper-slide {
                    text-align: center;

                    font-size: 18px;

                    background: #fff;

                    display: flex;

                    justify-content: center;

                    align-items: start;

                    height: auto;
                }

                .mySwiper swiper-slide img {
                    
                    display: block;

                    width: 100%;

                    min-height: 500px;

                    max-height: 550px;

                    object-fit: contain;

                    background-color: var(--light-gray);
                }

                .mySwiper2 swiper-slide img {
                    display: block;

                    width: 100%;

                    object-fit: cover;
                }

                .mySwiper2 {
                    cursor: pointer;
                    
                    /* height: 250px; */

                    box-sizing: border-box;

                    padding: 5px 0;
                }

                .mySwiper2 swiper-slide {
                    width: 25%;
                }

                .mySwiper2 .swiper-slide-thumb-active {
                    opacity: 1;
                }

                swiper-slide img {
                    display: block;

                    width: 100%;

                    height: 100%;

                    object-fit: cover;
                }
            }
        }
        .option_info{
            width: 42%;
            margin-left: 3%;
            table, td, th {
                background-color: var(--light-gray);
                border: 1px solid var(--red);
                padding: 15px;
                width: 50%;
                .info-table{
                    display: flex;
                    justify-content: space-between;
                    .right{
                        color: var(--gray);
                    }
                }
            }

            table {
                width: 100%;
                border-collapse: collapse;
            }
            .info_bottom{
                margin-top: 2rem;
                border: 1px solid var(--red);
                background-color: var(--light-gray);
                padding: 15px;
                hr{
                    color: var(--red);
                }
                .info_table_bottom{
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 0;
                    .left h5{
                        color: var(--red);
                    }
                    .right {
                        span{
                            color: var(--red);
                            font-weight: 700;
                        }
                        .select_op{
                            width: 140px;
                        }
                    }
                    
                }
                
            }
        }

        .purchase {
            margin-top: 2rem;
            border: 2px solid var(--red);
            padding: 2rem 2rem 0rem 2rem;
            border-radius: 20px;
            .body-purchase{
                margin: 1rem 0;
                .content {
                    display: flex;
                    justify-content: space-between;
                    padding: 1.5rem 0;
                    .head {
                        width: 25%;
                    }
                    .descrition {
                        width: 70%;
                        font-size: 16px;
                        font-weight: 400;
                        color: var(--gray);
                    }
                }
            }
        }
    }
}
    


@media (min-width: 1582px ){
    h3{
        font-size: 19px !important;
    }
    .car_detail_list{
       margin: 0 10%;
    }
}

@media (max-width: 952px ){
    h3{
        font-size: 17px !important;
    }
    h5{
        font-size: 15px !important;
    }
    
    .car_detail_list {
        .body-detail {
            .main_info {
                display: block;
                .container-img {
                    height: auto;
                    width: 100%;
                }
            }
            .option_info {
                width: 100%;
                margin-left: 0;
                margin-top: 1rem;
            }
            .purchase {
           
                .body-purchase{
                    
                    .content {
                        
                        .head {
                            
                        }
                        .descrition {
                            width: 70%;
                            font-size: 14px;
                            font-weight: 400;
                            color: var(--gray);
                        }
                    }
                }
            }
        }
    }

}

@media (max-width: 858px ){

    .container-img {
        height: auto;
        width: 100%;
    }
    .car_detail_list {
        font-size: 14px;
    }
}


@media (max-width: 600px){
    .car_detail_list {
        font-size: 14px;
    }
    .menu_icon{
        display: block;
    }

    #menuList{
        z-index: 1000;
        transition: all 0.5s;
    }

    .car_detail_list {
        .body-detail{
            .main_info{
                .container-img{
                    .mySwiper swiper-slide img {
                        display: block;
                        width: 100%;
                        min-height: 350px;
                        object-fit: contain;
                    }
                }
            }
            .purchase {
           
                .body-purchase{
                    
                    .content {
                        .descrition {
                            width: 70%;
                            font-size: 12px;
                            font-weight: 400;
                            color: var(--gray);
                        }
                    }
                }
            }
        }
    }

}