/* =====================================
   AMED KARANGASEM TOURS
   PREMIUM TRAVEL WEBSITE
   BY PALAPA WISATA
===================================== */

:root{

--primary:#003B73;
--secondary:#00B8D9;
--accent:#FF7A00;

--dark:#0f172a;
--light:#ffffff;

--gray:#64748b;

--section:#f8fafc;

--shadow:
0 10px 30px rgba(0,0,0,.08);

--radius:20px;

}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:
'Poppins',
sans-serif;

color:#1e293b;

overflow-x:hidden;

background:#fff;

line-height:1.7;

}

/* LINKS */

a{
text-decoration:none;
transition:.3s;
}

ul{
list-style:none;
padding:0;
margin:0;
}

img{
max-width:100%;
display:block;
}

/* SECTION */

.section-padding{
padding:100px 0;
}

/* TOP BAR */

.topbar{
height:42px;

background:var(--primary);

color:#fff;

font-size:14px;

padding:10px 0;

position:relative;
z-index:9999;

}

/* NAVBAR */

.main-navbar{

top:42px;

background:rgba(0,0,0,.15);

backdrop-filter:blur(12px);

transition:.4s;

padding:18px 0;

}

.main-navbar.scrolled{

background:#001e3c;

box-shadow:
0 5px 20px rgba(0,0,0,.15);

}

.navbar-brand{

font-size:28px;

font-weight:800;

letter-spacing:1px;

color:#fff !important;

}

.nav-link{

color:#fff !important;

font-weight:500;

margin-left:15px;

position:relative;

}

.nav-link::after{

content:'';

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:#fff;

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}

/* BOOK BUTTON */

.btn-book{

background:var(--accent);

color:#fff;

padding:12px 25px;

border-radius:50px;

font-weight:600;

border:none;

}

.btn-book:hover{

background:#ff6000;

color:#fff;

transform:
translateY(-2px);

}

/* HERO */

.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.45)
),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e');

background-size:cover;
background-position:center center;
background-repeat:no-repeat;

}

.hero-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:
linear-gradient(
90deg,
rgba(0,0,0,.65),
rgba(0,0,0,.35)
);

}

.hero-content{

position:relative;
z-index:2;
color:#fff;

}

/* HERO BUTTONS */

.btn-primary{

background:var(--secondary);

border:none;

padding:15px 35px;

border-radius:50px;

font-weight:700;

}

.btn-primary:hover{

background:#00a5c3;

transform:
translateY(-3px);

}

.btn-outline-light{

padding:15px 35px;

border-radius:50px;

}

/* HERO STATS */

.hero-stats{

display:flex;

gap:60px;

margin-top:60px;

flex-wrap:wrap;

}

.hero-stats h3{

font-size:42px;

font-weight:800;

margin-bottom:0;

color:#fff;

}

.hero-stats span{

font-size:14px;

color:#ddd;

}

/* SEARCH ENGINE */

.search-section{

margin-top:-70px;

position:relative;

z-index:10;

}

.search-box{

background:#fff;

padding:30px;

border-radius:25px;

box-shadow:
0 20px 50px rgba(0,0,0,.1);

}

.search-box .form-control,
.search-box .form-select{

height:60px;

border-radius:15px;

border:1px solid #ddd;

}

.btn-search{

height:60px;

background:var(--accent);

color:#fff;

font-weight:700;

border:none;

border-radius:15px;

}

.btn-search:hover{

background:#ff6200;

}

/* SECTION TITLE */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--accent);

font-weight:700;

letter-spacing:2px;

font-size:14px;

text-transform:uppercase;

}

.section-title h2{

font-size:48px;

font-weight:800;

margin-top:15px;

}

/* SERVICES */

.service-card{

background:#fff;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.4s;

height:100%;

text-align:center;

}

.service-card:hover{

transform:
translateY(-10px);

}

.service-icon{

width:90px;

height:90px;

margin:auto;

background:
rgba(0,184,217,.12);

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:36px;

color:var(--secondary);

margin-bottom:25px;

}

.service-card h4{

font-weight:700;

margin-bottom:15px;

}

/* =====================================
   TOUR FILTER
===================================== */

.tour-filter{

display:flex;

justify-content:center;

gap:15px;

margin-bottom:50px;

flex-wrap:wrap;

}

.filter-btn{

padding:12px 25px;

border:none;

background:#eef2f7;

border-radius:50px;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.filter-btn:hover,
.filter-btn.active{

background:var(--secondary);

color:#fff;

}

/* =====================================
   TOUR CARD
===================================== */

.featured-tours{

background:var(--section);

}

.tour-card{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

height:100%;

}

.tour-card:hover{

transform:translateY(-12px);

}

.tour-card img{

height:260px;

width:100%;

object-fit:cover;

transition:.5s;

}

.tour-card:hover img{

transform:scale(1.08);

}

.tour-content{

padding:25px;

}

.tour-rating{

color:#fbbf24;

font-weight:700;

margin-bottom:10px;

}

.tour-content h4{

font-size:24px;

font-weight:700;

margin-bottom:15px;

}

.tour-content p{

color:var(--gray);

margin-bottom:25px;

}

.tour-footer{

display:flex;

justify-content:space-between;

align-items:center;

}

.tour-price{

font-size:28px;

font-weight:800;

color:var(--primary);

}

.btn-tour{

background:var(--accent);

color:#fff;

padding:10px 22px;

border-radius:50px;

font-weight:700;

}

.btn-tour:hover{

background:#ff6200;

color:#fff;

}

/* =====================================
   WHY CHOOSE US
===================================== */

.why-us{

background:#fff;

}

.feature-box{

text-align:center;

padding:35px;

border-radius:20px;

transition:.4s;

height:100%;

}

.feature-box:hover{

background:#fff;

box-shadow:var(--shadow);

transform:translateY(-10px);

}

.feature-box i{

font-size:50px;

color:var(--secondary);

margin-bottom:20px;

}

.feature-box h5{

font-weight:700;

margin-bottom:10px;

}

/* =====================================
   CAR RENTAL
===================================== */

.car-rental{

background:var(--section);

}

.car-card{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

height:100%;

}

.car-card:hover{

transform:translateY(-10px);

}

.car-card img{

height:250px;

width:100%;

object-fit:cover;

}

.car-card h4{

padding:20px 20px 10px;

font-weight:700;

}

.car-price{

padding:0 20px;

font-size:30px;

font-weight:800;

color:var(--accent);

margin-bottom:10px;

}

.car-card ul{

padding:0 20px 20px;

}

.car-card ul li{

padding:8px 0;

border-bottom:1px solid #eee;

font-size:15px;

}

.btn-rent{

display:block;

margin:20px;

background:var(--primary);

color:#fff;

border-radius:50px;

padding:14px;

font-weight:700;

text-align:center;

}

.btn-rent:hover{

background:#002b52;

color:#fff;

}

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

.gallery{

background:#fff;

}

.gallerySwiper{

padding-bottom:60px;

}

.gallerySwiper img{

height:420px;

width:100%;

object-fit:cover;

border-radius:25px;

}

.swiper-pagination-bullet-active{

background:var(--secondary);

}

/* =====================================
   REVIEWS
===================================== */

.reviews{

background:var(--section);

}

.review-score{

text-align:center;

margin-bottom:60px;

}

.review-score h1{

font-size:70px;

font-weight:800;

color:var(--primary);

}

.review-card{

background:#fff;

padding:30px;

border-radius:25px;

box-shadow:var(--shadow);

height:100%;

transition:.4s;

}

.review-card:hover{

transform:translateY(-8px);

}

.review-card h5{

margin-top:15px;

font-weight:700;

}

.review-card small{

display:block;

margin-bottom:15px;

color:var(--gray);

}

.review-card p{

margin-bottom:0;

}

/* =====================================
   FAQ
===================================== */

.faq{

background:#fff;

}

.accordion-item{

border:none;

margin-bottom:20px;

border-radius:20px !important;

overflow:hidden;

box-shadow:var(--shadow);

}

.accordion-button{

padding:25px;

font-weight:700;

font-size:18px;

background:#fff;

}

.accordion-button:not(.collapsed){

background:var(--secondary);

color:#fff;

}

.accordion-button:focus{

box-shadow:none;

}

.accordion-body{

padding:25px;

font-size:16px;

line-height:1.8;

}

/* =====================================
   CTA SECTION
===================================== */

.booking-cta{

background:
linear-gradient(
135deg,
var(--primary),
#005ea8
);

padding:80px 0;

color:#fff;

}

.booking-cta h2{

font-size:48px;

font-weight:800;

margin-bottom:15px;

}

.booking-cta p{

font-size:18px;

margin-bottom:0;

}

.btn-cta-book{

background:var(--accent);

color:#fff;

padding:18px 35px;

border-radius:50px;

font-weight:700;

font-size:18px;

}

.btn-cta-book:hover{

background:#ff6200;

color:#fff;

}

/* =====================================
   CONTACT SECTION
===================================== */

.contact{

background:#ffffff;

}

.contact-info{

padding-right:30px;

}

.contact-item{

display:flex;

align-items:flex-start;

margin-bottom:35px;

}

.contact-item i{

width:60px;
height:60px;

background:rgba(0,184,217,.12);

color:var(--secondary);

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

font-size:24px;

margin-right:20px;

flex-shrink:0;

}

.contact-item h5{

font-weight:700;

margin-bottom:5px;

}

.contact-item p{

margin:0;

color:var(--gray);

}

.contact-form{

background:#fff;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

}

.contact-form .form-control{

height:60px;

margin-bottom:20px;

border-radius:15px;

border:1px solid #e5e7eb;

padding-left:20px;

}

.contact-form textarea.form-control{

height:auto;

padding-top:15px;

resize:none;

}

.contact-form .form-control:focus{

border-color:var(--secondary);

box-shadow:none;

}

.btn-send{

background:var(--secondary);

color:#fff;

padding:15px 35px;

border:none;

border-radius:50px;

font-weight:700;

}

.btn-send:hover{

background:#0098b5;

color:#fff;

}

/* =====================================
   GOOGLE MAP
===================================== */

.map-section{

height:500px;

overflow:hidden;

}

.map-section iframe{

width:100%;

height:100%;

border:none;

filter:grayscale(15%);

}

/* =====================================
   FOOTER
===================================== */

.footer{

background:#081120;

color:#fff;

padding:80px 0 20px;

}

.footer h4,
.footer h5{

font-weight:700;

margin-bottom:25px;

}

.footer p{

color:#cbd5e1;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul li a{

color:#cbd5e1;

transition:.3s;

}

.footer ul li a:hover{

color:#fff;

padding-left:5px;

}

.social-links{

display:flex;

gap:12px;

margin-top:25px;

}

.social-links a{

width:45px;

height:45px;

border-radius:50%;

background:rgba(255,255,255,.08);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:18px;

transition:.3s;

}

.social-links a:hover{

background:var(--secondary);

transform:translateY(-4px);

}

.footer hr{

border-color:rgba(255,255,255,.1);

margin:40px 0 25px;

}

.footer-bottom{

text-align:center;

color:#94a3b8;

font-size:14px;

}

/* =====================================
   FLOATING WHATSAPP
===================================== */

.floating-wa{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

color:#fff;

z-index:9999;

box-shadow:
0 10px 30px rgba(37,211,102,.4);

animation:
pulseWhatsapp 2s infinite;

}

.floating-wa:hover{

color:#fff;

transform:scale(1.08);

}

@keyframes pulseWhatsapp{

0%{
box-shadow:
0 0 0 0 rgba(37,211,102,.5);
}

70%{
box-shadow:
0 0 0 18px rgba(37,211,102,0);
}

100%{
box-shadow:
0 0 0 0 rgba(37,211,102,0);
}

}

/* =====================================
   IMAGE HOVER EFFECT
===================================== */

.tour-card img,
.car-card img,
.gallery img{

transition:.5s;

}

.tour-card:hover img,
.car-card:hover img{

transform:scale(1.08);

}

/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:50px;

}

/* =====================================
   ANIMATION
===================================== */

.fade-up{

opacity:0;

transform:translateY(30px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/* =====================================
   RESPONSIVE TABLET
===================================== */

@media(max-width:992px){

.hero h1{

font-size:52px;

}

.hero p{

font-size:18px;

}

.hero-stats{

gap:30px;

}

.section-title h2{

font-size:38px;

}

.booking-cta h2{

font-size:38px;

}

.contact-info{

padding-right:0;

margin-bottom:40px;

}

}

/* =====================================
   RESPONSIVE MOBILE
===================================== */

@media(max-width:768px){

.topbar{

display:none;

}

.hero{

height:90vh;

}

.hero h1{

font-size:38px;

line-height:1.2;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:20px;

}

.section-padding{

padding:70px 0;

}

.section-title h2{

font-size:30px;

}

.search-box{

padding:20px;

}

.search-box .row>*{

margin-bottom:15px;

}

.booking-cta{

text-align:center;

}

.booking-cta h2{

font-size:30px;

}

.btn-cta-book{

margin-top:20px;

display:inline-block;

}

.gallerySwiper img{

height:260px;

}

.review-score h1{

font-size:50px;

}

.contact-form{

padding:25px;

}

.floating-wa{

width:60px;

height:60px;

font-size:28px;

}

}

/* =====================================
   PAGE SPEED OPTIMIZATION
===================================== */

img{

content-visibility:auto;

}

.hero-video{

will-change:transform;

}

.tour-card,
.car-card,
.review-card{

contain:layout paint;

}

/* =====================================
   PREMIUM GLASS EFFECT
===================================== */

.glass{

background:
rgba(255,255,255,.15);

backdrop-filter:
blur(15px);

border:
1px solid rgba(255,255,255,.2);

}

.hero-video-container{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
z-index:1;
}

.hero-youtube{

position:absolute;

top:50%;
left:50%;

width:177.77777778vh;
height:56.25vw;

min-width:100%;
min-height:100%;

transform:translate(-50%,-50%);

pointer-events:none;

}

.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.55)
);

z-index:2;

}

/* =====================================
   END OF FILE
===================================== */