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

body{
    font-size: clamp(12px, 3vw, 16px) !important;
    font-family: 'Manrope', sans-serif !important;
}
.header-bg{
    background: #fff;
    position: fixed;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    width: 100%;
    z-index: 99999;
}
.header{
    padding: 12px 0;
    display: flex;
    gap: clamp(8px, 1vw, 12px);
    justify-content: space-between;
    align-items: center;
}
.web-name-ide{
    line-height: clamp(14px, 3vw, 25px) !important;
}
.web-name-head{
    font-size: clamp(16px, 4vw ,34px);
}
.change-c{
    color: #F59E0B;
}
.Web-name-pera{
    font-size: clamp(10px, 1vw, 12px) !important;
    line-height: clamp(14px, 1vw, 15px) !important;
}
.nav ul{
    display: flex;
    font-size: clamp(12px, 4vw, 16px);
    gap: clamp(10px , 2.5vw, 12px);
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0 !important;
}
.account-bar{
    position: fixed;

    top: clamp(70px, 8vw, 128px);
    right: clamp(10px, 4vw, 50px);

    width: clamp(180px, 25vw, 260px);
    min-height: clamp(220px, 35vw, 300px);

    background: #fff;
    border-radius: clamp(10px, 1vw, 16px);

    box-shadow: 0 clamp(8px, 1vw, 15px) clamp(20px, 3vw, 40px)
                rgba(0,0,0,.15);

    padding: clamp(12px, 2vw, 20px);

    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(.98);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;
}

.account-bar.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.account-hover{
    padding: 10px 20px;
    cursor: pointer;
}
.account-hover:hover{
    background-color: #f0f0f0;
}
.header-login-btn{
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #fff !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-size: clamp(10px, 2vw, 13px) !important;
    padding: clamp(4px,1.5vw,15px) !important;
}
.header-account{
    box-shadow: none !important;
    outline: none !important;
    font-size: clamp(12px, 2vw, 16px) !important;
    padding: clamp(4px,1.5vw,15px) !important;
}
.header-account:hover{
    color: #F59E0B !important;
}
.search-bar{
    flex: 1;
    max-width: 320px;
    min-width: 120px;
    width: clamp(120px, 25vw , 320px);
    font-size: clamp(12px, 3.5vw, 16px) !important;
    display: flex !important;
    justify-content: space-between;
    margin: 0 !important;
    align-items: center !important;
    position: relative;
}
.search{
    flex: auto 0 0;
    width: 100%;
}
.search-button{
    flex: auto 0 0;
    position: absolute;
    right: 3px;
    z-index: 3;
}
.search-button button{
    border: none !important;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    height: clamp(20px, 7vw, 45px);
    width: clamp(20px, 7vw, 45px);
    padding: clamp(0px, 0vw, 6px) clamp(0px, 1vw, 12px) !important;
}
.header .form-control{
    height: clamp(24px,8vw,50px) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 3px !important;
}
.search .form-control{
    height: clamp(19px,5vw,38px) !important;
    box-shadow: none !important;
    font-size: clamp(10px, 3vw, 16px) !important;
} 
.form-control:focus{
    box-shadow: none !important;
}
.header-search-btn{
    font-size: clamp(12px ,1vw , 18px) !important;
}
.placeHome{
    display: none !important;
    font-size: clamp(12px ,1vw , 18px) !important;
    gap: 3px;
    align-items: center !important;
    height: clamp(24px,8vw,50px) !important;
    padding: 3px !important;
}
.placeBarHome{
    width: clamp(60px, 16vw, 160px) !important;
    height: clamp(20px, 4vw, 50px) !important;
    font-size: clamp(12px ,1vw , 18px) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 3px !important;
}
select{
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
}
.placeBarHome select{
    height: clamp(15px, 3vw, 40px) !important;
    width: 80%;
    border: none !important;
    padding: 0 !important;
}
.placeBarHome select:focus{
    box-shadow: none !important;
}
.place-bar{
    width: clamp(50px, 15vw, 170px) !important;
    font-size: clamp(12px ,1vw , 18px) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}
.place-bar select{
    height: 24px;
    width: 80%;
    border: none !important;
    padding: 0 !important;
}
.place-bar select:focus{
    box-shadow: none !important;
}
.nav-bar-btn{
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.notifi-btn,.cross-btn{
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
}
.notifi-btn span{
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff4d4d;
    color: #fff;
    font-size: clamp(9px, 2vw , 10px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-bar-btn span{
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff4d4d;
    color: #fff;
    font-size: clamp(9px, 2vw , 10px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-section{
    padding-top: clamp(100px, 10vw, 160px);
}
.sec-hero{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: clamp(12px, 1.1vw, 16px) !important;
    border: solid 1px #FBBF24;
    padding: clamp(10px, 1vw , 30px);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
}
.hero-left{
    flex: 50% 0 0;
}
.hero-main-head{
    font-size: clamp(16px, 3.5vw, 44px);
    line-height: clamp(21px, 3.5vw , 50px);
}
.hero-main-pera{
    font-size: clamp(12px, 2.2vw, 16px) !important;
    margin: 0 !important;
}
.Buss{
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: inline-block;
    position: absolute;
}

.Buss.active{
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.search-across{
    font-size: clamp(12px, 3vw, 16px) !important;
}
.box{
    width: clamp(37px, 4vw, 70px);
    height: clamp(37px, 4vw, 70px);
    margin: 8px clamp(20px, 2.8vw, 40px);
    cursor: pointer;
    text-align: center;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    transition: 0.3s;
    padding: clamp(0px, 0vw, 10px) !important;
}
.box img{
    padding: clamp(4px, 1vw, 10px) !important;
}
.font-plus{
    font-size: clamp(25px, 3vw, 47px);
}
.box:hover{
  transform: translateY(-8px) scale(1.05);
  background: rgba(0, 0, 0, 0.08);
}
.slider-sec{
    width: 100%;
    margin: clamp(60px,12vw,150px) auto clamp(79px, 20vw, 250px);
    height: clamp(360px,33vw,500px);
}
.all-category-head{
    font-size: clamp(16px , 2vw , 24px);
}
.all-category-pera{
    font-size: clamp(12px, 2.2vw, 16px) !important;
    margin: 0 !important;
}
.sliders {
    min-height: 100vh;
    margin: auto;
    display: flex;
    gap: clamp(15px,4vw,40px);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 40px 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.slide {
    background: rgba(0, 0, 0, 0.05);
    flex: 0 0 auto;
    width: clamp(130px,25vw,300px);
    height: clamp(150px,30vw,360px);
    border-radius: 30px;
    scroll-snap-align: center;
    transform: scale(0.8);
    opacity: 0.5;
    transition: 0.3s;
}
.slide img{
    width: 300px;
    height: 100%;
    object-fit: contain;
}
.slide.active-center {
    transform: scale(1);
    opacity: 1;
    transform: translateY(50px); /*35*/
    height: clamp(170px,33vw,400px) !important; /*160*/
}
.sliders-wrap{
    display: flex;
    margin: auto;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.box-service-1{
    position: relative;
    min-width: 100% !important;
    padding: clamp(10px, 2vw, 12px);
    border-radius: 20px;
    background:#fff;
    box-shadow:0 0px 10px rgba(0,0,0,.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    overflow: hidden;
    transition: 0.4s;
    height: clamp(275px, 50vw, 450px);
    color: #64748B;
}
.box-service-1:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}
.box-service-1 .img-box{
    margin: auto;
    width: clamp(70px, 10vw, 140px);
    height: clamp(70px, 10vw, 140px);
    padding: 5px;
    overflow: hidden;
    object-fit: contain;
    border: solid 1px #000;
    border-radius: 50%;
    margin-bottom: 10px;
    transition: 0.4s;
}
.box-service-1 .img-box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.box-service-1 .icon-btn{
    top: clamp(24%, 11vw, 37%);
    padding: clamp(3px,0.5vw,10px) clamp(10px , 2vw , 18px);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(13, 0, 65, 0.08);
    cursor: pointer;
    position: absolute;
    z-index: 99;
}
.icon-btn i{
    font-size: clamp(12px,2vw,16px);
}
.mt-5-costom{
    margin-top: clamp(0.5rem,3vw,3rem);
}
.box-service-1 .button{
    margin-top: clamp(0px,0vw,7px);
    font-weight:600;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 0 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 100%;
}
.box-service-1:hover .button{
    color:#E68900;
    transform:translateX(-50%) scale(1.05);
}
.heading-box-service-1 h3{
    font-size: clamp(14px, 4vw,21px);
}
.heading-box-service-1 p{
    font-size: clamp(12px, 2vw, 16px);
}
.view-more-btn{
    font-size: clamp(12px,2vw,16px) !important;
    padding: clamp(3px,2vw,10px) clamp(5px,2vw,18px) !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, 0.01) !important;
    border: 1px solid rgba(36, 134, 186, 0.79) !important;
    color: rgba(36, 134, 186, 0.79) !important;
}
.Explore-more-btn{
    font-size: clamp(12px,2vw,16px);
}
.fa-angle-right{
    font-size: clamp(12px,2vw,16px);
}
.box-service-1-text{
    font-size: clamp(16px , 2.8vw , 24px);
    font-weight: 600;
    line-height:1.3;
    color:#1E293B;
}
.box-service-1 p{
    line-height:1.4;
    color:#64748B;
}
.prev-btn-one, .next-btn-one {
    position: absolute;
    margin-top: 10%;
    background: rgba(255, 255, 255);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border: none;
    padding: 15px 15px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 99;
}
.prev-btn-one {
    left: 50px;
}
.next-btn-one {
    right: 50px;
}
.prev-btn, .next-btn {
    position: absolute;
    margin-top: 200px;
    background: rgba(255, 255, 255);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border: none;
    padding: 15px 15px;
    cursor: pointer;
    border-radius: 4px;
    color: #000;
}
.prev-btn {
    left: 50px;
}
.next-btn {
    right: 50px;
}
.serviceforusers{
    display: flex;
    justify-content: space-between;
    width: 88%;
    margin: 45px auto;
    gap: clamp(15px, 3vw , 20px );
}
.card-section{
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
    border: solid 1px #FBBF24;
    padding: clamp(8px, 5vw , 30px);
    border-radius: 20px;
    width: 70%;
    margin: 60px auto;
}
.cards{
    width: 50%;
}
.card-two{
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    width: clamp(110px , 30vw , 300px) !important;
    padding: clamp(5px, 1vw, 15px) clamp(3px, 0.5vw, 8px);
    margin-top: 10%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    animation: float 5s ease-in-out infinite;
}
.card-sys{
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 5px;
}
.card-sysHome{
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    padding: clamp(5px, 1vw, 15px) clamp(3px, 0.5vw, 8px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: space-between;
}
.card-sys .left-contant .head{
    font-size: clamp(14px , 2vw , 24px);
}
.card-sys .left-contant .pera{
    font-size: clamp(9px , 0.89vw , 16px);
}
.card-sysHome .left-contant .head{
    font-size: clamp(14px , 2vw , 20px) !important;
}
.card-sysHome .left-contant .pera{
    font-size: clamp(12px , 0.89vw , 16px) !important;
}
.card-sysHome .left-contant{
    width: 70%;
}
.right-contant{
    width: 30%;
}
.right-contant img{
    width: 100%;
}
.box-service{
    border: solid 1px #000;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding: 20px 1rem;
    background: rgba(255, 255, 255, 0.03);
}
.box-two{
    width: clamp(30px, 4vw, 70px);
    height: clamp(30px, 4vw, 70px);
    margin: 8px clamp(7px, 1.8vw, 40px);
    cursor: pointer;
    text-align: center;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    transition: 0.3s;
    padding: clamp(0px, 0vw, 10px) !important;
}
.box-two img{
    height: 100%;
    padding: clamp(6px , 1vw , 20px) !important;
}
.box-service .heading{
    font-size: clamp(12px , 2vw , 24px);
}
.box-service .pera{
    font-size: clamp(12px , 0.89vw , 16px);
}
.box-service .button-explore{
    font-size: clamp(12px , 1vw , 16px) !important;
}
.sec-about{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: clamp(12px, 1.1vw, 16px) !important;
}
.sec-about .bg-right{
    border: solid 1px #FBBF24;
    padding: clamp(10px, 1vw , 30px);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
}
.bg-all-sec{
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
}
.user{
    background: rgba(245, 158, 11, 0.2);
    padding: clamp(20px,4vw,40px);
}
.heading{
    font-size: clamp(16px , 2.8vw , 24px);
    font-weight: 600;
}
.pera{
    font-size: clamp(12px ,1.8vw,16px) !important;
}
.small-pera{
    font-size: clamp(12px ,1.7vw,14px) !important;
}
.teams{
    margin-top: clamp(20px,2vw,30px) !important;
}
.team{
    margin-top: 50px !important;
    padding: 0 clamp(30px, 4vw , 40px) !important;
}
.team-data{
    margin-bottom: clamp(50px,5vw,60px);
}
.contact-sec{
    margin: 28px 0;
    padding: 40px 0;
}
.contact-cards{
    position: relative;
    min-width: clamp(120px,20vw,300px);
    padding: clamp(8px, 2vw, 12px);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: 0.4s;
    height: clamp(129px,23vw,250px);
}
.contact-cards-two{
    position: relative;
    min-width: clamp(120px,20vw,300px);
    padding: clamp(8px, 2vw, 12px);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: 0.4s;
    height: clamp(100px,23vw,250px);
}
.contact-map{
    position: relative;
    min-width: clamp(120px,20vw,300px);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: 0.4s;
    height: clamp(200px,30vw,350px);
}
.contact-map iframe{
    width: 100%;
    height: clamp(390px, 45vw, 550px);
    border: 0;
    display: block;
}
.contact-submit-btn{
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #fff !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-size: clamp(12px, 2vw, 14px) !important;
    padding: clamp(4px,1.5vw,15px) !important;
}
.contact-main{
    padding-top: 60px;
}
.ser-box-main{
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 8px !important;
}
.services-boxs{
    display: flex;
    margin: auto;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ser-box{
    width: clamp(175px, 42vw, 400px) !important;
    flex-shrink: 0;
    border-radius: 10px;
    transition: 0.23s;
}
.ser-box:hover{
    border: solid 1px #000;
    box-shadow: 0 7px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px) !important;
}
.prev-btn-ser, .next-btn-ser {
    position: absolute;
    margin-top: 3%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 15px 15px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 99;
}
.heading-ser{
    font-size: clamp(12px, 2.3vw, 20px);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-weight: 600;
    overflow: hidden;
}
.pera-ser{
    font-size: clamp(12px, 1.8vw, 16px) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}
.servicepagehead{
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.servicepagehead .btn:focus{
    box-shadow: none !important;
}
.prev-btn-ser {
    left: 70px;
}
.next-btn-ser {
    right: 70px;
}
.secin-img{
    padding-top: 60px;
}
.secin-img img{
    height: 400px;
    width: 100% !important;
    object-fit: contain !important;
}
.serviceinBox{
    padding: clamp(5px, 1vw, 15px) clamp(3px, 0.5vw, 8px);
    border-radius: 10px;
}
.reqBtn{
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #fff !important;
}
.notification-box{
    padding: 20px;
    border: solid 1px #FBBF24;
    border-radius: 10px;
}
.notification-pannel{
    min-height: 70vh;
}
.menu-bar{
    position: fixed;
    width: 320px;
    height: 100%;
    background-color: white;
    z-index: 99999;
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    display: none;
}
.menu-bar.active{
    display: block !important;
}
.hambar{
    display: none;
}
.card-about-two{
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    width: clamp(150px , 30vw , 300px) !important;
    padding: clamp(5px, 1vw, 15px) clamp(3px, 0.5vw, 8px);
    margin-top: 10%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.box-about-whyChoose{
    position: relative;
    max-width: 97%;
    padding: clamp(8px, 2vw, 12px);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}

.hero {
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
    padding: 100px 48px 90px !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; right: 0;
    height: 55px; background: #ffffff;
    clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff; font-size: clamp(11px, 1.2vw, 13px);
    padding: 4px 16px; border-radius: 20px;
    margin-bottom: 18px; letter-spacing: 0.5px;
}
.hero h1 { color: #000000; font-size: clamp(24px, 5vw, 38px); font-weight: 700; margin-bottom: 14px; }
.hero p { color: rgba(0, 0, 0, 0.82); font-size: clamp(13px, 2vw, 15px); max-width: 480px; margin: 0 auto; line-height: 1.7; }
.hero-meta {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 22px; flex-wrap: wrap;
}
.hero-meta span { color: rgba(0, 0, 0, 0.78); font-size: clamp(12px, 1.6vw, 13px); }
.hero-meta .dot {
    display: inline-block; width: 5px; height: 5px;
    background: rgba(255,255,255,0.45); border-radius: 50%;
}
.terms-pera{
    color: rgba(0,0,0,0.82); font-size: clamp(13px, 2vw, 15px); max-width: 720px; margin: 0 auto; line-height: 1.7;
}
.imgs-service-provider{
    height: 400px;
    border-radius: 20px;
}
.service-headings{
    border-bottom: solid 2px #F59E0B;
}
.ser-services-box{
    border-radius: 15px;
}
.login-popup{
    position: fixed;
    z-index: 10;
    background: #ffffff;
    width: clamp(200px, 25vw, 300px);
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    border-radius: 20px;
    padding: 20px 10px;
    display: none;
    transition: all 2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.login-active{
    display: block;
}
.cross-login{
    right: 20px;
    top: 10px;
    cursor: pointer;
}
.border-bottom-theme{
    border-bottom: solid 2px #F59E0B;
}
.w-80{
    width: 80%;
}
.LoginBtn{
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: white !important;
    width: 100%;
}
.LoginBack{
    display: none;
}
.LoginBackActive{
    display: Block;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-one{
    padding: 80px 20px;
}

.swiper-two{
    padding: 15px 20px;
}

.swiper-slide {
    text-align: center;
    font-size: clamp(14px, 2vw, 18px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-ser-main-slide{
    height: 120px;
    border-radius: 10px !important;
}
.img-ser-main-slide div img{
    border-radius: 10px !important;
}

.category-slide{
    width: clamp(200px,25vw,300px);
    height: clamp(289px,40vw,600px);
    border-radius: 30px;
    scroll-snap-align: center;
    transform: scale(0.8);
    transition: 0.3s;
    padding: clamp(23px, 5vw ,80px);
}
p{
    font-size: clamp(12px ,1.8vw,16px) !important;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-on-surface{
    background: #211b11;
}
.bg-surface{
    background: #fff8f3;
}
.bg-surface{
    background: rgba(255, 248, 243, 0.1);
}
.text-surface{
    color: #fff8f3;
}
.text-primary-fixed-dim{
    color: #ffba20;
}
.opacity-70{
    opacity: 0.7;
}
.opacity-50{
    opacity: 0.5;
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    padding: 7px 5px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}
.hover-footer-text:hover{
    color: #ffba20;
}
.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}
.dashboard-column {
    padding: 0 10px;
    box-sizing: border-box;
}
.dashboard-column-left {
    flex: 1 1 280px;
    width: 100%;
}
.dashboard-column-right {
    flex: 2 1 560px;
    width: 100%;
}
.card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.card h2 {
    margin-top: 0;
    font-size: 1.25rem;
    margin-bottom: 16px;
}
.account-item,
.summary-item {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.account-item strong,
.summary-item span {
    color: #333;
}
.summary-item strong {
    font-size: 1.35rem;
}
.invoice-table {
    overflow-x: auto;
}
.invoice-table::-webkit-scrollbar { 
    display: none; 
}
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}
table th,
table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
}
table th {
    background: #f8f8f8;
    font-weight: 600;
}
.invoice-card table tr:last-child td {
    border-bottom: none;
}
.bg-dashbord-details{
    background: linear-gradient(135deg,rgba(251, 191, 36, 0.07),rgba(245, 158, 11, 0.2)) !important;
    width: 100%;
    padding-top: 200px;
    position: relative;
}
.profile-pic{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: -100px;
    overflow: hidden;
}
.profile-pic img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.profile-edit{
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}
.pt-150{
    padding-top: 150px;
}

.no-focus:focus,
.no-focus:active,
.no-focus:focus-visible{
    outline: none !important;
    box-shadow: none !important;
}
 
  /* Hero */
  .hero-signup{
    text-align:center;
    width: 100%;
    margin:0 auto;
    padding:34px 20px 12px;
  }
  .hero-signup h1{
    font-size:2.5rem; font-weight:700; line-height:1.2; margin-bottom:12px;
  }
  .hero-signup p{
    font-size:1.05rem;
  }
 
  /* Cards */
  .choice-wrap{
    display:flex; justify-content:center; gap:28px; flex-wrap:wrap;
    padding:46px 6% 20px;
    max-width:920px; margin:0 auto;
  }
  .choice-card{
    width:340px;
    border:1.5px solid black;
    border-radius:20px;
    padding:14px;
    background:white;
    text-align:left;
    cursor:pointer;
    text-decoration:none;
    color:inherit;
    display:block;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .choice-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 40px -18px rgba(247,148,29,0.35);
    border-color:orange;
  }
  .choice-visual{
    height:210px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    position:relative;
    overflow:hidden;
  }
  .choice-visual .glyph{
    width:88px; height:88px;
    display:flex; align-items:center; justify-content:center;
    font-size:2.6rem;
    position:relative; z-index:1;
  }
  .choice-visual::before{
    content:""; position:absolute; inset:0;
  }
  .visual-client{
    background:linear-gradient(135deg, #FFE9C2 0%, #FFD48A 100%);
  }
  .visual-vendor{
    background:linear-gradient(135deg, #FFDDB0 0%, #F7941D 100%);
  }
  .choice-visual .glyph{color:#C96500;}
  .visual-vendor .glyph{color:#7A3B00;}
 
  .choice-title{
    font-family:'Poppins',sans-serif;
    font-size:1.25rem; font-weight:700;
    display:flex; align-items:center; gap:8px;
    padding:0 8px;
    margin-bottom:4px;
  }
  .choice-title .arrow{transition:transform .18s ease; color:#F7941D;}
  .choice-card:hover .choice-title .arrow{transform:translateX(5px);}
  .choice-sub{
    font-size:0.9rem; color:#6B5F52;
    padding:0 8px 6px;
  }
 
  .login-hint{
    text-align:center; font-size:0.95rem; color:#6B5F52;
    margin:44px 0 60px;
  }
  .login-hint a{color:#E07C00; font-weight:700; text-decoration:none;}
  .login-hint a:hover{text-decoration:underline;}

    /* Layout */
  .wrap{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    min-height:calc(100vh - 73px);
  }
 
  /* Left panel */
  .pitch{
    background:
      radial-gradient(circle at 15% 15%, rgba(255,255,255,0.5), transparent 40%),
      linear-gradient(155deg, #F7941D 0%, #E07C00 55%, #C96500 100%);
    color:white;
    padding:60px 7% 50px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .pitch::before{
    content:"";
    position:absolute; right:-90px; bottom:-90px;
    width:280px; height:280px; border-radius:50%;
    background:rgba(255,255,255,0.08);
  }
  .pitch::after{
    content:"";
    position:absolute; right:60px; top:-60px;
    width:140px; height:140px; border-radius:50%;
    background:rgba(255,255,255,0.07);
  }
  .pitch-eyebrow{
    font-size:0.78rem; font-weight:700; letter-spacing:0.14em;
    text-transform:uppercase; opacity:0.85; margin-bottom:16px;
  }
  .pitch h1{
    font-size:2.5rem; font-weight:700; line-height:1.15; margin-bottom:16px;
  }
  .pitch p.lead{
    font-size:1.02rem; line-height:1.6; opacity:0.92; max-width:420px; margin-bottom:38px;
  }
  .stat-row{
    display:flex; gap:28px; flex-wrap:wrap; margin-bottom:44px;
  }
  .stat-row div{min-width:110px;}
  .stat-num{font-family:'Poppins',sans-serif; font-size:1.7rem; font-weight:700;}
  .stat-label{font-size:0.78rem; opacity:0.85; margin-top:2px;}
 
  .why-list{list-style:none; display:flex; flex-direction:column; gap:16px; position:relative; z-index:1;}
  .why-list li{
    display:flex; gap:14px; align-items:flex-start;
    font-size:0.92rem; line-height:1.5;
  }
  .why-ico{
    width:34px; height:34px; flex:0 0 34px; border-radius:10px;
    background:rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem;
  }
  .why-list strong{display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.95rem;}
  .why-list span{opacity:0.88;}
 
  .pitch-foot{
    position:relative; z-index:1; margin-top:44px;
    font-size:0.82rem; opacity:0.85; border-top:1px solid rgba(255,255,255,0.25);
    padding-top:18px;
  }
 
  /* Right panel — form */
  .form-side{
    padding:48px 8% 60px;
    display:flex; flex-direction:column;
  }
  .form-head h2{font-size:1.55rem; font-weight:700; margin-bottom:6px;}
  .form-head p{color:#6B5F52; font-size:0.95rem; margin-bottom:30px;}
 
  /* Stepper */
  .steps{
    display:flex; align-items:center; margin-bottom:38px;
  }
  .step{
    display:flex; align-items:center; gap:10px; flex:1; position:relative;
  }
  .step-circle{
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:0.85rem;
    background:#FFF4DF; color:#6B5F52;
    border:2px solid #F0E2CC;
    flex-shrink:0;
    transition:all .25s ease;
  }
  .step-label{font-size:0.78rem; font-weight:600; color:#6B5F52; white-space:nowrap; display:none;}
  .step-line{flex:1; height:2px; background:#F0E2CC; margin:0 4px;}
  .step.active .step-circle{background:#F7941D; border-color:#F7941D; color:#fff;}
  .step.active .step-label{color:#221A12;}
  .step.done .step-circle{background:#1F9D55; border-color:#1F9D55; color:#fff;}
 
  /* Form panels */
  .panel{display:none; flex-direction:column; gap:20px;}
  .panel.active{display:flex;}
 
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  
  .field{display:flex; flex-direction:column; gap:7px;}
  .field label{font-size:0.85rem; font-weight:600; color:#221A12;}
  .field .hint{font-size:0.76rem; color:#6B5F52; font-weight:400;}
  .field input, .field select, .field textarea{
    border:1.5px solid #F0E2CC; border-radius:11px;
    padding:12px 14px; font-family:'Inter',sans-serif; font-size:0.94rem;
    color:#221A12; background:#FFFAF0;
    outline:none; transition:border-color .15s, background .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:#F7941D; background:#fff;
  }
  .field textarea{resize:vertical; min-height:80px;}
 
  /* category chips */
  .chip-grid{display:flex; flex-wrap:wrap; gap:10px;}
  .chip{
    border:1.5px solid #F0E2CC; border-radius:999px;
    padding:9px 16px; font-size:0.85rem; font-weight:600;
    color:#6B5F52; background:#FFFAF0; cursor:pointer;
    user-select:none; transition:all .15s;
  }
  .chip input{display:none;}
  .chip:hover{border-color:#F7941D;}
  .chip.selected{background:#F7941D; border-color:#F7941D; color:#fff;}
 
  /* upload boxes */
  .upload-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .upload-box{
    border:1.8px dashed #F0E2CC; border-radius:14px;
    padding:22px 16px; text-align:center; cursor:pointer;
    background:#FFFAF0; transition:border-color .15s, background .15s;
  }
  .upload-box:hover{border-color:#F7941D; background:#fff8ec;}
  .upload-box .u-ico{font-size:1.6rem; margin-bottom:8px;}
  .upload-box .u-title{font-weight:600; font-size:0.88rem; margin-bottom:3px;}
  .upload-box .u-sub{font-size:0.75rem; color:#6B5F52;}
  .upload-box input{display:none;}
 
  /* nav buttons */
  .form-nav{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:32px; padding-top:22px; border-top:1px solid #F0E2CC;
  }
  .btn{
    font-family:'Inter',sans-serif; font-weight:700; font-size:0.92rem;
    padding:13px 26px; border-radius:11px; border:none; cursor:pointer;
    transition:transform .12s, box-shadow .12s, background .15s;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{
    background:orange; color:#fff;
    box-shadow:0 8px 18px -6px rgba(247,148,29,0.55);
  }
  .btn-primary:hover{background:#E07C00;}
  .btn-ghost{
    background:transparent; color:#6B5F52; border:1.5px solid #F0E2CC;
  }
  .btn-ghost:hover{border-color:#6B5F52; color:#221A12;}
  .btn[disabled]{opacity:0.4; cursor:not-allowed;}
 
  .terms{font-size:0.78rem; color:#6B5F52; margin-top:14px; line-height:1.5;}
  .terms a{color:#E07C00; font-weight:600; text-decoration:none;}
 
  .login-hint{
    text-align:center; font-size:0.88rem; color:#6B5F52; margin-top:24px;
  }
  .login-hint a{color:#E07C00; font-weight:700; text-decoration:none;}
 
  .success{
    display:none; flex-direction:column; align-items:center; text-align:center;
    padding:40px 10px; gap:14px;
  }
  .success.active{display:flex;}
  .success .s-ico{
    width:70px; height:70px; border-radius:50%; background:#E9F9EE; color:#1F9D55;
    display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:6px;
  }
  .success h3{font-size:1.35rem; font-weight:700;}
  .success p{color:#6B5F52; font-size:0.94rem; max-width:380px; line-height:1.55;}
@media (max-width:1200px) {
    .search-bar{
        min-width: 220px !important;
    }
    .place-bar.one{
        display: none !important;
    }
    .place-bar.two{
        display: none !important;
    }
    .placeHome{
        display: flex !important;
    }
}
@media(min-width:1180px){
    .step-label{display:block;}
}
@media (max-width:1098px) {
    .search-bar{
        min-width: 120px !important;
    }
    .nav{
        display: none !important;
    }
    .icon-btn{
        display: none !important;
    }
    .prev-btn-one, .next-btn-one{
        display: none !important;
    }
    .prev-btn , .next-btn{
        display: none !important;
    }
    .place-bar.one{
        display: none !important;
    }
    .place-bar.two{
        display: none !important;
    }
    .placeHome{
        display: flex !important;
    }
    .prev-btn-ser,.next-btn-ser{
        display: none !important;
    }
    .notification{
        display: none !important;
    }
    .hambar{
        display: block !important;
    }
}
@media (max-width: 960px){
    .wrap{grid-template-columns: 1fr;}
}
@media (max-width: 768px) {
    .container, .container-sm {
        max-width: 740px !important;
        width: 100% !important;
    }
    .dashboard-container {
        flex-direction: column;
    }
    .hero-signup h1{font-size:1.9rem;}
    .choice-card{width:100%; max-width:400px;}
}
@media (max-width: 700px) {
}
@media(max-width:560px){
    .field-row{
        grid-template-columns:1fr;
    }
}
@media (max-width:540px) {
    .header{
        padding: 0px !important;
    }
    .sec-hero{
        display: block !important;
        margin-top: 35px !important;
    }

    .hero-left{
        width: 100% !important;
        margin-bottom: 25px !important;
    }

    .sec-about .bg-right{
        background: transparent !important;
        border: none !important;
    }

    .placeBarHome{
        width: 30% !important;
        font-size: clamp(10px ,1vw , 18px) !important;
    }
}
@media (max-width:370px) {
    .services-boxs{
        gap: 11px;
    }
}