:root{ scroll-behavior: smooth;}
body{font-family: "Open Sans", sans-serif; color: #1a1a1a; font-size: 16px; font-weight: 400; line-height: 1.2;}
.container {max-width: 1100px;}
a {color: #1a1a1a;  }
a:hover {color: #000;}
a, a:hover{text-decoration: none;}
p:last-child{margin-bottom: 0;}
ul{margin: 0; padding: 0; list-style: none;}
img{max-width: 100%;}
figure{margin-bottom: 0;}
.form-control{border: 1px solid #BDBDBD; color: #BDBDBD; height: 48px; font-size: 14px; padding: 12px 15px;}
.form-control:focus{outline: none; border:1px solid #1a1a1a; box-shadow: none;}
.form-control:-webkit-input-placeholder { 
    color:    #BDBDBD;
}
.form-control:-moz-placeholder { 
   color:    #BDBDBD;
   opacity:  1;
}
.form-control:-ms-input-placeholder { 
   color:    #BDBDBD;
}
.form-control::placeholder { 
   color:    #BDBDBD;
}
select::-ms-expand {display: none;}
select{ -webkit-appearance: none;	-moz-appearance: none;}
.btn:focus, .btn:active{box-shadow: none; outline: none;}
.btn{border-radius: 4px; font-size: 14px;}
.btn:hover{background-color: #ffc605; }
.bg-orange:hover{background-color: #ffc605;}
.search-field .form-control:-webkit-input-placeholder { 
   color:    #1a1a1a;
}
.search-field .form-control:-moz-placeholder { 
  color:    #1a1a1a;
  opacity:  1;
}
.search-field .form-control:-ms-input-placeholder { 
  color:    #1a1a1a;
}
.search-field .form-control::placeholder { 
  color:    #1a1a1a;
}

/*banner*/
.banner{background-image: url('../images/banner.png'); background-repeat: no-repeat; min-height: 623px; padding: 25px 0 0;     background-position: top center;}
.top-header-row{display: flex; flex-wrap: wrap;}
.home-logo{width: 112px;}
.top-header-right-col{margin-left: auto;  display: flex; flex-wrap: wrap;}
.top-header-flat-btn{display: flex; flex-wrap: wrap; align-items: flex-start; gap:0 24px; width: 700px; padding-right: 70px; }
.flat-btn{width: calc(33% - 16px); background-color: #fff; border-radius: 0 15px 0; padding: 15px 15px; text-align: center; font-size: 16px;}
.top-header-round-btn{width: 210px;}
.top-header-round-btn .round-btn {
    margin-bottom: 10px;
}
.round-btn{width: 100%; display: block; background-color: #fff; border-radius: 50px; color: #000; font-weight: 700; padding: 15px; text-align: center; font-size: 16px;}
.custom-site-btn{border-radius: 50px; background-color: #fff; font-weight: 600; font-size: 20px; min-width: 200px; color: #000; padding: 15px 25px; height: 56px; text-align: center; display: flex; justify-content: center; align-items: center;}
.custom-site-btn:hover{background-color: #000; color: #fff;}
.bg-black{background-color: #1a1a1a;}
.bg-blue {
    background: linear-gradient(90deg, rgba(1, 46, 92, 1) 0%, rgba(0, 117, 225, 1) 100%);
    border: none;
}
.bg-pink{background-color: #ed468c;}
.bg-yellow{background-color: #e1b419;}
.bg-purple{background-color: #6546ec;}
.bg-red{background-color: #e04819;}
.bg-lightgreen {background-color: #0fc50f;}
.white-text{color: #fff;}
.black-text{color: #1a1a1a;}
.flat-btn:hover{background-color: #000; color: #fff;}
.round-btn:hover{background-color: #e1b419; color: #000;}
.border-white{border: 1px solid #fff;}
.banner h1{font-size: 60px; font-weight: 100; margin-bottom: 16px;}
.banner h1 strong{font-weight: 700;}

.top-form-panel{position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 20px;}
.top-form-panel::after{position: absolute; left: 0; top:0; width: 85%; height: 100%; background-color: #ffc605; border-radius: 10px; content: ''; z-index: -1;}
.top-form-panel-left{width: calc(100% - 400px); padding:24px 50px 24px 24px;}
.top-form-panel-right{width: 400px; position: relative; align-self: flex-end;}
.top-form-panel-left label{font-size: 16px; font-weight: 600;}
.banner .form-control{height: 56px; font-weight: 600; color: #000; border: 1px solid #ccc; border-radius: 12px;}
.top-form-panel-left .btn-group{display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 16px;}

.sepreator{text-align: center; margin: 16px 0;}
.sepreator span{width: 32px; height: 32px; font-weight: 600; border-radius: 50%; border: 1px solid #ababab;  padding: 5px; display: block; margin: auto; display: flex; align-items: center; justify-content: center; text-transform: uppercase;}
.top-bottom-form{background-color: #1a1a1a; padding: 15px; border-radius: 10px; margin-bottom: 24px;}

.row-gap-10{margin-left: -10px; margin-right: -10px;}
.col-gap-10{padding-left: 10px; padding-right: 10px;}
.d-inline-block{display: inline-block;}

.signup-btn{font-size: 14px;}
.signup-btn img{margin-left: 5px;}
.signup-btn:hover img{filter: grayscale(100%);}
/*banner*/

/*how it work*/
.sec-space{padding: 80px 0;}
.heading-box{padding-bottom: 40px;}
.heading-box h2{font-size: 52px; font-weight: 100;}
.heading-box h2 strong{font-weight: 700;}
.headingpara{font-size: 18px; line-height: 1.3;}
.how-it-work-item{position: relative;}
.how-it-work-after:after{position: absolute; right: -30%; top:24px; width: 176px; height: 42px; content: ''; background-image: url('../images/arrow-down.png'); background-repeat: no-repeat; background-size: 100%;}
.how-it-work-before::before{position: absolute; left: -30%; top:32px; width: 179px; height: 36px; content: ''; background-image: url('../images/arrow-top.png'); background-repeat: no-repeat; background-size: 100%;}
.how-it-work-item i{margin-bottom: 16px; display: block;}
.commontxt{font-size: 22px; line-height: 1.4; font-weight: 700; margin-bottom: 8px;}
.how-it-work-item p, .why-choose-item-content p, .why-choose-item-content ul li{font-size: 16px; line-height: 1.3;}
/*how it work*/

/*why choose*/
.why-choose, .best-cab{max-width: 1500px; width: 100%; margin: auto; overflow: hidden;}
.yellow-text{color: #fec504;}
.why-choose-item-fig{position: relative;}
.why-choose-item-fig::after{position: absolute; right: -30px; top: -45px; width: 251px; height: 215px; content: ''; background-image: url('../images/texi-overlay.png'); background-repeat: no-repeat;}
.why-choose-item-fig img{width: 100%;}
.why-choose-item-content{padding-left: 50px;}
.why-choose-item-content ul li{position: relative; padding-left: 24px; margin-bottom: 8px; font-weight: 600;}
.why-choose-item-content ul li::before{position: absolute; left: 0; top:3px; width: 14px; height: 14px; content: ''; background-image: url('../images/green-check.png'); background-repeat: no-repeat;}
/*why choose*/

/*best cab services*/
.best-cab-item-fig{margin-top: -70px;}
.best-cab-item-content{font-size: 18px; line-height: 1.4; padding-left: 48px;}
.best-cab-item-content .btn-group{display: flex; align-items: center; gap: 0 24px; margin-top: 32px;}
/*best cab services*/

/*map panel*/
.map-panel{background-color: #ffc605; padding: 50px; text-align: center;}
.map-panel-heading{font-size: 28px; font-weight: 700; margin-bottom: 8px;}
.map-panel-link{font-size: 42px; font-weight: 700;}
.map-section{width: 100%; height: 625px;}
/*map panel*/

/*footer*/
.footer-logo{text-align: center;}
.footer-logo p{font-size: 16px; line-height: 1.2; font-weight: 700; margin-top: 16px;}
.footer-content{padding-left: 24px;}
.footer-content-hd{font-size: 22px; text-transform: uppercase; font-weight: 700; margin-bottom: 24px;}
.footer-content-link {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-bottom: 32px;}
.footer-content-link a{padding: 12px 20px; border-radius: 50px; border: 1px solid #ababab; text-align: center; display: inline-block; font-size: 14px; font-weight: 600;}
.footer-content-link a:hover{background-color: #000; color: #fff;}
.address-panel{background-color: #efefef; border-radius: 20px; padding: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 32px; margin-bottom: 24px;}
.address-panel .footer-content-hd{margin-bottom: 0;}
.address-panel-item{font-size: 15px; display: flex; align-items: center; font-weight: 600; gap: 8px;}
.copytext{font-size: 14px;}
/*footer*/



/*media query*/
@media (max-width: 1440px) {

.banner h1 {font-size: 52px;}
.heading-box h2 {font-size: 44px;}
.commontxt, .footer-content-hd{font-size: 20px;}
.sec-space {padding: 60px 0;}

}

@media (max-width: 1199px) {

.top-header-flat-btn{width: 500px; padding-right: 40px;}
.top-header-round-btn{width: 195px;}
.banner h1 {font-size: 48px;}
.heading-box h2 {font-size: 40px;}
.map-panel-heading{font-size: 24px;}
.map-panel-link{font-size: 38px;}

}

@media (max-width: 991px) {

.top-header-flat-btn {width: 375px; padding-right: 10px;}
.flat-btn{padding: 15px 8px;font-size: 15px;}
.round-btn{font-size: 14px; padding: 15px 8px;}
.banner h1 {font-size: 40px;}
.heading-box h2 {font-size: 36px;}
.top-form-panel-left{width: calc(100% - 220px); padding: 18px 30px 18px 18px;}
.top-form-panel-right{width: 220px;}
.banner .form-control{height: 50px;}
.custom-site-btn{height: 50px;     padding: 15px 20px; font-size: 18px;}
.top-form-panel-left label{font-size: 14px;}
.signup-btn {font-size: 14px;}
.headingpara {font-size: 16px;}
.how-it-work-after:after{right: -35%; top: 34px; width: 134px; height: 30px; }
.how-it-work-before::before{left: -37%; top: 45px; width: 140px; height: 28px;  }
.commontxt, .footer-content-hd { font-size: 18px;}
.how-it-work-item p, .why-choose-item-content p, .why-choose-item-content ul li {font-size: 14px;}
.sec-space {padding: 50px 0;}
.heading-box {padding-bottom: 24px;}
.best-cab-item-content{font-size: 15px;}
.map-panel {padding: 36px;}
.map-panel-heading {   font-size: 22px;}
.map-panel-link {   font-size: 34px;}
.map-section {   height: 400px;}
.address-panel{padding: 22px;     gap: 8px 18px;}
.footer-content {   padding-left: 0;}
.footer-logo p{font-size: 14px;}
.footer-content-link{gap: 8px;}
.footer-content-link a{font-size: 13px; padding: 12px 15px;}
}

@media (max-width: 767px) {

.top-header-round-btn {width: 170px;  }
.home-logo {   width: 112px;   margin: 0 auto 24px;}
.top-header-row{margin-bottom: 24px;}
.top-form-panel-left{width: 100%;}
.top-form-panel::after{width: 100%;}
.top-form-panel-right {margin: auto;}
.row-gap-10{margin-left: -5px; margin-right: -5px;}
.col-gap-10{padding-left: 5px; padding-right: 5px;}
.top-bottom-form .form-control{margin-bottom: 16px;}
.headingpara {font-size: 15px;}
.how-it-work-item i img{width: 72px;}
.commontxt, .footer-content-hd {   font-size: 16px;}
.how-it-work-item p, .why-choose-item-content p, .why-choose-item-content ul li {   font-size: 13px;}
.how-it-work-after:after {   right: -37%;   top: 25px;   width: 96px;   height: 24px;}
.how-it-work-before::before {   left: -37%;   top: 30px;   width: 97px;   height: 22px;}
.why-choose-item-content {   padding-left: 15px;   padding-top: 24px;}
.heading-box h2 {   font-size: 32px;}
.best-cab-item-content {   padding-left: 15px;   font-size: 14px;}
.map-panel {   padding: 20px;}
.map-panel-heading {   font-size: 18px;}
.map-panel-link {   font-size: 28px;}
.footer-logo{margin-bottom: 24px;}
.address-panel-item{font-size: 14px;}
.address-panel {   padding: 15px;   gap: 8px 8px;}
.copytext {   font-size: 12px;}

}

@media (max-width: 575px) {

.how-it-work-after:after, .how-it-work-before::before {  display: none;}
.top-header-flat-btn{width: 100%;     gap: 10px; margin-bottom: 16px;}
.flat-btn{width: calc(50% - 5px);}
.top-header-round-btn{width: 100%;}
.banner h1 {
   font-size: 32px;
}
.custom-site-btn{width: 100%;}
.signup-btn{margin-top: 16px;}
.how-it-work-item{margin-bottom: 24px;}
.heading-box h2 {
   font-size: 30px;
}
.heading-box {
   padding-bottom: 16px;
}
.sec-space {
   padding: 32px 0;
}
 
}
/*media query*/


/* Sticky Footer Styling */
.sticky-footer {
  position: fixed;
  bottom: -1px;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* Icon Styling */
.sticky-footer a {
  display: inline-block;
  text-align: center;
}
/* Icon Styling */

.sticky-footer img {
  width: 50%;
}
 .sticky-footer a h6{
    font-weight: normal;
    font-size: 12px !important;
    margin-top: 5px;
    }
/* Mobile View Only */
@media (max-width: 768px) {
  .sticky-footer {
    display: flex;
  }
  .navbar.navbar-default.shadow li.nav-item.nav-icon.dropdown {
    display: none;
  }
  .top-header-round-btn {
    display: none;
  }
  .sidebar {
    display: none !important;
  }
 
}
.mobile-view{
    display:none;
}
.mobile-chart li a img {
    width: 75px;
    border-radius: 50%;
    border: 1px solid #fec605;
}
.mobile-chart {
    list-style: none;
    padding: 0px;
    margin: 5px;
}
.mobile-chart li {
    display: inline-block;
    text-align: center;
    margin: 0px 25px;
}

.mobile-view .bg-primary, .mobile-view .btn-primary {
    background: #fec605 !important;
}
.mobile-view .booktaxi-btn {
    color: #fff;
    background: #000;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    border: 2px solid #000;
    padding: 10px 20px;
    display: inline-block;
}
.mobile-view .coupons {
    color: #fff;
    background: #008000;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    border: 2px solid #008000;
    padding: 10px 20px 0px;
    display: inline-block;
}
.btn-calculat {
    background: #ed468c;
}

.mobile-view .mobile-diff a {
    display: block;
    text-align: center;
    padding: 15px 5px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}
.mobile-diff a {
    display: block;
    text-align: center;
    padding: 5px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}
.btn-first {
    background: #0dcaf0;
}
.mobile-diff .active {
    background: #fec605;
}
.custom-top {
    font-weight: bold;
    padding: 5px 0px;
    position: relative;
    top: 0px;
    font-size: 16px;
    border-bottom: 2px solid #000;
}
 .desktp-view{ display:block;}
@media only screen and (max-width: 768px) {
    .desktp-view{ display:none;}
    .btn-later {
        flex: none;
        width: 50%;
        background: #000;
    }
    
}
@media only screen and (max-width: 768px) {
    .btn-booking {
        flex: none;
        width: 50%;
        background: #0dcaf0;
    }
}
@media only screen and (max-width: 768px) {
    .btn-now {
        flex: none;
        width: 50%;
    }
}
@media only screen and (max-width: 768px) {
    .btn-first {
        flex: none;
        width: 50%;
    }
}

@media only screen and (max-width: 768px) {
    .btn-calculat {
        width: 100%;
        flex: none;
    }
}
@media only screen and (max-width: 768px) {
   .mobile-view .booktaxi-btn {
        font-size: 8px;
        display: block;
        width: 80%;
        position: relative;
        left: 15px;
    }
}
/* Hide on Desktop */
@media only screen and (max-width: 768px) {
   /* .mobile-view .coupons {
        font-size: 8px;
        display: block;
    }
    */
}

@media (min-width: 769px) {
  .sticky-footer {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
    .mobile-view .m-wapp, .mobile-view .m-ctb, .mobile-view .m-bc, .mobile-view .m-car {
        padding: 10px 10px 0px 10px !important;
    }
}


@media only screen and (max-width: 768px){
    .mobile-view{
        display:block;
    }


    .mobile-view .container-fluid{
        justify-content: center;
    }

	
    .navbar {
        padding: 5px;
        background: #dedbdb;
        border-bottom: 2px solid;
    }
.navbar-brand {
    margin-right: 0px;
}
}
@media only screen and (max-width: 768px) {
    .logo {
        width: 50px;
    }
}

@media only screen and (max-width: 768px) {
    .mobile-chart li {
        margin: 0px 12px;
    }
}
@media only screen and (max-width: 768px) {
    .mobile-chart li a {
        font-size: 8px;
        font-weight: 900;
    }
}
@media only screen and (max-width: 768px) {
    .mobile-chart li a img {
        width: 50px;
    }
}
 /* Card styling */
        .profile-main-box{
        }
        .lesson-card {
          background-color: #fdf3e6;
          padding: 25px 15px;
          border-radius: 15px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 250px;
        }
        .ACTIVATE{
            background-color: #00bbb4;
            color: white;
        }
        .ANALYSE{
            background-color: #f2aa23;
            color: white;
        }
        .ACTION{
            background-color: #ff595a;
            color: white;
        }
    
        /* Left side - Icon & text */
        .lesson-details {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
        }
    
        .lesson-count {
          font-size: 16px;
          font-weight: bold;
          margin: 10PX 0PX;
        }
    
        .lesson-text {
          font-size: 14px;
          color: white;
        }
    
        /* Right side - Progress Circle */
        .progress-circle {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 60px;
        }
    
        .progress-circle svg {
          transform: rotate(-90deg);
          width: 100%;
          height: 100%;
        }
    
        .progress-circle circle {
          fill: none;
          stroke-width: 5;
          stroke-linecap: round;
        }
    
        .progress-circle .bg-circle {
          stroke: #f0e1db;
        }
    
        .progress-circle .progress-bar {
          stroke: #ff8763;
          stroke-dasharray: 180;
          stroke-dashoffset: 90; /* Represents 50% */
        }
       .ACTIVATE .progress-bar{
        stroke: #f6b536;
       }
       .ANALYSE .progress-bar{
        stroke: #00bbb4;
       }
       .ACTION .progress-bar{
        stroke: #3972bf;
       }

       .ACTION img{
        filter: brightness(0) invert(1);
       }
        .progress-circle .progress-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 12px;
          font-weight: bold;
          color: #ff8763;
        }
        .ACTIVATE .progress-text{
          color: WHITE;
        }
        .ANALYSE .progress-text{
          color: white;
        }
        .ACTION .progress-text{
          color: white;
        }
        /* Image/Icon styling */
        .lesson-icon {
          width: 40px;
          height: 40px;
          /* background-color: #ff8763; */
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-size: 18px;
        }
        .profile-img-1{
          width: 100%;
          height: 150px;
        }
        .profile-img-1 img{
          width: 100%;
          height: 100%;
          max-width: 100%;
        }
        .profile-img-2 {
          position: relative;
          top: -100px;
          display: flex;
          justify-content: space-between;
       
          padding: 20px;
        }
        .profile-img-2-left{
          width: 30%;
        }
        .profile-img-2-right{
          width: 70%;
        }
        .profile-img-2-left-img{
          border-radius: 50%;
          width: 150px;
          height: 150px;
        
        }
        .profile-img-2-left-img img{
          border-radius: 50%;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .Lorem1{
          width: 100%;
          font-size: 18px;
        }
        .Connect-with {
          width: 100%;
          background: #3972bf;
          color:white;
          padding: 10px 0px;
          margin-top: -100px;
          text-align: center;
          font-size: 20px;

        }
       
.profile-img-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 10px;
    padding: 0px 20px;
}
.profile-img-3-left{
  width: 31%;
}
.profile-img-3-left{
  padding: 20px 10px;
}
.profile-img-3-left{
  font-size: 18px;

}
.profile-img-3-left b{
  padding: 0px 0px;
}
.profile-img-3-left{
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}
.upload button{
  border: 0px ;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 10px;
  
}

@media(min-width: 992px){
  .graf{
    row-gap: 10px;
  }
 
}
@media(max-width:990px){
	 .profile-img-2-left {
    width: 100%;
}
.profile-img-3-left {
    width: 100%;
}
}

#loginBtn {
    border-radius: 30px;
}
#signupBtn {
    border-radius: 30px;
}
.top-header-round-btn {
    list-style: none;
}

         .popup-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
             z-index: 9999;
        }
        .popup {
            background: white;
            border-radius: 10px;
            padding: 20px;
            width: 500px;
            text-align: center;
                margin: 124px auto;
            z-index: 9999;
        }
        .toggle-buttons {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }
        .toggle-buttons button {
            flex: 1;
            border: none;
            padding: 10px;
        }
        .toggle-buttons .active {
            background: linear-gradient(90deg, rgba(1, 46, 92, 1) 0%, rgba(0, 117, 225, 1) 100%);
            color: white;
        }
        .btn-primary {
            color: #fff;
            background: linear-gradient(90deg, rgba(1, 46, 92, 1) 0%, rgba(0, 117, 225, 1) 100%);
        }