@import 'global';

/**********************************************
    Start Public Classes
**********************************************/
.section {
    position: relative;
    padding: 70px 0 ;
    overflow: hidden;
}

.swiper-container {
    // pagination
    .swiper-pagination {
        bottom: 0;
        .swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            border-radius: 25px;
            outline: 1px solid #ccc;
            border: 4px solid #fff;
        }
        .swiper-pagination-bullet-active {
            background: var(--purple) !important;
            outline-color: var(--purple);
        }
    }
    // nav buttons
    .swiper-button-next, 
    .swiper-button-prev {
        background-image: unset;
        width: 40px;
        height: 40px;
        border: 1px solid transparent;
        border-radius: 50%;
        background-image: unset;
        background-color: #fff;
        border: 2px solid #eee;
        transition: all .3s linear;
        opacity: 1;
        &::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 15px;
            color: var(--primary);
            transition: all .3s linear;
        }
        &:hover{
            border-color: var(--secondary);
            background-color: var(--secondary);
            &::before{
                color: #fff;
            }
        }
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev{
        right: 2%;
        left: auto;
        &::before {
            content: '\f054';
        }
    }
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next{
        left: 2%;
        right: auto;
        &::before {
            content: '\f053';
        }
    }
}

.butn {
    position: relative;
    padding: .8rem 2rem;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: bold;
    i {
        margin-inline-end: 7px;
    }
    &.sm_butn {
        padding: 0;
        width: 50px;
        height: 50px;
    }
    &.primary_butn {
        background-color: var(--primary);
        color: #fff;
    }
    &.primary_border_butn {
        border: 1px solid var(--primary);
        color: var(--primary);
        background-color: transparent;
    }
    &.secondary_butn {
        background-color: var(--secondary);
        color: #fff;
    }
    &.secondary_border_butn {
        border: 1px solid var(--secondary);
        color: var(--secondary);
        background-color: transparent;
    }
    &.white_butn {
        background-color: #fff;
        color: #333;
    }
    &.white_border_butn {
        background-color: transparent;
        color: #fff;
        border: 1px solid #fff;
    }
    &.purple_border_butn {
        border: 1px solid var(--purple);
        color: var(--purple);
    }
    &.purple_butn {
        color: #fff;
        background-color:  var(--purple);
        border-color:  var(--purple);
    }
    &:hover {
        background-color: #4a2843;
        border-color: #4a2843;
        color: #fff !important;
        i ,
        .icon {
            animation: pulse .5s both infinite alternate-reverse;
        }
        .icon {
            filter: var(--filterWhite);
        }
    }
}

.icon-18 {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.icon-15 {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.title_bb {
    position: relative;
    width: fit-content;
    &::after {
        content: '';
        width: 90%;
        height: 5px;
        border-radius: 25px;
        position: absolute;
        bottom: 2px;
        inset-inline-start: 1px;
        z-index: -1;
        background-color: var(--secondary);
    }
}

.line{
    width: 70px;
    object-fit: contain;
}
/**********************************************
   Start Edit Navbar & Footer
**********************************************/

//start Navbar
.navs-container {
    .top_nav {
        padding: 10px 0;
        background-color: var(--secondary);
        .links a {
            margin-inline-end: 20px;
            font-size: 12px;
            color: #fff;
            i {
                color: #fff;
                margin-inline-end: 5px;
            }
            &:hover {
                color: #fff !important; 
            }
        }
        .social_links a {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-inline-end: 7px;
            background-color: #fff;
            color: #888;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            &:hover {
                background-color: var(--primary);
                color: #fff !important;
            }
        }
    }
    .navbar{
        position: relative;
        z-index: 9;
        padding: 0;
        .logo {
            width: 155px;
            object-fit: contain;
        }
        .nav-link {
            position: relative;
            margin: 0;
            padding: 2rem 1.5rem;
            font-size: 14px;
            color: #fff;
            border-inline-end: 1px solid #683D60;
            &:focus {
                color: #fff;
            }
            &.active {
                color: #fff;
                font-weight: bold;
            }
            &:last-child {
                margin-inline-end: 0;
            }
        }
        .butn {
            padding: 0.7rem 1.5rem !important;
        }
        .has_dropdown {
            position: relative;
            &::after {
                content: '\f0dd';
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                display: inline-block;
                position: absolute;
                inset-inline-end: 13px;
                top: 37px;
                font-size: 9px;
                color: #eee;
            }
            .drop_down {
                background-color: #fff;
                position: absolute;
                min-width: 200px;
                box-shadow: 3px 6px 10px 0 #0001;
                border: 1px solid #eee;
                opacity: 0;
                transform: translateY(10px);
                visibility: hidden;
                transition: all .3s linear;
                a {
                    font-size: 14px;
                    display: block;
                    padding: .95rem 1rem;
                    background-color: #fff;
                    width: 100%;
                    &:hover {
                        background-color: #f9f9f9;
                        padding-inline-start: 1.5rem;
                    }
                }
            }
            &:hover .drop_down {
                opacity: 1;
                transform: translateY(0px);
                visibility: visible;
            }
        }
        &::before {
            @include overlay;
            background-color: var(--purple);
            width: 78%;
            right: unset;
            left: unset;
            inset-inline-end: 0;
            inset-block-start: unset;
            clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
            max-width: calc(100% - 200px);

        }
        .navbar-toggler
        {
            width: 40px;
            height: 40px;
            cursor: pointer;
            background-color: rgba($color: #ddd, $alpha: .3);
            border: none;
            position: relative;
            &.active{
                .navbar-toggler-icon {
                    box-shadow: 0px 0px 0px grey;
                    background: rgba(0, 0, 0, 0);
                    &::before {
                        top: 0px !important;
                        transform: rotate(45deg);
                    }
                    &::after {
                        top: 0px !important;
                        transform: rotate(135deg);
                    }
                }
            }
            .navbar-toggler-icon
            {
                width: 25px;
                height: 2px;
                background: var(--primary);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: 0.5s;
                &::after,
                &::before
                {
                    content: "";
                    position: absolute;
                    width: 25px;
                    height: 2px;
                    background: var(--primary);
                    transition: 0.5s;
                }
                &::after{
                    top: -6px;
                    right: 0px;
                }
                &::before{
                    top: 6px;
                    right: 0px;
                }
            }
        }
    }
}


//start Footer
.footer {
    .col-lg-4:last-child .content {
        border-inline-end: .5px solid transparent;
    }
    .content {
        padding: 100px 3vw ;
        border-inline-end: .5px solid rgba($color: #94AACD, $alpha: .2);

        .logo {
            width: 180px;
            object-fit: contain;
            margin-top: -25px;
        }
        .title {
            font-size: 20px !important;
        }
        .det {
            color: #6B5858;
            line-height: 2;
        }
        .social_links a {
            width: 35px;
            height: 35px;
            border-radius: 6px;
            margin-inline-end: 7px;
            border: 1px solid var(--purple);
            color: var(--purple);
            display: flex;
            justify-content: center;
            align-items: center;
            &:hover {
                background-color: var(--purple);
                color: #fff !important;
            }
        }
        .title_bb::after {
            width: 50px;
            bottom: 1px;
        }
        .links a {
            display: block;
            color: #8D8D8D;
            margin-bottom: 10px;
            font-size: 15px;
        }
        .contact_items .item {
            margin-bottom: 20px;
            align-items: start;
            .icon {
                object-fit: contain;
                font-size: 15px;
                color: #929292;
                margin-inline-end: 10px;
                filter: invert(64%) sepia(1%) saturate(0%) hue-rotate(353deg) brightness(92%) contrast(87%);
            }
            .p {
                font-size: 15px;
                color: #8D8D8D;
            }
        } 
    }
    .foot {
        border-top: .5px solid rgba($color: #94AACD, $alpha: .2);
        color: #8D8D8D;
    }
}

/**********************************************
    Start Edit Home Page 
**********************************************/

//start header 
.header {
    .item {
        overflow: hidden;
        opacity: 0;
        .text_box {
            .title {
                font-size: calc(1.5vw + 35px);
                line-height: 1.5;
            }
            .p {
                font-size: 18px;
                color: #373C58;
                line-height: 2;
            }
            .butn {
                box-shadow: 3px 8px 10px 0 rgba($color: #000000, $alpha: .15);
            }
        }
        .img_box {
            height: 650px;
            position: relative;
            .sec-img {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
            }
        }
    }
    .swiper-slide-active .item{
        opacity: 1;
        .subtitle {
            animation: fadeInUp 1.3s both;
        }
        .title {
            animation: fadeInUp 1.3s both;
            animation-delay: .2s;
        }
        .p {
            animation: fadeInUp 1.3s both;
            animation-delay: .4s;
        }
        .butn {
            animation: fadeInUp 1.3s both;
            animation-delay: .6s;
        }
        .sec-img {
            animation: fadeInRight .9s  both;
        }
    }
    .swiper-pagination {
        bottom: 40px;
    }
}

//start about-sec
.about-sec {
    .img_box {
        height: 650px;
        position: relative;
        padding: 0 2vw;
        .first_box {
            height: 60%;
            width: 53%;
            position: absolute;
            right: 0;
            top: 0;
            &::before {
                content: '';
                width: 150px;
                height: 180px;
                background-color: var(--secondary);
                position: absolute;
                bottom: -15px;
                right: -15px;
                z-index: -1;
            }
        }
        .second_box {
            height: 60%;
            width: 53%;
            position: absolute;
            left: 0;
            top: 20%;
            &::before {
                content: '';
                width: 150px;
                height: 180px;
                background-color: var(--purple);
                position: absolute;
                top: -15px;
                left: -15px;
                z-index: -1;
            }
        }
        .third_box {
            height: 50%;
            width: 70%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            &::before {
                content: '';
                width: 200px;
                height: 120px;
                background-color: var(--primary);
                position: absolute;
                bottom: -15px;
                left: -15px;
                z-index: -1;
            }
        }
        .sec-img {
            border-radius: 8px;
            box-shadow: 10px 3px 15px 0 #0001;
        }

    }
    .text_box {
        padding-inline-end: 3vw;
        .title {
            color: #2C476B;
        }
        .main_title {
            font-size: calc(.8vw + 35px);
        }
        .p {
            line-height: 2;
            color: #202020;
        }
    }
}

//start geographical-sec
.geographical-sec {
    background-color: var(--purple);
    .sec-head {
        .title {
            font-size: 48px;
        }
    }
    .nav-link  {
        width: 170px;
        height: 60px;
        background-color: #7D4B73;
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
        margin-inline-end: 8px;
        font-size: 16px;
        &.active {
            background-color: #fff;
            color: var(--purple);
        }
    }
    .region_card {
        position: relative;
        height: 500px;
        overflow: hidden;
        .txt_box {
            text-align: start;
            background-color: rgba($color: #fff, $alpha: .8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 2vw 2vw;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            transform-origin: left;
            transform: scale(0, 1);
            transition: transform 500ms ease;
            z-index: 1;
            .p {
                font-size: 12px;
                color: #141010;
            }
        }
        &:hover {
            .txt_box{
                transform: scale(1, 1);
                transform-origin: right;
            }
        }
    }
    // .regions_swiper {
    //     overflow: unset;
    // }
}

//start  locations-sec 
.locations-sec {
    .text_box{
        padding: 0 4vw;
        overflow: hidden;
        .item {
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 2px solid #ddd;
            .icon {
                height: 35px;
                margin-inline-end: 40px;
            }
            .txt {
                .label {
                    margin-bottom: 10px;
                    color: #555;
                    font-size: 17px;
                }
            }
        }
        .social_links .icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            box-shadow: 0 3px 6px 0 rgba($color: #000000, $alpha: .16);
            margin-inline-end: 15px;
            transition: all .3s linear;
            &:hover {
                transform: scale(1.05);
            }
        }   
    }
}

//start partners-sec
.partners-sec {
    .partner_card {
        padding: 25px 10px;
        border: 4px solid #F8F8F8;
        transition: all .3s linear;
        .partner_logo {
            height: 90px;
            width: 80%;
            display: block;
            margin: auto;
            object-fit: contain;
            transition: all .3s linear;
        }
        &:hover {
            border-color: var(--primary);
            .partner_logo{
                transform: scale(1.05);
            }
        }
    }
    // .partners_swiper {
    //     overflow: unset;
    // }
}

//start contact-sec 
.contact-sec  {
    .text_box {
        .title {
            color: #2C476B;
        }
        .p {
            line-height: 2;
        }
    }
    .form_box {
        background-color: #fff;
        padding: 50px 3vw;
        .form-group {
            margin-bottom: 20px;
            .label {
                margin-bottom: .8rem;
                font-weight: bold;
                font-size: 14px;
            }
            input ,
            select{
                height: 55px !important;
            }
        }
        .butn {
            height: 55px;
        }
    }
    .bg ,
    &::before  {
        height: 75%;
    }
    &::before {
        @include overlay;
        background-color: rgba($color: #fff, $alpha: .83);
        z-index: 2;
    }
}

//start downloading-sec 
.downloading-sec  {
    margin-bottom: -100px;
    .text_box {
        .down_item {
            margin: 10px 0;
            .icon_outer {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff;
                margin-inline-end: 15px;
                .icon {
                    height: 20px;
                    object-fit: contain;
                    filter: var(--filterPurple);
                }
            }
            .txt{
                width: calc(100% - 65px);
                .label {
                    font-size: 13px;
                }
                .p {
                    font-size: 12px;
                }
            }
        }
        .down_butns .down_link {
            margin-inline-end: 15px;
            .img {
                width: 130px;
                transition: all .3s linear;
            }
            &:hover .img{
                transform: scale(1.05);
            }
        }
    }
    .sec-img {
        height: 670px;
    }
    &::before {
        @include overlay;
        background-color: var(--purple);
        height: calc(100% - 200px);
        top: 100px;
    }
}


/**********************************************
    Start Edit pg-header
**********************************************/
.pg-header {
    padding: 20px 0 30px 0 ;
    background-color: #eee;
    .bread {
        color: #333;
        .item {
            font-size: 15px;
            color: #333;
            margin: 0 10px;
            .logo {
                width: 50px;
            }
            &::after {
                content: '';
                width: 15px;
                height: 1px;
                background-color: #999;
                display: inline-block;
                margin: 0 10px 0 0px;
            }
            &.active {
                color: var(--purple);
                &::after {
                    display: none;
                }
            }
        }
        a:hover {
            color: var(--primary) !important;
        }
    }
    .logo_pattern {
        position: absolute;
        width: 90%;
        opacity: .02;
        inset-inline-end: -0%;
        bottom: -65px;
    }
}


/**********************************************
    Start Edit about Page 
**********************************************/
//start  about-cards 
.about-cards  {
    background-color: #F8F8F8;
    .about_card {
        background-color: #fff;
        position: relative;
        padding: 50px 15px 40px 15px;
        border-radius: 10px;
        transition: all .3s ease-in-out;
        margin-bottom: 25px;
        height: calc(100% - 25px);
        .icon_outer {
            width: 100px;
            height: 100px;
            border-radius: 25px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 30px auto;
            .icon {
                width: 45px;
                object-fit: contain;
            }
            &::before ,
            &::after {
                content: '';
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                transform: rotate(45deg);
                border-radius: 25px;
                transition: all .3s linear;
            }
            &::before  {
                background-color: #7c4872;
                transform: rotate(45deg) scale(.9);
            }
            &::after {
                background-color: #E8EBFA;

            }
        }
        .card-body {
            text-align: center;
            .title {
                transition: all .3s linear;
            }
            .p {
                transition: all .3s linear;
                font-size: 14px;
                line-height: 1.9;
            }
        }
        &::before {
            content: '';
            width: 100%;
            height: 7px;
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: #7c4872;
            opacity: .07;
            border-radius: 0 0 10px 10px;
            transition: all .3s linear;
            z-index: 6;
        }
        &:hover {
            background-color: var(--purple);
            box-shadow: 0 6px 25px 0 rgba($color: #000000, $alpha: .16);
            &::before {
                height: 15px;
                opacity: 1;
            }
            .icon_outer{
                &::after {
                    background-color: #fff;
                }
                &::before {
                    transform: rotate(45deg) scale(1) translateY(-10px) translateX(-10px);
                }
            }
            .title {
                color: #fff;
            }
            .p {
                color: #eee;
            }
        }
    }
}

/**********************************************
    Start Edit contact Page 
**********************************************/
.contact-pg  {
    .contact_cards  .contact_item {
        position: relative;
        margin: 20px 0;
        background-color: #f8f8f8;
        border-radius: 15px;
        padding: 30px 20px;
        .icon_outer {
            background-color: var(--primary);
            border-radius: 5px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-inline-end: 15px;
            .icon {
                width: 23px;
                height: 23px;
                object-fit: contain;
            }
        }
        .title {
            font-weight: bold;
            font-size: 1rem;
            transition: all .3s linear;
        }
        &:hover {
            .icon {
                animation: pulse 1s infinite alternate-reverse;
            }
            .title {
                color: var(--primary);
            }
        }
    } 
    .map_box iframe {
        border-radius: 15px;
    }
}   


/**********************************************
    Start Edit gallery Page 
**********************************************/
.gallery-sec {
    .nav-link {
        background-color: #f7f7f7;
        margin: 0 10px;
        min-width: 100px;
        padding: .9rem 1rem;
        border-radius: 10px;
        color: var(--dark);
        text-transform: capitalize;
        &.active {
            color: #fff !important;
            background-color: var(--primary) !important;
        }
    }
    .gallery_card {
        height: 310px;
        border-radius: 20px;
        // border: 10px solid #f7f7f7;
        position: relative;
        overflow: hidden;
        margin-bottom: 25px;
        box-shadow: 3px 6px 10px 0 #0001;
        .sec-img {
            border-radius: 20px;
            transform: scale(1.1);
            transition: all .3s linear;
        }
        .title {
            text-align: center;
            position: absolute;
            bottom: 80px;
            width: 100%;
            font-size: 1.1rem;
            z-index: 8;
            transform: translateY(10px);
            opacity: 0;
            transition: all .3s linear;
        }
        .button {
            background-color: var(--primary);
            border-radius: 50%;
            width: 70px;
            height: 70px;
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50% , -50%) scale(.75) scale(0);
            opacity: 0;
            z-index: 6;
            &.is-play {
                .button-outer-circle {
                    background: rgba(255,255,255,0.2);
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    height: 100%;
                    width: 100%;
                }
                .button-icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 30px;
                    height: 30px;
                    transform: translate(-50%, -50%);
                }
                .triangle {
                    animation: fadeIn 7s ease;
                }
                .button-icon .path {
                    stroke-dasharray: 90;
                    stroke-dashoffset: 0;
                    animation: triangleStroke 3s;
                    animation-timing-function: ease;
                  }
            }
            i {
                color: #fff;
                position: relative;
                right: 3px;
                top: 5px;
                font-size: 23px;
            }
            .has-scale-animation {
                animation: smallScale 3s infinite;
            }
            .has-delay-short {
                animation-delay: 0.5s;
            }
            @keyframes fadeIn {
                from {
                  opacity: 0;
                }
                to {
                  opacity: 1;
                }
            }
            @keyframes triangleStroke {
                from {
                  stroke-dashoffset: 90;
                }
                to {
                  stroke-dashoffset: 0;
                }
            }
            @keyframes smallScale {
                from {
                  transform: scale(1);
                  opacity: 1;
                }
                to {
                  transform: scale(1.5);
                  opacity: 0;
                }
            }
        }
        // &::after {
        //     border: 10px solid #fff;
        //     bottom: 0;
        //     content: "";
        //     left: 0;
        //     position: absolute;
        //     right: 0;
        //     top: 0;
        //     box-shadow: 0 0 5px 0 var(--purple) inset;
        //     z-index: 5;
        // }
        &::before {
            @include overlay;
            background-color: rgba($color: #000000, $alpha: .5);
            transition: all .3s linear;
            opacity: 0;
            z-index: 1;
        }   
        &:hover {
            .sec-img {
                transform: scale(1);
            }
            .button {
                transform: translate(-50% , -50%) scale(.75) scale(1);
                opacity: 1;
            }
            .title {
                transform: translateY(0px);
                opacity: 1;
            }
            &::before {
                opacity: 1;
            }
        }
    }
    .swiper-pagination-bullet {
        background-color: #333;
    }
}


/**********************************************
    Start Edit news Page 
**********************************************/
.news-pg {
    .news_card {
        border-radius: 30px;
        height: 500px;
        overflow: hidden;
        position: relative;
        margin-bottom: 35px;
        .sec-img {
            transition: all .3s linear;
        }
        .txt_box {
            padding: 1.5rem;
            background-color: var(--purple);
            transition: all .3s linear;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 0 0 30px 30px;
            .p {
                height: 55px;
                overflow: hidden;
            }
            .date i {
                margin-inline-end: 5px;
            }
            .butn {
                padding: 0.5rem 1.5rem;
                margin-inline-start: auto;
            }
        }
        &:hover {
            .sec-img {
                transform: scale(1.05);
            }
            .txt_box {
                background-color: rgba($color: #000000, $alpha: .7);

            } 
        }
    }
}

.news-det {
    .inner {
        border: 1px solid #eee;
        border-radius: 30px ;
        .img_box {
            height: 500px;
            border-radius: 30px 30px 0 0 ;
            overflow: hidden;
            position: relative;
            .date {
                border-radius: 15px 15px 0 0 ;
                padding: .6rem 1rem;
                background-color: var(--purple);
                color: #fff;
                position: absolute;
                inset-inline-start: 5%;
                bottom: 0;
                font-size: 12px;
                i{
                    margin-inline-end: 5px;
                }
            }
        }
        .txt_box {
            padding: 30px 1.5vw;
            .title {
                font-size: calc(.1vw + 35px);
            }
            .p {
                line-height: 2.2;
            }
        }
    }
    .sm_box {
        border-radius: 30px;
        background-color: #fff;
        box-shadow: 0px 7px 50px rgba($color: #000000, $alpha: .07);
        padding: 33px 40px 40px 40px;
        .links a {
            display: block;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 15px;
            .sm_img {
                width: 65px;
                height: 65px;
                border-radius: 10px;
                margin-inline-end: 15px;
            }
            .txt {
                .title {
                    color: #333;
                }
                .date {
                    font-size: 12px;
                    color: #666;
                    i {
                        margin-inline-end: 5px;
                        color: var(--purple);
                    }
                }
            }
            &:last-child {
                border-bottom: 1px solid transparent;
                padding-bottom: 0;
                margin-bottom: 0;
            }
        }
        .tags_links a {
            position: relative;
            padding: .6rem 1rem;
            width: fit-content;
            font-size: 14px;
            border: 1px solid #ddd;
            color: #666;
            border-radius: 25px;
            margin-inline-end: 10px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-bottom: 15px;
            &:hover {
                border-color: var(--primary);
                background-color: var(--primary);
                color: #fff !important;
            }
        }
    }
}

/**********************************************
    Start Edit facilities Page 
**********************************************/
.facilities-sec {
    .search_box {
        .form-control {
            padding-inline-start: 45px;
            border: 1px solid #eee;
            background-color: #f5f5f5;
            box-shadow: 3px 6px 15px 0 #0001;
        }
        .submit_butn {  
            background-color: transparent;
            position: absolute;
            top: 15px;
            right: 13px;
            .icon  {
                width: 21px;
                object-fit: contain;
            }
            i {
                color: var(--purple);
                font-size: 21px;
            }
        }
    }
    .img_box {
        height: 550px;
        position: relative;
        .sec-img {
            object-position: center;
            border: 1px solid #eee;
            box-shadow: 30px 30px 30px 0 rgba($color: #613358, $alpha: .16);
        }
        &::after ,
        &::before {
            content: '';
            z-index: -1;
            position: absolute;
            height: 200px;
        }
        &::before {
            background-color: var(--purple);
            width: 20%;
            top: -25px;
            left: -25px;
        }
        &::after {
            background-color: var(--primary);
            width: 25%;
            bottom: -25px;
            right: -25px;
        }
    }
    .station_card {
        position: relative;
        height: 400px;
        margin-bottom: 50px;
        .txt {
            z-index: 5;
            position: absolute ;
            padding: 40px;
            inset-inline-start: 0;
            bottom: 0;
            width: 100%;
            .more_butn {
                display: block;
                color: #fff;
                font-size: 18px;
                font-weight: bold;
                text-shadow: 3px 6px 15px #0005;
                width: fit-content;
                .icon {
                    width: 25px;
                    object-fit: contain;
                    margin-inline-end: 10px;
                }
            }
        }
        .badge_station {
            background-color: var(--purple);
            text-align: center;
            position: absolute;
            top: 0;
            inset-inline-end: 0;
            z-index: 6;
            padding: 0.8rem;
            transition: all .3s linear;
            transform: scaleX(0);
            opacity: 0;
            .label {
                color: #ddd;
            }
        }
        &::before {
            @include overlay;
            background-color: rgba($color: #000000, $alpha: .3);
            background-image: linear-gradient(to bottom , transparent , #333 ,  #111, #000);
            opacity: .4;
            transition: all .3s linear;
            z-index: 1;
        }
        &::after {
            content: '';
            width: 90%;
            height: 20px;
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--purple);
        }
        &:hover {
            &::before {
                opacity: .7;
            }
            .badge_station {
                transform: scaleX(1);
                opacity: 1;
            }
        }
    }
    .facilities_card {
        background-color: #fff;
        padding: 40px;
        border-radius: 5px;
        box-shadow: 30px 30px 30px 0 rgba($color: #613358, $alpha: .05);
        position: relative;
        margin-bottom: 30px;
        .title .icon {
            width: 35px;
            height: 35px;
            object-fit: contain;
            margin-inline-end: 10px;
        }
        .logo {
            width: 150px;
            object-fit: contain;
        }
    }
}

/**********************************************
    Start Edit services Page 
**********************************************/
.services-pg {
    background-color: #fafafa;
    .serv_card {
        position: relative;
        margin-bottom: 30px;
        border-radius: 5px;
        background-color: #fff;
        overflow: hidden;
        box-shadow: 30px 30px 30px 0 rgba($color: #613358, $alpha: .05);
        .box_s {
            padding: 2vw;
            .data_item {
                .icon {
                    width: 20px;
                    object-fit: contain;
                    margin-inline-end: 20px;
                }
                .txt {
                    .label {
                        color: #9C9C9C;
                        font-size: 14px;
                    }
                    .data {
                        font-size: 16px;
                        color: #1B303E;
                    }

                }
            }
            .line {
                border-bottom: 1px solid #E7E7E7;
                width: 90%;
                display: block;
                height: 1px;
                margin: 40px auto 0 auto;
            }
            .img_box {
                height: 150px;
                position: relative;

            }
        }
        .box_e {
            height: 100%;
            padding: 2vw;
            background-color: #F5F1F1;
            .custom_ul .li {
                display: block;
                margin-bottom: 30px;
                position: relative;
                padding-inline-start: 35px;
                &::before {
                    content: '';
                    width: 20px;
                    height: 14px;
                    background: url(../images/icons/check.svg) no-repeat center;
                    background-size: contain;
                    position: absolute;
                    inset-inline-start: 5px;
                    top: 5px;
                }
            }
            .logo_img {
                width: 100%;
                height: 115px;
                margin-bottom: 15px;
                object-fit: contain;
            }
            .content_box .item .title i{
                width: 16px;
                margin-inline-end: 5px;
                color: var(--purple);
            }
        }
    }
}


/**********************************************
    Start Edit stations det Page 
**********************************************/
.stations-det {
    background-color: #f9f9f9;
    overflow: unset;
    .box {
        position: relative;
        background-color: #fff;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 3px 6px 15px 0 rgba($color: #000000, $alpha: .03);
    }
    .img_box {
        .swiper_box {
            .lg-slide-swiper{
                height: fit-content;
                width: 100%;
                overflow-x: hidden;
                .img-box{
                    position: relative;
                    overflow: hidden;
                    height: 500px;
                    border-radius: 15px;
                    .lg-img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        position: relative;
                        z-index: 1;
                    }
                }
            }
            .sm-slide-swiper{
                overflow: hidden;
                height: 150px;
                padding-bottom: 4px;
                .swiper-slide{
                    opacity: .7;
                    cursor: pointer;
                    transform: scale(.95);
                }
                .sm-bg-header{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    margin: 4px;
                    border-radius: 15px;
                    border: 2px solid transparent;
                    padding: 0px;
                }
                .swiper-slide-thumb-active {
                    opacity: 1;
                    .sm-bg-header{
                        border-color:  var(--purple) !important;
                    }
                }
            }
        }
    }
    .text_box {
        padding: 40px 30px;
        .p {
            line-height: 2.2;
            color: #777;
        }
    }
    .sm_box {
        padding: 40px 30px 20px 30px;
        .data {
            line-height: 2.2;
            color: #777;
            font-size: 15px;
        }
        .pattern {
            position: absolute;
            bottom: 5px;
            inset-inline-end: 5px;
            width: 72%;
            opacity: .05;
            pointer-events: none;
        }
    }
    .services_box {
        position: relative;
        background-color: #fff;
        // padding: 20px;
        border-radius: 15px;
        box-shadow: 3px 6px 15px 0 rgba($color: #000000, $alpha: .03);
        .services_nav {
            background-color: #eee;
            padding: 0 2rem;
            border-radius: 15px 15px 0 0;
            .nav-link {
                font-size: 15px;
                min-width: 120px;
                height: 90px;
                border-radius: 0;
                font-weight: bold;
                color: #666;
                border-top: 5px solid transparent;
                &.active {
                    background-color: #fff;
                    color: var(--secondary);
                    border-top: 5px solid var(--primary);
                    height: 96px;
                    margin-top: -6px;
                
                } 
            }
        }
        .tab_wrapper {
            padding: 30px 2vw;
            .p {
                line-height: 2;
                color: #777;
            }
        }
    }
    .accordion {
        .accordion-item {
            border: transparent;
            border-bottom: 1px solid #eee;
            margin-bottom: 25px;
            .accordion-button:not(.collapsed) {
                background-color: transparent;
                color: var(--primary);
                &::after {
                    content: "\f068";
                    color: var(--primary);
                }
            }
            .accordion-button {
                padding: 1rem 2rem;
                font-weight: bold;
                color: #333;
                font-size: 17px;
                padding-inline-start: 50px;
                &:focus {
                    // border-color: none;
                    box-shadow:unset;
                }
                &::after {
                    content: "\2b";
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    display: inline-block;
                    background-image: unset;
                    transform: rotate(0deg);
                    position: absolute;
                    inset-inline-start: 20px;
                    top: 15px;
                }
            }

            .accordion-body {
                padding: 1.5rem 1.25rem;
                box-shadow: 30px 30px 60px 0 rgba($color: #000001, $alpha: 0.05);
                .p {
                    font-size: 14px;
                }
            }
        }
    }
    .order_butn {
        position: sticky;
        bottom: 15px;
        z-index: 999;
        box-shadow: 3px 6px 10px 0 #0001;
    }
}


/**********************************************
    Start Edit rental_form Page 
**********************************************/
.form_pg {
    background-color: #f9f9f9;
    .inner {
        position: relative;
        background-color: #fff;
        padding: 50px 3vw;
        border-radius: 15px;
        box-shadow: 3px 6px 10px 0 #0001;
        .form-group {
            margin-bottom: 30px;
            .label {
                margin-bottom: 0.8rem;
                font-weight: bold;
                font-size: 14px;
            }
            .form-control {
                background-color: #f9f9f9;
                border-color: #f4f4f4;
            }
            .radios_row {
                height: 60px;
            }
            .drop_box {
                overflow: hidden;
                height: 60px;
                background-color: #f9f9f9;
                border: 1px solid #f4f4f4;
                position: relative;
                display: flex;
                align-items: center;
                cursor: pointer;
                .kwt-file{
                    width: 100%;
                }
                .kwt-file__drop-area {
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    padding: 10px;
                    transition: 0.3s;
                }
                .kwt-file__drop-area.is-active {
                    background-color: #eacee5;
                }
                .kwt-file__choose-file {
                    flex-shrink: 0;
                    background-color: var(--purple);
                    border-radius: 5px;
                    margin-inline-end: 10px;
                    color: #ffffff;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 15px;
                }
                .kwt-file__choose-file.kwt-file_btn-text {
                    border-radius: 4px;
                    width: auto;
                    height: auto;
                    padding: 10px 20px;
                    font-size: 14px;
                }
                .kwt-file__choose-file svg {
                    width: 19px;
                    height: 19px;
                    display: block;
                }
                .kwt-file__msg {
                    color: #888;
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 1.4;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .kwt-file__input {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    cursor: pointer;
                    opacity: 0;
                }
                .kwt-file__input:focus {
                    outline: none;
                }
                .kwt-file__delete {
                    display: none;
                    position: absolute;
                    inset-inline-end: 10px;
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                }
                .kwt-file__delete:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    transition: 0.3s;
                    top: 0;
                    z-index: 1;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%231d3557' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");
                }
                .kwt-file__delete:after {
                    content: "";
                    position: absolute;
                    opacity: 0;
                    left: 50%;
                    top: 50%;
                    width: 100%;
                    height: 100%;
                    transform: translate(-50%, -50%) scale(0);
                    background-color: #1d3557;
                    border-radius: 50%;
                    transition: 0.3s;
                }
                .kwt-file__delete:hover:after {
                    transform: translate(-50%, -50%) scale(2.2);
                    opacity: 0.1;
                }
            }
        }
    }
}

[type="tel"], [type="url"], [type="email"], [type="number"] {
    direction: inherit;
}


/**********************************************
    Start Edit jobs Page 
**********************************************/
.jobs-sec {
    .job_card {
        position: relative;
        padding: 45px;
        background-color: #f8f8f8;
        margin-bottom: 30px;
        border-radius: 15px;
        .date {
            font-size: 14px;
            color: #888;
            font-weight: 500;
            i {
                color: var(--secondary);
                margin-inline-end: 10px;
            }
        }
        .butn {
            padding: 0.9rem 1rem;
            font-size: 13px;
        }
        

    }
}


.pagination-wrapper {
    .pagination .page-link {
        border-radius: 5px !important;
        background-color: transparent;
        color: var(--purple);
        margin: 0 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 45px;
        height: 40px;
        &:hover ,
        &.active {
            background-color: var(--purple);
            color: #fff !important;
        }
    }
}