body { background-color: #e9ecef; } .breadcrumb { margin: 25px 5px; } .car-gallery img { height: 95px; width: 125px; cursor: pointer; margin-left: 20px; border-radius: 3px; } .car-details { width: 100%; padding: 25px 25px; } .car-details-row { margin: 15px 0; } .car-details .images .main { width: 90%; margin: 0 auto; display: block; padding: 3% 0; } .car-details .car-title-info span:nth-child(2) { display: flex; } .car-details .car-title-info span:nth-child(2) p { display: inline-block; padding: 0; margin: auto; } .car-details .car-title-info span:nth-child(2) b { display: inline-block; padding: 0; margin: auto 10px; } .car-details .car-title-info span:nth-child(1) { font-size: 25px; font-weight: 700; } .car-details .car-title-info span:nth-child(2) img { width: 28px; margin-right: 5px; } .car-details .car-title-info span p { display: inline-block; margin-right: 20px; } .car-details .car-title-info { margin: 10px 25px; display: flex; justify-content: space-between; } .car-details .car-gallery i:hover { color: #0a97b0; } .car-details .car-gallery i { cursor: pointer; color: #f3f3f3; font-size: 55px; top: 25px; position: relative; } .car-details .car-gallery { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; justify-content: space-evenly; border-top: 5px #0a97b0 solid; background-color: #2a3335; padding: 30px 0; margin: 0 auto; display: flex; width: 90%; } .car-details .details span { display: block; font-size: 25px; font-weight: 600; text-align: center; margin-bottom: 10%; } .car-details .details { padding: 20px; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background-color: #ffffff; } .car-details .short-desc b { width: 100%; font-size: 20px; display: inline-block; letter-spacing: 0.5px; margin: 10px 5px 15px 0; padding: 5px 5px 10px 2px; border-bottom: solid 2px #0a97b0; } .car-details .short-desc { background-color: #ffffff; border-radius: 3px; margin: 30px 0; padding: 50px 30px; } .car-details .phone { color: #0a97b0; width: 100%; padding: 10px; margin: 5% auto; cursor: pointer; font-size: 21px; transition: 0.3s; border-radius: 3px; text-align: center; display: inline-block; border: solid 2px #0a97b0; } .car-details .phone:hover { color: #fff; } .car-details .car-list a { width: 100%; border-radius: 0; } .car-details .car-list .car-images img { width: calc(100% - 30px); } .car-details .car-list .card-text ul li i { color: #0a97b0; } .car-details .car-list .card-text ul li:nth-child(2) span { margin-left: 9px; position: relative; left: -5px; } .car-details .car-list .card-text .card-price { display: inline-block; text-align: center; font-size: 29px; color: #2a3335; width: 100%; } .car-details .car-list .card-text img { position: relative; width: 30px; left: 5px; } .car-details .car-list .card-text button { width: 100%; border-radius: 0; } .car-details .car-list .car-images { text-align: center; } .car-details .car-list .card-title { margin-left: 10px; } .car-details .car-list .card-title span:nth-child(1) { font-size: 22px; padding: 5px 5px; font-weight: 600; } .car-details .car-list .card-title span:nth-child(2) { font-weight: 600; color: #0a97b0; } .car-details .car-list .card-body { padding: 10px 15px 0 15px; } .car-details .car-list .car-description { width: 100%; } .car-details .car-list .card-text ul li:nth-child(2) { position: relative; left: 15px; } .car-details .car-list .card-text ul li:nth-child(4) { position: relative; left: 27px; } .car-details .car-list .card-text ul li span { margin-left: 10px; } .car-details .car-list .card-text ul { justify-content: space-between; list-style-type: none; flex-wrap: wrap; display: flex; width: 100%; padding: 0 20px; } .car-details .car-gallery div { display: flex; transition: 0.3s; max-width: 55%; flex-wrap: nowrap; overflow-x: scroll; padding-bottom: 5px; flex-direction: row; justify-content: space-around; } .car-details .price b { font-weight: 700 !important; color: #0a97b0; } .car-details .price { font-size: 54px !important; font-weight: 700 !important; letter-spacing: 2px; color: #0a97b0; margin-top: 10%; } .car-gallery .fa-angle-up, .car-gallery .fa-angle-down { display: none; } .car-gallery div::-webkit-scrollbar { width: 10px; height: 10px; } .car-gallery div::-webkit-scrollbar-thumb { background-color: #1d96bb; border: solid 3px #fff; border-radius: 10px; } .car-gallery div::-webkit-scrollbar-track { background-color: #fff; border-radius: 4px; } .car-details .car-list .card-text ul li { width: 50%; } .images-gallery .images { padding-left: 0; background-color: #2a3335; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .car-details .table tr:nth-child(odd) { background-color: #2a33351f; } .car-details .table td, .car-details .table th { padding: 3% 15px; } @media (min-width: 1920px) { .car-details { width: 85%; } } @media (max-width: 1500px) { .car-details { width: 100%; } .car-list .col-lg-3 { flex: 0 0 50%; max-width: 50%; } } @media (max-width: 1610px) { .images-gallery { padding: 0; margin: 25px 0; flex: 0 0 100%; max-width: 100%; } .details { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 1260px) { .car-list .col-lg-3 { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 960px) { .car-details .car-list .card-text ul li { margin: 10px 0; } .car-details .car-list .card-text ul li:nth-child(2) { left: 18px; } .car-details .details { margin: 0; } .car-details .short-desc { margin: 0; margin: 10px 0; } }