/* 
	Theme Name: XPENG PREMIUM GROUP
	Version: 1.0 / 2025
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html { scroll-behavior: smooth; }

/* custom scroll bar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #FFF; }
::-webkit-scrollbar-thumb { background: #CCC; }

body { font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 17px !important; background: #FFF; color: rgba(0,0,0,.9); }

.topmenu { position: fixed; width: 100%; z-index: 9; display: flex; justify-content: space-between; align-items: center; padding: 1em 2em; transition: ease all .5s; }
.topmenu .logo { padding: 0; width: 400px; }
.topmenu .logo img { width: 100%; max-width: 200px; }
.topmenu .menu { padding: 0; font-weight: 600; }
.topmenu .menu ul { display: inline; list-style: none; margin: 0; padding: 0; }
.topmenu .menu ul li { position: relative; display: inline-block; color: #FFF; margin: 0 1em; padding: 1em 0; }
.topmenu .menu ul li ul { position: absolute; opacity: 0; left: 50%; top: 0; transform: translateX(-50%); height: 0; background: rgba(255,255,255,1); transition: ease all .5s; }
.topmenu .menu ul li:hover ul { opacity: 1; top: 100%; height: auto; transition: ease all .5s; }
.topmenu .menu ul li ul li { display: block; width: 100px; text-align: center; }
.topmenu .menu ul li:after { position: absolute; content: ""; width: 0; height: 2px; bottom: 0; right: 0; z-index: -1; background-color: #A4CE4C; transition: all 0.3s ease; }
.topmenu .menu ul li:hover:after { left: 0; width: 100%; }
.topmenu .menu ul li ul li:after  { display: none; }
.topmenu .menu ul li a { color: #FFF; }
.topmenu .menu ul li ul li a { color: #000; }
.topmenu .misc { display: inline; padding: 0; width: 400px; text-align: right; }
.topmenu .misc .btn-custom { border: 1px solid #FFF; color: #FFF; background: none !important; }
.sticky { background: #FFF; padding: .5em 2em; border-bottom: 1px solid #DDD; }
.sticky .logo img { filter: brightness(-100%); }
.sticky .menu a { color: rgba(0,0,0,.9) !important; }
.sticky .misc .btn-custom { border: 1px solid #111; color: rgba(0,0,0,.9); }
.sticky .menu ul li ul { position: absolute; opacity: 0; left: 50%; top: 0; height: 0; background: rgba(255,255,255,1); transition: ease all .5s; }
.sticky2 { background: #FFF; padding: .5em 2em; border-bottom: 1px solid #DDD; }
.sticky2 .logo img { filter: brightness(-100%); }
.sticky2 .menu a { color: rgba(0,0,0,.9) !important; }
.sticky2 .misc .btn-custom { border: 1px solid #111; color: rgba(0,0,0,.9); }
.sticky2 .menu ul li ul { position: absolute; opacity: 0; left: 50%; top: 0; height: 0; background: rgba(255,255,255,1); transition: ease all .5s; }

.lightbox { background: rgba(0,0,0,.8); position: fixed; top: 0; left: 0; width: 0; height: 100vh; z-index: 8; }
.lightbox-active { width: 100%; }

.burger { visibility: hidden; position: absolute; height: 3px; width: 20px; background: #000; right: 1em; top: 1.7em; transition: ease all .5s; }
.burger:before { position: absolute; content: ""; height: 3px; width: 20px; top: -8px; left: 0; background: #000; transition: ease all .5s; }
.burger:after { position: absolute; content: ""; height: 3px; width: 20px; top: 8px; left: 0; background: #000; transition: ease all .5s; }

.display { position: relative; z-index: 1; width: 100%; height: 100vh; overflow: hidden; }
.display video { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.display .box { height: 100vh; position: relative; }
.display .box img { position: absolute; height: 100%; width: 100%; object-fit: cover; }
.display .box .display-text { position: absolute; z-index: 2; color: #FFF; width: 50%; top: 25%; left: 8em; }
.display .box .display-text h1 { font-size: 2.5em; font-weight: 700; }
.display .box .display-text h2 { font-size: 1em; margin: 0 0 1em 0; }
.display .box .display-text .vector { position: relative; top: 8px; left: -25px; }
.display .box .title { position: absolute; width: 50%; top: 0; left: 50%; transform: translateX(-50%); }
.display .box .data { position: absolute; width: 50%; bottom: 0; left: 50%; transform: translateX(-50%); }
.display .box .data .data-top { display: flex; justify-content: space-between; text-align: center; }
.display .box .data .data-top .big { font-size: 1.5em; color: rgba(255,255,255,1); }
.display .box .data .data-top .small { font-size: 1.25em; color: rgba(255,255,255,.75); }
.display .box .data .data-bot { padding: 2em 0; text-align: center; }
.display .btn-custom1 { background: #FFF; border: 1px solid #FFF; padding: 10px 25px; margin: 0 5px; }
.display .btn-custom2 { background: none; border: 1px solid #FFF; padding: 10px 25px; color: #FFF; margin: 0 5px; }
.display .slick-dots { bottom: 45px; }
.display .slick-dots li button:before { font-size: 50px; line-height: 20px; width: 20px; height: 20px; }
	
.display-video { height: auto; }
.display-video .box { height: auto; margin: 0 0 -1px 0; }
.display-video video { width: 100%; height: 100%; position: absolute; object-fit: cover; }

.home-video { padding: 5em 0; width: 100%; background: #191919; overflow: hidden; }

.home-about { height: 100vh; width: 100%; overflow: hidden; color: #FFF; text-align: center; padding: 5em 0; background: url(https://jasaku.com/xpeng/wp-content/uploads/2025/07/homepage_about_xpeng_desktop.webp) no-repeat center center; background-size: cover; }
.home-about h2 { margin: 0 0 .5em 0;} 

.home-type { padding: 5em 0; width: 100%; overflow: hidden; }
.home-type img { width: 100%; }
.home-type-slider { position: relative; }
.home-type-slider .box { text-align: center; }
.home-type .slick-slide { margin: 0; padding: 0 !important; }
.home-type .slick-list { margin: 0 50px; }
.home-type .slick-prev { left: 0; }
.home-type .slick-next { right: 0; }
.home-type h4 { margin: 0 0 1em 0; }

.home-misc { text-align: center; width: 100%; overflow: hidden; padding: 5em 0; background: linear-gradient(0deg,rgba(251, 252, 245, 0) 0%, rgba(251, 252, 245, 1) 100%); }
.home-misc h2 { margin: 0 0 .5em 0;} 

.home-gallery { padding: 5em 0; text-align: center; font-size: .8em; overflow: hidden; }
.home-gallery h2 { margin: 0 0 1em 0; }
.home-gallery div { position: relative; }
.home-gallery img { width: 100%; height: auto; }
.home-gallery .text { position: absolute; color: #FFF; width: 100%; bottom: 0; left: 0; padding: 2em 0; background: linear-gradient(0deg,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%); }
.home-gallery .text h3 { font-size: 1.5em; }
.home-gallery-slider { position: relative; }
.home-gallery .slick-slide { margin: 0 75px; opacity: .5; padding: 60px !important; transition: ease all .5s; }
.home-gallery .slick-center { display: block; opacity: 1; transform: scale(1.25); }
.home-gallery .slick-prev { left: 15%; }
.home-gallery .slick-next { right: 15%; }

.subscribe { padding: 5em 0; background: #FBFCF5; }
.subscribe small { color: rgba(0,0,0,.6); font-size: .8em; }
.subscribe .subs-input { position: relative; margin: 0 0 1em 0; }
.subscribe .subs-input input { width: 100%; outline: none; padding: 10px; border: none; border-bottom: 1px solid #EEE; }
.subscribe .subs-input input:focus { border: none; outline: none; border-bottom: 1px solid #B1B849; }
.subscribe .subs-input button { position: absolute; color: rgba(0,0,0,.9); background: #FFF; top: 0; right: 0; padding: 10px; }

.app { padding: 5em 0 0 0; }
.app img { border-radius: 10px; }

.footer { padding: 5em 0 2em 0; border-top: 1px solid #DDD; }
.footer a { color: rgba(0,0,0,.9); }
.footer a:hover { color: rgba(0,0,0,.6); }
.footer h2 { margin: 0 0 1em 0; font-size: 1em; color: rgba(0,0,0,.6); } 
.footer .boxed { display: flex; justify-content: space-between; }
.footer ul { list-style: none; margin: 0 0 2em 0; padding: 0; }
.footer ul li { margin: 0 0 .5em 0; }

.copyright { border-top: 1px solid #DDD; padding: 2em 0; color: rgba(0,0,0,.3); font-size: .8em; }
.copyright .boxed { display: flex; justify-content: space-between; }
.copyright .box { margin: 0 0 2em 0; padding: 0; }
.copyright a { color: rgba(0,0,0,.9); }
.copyright i { font-size: 1.5em; margin: 0 0 0 .5em; }
.copyright ul { list-style: none; margin: 0; padding: 0; }
.copyright ul li { display: inline; }

a { text-decoration: none; }

.btn-custom { position: relative; border: 1px solid #000; color: #000; padding: 10px 25px; margin: 0 5px; overflow: hidden; }
.btn-custom:after { position: absolute; content: ""; width: 0; height: 100%; top: 0; right: 0; z-index: -1; background-color: #A4CE4C; transition: all 0.3s ease; }
.btn-custom1:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; right: 0; z-index: -2; background-color: #FFF; transition: all 0.3s ease; }
.btn-custom:hover:after { left: 0; width: 100%; }
.btn-custom:hover { background: none !important; border: 1px solid #A4CE4C !important; background-color: #A4CE4C !important; color: #FFF !important; }

.aboutus { height: 100vh; width: 100%; overflow: hidden; color: #FFF; text-align: center; padding: 5em 0; background: url(https://jasaku.com/xpeng/wp-content/uploads/2025/07/discover_about_xpeng_about_banner_desktop.webp) no-repeat center center; background-size: cover; }
.aboutus h2 { margin: 0 0 .5em 0;} 

.about-misc { background-color: #F9F9F9; }
.about-misc h2 { text-align: center; margin: 0 0 1em 0; }

.misc { overflow: hidden; padding: 5em 0; }
.misc h2 { margin: 0 0 .5em 0;} 

.section { position: relative; padding: 5em 0; }
.section img { width: 100%; height: auto; }
.section .videos { position: relative; height: 0; padding-bottom: 75%; border-radius: 3px; overflow: hidden; }
.section video { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.section h2 { margin: 0 0 .5em 0;} 
.section h3 { margin: 0 0 .5em 0;} 

img.downloadapp { width: 150px; }

.box { margin: 0 0 5em 0; }

.form {}
.form h2 { text-align: center; margin: 0 0 1em 0; }

.single-display { position: relative; z-index: 1; width: 100%; height: 100vh; overflow: hidden; }
.single-display img { position: absolute; z-index: 1; height: 100%; width: 100%; object-fit: cover; }
.single-display:after { content: ''; position: absolute; z-index: 2; height: 50%; width: 100%; bottom: 0; left: 0; background: linear-gradient(0deg,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%); }
.single-display .display-text { position: absolute; z-index: 3; color: #FFF; top: 15%; left: 50%; transform: translateX(-50%); }
.single-display .display-text h1 { font-size: 2.5em; font-weight: 700; text-align: center; }
.single-display .display-text h2 { font-size: 1em; margin: 0 0 1em 0; text-align: center; }
.single-display .display-text .vector { position: relative; top: 8px; left: 0; }
.single-display .display-bottom { position: absolute; z-index: 3; color: #CCC; width: 80%; bottom: 3em; left: 50%; transform: translateX(-50%); text-align: center; }
.single-display .display-bottom h3 { color: #FFF; font-size: 1.5em; font-weight: 700; text-align: center; }
.single-display .stats { display: flex; justify-content: center; margin: 0 0 2em 0; }
.single-display .stats div { width: 25%; }
.single-display .btn-custom1 { background: #FFF; border: 1px solid #FFF; padding: 10px 25px; margin: 0 5px; }
.single-display .btn-custom2 { background: none; border: 1px solid #FFF; padding: 10px 25px; color: #FFF; margin: 0 5px; }

.single-section { position: relative; }
.single-section img { width: 100%; height: auto; }
.single-section .text { position: absolute; width: 60%; top: 5em; left: 50%; transform: translateX(-50%); text-align: center; }
.single-section .text-wh { color: #FFF; }
.single-type { padding: 5em 0; width: 100%; overflow: hidden; }
.single-type img { width: 100%; }
.car-display { position: relative; padding-bottom: 50%; }
.car-display img { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; transition: ease all 1s; object-fit: contain; }
.car-display img.active { opacity: 1; transition: ease all 1s; }

.color-collection { border-radius: .375rem; text-align: center; padding: 1em; }
.color-collection .colors { display: inline-block; cursor: pointer; margin: 0 1em; }
.color-collection .active { background: #CCC; }
.color-collection .ball { display: inline-block; width: 30px; height: 30px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; margin: 0 5px 0 0; }
.color-collection span { position: relative; top: -8px; }


.page-display { position: relative; z-index: 1; width: 100%; height: 75vh; overflow: hidden; }
.page-.display video { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.page-display .box { height: 75vh; position: relative; }
.page-display .box img { position: absolute; height: 100%; width: 100%; object-fit: cover; }
.page-display .box .display-text { position: absolute; z-index: 2; color: #FFF; width: 50%; top: 50%; transform: translateY(-50%); left: 8em; text-shadow: 5px 5px 5px rgba(0,0,0,.5); }
.page-display .box .display-text h1 { font-size: 3em; font-weight: 700; }
.page-display .box .display-text h2 { font-size: 1em; margin: 0 0 1em 0; }
.page-display .box .display-text .vector { position: relative; top: 8px; left: -25px; }
.page-display .box .title { position: absolute; width: 50%; top: 0; left: 50%; transform: translateX(-50%); }

.box-news { padding: 3em 0 0 0; }
.box-news h1 { font-size: 2em; font-weight: bold; margin: 0 0 1em 0; }
.box-news h2 { font-size: 1.5em; font-weight: bold; margin: 2em 0 1em 0; }
.box-news .date { margin: 0 0 2em 0; }
.box-news .feat-img { margin: 0; }
.box-news img { margin: 0 0 2em 0; }

.box-map { background: #F5F5F5; border: 1px solid #DDD; }
.box-map h2 { font-size: 1.5em; font-weight: bold; }
.box-map .text { padding: 2em; }

.archive-list { padding: 5em 0; }
.archive-list h2 { font-size: 1.25em; font-weight: bold; color: #000; width: 100%; }
.archive-list a { color: #000; }
.archive-list .box { position: relative; overflow: hidden; background: #F5F5F5; border: 1px solid #DDD; margin: 0 0 1.75em 0; }
.archive-list .box .images { position: relative; height: 0; padding-bottom: 60%; }
.archive-list .box .images img { position: absolute; height: 100%; width: 100%; object-fit: cover; }
.archive-list .box .text { padding: 1em 1em 2em 1em; }
.archive-list .box .date { font-size: .8em; margin: 0 0 1em 0; }
.archive-list .box h1 { font-size: 1.25em; font-weight: 600; color: #000; width: 100%; }
.archive-list .box .btn-custom { position: relative; border: 1px solid #000; color: #000; padding: 10px 15px; margin: 0; overflow: hidden; }

.speks { padding: 5em 0; }
.speks h2 { text-align: center; margin: 0 0 1em 0; }
.speks .wrapper { padding: 3em 0; }
.speks .box { margin: 0 0 2em 0; }
.speks img { width: 100%; }
.speks span { font-size: .8em; color: #666; margin: 0 0 1em 0; }
.speks .nav-tabs { border: none; justify-content: center; margin: 0 0 3em 0; }
.speks .nav-link,
.speks .nav-link:hover { color: #666; border: none; border-radius: 0; }
.speks .nav-link.active { border: none; border-bottom: 2px solid #A4CE4C !important; }

.errorpage { padding: 5em 0; text-align: center; }

.whatsapp { position: fixed; z-index: 2; right: 1em; bottom: 1em; width: 70px; height: 70px; line-height: 70px; text-align: center; font-size: 2em; color: #000; border: 1px solid #FFF; border-radius: 50%; background: #EEE; transition: ease all .5s; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
.whatsapp:hover { background: #A4CE4C; color: #FFF; border: 1px solid #A4CE4C; }
.whatsapp .wa-text { display: none; }

.blacklink { color: #000; }

.wp-pagenavi { clear: both; }
.wp-pagenavi a { text-decoration: none; display: inline-block; border: 1px solid #000; margin: 1em 2px; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 0.375rem; transition: all 0.3s ease; }
.wp-pagenavi a:hover { background-color: #000; color: #FFF; }
.wp-pagenavi span { text-decoration: none; display: inline-block; margin: 1em 1em 1em 0; height: 30px; line-height: 30px; border-radius: 0.375rem; }
.wp-pagenavi a:hover { border-color: #000; }
.wp-pagenavi span.current { display: inline-block; margin: 0 2px 0 0; border: 1px solid #000; background: #000; color: #FFF; font-weight: bold; width: 50px; height: 50px; line-height: 50px; text-align: center; }

@media (min-aspect-ratio: 16/9) {

}

@media (max-aspect-ratio: 16/9) {

}

@media (max-width: 799px) {
	.topmenu { background: #FFF; display: block; padding: 1em; top: 0; }
	.topmenu .logo { padding: 0; width: auto; }
	.topmenu .logo img { filter: brightness(-100%); }
	.topmenu .menu { position: absolute; border-top: 1px solid #DDD; left: -100%; top: 61.45px; width: 70%; height: 100vh; padding: 1em; font-weight: 600; background: #FFF; transition: ease all .5s; }
	.topmenu .menu-active { left: 0; }
	.topmenu .menu ul { list-style: none; margin: 0; padding: 0; }
	.topmenu .menu ul li { position: relative; display: block; color: #000; margin: 1em 0 0 0; padding: 0; }
	.topmenu .menu ul li ul { position: relative; opacity: 1; left: 1em; top: 0; transform: translateX(0); height: auto; }
	.topmenu .menu ul li:hover ul { opacity: 1; top: auto; height: auto; }
	.topmenu .menu ul li ul li { display: block; width: auto; text-align: left; }
	.topmenu .menu ul li a { color: #000; }
	.topmenu .menu ul li ul li a { color: #000; }
	.topmenu .misc { display: block; padding: 0; width: auto; text-align: left; }
	.topmenu .misc .btn-custom { border: none; color: #FFF !important; background: #A4CE4C !important; margin: 1em 0 0 0; width: 100%; padding: 10px 25px; }
	.sticky .misc .btn-custom { border: none; color: #FFF !important; background: #A4CE4C !important; margin: 1em 0 0 0; width: 100%; }
	.sticky .menu ul li ul { position: relative; opacity: 1; left: 1em; }
	.sticky2 { padding: 1em; }
	.sticky2 .logo img { filter: brightness(-100%); }
	.sticky2 .menu a { color: rgba(0,0,0,.9) !important; }
	.sticky2 .misc .btn-custom { border: none; color: #FFF !important; background: #A4CE4C !important; margin: 1em 0 0 0; width: 100%; }
	.sticky2 .menu ul li ul { position: relative; opacity: 1; left: 1em;}

    .burger { visibility: visible; z-index: 9999; }
    .burger-active { height: 0; }
    .burger-active:before { rotate: 45deg; top: 0; width: 22px; left: -1px; }
    .burger-active:after { rotate: -45deg; top: 0; width: 22px; left: -1px; }

	.display { height: auto; margin-top: 50px; }
	.display .box { height: 40vh; margin: 0 0 -7px 0; }
	.display .box .display-text { width: 80%; top: 5%; left: 3em; }
	.display .box .display-text h1 { font-size: 1.5em; }
	.display .btn-custom1 { padding: 5px 15px; }
	.display .btn-custom2 { padding: 5px 15px; }
	
	.display-video { height: auto; margin-top: 50px; }
	.display-video .box { height: auto; margin: 0 0 -1px 0; }
    .display-video video { width: 100%; height: 100%; position: absolute; object-fit: cover; }

	.home-about { height: auto; width: 100%; padding: 2em 0; }
	.home-about h2 { font-size: 1.25em; font-weight: 700; } 

	.home-type { padding: 3em 0; width: 100%; overflow: hidden; }
	.home-type .slick-list { margin: 0 30px; }
	.home-type h4 { font-size: 1em; margin: 0 0 1em 0; }
	.home-type .box { margin: 0; font-weight: 700; }

	.home-misc { padding: 3em 0; }
	.home-misc h2 { font-size: 1.25em; font-weight: 700; } 

	.home-gallery { padding: 3em 0; text-align: center; font-size: .8em; overflow: hidden; }
	.home-gallery h2 { font-size: 1.25em; font-weight: 700; }
	.home-gallery .text h3 { font-size: 1em; }
	.home-gallery-slider { position: relative; }
	.home-gallery .slick-slide { margin: 0 12px; opacity: 1; padding: 0 !important; }
	.home-gallery .slick-center { transform: scale(1); }
	.home-gallery .slick-prev { left: 22px; }
	.home-gallery .slick-next { right: 22px; }
	.home-gallery .slick-prev:before, .home-gallery .slick-next:before { color: #FFF; }

	.app { padding: 3em 0 0 0; }
	.app img.playstore { max-height: 50px; border-radius: 10px; }
	.app img.phoneimg { width: 90%; }
	
	.footer .boxed { display: block; justify-content: space-between; }
	.footer .boxed .box { margin: 0; }
	.footer .boxed .box h2 { font-weight: bold; }

	.copyright .box { margin: 0 0 50px 0; }

	.btn-custom { position: relative; border: 1px solid #000; color: #000; padding: 5px 15px; margin: 0 5px; overflow: hidden; }
	
	.whatsapp { position: fixed; z-index: 9; right: 0; bottom: 0; width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 1.5em; color: #FFF; border: none; border-radius: 0; background: #A4CE4C;  }
	.whatsapp .wa-text { display: inline-block; position: relative; top: -3px; font-size: .7em; font-weight: bold; }

    .section { position: relative; padding: 3em 0; }
    .box { margin: 0 0 3em 0; }
    .box img { margin: 0 0 1em 0; }
    .box .videos { display: block; margin: 0 0 1em 0; }

    .single-display { height: 40vh; margin-top: 50px; margin-bottom: -50px; }
    .single-display .display-text { top: 2em; }
    .single-display .display-text h1 { font-size: 1.5em; }
    .single-display .display-text h2 { font-size: 1em; }
    .single-display .stats { display: none; }
    .single-display .stats div { width: 25%; }
    .single-display .display-bottom { width: 90%; bottom: 2em; }
    .single-display .btn-custom1 { padding: 5px 15px; }
    .single-display .btn-custom2 { padding: 5px 15px; }
    
    .single-section { position: relative; }
    .single-section img { width: 100%; height: auto; }
    .single-section .text { position: relative; width: 100%; top: 0; left: 50%; transform: translateX(-50%); text-align: left; padding: 1em 12px; }
    .single-section .text-wh { color: #000; }
    
    .single-type { padding: 3em 0; width: 100%; overflow: hidden; }
    
    .color-collection .colors span { display: none; }

	.page-display { height: 30vh; margin-top: 50px; }
    .page-display .box { height: 30vh; }
    .page-display .box .display-text { width: 90%; top: 10%; transform: translateY(0); left: 10%; }
    .page-display .box .display-text h1 { font-size: 2em;  }

    .aboutus { height: auto; padding: 3em 0; }
    .aboutus h2 { margin: 0 0 .5em 0;} 

    .ke-atas { order: 1; }
    .ke-bawah { order: 2; }
    .on-mobile { text-align: left !important; }
	
}