@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
:root {
  --primary-color: #be0b1e;
  --secoundary-color: #000000;
  --white-color: #fff;
}

body { font-family: 'Inter', sans-serif; padding: 0px; margin: 0px; direction: rtl; background-color: #F4F4F4;}

:focus-visible { outline: none; }
button:focus{ outline: none; }
button{ cursor: pointer; }
a:hover{text-decoration: none;}

a:hover { text-decoration: none;}
a.view { font-weight: 700; font-size: 15px; line-height: 18px; transition: all .5s; color: var(--secoundary-color); padding: 4px 27px 4px 4px; align-items: center; display: flex; float: right; border: 1px solid var(--primary-color); border-radius: 3px;}
a.view:hover {background-color: var(--primary-color); color: var(--white-color) !important; transition: all .5s;}
a.view span {width: 35px; height: 35px; display: flex; font-size: 16px; align-items: center; justify-content: center; margin-right: 20px; color: var(--white-color); background-color: var(--secoundary-color); border-radius: 5px;}
.container {max-width: 1110px;}

.form-control:focus {box-shadow: none; border-color:var(--primary-color);}
.form-control::placeholder{color: var(--primary-color); opacity: 1;}
.form-control:-ms-input-placeholder {color: var(--primary-color);}
.form-control::-ms-input-placeholder {color: var(--primary-color);}

/* header */

header .header-main {display: flex; align-items: center; justify-content: space-between; padding: 30px 0;}
header .header-main .right-logo {width: 184px; transition: 0.6s all;}
header .header-main .right-logo img {width: 100%;}
header .header-main .leftside { display: flex; align-items: center; }
header .header-main .leftside .icon-info {margin-right: 30px; cursor: pointer; font-weight: 400; font-size: 18px; line-height: 22px; color: var(--secoundary-color);}
header .header-main .leftside .icon-info i {margin-left: 10px; }

header.fixed {background-color: #EFEFEF; transition: 0.6s all; z-index: 3; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;  top: 0; width: 100%; position: fixed; left: 0;}
header.fixed .header-main{padding: 15px 0;}
header.fixed .header-main .right-logo {width: 105px; transition: 0.6s all;}

/* mydean */

.mydean .main-content-area {display: flex; align-items: center; width: 100%; background-color: var(--white-color); border-radius: 30px; padding: 105px 95px 105px 65px;}
.mydean .main-content-area .right-area {width: 50%; padding: 0 0 0 40px;}
.mydean .main-content-area .right-area h2 {color: var(--primary-color); font-weight: 700; font-size: 18px; line-height: 22px; text-align: right; margin-bottom: 14px;}
.mydean .main-content-area .right-area h1 {color: var(--secoundary-color); font-weight: 700; font-size: 30px; line-height: 36px; text-align: right; margin-bottom: 13px; }
.mydean .main-content-area .right-area p {color: var(--secoundary-color); font-weight: 400; text-align: right;font-size: 14px;line-height: 27px; margin-bottom: 15px;}
.mydean .main-content-area .left-img {width: 50%;  transition: all 0.4s; }
.mydean .main-content-area:hover .left-img {transform: scale(1.1) ; transition: all 0.4s;}
.mydean .main-content-area .left-img img{width: 100%;}

/* Hit and run section */

.hit-and-run {padding: 100px 0;}
.hit-and-run .content-area h3 {font-weight: 700; font-size: 15px; line-height: 18px; text-align: center; color: var(--primary-color); margin-bottom: 15px;}
.hit-and-run .content-area h2 {font-weight: 700; font-size: 26px; line-height: 31px; text-align: center; color: var(--secoundary-color); margin-bottom: 47px;}
.hit-and-run .content-area .feature-box {display: flex;}
.hit-and-run .content-area .feature-box .detail {padding: 0 30px 0 0;}
.hit-and-run .content-area .feature-box .detail .title {font-weight: 700; font-size: 16px; line-height: 19px; color: rgba(0, 0, 0, 0.86);}
.hit-and-run .content-area .feature-box .detail p {font-weight: 400; font-size: 13px; line-height: 20px; color: rgba(0, 0, 0, 0.8);}
.hit-and-run .content-area .feature-box .icon { width: 57px; height: 57px; border-radius: 50%; background-color: var(--white-color); padding: 13px; margin-right: 15px; display: flex; align-items: center; justify-content: center;}
.hit-and-run .car-area {width: 100%;overflow: hidden; border-radius: 30px; position: relative; height: 367px; margin-top: 38px;}
.hit-and-run .car-area img {width: 100%; height: 100%;  position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; object-fit: cover;}
.hit-and-run .car-area .content-area {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;  padding: 50px 65px; background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%) }
.hit-and-run .car-area .content-area h2{ font-weight: 700; font-size: 28px; line-height: 40px; color: var(--white-color); margin: 0; text-align: right; max-width: 692px; position: relative;}
.hit-and-run .car-area .content-area h2::before {content: ''; width: 190px; height: 1px; position: absolute; bottom: -10px; right: 0; background-color: var(--white-color);}
.hit-and-run .car-area .content-area p {position: absolute;text-align: right; right: 0; bottom: 0; font-weight: 400;font-size: 20px;line-height: 25px; color: var(--white-color); padding:0 65px 50px 0; margin: 0;}

/* Record or Parking section */

.record_parking {padding-bottom: 100px;}
.record_parking .parking {display: flex; align-items: center; }
.record_parking .parking .right-area {width: 50%;padding:0 60px 0 95px;}
.record_parking .parking .right-area h2 {font-weight: 700; font-size: 19px; line-height: 23px; text-align: center; color: var(--secoundary-color)}
.record_parking .parking .right-area p {font-weight: 400; font-size: 17px; line-height: 25px; text-align: center;color: rgba(0, 0, 0, 0.8); margin: 18px 0 0 0; }
.record_parking .parking .right-area h3 {font-weight: 600; font-size: 17px; line-height: 25px; text-align: center; color: var(--primary-color); margin: 15px 0 0 0; }
.record_parking .parking .left-img {width: 50%;background-color: var(--white-color); display: flex; justify-content: center; padding: 40px 120px; border-radius: 30px;}
.record_parking .parking .left-img .parking-img {width: 300px; transition: all .5s;}
.record_parking .parking .left-img .parking-img img{width: 100%;}
.record_parking .parking:hover .left-img .parking-img{transform: scale(1.1); transition: all .5s;}

/* happen */

.happen-section .display-box { background-image: url(../images/car-ride.jpg); border-radius: 30px;padding: 50px 65px; position: relative;background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 365px;overflow: hidden; }
.happen-section .display-box::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%); content: '';}
.happen-section .red-quote {position: relative;}
.happen-section .red-quote .qut{background: url(../images/red-quote.png) center center no-repeat; background-size: 100%; content: ''; width: 88px; height: 68px; position: absolute; z-index: 1; right: 65px; top: -30px;}
.happen-section .display-box h2{ font-weight: 700; font-size: 28px; line-height: 40px; color: var(--white-color); margin: 0; text-align: right; max-width: 692px; position: relative;}
.happen-section .display-box h2::before {content: ''; width: 190px; height: 1px; position: absolute; bottom: -10px; right: 0; background-color: var(--white-color);}
.happen-section .display-box p {position: absolute; right: 0; text-align: right; bottom: 0; font-weight: 400;font-size: 20px;line-height: 25px; color: var(--white-color); padding:0 65px 50px 0; margin: 0;}

/* part-detail-area */

.part-detail {padding-bottom: 100px;}
.part-detail .main-content {background: url(../images/part-detail.jpg) center center no-repeat; background-size: cover; width: 100%;overflow: hidden; border-radius: 30px; position: relative; }
.part-detail .main-content .detail {display: flex ; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8); top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; padding: 40px 0;}
.part-detail .main-content .detail  .full-area .top h4 {font-weight: 700; font-size: 17px; line-height: 21px; text-align: center; color: var(--white-color); margin-bottom: 5px;}
.part-detail .main-content .detail  .full-area .top h2{font-weight: 700; font-size: 39px; line-height: 60px; text-align: center; color: var(--white-color); margin: 0;}
.part-detail .main-content .detail  .full-area .bottom h3{font-weight: 700; font-size: 35px; line-height: 27px; text-align: center; color: var(--primary-color); }
.part-detail .main-content .detail  .full-area .bottom p {font-weight: 400; font-size: 23px; line-height: 47px; text-align: center; margin: 10px 0 0 0; color: var(--white-color);}
.part-detail .main-content .detail .full-area .detail-main-img {width: 380px; position: relative; margin: 35px auto 35px auto;}
.part-detail .main-content .detail .full-area .detail-main-img img{width: 100%;}
.part-detail .main-content .detail .full-area .detail-main-img .info {position: absolute;}
.part-detail .main-content .detail .full-area .detail-main-img .info .btn-1{background: rgba(255, 255, 255, 0.82);cursor: pointer; border: 3px solid var(--primary-color); width: 22px; height: 22px; border-radius: 50%; }
.part-detail .main-content .detail .full-area .detail-main-img .info .label {box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1); border-radius: 11px; width: 335px; padding: 10px 40px; background-color: var(--white-color);  position: absolute; z-index: 1; left: 0; bottom: 10px; transform: scale(1) translate(-240px,0px); opacity: 0; visibility: hidden; transition: transform 1s; border-radius: 10px; -webkit-box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1); transition: all 0.5s;}
.part-detail .main-content .detail .full-area .detail-main-img .info .label::after {content: " "; position: absolute;top: 100%; right: 20%; margin-right: 7px; border-width: 10px; border-style: solid; border-color: var(--white-color) transparent transparent transparent;}
.part-detail .main-content .detail .full-area .detail-main-img .info .label h4 {font-weight: 700; font-size: 16px ;line-height: 19px; text-align: left; margin-bottom: 5px; color: var(--secoundary-color);}
.part-detail .main-content .detail .full-area .detail-main-img .info .label p{color: rgba(0, 0, 0, 0.8);font-weight: 400; font-size: 13px; line-height: 20px; margin: 0;}
.part-detail .main-content .detail .full-area .detail-main-img .info:hover .label{transform: scale(1) translate(-240px,-30px); bottom: 10px; transition: all 0.5s; opacity: 1; visibility: visible;}
.detail-main-img-mobile {display: none;}
.part-detail .main-content .detail .full-area .specification .title {font-weight: 400; font-size: 28px;line-height: 32px; text-align: center; margin: 0 0px 20px 0; color: var(--white-color);}
.part-detail .main-content .detail .full-area .specification { margin: 0px 90px; }
.part-detail .main-content .detail .full-area .specification ul { display: flex; align-items: center; flex-wrap: wrap; width: 100%; list-style: none; justify-content: center; margin-bottom: 30px; column-gap: 5px; padding: 0px;}
.part-detail .main-content .detail .full-area .specification ul li {width:100%; display: flex; text-align: center; background-color: #ffffff; margin-bottom: 5px; }
.part-detail .main-content .detail .full-area .specification ul li .name { width: 240px; border-left: 1px solid #000; text-align: right; padding: 10px 20px; font-size: 20px;line-height: 28px; font-weight: 700; color: var(--primary-color);}
.part-detail .main-content .detail .full-area .specification ul li .dec {font-size: 18px;line-height: 28px; width: 181px; text-align: right; padding: 10px 20px; font-weight: 400;}

/* video-area */

.video-main {padding: 100px 0 155px 0; }
.video-main .video-area {width: 100%; border-radius: 30px; height: 320px; position: relative; overflow: hidden;}
.video-main .video-area video {width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover;}
.video-main .video-detail {margin-top: 30px; padding: 30px 20px; border-radius: 30px; background-color: var(--white-color);}
.video-main .video-detail p{font-weight: 500; font-size: 15px; line-height: 29px;color: rgba(0, 0, 0, 0.8); text-align: center;margin-bottom: 0; }
.video-main .right {border-radius: 30px; background-color: var(--white-color);padding: 90px 40px 10px 40px;}
.video-main .right h3 {font-weight: 700; font-size: 18px; line-height: 22px; text-align: center; margin-bottom: 10px;}
.video-main .right .title {font-weight: 700; font-size: 23px; line-height: 28px; text-align: center; color: var(--primary-color); margin-bottom: 30px;}
.video-main .right .front_back {width: 325px; margin: 0 auto;}
.video-main .right .front_back img{width: 100%;}

/* review-section */

.review-section{padding-bottom: 70px;}
.review-section h3{font-weight: 700; font-size: 15px; line-height: 18px; color: var(--primary-color); text-align: center; margin-bottom: 15px;}
.review-section h2{font-weight: 700; font-size: 26px; line-height: 31px; text-align: center; color: var(--secoundary-color);}
.review-section .slider-area {margin-top: 55px; overflow: hidden;}
.review-section .slider-area .review-box {background-color: var(--white-color); border-radius: 30px; padding: 45px 26px; position: relative;}
.review-section .slider-area .review-box .title{font-weight: 700; font-size: 15px; line-height: 18px; color: var(--primary-color); margin-bottom: 10px;}
.review-section .slider-area .review-box p {font-weight: 400; font-size: 13px; line-height: 20px; color: rgba(0, 0, 0, 0.8); margin-bottom: 10px; padding-bottom: 20px; border-bottom:  1px solid rgba(0, 0, 0, 0.3);}
.review-section .slider-area .review-box .user-detail {display: flex; align-items: center; justify-content: space-between;}
.review-section .slider-area .review-box .user-detail .user-deyail-main{display: flex; align-items: center;}
.review-section .slider-area .review-box .user-detail .user-deyail-main .right {padding: 0 0 0 12px; }
.review-section .slider-area .review-box .user-detail .user-deyail-main .right .name {font-weight: 700; font-size: 13px; line-height: 16px; color: var(--secoundary-color)}
.review-section .slider-area .review-box .user-detail .user-deyail-main .right .detail {font-weight: 500; font-size: 11px; line-height: 13px; color: var(--secoundary-color); margin-top: 5px;}
.review-section .slider-area .review-box .user-detail .user-icon {width: 40px; height: 40px; overflow: hidden; border-radius: 50%;}

/* four-box-section */

.four-box {padding-bottom: 110px;}
.four-box .content .big-image{ background-color: var(--white-color) ; min-height: 415px;  margin-top: 30px; border-radius: 30px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.four-box .content .big-image:hover img {transform: scale(1.1) ; transition: all 0.4s; }
.four-box .content .big-image img {transition: all 0.4s;}
.four-box .content .small-image{width: 100%; height: 320px; position: relative; border-radius: 30px; overflow: hidden; margin-top: 30px;}
.four-box .content .small-image:hover img {transform: scale(1.1) ; transition: all 0.4s; }
.four-box .content .small-image img{width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; transition: all 0.4s;}
.four-box .content .big-image .detail-area {padding: 40px 15px; }
.four-box .content .big-image .detail-area h3{font-weight: 700; font-size: 20px; line-height: 24px; text-align: center; text-transform: uppercase; color: var(--primary-color); margin: 0;}
.four-box .content .big-image .detail-area h2{font-weight: 700; font-size: 26px; line-height: 31px; text-align: center; margin-top: 25px; }
.four-box .content .big-image .detail-area p {font-weight: 500; font-size: 17px; line-height: 25px; text-align: center; color: var(--secoundary-color); margin: 25px 0 0 0;}

/* form-area */

.form-area .form-content h2 {font-weight: 700; font-size: 29px; line-height: 35px; text-align: center; color: var(--secoundary-color); margin: 0;}
.form-area .form-content .so {font-weight: 700; font-size: 60px; line-height: 73px; text-align: center; color: var(--primary-color); margin: 10px 0;}
.form-area .form-content .field-row > p  {display: flex;     align-items: flex-start; justify-content: space-between; margin-top: 40px; column-gap: 25px;}
.form-area .form-content .field-row .form-control {padding: 10px; height: auto; font-weight: 700; margin-left: 25px; font-size: 17px; line-height: 21px; text-align: right; border: 1px solid transparent; border-radius: 5px;}
.form-area .form-content .field-row .form-control:focus { border-color:var(--primary-color);}
.field-row .wpcf7-submit.view {font-weight: 700; font-size: 15px; background-color: transparent; line-height: 18px; transition: all .5s; color: var(--secoundary-color);padding: 10px 17px 12px 75px;align-items: center; display: flex; float: right; border: 1px solid var(--primary-color); margin: 0; border-radius: 3px;}
.field-row .view:hover { background-color: var(--primary-color); color: var(--white-color) !important; transition: all .5s;}
.btn-submit{ margin-top: 2px; position: relative;}
.btn-submit::before{font-family: "Font Awesome 5 Free"; content: "\f104"; font-weight: 900;  position: absolute; width: 35px; height: 35px; display: flex; font-size: 16px; align-items: center; justify-content: center; margin: 0; top: 4px; left: 4px;color: var(--white-color); background-color: var(--secoundary-color); border-radius: 5px; z-index: -1;}
.btn-submit:hover::before {z-index: 1;}
/* footer */

.landing-footer {padding: 20px 0 0 0;}
.landing-footer .info-area {display: flex; justify-content: end; z-index: 9; padding-left: 25px; position: fixed; bottom: 50px; left: 0;}
.landing-footer .info-area .icon {width: 54px; margin-right: 10px;}
.landing-footer .info-area .icon img{width: 100%;}
.landing-footer .copyright {color: rgba(0, 0, 0, 0.5); text-align: center;font-weight: 500; font-size: 15px; line-height: 24px; padding:20px 0 ; margin-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.3);}
.landing-footer .copyright span {color: rgba(0, 0, 0, 0.9);}

/*Sticky Icon*/

.fix-icon-bottom { position: fixed; bottom: 80px; left: 0; padding-left: 22px; z-index: 50;}
.fix-icon-bottom img { transition: all .5s ease; width: 45px;}
.fix-icon-bottom img:hover { transform: scale(1.1); transition: all .5s ease;}
.fix-icon-bottom .text-icon { text-align: center;  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; line-height: 17px; text-align: center; text-transform: uppercase; color: #BE0B1E; margin-left: 10px; }
.fix-icon-bottom a.phone-stick {   display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; text-decoration: none;}
.fix-icon-bottom a.whatsapp-stick {  display: flex; justify-content: flex-end; align-items: center; text-decoration: none;}





@media (max-width:1366px) {

}

@media (min-width: 768px) and (max-width: 1024px){

header .header-main {padding: 20px 0;}
header .header-main .right-logo {width: 124px;}

.mydean .main-content-area {padding: 55px 55px 55px 25px;}
.mydean .main-content-area .right-area h1 {font-size: 25px; line-height: 32px;}

.hit-and-run {padding: 60px 0;}
.hit-and-run .car-area {margin-top: 30px; height: 300px;}
.hit-and-run .car-area .content-area {padding: 30px 45px;}
.hit-and-run .car-area .content-area h2 {font-size: 26px; line-height: 32px;}
.hit-and-run .car-area .content-area p {padding: 0 45px 30px 0;}
.hit-and-run .content-area h3 {margin-bottom: 10px;}
.hit-and-run .content-area h2 {font-size: 26px; line-height: 32px; margin-bottom: 30px;}
.hit-and-run .content-area .feature-box {display: flex; flex-wrap: wrap; flex-direction: column-reverse;}
.hit-and-run .content-area .feature-box .detail {padding: 0 10px; text-align: center;}
.hit-and-run .content-area .feature-box .icon {margin: 0 auto 10px auto ;}

.record_parking {padding-bottom: 60px;}
.record_parking .parking .left-img {padding: 40px 70px;}
.record_parking .parking .right-area {padding: 0 50px 0 50px;}

.happen-section .display-box {padding: 30px 45px; height: 305px;}
.happen-section .display-box h2{font-size: 26px; line-height: 32px;}
.happen-section .red-quote .qut {width: 58px; height: 45px; right: 45px;}
.happen-section .display-box p{padding: 0 45px 30px 0;}

.video-main {padding: 60px 0 65px 0;}
.video-main .video-area {height: 255px;}
.video-main .right .front_back {width: auto;}

.part-detail {padding-bottom: 60px;}
.part-detail .main-content .detail .full-area .top h2 {font-size: 28px; line-height: 40px;}
.part-detail .main-content .detail .full-area .detail-main-img .info .label {width: 320px; display: none; transform: scale(1) translate(-220px,-30px); opacity: 0; visibility: visible;}
.part-detail .main-content .detail .full-area .detail-main-img .info .label.active {display: block; opacity: 1;}
.part-detail .main-content .detail .full-area .detail-main-img .info .label::after {right: 23%;}
.part-detail .main-content .detail .full-area .specification ul li {  width: calc(33.33% - 5px);}
.part-detail .main-content .detail .full-area .bottom h3 {font-size: 28px; line-height: 35px; margin: 0;}
.part-detail .main-content .detail .full-area .bottom p {line-height: 22px; font-size: 18px;}

.review-section {padding-bottom: 40px;}
.review-section h3 {margin-bottom: 10px;}
.review-section h2 {font-size: 22px; line-height: 28px;}
.review-section .slider-area {margin-top: 30px;}

.four-box {padding-bottom: 60px;}
.four-box .content .big-image .detail-area h3{font-size: 18px; line-height: 21px;}
.four-box .content .big-image .detail-area h2 { font-size: 22px; line-height: 24px; margin-bottom: 0; margin-top: 10px;}
.four-box .content .big-image .detail-area p {margin: 15px 0 0 0;}
.four-box .content .big-image .detail-area {padding: 19px 15px;}


.form-area .form-content h2 {font-size: 26px; line-height: 29px;}
.form-area .form-content .so {font-size: 42px;line-height: 44px;}

.landing-footer .info-area .icon {width: 35px;}

}

@media (max-width: 767px) {

a.view {padding: 4px 15px 4px 4px;}
a.view span {width: 30px; height: 30px; margin-right: 15px;}

header .header-main {padding: 20px 0;}
header .header-main .right-logo,
header.fixed .header-main .right-logo {width: 84px;}
header .header-main .leftside .icon-info {margin-right: 15px; font-size: 12px;}
header .header-main .leftside .icon-info img {width: 20px;}

.mydean .main-content-area {padding: 25px 15px 25px 15px; border-radius: 20px; flex-wrap: wrap; flex-direction: column-reverse;}
.mydean .main-content-area .right-area {width: 100%; padding: 20px 0 0 0;}
.mydean .main-content-area .left-img {width: 100%;}
.mydean .main-content-area .right-area h1 {font-size: 20px; line-height: 25px;}

.hit-and-run {padding: 40px 0;}
.hit-and-run .car-area {margin-top: 30px; height: 300px; border-radius: 20px;}
.hit-and-run .car-area .content-area {padding: 15px}
.hit-and-run .car-area .content-area h2 {font-size: 22px; line-height: 25px;}
.hit-and-run .car-area .content-area p {padding: 0 15px 15px 0;}
.hit-and-run .content-area h3 {margin-bottom: 10px;}
.hit-and-run .content-area h2 {  font-size: 22px; line-height: 25px; margin-bottom: 20px; }
.hit-and-run .content-area .feature-box {display: flex; flex-wrap: wrap; flex-direction: column-reverse;}
.hit-and-run .content-area .feature-box .detail {padding: 0 10px; text-align: center;}
.hit-and-run .content-area .feature-box .icon {margin: 0 auto 10px auto ;}

.record_parking {padding-bottom: 60px;}
.record_parking .parking {display: block;}
.record_parking .parking .left-img {padding:40px 20px; width: 100%; margin-top: 30px; border-radius: 20px;}
.record_parking .parking .left-img .parking-img {width: 220px;}
.record_parking .parking .right-area {padding: 0 ; width: 100%;}

.happen-section .display-box {padding:15px; height: 305px; border-radius: 20px;}
.happen-section .display-box h2{font-size: 22px; line-height: 25px;}
.happen-section .red-quote .qut {width: 58px; height: 45px; right: 45px;}
.happen-section .display-box p{padding: 0 15px 15px 0;}

.video-main { padding: 40px 0 45px 0;}
.video-main .video-area {height: 180px; border-radius: 20px;}
.video-main .right {border-radius: 20px; padding: 20px; margin-bottom: 30px;}
.video-main .right .front_back {width: auto;}
.video-main .video-detail {padding: 20px; border-radius: 20px;}

.part-detail {padding-bottom: 40px;}
.part-detail .main-content {border-radius: 20px;}
.part-detail .main-content .detail .full-area .top h4 {font-size: 16px;}
.part-detail .main-content .detail .full-area .top h2 {font-size: 22px; line-height: 28px;}
.part-detail .main-content .detail .full-area .detail-main-img .info .label::after {right: 23%;}
.part-detail .main-content .detail .full-area .bottom h3 {font-size: 26px; line-height: 26px; margin: 0;}
.part-detail .main-content .detail .full-area .bottom p {line-height: 22px; font-size: 16px;}
.part-detail .main-content .detail .full-area .detail-main-img {width: 250px; margin: 30px auto 30px auto; display: none; }
.part-detail .main-content .detail .full-area .detail-main-img-mobile {display: block; width: 290px; margin: 30px auto 30px auto; position: relative;}
.part-detail .main-content .detail .full-area .detail-main-img-mobile img {width: 100%; margin-bottom: 20px;}
.part-detail .main-content .detail .full-area .detail-main-img-mobile .info .btn-1{background: rgba(255, 255, 255, 0.82); border: 3px solid var(--primary-color); width: 22px; height: 22px; border-radius: 50%; position: absolute; }
.part-detail .main-content .detail .full-area .detail-main-img-mobile .info .btn-1.active{background:var(--primary-color) }
.part-detail .main-content .detail .full-area .detail-main-img-mobile .info .label {box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1); border: 3px solid transparent; display: none;margin-top: 25px; border-radius: 10px; width: 290px; padding: 20px; background-color: var(--white-color);  position: relative; z-index: 1; left: 0; bottom: 10px;  opacity: 1; visibility: visible; transition: transform 1s; border-radius: 10px; -webkit-box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1); transition: all 0.5s;}
.part-detail .main-content .detail .full-area .detail-main-img-mobile .info .label.active {border: 3px solid var(--primary-color);  display:block; }
.part-detail .main-content .detail .full-area .detail-main-img-mobile .info .label h4 {font-weight: 700; font-size: 16px ;line-height: 19px; text-align: left; margin-bottom: 5px; color: var(--secoundary-color);}
.part-detail .main-content .detail .full-area .detail-main-img-mobile .info .label p{color: rgba(0, 0, 0, 0.8);font-weight: 400; font-size: 13px; line-height: 20px; margin: 0;}
.part-detail .main-content .detail .full-area .specification ul {padding: 0 20px;}
.part-detail .main-content .detail .full-area .specification ul li {  width: calc(50% - 5px); padding: 5px;}
.part-detail .main-content .detail .full-area .specification ul li .name {font-size: 16px; line-height: 23px; margin-bottom:0 ;}
.part-detail .main-content .detail .full-area .specification ul li .dec {font-size: 15px; line-height: 25px;}




.review-section {padding-bottom: 10px;}
.review-section h3 {margin-bottom: 10px;}
.review-section h2 {font-size: 22px; line-height: 28px;}
.review-section .slider-area {margin-top: 30px;}

.four-box {padding-bottom: 40px;}
.four-box .content .big-image { border-radius: 20px; min-height: auto;}
.four-box .content .big-image img {width: 100%;}
.four-box .content .small-image {height: 180px; border-radius: 20px;}
.four-box .content .big-image .detail-area h3{font-size: 16px; line-height: 20px;}
.four-box .content .big-image .detail-area h2 { font-size: 22px; line-height: 24px; margin-bottom: 0; margin-top: 10px;}
.four-box .content .big-image .detail-area p {margin: 10px 0 0 0;}
.four-box .content .big-image .detail-area {padding:15px;}

.form-area .form-content h2 {font-size: 22px; line-height: 25px;}
.form-area .form-content .so {font-size: 42px;line-height: 44px;}
.form-area .form-content .field-row {margin-top: 30px; display: block;}
.form-area .form-content .field-row .form-control {margin:0 0 15px 0;}

.landing-footer .info-area .icon {width: 25px;}


}