/* ===============================
   VG TOURS & TRAVELS
   PREMIUM TRAVEL WEBSITE CSS
================================ */


/* ===== GOOGLE FONT ===== */

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



/* ===== GLOBAL ===== */

*{

margin:0;

padding:0;

box-sizing:border-box;

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

}


html{

scroll-behavior:smooth;

}



body{

overflow-x:hidden;

background:#fff;

}



a{

text-decoration:none;

}



img{

max-width:100%;

}




/* ================= NAVBAR ================= */


.navbar{

transition:.4s;

padding:18px 0;

}


.navbar.scrolled{

background:#ffffff!important;

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

}



.navbar-brand{

font-size:30px;

font-weight:800;

color:#ffc107!important;

}



.navbar-brand span{

color:#0d6efd;

}



.nav-link{

font-weight:500;

margin-left:15px;

transition:.3s;

}



.nav-link:hover{

color:#ffc107!important;

}





/* ================= HERO SECTION ================= */


.hero{

height:90vh;

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("https://images.unsplash.com/photo-1501785888041-af3ef285b470");


background-size:cover;

background-position:center;

display:flex;

align-items:center;

}



.hero-content{

color:white;

max-width:750px;

}



.hero h1{

font-size:65px;

font-weight:800;

line-height:1.2;

}



.hero p{

font-size:20px;

color:#eee;

}



.hero .btn{

padding:14px 35px;

font-size:18px;

}





/* ================= SEARCH BOX ================= */


.search-box{

background:white;

border-radius:20px;

padding:25px;

box-shadow:

0 15px 40px rgba(0,0,0,.15);

margin-top:-70px;

position:relative;

z-index:5;

}



.search-box input,
.search-box select{

height:50px;

border-radius:50px;

padding-left:20px;

}





/* ================= SECTION TITLE ================= */


section h2{

font-weight:800;

}



.badge{

font-size:14px;

letter-spacing:.5px;

}





/* ================= DESTINATION CARDS ================= */


.card{

transition:.4s;

}



.card:hover{

transform:translateY(-10px);

box-shadow:

0 20px 40px rgba(0,0,0,.18)!important;

}



.card img{

transition:.5s;

}



.card:hover img{

transform:scale(1.05);

}





/* ================= BUTTONS ================= */


.btn{

transition:.3s;

}



.btn:hover{

transform:translateY(-3px);

}





/* ================= FLIGHT BANNER ================= */


.flight-banner{

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),

url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05");


background-size:cover;

background-position:center;

}





/* ================= SERVICE CARDS ================= */


.service-icon{

height:90px;

width:90px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

background:#f8f9fa;

}





/* ================= TESTIMONIAL ================= */


.testimonial-card{

border-radius:20px;

padding:30px;

background:white;

}





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


footer{

background:#050505;

}



footer h5{

color:#ffc107;

}



footer a{

transition:.3s;

}


footer a:hover{

color:#ffc107!important;

}



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


@media(max-width:992px){


.hero h1{

font-size:45px;

}


}


@media(max-width:576px){


.hero{

height:80vh;

}


.hero h1{

font-size:35px;

}


.search-box{

margin-top:20px;

}


}
/* ==========================================
   VG TOURS & TRAVELS
   STYLE CSS PART 2
   ADVANCED COMPONENT STYLING
========================================== */


/* ================= PACKAGE CARDS ================= */


.package-card{

border-radius:25px;

overflow:hidden;

background:white;

transition:.4s;

}


.package-card:hover{

transform:translateY(-12px);

}



.package-card img{

height:280px;

object-fit:cover;

}



.package-price{

font-size:28px;

font-weight:800;

color:#0d6efd;

}





.package-badge{

position:absolute;

top:20px;

left:20px;

padding:8px 18px;

border-radius:50px;

background:#ffc107;

font-weight:600;

}





/* ================= HOTEL CARDS ================= */


.hotel-card{

border-radius:25px;

overflow:hidden;

}



.hotel-card img{

height:260px;

object-fit:cover;

}



.hotel-rating{

color:#ffc107;

font-size:18px;

}



.hotel-feature{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

color:#666;

}





/* ================= DESTINATION IMAGE OVERLAY ================= */


.destination-card{

position:relative;

overflow:hidden;

border-radius:25px;

}



.destination-card::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
transparent,
rgba(0,0,0,.7)
);

}



.destination-card img{

height:350px;

object-fit:cover;

}



.destination-content{

position:absolute;

bottom:25px;

left:25px;

z-index:2;

color:white;

}





/* ================= COUNTER SECTION ================= */


.counter-section{

background:

linear-gradient(
rgba(13,110,253,.85),
rgba(13,110,253,.85)
),

url("https://images.unsplash.com/photo-1488646953014-85cb44e25828");


background-size:cover;

background-position:center;

}



.counter-box{

text-align:center;

color:white;

}



.counter-box h2{

font-size:45px;

font-weight:800;

}



.counter-box p{

font-size:18px;

}





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


.gallery-item{

overflow:hidden;

border-radius:20px;

}



.gallery-item img{

height:300px;

width:100%;

object-fit:cover;

transition:.5s;

}



.gallery-item:hover img{

transform:scale(1.15);

}





/* ================= BOOKING PAGE ================= */


.booking-box{

background:white;

padding:35px;

border-radius:25px;

box-shadow:

0 15px 40px rgba(0,0,0,.12);

}



.booking-box input,
.booking-box select,
.booking-box textarea{

border-radius:15px;

padding:14px;

border:1px solid #ddd;

}



.booking-box input:focus,
.booking-box select:focus,
.booking-box textarea:focus{

border-color:#0d6efd;

box-shadow:none;

}





/* ================= LOGIN REGISTER ================= */


.auth-section{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.6)
),

url("https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1");


background-size:cover;

}



.auth-card{

background:white;

padding:40px;

border-radius:25px;

width:100%;

max-width:450px;

box-shadow:

0 20px 50px rgba(0,0,0,.3);

}



.auth-card h2{

font-weight:800;

text-align:center;

}





.auth-card input{

height:50px;

border-radius:50px;

}





/* ================= CONTACT PAGE ================= */


.contact-card{

padding:30px;

border-radius:25px;

background:white;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

text-align:center;

transition:.3s;

}



.contact-card:hover{

transform:translateY(-10px);

}



.contact-card i{

font-size:40px;

color:#ffc107;

margin-bottom:15px;

}





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


.map-container{

border-radius:25px;

overflow:hidden;

height:400px;

}





/* ================= ABOUT PAGE ================= */


.about-image{

border-radius:30px;

overflow:hidden;

}



.about-image img{

height:500px;

object-fit:cover;

}



.about-content h2{

font-size:45px;

font-weight:800;

}





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


.accordion-button{

font-weight:600;

}



.accordion-button:not(.collapsed){

background:#ffc107;

color:black;

}





/* ================= ADMIN DASHBOARD ================= */


.dashboard-card{

border-radius:20px;

padding:25px;

background:white;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

}



.dashboard-icon{

height:60px;

width:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:25px;

background:#ffc107;

}





/* ================= PROFILE ================= */


.profile-card{

border-radius:25px;

background:white;

padding:30px;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

}



.profile-img{

height:120px;

width:120px;

border-radius:50%;

object-fit:cover;

}





/* ================= TABLE STYLE ================= */


.table{

border-radius:15px;

overflow:hidden;

}



.table thead{

background:#0d6efd;

color:white;

}





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


.loader{

height:50px;

width:50px;

border-radius:50%;

border:5px solid #eee;

border-top-color:#ffc107;

animation:spin 1s linear infinite;

}



@keyframes spin{

100%{

transform:rotate(360deg);

}

}





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


.fade-up{

animation:fadeUp 1s ease;

}



@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}
/* ==========================================
   VG TOURS & TRAVELS
   STYLE CSS PART 3
   FINAL PREMIUM POLISH
========================================== */


/* ================= NAVBAR PREMIUM EFFECT ================= */


.navbar{

backdrop-filter:blur(10px);

}



.navbar-toggler{

border:none;

}



.navbar-toggler:focus{

box-shadow:none;

}



.navbar-brand{

letter-spacing:1px;

}





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


.hero-content{

animation:heroFade 1.2s ease;

}



@keyframes heroFade{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}




.hero .badge{

animation:pulseBadge 2s infinite;

}



@keyframes pulseBadge{


0%{

transform:scale(1);

}


50%{

transform:scale(1.08);

}


100%{

transform:scale(1);

}


}





/* ================= FLOATING SEARCH BOX ================= */


.search-box{

animation:floatBox 4s ease-in-out infinite;

}



@keyframes floatBox{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}





/* ================= CARD HOVER PREMIUM ================= */


.card{

border-radius:25px;

overflow:hidden;

}



.card:hover .btn{

letter-spacing:.5px;

}





/* ================= IMAGE ZOOM EFFECT ================= */


.card img{

transition:transform .6s ease;

}



.card:hover img{

transform:scale(1.08);

}





/* ================= BUTTON GLOW ================= */


.btn-warning{

box-shadow:

0 8px 20px rgba(255,193,7,.35);

}



.btn-primary{

box-shadow:

0 8px 20px rgba(13,110,253,.25);

}





/* ================= STATS SECTION ================= */


.stats-section{

background:#0d6efd;

}



.stats-box{

text-align:center;

color:white;

}



.stats-box i{

font-size:45px;

color:#ffc107;

margin-bottom:15px;

}



.stats-box h2{

font-size:45px;

}





/* ================= PACKAGE DETAIL PAGE ================= */


.package-detail{

background:white;

border-radius:30px;

padding:35px;

box-shadow:

0 15px 45px rgba(0,0,0,.12);

}



.package-detail img{

height:450px;

width:100%;

object-fit:cover;

border-radius:25px;

}





/* ================= PAYMENT PAGE ================= */


.payment-card{

background:white;

border-radius:25px;

padding:35px;

box-shadow:

0 10px 40px rgba(0,0,0,.12);

}



.payment-method{

border:2px solid #eee;

padding:15px;

border-radius:15px;

cursor:pointer;

transition:.3s;

}



.payment-method:hover{

border-color:#ffc107;

background:#fff8e1;

}





/* ================= INVOICE ================= */


.invoice{

background:white;

padding:40px;

border-radius:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

}



.invoice-header{

border-bottom:2px dashed #ddd;

padding-bottom:20px;

}





/* ================= PROFILE DROPDOWN ================= */


.dropdown-menu{

border:none;

box-shadow:

0 10px 30px rgba(0,0,0,.15);

border-radius:15px;

}



.dropdown-item:hover{

background:#ffc107;

}





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


@media(max-width:768px){



.navbar-brand{

font-size:24px;

}



.hero{

height:auto;

padding:120px 0 80px;

}



.hero h1{

font-size:36px;

}



.hero p{

font-size:16px;

}



.search-box{

margin:30px 15px;

}



.display-5{

font-size:32px;

}



.about-content h2{

font-size:32px;

}



.about-image img{

height:350px;

}



.counter-box h2{

font-size:35px;

}



}





/* ================= SMALL MOBILE ================= */


@media(max-width:480px){


.hero h1{

font-size:30px;

}



.btn-lg{

padding:10px 25px;

}



.card-body{

padding:20px;

}



footer{

text-align:center;

}



}





/* ================= SCROLL REVEAL ================= */


.reveal{

opacity:0;

transform:translateY(50px);

transition:1s;

}



.reveal.active{

opacity:1;

transform:translateY(0);

}





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


::-webkit-scrollbar{

width:10px;

}



::-webkit-scrollbar-track{

background:#f1f1f1;

}



::-webkit-scrollbar-thumb{

background:#ffc107;

border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

background:#0d6efd;

}





/* ================= BACK TO TOP ================= */


#topBtn{

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}



#topBtn:hover{

transform:translateY(-8px);

}





/* ================= WHATSAPP FLOAT BUTTON ================= */


.whatsapp-btn{

position:fixed;

bottom:25px;

left:25px;

height:55px;

width:55px;

border-radius:50%;

background:#25d366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

z-index:999;

box-shadow:

0 10px 25px rgba(0,0,0,.2);

}



.whatsapp-btn:hover{

transform:scale(1.1);

color:white;

}