/* =====================================================
   TRAVELLEVER PROFESSIONAL CSS
   PART 1
====================================================== */

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

:root{

    --primary:#0d6efd;
    --secondary:#ffb703;
   /* --dark:#0f172a;*/
    --white:#ffffff;
    --text:#555;
    --light:#f8f9fa;
    /*--shadow:0 15px 40px rgba(0,0,0,.12);*/
    --radius:18px;
    --transition:.4s ease;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#fff;
    color:#222;
    overflow-x:hidden;
    line-height:1.7;

}

img{

    width:100%;
    display:block;

}



/* ==========================
   PREMIUM ROUND LOGO
========================== */

.logo{

display:flex;
align-items:center;

}

.logo img{

width:72px;
height:72px;
object-fit:cover;

border-radius:50%;

border:3px solid rgba(255,255,255,.9);

background:#fff;

padding:4px;

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

transition:all .45s ease;

cursor:pointer;

}

/* Premium Hover */

.logo img:hover{

transform:
translateY(-10px)
scale(1.18)
rotate(-8deg);

box-shadow:
0 20px 45px rgba(0,0,0,.35),
0 0 35px rgba(255,183,3,.8);

border-color:#ffb703;

}

/* Click Effect */

.logo img:active{

transform:scale(.95);

}

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

.footer-logo{

display:flex;
justify-content:center;
align-items:center;
margin-bottom:25px;

}

.footer-logo img{

width:95px;
height:95px;

object-fit:cover;

border-radius:50%;

background:#fff;

padding:5px;

border:3px solid rgba(255,255,255,.8);

transition:all .45s ease;

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

cursor:pointer;

}

.footer-logo img:hover{

transform:
translateY(-12px)
scale(1.20)
rotate(8deg);

box-shadow:
0 25px 55px rgba(0,0,0,.40),
0 0 40px rgba(255,183,3,.9);

border-color:#ffb703;

}

/* Responsive */

@media(max-width:768px){

.logo img{

width:60px;
height:60px;

}

.footer-logo img{

width:80px;
height:80px;

}

}



a{

    text-decoration:none;
    transition:var(--transition);

}

ul{

    list-style:none;
    padding:0;
    margin:0;

}

section{

    padding:90px 0;

}

.container{

    max-width:1200px;

}

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

.custom-navbar{

    background:#ffffff;
    backdrop-filter:blur(15px);
    transition:.4s;
    padding:18px 0;
   

}

.custom-navbar.scrolled{

    background:#ffffff;
    

}

/* Logo */

.navbar-brand{

    color:#111111;
    font-size:32px;
    font-weight:700;
    transition:.3s;

}

.navbar-brand:hover{

    color:#111111;

}

.navbar-brand i{

    color:var(--secondary);
    margin-right:8px;

}

.custom-navbar.scrolled .navbar-brand{

    /*color:#111111;*/

}

/* Links */

.nav-link{

    color:#111111 !important;
    margin-left:25px;
    font-weight:600;
    position:relative;
    transition:.3s;

}

.custom-navbar.scrolled .nav-link{

    color:#111111 !important;

}

.nav-link:hover{

    color:var(--secondary) !important;

}

.nav-link.active{

    color:var(--secondary) !important;

}

.nav-link::after{

    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--secondary);
    transition:.3s;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}

/* Button */

.nav-btn{

    margin-left:30px;
    border-radius:50px;
    padding:12px 28px;
    font-weight:600;

}
/*==========================
 HERO
==========================*/

.hero-section{

    position:relative;
    min-height:100vh;

    background:url("assets/images/hero1.jpg") center center/cover no-repeat;

    display:flex;
    align-items:center;
    padding-top:130px;

}

.hero-overlay{

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

}

.hero-section .container{

    position:relative;
    z-index:2;

}

.hero-badge{

    display:inline-block;
    padding:12px 22px;
    background:rgba(255,255,255,.15);
    color:#fff;
    border-radius:40px;
    backdrop-filter:blur(15px);
    margin-bottom:25px;
    animation:fadeDown 1s;

}

.hero-left h1{

    color:#fff;
    font-size:64px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;

}

.hero-left h1 span{

    color:var(--secondary);

}

.hero-left p{

    color:#ddd;
    font-size:18px;
    max-width:550px;
    margin-bottom:35px;

}

.hero-buttons{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

}

.hero-buttons .btn{

    border-radius:50px;
    padding:14px 34px;
    font-weight:600;
    transition:.4s;

}

.hero-buttons .btn:hover{

    transform:translateY(-5px);

}

.hero-stats{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}

.stat-box{

    background:rgba(255,255,255,.15);
    backdrop-filter:blur(12px);
    padding:25px;
    border-radius:15px;
    min-width:150px;
    text-align:center;

}

.stat-box h3{

    color:#fff;
    font-size:32px;
    font-weight:700;

}

.stat-box span{

    color:#ddd;
    font-size:14px;

}



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

.btn-primary{

    background:var(--primary);
    border:none;

}

.btn-warning{

    background:var(--secondary);
    border:none;
    color:#111;

}

.btn:hover{

    transform:translateY(-4px);

}

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

.section-title span{

    color:var(--secondary);
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

}

.section-title h2{

    font-size:46px;
    font-weight:800;
    margin:12px 0;

}

.section-title p{

    color:#666;
    max-width:650px;
    margin:auto;

}

/*==========================
 ANIMATIONS
==========================*/

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(50px);

}

to{

opacity:1;
transform:translateY(0);

}

}

@keyframes fadeDown{

from{

opacity:0;
transform:translateY(-50px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* =====================================================
   DESTINATIONS
====================================================== */

.destinations{
    background:#f8fafc;
}

.destination-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.4s ease;
    height:100%;
}

.destination-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.destination-img{
    overflow:hidden;
}

.destination-img img{
    height:270px;
    width:100%;
    object-fit:cover;
    transition:.6s;
}

.destination-card:hover img{
    transform:scale(1.1);
}

.destination-content{
    padding:28px;
}

.destination-content h4{
    font-size:28px;
    font-weight:700;
    margin-bottom:12px;
}

.destination-content p{
    color:#666;
    margin-bottom:25px;
}

.price{
    color:var(--primary);
    font-size:22px;
    font-weight:700;
}

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

.why-choose{
    background:#fff;
}

.feature-box{
    background:#fff;
    padding:45px 30px;
    border-radius:20px;
    text-align:center;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;
}

.feature-box:hover{
    transform:translateY(-10px);
    background:var(--primary);
    color:#fff;
}

.feature-box i{
    font-size:60px;
    color:var(--secondary);
    margin-bottom:25px;
}

.feature-box:hover i{
    color:#fff;
}

.feature-box h4{
    font-size:28px;
    margin-bottom:15px;
    font-weight:700;
}

.feature-box p{
    color:#777;
}

.feature-box:hover p{
    color:#fff;
}

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

.cta-section{
    background:linear-gradient(135deg,#0d6efd,#0056b3);
    padding:100px 0;
}

.cta-box{
    text-align:center;
    color:#fff;
}

.cta-box h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:20px;
}

.cta-box p{
    font-size:18px;
    max-width:700px;
    margin:auto;
    margin-bottom:35px;
}

.cta-box .btn{
    border-radius:50px;
    padding:15px 45px;
    font-size:18px;
    font-weight:600;
}

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

.footer{
    background:#081420;
    color:#fff;
    padding:90px 0 30px;
}

.footer h3,
.footer h5{
    margin-bottom:25px;
    font-weight:700;
}

.footer p{
    color:#c9d1d9;
}

.footer ul li{
    margin-bottom:12px;
}

.footer ul li a{
    color:#c9d1d9;
    transition:.3s;
}

.footer ul li a:hover{
    color:var(--secondary);
    padding-left:8px;
}

.social-links{
    margin-top:25px;
}

.social-links a{
    width:48px;
    height:48px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    margin-right:10px;
    transition:.3s;
}

.social-links a:hover{
    background:var(--secondary);
    color:#111;
    transform:translateY(-6px);
}

.footer hr{
    margin:50px 0 20px;
    border-color:rgba(255,255,255,.15);
}

.copyright{
    color:#c9d1d9;
}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

::-webkit-scrollbar-track{
    background:#eee;
}

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

@media(max-width:1200px){

.hero-left h1{
    font-size:54px;
}

}

@media(max-width:992px){

.custom-navbar{
    background:#081420;
}

.navbar-nav{
    text-align:center;
    margin-top:20px;
}

.nav-link{
    margin:10px 0;
}

.nav-btn{
    width:100%;
    margin:20px 0 0;
}

.hero-section{
    padding:120px 0 70px;
    min-height:auto;
}

.hero-left{
    text-align:center;
    margin-bottom:50px;
}

.hero-left p{
    margin:auto auto 35px;
}

.hero-buttons{
    justify-content:center;
}

.hero-stats{
    justify-content:center;
}

.booking-box{
    margin-top:20px;
}

.section-title h2{
    font-size:38px;
}

.cta-box h2{
    font-size:40px;
}

}

@media(max-width:768px){

section{
    padding:70px 0;
}

.hero-left h1{
    font-size:42px;
}

.hero-left p{
    font-size:16px;
}

.hero-buttons .btn{
    width:100%;
}

.stat-box{
    width:100%;
}

.booking-box{
    padding:30px 20px;
}

.section-title h2{
    font-size:32px;
}

.destination-img img{
    height:240px;
}

.cta-box h2{
    font-size:34px;
}

.footer{
    text-align:center;
}

.social-links{
    justify-content:center;
}

}

@media(max-width:576px){

.hero-left h1{
    font-size:34px;
}

.hero-badge{
    font-size:14px;
}

.booking-box h2{
    font-size:24px;
}

.destination-content{
    padding:22px;
}

.destination-content h4{
    font-size:24px;
}

.feature-box{
    padding:35px 20px;
}

.feature-box h4{
    font-size:24px;
}

.cta-box h2{
    font-size:28px;
}

.cta-box p{
    font-size:16px;
}

.footer h3{
    font-size:28px;
}

}


/* Ripple Effect */

.btn{
    position:relative;
    overflow:hidden;
}

.ripple{

    position:absolute;

    width:15px;

    height:15px;

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

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

    pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(25);

opacity:0;

}

}

/* =====================================================
   END
====================================================== */





/*=====================================================
        ABOUT PAGE CSS - PART 1
=====================================================*/

/* ABOUT HERO */

.about-hero{

position:relative;
min-height:100vh;
display:flex;
align-items:center;
padding:140px 0 100px;
overflow:hidden;

background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.55)),
url("assets/images/about-banner.jpg");

background-size:cover;
background-position:center;
background-attachment:fixed;

}

.about-overlay{

position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:linear-gradient(135deg,
rgba(13,110,253,.20),
rgba(255,183,3,.15));

}

.about-content{

position:relative;
z-index:2;

}

.about-badge{

display:inline-block;

padding:10px 24px;

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

backdrop-filter:blur(10px);

border-radius:40px;

color:#fff;

font-weight:600;

margin-bottom:25px;

letter-spacing:1px;

animation:fadeDown 1s;

}

.about-content h1{

font-size:65px;

font-weight:800;

line-height:1.2;

color:#fff;

margin-bottom:25px;

}

.about-content h1 span{

color:#ffb703;

}

.about-content p{

font-size:18px;

color:#eee;

margin-bottom:20px;

max-width:620px;

}

.about-image{

position:relative;

z-index:2;

text-align:center;

}

.about-image img{

max-width:100%;

border-radius:30px;

box-shadow:0 30px 70px rgba(0,0,0,.35);

transition:.5s;

animation:fadeUp 1.2s;

}

.about-image img:hover{

transform:scale(1.05) rotate(-2deg);

}

/* Breadcrumb */

.breadcrumb{

background:transparent;

padding:0;

margin-bottom:25px;

}

.breadcrumb-item a{

color:#fff;

font-weight:500;

}

.breadcrumb-item.active{

color:#ffb703;

}

/*=====================================================
ABOUT INTRO
=====================================================*/

.about-intro{

padding:100px 0;

background:#fff;

}

.about-intro img{

border-radius:25px;

transition:.5s;

box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.about-intro img:hover{

transform:scale(1.04);

}

.about-intro p{

font-size:17px;

color:#666;

line-height:1.9;

margin-bottom:20px;

}

.section-title span{

display:inline-block;

color:#0d6efd;

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

text-transform:uppercase;

}

.section-title h2{

font-size:46px;

font-weight:800;

margin-bottom:25px;

line-height:1.3;

color:#111;

}

/*=====================================================
OUR STORY
=====================================================*/

.our-story{

background:#f8f9fa;

padding:100px 0;

}

.story-card{

background:#fff;

padding:40px 30px;

border-radius:25px;

text-align:center;

transition:.45s;

height:100%;

box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.story-card:hover{

transform:translateY(-15px);

box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.story-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0d6efd;

color:#fff;

font-size:34px;

margin-bottom:25px;

transition:.5s;

}

.story-card:hover .story-icon{

background:#ffb703;

transform:rotate(360deg);

}

.story-card h3{

font-size:28px;

font-weight:700;

margin-bottom:15px;

}

.story-card p{

color:#666;

line-height:1.8;

}

/* section title */

.section-subtitle{

display:inline-block;

font-weight:700;

letter-spacing:2px;

color:#0d6efd;

margin-bottom:15px;

text-transform:uppercase;

}

.section-desc{

max-width:700px;

margin:auto;

color:#666;

line-height:1.8;

}


/*=====================================================
        ABOUT PAGE CSS - PART 2
=====================================================*/

/*=========================
MISSION SECTION
=========================*/

.mission-section{

padding:100px 0;
background:#ffffff;
position:relative;
overflow:hidden;

}

.mission-section::before{

content:"";
position:absolute;
width:300px;
height:300px;
background:rgba(13,110,253,.05);
border-radius:50%;
top:-100px;
left:-100px;

}

.mission-section img{

border-radius:25px;
box-shadow:0 20px 60px rgba(0,0,0,.15);
transition:.5s;

}

.mission-section img:hover{

transform:scale(1.05) rotate(-2deg);

}

.mission-list{

margin-top:30px;
padding:0;

}

.mission-list li{

list-style:none;
margin-bottom:18px;
font-size:17px;
font-weight:500;
display:flex;
align-items:center;
transition:.35s;

}

.mission-list li:hover{

padding-left:10px;
color:#0d6efd;

}

.mission-list li i{

color:#198754;
margin-right:15px;
font-size:20px;

}

/*=========================
VISION SECTION
=========================*/

.vision-section{

padding:100px 0;
background:#f8f9fa;
position:relative;

}

.vision-section::after{

content:"";
position:absolute;
right:-120px;
bottom:-120px;

width:280px;
height:280px;

border-radius:50%;

background:rgba(255,183,3,.12);

}

.vision-section img{

border-radius:25px;
transition:.5s;
box-shadow:0 20px 60px rgba(0,0,0,.15);

}

.vision-section img:hover{

transform:scale(1.05);

}

.vision-section p{

color:#666;
font-size:17px;
line-height:1.9;

}

/*=========================
COMMON IMAGE EFFECT
=========================*/

.about-intro img,
.mission-section img,
.vision-section img{

width:100%;
object-fit:cover;

}

.about-intro img:hover,
.mission-section img:hover,
.vision-section img:hover{

filter:brightness(105%);

}

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

.section-title{

margin-bottom:30px;

}

.section-title h2{

font-size:48px;
font-weight:800;
line-height:1.3;
margin-bottom:20px;

}

.section-title span{

display:inline-block;
font-size:15px;
font-weight:700;
letter-spacing:2px;
color:#0d6efd;
margin-bottom:15px;

}

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

.hero-buttons{

display:flex;
flex-wrap:wrap;
gap:18px;

}

.hero-buttons .btn{

padding:15px 36px;
border-radius:50px;
font-weight:600;
transition:.35s;

}

.hero-buttons .btn:hover{

transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,.15);

}

.btn-warning{

background:#ffb703;
border:none;

}

.btn-outline-light{

border:2px solid #fff;

}

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

.story-card,
.about-image img,
.about-intro img,
.mission-section img,
.vision-section img{

animation:fadeUp .9s ease;

}

@keyframes floatImage{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.about-image img{

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

}

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

@media(max-width:992px){

.about-content{

text-align:center;

}

.about-content p{

margin:auto auto 20px;

}

.hero-buttons{

justify-content:center;

}

.about-content h1{

font-size:48px;

}

.section-title h2{

font-size:38px;

}

.about-image{

margin-top:50px;

}

}

@media(max-width:768px){

.about-hero{

padding:130px 0 80px;

}

.about-content h1{

font-size:38px;

}

.section-title h2{

font-size:32px;

}

.story-card{

margin-bottom:25px;

}

}

@media(max-width:576px){

.about-content h1{

font-size:30px;

}

.about-content p{

font-size:16px;

}

.hero-buttons .btn{

width:100%;

}

.section-title h2{

font-size:28px;

}

.story-icon{

width:75px;
height:75px;
font-size:28px;

}

}



/*=====================================================
        ABOUT PAGE CSS - PART 3 (FINAL)
=====================================================*/

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

.why-choose{

padding:100px 0;
background:#ffffff;

}

.choose-card{

background:#fff;
padding:40px 30px;
border-radius:25px;
text-align:center;
height:100%;
transition:.4s;
box-shadow:0 12px 40px rgba(0,0,0,.08);
position:relative;
overflow:hidden;

}

.choose-card::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:#0d6efd;
transform:scaleX(0);
transition:.4s;

}

.choose-card:hover::before{

transform:scaleX(1);

}

.choose-card:hover{

transform:translateY(-15px);
box-shadow:0 20px 55px rgba(0,0,0,.18);

}

.choose-card i{

font-size:48px;
color:#0d6efd;
margin-bottom:20px;
transition:.4s;

}

.choose-card:hover i{

transform:rotate(360deg);
color:#ffb703;

}

.choose-card h4{

font-weight:700;
margin-bottom:15px;

}

.choose-card p{

color:#666;
line-height:1.8;

}

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

.counter-section{

padding:90px 0;
background:linear-gradient(135deg,#0d6efd,#0047b3);
color:#fff;

}

.counter-box{

text-align:center;
padding:30px;

}

.counter-box h2{

font-size:52px;
font-weight:800;

}

.counter-box p{

margin-top:10px;
font-size:18px;

}

/*=========================
VALUES
=========================*/

.values{

padding:100px 0;
background:#f8f9fa;

}

.value-box{

background:#fff;
padding:35px;
border-radius:20px;
transition:.4s;
height:100%;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.value-box:hover{

transform:translateY(-12px);

}

.value-box h4{

font-weight:700;
margin-bottom:15px;

}

.value-box p{

color:#666;
line-height:1.8;

}

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

.about-cta{

padding:120px 0;
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("assets/images/cta-bg.jpg") center/cover;
text-align:center;
color:#fff;

}

.about-cta h2{

font-size:52px;
font-weight:800;
margin-bottom:20px;

}

.about-cta p{

max-width:700px;
margin:auto;
font-size:18px;
line-height:1.8;
margin-bottom:35px;

}

.about-cta .btn{

padding:15px 40px;
border-radius:50px;
font-weight:600;
transition:.35s;

}

.about-cta .btn:hover{

transform:translateY(-6px);

}

/*=========================
FLOATING EFFECT
=========================*/

.story-card,
.choose-card,
.value-box{

animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#0d6efd;
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

/*=========================
TEXT SELECTION
=========================*/

::selection{

background:#0d6efd;
color:#fff;

}

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

@media(max-width:992px){

.counter-box{

margin-bottom:30px;

}

.about-cta h2{

font-size:40px;

}

}

@media(max-width:768px){

.about-cta{

padding:80px 20px;

}

.about-cta h2{

font-size:32px;

}

.counter-box h2{

font-size:40px;

}

}

@media(max-width:576px){

.about-cta h2{

font-size:28px;

}

.about-cta p{

font-size:16px;

}

.counter-box h2{

font-size:34px;

}

.choose-card,
.story-card,
.value-box{

padding:25px;

}

}




/*====================================================
        SERVICES PAGE CSS - PART 1
====================================================*/

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

.service-hero{

position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
padding:140px 0 100px;

background:
linear-gradient(rgba(0,0,0,.65),
rgba(0,0,0,.65)),
url("assets/images/services-banner.jpg");

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

}

.service-overlay{

position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:linear-gradient(
135deg,
rgba(13,110,253,.18),
rgba(255,183,3,.12)
);

}

.hero-content{

position:relative;
z-index:5;

}

.hero-badge{

display:inline-block;
padding:10px 24px;
border-radius:50px;
background:rgba(255,255,255,.15);
backdrop-filter:blur(12px);
color:#fff;
font-weight:600;
letter-spacing:1px;
margin-bottom:25px;

}

.service-hero h1{

font-size:65px;
font-weight:800;
color:#fff;
line-height:1.2;
margin-bottom:25px;

}

.service-hero p{

font-size:18px;
color:#eee;
line-height:1.9;
max-width:650px;

}

.hero-buttons{

margin-top:35px;

}

.hero-buttons .btn{

padding:15px 35px;
border-radius:50px;
font-weight:600;
transition:.35s;

}

.hero-buttons .btn:hover{

transform:translateY(-8px);
box-shadow:0 18px 35px rgba(0,0,0,.25);

}

.hero-image{

position:relative;
text-align:center;


}

.hero-image img{

max-width:100%;
animation:floatImage 5s ease-in-out infinite;
filter:drop-shadow(0 25px 35px rgba(0,0,0,.25));

}

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*============ INTRO SECTION ============*/

.service-intro{

padding:100px 0;
background:#fff;

}

.service-intro img{

border-radius:25px;
transition:.45s;
box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.service-intro img:hover{

transform:scale(1.05);

}

.section-subtitle{

display:inline-block;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:#0d6efd;
margin-bottom:15px;

}

.section-title{

font-size:48px;
font-weight:800;
line-height:1.3;
margin-bottom:25px;
color:#111;

}

.section-desc{

font-size:17px;
line-height:1.8;
color:#666;
max-width:800px;
margin:auto;

}

.service-intro p{

font-size:17px;
line-height:1.9;
color:#666;

}

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

.services-section{

padding:100px 0;
background:#f8f9fa;

}

.service-card{

background:#fff;
padding:40px 30px;
border-radius:25px;
text-align:center;
height:100%;
transition:.4s;
overflow:hidden;
position:relative;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.service-card::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:#0d6efd;
transform:scaleX(0);
transition:.4s;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-card:hover{

transform:translateY(-15px);
box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.service-icon{

width:90px;
height:90px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#0d6efd;
color:#fff;
font-size:36px;
margin-bottom:25px;
transition:.5s;

}

.service-card:hover .service-icon{

background:#ffb703;
transform:rotate(360deg);

}

.service-card h4{

font-size:26px;
font-weight:700;
margin-bottom:15px;

}

.service-card p{

color:#666;
line-height:1.8;

}

.service-card a{

display:inline-block;
margin-top:15px;
text-decoration:none;
font-weight:600;
transition:.3s;

}

.service-card a:hover{

letter-spacing:1px;

}




/*====================================================
        SERVICES PAGE CSS - PART 2
====================================================*/

/*==============================
BUSINESS SERVICES
==============================*/

.business-services{

padding:100px 0;
background:#ffffff;
position:relative;
overflow:hidden;

}

.business-services::before{

content:"";
position:absolute;
width:300px;
height:300px;
background:rgba(13,110,253,.05);
border-radius:50%;
left:-120px;
top:-120px;

}

.business-services img{

width:100%;
border-radius:25px;
transition:.45s;
box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.business-services img:hover{

transform:scale(1.05);

}

.mini-service{

background:#fff;
padding:25px;
border-radius:20px;
height:100%;
transition:.35s;
box-shadow:0 12px 35px rgba(0,0,0,.08);
border:1px solid rgba(0,0,0,.05);

}

.mini-service:hover{

transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.mini-service i{

width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#0d6efd;
color:#fff;
font-size:26px;
margin-bottom:20px;
transition:.45s;

}

.mini-service:hover i{

background:#ffb703;
transform:rotate(360deg);

}

.mini-service h5{

font-weight:700;
margin-bottom:12px;

}

.mini-service p{

margin:0;
line-height:1.8;
color:#666;

}

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

.why-services{

padding:100px 0;
background:#f8f9fa;

}

.feature-card{

background:#fff;
padding:35px 30px;
border-radius:25px;
text-align:center;
height:100%;
position:relative;
overflow:hidden;
transition:.4s;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.feature-card::after{

content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:5px;
background:#ffb703;
transform:scaleX(0);
transition:.35s;

}

.feature-card:hover::after{

transform:scaleX(1);

}

.feature-card:hover{

transform:translateY(-15px);
box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.feature-card i{

font-size:50px;
color:#0d6efd;
margin-bottom:20px;
transition:.45s;

}

.feature-card:hover i{

transform:scale(1.15) rotate(360deg);
color:#ffb703;

}

.feature-card h4{

font-size:24px;
font-weight:700;
margin-bottom:15px;

}

.feature-card p{

line-height:1.8;
color:#666;

}

/*==============================
SPECIAL SERVICES
==============================*/

.special-services{

padding:100px 0;
background:#fff;

}

.special-services .service-card{

border:1px solid rgba(0,0,0,.05);

}

/*==============================
ANIMATIONS
==============================*/

.service-card,
.feature-card,
.mini-service{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(40px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

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

@media(max-width:992px){

.service-hero{

padding:120px 0 80px;

}

.service-hero h1{

font-size:48px;

}

.section-title{

font-size:38px;

}

.hero-image{

margin-top:50px;

}

}

@media(max-width:768px){

.service-hero h1{

font-size:36px;

}

.hero-buttons .btn{

width:100%;
margin-bottom:15px;

}

.hero-buttons .btn:last-child{

margin-left:0 !important;

}

.section-title{

font-size:32px;

}

}

@media(max-width:576px){

.service-hero{

padding:110px 0 70px;

}

.hero-badge{

font-size:14px;

}

.service-hero h1{

font-size:30px;

}

.service-hero p{

font-size:16px;

}

.section-title{

font-size:28px;

}

.service-card,
.feature-card,
.mini-service{

padding:25px;

}

}





/*====================================================
        SERVICES PAGE CSS - PART 3 (FINAL)
====================================================*/

/*==============================
WORK PROCESS
==============================*/

.work-process{

padding:100px 0;
background:#ffffff;

}

.process-card{

position:relative;
background:#fff;
padding:40px 30px;
text-align:center;
border-radius:25px;
height:100%;
transition:.4s;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.process-card:hover{

transform:translateY(-15px);
box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.process-number{

position:absolute;
top:20px;
right:20px;
font-size:70px;
font-weight:800;
color:rgba(13,110,253,.08);

}

.process-card i{

font-size:55px;
color:#0d6efd;
margin-bottom:25px;
transition:.45s;

}

.process-card:hover i{

color:#ffb703;
transform:rotate(360deg);

}

.process-card h4{

font-weight:700;
margin-bottom:15px;

}

.process-card p{

color:#666;
line-height:1.8;

}

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

.counter-section{

padding:90px 0;
background:linear-gradient(135deg,#0d6efd,#0046b8);
color:#fff;

}

.counter-box{

text-align:center;
padding:20px;

}

.counter-box h2{

font-size:55px;
font-weight:800;
margin-bottom:10px;

}

.counter-box p{

font-size:18px;
margin:0;

}

/*==============================
BENEFITS
==============================*/

.benefits-section{

padding:100px 0;
background:#ffffff;

}

.benefit-list{

padding:0;
margin-top:30px;

}

.benefit-list li{

list-style:none;
padding:15px 0;
font-size:18px;
display:flex;
align-items:center;
transition:.3s;

}

.benefit-list li:hover{

padding-left:12px;
color:#0d6efd;

}

.benefit-list i{

color:#198754;
font-size:22px;
margin-right:15px;

}

/*==============================
TESTIMONIALS
==============================*/

.testimonial-section{

padding:100px 0;
background:#f8f9fa;

}

.testimonial-card{

background:#fff;
padding:35px;
border-radius:25px;
height:100%;
transition:.4s;
box-shadow:0 15px 40px rgba(0,0,0,.08);
position:relative;

}

.testimonial-card:hover{

transform:translateY(-12px);

}

.testimonial-card::before{

content:"★★★★★";
display:block;
color:#ffb703;
font-size:22px;
margin-bottom:20px;

}

.testimonial-card p{

line-height:1.9;
color:#666;

}

.testimonial-card h5{

margin-top:25px;
font-weight:700;

}

.testimonial-card span{

color:#0d6efd;
font-size:15px;

}

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

.service-cta{

padding:120px 0;
text-align:center;
background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("assets/images/service-cta.jpg");

background-size:cover;
background-position:center;
color:#fff;

}

.service-cta h2{

font-size:52px;
font-weight:800;
margin-bottom:20px;

}

.service-cta p{

max-width:760px;
margin:auto;
font-size:18px;
line-height:1.9;
margin-bottom:35px;

}

.service-cta .btn{

padding:15px 38px;
border-radius:50px;
transition:.35s;

}

.service-cta .btn:hover{

transform:translateY(-6px);

}

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

.faq-section{

padding:100px 0;
background:#ffffff;

}

.accordion-item{

border:none;
margin-bottom:20px;
border-radius:18px !important;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.accordion-button{

padding:22px;
font-weight:600;
font-size:18px;

}

.accordion-button:not(.collapsed){

background:#0d6efd;
color:#fff;

}

.accordion-body{

line-height:1.9;
color:#666;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#0d6efd;
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

/*==============================
TEXT SELECTION
==============================*/

::selection{

background:#0d6efd;
color:#fff;

}

/*==============================
FINAL RESPONSIVE
==============================*/

@media(max-width:992px){

.service-cta h2{

font-size:40px;

}

.counter-box{

margin-bottom:30px;

}

}

@media(max-width:768px){

.process-number{

font-size:50px;

}

.counter-box h2{

font-size:42px;

}

.service-cta{

padding:90px 20px;

}

.service-cta h2{

font-size:34px;

}

}

@media(max-width:576px){

.service-cta h2{

font-size:28px;

}

.service-cta p{

font-size:16px;

}

.counter-box h2{

font-size:34px;

}

.process-card,
.testimonial-card{

padding:25px;

}

.accordion-button{

font-size:16px;

}

}



/*====================================================
        CONTACT PAGE CSS - PART 1
====================================================*/

/*==============================
CONTACT HERO
==============================*/

.contact-hero{

    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;

    background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("assets/images/con1.jpg");

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

    overflow:hidden;

}

.hero-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,
rgba(13,110,253,.18),
rgba(255,183,3,.12));

}

.contact-hero .container{

position:relative;
z-index:2;

}

.hero-tag{

display:inline-block;
padding:12px 24px;
background:rgba(255,255,255,.15);
backdrop-filter:blur(15px);
border-radius:50px;
color:#fff;
font-size:15px;
font-weight:600;
margin-bottom:25px;
letter-spacing:.5px;

}

.contact-hero h1{

font-size:64px;
font-weight:800;
color:#fff;
line-height:1.15;
margin-bottom:25px;

}

.contact-hero p{

max-width:720px;
font-size:19px;
line-height:1.9;
color:#f5f5f5;
margin-bottom:40px;

}

.hero-buttons .btn{

padding:15px 36px;
border-radius:50px;
font-weight:600;
transition:.4s;

}

.hero-buttons .btn:hover{

transform:translateY(-6px);
box-shadow:0 20px 45px rgba(0,0,0,.25);

}

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

.section-subtitle{

display:inline-block;
color:#0d6efd;
font-size:15px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:12px;

}

.section-title{

font-size:48px;
font-weight:800;
line-height:1.2;
margin-bottom:20px;
color:#111;

}

.section-desc{

max-width:760px;
margin:auto;
font-size:17px;
line-height:1.9;
color:#666;

}

/*==============================
CONTACT INFO CARDS
==============================*/

.contact-info-section{

padding:100px 0;
background:#fff;

}

.contact-card{

background:#fff;
padding:40px 30px;
border-radius:24px;
text-align:center;
height:100%;
transition:.4s;
box-shadow:0 15px 40px rgba(0,0,0,.08);
border:1px solid rgba(0,0,0,.05);

}

.contact-card:hover{

transform:translateY(-12px);
box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.contact-icon{

width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#0d6efd;
color:#fff;
font-size:30px;
transition:.45s;

}

.contact-card:hover .contact-icon{

background:#ffb703;
transform:rotate(360deg);

}

.contact-card h4{

font-size:24px;
font-weight:700;
margin-bottom:15px;

}

.contact-card p{

color:#666;
line-height:1.8;
min-height:55px;

}

.contact-card a{

display:inline-block;
margin-top:15px;
text-decoration:none;
font-weight:600;
color:#0d6efd;
transition:.3s;

}

.contact-card a:hover{

color:#ffb703;

}

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

.contact-features{

padding:100px 0;

}

.contact-features img{

border-radius:25px;
transition:.45s;
box-shadow:0 20px 55px rgba(0,0,0,.15);

}

.contact-features img:hover{

transform:scale(1.03);

}

.mini-feature{

background:#fff;
padding:22px;
text-align:center;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
height:100%;

}

.mini-feature:hover{

transform:translateY(-8px);

}

.mini-feature i{

font-size:36px;
color:#0d6efd;
margin-bottom:15px;
transition:.4s;

}

.mini-feature:hover i{

color:#ffb703;
transform:rotate(360deg);

}

.mini-feature h5{

font-size:18px;
font-weight:700;
margin:0;

}




/*====================================================
        CONTACT PAGE CSS - PART 2
====================================================*/

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

.contact-form-section{

padding:100px 0;
background:#f8f9fa;

}

.contact-form-box{

background:#ffffff;
padding:45px;
border-radius:25px;
box-shadow:0 20px 60px rgba(0,0,0,.10);
transition:.4s;
position:relative;
overflow:hidden;

}

.contact-form-box:hover{

transform:translateY(-8px);
box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.contact-form-box::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#0d6efd,#ffb703);

}

.contact-form-box label{

display:block;
font-weight:600;
margin-bottom:10px;
color:#222;

}

.contact-form-box .form-control{

height:56px;
border-radius:14px;
border:1px solid #dcdcdc;
padding:0 18px;
font-size:15px;
transition:.35s;
box-shadow:none;

}

.contact-form-box textarea.form-control{

height:170px;
padding:18px;
resize:none;

}

.contact-form-box .form-control:focus{

border-color:#0d6efd;
box-shadow:0 0 0 4px rgba(13,110,253,.15);

}

.contact-form-box button{

height:58px;
border:none;
border-radius:50px;
font-size:17px;
font-weight:700;
transition:.35s;

}

.contact-form-box button:hover{

transform:translateY(-5px);
box-shadow:0 18px 40px rgba(0,0,0,.18);

}

/*==============================
LEFT CONTACT LIST
==============================*/

.contact-list{

margin-top:35px;

}

.contact-list-item{

display:flex;
align-items:center;
margin-bottom:18px;
font-size:17px;
font-weight:500;

}

.contact-list-item i{

color:#198754;
font-size:20px;
margin-right:15px;

}

/*==============================
ALERTS
==============================*/

.alert{

border:none;
border-radius:14px;
padding:18px 22px;
font-size:15px;
margin-bottom:30px;

}

.alert-success{

background:#d1f7dd;
color:#146c43;

}

.alert-danger{

background:#ffe0e3;
color:#b02a37;

}

/*==============================
QUICK CONTACT STRIP
==============================*/

.quick-contact{

background:linear-gradient(135deg,#0d6efd,#0047b3);
color:#fff;

}

.quick-contact h5{

font-weight:700;
margin-bottom:10px;

}

.quick-contact h5 i{

margin-right:8px;
color:#ffb703;

}

.quick-contact p{

margin:0;
font-size:16px;

}




/*====================================================
        CONTACT PAGE CSS - PART 3
====================================================*/

/*==============================
OFFICE SECTION
==============================*/

.office-section{

padding:100px 0;
background:#ffffff;

}

.office-info{

margin-top:35px;

}

.office-item{

display:flex;
align-items:flex-start;
margin-bottom:30px;
padding:25px;
background:#fff;
border-radius:18px;
transition:.35s;
box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.office-item:hover{

transform:translateY(-8px);
box-shadow:0 22px 50px rgba(0,0,0,.15);

}

.office-item i{

width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
background:#0d6efd;
color:#fff;
font-size:28px;
border-radius:50%;
margin-right:20px;
transition:.4s;

}

.office-item:hover i{

background:#ffb703;
transform:rotate(360deg);

}

.office-item h5{

font-size:22px;
font-weight:700;
margin-bottom:8px;

}

.office-item p{

margin:0;
color:#666;
line-height:1.8;

}

/*==============================
BUSINESS HOURS
==============================*/

.business-hours{

background:#fff;
padding:45px;
border-radius:25px;
box-shadow:0 20px 55px rgba(0,0,0,.08);

}

.business-hours h3{

font-size:32px;
font-weight:800;
margin-bottom:30px;

}

.business-hours ul{

padding:0;
margin:0;

}

.business-hours li{

list-style:none;
display:flex;
justify-content:space-between;
padding:18px 0;
border-bottom:1px solid #ececec;
font-size:17px;

}

.business-hours li:last-child{

border-bottom:none;

}

.business-hours strong{

color:#0d6efd;

}

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

.map-section{

overflow:hidden;

}

.map-section iframe{

display:block;
width:100%;
height:500px;
border:none;
filter:grayscale(10%);
transition:.4s;

}

.map-section iframe:hover{

filter:grayscale(0);

}

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

.faq-section{

padding:100px 0;
background:#f8f9fa;

}

.accordion-item{

border:none;
border-radius:18px !important;
margin-bottom:20px;
overflow:hidden;
box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.accordion-button{

padding:22px;
font-size:18px;
font-weight:600;
box-shadow:none;

}

.accordion-button:not(.collapsed){

background:#0d6efd;
color:#fff;

}

.accordion-button:focus{

box-shadow:none;

}

.accordion-body{

padding:22px;
line-height:1.9;
color:#666;

}

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

.contact-cta{

padding:110px 0;
text-align:center;
background:
linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
url("assets/images/contact-cta.jpg");

background-size:cover;
background-position:center;
color:#fff;

}

.contact-cta h2{

font-size:52px;
font-weight:800;
margin-bottom:20px;

}

.contact-cta p{

max-width:760px;
margin:auto;
font-size:18px;
line-height:1.9;
margin-bottom:35px;

}

.contact-cta .btn{

padding:15px 40px;
border-radius:50px;
font-weight:700;
transition:.35s;

}

.contact-cta .btn:hover{

transform:translateY(-6px);
box-shadow:0 20px 45px rgba(0,0,0,.25);

}





/*====================================================
        CONTACT PAGE CSS - PART 4 (FINAL)
====================================================*/

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

.footer-section{

background:#0f172a;
padding:90px 0 30px;
color:#fff;

}

.footer-logo{

display:flex;
align-items:center;
text-decoration:none;
color:#fff;
font-size:30px;
font-weight:800;
margin-bottom:25px;

}

.footer-logo:hover{

color:#fff;

}

.footer-logo-img{

width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
margin-right:15px;
transition:.45s;
border:4px solid rgba(255,255,255,.15);

}

.footer-logo-img:hover{

transform:scale(1.18) rotate(8deg);
box-shadow:0 20px 40px rgba(255,183,3,.45);
border-color:#ffb703;

}

.footer-text{

line-height:1.9;
color:#d7d7d7;
margin-bottom:25px;

}

.footer-section h4{

font-size:24px;
font-weight:700;
margin-bottom:25px;

}

.footer-links,
.footer-contact{

padding:0;
margin:0;

}

.footer-links li,
.footer-contact li{

list-style:none;
margin-bottom:16px;

}

.footer-links li a{

color:#d7d7d7;
text-decoration:none;
transition:.35s;

}

.footer-links li a:hover{

padding-left:10px;
color:#ffb703;

}

.footer-contact i{

width:28px;
color:#ffb703;
margin-right:10px;

}

.footer-social{

display:flex;
gap:12px;
margin-top:20px;

}

.footer-social a{

width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
font-size:18px;
transition:.35s;

}

.footer-social a:hover{

background:#ffb703;
color:#111;
transform:translateY(-6px) rotate(360deg);

}

.footer-bottom{

padding-top:25px;
text-align:center;

}

.footer-bottom p{

margin:0;
color:#cfcfcf;

}

/*==============================
SMOOTH SCROLL
==============================*/

html{

scroll-behavior:smooth;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#0d6efd;
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#ffb703;

}

::-webkit-scrollbar-track{

background:#ececec;

}

/*==============================
TEXT SELECTION
==============================*/

::selection{

background:#0d6efd;
color:#fff;

}

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

@media(max-width:992px){

.contact-hero{

padding:150px 0 90px;

}

.contact-hero h1{

font-size:48px;

}

.section-title{

font-size:38px;

}

.business-hours{

margin-top:40px;

}

.contact-cta h2{

font-size:40px;

}

}

@media(max-width:768px){

.contact-hero{

padding:130px 0 80px;

text-align:center;

}

.contact-hero h1{

font-size:38px;

}

.contact-hero p{

font-size:17px;

}

.hero-buttons .btn{

width:100%;
margin-bottom:15px;

}

.hero-buttons .btn:last-child{

margin-left:0 !important;

}

.section-title{

font-size:32px;

}

.contact-form-box{

padding:30px;

}

.footer-logo{

justify-content:center;

}

.footer-social{

justify-content:center;

}

.footer-section{

text-align:center;

}

.business-hours{

padding:30px;

}

}

@media(max-width:576px){

.contact-hero h1{

font-size:30px;

}

.section-title{

font-size:28px;

}

.contact-card,
.office-item,
.mini-feature{

padding:22px;

}

.contact-form-box{

padding:22px;

}

.business-hours h3{

font-size:26px;

}

.contact-cta{

padding:80px 20px;

}

.contact-cta h2{

font-size:28px;

}

.contact-cta p{

font-size:16px;

}

.footer-logo-img{

width:60px;
height:60px;

}

}






/* ==========================================
   TRAVEL ENQUIRY FORM
========================================== */

.contact-form-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #222;
}

.contact-form-box .form-control,
.contact-form-box select {
    width: 100%;
    min-height: 52px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 15px;
    background: #fff;
    transition: all 0.3s ease;
}

.contact-form-box textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

.contact-form-box .form-control:focus,
.contact-form-box select:focus {
    border-color: #f5b400;
    box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.12);
    outline: none;
}

#total_travellers {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.contact-form-box input[type="date"] {
    cursor: pointer;
}

.contact-form-box select {
    cursor: pointer;
}


/* Mobile */

@media (max-width: 767px) {

    .contact-form-box {
        padding: 20px;
    }

    .contact-form-box .form-control,
    .contact-form-box select {
        min-height: 50px;
    }

}