@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: 20px;
            background: var(--primary);
        }
    }
    // nav buttons
    .swiper-button-next, 
    .swiper-button-prev {
        background-image: unset;
        width: 40px;
        height: 40px;
        border: 1px solid transparent;
        border-radius: 0%;
        background-image: unset;
        background-color: #2D6172;
        transition: all .3s linear;
        opacity: .7;
        &::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: #fff;
            transition: all .3s linear;
        }
        &:hover{
            background-color: var(--primary);
            opacity: 1;
            &::before{
                color: #fff;
            }
        }
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev{
        right: 1%;
        left: auto;
        &::before {
            content: '\f30b';
        }
    }
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next{
        left: 1%;
        right: auto;
        &::before {
            content: '\f30a';
        }
    }
}

.butn {
    position: relative;
    padding: .9rem 2rem;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    border: 1px solid transparent;
    i {
        margin-inline-end: 7px;
    }
    &.sm_butn {
        padding: 0;
        width: 50px;
        height: 50px;
    }
    &.secondary_butn {
        background-color: #2D6172;
        color: #fff;
    }
    &.secondary_border_butn {
        border: 1px solid var(--secondary);
        color: var(--secondary);
        background-color: transparent;
    }
    &.white_butn {
        background-color: #fff;
        color: var(--primary);
    }
    &.primary_butn {
        background-color: var(--primary);
        color: #fff;
    }
    &.light_butn {
        background-color: #FEF8F5;
        color: #101828;
    }
    &:hover {
        background-color: #214855;
        border: 1px solid #214855;
        color: #fff !important;
        i {
            animation: floatingX .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;
}

.sec_title {
    position: relative;
    font-size: calc(1vw + 35px);
    &.border_b::after {
        content: '';
        width: 60%;
        height: 4px;
        display: block;
        background-color: var(--primary);
        margin: 15px 0 25px 0;
    }
}
/**********************************************
   Start Edit Navbar & Footer
**********************************************/

//start Navbar
.navs-container {
    .navbar{
        background-color: var(--secondary);
        .logo {
            width: 140px;
            object-fit: contain;
        }
        .nav-link {
            color: #eee;
            margin: 0 15px;
            &.active {
                color: var(--primary);
                font-weight: bold;
            }
        }
        .nav_links a {
            color: #ccc;
            margin: 0 10px;
        }
        .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: #F3F4F8;
    padding: 100px 0 0 0;
    .content {
        margin-bottom: 30px;
        .logo  {
            margin-top: -50px;
        }
        .form-group .butn{
            position: absolute;
            right: 0;
            height: 55px;
            top: 0;
            padding: 0.9rem 1rem;
        }
        .links a {
            display: block;
            margin: 20px 0;
        }
    }
    .social_links{
        .sm_butn {
            width: 30px;
            height: 30px;
        }
        i{
            margin: 0;
        }
    }

    .bt {
        border-top: 1px solid #ccc;
    }
}

/**********************************************
    Start Edit Home Page 
**********************************************/
.header {
    position: relative;
    overflow: hidden;
    .item {
        min-height: 83vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: var(--secondary);
        .text-box {
            .title {
                text-transform: uppercase;
                font-size: calc(2vw + 35px);
            }
        }
        .header_img {
            width: 60%;
            object-fit: contain;
            position: absolute;
            right: 0;
            bottom: -9%;
        }
        .pattern {
            position: absolute;
            right: 0;
            top: 0;
            width: 22%;
        }
    }
    .swiper-pagination {
        bottom: 15px;
    }
    .services_row {
        background-color: #E9E9E9;
        // border-radius: 0 0 0 70px;
        .serv_item {
            padding: 40px 6vw;
        }
        .link_video {
            min-height: 150px;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #F2F2F2;
            color: var(--primary);
            font-size: 18px;
            text-transform: uppercase;
            i{
                font-size: 30px;
            }
        }
    }
}

//start about-sec
.about-sec {
    .text-box {
        .head {
            padding-inline-start: 3vw;
            border-inline-start: 5px solid var(--primary);
        }
        .det {
            padding-top: 30px;
            border-top: 1px solid #ddd;
        }
    }
    .img-box {
        height: 600px;
        position: relative;
        .lg_img {
            width: 70%;
            position: absolute;
            right: 0;
            bottom: 0;
            height: 90%;
        }
        .sm_img {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 55%;
            z-index: 1;
            width: 55%;
            object-fit: cover;
            border: 8px solid #fff;
        }
        .exp_num {
            padding: 45px;
            background-color: var(--secondary);
            z-index: 2;
            position: absolute;
            left: 5%;
            top: 20%;
            width: fit-content;
        }
        &::before {
            content: '';
            width: 60%;
            height: 80%;
            border: 1px solid var(--primary);
            display: block;
            position: absolute;
            top: 0;
            right: 20%;
        }
    }
}

//start services-sec
.services-sec {
    background-color: var(--secondary);
    .sec_head {
        border-bottom: 1px solid #24495A;
    }
    .serv_box{ 
        .nav {
            border-bottom: 1px solid #24495A;
            .nav-link {
                padding: 15px ;
                margin: 0 10px;
                border-radius: 0;
                display: flex;
                align-items: center;
                border-bottom: 1px solid transparent;
                color: #7F959F;
                .num {
                    width: 44px;
                    height: 44px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #355767;
                    color: #fff;
                    margin-inline-end: 10px;
                    // border-radius: 10px;
                }
                &.active {
                    background-color: transparent;
                    color: #fff;
                    border-bottom: 1px solid #fff;
                    .num {
                        background-color: var(--primary);
                    }
                }
            }
        }
        .tab_content {
            .sec-img {
                height: 300px;
            }
        }
    }
}

//start team-sec 
.team-sec {
    .team_card {
        .sec-img {
            height: 165px;
        }       
        .text-box {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            &::before{
                content: '';
                width: 1px ;
                height: 100%;
                background-color: #ccc;
                position: absolute;
                left: 50%;
                top: 0;
                transform: translateX(-50%);
            }
            .content {
                background-color: #fff;
                position: relative;
                z-index: 1;
                padding: 7px 0;
            }
        }
    }
    .swiper-button-next, 
    .swiper-button-prev {
        top: 90%;
        background-color: #fff;
        &::before {
            color: #888;

        }
    }
    .swiper-container .swiper-button-next, 
    .swiper-container .swiper-container-rtl .swiper-button-prev {
        right: 48%;
        transform: translateX(53%);
        &::before {
            content: '\f178';
        }
    }
    .swiper-container .swiper-button-prev, 
    .swiper-container .swiper-container-rtl .swiper-button-next {
        left: 48%;
        transform: translateX(-53%);
        &::before {
            content: '\f177';
        }
        
    }
}

//start statics-sec
.statics-sec {
    background-color: #F2F2F2;
    padding: 0;
    overflow: unset;
    .statics_card {
        text-align: center;
        padding: 70px 0;
        &.hvr_card{
            margin-top: -20px;
            background-color: var(--primary);
        }
    }
}

//start partners-sec
.partners-sec {
    .partner_card {
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #DCDCDC;
        transition: all .3s linear;
        .partner_logo {
            width: 70%;
            height: 110px;
            transition: all .3s linear;
            object-fit: contain;
        }
        &:hover {
            border: 1px solid var(--primary);
            .partner_logo {
                transform: scale(1.1);
            }
        }
    }
    .swiper-button-next, 
    .swiper-button-prev {
        top: 90%;
        background-color: #fff;
        &::before {
            color: #888;

        }
    }
    .swiper-container .swiper-button-next, 
    .swiper-container .swiper-container-rtl .swiper-button-prev {
        right: 48%;
        transform: translateX(53%);
        &::before {
            content: '\f178';
        }
    }
    .swiper-container .swiper-button-prev, 
    .swiper-container .swiper-container-rtl .swiper-button-next {
        left: 48%;
        transform: translateX(-53%);
        &::before {
            content: '\f177';
        }
        
    }
}

//start train-sec
.train-sec {
    overflow: unset;
    padding: 0px 0 100px 0;
    .contact_card {
        height: 100px;
        background-color: var(--primary);
        justify-content: center;
        color: #f5f5f5;
        margin-top: -50px;
        position: relative;
        .icon {
            width: 22px;
            height: 22px;
            object-fit: contain;
            margin-inline-end: 10px;
        }
        &::before {
            content: '';
            width: 28px;
            height: 44px;
            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
            background-color: #424949;
            position: absolute;
            top: 0;
            left: -27px;
            z-index: -1;
        }
    }
    &::before {
        @include overlay;
        background-color: rgba($color: #113A4C, $alpha: .74);
        z-index: 1;
    }
}

/**********************************************
    Start Edit pg-header 
**********************************************/
.pg-header  {
    padding: 50px 0;
    background-color: #F3F4F8;
    .pattern1 {
        width: 100px;
        object-fit: contain;
        position: absolute;
        right: 35%;
        top: 50%;
        transform: translate(65% , -50%);
        opacity: .2;
    }
    .pattern2 {
        width: 100px;
        object-fit: contain;
        position: absolute;
        left: 35%;
        top: 50%;
        transform: translate(-65% , -50%);
        opacity: .2;
    }
}

/**********************************************
    Start Edit about Page 
**********************************************/
.about-pg  {
    .about_title{
        font-size: calc(1.5vw + 35px);
    }
    .exp_card .about_counter {
        font-size: calc(2vw + 35px);
    }
    .box {
        .about_card {
            padding: 45px 25px;
            border-radius: 15px;
            margin-bottom: 15px;
        }
        .first_boxes {
            margin-bottom: -90px !important;
        }
        .sec-img {
            height: 340px;
        }
        .static_card {
            padding: 40px 0;
        }
        .scnd_boxes .about_card {
            margin-top: -180px;
        }
    }
    .text-box {
        .head_box {
            position: relative;
            padding-inline-start: 25px;
            border-inline-start: 8px solid var(--primary);
            &::after {
                content: '';
                width: 100%;
                height: 1px;
                background-color: #ddd;
                display: block;
                position: absolute;
                bottom: -30px;
                left: 0;
                right: 0;
            }
        }
        .content-box {
            padding-inline-start: 25px;
            position: relative;
            &.br_secondary::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 4px;
                height: 110px;
                background-color: var(--secondary);
            }
            &.br_primary::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 4px;
                height: 110px;
                background-color: var(--primary);
            }
        }
    }


}

/**********************************************
    Start Edit contact Page 
**********************************************/
.contact-pg {
    .map-box {
        padding: 20px;
        background-color: #F2F2F2;
    }
    .contact_card {
        padding: 50px 35px;
        position: relative;
        background-color: #F5F5F5;
        margin-bottom: 25px;
        height: calc(100% - 25px);
        &::before{
            content: '';
            width: 100%;
            height: 8px;
            position: absolute;
            top: -15px;
            left: 0;
            right: 0;
            background-color: var(--secondary);
        }
        .icon {
            width: 60px;
            height: 60px;
            object-fit: contain;
            margin-bottom: 25px;
            display: block;
        }
        .title {
            margin-bottom: 15px;
        }
        .det {
            color: #868686;
            margin-bottom: .5rem;
        }
    }
    .form_box .form-group {
        margin-bottom: 1rem;
        .form-control {
            border: 1.5px solid #BCD0E5;
            &::placeholder {
                color: #BCD0E5;
            }
        }
        input , 
        select{
            height: 60px !important;
        }
        // .form-select {
        //     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
        //     background-position: right 0.75rem center;
        // }
    }
}

.title_br {
    position: relative;
    &::after {
        content: '';
        width: 150px;
        height: 3px;
        background-color: var(--primary);
        display: block;
        margin-top: 15px ;
    }
}

/**********************************************
    Start Edit news Page 
**********************************************/
.news-pg {
    background-color: #F5F5F5;
    .form-group {
        position: relative;
        .form-control {
            padding-inline-start: 35px;
            border-radius: 8px;
            border: 1px solid #fff;
            height: 60px !important;
        }
        .search_icon {
            background-color: transparent;
            position: absolute;
            top: 19px;
            left: 12px;
            color: #888;
        }
    }
    .news_card{
        background-color: #fff;
        padding: 20px;
        margin-bottom: 25px;
        .img-box {
            height: 230px;
        }
        .content {
            padding-top: 20px;
            .det {
                font-size: 13px;
                height: 82px;
                overflow: hidden;
            }
            .prof_box {
                .icon {
                    width: 45px;
                    height: 45px;
                    object-fit: contain;
                    margin-inline-end: 15px;
                }
                .span {
                    font-size: 14px;
                }
                .date {
                    color: #667085;
                }
            }
        }
    }
    .bg {
        height: 55%;
    }
    .swiper-button-next, 
    .swiper-button-prev {
        top: unset;
        background-color: #f8f8f8;
        bottom: 0;
        &::before {
            color: #555;
        }
    }
    .swiper-container .swiper-button-next, 
    .swiper-container .swiper-container-rtl .swiper-button-prev {
        right: 46%;
    }
    .swiper-container .swiper-button-prev, 
    .swiper-container .swiper-container-rtl .swiper-button-next {
        left: 46%;
    }
}

.events-sec .news_card {
    background-color: #F7F7F7;
    padding: 45px;
    .content {
        padding-top: 0;
    }
}

/**********************************************
    Start Edit news det Page 
**********************************************/
.news-det  {
    .img-box {
        height: 530px;
        padding: 20px;
        border: 1px solid #F2F2F2;
        background-color: #fff;
        position: relative;
        .butn {
            position: absolute;
            right: 30px;
            bottom: 30px;
            .icon_pdf {
                width: 35px;
                object-fit: contain;
            }
        }
    }
    .card-body {
        .prof_box {
            .icon {
                width: 45px;
                height: 45px;
                object-fit: contain;
                margin-inline-end: 15px;
            }
            .span {
                font-size: 14px;
            }
            .date {
                color: #667085;
            }
        }
    }
    .bg {
        height: 700px;
        object-position: bottom;
    }
}

/**********************************************
    Start Edit event det Page 
**********************************************/
.event-det {
    .text-box {
        .title {
            font-size: calc(1.5vw + 35px);
        }
    }
    .data_box {
        background-color: #f7f7f7;
        padding: 45px;
        .data_item {
            margin: 10px 0;
        }
    }
}

/**********************************************
    Start Edit media Page 
**********************************************/
.media-pg {
    .nav {
        width: fit-content;
        margin: auto;
        background-color: #EDF4F6;
        padding: 0rem 2rem;
        min-height: 93px;
        .nav-link {
            background-color: transparent;
            border-radius: 0;
            min-width: 150px;
            margin: 0 10px;
            color: #333 !important;
            border-bottom: 3px solid transparent;
            padding: 1rem 0.5rem;
            transition: all .3s linear;
            .icon {
                width: 22px;
                object-fit: contain;
                display: block;
                margin: 0 auto 7px auto;
            }
            &.active {
                margin-top: -15px;
                background-color: #FFCEB5;
                border-bottom: 3px solid var(--primary);
            }
        }
    }
}

.media_card {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    .sec-img {
        height: 300px;
        transition: all .3s linear;
    }
    .content {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        text-align: center;
        z-index: 5;
        .icon {
            font-size: 70px;
        }
    }
    &.lg_card .sec-img{
        height: 450px;
    }
    &::before{
        @include overlay;
        z-index: 1;
        background-color: rgba(18, 56, 100, 0.4);
    }
    &:hover {
        .sec-img {
            transform: scale(1.1);
        }
        .icon i{
            animation: tada 1s infinite;
        }
    }
}

.file_card {
    padding: 45px;
    background-color: #f5f5f5;
    position: relative;
    margin-bottom: 50px;
    .icon {
        width: 45px;
        object-fit: contain;
        display: block;
        margin: 0 auto 20px auto;
    }
    .butn {
        margin: 20px auto -70px auto;
        box-shadow: 3px 6px 10px 0 #0001;
        .icon_pdf {
            width: 35px;
            margin-inline-end: 10px;
            object-fit: contain;
        }
    }
}


/**********************************************
    Start Edit job-det Page 
**********************************************/
.job-det {
    .jobImg-box {
        width: 300px;
        height: 300px;
        background-color: #f5f5f5;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
            width: 100px;
            object-fit: contain;
        }
    }
    .butns {
        .butn {
            height: fit-content;
        }
    }
}

.upload-main-wrapper{
    width: 200px;
    position: relative;
    background-color: #f8f8f8;
    // margin: 0 auto;
    #file-upload-name{
        margin: 0px 0 0 0;
        font-size: 12px;
        position: absolute;
        bottom: -30px;
    }
    .upload-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0px auto 0;
        position: relative;
        cursor: pointer;
        background-color: #bcaef5;
        padding: 9.5px 1.5rem;
        border-radius: 0;
        overflow: hidden;
        transition: 0.2s linear all;
        color: #ffffff;
    }
    .upload-wrapper input[type="file"] {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        opacity: 0;
        top: 0;
        bottom: 0;
        cursor: pointer;
        z-index: 1;
    }
    .upload-wrapper > svg {
        width: 32px;
        height: 32px;
        cursor: pointer;
    }
    .upload-wrapper.success > svg{
        transform: translateX(-200px);
    }
    .upload-wrapper.uploaded {
        transition: 0.2s linear all;
        width: 60px;
        border-radius: 50%;
        height: 60px;
        text-align: center;
    }
    .upload-wrapper .file-upload-text {
        position: absolute;
        left: 80px;
        opacity: 1;
        visibility: visible;
        transition: 0.2s linear all;
    }
    .upload-wrapper.uploaded .file-upload-text {
        text-indent: -999px;
        margin: 0;
    }
    .file-success-text {
        opacity: 0;
        transition: 0.2s linear all;
        visibility: hidden;
        transform: translateX(200px);
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .file-success-text svg {
        width: 25px;
        height: auto;
    }
    .file-success-text span{
        margin-left: 15px;
    }
    .upload-wrapper.success .file-success-text{
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .upload-wrapper.success.uploaded .file-success-text{
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .upload-wrapper.success.uploaded .file-success-text span{
        display: none;
    }
    .upload-wrapper .file-success-text circle{
        stroke-dasharray: 380;
        stroke-dashoffset: 380;
        transition: 1s linear all;
        transition-delay: 1.4s;
    }
    .upload-wrapper.success .file-success-text  circle {
        stroke-dashoffset: 0;
    }
    .upload-wrapper .file-success-text polyline {
        stroke-dasharray: 380;
        stroke-dashoffset: 380;
        transition: 1s linear all;
        transition-delay: 2s;
    }
    .upload-wrapper.success .file-success-text polyline {
        stroke-dashoffset: 0;
    }
    .upload-wrapper.success .file-upload-text{
        animation-name: bounceOutLeft;
        animation-duration: 0.2s;
        animation-fill-mode: both;
    }
}

/**********************************************
    Start Edit jobs Page 
**********************************************/
.jobs-pg {
    .inner {
        background-color: #f6f6f6;
        padding: 4vw;
        .text-box .title{
            font-size: calc(1.2vw + 35px );
        }
    }
    .job-categ .categ_card {
        background-color: #EEF2F3;
        padding: 45px;
        position: relative;
        text-align: center;
        margin-bottom: 30px;
        .icon {
            width: 45px;
            object-fit: contain;
            display: block;
            margin: 0 auto 20px auto;
        }
    }
    .job-demand .job_card {
        position: relative;
        padding: 45px;
        background-color: #F6F8F9;
        margin-bottom: 30px;
        .head {
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
    }
}