:root {
    --ThemeColor: #FF7602;
    --SecondaryColor: #321700;
    --White: #fff;
    --orange: #FF7602;
    --ment: #62baa1;
    --dark: #3D4F47;
    --DefaultColor: #f1f1f1;
    --grayColor: #ededed;
    --font-20px: 20px;
    --font-25px: 25px;
    --font-30px: 30px;
    --font-35px: 35px;
    --font-40px: 40px;
    --font-45px: 45px;
    --font-50px: 50px;
    --font-55px: 55px;
    --font-60px: 60px;
}

@font-face {
    font-family: PoppinsBold;
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
}
@font-face {
    font-family: PoppinsMedium;
    src: url(../fonts/Poppins/Poppins-Medium.ttf);
}
@font-face {
    font-family: PoppinsRegular;
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}
.theme-orange {
    --ThemeColor: #FF7602; /* Orange */
}

.theme-ment {
    --ThemeColor: #62baa1; /* MentGreen */
}

.theme-dark {
    --ThemeColor: #3D4F47; /* Dark */
}
body {
    background-color: var(--ThemeColor);
}
    body.dark-mode {
        background-color: #000000 !important; /* Dark background */
        color: #ffffff; /* White text */
    }
body , *{
    font-family:PoppinsMedium;
}
h1, h2, h3, h4 {
    font-family: PoppinsBold;
}
h5, h6 {
    font-family: PoppinsMedium;
}
p, a, span {
    font-family: PoppinsRegular;
}
.menu-item .menu-link , .menu-state-title-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    color: var(--dark) !important;
}
.landing-header {
   
    background: var(--White);
}
.homeHero {
    background: var(--ThemeColor);
    height:660px;
}

.landing-header .btn.btn-icon {
    background: var(--ThemeColor);
}

    .landing-header  .btn.btn-icon i {
        color: #fff !important;
    }
/*.landing-header .flex-equal {
    padding:10px;
    align-items: center !important;
    width: 100%;
    justify-content: space-between;
}*/
 
.custOrange.btn:hover , .custOrange.btn:focus , .custOrange.btn:active {
    background: var(--ThemeColor) !important;
}


.menu-link.active {
    position: relative; /* Position relative for the pseudo-element */
    padding-bottom: 10px; /* Add padding to avoid overlap with the border */
    background:transparent !important;
    color:var(--ThemeColor) !important;
}

    .menu-link.active::after {
        content: '';
        position: absolute;
        left: 40%;
        bottom: 0;
        width: 30%;
        height: 2px;
        background-color: var(--ThemeColor);
        transform: translateX(-50%);
        transition: width 0.3s;
        border-radius: 50px;
    
    }

    /* Optional: Change the border width on hover */
    .menu-link.active:hover::after {
        width: 50%; /* Expand to full width on hover */
        right: 0;
    }

.custOrange{
    background:var(--ThemeColor);
}

.colorItem {
    height: 20px;
    width: 20px;
    padding: 10px;
    border-radius: 50px;
    display: block;
}
.block-orange {
  
    background: var(--orange);
    
}
.block-ment {
  
    background: var(--ment);
    
}
.block-dark {
  
    background: var(--dark);
    
}
.dropdown-item {
    display: flex;
    align-items: center;
}
    .langIcon {
    width: 20px;
    height: 20px;
    display: contents;
    cursor: pointer;
    margin-top: 10px;
}
    .langIcon img {
        object-fit: scale-down;
    }

.dropdown-menu.show {
    display: block;
    inset: 0px auto auto 0px !important;
    margin: 0px !important;
    transform: translate3d(0px, 50px, 50px) !important;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}
.landing-curve {
    height: 310px;
    position: absolute;
    top: 100%;
    max-width: 103%;
    width: 100%;
    left: 0px;
}
    .landing-curve img{
    height:100%;
    width:100%;
}

.blob {
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 0;
    animation: morph 6s infinite;
    position: relative;
    left: auto;
    right: 0;
    top: 10%;
    overflow: visible;
    float: right;
}

@keyframes morph {
    0% {
        border-radius: 50% 40% 60% 40% / 40% 60% 40% 60%;
    }

    25% {
        border-radius: 40% 60% 50% 60% / 60% 40% 50% 40%;
    }

    50% {
        border-radius: 60% 50% 40% 50% / 50% 40% 60% 50%;
    }

    75% {
        border-radius: 50% 60% 40% 60% / 40% 50% 60% 50%;
    }

    100% {
        border-radius: 50% 40% 60% 40% / 40% 60% 40% 60%;
    }
}

.ImgCover {
    height: 469px;
    /*width: 100%;*/
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -32px;
}
.ImgCover img{
    /*height:100%;*/
    width:100%;
}

/*.container {
    max-width: 1199px;
}*/

.heroHeader h1 , .heroHeader h5{
    font-size: var(--font-35px);
}

/*----------shapes on header---------------*/
.shap {
    position: absolute;
    height: 20px;
    width: 20px;
   
}
    .shap img {
        height:100%;
        width: 100%;
    }
    .shap.shap1 {
        left: 5%;
        top: 43%;
        animation: morph1 6s infinite;
    }
    .shap.shap2 {
        right: 5%;
        top: 20%;
        animation: morph2 6s infinite;
    }
    .shap.shap3 {
        left: 5%;
        bottom: 20%;
        animation: morph1 6s infinite;
    }
    .shap.shap4 {
        right: 10%;
        bottom: 10%;
        animation: morph2 6s infinite;
    }

@keyframes morph1 {
    0% {
        transform:translate(20px ,30px);
    }

    25% {
        transform: translate(40px ,50px);
    }

    50% {
        transform: translate(50px,60px);
    }

    75% {
        transform: translate(60px,70px);
    }

    100% {
        transform: translate(70px,80px);
    }
}
@keyframes morph2 {
    0% {
        transform:translate(-20px ,0px);
    }

    25% {
        transform: translate(0px ,-30px);
    }

    50% {
        transform: translate(-30px,0px);
    }

    75% {
        transform: translate(-40px,0px);
    }

    100% {
        transform: translate(0px,-30px);
    }
}

/*----------------------------------partners-----------------------------*/
.PartnerImg {
    width: 180px !important;
    height: 60px !important;
    margin:0px;
}
.PartnerImg img {
    width: 100% !important;
    height: 100% !important;
    object-fit:scale-down;
}

.Partners {
    position: relative;
    top: 1%;
    bottom: 10%;
    margin-bottom: 10%;
}
.flex-root {
    background: #f6f4fe;
}
 h1 {
    font-size: 35px;
    font-weight: bold;
}



.Partners .tns.tns-default .tns-outer {
    height: 200px;
}

.Partners .tns .tns-nav {
    position: absolute;
    width: 100%;
    bottom: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 20%;
}
    .Partners .tns .tns-nav button {
        background-color: var(--grayColor);
        width: 10px;
        height:10px;
        border-radius:50px;
    }
    .Partners .tns .tns-nav button.tns-nav-active{
        background-color:var(--ThemeColor);
    }
   /*------------------------features----------------------*/
.text-orange {
    color: var(--ThemeColor) !important;
}

 .HeaderTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Features .FeatureDetails {
    background: var(--White);
    border-radius: 20px;
    height: 100%;
    margin-top: 10% !important;
}
.Features .leftCards .item {
    display: flex;
    flex-direction: column;
    align-items: end;
}
.Features .item .icon {
    height: 90px;
    width: 90px;
}
.Features .item .icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.Features .leftCards .details{
    text-align:end;
}

.Features .mobileImg {
    width: 355px;
    height: 550px;
    top: -88.78px;
   position:relative;
}
    .Features .mobileImg img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }


    /*--------------------------about app--------------------------*/

.AboutApp .ImgCover {
    height: 300px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 30px;
    left: 40px;
    right: auto;
}

.AboutApp .blob {
    width: 370px;
    height: 370px;
    background: var(--ThemeColor);
   
    float: left;
    align-items: center;
    display: flex;
    margin: auto;
}

.listofData li{
    margin-bottom:10px;

}
.listofData li i{
   color:var(--ThemeColor);
}

/*-------------------------services--------------------------*/

.Services .serviceDetails {
    background: var(--White);
    border-radius: 20px;
    height: 100%;
    padding:20px 10px;
}

.Services .card{
    padding:10px;
    border-radius:20px;
    border:1px solid var(--DefaultColor);
}
    .Services .card .card-text {
        height: 50px;
        white-space: normal;
        margin-bottom: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }
    .Services .card .servImg {
        width: 220px;
        height: 190px;
    }
    .Services .card .servImg img {
        width:100%;
        height: 100%;
        border-radius:20px;
    }


    .Services .card .innerCar {
        text-align: center;
        box-shadow: 0px 1px 2px .7px #eee;
        border-radius: 20px;
        padding: 10px 0 0;
        height:92px;
    } 
    .Services .card .innerCar p {
        font-size:13px;
    }
        .Services .card .innerCar .Icon {
            width: 32px;
            height: 32px;
            margin:auto;
        }
            .Services .card .innerCar .Icon img {
                width: 100%;
                height: 100%;
            }


            /*-----------------------------------faq--------------------------------*/
.FAQ{
    margin-bottom:5%;
}
.FAQ .accordion-item {
    border-radius: 12px;
    margin-bottom: 20px;
}
.FAQ .accordion-button:not(.collapsed)::after {
    background-image: url() !important;
    content:"-";
    color:var(--ThemeColor) !important;
        

}
.FAQ .accordion-button:not(.collapsed) {
    color: var(--ThemeColor) !important;
    background-color: var(--White);
    border-radius:12px;
}
.FAQ .accordion-button:is(.collapsed) {
    color: var(--SecondaryColor) !important;
    border-radius: 12px;
}
.FAQ .accordion-button:is(.collapsed)::after {
    background-image: url() !important;
    content:"+";
    color:var(--SecondaryColor);
        

}

/*----------------------------subscribe---------------------------*/
.Subscribe{
    margin-top:5%;
}
.Subscribe .bg-subscribe {
    position: relative;
    background-image: url(../media/LandingImages/backgroundOfSubscribe.jfif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 550px;
    border-radius: 20px;
}

    .Subscribe .row .overlay {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--ThemeColor);
        opacity:.9;
        border-radius: 20px; 
        pointer-events: none; 
    }

.Subscribe .LeftInfo {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 550px;
    padding-left:5%;
}

    .Subscribe .LeftInfo .subscribBtn{
        background:var(--White) !important;

    }


.Subscribe .mobileImg {
    width: 600px;
    height: 600px;
    position: absolute;
    top: -83px;
   /* left: auto;*/
    right: -4%;
}
.Subscribe .mobileImg img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.SubscribeHeader h1 {
    font-family: PoppinsRegular !important;
    font-weight: 500;
} 

/*-----------------------intrface slider----------------------------*/

.Interface .Item {
    height: 600px;
    width: 200px;
}
    .Interface .Item img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        border-radius: 20px;
    }

.Interface .slick-slide.slick-current.slick-active.slick-center .Item{
    transform: scale(1.2);
    transition:all .6s ease-in-out;
}
/*----------------------topFooter-----------------------------*/
.landing-dark-bg2 {
    background-color: var(--ThemeColor);
}
.TopFooter .subscribBtn {
    background: var(--White) !important;
}

.TopFooter .card-rounded {
    background: linear-gradient(90deg, var(--ThemeColor) 0%, var(--ThemeColor)    100%)
}

.landing-dark-bg {
    background-color: var(--ThemeColor);
}

.LogoFooter .LogoImg{
    height:80px;
    width:80px;
}
.LogoFooter .LogoImg img{
    height:100%;
    width:100%;
    object-fit:contain
}

.LogoFooter h4 {
    width: 80px;
    text-align:center;
    align-items:center;
    justify-content:center;
}

.BottomFooter .overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ThemeColor);
    opacity: .4;
}

.landing-dark-separator {
    border-top: 1px dashed #ccc;
}

.FooterSection{
    position:relative;
}

.slider {
    width: 100%;
    margin: 100px auto;
}

.slick-slide {
    margin: 0px 20px;
}

    .slick-slide img {
        width: 100%;
    }

.slick-prev:before,
.slick-next:before {
    color: black;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.slick-dots li button:before {
    font-size: 30px;
 
}
.slick-dots li.slick-active button:before {
    color: var(--ThemeColor);
    opacity: 1;
}


.regular .slick-slide {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.regular .slick-active {
    opacity: 1;
}


/*-------------------------shapes sides--------------------------*/


.TopLeftShape  {
    top: 20%;
    position: absolute;
    left: 0;
    right: auto;
    width: 200px;
    height: 722px;
}

    .TopLeftShape img, .ToprightShape img {
        height: 100%;
        width: 100%;
    }
.ToprightShape {
    top: -36%;
    position: absolute;
    right: 0;
    left: auto;
    width: 154px;
    height: 565px;
}


.scrolltop {
  
    background-color: var(--ThemeColor);
    opacity: 1;
  
    border-radius: 25px;
    border:2px solid #fff;
}

    .scrolltop:hover {
        background-color: var(--ThemeColor);
    }

    /*------------------------------- modal-------------------------------*/
.modal-header .btn-close {
    border-radius: 50px;
    border: 1px solid #555;
    height: 5px;
    width: 5px;
}
    .modal .modal-content {
    
    border-radius: 20px;
}
.modal .modal-footer {
    border-top: 0;
}

.modal .modal-header{
    border-bottom:0;
}
.modal .modal-body span {
    font-size: 9px;
}

.ContactUs .fa-solid {
    color:var(--ThemeColor);
}

.modal .modal-body .line{
    height:1px;
    width:150px;
    border-radius:8px;
    background:#ededed;
}

.joinForm {
    width:100%;
    border-radius:20px;
    background: #FFF2E696;
}

    .joinForm .Partner{
        background:#fff;
        border-radius:50px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:5px 10px;
        height:50px;
    }
    .joinForm input.form-control{
        border: none;
        padding: 5px 10px;
        height: 50px;
        border-radius: 50px;
    }
     .joinForm textarea.form-control {
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
    }
.JoinHeader{
    position:relative;
    bottom:10%;
}
.JoinHeader .CirclShape {
    height: 40px;
    width: 40px;
    background: linear-gradient(2deg, var(--ThemeColor)  24%, #fff 100.3%);
    border-radius: 50px;
    position: absolute;
    top: -15px;
    left: -3px;
    z-index: 0;
}

.LeftSide {
    position: relative;
    height: 100%;
    top: 11%;
}

    .LeftSide .details {
        position: relative;
        top: -34px;
    }
.modal .modal-body span {
    font-size: 10px;
    font-weight: 700;
}
.musaedTitle {
    color: #fff;
}

.slick-dots li.slick-active button:before, .slick-dots li button:before {
    font-size:35px !important;
}

.slick-dots li.slick-active button:before {
    color: var(--ThemeColor) !important;
}