*, ul{
    padding: 0;
    margin: 0;
}
:root {
    --primary-color: orange;
    --secondary-color: #014a81;
    --first-color: #fac55d;
}
@font-face {
    font-family: "DMSans";
    src: url(../webfonts/DMSans-VariableFont_opsz\,wght.ttf);
}
@font-face {
    font-family: "Cairo";
    src: url(../webfonts/Cairo-VariableFont_slnt\,wght.ttf);
}
body, html{
    font-family: 'Cairo', sans-serif;
    position: relative;
    direction: rtl;
    text-align: right;
}
main{
    position: relative;
    margin-right: 170px;
    overflow-x: hidden;
}
button {
    border: 0;
    background: none;
}
h1, h2, h3, h4, h5, h6{text-transform: capitalize;}
.col-12.col-md-4.mb-5.mb-md-0{padding-right: 0;}
a{
    text-decoration: none;
    color: #000;
}
#background_overlay{
    height: 100%;
    z-index: 2000;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.61);
    position: fixed;
    overflow: hidden;
    display: none;
}
#sidenavResponsive #close{
    text-decoration: none;
    color: #8f8f8f;
    width: auto;
    transition: 0.3s all;
    font-family: 'openSans';
    font-weight: 700;
    float: right;
    font-size: 30px;
    font-weight: 800;
    margin-right: 10px;
    background: none;
    border: 0;
    display: none;
}
main section, main section.container-fluid, .offer.container-fluid{
    padding: 60px 5%;
}
main section.about_sec{
    padding: 120px 0px 60px;
}
/* Side Nav */
.sidenav{
    background-image: url(../img/sidebar_bg.jpg);
    background-size: cover;
    background-position: bottom;
    display: block;
    height: 100%;
    overflow-y: scroll;
    width: 170px;
    position: fixed;
    z-index: 2100;
    top: 0px;
    right: 0px;
    transition: 0.5s all;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

#sidenavResponsive{
    right: -300px;
    box-shadow: none;
}
.sidenav::-webkit-scrollbar{
    display: none;
}
.sidenav.view{
    right: 0px;
    transition: 0.5s all;
}
.sidenav.hide{
    display: none;
}
.sidenav figure, .sidenav .row{
    width: 100%;
    height: 105;
    margin: 0px;
    box-sizing: border-box;
    padding: 13px 15px 12px;
    margin-bottom: 10px;
}
.sidenav figure{
    padding-top: 60px;
}
.sidenav figcaption{
    margin-top: 5px;
    line-height: 15px;
}
.sidenav figcaption h3{
    color: var(--first-color);
    font-size: 12px;
    text-align: right;
    text-transform: uppercase;
}
.sidenav img{
    width: 100%;
    height: auto;
}
.sidenav .menu{
    margin-top: 55px;
    margin-bottom: 75px;
}
.sidenav .menu li {
    list-style-type: none;
    text-align: left;
    border-top: 1px solid #eee;
    /* height: 49px; */
}
.sidenav .menu a{
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    padding: 13px 20px;
    color: #818181;
    box-sizing: border-box;
    font-size: 14px;
    text-align: right;
}
.sidenav .menu .slideDown{
    font-size: 20px;
    margin-top: -3px;
    padding: 0px 10px;
    cursor: pointer;
    transform: rotate(0deg);
    transition: 0.5s all ease;
    font-family: 'DMSans', sans-serif;
}
.sidenav .menu .slideDown.arrow{
    transform: rotate(270deg);
    color: var(--secondary-color);
}
.sidenav .menu a:hover, .sidenav .menu .active_link{
    color: var(--secondary-color);
    font-weight: 500;
}
.sidenav .main_menu, .sidenav .main_menu .sub_menu li{
    position: relative;
}
.sidenav .main_menu .sub_menu{
    background-color: #dddcdc75;
    width: 100%;
    margin: 0;
    display: none;
}
.sidenav .main_menu .sub_menu li a{
    border: none;
    color: #636262;
    text-transform: capitalize;
}
.sidenav .main_menu .sub_menu li a:hover, .sidenav .main_menu .sub_menu li a.active_link{
    background-color: var(--secondary-color);
    color: #fff;
    font-weight: 400;
}
header{
    position: absolute;
    right: 0;
    left: 0;
    z-index: 500;
}
marquee {
    padding: 0.5rem;
    height: 40px;
    background: var(--secondary-color);
}
marquee p {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0
}
#topnav{
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#topnav ul{
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    width: 100%;
}
/* #topnav ul li{
    padding: 0px 10px;
} */
#topnav figure{
    display: none;
}
#topnav figure img{
    display: block;
    width: 150px;
    height: auto;
}
#topnav #open-nav{
    display: none;
}
#topnav #open-nav button{
    background-color: var(--first-color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 2px;
}
/****************************************** SIGN UP FORM *****************************************************/
input, .select2-container .select2-selection--single{
    width: 100%;
    resize: none;
    border-image: initial;
    border: 1px solid rgb(227 227 227);
    /* padding-bottom: 15px; */
    padding: 0px 16px;
    font-size: 14px;
    /* margin-top: 25px; */
    outline: none;
    appearance: none;
    height: calc(2.25rem + 2px);
    background-color: transparent;
    color: rgb(0, 0, 0);
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.contact_form input.invalid, .select2.invalid ~ .select2-container .select2-selection--single{
    border: 1px solid #f56c6c;
}
#openForm input.invalid, .select2.invalid ~ .select2-container .select2-selection--single{
    border: 1px solid #f56c6c;
}
textarea{
    background-color: transparent;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(227 227 227);
    border-radius: 5px;
    width: 100%;
    font-size: 14px;
    resize: none;
    padding: 10px 16px;
    border-image: initial;
}
input[type=submit]{
    background-color: var(--secondary-color);
    border: none;
    color: #fff;
    transition: 0.5s all ease;
}
input[type=submit]:hover{opacity: 0.9;}
textarea:focus{outline: none;}
label{
    font-weight: 600;
    font-size: 14px;
}
.select2-dropdown {
    z-index:99999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    position: absolute;
    top: 0;
    right: 15px;
    width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #6d6d6d;
    line-height: initial;
    padding: 0;
}
.select2-search--dropdown .select2-search__field{display: none;}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    display: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #71bfe4;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #444;
    color: #fff;
}
.select2-results__option {
    font-size: 15px;
}
.select2-container--open .select2-dropdown--above {
    border: 1px solid rgb(227 227 227);
    border-bottom: none;
}
.select2-container--open .select2-dropdown--below{
    border: 1px solid rgb(227 227 227);
    border-top: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #71bfe4;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #444;
    color: #fff;
}
#topnav .signUp, #topnav .welcomeAdmin{
    text-transform: capitalize;
    font-size: 14px;
    padding: 3.5px 25px;
    border: 1px solid var(--first-color);
    background-color: var(--first-color);
    border-radius: 2px;
    font-weight: 500;
    margin-left: 10px;
    transition: 0.3s all ease;
}
#topnav .signUp:hover{
    color: var(--first-color);
    background-color: transparent;
}
/*******************************************************Home Page************************************************/
.home_banner, .offer_sec {direction: ltr;}
.home_banner .owl-slider .item{
    position: relative;
    max-height: 600px;
    height: 100%;
    overflow-y: hidden;
}
.home_banner .owl-slider .item img{
    height: auto;
}

.owl-theme .custom-nav{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.home_banner .owl-theme .custom-nav .owl-prev i, .home_banner .owl-theme .custom-nav .owl-next i {
    font-size: 2rem;
    color: #ffffff1a;
    transition: 0.3s all;
}
.home_banner .owl-theme .custom-nav .owl-prev i:hover, .home_banner .owl-theme .custom-nav .owl-next i:hover{
    color: #ffffff;
}
.owl-theme .custom-nav .owl-prev {
    position: absolute;
    left: 10px;
    display: block !important;
    z-index: 100;
    background:none !important;
}
.owl-theme .custom-nav .owl-next {
    position: absolute;
    right: 10px;
    display: block !important;
    z-index: 100;
    background: none;
}
.owl-theme .owl-dots{
    display: none;
}
.owl-theme .owl-nav [class*="owl-"]{
    background: none;
    border: none;
}
.owl-theme .owl-nav [class*="owl-"]:hover{
    background: transparent;
}
.home_banner .caption{
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0000006e;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.home_banner .item .caption h1, .home_banner .item .caption p, .home_banner .item .caption a{
    color: white;
    text-align: center;
    text-shadow: 1px 1px 1px black;
}
.home_banner .item .caption h1{
    text-transform: uppercase;
    font-size: 60px;
    margin: 0px;
    color: #ffffff;
    font-weight: 900;
}
.home_banner .item .caption p{
    text-transform: capitalize;
    font-size: 16px;
    margin: 0;
}
.home_banner .item .caption hr{
    width: 50px;
    display: block;
    text-align: center;
    color: #ffffff;
    opacity: 1;
    height: 1px!important;
    margin: 7px 0px 0px;
}
.home_banner .owl-slider .item .caption .banner_url{
    position: absolute;
    bottom: 10%;
}
.home_banner .owl-slider .item .caption .banner_url a{
    text-decoration: none;
    text-transform: capitalize;
    padding: 10px 25px;
    border-radius: 20px;
    text-shadow: none;
    color: var(--first-color);
    font-weight: 500;
    border: 1px solid var(--first-color);
    transition: ease 0.3s all;
}
.home_banner .owl-slider .item .caption .banner_url a:hover{
    color: #000000;
    background-color: var(--first-color);
    transform: none;
}
.home_banner .item .caption i{
    font-size: 30px;
    color: var(--first-color);
}
/**********************About********************************/
.about_sec .content{
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    padding: 60px 45px;
    color: #ffffff;
    background-color: var(--secondary-color);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;box-shadow: rgba(2, 2, 2, 0.815) 0px 7px 29px 0px;
}
.about_sec .content h6{
    font-size: 14px;
    font-weight: 200;
    text-transform: uppercase;
}
.about_sec .content h2{
    text-transform: capitalize;
    color: #ffffff;
    margin-right: 0;
    padding-right: 12px;
}
.about_sec .content p{color: #c5d4df;}
/* .about_sec .content p #about-more{display: none;} */
.read_more{
    text-decoration: none;
    color: var(--first-color);
    text-transform: capitalize;
    display: block;
}
.read_more:hover{
    text-decoration: underline;
}
.read_more span, .categories_sec figure figcaption .view_category span{
    font-family: 'DMSans', sans-serif;
    letter-spacing: -4px;
    margin-right: 5px;
}
/************************ARTICLES**************************/
section h2{
    margin-bottom: 32px;
    border-right: 4px solid var(--first-color);
    margin-right: 12px;
    line-height: 50px;
    font-size: 25px;
}
.article_sec figure{
    position: relative;
    margin-bottom: 0;
    max-height: 280px;
    overflow-y: hidden;
}
.article_sec figure img{
    cursor: pointer;
}
.article_sec figcaption{
    position: absolute;
    left: 0;
    right: 0;
    background-color: #000000d1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    padding: 0px 10px;
    bottom: 0;
    color: #CBCBCB;
    font-size: 12px;
}
.article_sec figcaption span a{
    text-decoration: none;
    color: var(--first-color);
}
.article_sec .article_post{
    border: 1px solid #cdcdcd;
    padding: 20px;
}
.article_sec .article_post:hover{
    background-color: #f3f3f3;
}
.article_sec .article_post h3{
    font-size: 20px;
    text-transform: capitalize;
}
.article_sec .article_post p{
    color: #777777;
}
.article_sec .article_post .read_more,
.article_sec .article_post p{
    font-size: 14px;
}
.article_sec .all_article{
    text-transform: capitalize;
    font-size: 14px;
    padding: 10px 34px;
    background-color: var(--first-color);
    border-radius: 35px;
    font-weight: 500;
}
.article_sec .all_article:hover{
    background-color: transparent;
    border: 2px solid var(--first-color);
}
.article_popup{
    padding: 2% 5%;
}
.service_popup, .sign_up{
    height: 100%;
    z-index: 3000;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0;
    background-color: rgb(0 0 0 / 83%);
    padding: 8px 0;
    position: fixed;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
}
div.modal.fade.show {
    background-color: #000000a8;
    /* width: 100%; */
    /* left: 0; */
    /* right: 0; */
    z-index: 3000;
}
.modal{
    --bs-modal-width: 700px;
}
.modal .modal-body{
    padding: 0px 5% 10px;
}
button.btn.btn-secondary {
    border: 0;
    background: transparent;
    color: #696969;
    /*font-size: 20px;*/
    font-weight: 800;
    font-family: 'Font Awesome 5 Free';
}
.sign_up #openForm::-webkit-scrollbar{width: 0;}
.modal::-webkit-scrollbar,
.service_popup #openService::-webkit-scrollbar{
    width: 0px;
}
.modal::-webkit-scrollbar-track,
.service_popup #openService::-webkit-scrollbar-track{
    background-color: transparent;
}
.modal::-webkit-scrollbar-thumb,
.service_popup #openService::-webkit-scrollbar-thumb{
    border-radius: 20px;
    background-color: #c0c0c0;
    /* padding: 2px; */
}
.service_popup #openService, .sign_up #openForm{
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    max-height: 100%;
   /* height: 100%;*/
    overflow-y: scroll;
    max-width: 700px;
    margin: 0 5%;
    padding: 0px 5% 35px;
    transition: 0.5s all;
}
.sign_up #openForm{
    max-width: 555px;
}
.modal .popupTitle .article_info{
   /* margin-top: 38px; */
    padding: 15px;
    border-right: 7px solid #000;
    text-transform: capitalize;
}
.modal .popupTitle h3{
    color: #000;
    font-weight: 600;
}
.modal .popupTitle time, .modal .popupTitle p{
    color: #2b2b2b;
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 500;
}
.modal .popupTitle p a{
    color: var(--secondary-color);
    font-weight: 500;
    text-decoration: none;
}
.modal .popupTitle time{
    position: relative;
    padding-right: 5px;
}
.modal .popupTitle span {text-transform: lowercase;}
/* .article_sec .modal .popupTitle time::after, .seperator::after {
    position: absolute;
    content: "";
    right: 0px;
    top: 50%;
    height: 17px;
    width: 1px;
    background: #999999;
    z-index: 7;
    transform: translateY(-50%);
} */
.modal .popupTitle #popup_close,
.service_popup #openService .popupTitle #popup_close,
.sign_up #openForm .popupTitle #popup_close{
    text-decoration: none;
    color: #8f8f8f;
    width: auto;
    transition: 0.3s all;
    font-family: 'openSans';
    font-weight: 700;
    font-size: 30px;
    font-weight: 800;
    margin-top: 10px;
    background: none;
    border: 0;
}
.sign_up #openForm .popupTitle #popup_close{float: right;}
.modal p{
    color: #5f5f5f;
}
/***********************Job Vacancies**************************/
section.job_sec {
    background-color: aliceblue;
}
.job_sec .job_content{
    background-color: #ffffff;
    border: 1px solid #e9e7e7;
    padding: 15px;
    border-radius: 15px;
}
.job_sec .job_content .apply{color: #000;}
.job_sec .job_content .apply:hover{color: #ffffff;}
.job_sec .job_content:has(.apply:hover){
    background-color: var(--secondary-color);
    border: 1px solid #e9e7e7;
    color: #fff;
    padding: 15px;
    border-radius: 15px;
}
.job_sec .job_content:has(.apply:hover) .jobDetails p{
    background-color: #043e69;
    font-weight: 400;
}
.job_sec .job_content:has(.apply:hover) figcaption p, .job_sec .job_content:has(.apply:hover) .jobPost p{
    color: #ffffff82;
}
.job_sec .job_content img{
    width: 40px;
    display: block;
    margin-left: 10px;
    border-radius: 15px;
}
.job_sec .job_content figcaption h4{
    font-size: 16px;
    margin-bottom: 0;
    font-weight: bold;
}
.job_sec .job_content figcaption p{
    font-size: 12px;
    color: #939393;
    text-transform: capitalize;
}
.job_sec .job_content .jobDetails{
    display: flex;
    align-items: center;
    padding: 0px 5px;
}
.job_sec .job_content .jobDetails .col-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0px 3px;
}
.job_sec .job_content .jobDetails p{
    background-color: #f1f1f1;
    padding: 4px 7px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
}
.job_sec .job_content .jobDetails p::first-letter{ text-transform: capitalize;}
.job_sec .job_content h6{
    font-size: 12px;
    margin-bottom: 0;
    font-weight: bold;
}
.job_sec .job_content .about_job p{
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 0;
    font-weight: 500;
}
.job_sec .job_content:has(.apply:hover) .about_job p{color: #f1f1f1;}
.job_sec .job_content:has(.apply:hover) .about_job p .details_job{color: #f1f1f1d2;}
.job_sec .job_content .about_job p .details_job{
    cursor: pointer;
    padding-right: 10px;
    color: #777;
}
.job_sec .job_content .jobPost p{
    font-size: 12px;
    color: #939393;
    margin-bottom: 0;
}
.job_sec .moreJobs, .offer_sec .moreOffers{
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.job_sec .moreJobs i, .offer_sec .moreOffers i{
    margin-left: 10px;
    transform: rotate(180deg);
}
/*********************Categories******************************/
.categories_sec figure{
    position: relative;
    display: flex;
    align-items: center;
    background-color: aliceblue;
    padding: 10px 15px 50px;
}
.categories_sec figure img{
    display: block;
    width: 100px;
    height: auto;
}
.categories_sec figure figcaption .view_category{
    position: absolute;
    bottom: -13px;
    left: -3px;
    background-color: #ffffff;
    font-size: 12px;
    border: 2px solid var(--secondary-color);
    text-transform: capitalize;
    font-weight: 500;
    width: 55px;
    height: 55px;
    color: var(--secondary-color);
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s all;
}
.categories_sec figure figcaption .view_category:hover{
    background-color: var(--secondary-color);
    color: #fff;
}
.categories_sec figure figcaption h5{
    font-size: 16px;
}
.show_more, .viewCategories{
    text-transform: capitalize;
    font-size: 14px;
    padding: 10px 34px;
    background-color: var(--secondary-color);
    border-radius: 35px;
    color: #fff;
    transition: 0.3s all;
}
.show_more:hover, .viewCategories:hover{
    opacity: 0.95;
}
/*********************Top Offers**********************/
.owl-centered .owl-stage {
    display: table !important;
}
.owl-centered .owl-item {
    display: table-cell;
    float: none;
    vertical-align: middle;
}
.offer_sec .owl-theme .custom-nav .owl-prev i, .offer_sec .owl-theme .custom-nav .owl-next i {
    font-size: 1.5rem;
    color: var(--first-color);
    transition: 0.3s all;
}
/* .offer_sec .owl-theme .custom-nav{
    z-index: -111;
} */
.offer_sec .owl-theme .custom-nav {
    position: initial;
}
.offer_sec .owl-theme .custom-nav .owl-prev {
    position: absolute;
    left: 0px;
    background: none !important;
    display: flex;
    align-items: center;
    top: 46%;
}
.offer_sec .owl-theme .custom-nav .owl-next {
    position: absolute;
    right: 0px;
    background: none !important;
    display: flex;
    align-items: center;
    top: 46%;
}
.offer_sec .item{
    display: block;
    margin: 0px 10px;
    position: relative;
}
.offer_sec .item .offer_overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #000000a1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.offer_sec .item .offer_overlay i{
    color: white;
    font-size: 20px;
}
.offer_sec .item:hover .offer_overlay{
    opacity: 1;
}
/************************************************Inner Pages***************************************************/
.page_banner{
    display: block;
    height: 50vh;
    position: relative;
    margin-top: 40px;
    border-top: 1px solid #fff;
    background-image: url(../img/Researching-business-ideas.png.jpg);
    background-size: cover;
    background-position: center;
}
.page_banner .banner_overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    background-color: #014a81e8;
    color: #fff;
}
/*********************Main Categories Page*********************/
.categories_sec .category{display: none;}

/*********************Vendors Page*********************/
.vendors_page .item{
    margin: 0;
    display: none;
}
.vendors_page .item figure{
    position: relative;
    max-width: 250px;
}
.vendors_page .item figure figcaption {
    background: #00000078;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.vendors_page .item .offer_overlay{border-radius: 10px;}
.vendors_page .item figure figcaption h4{font-size: 14px; margin: 0;}
.vendors_page .item img{
    display: block;
    border-radius: 10px;
    width: 100%;
}

/*********************Vendors Page*********************/
.vendor_details.container-fluid{
    padding: 100px 5%;
    margin-top: 117px;
    background-color: aliceblue;
    border-top: 3px solid var(--secondary-color);
}
.vendor_details figure, .contact_form{
    border-radius: 10px;
    padding: 45px 5%;
    /* margin-top: -100px; */
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.vendor_details figure .vendor_img{margin-top: -117px;}
.vendor_details figure img{
    display: block;
    border-radius: 50%;
    width: 150px;
}
.vendor_details figure figcaption h3{
    text-align: center;
    margin: 16px 0px;
    font-size: 25px;
    font-weight: bold;
    color: #000;
}
.vendor_details figure figcaption h6{
    text-align: center;
    margin: 16px 0px;
    font-size: 25px;
    font-weight: bold;
    color: #000;
}
.vendor_details figure figcaption p{
    text-align: center;
    margin: 16px 0px;
    font-size: 14px;
    color: #000;
}
.vendor_details .social_media{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
}
.vendor_details .social_media a, .vendor_details .contacts .social_media a{
    border: 2px solid var(--secondary-color);
    /* padding: 10px; */
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--secondary-color);
    transition: 0.3s all ease;
}
.vendor_details .social_media a:hover, .vendor_details .contacts .social_media a:hover{
    color: #fff;
    background-color: var(--secondary-color);
}
.vendor_details .contacts .info{
    background-color: #fff;
    margin-bottom: 22px;
    position: relative;
    padding: 25px 15px 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    border-radius: 10px;
}
.vendor_details .contacts div a{
    color: #000000;
    font-size: 18px;
}
.vendor_details .contacts div p{
    color: #575757;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 600;
}
.vendor_details .contacts div i{
    font-size: 14px;
    /* padding: 13px; */
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: rgb(255, 255, 255);
    position: absolute;
    top: -15px;
}
.vendor_details .work_gallery{margin-top: 45px;}
.vendor_details .work_gallery img{    border-radius: 10px;}
.vendor_details .work_gallery .pic-box{
    display: flex;
    align-items: center;
}
.vendor_details .work_gallery .pic-box a{position: relative;}
.vendor_details .work_gallery .pic-box .details-pic{
    background-color: #000000ad;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 10px;
    transition: 0.3s ease all;
    opacity: 0;
}
.vendor_details .work_gallery .pic-box:hover .details-pic{opacity: 1;}
.vendor_details .work_gallery .pic-box .details-pic i{
    color: var(--secondary-color);
    background-color: #fff;
    padding: 8px;
    border-radius: 50%;
    font-size: 14px;
}
/*********************offer details*********************/
.contactUs.container-fluid{
    padding: 60px 5%;
    margin-top: 0;
    border: 0;
}
.offer figure .offer_img {
    margin-top: -95px;
}
.offer figure img {
    display: block;
    border-radius: 10px;
    width: 90%;
}
/*********************Articles Page*********************/
.article_sec article.article{
    display: none;
}
/*********************Jobs Page*********************/
.job_sec .job{
    display: none;
}
/*********************Services Page*********************/
.services_sec .service{
    display: none;
}
.services_sec figure img{width: 50px;}

/************************************************Footer*******************************************************/
footer{
    border-top: 3px solid var(--secondary-color);
    padding-top: 32px;
    background-color: rgb(245 245 245 / 48%);
}
footer img{
    width: 200px;
}
footer h5{
    text-transform: capitalize;
}
footer li{
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
footer li:hover i{
    transition: 0.3s all;
    opacity: 0.8;
}
footer ul li a{
    text-decoration: none;
    text-transform: capitalize;
    color: #7a797c;
    margin-bottom: 5px;
}
footer ul li a:hover{
    transition: 0.3s all;
    color: var(--secondary-color);
}
footer i{
    color: var(--secondary-color);
}
footer li p{
    text-transform: capitalize;
    color: #7a797c;
    margin-bottom: 10px;
    padding-right: 10px;
    font-size: 14px;
}
footer li a{
    color: #7a797c;
    margin-bottom: 10px;
}
footer li a p:hover{
    color: var(--secondary-color);
}
footer #copyrights{
    background-color: #d4d4d4;
    text-align: center;
    padding: 10px 0px;
    font-size: 14px;
}
footer #copyrights p{
    margin-bottom: 0;
}
footer #copyrights a{
    text-decoration: none;
    color: var(--secondary-color);
    font-weight: 500;
    transition: 0.3s all;
}
footer #copyrights a:hover{
    color: #0334ac;
}

/******************************************Responsive Mode********************************************/
@media screen and (max-width: 1000px){
    #sidenav{
        display: none;
    }
    main{
        margin-right: 0;
    }
    #topnav #open-nav, #topnav figure, #sidenavResponsive #close{
        display: block;
    }
    /* #topnav ul{
        display: none;
    }
    #topnav ul li{
        padding: 0px 10px;
    } */
    .page_banner{
        margin-top: 115px;
    }
}
@media screen and (max-width: 767px){
    .offer_sec .owl-theme .custom-nav .owl-next, .offer_sec .owl-theme .custom-nav .owl-prev{
        top: 52%;
    }
}
@media screen and (max-width: 575px){
    .home_banner .item .caption h1{
        font-size: 30px;
    }
    .home_banner .owl-slider .item .caption .banner_url a{
        padding: 5px 17px;
    }
    .home_banner .item .caption i{
        font-size: 20px;
    }
    header{
        position: initial;
    }
    main section.about_sec{
        padding: 60px 0px;
    }
    main section, main section.container-fluid, .contactUs.container-fluid {
        padding: 30px 5%;
    }
    .page_banner{
        margin-top: 0;
        height: 25vh;
    }
    .vendor_details figure img{width: 145px;}
    .offer figure img {width: 90%;}
    .vendor_details figure, .vendor_details.container-fluid{margin-top: 0px;}
}