@import 'global';

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

.swiper-container {
    // pagination
    .swiper-pagination {
        bottom: 0;
        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            border-radius: 25px;
        }
        .swiper-pagination-bullet-active {
            // width: 30px;
            background: var(--primary);
        }
    }
    // 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: #f5f5f5;
        transition: all .3s linear;
        // opacity: .7;
        &::before {
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 15px;
            color: var(--secondary);
            transition: all .3s linear;
        }
        &:hover{
            background-color: var(--primary);
            opacity: 1;
            &::before{
                color: #fff;
            }
        }
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev{
        right: 2%;
        left: auto;
        &::before {
            content: '\f0da';
        }
    }
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next{
        left: 2%;
        right: auto;
        &::before {
            content: '\f0d9';
        }
    }
}

.butn {
    position: relative;
    padding: .7rem 1.7rem;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid transparent;
    border-radius: 25px;
    i {
        margin-inline-end: 7px;
    }
    .arrow {
        width: 12px;
        height: 12px;
        object-fit: contain;
        margin-inline-start: 5px;
    }
    &.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: #fff;
        border: 1px solid #D6D3D3;
    }
    &.blue_butn {
        background-color: #3D59A8;
        color: #fff;
    }
    &:hover {
        background-color: #202020;
        border: 1px solid #202020;
        color: #fff !important;
        .icon {
            filter: var(--filterWhite);
        }
    }
}

.outlined_butn {
    outline: 5px solid ;
    &.secondary_butn {
        outline-color: #DFD3B6;
        &:hover {
            background-color: #DFD3B6;
            border-color: var(--secondary);
            outline-color: var(--secondary);
        }
    }

}

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

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

.dir_ltr {
    direction: ltr;
    display: inline-block;
}

/**********************************************
   Start Edit Navbar & Footer
**********************************************/

//start Navbar
.navs-container {
    .top_nav {
        padding: 15px 0;
        .social_links a {
            color: var(--primary);
            margin-inline-end: 2vw;
        }
        .mail_link {
            color: var(--primary);
            direction: ltr;
            font-size: 14px;
            font-weight: 500;
            font-family: "Open Sans", serif;
            &::after {
                content: '|';
                margin-inline-start: 1vw;
            }
        }

        .phone_link {
            color: var(--primary);
            font-size: 14px;
            font-weight: 500;
            span {
                font-family: "Open Sans", serif;
            }
            &::after {
                content: '|';
                margin-inline-start: 1vw;
            }
        }

        .lang_butn{
            color: var(--primary);
            font-size: 16px;
            font-weight: 500;
            .flag {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-inline-end: 5px;
            }
        }

        .dropdown-menu {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.0666666667);
            border-radius: 10px;
            font-size: 13px;
            border: 0;
            a {
                padding: .6rem 1rem;

            }
        }

    }
    .navbar{
        padding: 1rem;
        .nav-link {
            color: #1B1A1F;
            margin: 0 10px;
            font-size: 18px;
            &.active {
                color: var(--primary);
                font-weight: bold;
            }
        }

        .nav_end {
            .search_box {
                .search_butn {
                    font-size: 20px;
                    color: var(--primary);
                }
                .form-control {
                    height: 50px !important;
                    width: 250px;
                    border-radius: 25px;
                    border: 1px solid #485157;
                    padding-inline-start: 35px;
                    &::placeholder {
                        color: #969696;
                    }
                }
                .submit_butn {
                    color: #969696;
                    background-color: transparent;
                    position: absolute;
                    top: 15px;
                    inset-inline-start: 15px;
                }
    
                .dropdown-menu {
                    padding: 10px;
                    border: 0;
                    border-radius: 25px;
                    background: #f9f9f9;
                }
                .dropdown-menu[data-bs-popper] {
                    right: -200%;
                }
            }

            
        }

        .has_dropdown {
            position: relative;
            .nav-link {
                position: relative;
                padding-inline-end: 30px;
                border-radius: 10px 10px 0 0 ;
                transition: all .3s linear;
                &::after {
                    content: '\2b';
                    font-family: "Font Awesome 6 Pro";
                    font-weight: 900;
                    display: inline-block;
                    position: absolute;
                    inset-inline-end: 10px;
                    top: 15px;
                    color: #888;
                    transition: all .3s linear;
                    font-size: 12px;
                }
            }
            .dropdown_box {
                position: absolute;
                background-color: #f9f9f9;
                min-width: 190px;
                z-index: 9;
                border-radius: 10px 0 10px 10px ;
                overflow: hidden;
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
                transition: all .3s linear;
                visibility: hidden;
                opacity: 0;
                a {
                    display: block;
                    padding: 15px 15px ;
                    font-size: 13px;
                    i {
                        color: var(--secondary);
                        font-size: 18px;
                        margin-inline-end: 10px;
                    }
                    &:hover {
                        background-color: #f5f5f5;
                    }
                }
            }
            &:hover {
                .nav-link{
                        background-color: #f9f9f9;
                        
                    &::after {
                        content: '\f068';
    
                    }
                }
                .dropdown_box {
                    visibility: visible;
                    opacity: 1; 
                }
            }
        }
        
        .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 {
    background-color: #F7F4ED;
    .content {
        margin-bottom: 30px;
        .p {
            font-size: 15px;
            margin-top: 15px;
        }
       
        
        .social_links a {
            width: 33px;
            height: 33px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--primary);
            color: #fff;
            margin-inline-end: 10px;
            &:hover {
                background-color: var(--secondary);
                border-color: var(--secondary);
                color: #fff !important;
            }
        }

        .links a {
            display: block;
            font-size: 18px;
            color: #1B1A1F;
            position: relative;
            padding-inline-start: 25px;
            margin-bottom: 18px;
            font-size: 19px;
            &::before {
                font-size: 15px;
                content: '\f105';
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                display: inline-block;
                position: absolute;
                inset-inline-start: 0;
                top: 4px;
                border-radius: 50%;
            }
            &:hover {
                color: #F58824 !important;
            }
        }

            
        .newsletter_form {
            .form-control {
                border-radius: 10px;
            }
            .butn {
                border-radius: 10px;
                height: 60px;
            }
        }

    }
}

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

//start header
.header {
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding-bottom: 120px;
    .txt_box {
        .title {
            font-size: calc(3vw + 35px);
            color: #fff;
            font-family: 'ge_bold';

        }
        .p {
            font-size: 18px;
        }
    }
}

//start about_sec
.about_sec {
    padding-top: 0;
    overflow: unset;
    .inner {
        margin-top: -70px;
        background: #F7F4ED;
        border-radius: 55px;
        padding: 45px 15px 0px 15px;
        .txt_content {
            .title {
                font-size: 32px;
                font-family: 'ge_bold';
            }
            .subtitle {
                font-size: 30px;
                color: #191A1D;
                font-family: 'ge_bold';
            }
            .p {
                font-size: 18px;
                color: #1B1A1F;
            }
        }

        .vision_box {
            border-radius: 40px;
            background-color: #fff;
            padding: 15px;
            margin: 15px 0;
            height: calc(100% - 30px);
            .secImg {
                border-radius: 32px;

            }
            .card-body {
                .icon_box {
                    width: 50px;
                    height: 50px;
                    border-radius: 15px;
                    background-color: #EBEDF6;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .icon {
                        width: 20px;
                        height: 20px;
                        object-fit: contain;
                    }
                }
                .title {
                    font-size: 40px;
                }
                .p {
                    line-height: 1.4;
                    font-size: 25px;
                    color: #505F59;
                }
            }
        }

        .mission_box {
            background-color: #AB9047;
            border-radius: 40px;
            padding: 15px 25px;
            margin: 15px 0;
            height: calc(100% - 30px);
            .title {
                font-size: 40px;
            }
            .img {
                width: 150px;
                height: 150px;
                object-fit: contain;
                display: block;
                margin-inline-start: auto !important;
                // margin: 15px 0;
            }
            .p {
                line-height: 1.4;
                font-size: 28px;
            }
        }

        .vectors {
            position: absolute;
            top: 0;
            left: 0;
            height: auto;
            width: 100%;
            object-fit: contain;
        }
    }
}

//start  stories_sec
.stories_sec {
    .story_box {
        position: relative;
        border-radius: 32px;
        background-color: #F7F4ED;
        padding: 20px;
        margin-bottom: 25px;
        height: calc(100% - 25px);
        .img_box {
            border-radius: 16px;
            position: relative;
            height: 200px;
            .secImg {
                border-radius: 16px;
            }
            .vid_butn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50% , -50%);
                color: #191A1D;
                font-size: 30px;
            }
        }
        .card-body {
            margin-top: 10px;
            .name {
                font-size: 28px;
                font-weight: bold;
                color: #191A1D;
            }
            .p {    
                font-size: 18px;
            }
        }

        &.popular_box {
            background-color: #3D59A8;
            .pop_badge {
                position: absolute;
                top: 10px;
                left: 10px;
                background-color: #fff;
                padding: .5rem;
                direction: ltr;
                border-radius: 25px;
                font-family: "Open Sans", serif;
                font-size: 12px;
                font-weight: 500;
                i {
                    color: #F3B943;
                    margin-inline-end: 5px;
                }
            }
            .card-body * {
                color: #fff;
            }
            .secondary_butn {
                background-color: #fff;
                outline-color: #1869C8;
                span {
                    color: #3D59A8;
                }
                &:hover {
                    background-color: #1869C8;
                    outline-color: #fff;
                    span {
                        color: #fff;
                    }
                }
            }
        }
    }

    .more_butn {
        position: relative;
        display: block;
        text-align: center;
        span {
            padding-inline: 15px;
            color:var(--secondary);
            font-family: 'ge_bold';
            text-decoration: underline !important;
            font-size: 16px;
            position: relative;
            background-color: #fff;
            z-index: 5;
        }
        &::before {
            content: '';
            width: 100%;
            height: 1px;
            background-color: #C7E1D6;
            position: absolute;
            top: 10px;
            left: 0;
            right: 0;

        }
    }
}

//start 
.statics_sec {
    padding-top: 120px;
    .item {
        margin-bottom: 25px;
        position: relative;
        .circle_box {
          width: 150px;
          height: 150px;
          background-color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: auto;
          .content {
            width: 130px;
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
            padding: 2px;
            overflow: hidden;
            border-radius: 50%;
            position: relative;
            .icon_box {
              background-color: #fff;
              width: 100%;
              height: 100%;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              z-index: 5;
              .icon {
                width: 90px;
                height: 90px;
                object-fit: contain;
              }
            }
            &::before {
              content: "";
              width: 45px;
              height: 40px;
              border-radius: 0 25px 0 0;
              background-color: var(--primary);
              position: absolute;
              top: -1px;
              right: -5px;
            }
            &::after {
              content: "";
              width: 100px;
              height: 20px;
              background-color: var(--secondary);
              position: absolute;
              top: -1px;
              right: 40px;
            }
          }
          .counter {
            font-size: 30px;
            font-weight: bold;
            background: -webkit-linear-gradient(#b0984f, #3D59A8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: "Open Sans", serif;

          }
        }
    
        .title {
          text-align: center;
          color: #1B1A1F;
          font-size: 18px;
          margin-top: 25px;
          font-weight: bold;
        }
    }
    .bg {
        object-position: top;
    }
}


//start  muslims_live
.muslims_live {
    background-color: #F7F4ED ;
    padding-bottom: 120px;

    .item {
        background-color: #fff;
        border-radius: 15px;
        position: relative;
        margin-bottom: 25px;
        height: calc(100% - 25px);
        border: 1px solid #eee;
        display: flex;
        padding: 25px 15px;
        box-shadow: 0 10px 15px 0 rgba(137, 137, 137, 0.067);
        .flag_box {
                position: relative;
                width: 55px;
                height: 55px;
                margin-inline-end: 15px;
            .flag {
                width: 55px;
                height: 55px;
                object-fit: cover;
                border-radius: 50%;
            }
            &::before {
                content: "";
                width: 16px;
                height: 16px;
                border: 3px solid #fff;
                background-color: #66cb9f;
                position: absolute;
                bottom: 0;
                inset-inline-start: -3px;
                border-radius: 50%;
            }
        }

        .txt_cont {
            width: calc(100% - 70px);
            .title {
                font-size: 15px;
                line-height: 1.4;
            }
            .p {
                color: #db9e30;
            }
        }
    }

    .curve {
        width: 100%;
        height: 60px;
        object-fit: cover;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    }
}

//start certificates_sec
.certificates_sec {
    .certi_box{
        padding: 20px;
        padding-bottom: 10px;
        border-radius: 40px;
        margin-bottom: 20px;
        height: calc(100% - 20px);
        transition: all .3s linear;
        .img_box {
            height: 255px;
            border-radius: 32px;
            .secImg {
                border-radius: 32px;
            }
        }
        .card-body {
            padding-top: 1.7rem;
            * {
                transition: all .3s linear;
            }
            .name {
                font-size: 30px;
            }
            .country_row {
                margin-bottom: 20px;    
                padding-bottom: 20px;
                border-bottom: 1px solid #eee;
                .p {
                    margin-bottom: 0;
                    font-size: 18px;
                }
                .flag {
                    width: 35px;
                    height: 35px;
                    border: 1px solid #191A1D;
                    border-radius: 50%;
                    object-fit: cover;
                }
            }


            .secondary_butn {
                background-color: #DFD3B6;
                color: var(--secondary);
            }
            
        }

        &:hover {
            background-color: #3D59A8;
            .name ,
            .p {
                color: #fff;
            }
            .country_row .flag {
                border-color: #fff;
            }
            .secondary_butn {
                background-color: #fff;
                color: #3D59A8;
            }
        }
    }
}

//start feedback_sec
.feedback_sec {
    .inner {
        background-color: #3D59A8;
        border-radius: 40px;
        padding: 50px 2vw;
        margin-bottom: 25px;
        height: calc(100% - 25px);
        .sec_head {
            .title {
                font-size: calc(4vw + 35px);
                color: #FEE193;
                font-family: 'ge_bold';

            }
            .subtitle {
                font-size: calc(2vw + 35px);
            }
        }

        .feedback_item {
            background-color: #fff;
            border-radius: 24px;
            padding: 35px;
            .icon{
                height: 24px;
                object-fit: contain;
                display: block;
                margin-bottom: 15px;
            }
            .title {
                font-weight: bold;
                font-size: 24px;
            }
            .p{
                color: #505F59;
            }
            .card_foot {
                .prof_data {
                    width: 50%;
                    border-inline-end: 1px solid #ccc;
                    padding-inline-end: 10px;
                    .avatar {
                        width: 44px;
                        height: 44px;
                        border-radius: 12px;
                        object-fit: cover;
                        margin-inline-end: 10px;
                    }
                    .name {
                        font-size: 24px;
                    }
                }
            }
        }
    }

}

//start 



/**********************************************
    Start Edit pg-header
**********************************************/
.pg_header {
    padding: 100px 0 60px 0;
    .txt_box {
        .back_butn {
            width: 45px;
            height: 45px;
            background-color: #EBEDF6;
            color: var(--primary);
            border-radius: 8px;
        }
    }
    .bg {
        object-position: top;
    }
}



/**********************************************
    Start Edit story det Page 
**********************************************/
.story_pg{
    .main_img {
        height: 580px;
        border-radius: 15px;
    }
    .data_row {
        .prof_data{
            display: flex;
            align-items: center;
            .avatar {
                width: 122px;
                height: 122px;
                object-fit: cover;
                border-radius: 50%;
                margin-inline-end: 25px;
            }
            .content {
                .name {
                    font-size: 24px;
                    color: #505F59;
                }
                .job {
                    color: #505F59;
                    font-size: 16px;
                }
            }
        }

        .butns{
            justify-content: end;
            .butn {
                margin-inline-end: 10px;
                background-color: #F7F4ED;
                color: var(--secondary);
                .icon {
                    width: 30px;
                    height: 25px;
                }
                &:hover {
                    background-color: var(--primary);
                    
                }
            }
        }

    }
    .txt_box {
        background-color: #EFF2F4;
        border-radius: 25px;
        padding: 45px;
        .views {
            margin-bottom: 20px;
            font-size: 20px;
            color: #505F59;
        }
        .p {
            color: #1B1A1F;
            font-size: 20px;
            line-height: 1.9;
            height: 350px;
            overflow: hidden;
            transition: all .3s linear;
            &.active {
                height: auto;
                overflow: unset;
            }
        }
    }

    .related_box {
        height: 785px;
        overflow-x: hidden;
        overflow-y: auto;
        .item {
            position: relative;
            margin-bottom: 25px;
            .storyImg {
                border-radius: 25px;
            }
            .card-body {
                .title {
                    font-size: 32px;
                }
                .view {
                    font-size: 20px;
                }
                .p {
                    font-size: 20px;
                    color: #191A1D;
                    max-height: 136px;
                    overflow: hidden;
                }
            }
        }
    }
    
}



/**********************************************
    Start Edit jobs Page 
**********************************************/
.jobs_pg{

    .job_card {
        border-radius: 25px;
        border: 1px solid #DFD3B6;
        padding: 25px;
        margin-bottom: 25px;
        height: calc(100% - 25px);
        .logo {
            height: 65px;
            display: block;
            margin-bottom: 20px;
        }
        .title {
            font-size: 24px;
            margin-bottom: 15px;
        }
        .p {
            color: #757575;
            
        }
    }
    
}

.jobs_det {
    .txt_box {
        border-radius: 25px;
        padding: 50px 3vw;
        box-shadow: -6px 7px 4px 0 #F4F1EB;
    }
    .data_box {
        height: 100%;
        padding: 35px;
        border-radius: 25px;
        border: 1px solid #DFD3B6;
        .item {
            margin-bottom: 25px;
            .label {
                margin-bottom: 7px;
                color: #3E3E3E;
            }
            .data {
                font-size: 20px;
                color: #000;
                font-family: 'ge_bold';

            }
        }
    }

    .form_box {

        padding: 50px 3vw;
        border-radius: 25px;
        border: 1px solid #DFD3B6;

        .form-group {
            margin-bottom: 15px;
            .form-control {
                border-radius: 20px;
                border-color: #9999995e;
                &::placeholder {
                    color: #999999;
                }
            }
        }

        .drop_box {
            overflow: hidden;
            height: 60px;
            // background-color: #f9f9f9;
            border: 1px solid #9999995e;
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-radius: 20px;
            .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: #eee;
            }
            .kwt-file__choose-file {
                flex-shrink: 0;
                background-color: #cccccc5d;
                border-radius: 15px;
                margin-inline-end: 10px;
                color: var(--secondary);
                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;
            }
        }

    }
}

/**********************************************
    Start Edit files Page 
**********************************************/

.files_pg {
    .table {
        thead th {
            padding: 1.35rem 1rem;
            text-align: center;
            font-size: 22px;
            .icon {
                width: 30px;
                height: 30px;
                object-fit: contain;
                display: block;
                margin: 0 auto 7px auto;
            }
        }
        * {
            border-color: #DFD3B6;
        }
        tbody {
            td {
                text-align: center;
                padding: 1rem;
                vertical-align: middle;
                max-width: 300px;
                font-size: 18px;
                .p ,
                span {
                    font-size: 18px;
                }
                .date {
                    color: #3D59A8;
                }
                .file_butn .icon {
                    width: 70px;
                    height: 70px;
                    object-fit: contain;
                }
            }
        }
    }
}


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


/**********************************************
    Start Edit certificates Page 
**********************************************/
.certificates_pg {
    .certi_box {
        background-color: #FBF9F6;

        .card-body {
            .country_row {
                border-bottom: none ;
                padding-bottom: 0;
            }
            .data .item {
                margin-bottom: 5px;
                transition: all .3s linear; 
                font-family: 'ge_light';
                color: #333;
                b {
                    transition: all .3s linear; 
                    color: #000;
                    margin-inline-start: 4px;
                }
            }
        }
        &:hover{
            .data .item {
                color: #eee;
                b {
                    color: #fff;
                }
            }
        }
    }
}


/**********************************************
    Start Edit contact Page 
**********************************************/
.contact_pg {
    .inner  {
        border-radius: 25px;
        padding: 3vw;
        box-shadow: 6px 7px 4px 0 #F4F1EB;

        .contact_box {
            .item {
                align-items: center;
                margin-bottom: 40px;
                &:last-child {
                    margin-bottom: 0;
                }
                .icon_outer {
                    width: 120px;
                    height: 90px;
                    background-color: var(--secondary);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--secondary);
                    color: #fff;
                    border-radius: 25px;
                    margin-inline-end: 25px;
                    font-size: 30px;
                }
                .txt{
                    width: calc(100% - 60px);
                    // text-align: end;
                    .label {
                        font-size: 25px;
                        color: #000;
                    }
                    .p {
                        color: #9A9A9A;
                        font-size: 20px;
                    }
                }
            }

          
        }

        .map_box iframe {
            border-radius: 25px;
        }

    }


    .form_box {

        padding: 50px 3vw;
        border-radius: 25px;
        border: 1px solid #DFD3B6;

        .form-group {
            margin-bottom: 15px;
            .form-control {
                border-radius: 20px;
                border-color: #9999995e;
                &::placeholder {
                    color: #999999;
                }
            }
        }


    }

}



//start .mostCountry_sec
.mostCountry_sec {
    .img_box {
      position: relative;
      .secImg {
        background-color: #f8f8f8;
        height: 780px;
      }
      .country_box {
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        position: absolute;
        top: 35%;
        left: 55%;
        .flag_box {
          position: relative;
          width: 35px;
          height: 35px;
          margin-inline-end: 10px;
          .flag {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
          }
          &::before {
            content: "";
            width: 16px;
            height: 16px;
            border: 3px solid #fff;
            background-color: #66cb9f;
            position: absolute;
            bottom: 0;
            inset-inline-start: -3px;
            border-radius: 50%;
          }
        }
      }
    }
  }
  
/**********************************************
    Start Edit another Page 
**********************************************/




/**********************************************
    Start Edit Media screens 
**********************************************/
@media screen and (max-width: 991px) {
    .order_md_1 {
        order: -1;
    }

}

@media screen and (max-width: 787px) {
    
}

@media screen and (max-width: 480px) {
    
}


/**********************************************
    Start Edit EN direction 
**********************************************/
html[dir="ltr"]{

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

    body{
        direction: ltr;
        font-family: 'Poppins', sans-serif;
    }

}