/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
 font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-style: normal;
    background: none;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
        header { width: 100%;  margin-bottom: 50PX; 
         background: url(images/shades.png) left bottom no-repeat, url(images/banner-img.png) left top no-repeat;
        }

 .aboutus { width: 100%;  margin-bottom: 50PX; 
         background:url(images/shades.png) left bottom no-repeat, url(images/aboutus.png) left top no-repeat;  background-size:cover;
        }
        .navigation { background: #fff; width: 100%; padding: 15px 0;}
        .navigation .container { display: flex; justify-content: space-between; gap:20px;}
        .navigation .container .left-nav  { display: flex; gap:30px; align-items: center;}
        .navigation .container .left-nav .logo { margin-right: 50px;}
        .navigation .container .left-nav a { color: #000; text-decoration: none; font-size: 16px;}
.navigation .container .left-nav .active { color: #2A2F85; font-weight: bold}
 .navigation .container .left-nav .navlinks { display: flex; gap: 30px; align-items: center;}
        .navigation .container .book a { background: #2A2F85; padding: 10px 20px;  border-radius: 10px; display: flex; align-items: center; color: #fff; text-decoration: none; font-weight: bold; font-size: 20px;}
.watsap {
    background: #32d851;
    z-index: 1;
    border-radius: 30px;
    border: 1px solid #ffffff7d ! Important;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.watsap a {
    display: flex;
    align-items: center;
    padding: 0px 16px;
    color: #fff;
    height: 60px;
}
.navigation .container .book a img { width: 25px; margin-right: 10px;}
        .punchline { padding: 100px 0; width: 500px;}
        .punchline h1 { color: #fff; font-size: 32px;}
        .punchline p { padding: 15px 0}
        .punchline .btn { background: #2A2F85; width: 250px; border-radius: 10px; padding: 10px; text-align: center; color: #fff}
        .punchline .btn a { color: #fff; text-decoration: none;}
        
        .container { width: 1270px; margin: 0 auto}
        .heading {font-size: 22px; line-height: 30px; color: #000; display: flex; justify-content: center; width: 100%}
        .heading span { border-bottom: 2px double #EFB142; display: block; padding-left: 5px; color: #5E67FF;}
        .subhead { font-size: 16px; color: #181B44; width: 100%; text-align: center; padding: 10px 0}
        .acheivebox { display: flex; justify-content: space-between; padding-top: 50px;}
        .acheivebox .box {width: 280px; background-size: 100%; height: 280px; background-position: left top; background-repeat: no-repeat; color: #000;}
        .acheivebox .box h3 { padding: 15px 15px 0px 15px; font-size: 18px; }
        .acheivebox .box p { padding: 5px 15px 15px 15px; font-size: 16px; width: 60%}
        .whychoose { background: url(images/Union.png) center top no-repeat; width: 100%; background-size: cover; margin-top: 50px;}
        .why-content { display: flex; justify-content: space-between; align-items: center; padding: 140px 0}
        .why-content .content { color: #fff;}
        .why-content .content .heading { color: #fff; justify-content: flex-start}
        .why-content .content .heading span {color: ##EFB142}
        .why-content .content p { padding: 20px 0}
        .why-content .content  ul { padding: 0; margin: 0}
        .why-content .content ul li { display: flex; justify-content: flex-start; list-style-type: none; align-items: center; margin-bottom: 40px;}
        .why-content .content ul li .circle { width: 50px; height: 50px; background: #fff; border-radius: 50%; margin-right: 30px;}
        .why-content .content ul li p { padding: 0; margin: 0}
        .why-content .why-img { width: 40%;}
        .vender { padding-top: 50px;}
        .vender .vernderslogo { display: flex; justify-content: center; gap:20px; padding: 50px 0; flex-wrap: wrap}
.vender .vernderslogo a { width: 250px;}
        
        .quotes {  border-radius: 20px; padding: 20px;}
        
           .swiper-carousel .swiper-slide:nth-child(odd) { background:#fff3df;  border:1px solid #fff; }
        .swiper-carousel .swiper-slide:nth-child(even) { background:#f1f2ff;;  border:1px solid #fff; }
        .swiper-carousel .swiper-slide { height: 300px;}
        
        
        .quotes p { font-size: 14px; color: #333; padding: 25px 0}
        .quotes .quotsinfo { display: flex; justify-content: flex-start; gap: 20px; color: #000}
        .quotes .quotsinfo img { width: 60px; height: 60px;}
        .quotes .quotsinfo div p { padding: 0}
        .swiper-carousel .swiper-slide { background: none; margin-top: 50px;}
         .rating {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
        }
        .rating input {
            display: none;
        }
        .rating label {
            font-size: 2rem;
            color: #333;
            cursor: pointer;
        }
        .rating input:checked ~ label,
        .rating label:hover,
        .rating label:hover ~ label {
            color: gold;
        }
        
         .quote-icon {
            font-size: 40px;
            font-weight: bold;
            color: #333;
            position: relative;
            display: inline-block;
            padding: 10px 20px;
             
        }

        .quote-icon::before {
            content: "“";
            font-size: 50px;
            position: absolute;
            left: 0;
            top: 0;
            color: #888;
        }
        .rider { background: url(images/riders_bg.jpg) center top no-repeat; padding: 204px 0 50px; width: 100%; background-size: cover;}
        .rider .rideinner { display: flex; justify-content: space-between; gap:200px;}
        .rider .rideinner .rid-form{width: 60%;} 
      
     
        .rider .rid-form p { padding: 30px 0; color: #fff;}
        .rider .rid-form .form {display: flex; justify-content: space-between; gap:20px; flex-wrap: wrap;}
        .rider .rid-form .form input { width: 48%; margin-bottom: 10px; border: none; padding: 10px; border-radius: 5px; color: #181B44; font-size: 16px; }
        .rider .rid-form .form input:focus { border: none; outline: none;}
        .rider .rid-form .form button { width: 100%; padding: 10px; text-align: center; font-size: 16px; font-weight: bold; background: #EFB142; border: none; border-radius: 10px; cursor: pointer}
        .rider .rideinner .rid-form .heading { justify-content: flex-start; color: #fff;}
        .rideimg { margin-bottom: -150px;}
        
        .footer { background: #2A2F85; width: 100%; padding: 50px 0; margin-top: 50px; }
        .ft-area { display: flex; justify-content: space-between; gap:25px; color: #fff; border-bottom: 1px solid #FFFFFF91;}
        .ft-area .ft_contact { width: 21%;}
        .ft-area .ft_contact .logo { padding-bottom: 20px;}
        .ft-area .ft-lable {     font-size: 12px; font-weight: 400; padding-bottom: 20px; }
        .ft-area .ft_contact .social { margin-bottom: 30px; display: flex; align-items: center;}
        .ft-area .ft_contact .social a { margin-right: 20px;}
        .ft-area .ft_links { display: flex; justify-content: space-between; width: 32%}
        .ft-area .ft_links ul {  padding: 0; margin: 0;  margin-right: 25px;}
        .ft-area .ft_links ul .ft-lable { padding-bottom: 20px;     font-size: 16px;   font-weight: bold;} 
        .ft-area .ft_links ul li { list-style-type: none; padding: 0 0 10px 0; font-size: 12px;}
        .ft-area .ft_links ul li a { color: #fff; text-decoration: none; padding-bottom: 5px;:hover }
        .ft-area .ft_links ul li a:hover { text-decoration: underline}
        .ft-area .ft-question { width: 21%;}
        .ft-area .ft-question .ft-lable { font-size: 16px; font-weight: bold}
        .ft-area .ft-question .mobile { font-size: 12px; padding-bottom: 0px;}
		.ft-area .ft-question .mobile a { color: #fff; text-decoration: none; padding-bottom: 5px;:hover }
		.ft-area .ft-question .mobile a:hover { color: #000; background: #EFB142}
        .ft-area .ft-question .signup { font-size: 22px; }
        .ft-area .ft-question .subscribe  {  padding: 10px 25px; border-radius: 35px; color: #1E0430; margin-top: 16px; border:2px solid #fff;}
        .ft-area .ft-question .subscribe a {    text-decoration: none;
    display: flex;
    font-weight: bold;
    color: #fff;
    font-size: 22px;}
.ft-area .ft-question .subscribe a:hover { color: #000; background: #EFB142}
.ft-area .ft-question .subscribe a img {     width: 33px;   margin-right: 10px;}
        .ft-area .ft-question .subscribe:hover { background: #EFB142; color: #000;}
        .footer > p {text-align: center; font-size: 12px; padding: 10px;}
        #app {position: relative;}
        .swiper-button-prev:after, .swiper-button-next:after { color: #000;}
.service { padding-bottom: 50px; }
        .service .box { border-right:1px solid #181B4433 }
.service .box:last-child{ border: none;}
.service .box p { width: 100%;     padding: 5px 15px 15px 0px;}
.buttons { background: #222; padding: 8px 10px; border-radius: 10px;     width: 50%;  text-align: center;}
.service .box h3 {padding: 15px 15px 0px 0px; min-height: 40px; }
.buttons a { color: #fff; text-decoration: none; font-size: 18px; line-height: 23px; font-weight: 700;}
.big-heading { color: #fff; font-size: 28px;}
.big-heading span { color: #EFB142}
.servi { display: flex; column-gap: 50px; justify-content: space-between}
.servi .chooseimg { width: 30%; background: url(images/half-circle.png) left center no-repeat;} 
.servi .choosecont { width: 70%; background: url(images/service-choose-bg.png) right center no-repeat; background-size: 100%; padding-left: 150px;}
.whyservice {    padding: 40px 0; }
.choosecont { padding: 50px 0;}
.choosecont p { padding-bottom: 30px;}
.choosecont .heading { text-align: justify;
    justify-content: flex-start;
    color: #fff;
    padding-bottom: 15px;}
.choosecont ul { padding: 0; margin: 0;}
.choosecont ul li { list-style: none; display: flex; padding-bottom: 20px}
.choosecont ul li img {width: 20px; height: 20px;}
.choosecont ul li a { color: #fff; font-size: 16px;  padding-left: 15px; text-decoration: none;}
.aboutwraper { display: flex; justify-content: space-between; gap:50px; align-items: center}
.aboutwraper .aboutimage { width: 40%;}
.aboutwraper .aboutcontent { width: 60%;}
.aboutwraper .aboutcontent .heading { justify-content: flex-start;}
.aboutwraper .aboutcontent p { color: #181B44; font-size: 16px; padding: 15px 0;}

.acheved { background: #2A2F85; padding: 50px; width: 100%; border-radius: 100px 0 100px 0; margin-top: 50px;}
            .acheved .heading { color: #fff}
            .acheved .heading span { color:  #EFB142}
            .acheved .box { border-color: #fff; height: auto; color: #fff; text-align: center}
.acheved .box img { margin: 0 auto}
            .acheved .box h3 { min-height: auto;}

 .contactwraper { align-items: flex-start}
        .contactcon h3 { font-size: 40px; line-height: 60px; color: #000; font-weight: 500; padding-bottom: 30px;}
        .contactcon h3 span { color: #5E67FF}
        .contactcon p { font-size: 18px; line-height: 36px; color: #181B44CC}
        .contactcon p b {font-weight: 500}
        .contactcon .con_social { display: flex; gap:20px; padding-top: 10px}
        
        .aboutwraper .getintouch { width: 50%; background: #F1F2FF; padding: 25px; border-radius: 25px;}
        .contactwraper .contactcon { width: 50%;}
        
        .aboutwraper .getintouch .form {}
        .aboutwraper .getintouch .form lable { font-weight: 600; color: #4F4D5C; width: 100% ; font-size: 16px; padding-bottom: 5px; display: block}
        .aboutwraper .getintouch .form input { background: #fff; border: 1px solid #333;  width: 100% ; border-radius: 10px; padding: 10px; margin-bottom: 15px;}
        .aboutwraper .getintouch button { background: #181B44; color: #fff; padding: 10px 80px; border-radius: 10px; border: none; display: flex; justify-content: center;}
        .map { margin-top: 35px;}

.close, .hemberger { display: none;}

 .package { display: flex; justify-content: space-between; column-gap: 50px; padding: 50px; align-items: center;}
            .package > div { width: 50%; color: #000;} 
            
            .package .pkg-text .quote { font-size: 48px; line-height: 72px; color:#181B44 }
            .package .pkg-text .quote span { font-weight: bold; font-size: 65px;}
            .package .pkg-text p { font-size: 26px; line-height: 55px; color:#181B4499}
             .package .pkg-text .quotename { color: #445CC8}
          


@media screen and (max-width:1024px)  {
    .container { width: 100%; padding: 0 15px;}
    .rider {padding: 133px 0 50px;}
    .rider .rid-form p {padding: 16px 0;}
    .rider .rid-form .form input { width: 45%}
}

@media screen and (max-width:820px)  {
    .rider .rideinner .rid-form {width: 100%;}
    .acheivebox .box { width: 180px; height: 180px; }
    
    .acheivebox .box p {width: 90%; text-shadow:1px 1px 3px #fff}
    .rider .rideinner { gap:50px;}
    .navigation .container .left-nav { gap:20px;}
    .navigation .container .left-nav .logo {margin-right: 0; width: 100px;}
    .navigation .container .book {    font-size: 14px;
        padding: 0px 0px;
        text-align: center;
        width: 165px;}   
    .navigation .container .book a {padding: 10px 10px;font-size: 14px;}
    
    .package .pkg-text .quote {
    font-size: 28px;
    line-height: 32px;
    color: #181B44;}
    .package .pkg-text .quote span { font-size: 45px;}
    .service { flex-wrap: wrap;}
    .service .box {width: 50%; height: auto;     margin-bottom: 30px;}
    .service .box:nth-child(even) {border: none;}
    .servi .chooseimg { display: none;}
    .servi .choosecont { width: 100%; padding-left: 105px;}
    
    
}

@media screen and (max-width:819px)  {
    .navigation .container .left-nav .navlinks { display: block; position: absolute; background: #fff; z-index: 1;
        width: 100%; 
        top: 0;
        left: 0; padding: 50px 20px 20px 20px; height: 100vh; display: none;}

    .navigation .container .left-nav .navlinks  a { width: 100%; display: block; padding: 20px 0; border-bottom: 1px solid #ccc;}
    .close {         display: flex;
        position: absolute;
        z-index: 6;
        right: 20px;
        top: 20px;
        color: #000;
        border: 1px solid;
        width: 30px;
        height: 30px;
        text-align: center;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }
    
    .punchline {padding: 30px 0;}
    .acheivebox {    flex-wrap: wrap;}
    .acheivebox .box {width: 160px;  height: 180px;}
    .why-content .why-img { display: none}
    .why-content .content ul li div:last-child {flex-basis:calc(100% - 50px) }
    .rideimg { display: none;}
    .ft-area { flex-wrap: wrap; padding-bottom: 30px;}
    .ft-area .ft_contact { width: 100%;}
    .ft-area .ft_links { width: 100%; flex-wrap: wrap;}
    .ft-area .ft-question { width: 100%;}
    .navigation .container { align-items: center;}
    .open { display: block!Important;}
    .hemberger { display: block}
    .aboutwraper { align-items: flex-start;}

    .package .pkg-text .quote {
    font-size: 30px;
    line-height: 36px;
    color: #181B44;}
    .package .pkg-text .quote span {font-size: 38px;}
    .big-heading { justify-content: flex-start}
    .service .box { height: auto}
    .choosecont ul li { padding-bottom: 10px;}
}

@media screen and (max-width:600px)  {
    .aboutwraper {flex-wrap: wrap;}
    .aboutwraper .aboutimage {
    width: 100%;}
    .aboutwraper .aboutcontent {width: 100%;}
    .acheved { padding: 40px;}
    .acheved .heading { font-size: 16px;}
        .service .box {
        width: 50%;
        padding: 0 10px;
        margin-bottom: 31px;
    }
    .acheivebox .box:nth-child(even) {border: none;}
    .package { flex-wrap: wrap; padding: 40px 0;}
    .package > div {width: 100%;}
  
    .service { padding-bottom: 0}
    .service .box { width: 100%; border: none;}
    .servi .choosecont {        padding: 15px ; background-size: cover;}
    .heading { justify-content: flex-start;}
    .contactwraper .contactcon { width: 100%; order: 2}
    .contactcon h3 {font-size: 24px; line-height: 30px;}  
    .aboutwraper .getintouch { padding: 15px;}
    .aboutus { margin-bottom: 15px;} 
    header { margin-bottom: 20px;} 
    .acheivebox {padding-top: 20px;}
    .subhead { text-align: left;}
    .vender .vernderslogo { flex-wrap: wrap;}
    .vender .vernderslogo a { width: 45%;}
    .cleints {padding: 0 15px 40px}
    .service .box h3 { min-height: auto}
    .whyservice { padding: 40px 0 0;}
    
    
}