/*  
Theme Name: Dealer Motor
Theme URI: http://theme-id.com
Description: Indonesia Wordpress Themes <a href="http://theme-id.com/">theme-id.com</a>.
Version: 2.0
Author: Virtarich
Author URI: http://theme-id.com
*/

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

/*======================= RESET =======================*/
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,ol,ul,li,form,fieldset,legend,label,table,header,footer,nav,section{margin:0;padding:0;border:0}
header,footer,nav,section,article,hgroup,figure{display:block}
legend{display:none}
body{margin:0 auto;padding:0;font-size:15px;font-family:'Manrope',sans-serif!important;color:#000;background-color:#CCC}
h1,h2,h3,h4,h5,h6{text-decoration:none;text-transform:capitalize;font-weight:800}
h1{font-size:22px;margin:0 0 5px;line-height:26px;padding-bottom:5px}
h2{font-size:14px;margin:0;padding-bottom:3px}
h3{font-size:14px;margin:0}
h4{color:#000;font-size:13px;text-align:left;padding-top:3px;padding-bottom:3px;margin:0}
a{text-decoration:none}
img{max-width:100%;height:auto;border:0;outline:0}
p{line-height:21px}
p img{padding:0;max-width:100%;height:auto}
img.center{display:inline;margin-top:5px;margin-bottom:5px}
img.alignright{display:inline;border:1px solid #ccc;margin-top:5px;margin-bottom:5px;margin-left:5px;box-sizing:border-box}
img.alignleft{display:inline;margin-top:5px;margin-bottom:5px;margin-right:5px;border:1px solid #ccc;box-sizing:border-box}
.alignright{float:right;margin-top:4px;margin-bottom:4px}
.alignleft{float:left;margin-top:4px;margin-bottom:4px}
.aligncenter{clear:both;display:block;margin:5px auto}
#wrap{width:100%;margin-right:auto;margin-left:auto;background-color:#fff;box-shadow:0 0px 0px rgba(100,100,100,0.3)}
@media screen and (min-width:960px) {
#wrap{
max-width:1020px;
width:100%;
margin:auto;}
}
*,:after,:before{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
[class*='grid-']{float:left;padding:0px;width:100%}
.clear-grid{clear:both;float:inherit}
.header{margin:10px 0;width:100%;background-color:#fff}
container{
margin:0;
width:100%;
padding:0;
}
.footer{margin:0 0 80px;width:100%;text-align:center;padding:15px;font-size:12px;color:#666;border-top-width:3px;border-top-style:solid;border-top-color:#EBEBEB}
.nest{margin:0px;padding:0;width:auto}
.header:after,.header:before,.vtr-menu:after,.vtr-menu:before,.footer:after,.footer:before,.container:after,.container:before,.footbar:after,.footbar:before,.slider:after,.slider:before{display:table;clear:both;content:" "}
.grid-sm-12{width:100%}
.grid-sm-11{width:91.666663%}
.grid-sm-10{width:83.33%}
.grid-sm-9{width:74.999997%}
.grid-sm-8{width:66.66666664%}
.grid-sm-7{width:58.333%}
.grid-sm-6{width:50%}
.grid-sm-5{width:41.6665%}
.grid-sm-4{width:33.33%}
.grid-sm-3{width:24.99%}
.grid-sm-2{width:16.66666%}
.grid-sm-1{width:8.33%}
@media (min-width: 420px) {
.grid-m-12{width:100%}
.grid-m-11{width:91.666663%}
.grid-m-10{width:83.33%}
.grid-m-9{width:74.999997%}
.grid-m-8{width:66.66666664%}
.grid-m-7{width:58.333%}
.grid-m-6{width:50%}
.grid-m-5{width:41.6665%}
.grid-m-4{width:33.33%}
.grid-m-3{width:24.99%}
.grid-m-2{width:16.66666%}
.grid-m-1{width:8.33%}
}
@media (min-width: 720px) {
.grid-12{width:100%}
.grid-11{width:91.666663%}
.grid-10{width:83.33%}
.grid-9{width:74.999997%}
.grid-8{width:66.66666664%}
.grid-7{width:58.333%}
.grid-6{width:50%}
.grid-5{width:41.6665%}
.grid-4{width:33.33%}
.grid-3{width:24.99%}
.grid-2{width:16.66666%}
.grid-1{width:8.33%}
}
.pull-right{float:right}
.pull-left{float:left}
.header-logo{font-size:85%;line-height:2em;font-weight:700;color:#333;padding:5px;min-height:80px;text-align:center}
.header-title{font-size:25px;line-height:30px;text-align:center;padding:5px;font-weight: 600;}
.header-title p{color:#333;text-align:center;font-size:15px;font-weight:400;text-transform:capitalize; }
.judul{text-align:center}
.judul h1{font-size:26px}
.vtr-title{text-align:left;text-transform:capitalize;font-weight:700;overflow:hidden;padding:15px;margin:20px 0 10px;}
.vtr-title a{color:#333}
.vtr-title h1,.vtr-title h2,.vtr-title h3,.vtr-title h4{font-weight:700;margin:0;padding:0;line-height:32px;font-size: 28px;text-align: center;}
.post{width:100%;text-align:center;margin-bottom:10px;clear:both;height:auto;overflow:hidden;box-sizing:border-box;font-size:15px}
.post ul{list-style-type:disc;margin:0 0 5px 25px;padding:0 5px;list-style-position:outside}
.post p,.post ul,.post ol,.post dd,.post pre,.post hr{margin-bottom:12px}
.post ol{list-style-position:outside;margin-left:30px;margin-bottom:10px}
.post ol li{padding:3px;line-height:24px}
.post ul li{padding:3px;line-height:24px}
.post blockquote{color:#000;font-style:italic;background:#f9f9f9;border-left:10px solid #ccc;margin:15px 10px;padding:5px 10px}
.post blockquote:before{content:"\e81c ";font-family:virtarich;font-size:14px;line-height:.1em;margin-right:20px;vertical-align:0}
.post blockquote:after{content:"\e81c ";font-family:virtarich;font-size:14px;line-height:.1em;margin-left:20px;vertical-align:0}
.post blockquote p{display:inline}
.post ul li ul{margin-left:10px;padding:0;border:0}
.tags{float:none;font-size:12px;text-align:left;margin:0;padding:0;color:#666}
.sidebar{
display:flex;
flex-wrap:wrap;
gap:20px;
width:100%;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
margin-top: 15px;
}
.sidebar .box {
    flex: 0 0 calc(33.333% - 14px);
    background-color: #F3f3f3;
    padding: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 15px;
    border: 2px solid #eee;
}
.sidebar h4{
color:#fff;
margin-bottom:0!important;
padding:5px;
font-size:15px;
font-weight:400
}
.sidebar .box a{
font-weight:500;
color:#333
}
.sidebar .box ul{
list-style-type:none;
padding:0
}
.sidebar .box ul li a{
font-size:13px;
color:#333;
display:block;
font-weight:700;
padding:10px 5px
}
.sidebar .box ul li{
border-bottom:1px solid #e6e6e6;
text-transform:capitalize
}
.sidebar .box ul li:last-child{
border-bottom:none
}

.sidebar .box ul li ul{
margin-left:15px;
padding:0
}

.sidebar .box ul li ul li{
border:0
}
.breadcrumbs{float:none;font-size:13px;text-align:left;color:#333;clear:both;margin-bottom:5px;padding-right:0;padding-bottom:5px;padding-left:0}
.breadcrumbs a{text-decoration:none;padding:0 5px 0 0}
.wp-pagenavi{width:100%;clear:both;padding:5px 0;text-align:center;margin:5px auto;line-height:45px}
.pages{color:#000;width:auto;height:auto;margin:0 3px;border:1px solid #e9e9e9;padding:8px;background-color:#FFF}
.current{color:#333;width:auto;height:auto;margin:0;border:1px solid #e9e9e9;padding:8px}
.wp-pagenavi a{color:#000;text-decoration:none;border:1px solid #e9e9e9;padding:8px;background-color:#FFF;margin:5px 0}
.wp-pagenavi a:hover{border:1px solid #e9e9e9}
.vtr-menu-wrap{float:left;width:100%;padding:0 0 15px}
.vtr-menu-icon{cursor:pointer;font-size:18px;line-height:22px;color:#FFF;width:100%;display:block;padding:10px 20px}
.mobile-menu{box-sizing:border-box;background-color:#333;display:none;}
.mobile-menu a{display:block;color:#fff}
.mobile-menu ul{width:100%;display:block}
.mobile-menu li{line-height:30px;display:block;color:#fff;background-color:#333}
.mobile-menu > li{padding-left:0;padding-right:0;float:none}
.mobile-menu li > a{padding-left:10px}
.mobile-menu li li a{padding-left:20px}
.mobile-menu li li li a{padding-left:30px}
.mobile-menu li li li li a{padding-left:40px}
.mobile-menu li li.last{padding-bottom:0!important}
.vtr-menu{display:none}
@media screen and (min-width: 720px) {
.vtr-menu-wrap{display:none}
.vtr-menu{display:block;width:100%;font-weight:600}
.vtr-menu ul{z-index:99000;width:100%;list-style:none;width:100%;display:none;position:absolute;background-color:#333}
.vtr-menu li{display:block;color:#fff;position:relative;background-color:#333;font-size:13px;line-height:30px;font-weight:600}
.vtr-menu > li{line-height:42px;float:left;background-color:transparent;border-right-width:1px;border-right-style:solid;border-right-color:#999;font-size:15px}
.vtr-menu > li:last-child{border-right-width:0px;border-right-style:none;}
.vtr-menu > li a{display:block;text-decoration:none;color:#fff;padding:0 21px;cursor:pointer;margin:0}
.vtr-menu li:hover > a{background-color:#000}
.vtr-menu li:hover > ul{width:160px;display:block;left:0}
.vtr-menu li li:hover> ul{width:100%;display:block;top:0;left:100%}
.vtr-menu .current-menu-item a{background-color:#000}
}
.thumbnail{width:100%;min-height:160px;text-align:center;border:1px solid #ebebeb;background-color:#F7F7F7;position:relative;border-radius: 15px;}
.thumbnail:hover{transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-webkit-box-shadow:0 2px 11px rgba(50,50,50,0.63);-moz-box-shadow:0 2px 11px rgba(50,50,50,0.63);box-shadow:0 2px 11px rgba(50,50,50,0.63)}
.thumbnail-gambar{height:142px;vertical-align:middle;margin-bottom:10px;text-align:center;margin-right:auto;margin-left:auto;background-color:#fff;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#EBEBEB}
.thumbnail-gambar a{color:#999}
.thumbnail-title{width:auto;height:25px;padding-right:0px;padding-left:0px;overflow:hidden;clear:both;margin-top:5px;margin-bottom:5px}
.thumbnail-title a{color:#000;font-weight:600}
.thumbnail-title a:hover{text-decoration:none}
.harga{font-size:25px;margin:0 0 5px;line-height:30px;padding-bottom:5px;text-align:center}
.slider{
width:100%;
margin:15px 0;
border-radius:20px;
overflow:hidden;
}
.slider img{
border-radius:20px;
width:100%;
height:auto;
}
.slider ul{list-style:none outside none;padding-left:0;max-height:450px;overflow:hidden}
.content-slider li{background-color:#F3F3F3;text-align:center;max-height:450px; border-radius: 15px;border: 2px solid #eee;}
.widget-slider{width:100%;max-height:200px;overflow:hidden}
.widget-slider ul{list-style:none outside none}
.photo{margin-right:auto;margin-left:auto;text-align:center;border:1px solid #EBEBEB;position:relative}
.photo-slider{padding:5px;max-height:190px;overflow:hidden}
.photo-slider ul{list-style:none outside none}
.videowrapper{float:none;clear:both;width:100%;position:relative;padding-bottom:56.25%;padding-top:25px;height:0}
.videowrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.vtr-table{margin:0;padding:0;width:100%;float:left}
.vtr-table .kiri{width:47%}
.vtr-table table{width:100%;height:auto;margin:0;padding:0}
.vtr-table tr:nth-child(odd){background-color:#f4f4f4}
.vtr-table tr:nth-child(even){background-color:#fff}
.vtr-table th{vertical-align:middle;text-align:center;padding:7px;font-size:18px;font-weight:700;color:#000}
.vtr-table td{vertical-align:middle;text-align:center;padding:7px;font-size:14px;font-weight:700;color:#333}
.vtr-table tr:last-child td{border-width:0 1px 0 0}
.vtr-table tr td:last-child{border-width:0 0 1px}
.vtr-table tr:last-child td:last-child{border-width:0}
.vtr-table tr:first-child td:last-child{border-width:0 0 1px 1px}
@media print {
body *{visibility:hidden}
#printable,#printable *{visibility:visible}
#printable{position:absolute;left:20px;top:40px}
}
.vcard{background-color:#F7F7F7;text-align:center;float:left}
.vcard-contact{font-size:18px;text-align:left;color:#000;float:left;min-width:170px;letter-spacing:1px;font-family:Verdana,Geneva,sans-serif}
.vcard-header{background-color:#fff;box-sizing:border-box;float:left;width:100%;padding:10px;font-size:22px;font-weight:700}
.vcard-photo{width:100%;float:left;padding:5px;background-color:#EBEBEB;box-sizing:border-box;text-align:center;box-sizing:border-box;max-height:210px;overflow:hidden}
.vcard-name{font-size:25px;letter-spacing:1px;text-align:center;text-decoration:underline;font-weight:700;text-transform:capitalize}
.vcard-title{font-size:12px}
.vcard-content{background-color:#fff;box-sizing:border-box;float:left;width:100%;padding:10px;min-height:115px}
.vcard-footer{background-color:red;box-sizing:border-box;float:left;width:100%;padding:5px;font-size:13px;color:#FFF;text-transform:capitalize}
.vcard-widget-photo{float:left;padding:0px;background-color:#FFF;box-sizing:border-box;width:100%;text-align:center;margin-bottom:0px;height: 302px;}
.vcard-name-widget{font-size:24px;letter-spacing:1px;text-align:center;text-transform:capitalize;font-weight: 600;}
.vcard-title-widget{font-size:12px;text-align:center}
.vcard-widget-contact{font-size:16px;text-align:center;color:#000;float:center;margin:5px 0;min-width:150px;padding:5px;letter-spacing:1px;font-weight:400}
#widget-form{padding:5px}
#widget-form label span{cursor:pointer;color:#000;display:block;margin:5px 0;font-size:13px}
#widget-form input[type="text"]{width:100%;border:1px solid #CCC;background:#FFF;margin:0 0 5px;padding:10px;border-radius:5px}
#widget-form .button{cursor:pointer;width:80%;border:none;color:#FFF;padding:10px;border-radius:5px;margin:5px auto}
#widget-form input:focus{outline:0;border:1px solid #333}
::-webkit-input-placeholder{color:#666}
:-moz-placeholder{color:#666}
::-moz-placeholder{color:#666}
:-ms-input-placeholder{color:#666}
.list{float:left;width:100%;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#EBEBEB;padding:5px 0;margin-bottom:5px}
.list-title{max-height:43px;overflow:hidden}
.list-title h2{font-size:17px}
.list-thumb{background:#f5f5f5;padding:5px;min-height:100px;text-align:center}
.list-thumb a{color:#999}
.btn{border:0;display:inline-block;color:#fff;text-decoration:none;position:relative;cursor:pointer;font-size:14px;font-weight:700;text-shadow:0 -1px 1px rgba(0,0,0,0.25);margin-top:5px;margin-bottom:5px;padding:8px}
.ribbon{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}
.ribbon span{font-size:10px;font-weight:700;color:#FFF;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);width:100px;display:block;box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;left:-21px}
.limited span{background:#0F0}
.sold span{background:#FA565A}
.promo span{background:#00B4FF}
.best span{background:#FF7F00}
.inden span{background:#9B59B6}
.ribbon span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #333;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #333}
.ribbon span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #333;border-bottom:3px solid transparent;border-top:3px solid #333}
.peta {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.peta iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* GRID MOTOR BESAR */

.motor-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.motor-item{
flex:0 0 calc(33.333% - 14px);
}

/* CARD MOTOR */
.thumbnail{
padding:12px;
background:#fff;
border:2px solid #eee;
border-radius:15px;
}

/* GAMBAR MOTOR */
.thumbnail-gambar{
height:280px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
border-bottom:1px solid #eee;
}

/* BESAR GAMBAR */
.thumbnail-gambar img{
max-width:270px;
width:100%;
height:auto;
}

/* JUDUL MOTOR */
.thumbnail-title{
height:auto;
margin-top:10px;
}

.thumbnail-title a{
font-size:16px;
font-weight:600;
}

/* HOVER EFFECT */
.thumbnail:hover{
transform:translateY(-5px);
box-shadow:0 8px 20px rgba(0,0,0,0.15);
transition:all .3s;
}

.photo{
border-radius:8px;
overflow:hidden;
}

.post{
padding:10px 0px;
}

.grid-9{
padding:0;
}

.grid-3{
padding:0;
}

/* =========================
   MOTOR DETAIL LAYOUT
========================= */

.motor-detail{
display:flex;
gap:30px;
align-items:flex-start;
margin-top:0px;
}

/* gallery kiri */

.motor-gallery{
flex:0 0 67%;
max-width:67%;
}

/* info kanan */

.motor-info{
    flex: 0 0 30%;
    max-width: 32%;
    padding-top: 0px;
    background: #eaeaea;
    padding: 15px;
    border-radius: 15px;
    min-height: 520px;
    text-align: center;
}


/* =========================
   JUDUL & HARGA
========================= */

.motor-title{
font-size:32px;
font-weight:700;
color:#e61b33;
margin-bottom:15px;
line-height: normal;
}

.motor-price{
font-size:22px;
margin-bottom:20px;
}


/* =========================
   TOMBOL WHATSAPP
========================= */

.motor-wa{
display:inline-block;
background:#25D366;
color:#fff;
padding:12px 20px;
border-radius:6px;
font-weight:600;
}

.motor-wa:hover{
background:#1ebe5d;
}


/* =========================
   GAMBAR MOTOR
========================= */

.motor-gallery img{
width:100%;
height:auto;
max-height:420px;
object-fit:contain;
display:block;
margin:auto;
border-radius:10px;
}


/* =========================
   THUMBNAIL GALLERY
========================= */

.thumb-gallery{
display:flex;
gap:10px;
margin-top:10px;
flex-wrap:wrap;
}

.thumb-gallery img{
width:80px;
height:60px;
object-fit:cover;
cursor:pointer;
border-radius:5px;
border:2px solid transparent;
transition:.2s;
}

.thumb-gallery img:hover{
border-color:#e61b33;
}

.thumb-gallery img.active{
border-color:#e61b33;
}


/* =========================
   PHOTO CONTAINER
========================= */

.photo{
background:#fff;
padding:10px;
border-radius:8px;
border:1px solid #eee;
text-align:center;
}

.breadcrumbs{
    font-size: 14px;
    color: #999;
    margin: 15px 0px 15px;
    background: #eaeaea;
    border-radius: 10px;
    padding: 10px 15px;
}

.breadcrumbs a{
color:#777;
text-decoration:none;
}

.breadcrumbs a:hover{
color:#e61b33;
}

.breadcrumbs span{
color:#333;
font-weight:500;
}


.motor-share{
margin-top:20px;
display:inline-flex;
gap:10px;
align-items:center;
}

.motor-share span{
font-weight:600;
margin-right:5px;
}

.motor-share a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#fff;
font-size:18px;
text-decoration:none;
}

/* warna icon */

.share-fb{ background:#1877f2; }
.share-x{ background:#000; }
.share-wa{ background:#25D366; }
.share-tg{ background:#0088cc; }

.motor-share a:hover{
transform:scale(1.1);
transition:.2s;
}

.lSPager{
text-align:center;
margin-top:10px;
}

.lSPager li{
display:inline-block;
margin:4px;
}

.lSPager li a{
width:10px;
height:10px;
background:#ccc;
display:block;
border-radius:50%;
transition:0.3s;
}

.lSPager li.active a{
background:#e61b33;
transform:scale(1.2);
}

.lSAction a{
background:#e61b33;
color:#fff;
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
font-size:18px;
}

/* TESTIMONI CARD */

.testimoni-card{
padding:10px;
}

.testimoni-box{
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
/* height:100%; */
}

.testimoni-thumb img{
width:100%;
height:220px;
object-fit:cover;
}

.testimoni-content{
padding:15px;
text-align:center;
}

.testimoni-title{
font-size:16px;
font-weight:700;
margin-bottom:8px;
text-align: center;
}

.testimoni-desc{
font-size:14px;
color:#666;
line-height:1.4;
}

#testimoni-slider,
#testimoni-slider li{
height:335px;
}

#testimoni-slider + .lSPager{
text-align:center;
margin-top:20px;
}

#testimoni-slider + .lSPager li{
display:inline-block;
margin:3px;
}

#testimoni-slider + .lSPager li a{
width:10px;
height:10px;
border-radius:50%;
background:#ccc;
display:block;
}

#testimoni-slider + .lSPager li.active a{
background:#e61b33;
}

.testimoni-card{
height:335px;
}

.testimoni-thumb img{
height:220px;
object-fit:cover;
}

.testimoni-content{
height:63px;
}

/* CARD VIDEO & MAP */

.dealer-info{
display:flex;
gap:20px;
margin-bottom:30px;
}

.dealer-card{
flex:1;
background:#f1f1f1;
border-radius:10px;
padding: 12px;
border: 2px solid #eee;
}

.dealer-card h3{
font-size:18px;
margin-bottom:10px;
color:#e61b33;
}

.dealer-video iframe,
.dealer-maps iframe{
width:100%;
border-radius:8px;
}

.dealer-maps iframe{
width:100%;
height:300px;
border:0;
border-radius:6px;
}


.motor-hidden{
display:none;
}

.motor-loadmore-wrap{
text-align:center;
margin-top:20px;
}

.motor-loadmore {
    background: linear-gradient(135deg,#e61b33,#ff3b4d);
    color:#fff;
    border:none;
    padding:12px 25px;
    border-radius:25px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.5px;
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
    transition:all .25s ease;
}

.motor-loadmore:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,0.2);
    background:linear-gradient(135deg,#ff3b4d,#e61b33);
}

.motor-loadmore:active{
    transform:translateY(0);
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.motor-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.motor-item{
width:32%;
}

.social-media{
display:flex;
gap:12px;
}

.social-media a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f3f3f3;
color:#333;
font-size:18px;
transition:all .3s;
}

.social-media a:hover{
background:#e61b33;
color:#fff;
transform:translateY(-3px);
box-shadow:0 6px 12px rgba(0,0,0,0.15);
}

.social-card{
display:flex;
flex-direction:column;
gap:15px;
padding: 5px 0px;
}

.social-item{
display:flex;
justify-content:space-between;
align-items:center;
background:#f4f4f4;
padding:13px 20px;
border-radius:12px;
text-decoration:none;
color:#111;
box-shadow:0 4px 12px rgba(0,0,0,0.12);
transition:all .25s ease;
}

.social-item:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,0.18);
background:#ffffff;
}

.social-text strong{
display:block;
font-size:20px;
font-weight:700;
margin-bottom:3px;
}

.social-text span{
font-size:14px;
color:#666;
}

.social-item i{
font-size:28px;
}

/* warna icon */

.fa-facebook{color:#1877f2;}
.fa-instagram{color:#e1306c;}
.fa-tiktok{color:#000;}
.fa-x-twitter{color:#fff;}
.fa-youtube{color:#ff0000;}

.social-item{
border-left:5px solid #e61b33;
}


/* TABLET */
@media(max-width:768px){

.motor-item{
width:48%;
}

.sidebar .box{
flex:0 0 calc(50% - 10px);
}

.motor-detail{
flex-direction:column;
}

.motor-gallery,
.motor-info{
max-width:100%;
flex:0 0 100%;
min-height: auto;
}

.dealer-info{
flex-direction:column;
}

/* .motor-grid .motor-item:nth-child(n+3){
display:none;
}*/

}


/* MOBILE */
@media(max-width:480px){
    
[class*='grid-'] {
    float: left;
    padding: 5px;
    width: 100%;
}

.motor-item{
width:100%;
}

.motor-item{
flex:0 0 calc(50% - 5px);
}

.motor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.thumbnail-gambar {
    height: 150px;
}

.motor-item{
width:23%;
}

.vtr-menu-wrap {
    padding: 0 0 0px;
}

.breadcrumbs {
    margin: 0px 0px 15px;
}

/* .motor-grid .motor-item:nth-child(n+3){
display:none;
}*/

.thumbnail-title a {
    font-size: 15px;
    font-weight: 600;
}

.sidebar .box{
flex:0 0 100%;
}

.sidebar {
    padding: 5px;
}

}