/*==================================

* Author        : "ThemeSine"

* Template Name : CarVilla  HTML Template

* Version       : 1.0

==================================== */



/*==================================

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

font-family: 'Rufina', serif;

==================================== */





/*=========== TABLE OF CONTENTS ===========

1.  General css (Reset code)

2.  Top-area

3.  Welcome-hero

4.  Model-search

5.  Service

6.  New-cars

7.  Featured-cars

8.  Client-say

9.  Brand

10. Blog

11. Contact

==========================================*/



/*-------------------------------------

		1.General css (Reset code)

--------------------------------------*/

*{

    padding: 0;

    margin: 0;

}



*{

	-webkit-box-sizing:border-box;

	-moz-box-sizing:border-box;

	-o-box-sizing:border-box;

	-ms-box-sizing:border-box;

	box-sizing:border-box;

}

body{

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

	font-size:16px;

	color:#818998;

    text-transform:initial;

    max-width:1920px;

    margin:0 auto;

	overflow-x:hidden;

}



a,a:hover,a:active,a:focus {

	display:inline-block;

	text-decoration:none;

	color: #ffffff;

	font-size:20px;

	padding:0;

    font-weight: 500;

    text-transform: capitalize;

}

h1,h2,h3,h4,h5,h6 { 

	margin: 0;

	color:#444a57;

    font-size: 20px;

    font-weight: 500;

    text-transform: capitalize;

}

p {

	margin: 0;

	color:#818998;

	font-size:16px;

    line-height: 1.8;

    text-transform: initial;

}

img{border:none;max-width:100%; height:auto;}

ul{

	padding: 0;

    margin: 0 auto;

    list-style: none;

}

ul li {

	list-style: none;

    display: inline-block;

	

}

select,input,textarea,button,.form-control{box-shadow:none;outline:0!important;}

button {background: transparent;border: 0;font-size: 16px;text-transform: capitalize;}



html,body{height: 100%;}



[placeholder]:focus::-webkit-input-placeholder {

  -webkit-transition: opacity 0.3s 0.3s ease; 

  -moz-transition: opacity 0.3s 0.3s ease; 

  -ms-transition: opacity 0.3s 0.3s ease; 

  -o-transition: opacity 0.3s 0.3s ease; 

  transition: opacity 0.3s 0.3s ease; 

  opacity: 0;

}

.owl-carousel {z-index: 0;}

/* section-header */

.section-header{

    position: relative;

    text-align: center;

}

.section-header h2 {

    position: relative;

    font-size: 36px;

    font-weight: 500;

    padding-bottom: 35px;

    margin-right: 500px; /* Desktop view alignment */

}

.section-header h3 {

    position: relative;

    font-size: 36px;

    font-weight: 500;

    padding-bottom: 35px;

    

}





/* Mobile View: Center the text */

@media (max-width: 768px) { 

    .section-header h2 {

        margin-right: 108px; /* Remove the right margin */

        text-align: center; /* Center align the text */

    }

}

.section-header h2:before {

    position: absolute;

    content: "";

    width: 80px;

    height: 2px;

    bottom: 0;

    left: 50%;

    margin-left: -42px;

    background: #4e4ffa;

}

.section-header p{color: #444a57;text-transform: capitalize;margin-bottom:10px;}

.section-header h2 span,.section-header p span{text-transform: lowercase;}



/* section-header */



/*=============Style css=========*/





/*-------------------------------------

        2. Top-area

--------------------------------------*/

/* Navbar Section */

/* Navbar container */



/*-------------------------------------

        3.  Welcome-hero

--------------------------------------*/
 /* Welcome Hero Section - Responsive with Opacity Control */
        

.welcome-hero {
    position: relative;
    background:url(../images/welcome-hero/carens.jpg)no-repeat;
     
    background-position: center;
    background-size: cover;
    z-index: 1;
    height: 800px;
 }

/* .welcome-hero:before {

    position: absolute;

    content: "";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(42,45,84,.60);

} */

.header-area{position: absolute;top:0;left:0;width: 100%;z-index: 99;}



/*.welcome-hero-txt*/

.welcome-hero-txt{text-align: center;padding:290px 0 372px;}

.welcome-hero-txt h2 {

    font-size: 42px;

    color: #fff;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 45px;

}

.welcome-hero-txt p {

    font-size: 18px;

    text-transform: initial;

    color: #fff;

    font-weight: 500;

    max-width: 735px;

    margin: 0 auto;

}

.welcome-btn {

    display: inline-block;

    width: 230px;

    height: 60px;

    background: #4e4ffa;

    color: #fff;

    border-radius: 3px;

    margin-top: 55px;

    -webkit-transition: .3s linear; 

    -moz-transition:.3s linear; 

    -ms-transition:.3s linear; 

    -o-transition:.3s linear;

    transition: .3s linear;

}

.welcome-btn:hover{

    background: #0102fa;

}

/*.welcome-hero-txt*/



/*-------------------------------------

        4. Model-Search

--------------------------------------*/

.model-search-content .col-sm-12 {padding: 0;}

.model-search-content {

    padding: 40px 0;

    background: #fff;

    box-shadow:0 10px 40px 0px rgba(38,40,64,.2);

    position: absolute;

    bottom: -150px;

    width: 100%;

    border-radius: 3px;

}



/*.single-model-search*/

.single-model-search{margin-bottom: 30px;}

.single-model-search:last-child {margin-bottom: 0;}



.single-model-search h2 {

    font-size: 16px;

    font-weight: 400;

    text-transform: capitalize;

    margin-bottom: 20px;

}

/*model-select-icon*/

.model-select-icon{

    position:relative;

}

.model-select-icon .form-control {

    outline: 0!important;

    box-shadow: none;

    border: 1px solid #f8f8f8;

    background: #f8f8f8;

    height: 60px;

}

.model-select-icon select {

    font-size: 16px;

    color: #888f9d;

    text-transform: capitalize;

}

.model-select-icon:after{

    position: absolute;

    content: "\f103";

    right: 0px;

    top: 0;

    font-size: 10px;

    color: #888f9d;

    background: #f8f8f8;

    height: 60px;

    line-height: 60px;

    width: 50px;

    text-align: center;

    font-family: "Flaticon";

    pointer-events: none;

    border: transparent;

}/*model-select-icon*/

.welcome-btn.model-search-btn {

    width: 160px;

    margin-top: 80px;

    margin-left: 53px;

}



/*.single-model-search*/



/*-------------------------------------

        5. Service 

--------------------------------------*/

.service { padding: 260px 0 87px;}



.single-service-item{

    text-align: center;

    padding:55px 30px 60px;

    border-radius: 3px;

    margin-bottom: 30px;

    border: 1px solid #dadfe9;

    -webkit-transition: .3s linear; 

    -moz-transition:.3s linear; 

    -ms-transition:.3s linear; 

    -o-transition:.3s linear;

    transition: .3s linear;

}



.single-service-icon {

    display: inline-block;

    color: #50616c;

}

.single-service-item h2 a {

    font-size:20px;

    margin: 35px 0 20px;

}

.single-service-item h2 a span {text-transform:  lowercase;}

.single-service-item p {padding-bottom: 35px;text-transform: initial;position: relative;}

.single-service-item p:before {

    position: absolute;

    content: "";

    width: 20px;

    height: 3px;

    background: #3030ea;

    bottom: 0;

    left: 50%;

    margin-left: -10px;

}



.single-service-icon [class^="flaticon-"]:before,.single-service-icon[class*=" flaticon-"]:before,.single-service-icon [class^="flaticon-"]:after,.single-service-icon [class*=" flaticon-"]:after {font-size:60px;}

.single-service-item:hover .single-service-icon [class^="flaticon-"]:before,.single-service-item:hover .single-service-icon [class*=" flaticon-"]:before,.single-service-item:hover .single-service-icon [class^="flaticon-"]:after,.single-service-item:hover .single-service-icon [class*=" flaticon-"]:after {color:#fff;}





.single-service-item:hover h2 a,.single-service-item:hover p{color: #fff;}

.single-service-item:hover  p:before {background: #fff;}

.single-service-item:hover{box-shadow: 0 12px 30px 0px rgba(0,1,193,.2);background: #4e4ffa;border: 1px solid #4e4ffa;}





/*-------------------------------------

        6. New-cars

--------------------------------------*/

.new-cars{

    background: #f8f9fb;

    padding:112px 0 120px;

}

.new-cars-content{padding-top:96px;}

/*.new-cars-txt*/

.new-cars-txt {margin-left: 29px;margin-bottom: 30px;}

.new-cars-txt h2 a {

    font-size:  30px;

    font-weight:  500;

    margin-bottom: 26px;

}

.new-cars-txt h2 a span {text-transform:  uppercase;}

.new-cars-para2 {margin-top: 30px;}

.welcome-btn.new-cars-btn {

    width: 176px;

    margin-top: 32px;

}

/*.new-cars-txt*/



/*.owl-dots */

.new-cars .owl-theme .owl-dots .owl-dot span {

    width: 8px;

    height: 8px;

    margin: 0px 4px;

    background: transparent;

    border: 1px solid #6a7781;

    border-radius: 50%;

}

.new-cars .owl-theme .owl-dots .owl-dot.active span,.new-cars .owl-theme .owl-dots .owl-dot:hover span {background: #6a7781;}

.new-cars .owl-theme .owl-nav.disabled+.owl-dots {margin-top: 62px;}

/*.owl-dots */



/*-------------------------------------

        7. Featured-cars

--------------------------------------*/

/* .featured-cars{

    padding:112px 0 120px;

} */

.featured-cars-content{padding-top:20px;}



/*.single-featured-cars*/

.featured-img-box {

    border: 1px solid #dadfe9;

}

.featured-cars-img {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 30px;

    height: 220px;

    border-bottom: 1px solid #dadfe9;

}

.featured-model-info{padding:12px 7px;}

.featured-model-info p {

    font-size: 12px;

    color: #8c92a0;

    text-transform: capitalize;

}

.featured-mi-span{display: inline-block;margin:0 10px;}

.featured-hp-span{display: inline-block;margin-right: 10px;}

.featured-cars-txt{margin:21px 0 47px;}

.featured-cars-txt h2 a{font-size: 16px;margin-bottom: 15px;}

.featured-cars-txt h2 a{color: #ff5722;}

.featured-cars-txt h2 a{font-weight: bold;}

.featured-cars-txt h2 a span{text-transform: uppercase;}

.featured-cars-txt h3{margin-bottom: 10px;}

.featured-cars-txt h3,.featured-cars-txt p{font-size: 13px;}



/*.single-featured-cars*/



/*-------------------------------------       

        8. Clients-say 

--------------------------------------*/

.clients-say{padding:115px 0 80px;background: #f8f9fb;}



/*single-testimonial-box */

.single-testimonial-box  {

    padding: 50px 30px 57px;

    text-align: center;

    border: 1px solid #dadfe9;

    overflow-x: hidden;

    -webkit-transition: .3s; 

    -moz-transition:.3s; 

    -ms-transition:.3s; 

    -o-transition:.3s;

    transition: .3s;

}



/*testimonial-description*/

.clients-say .testimonial-carousel .col-sm-3,

.clients-say .testimonial-carousel .col-xs-12{

    width:100%;

    height:auto;

}

/* testimonial-info */

.testimonial-img {

    margin-right: 5px;

    border-radius:50%;

    -webkit-transition: .3s; 

    -moz-transition:.3s; 

    -ms-transition:.3s; 

    -o-transition:.3s;

    transition: .3s;

}

.testimonial-person h2 a,.testimonial-person h4 {

    font-size: 16px;

    color: #5e6778;

    font-weight: 600;

}

.testimonial-person h4{

    margin-top: 10px;

}/* testimonial-info */





/* testimonial-comment */

.testimonial-comment p {

    font-size: 16px;

    color: #5e6778;

    margin-top: 30px;

    margin-bottom: 25px;

}/* testimonial-comment */





/*testimonial-description*/

.single-testimonial-box:hover h2 a,.single-testimonial-box:hover h4, .single-testimonial-box:hover p{color: #fff;}

.single-testimonial-box:hover{

    background: #4e4ffa;

    border: 1px solid #4e4ffa;

    box-shadow: 0 12px 30px 0px rgba(0,1,193,.2);

}



/*owl carousel*/

.clients-say .owl-carousel .owl-stage {

    position: relative;

    padding: 100px 0 40px;

}

.clients-say .owl-carousel .owl-item img {

    display: block;

    width: 70px;

    height: 70px;

    border-radius:50%;

    margin:0 auto;

}

/*owl carousel*/



/*-------------------------------------

        9. Brand

--------------------------------------*/

.brand{

    padding: 120px 0;

}

.brand-area {

    position:relative;

}

.brand-area .item {

    padding: 0 40px 0;

}



.brand .brand-area .owl-carousel .owl-item img {

    display: block;

    width: 100%;

    height:72px;

    border-radius:0;

}

/*-------------------------------------

        10. Blog

--------------------------------------*/



/*-------------------------------------

        12. Contact

--------------------------------------*/

.contact {

    background: #2a2d54;

}

.contact .footer-top .single-footer-widget {

    text-align: center; /* Center-align all content */

    margin-bottom: 20px; /* Add space between sections */

}



.contact .footer-logo a {

    font-size: 20px; /* Adjust the logo text size for smaller screens */

    color: #ffffff;

    text-decoration: none;

    font-weight: bold;

    display: block;

}

.single-footer-widget h2{

    color: #ffffff;

}

.contact .footer-contact p {

    margin: 5px 0; /* Adjust spacing between contact lines */

}



.contact .footer-newsletter p {

    margin-bottom: 15px; /* Add spacing below the newsletter text */

}



.contact .hm-foot-email .foot-email-box input {

    width: 100%; /* Ensure the input takes full width on smaller screens */

    margin-bottom: 10px; /* Add space below input */

}



.contact .footer-social {

    text-align: center; /* Center-align the social icons */

}



.contact .footer-social a {

    margin: 0 10px; /* Add spacing between icons */

    font-size: 18px; /* Adjust icon size */

}



.contact .footer-copyright p {

    text-align: center; /* Center-align the copyright text */

}



@media (max-width: 768px) {

    .contact .footer-top .row {

        flex-direction: column; /* Stack the footer sections on mobile */

    }



    .contact .footer-top .single-footer-widget {

        margin-bottom: 20px; /* Add spacing between stacked widgets */

    }



    .contact .footer-social a {

        display: inline-block;

        margin: 0 8px; /* Adjust spacing for smaller screens */

    }



    .contact .footer-copyright .row {

        flex-direction: column; /* Stack the copyright and social sections */

        text-align: center; /* Center-align both sections */

    }



    #scroll-Top .return-to-top {

        margin: 0 auto; /* Center-align the back-to-top icon */

    }

}



/*===============================

    Scroll Top

===============================*/

#scroll-Top  .return-to-top {

    position: fixed;

    right: 30px;

    bottom: 30px;

    display: none;

    width: 40px;

    line-height: 40px;

    height: 40px;

    text-align: center;

    font-size: 20px;

    cursor: pointer;

    color: #fff;

    background:#4e4ffa;

	border:1px solid #4e4ffa;

	border-radius:50%;

	-webkit-transition: .5s; 

	-moz-transition:.5s; 

	-ms-transition:.5s; 

	-o-transition:.5s;

    transition: .5s;

	z-index: 2;

}

#scroll-Top  .return-to-top:hover {

    background:#fff;

    color: #4e4ffa;

	border:1px solid #4e4ffa;

}



#scroll-Top  .return-to-top i{

    position:relative;

    bottom:0;



}



#scroll-Top  .return-to-top i{

    position: relative;

    animation-name: example;

    animation-direction: alternate;

    animation-iteration-count: infinite;

    animation-duration:1s;

}

@keyframes example {

    0%   {bottom:0px;}

    100%  {bottom:7px;}

}

/*========================Thank you=================



/* navbar */

.navbar-custom {

    background-color: yellow !important; /* Set the navbar background color */

    border: none; /* Remove the default border if needed */

}

/* Book now */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

    text-align: center;

}



.welcome-hero-txt {

    

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.welcome-hero-txt h2 {

    font-size: 2.5rem;

    color: #ffffff;

    margin-bottom: 15px;

}



.welcome-btn {

    background: #007bff;

    color: #fff;

    padding: 10px 20px;

    border: none;

    border-radius: 5px;

    font-weight: bold; 

    cursor: pointer;

    animation: bounce 2s infinite;

    transition: transform 0.3s ease, background 0.3s ease;

}



.welcome-btn:hover {

    background: #0056b3;

    transform: scale(1.1);

}



/* Bounce animation */

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-10px);

    }

    60% {

        transform: translateY(-5px);

    }

}



@media (max-width: 768px) {

    .welcome-hero-txt h2 {

        font-size: 2rem;

    }



    .welcome-btn {

        font-size: 0.9rem;

    }

}

/* aboutus */

/* General Reset */

body {

    margin: 0;

    padding: 0;

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

    line-height: 1.6;

}



/* Page Header */

.page-header-shape {

    background: #f4f4f4;

    height: 150px;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: -1;

}



.page-header-info {

    text-align: center;

    margin-top: 60px;

}



.page-header-info h4 {

    font-size: 18px;

    color: #777;

}



.page-header-info h2 {

    font-size: 32px;

    font-weight: bold;

    color: #333;

}



.page-header-info h2 span {

    color: #007bff;

}



/* About Section */

.about-section {

    padding: 60px 0;

}



.about-section .about-img1 {

    max-width: 100%;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.section-heading h4 {

    font-size: 20px;

    color: #777;

    margin-bottom: 10px;

}



.section-heading h2 {

    font-size: 28px;

    font-weight: bold;

    margin-bottom: 20px;

}



.section-heading p {

    color: #555;

    line-height: 1.8;

}



/* Testimonial Section */

.testimonial-section {

    background-color: #f9f9f9;

    padding: 60px 0;

}



.testimonial-carousel .testi-item {

    background: #fff;

    border-radius: 8px;

    padding: 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.testimonial-carousel .testi-item .quote-icon {

    font-size: 24px;

    color: #007bff;

}



.testimonial-carousel .testi-item .testi-author {

    display: flex;

    align-items: center;

    margin-top: 15px;

}



.testimonial-carousel .testi-item .testi-author .author-thumb img {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    margin-right: 10px;

}



.testimonial-carousel .testi-item .testi-author h3 {

    font-size: 18px;

    color: #333;

}



/* Features Section */

.feature-wrap ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.feature-wrap ul li {

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}



.feature-icon {

    font-size: 32px;

    color: #007bff;

    margin-right: 15px;

}



.feature-content h3 {

    font-size: 18px;

    margin-bottom: 5px;

}



.feature-content p {

    margin: 0;

    color: #555;

}



/* CTA Section */

.cta-section {

    background: #007bff;

    color: #fff;

    padding: 60px 0;

    position: relative;

}



.cta-men {

    position: absolute;

    bottom: 0;

    right: 0;

    background: url('cta-image.png') no-repeat;

    background-size: contain;

    height: 150px;

    width: 150px;

    z-index: 1;

}



.cta-content h2 {

    font-size: 32px;

    font-weight: bold;

}



.cta-content h2 span {

    color: #f9c74f;

}



.cta-call {

    display: flex;

    align-items: center;

    margin-top: 20px;

}



.cta-call i {

    font-size: 32px;

    margin-right: 15px;

}



.cta-call p {

    margin: 0;

    font-size: 18px;

}



.cta-call a {

    color: #f9c74f;

    text-decoration: none;

}

/* testi */

.testimonial-wrapper {

    /* Custom styles for the testimonial section wrapper */

    padding: 20px;

    border: 1px solid #ddd;

    border-radius: 8px;

    background-color: #fff;

}

/* service */

/* Uniform image styling */

.uniform-img {

     object-fit: cover;

     transition: transform 0.3s ease-in-out;

}



 



/* Card hover effect */

.card-hover {

    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    border: 2px solid #f4f4f4;

}



/* Hover effect for the card */

.card-hover:hover {

    transform: translateY(-10px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

    border-color: #007BFF;

}



/* Card title styling */

.card-title {

    font-weight: bold;

    color: #007BFF;

    transition: color 0.3s ease-in-out;

}



/* Card title hover effect */

.card-hover:hover .card-title {

    color: #0056b3;

}



/* Card text styling */

.card-text {

    color: #555;

}



/* Button hover effect */

.btn-warning {

    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;

}



.btn-warning:hover {

    background-color: #ffc107;

    transform: translateY(-3px);

}

@media (max-width: 768px) {

    header .container {

        flex-direction: column;

        align-items: center;

    }

    header a {

        margin-bottom: 20px;

    }

}

/* General Reset */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: Arial, sans-serif;

}



/* Header Styling */

.header {

    background: black;

  

    border-bottom: 1px solid #ddd;

}



.container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    max-width: 1200px;

    margin: 0 auto;

}



/* Logo Section */

.logo {

    display: flex;

    align-items: center;

    margin-right: auto;

    text-decoration: none;

    margin-left: -90px;

}



/* Image styling */

.logo img {

    max-height: 60px;  /* Initial size */

    width: auto;

}



/* Text styling */

.logo span {

    font-size: 24px;

    font-weight: bold;

    color: black;

    text-transform: uppercase;

}
 


/* Mobile view responsiveness */

@media (max-width: 768px) {

    .logo {

        flex-direction: column;  /* Stack logo image and text vertically */

        align-items: center;  /* Center align the content */

        margin-left: 60px;  /* Remove negative left margin */

        margin-bottom: 10px;  /* Add spacing for better visibility on mobile */

    }



    .logo img {

        max-height: 50px;  /* Reduce image size for mobile */

        margin-bottom: 8px;  /* Add spacing between the image and text */

    }



    .logo span {

        font-size: 20px;  /* Reduce font size for better fit on smaller screens */

    }

}



/* Contact Info Section */

.contact-info {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-start;

    align-items: center;

    color: white;

}



.contact-item {

    display: flex;

    align-items: center;

    margin-right: 20px;                 

    margin-bottom: 10px;

}



.contact-item i {

    color: white;

    font-size: 18px;

    margin-right: 8px;

    

}



.contact-item span {

    font-size: 16px;

} 

@media (max-width: 768px) {

     



    .contact-item i {

        margin-bottom: 8px; /* Add space below the icon */

    }



     

}

/* our car */

/* Centering the section header */

.section-header {

    display: flex;

    justify-content: center;  /* Horizontally center the content */

    align-items: center;      /* Vertically center the content */

    text-align: center;       /* Ensure the text itself is centered */

}



.section-header h3 {

    text-transform: uppercase;

    font-size: 2rem;

    margin: 0;

    font-size: 24px;          /* Optional: adjust font size */

    font-weight: bold;

    color: #ff5722;             /* Optional: adjust text color */

    

}

/* book taxi */

body {

    background-color: #212121;

    color: #ffffff;

    font-family: Arial, sans-serif;

}

.card {

    background-color: #2c2c2c;

    border: none;

    padding: 20px;

    border-radius: 10px;

}

.logo {

    font-size: 24px;

    font-weight: bold;

    color: #ffc107;

}

.highlight {

    color: #ffc107;

    font-weight: bold;

}

.contact-icons a {

    color: #ffffff;

    font-size: 24px;

    margin-right: 10px;

    transition: color 0.3s;

}

.contact-icons a:hover {

    color: #25d366;

}

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

        }

        .service {

            padding: 20px;

            background-color: #f4f4f4;

        }

        .card {

            border: 2px solid black;

            background-color: white;

            margin-bottom: 20px;

        }

        .card img {

            max-height: 200px;

            object-fit: cover;

        }

        .card-title {

            font-size: 18px;

        }

        .card-text {

            font-size: 14px;

        }

        .card-footer {

            padding: 10px;

        }

        .details {

            display: none;

            padding: 10px;

            border-top: 2px solid black;

            background-color: #fff;

        }

        .btn {

            padding: 10px 20px;

            border: none;

            cursor: pointer;

        }

        .btn:hover {

            opacity: 0.9;

        }

        @media (max-width: 768px) {

            .card img {

                max-height: 150px;

            }

            .card-title {

                font-size: 16px;

            }

        }

     

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

        }

        .service {

            padding: 20px;

            background-color: #f4f4f4;

        }

        .row {

            display: flex;

            justify-content: center;

            flex-wrap: wrap;

        }

        .card {

            border: 2px solid black;

            background-color: white;

            margin: 20px;

            max-width: 300px;

            text-align: center;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        }

        .card img {

            width: 100%;

            height: auto;

            object-fit: cover;

            border-bottom: 2px solid #ddd;

        }

        .card-body {

            padding: 15px;

        }

        .card-title {

            font-size: 18px;

            font-weight: bold;

        }

        .card-text {

            font-size: 14px;

            font-weight: bold;

            color: #333;

        }

        .card-footer {

            padding: 10px;

            background-color: #fff;

            border-top: 2px solid #ddd;

        }

        .btn {

            padding: 10px 20px;

            border: none;

            cursor: pointer;

            background-color: orange;

            color: white;

            font-weight: bold;

        }

        .btn:hover {

            opacity: 0.9;

        }

        .details {

            display: none;

            padding: 10px;

            background-color: #fff;

            border-top: 2px solid #ddd;

}

.card {

    width: 300px; /* Adjust the width of the card */

    margin: 50px auto; /* Centers the card horizontally and adds top spacing */

    padding: 20px;

    border: 1px solid #ddd; /* Optional border */

    border-radius: 8px; /* Optional rounded corners */

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better look */

    text-align: center; /* Ensures content inside is centered */

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: Arial, sans-serif;

}



.welcome-hero {

    position: relative;

    background:url(../images/welcome-hero/new.jpg)no-repeat;

    background-position: center;

    background-size: cover;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    padding: 20px;

}



.welcome-hero h1 {

    font-size: 2.5rem;

    margin-bottom: 20px;

}



.book-now-btn {

    padding: 10px 20px;

    font-size: 1.2rem;

    color: white;

    background-color: #ff5733;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

    text-transform: uppercase;

}



.book-now-btn:hover {

    background-color: #ff2e00;

}
.booking-form h2 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}


 


@media (max-width: 768px) {
    .book-now-btn {
        font-size: 14px;
        padding: 10px 16px;
        width: 100%; /* Full width on smaller screens */
    }
}

@media (max-width: 480px) {
    .book-now-btn {
        font-size: 12px;
        padding: 8px 12px;
    }
}
 

/* Hover animation */

.book-now-btn:hover {

    background-color: #ff2e00;

    transform: scale(1.05);

}



/* Click (active) animation */

.book-now-btn:active {

    transform: scale(0.95);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}

/* book now button */

/* Container styling */

.book-now-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    gap: 20px;
margin-top: 200px;
}



/* Book Now button styling */

.book-now-btn {

    padding: 10px 20px;

    font-size: 16px;

    background-color: orange;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;
    
}



.book-now-btn:hover {

    background-color: darkorange;

}



/* Cab service info section styling */

.cab-service-info {

    width: 100%;

    max-width: 400px;

    background-color: #1a1a1a;

    color: #ffffff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    position: absolute;

    top: 20px;

    right: -420px; /* Hidden outside the viewport */

    transition: right 0.5s ease;

    z-index: 100;

}



/* When the section is visible */

.cab-service-info.show {

    right: 20px;

}

.contact-item span {

    font-weight: bold;

    color: orange;

}

.contact-details .contact-item strong {

    color: #ffffff; 

    font-size: 15px; 

}



/* Responsive styles */

@media (max-width: 768px) {

    .book-now-container {

        flex-direction: column;

        align-items: stretch;

    }



    .cab-service-info {

        max-width: 100%;

        right: -100%;

    }



    .cab-service-info.show {

        right: 0;

    }

}
 

/* Global Styles */

body {

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

    margin: 0;

    padding: 0;

    background-color: #f4f4f4;

}



h2 {

    color: #333;

}



/* Button Style */

.book-now-btn1 {

    padding: 12px 25px;

    background-color: #ff5733;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-size: 18px;

    transition: background-color 0.3s;

    margin-top: 20px;

}



.book-now-btn1:hover {

    background-color: #e04e29;

}



/* Booking Form Styles */

.booking-form {

    display: none; /* Hidden initially */

    max-width: 600px;

    margin: 40px auto;

    padding: 20px;

    background-color: #fff;

    border-radius: 10px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.booking-form form {

    display: flex;

    flex-direction: column;

}



.booking-form label {

    font-size: 16px;

    margin-bottom: 8px;

    color: #555;

}



.booking-form input,

.booking-form textarea {

    color: #000000;

    padding: 12px;

    margin-bottom: 15px;

    border: 1px solid #ddd;

    border-radius: 5px;

    font-size: 16px;

    width: 100%;

    box-sizing: border-box;

}



.booking-form textarea {

    resize: vertical;

    min-height: 80px;

}



.booking-form button {

    padding: 12px;

    background-color: #4CAF50;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-size: 18px;

    transition: background-color 0.3s;

}



.booking-form button:hover {

    background-color: #45a049;

}

.booking-form select {

    padding: 12px;

    color: #000000;

    margin-bottom: 15px;

    border: 1px solid #ddd;

    border-radius: 5px;

    font-size: 16px;

    width: 100%;

    background-color: #ffffff;

    box-sizing: border-box;

    transition: border-color 0.3s ease;

}



  



 

/* Responsive Design */

 





 /* whatsapp call icon */

 .contact-icons {
	
	margin-bottom: 50px; /* Add spacing below the icons */
    margin-left: 15px;
}



.contact-icons a {

    margin: 0 10px; /* Add spacing between the icons */

}



 



@media (max-width: 768px) {

    .contact-icons {

        flex-direction: column; /* Stack icons vertically on smaller screens */

        margin-bottom: 50px; /* Increase spacing for better appearance */

         

    }



    .contact-icons a {

        margin: 10px 0; /* Adjust spacing between icons when stacked */

    }

}
/*footer icon*/