@import url('https://fonts.googleapis.com/css2?family=Chango&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.anim {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 9999; /* Ensure it appears above other elements */
}
div,
li,
ul,
a,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

::placeholder,select{
color: var(--black);
}
.content {
margin: 100px 0 0 0;
}
@media (max-width: 992px) {
.content {
margin: 50px 0 0 0;
}
}
textarea {
resize: both ;
}

textarea:focus,
input:focus,
select:focus {
outline: none;
}

.form-control:focus,
.form-select:focus {
box-shadow: none;
border: none;
}

:root {
--white: #d9d9d9;
--black: #000;
--black-n:#2e2e2e;
--bg-color: #445435;
--hover: #4547a0;
--fade: #f2f2f2;
--fade-2: #e7e7e7;
--shadow: 0px 5px 15px rgba(74, 103, 141, 0.16);
--invert-white: invert(95%) sepia(100%) saturate(0%) hue-rotate(150deg) brightness(106%) contrast(105%);
}

body {
font-family: "Montserrat", serif;
background-color: white;
}

/* bottom button styling start  */
.bottom_button a {
padding: 3px 9px;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
z-index: 9;
background-color: black;
}
.bottom_button a img {
height: 13px;
width: 12px;
filter: invert(95%) sepia(100%) saturate(0%) hue-rotate(150deg) brightness(106%) contrast(105%);
}
.bottom_button a:hover {
background-color: var(--black-n);
}
/* bottom button styling end  */

/* navbar styling starts */
.my_navBar {
display: flex;
justify-content: space-between;
background-color: var(--white);
top: 0;
left: 0;
position: fixed;
z-index: 999;
width: 100%;
}

.navBar_links {
display: flex;
gap: 1rem;
text-align: center;
align-items: end;
padding: 10px 20px;
margin: 10px;
background-color: var(--white);
}

.navBar_links li {
list-style-type: none;
}

.navBar_links li a {
color: var(--black);
text-decoration: none;
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
border: 1px solid var(--white);
background-color: var(--white);
padding: 6px 8px;
transition: all ease .2s;
}

.navBar_links li a:hover {
color: var(--white);
border: 1px solid var(--white);
background-color: var(--black);
}

.navBar_logo {
background-color: var(--black);
display: flex;
align-items: center;
padding: 0px 60px;
}

.navBar_logo li {
list-style-type: none;
}

.navBar_logo img {
height: 105px;
}

#hamburger_menu,
.hamburger_checkbox {
display: none;
}

#hamburger_menu:not(:checked)+label:before {
font-family: "FontAwesome";
content: "\f0c9";
font-size: 19px;
color: var(--black);
}

#hamburger_menu:checked+label:before {
font-family: "FontAwesome";
content: "\f00d";
font-size: 19px;
color: var(--black);
}

@media (max-width: 992px) {
.my_navBar {
display: flex;
justify-content: end;
}

.navBar_logo {
padding: 0px 10px;
}

.navBar_logo img {
height: 50px;
}

.navBar_links {
position: fixed;
top: 50px;
height: 100%;
width: 70%;
left: -100%;
margin: 0%;
align-items: start;
flex-direction: column;
transition: all 0.5s ease;
}

.hamburger_checkbox {
display: flex;
height: 40px;
width: 40px;
align-items: center;
position: absolute;
left: 20px;
top: 50%;
margin-left: 20px;
transform: translate(-50%, -50%);
}
.hamburger_checkbox::after{
content: "MENU";
color:black;
padding-left:10px;
font-weight: bold;
font-size: 20px;
}
#hamburger_menu:checked~.navBar_links {
left: 0;
}

.navBar_links li a {
color: var(--black);
text-decoration: none;
font-size: 20px;
}
}

/* error page */
.error_page {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.error_content {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
}

.notfound_404 {
width: 170px;
height: 170px;
background: black;
border-radius: 7px;
box-shadow: 0 0 0 10px black inset, 0 0 0 20px #fff inset;
position: relative;
}

.notfound_404 h1 {
font-family: chango, cursive;
color: #fff;
font-size: 118px;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
height: 60px;
line-height: 60px;
}

.notfound_content h2 {
font-family: chango, cursive;
font-size: 68px;
color: black;
font-weight: 400;
text-transform: uppercase;
margin-left: 40px;
line-height: 1.1;
}

@media (max-width:786px) {
.notfound_content h2 {
margin: 0;
font-size: 48px;
margin-top: 20px;
}

.error_content {
flex-direction: column;
text-align: center;
}
}

/* error page ends here */

/* pagination styling  */
.pagination {
font-size: 15px;
margin: 20px 0;
}

.pagination-link {
padding: 6px 10px;
border: 1px solid #ccc;
text-decoration: none;
color: #000;
transition: background-color 0.3s ease;
}

.pagination-link:hover {
background-color: #f0f0f0;
}

.pagination-link.active {
background-color: black;
color: #fff;
}

/* main page starts */
.main_page{
min-height: calc(80vh - 100px);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
position: relative;
}
.main_page h4{
font-size: 50px;
font-weight: bold;
margin-bottom: 5px;
}
.main_page h5{
font-size: 24px;
margin-bottom: 20px;
}
.forward_button{ 
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
}
.button_link i{
transition: transform .3s ease;
}
.button_link:hover > i {
transform: translateX(5px);
}
.forward_button a{
display: inline-block;
color: var(--black);
}
.forward_button a:hover{
color: var(--hover);
}

/* find job styling strats */
.main_page{
width: 100%;
}
.search_box {
display: grid;
grid-template-areas: "job_title job_type job_category job_find";
background-color: var(--fade);
align-items: center;
justify-items: start;
position: relative;
width: 100%;
}

.job_title, .job_type, .job_category, .job_find {
position: relative;
display: flex;
align-items: center;
}

.job_title {
grid-area: job_title;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.job_title ul{
position: absolute;
top: 50px;
left: 0;
z-index: 1;
text-align: left;
}
.job_type {
grid-area: job_type;
}

.job_category {
grid-area: job_category;
}

.job_find {
grid-area: job_find;
justify-content: center;
}

.job_title input {
padding-left: 24px;
height: 40px;
border: none;
width: 340px;
border-radius: 3px;
background-color: transparent;
font-size: 18px;
}

.job_title_icon input {
position: relative;
}

.job_title_icon::before {
position: absolute;
top: 50%;
left: 8px;
font-family: "FontAwesome";
content: "\f002";
font-size: 20px;
color: var(--black);
transform: translateY(-50%);
}

.job_type {
display: flex;
justify-content: center;
align-items: center;
}

.job_type p {
margin: 0;
font-size: 18px;
color: var(--black);

display: flex;
align-items: center;
}

.job_icon::before {
font-family: "FontAwesome";
content: "\f3c5";
font-size: 24px;
color: var(--black);
margin-right: 8px;
}

.job_category {
position: relative;
display: flex;
}

.job_category select {
padding-left: 26px;
height: 40px;
width: 340px;
border: none;
border-radius: 3px;
background-color: transparent;
font-size: 18px;
}

.job_category_icon::before {
position: absolute;
top: 50%;
left: 8px;
font-family: "FontAwesome";
content: "\f07b";
font-size: 20px;
transform: translateY(-50%);
pointer-events: none;
}

.job_find {
justify-content: center;
align-items: center;
}

.job_find button {
border: none;
background-color: var(--black);
color: var(--white);
padding: 25px 50px;
font-weight: bold;
}
.job_title, .job_type {
border-right: 2px solid var(--black);
height: 40px;
padding: 20px 10px;
}
.job_category{
height: 40px;
padding: 20px 10px;
}
.search_box{
padding-left: 10px;
}
@media (max-width: 992px) {
.job_title ul{
top: 35px;
}
.job_title input {
width: 90%;
border-bottom: 1px solid black;
padding: 8px 19px;
}
.job_category select {
width: 95%;
border-bottom: 1px solid black;
}
.job_type p {
border-bottom: 1px solid black;
}

.job_title_icon::before {
margin-left: -5px
}
.job_category select {
padding-left: 23px;
}

.job_category_icon::before {
left: 4px;
}
.main_page{
min-height: calc(90vh - 100px);
}
.main_page h4 {
font-size: 24px;
}

.main_page h5 {
font-size: 18px;
margin-top: 10px;
}

.search_box {
justify-content: center;
padding: 24px;
width: 100%;
grid-template-areas:
"job_title"
"job_type"
"job_category"
"job_find";
}

.job_find button{
padding: 8px 16px;
}
.job_type {
justify-content: left;
margin-left: -7px;
}

.icon_text {
padding-left: 2px;
}

.job_title, .job_category {
border: none;
margin: 20px 0;
}

.job_title, .job_type, .job_category {
border: none;
}
.job_title {
align-items: start;
justify-content: center;
}
}
.main_page h6{
display: none!important;
}
/* job detailing design start here */
.browse_jobs_design .main_page h4 ,
.browse_jobs_design .main_page h5 {
display: none;
}

.browse_jobs_design .main_page h6 {
display: block!important;
font-size: 50px;
margin-bottom: 20px;
font-weight: bold;
}

@media (max-width: 992px) {
.browse_jobs_design .main_page{
display: flex;
align-items: center;
}
}
.job_title_design {
background-color: var(--fade);
align-items: center;
padding: 25px 0px 25px 10px;
}

.job_apply_design {
display: flex;
justify-content: space-around;
align-items: center;
}

.job_title_design h4 a {
font-size: 24px;
color: var(--black);
display: inline;
}

.job_title_design h4 a:hover {
color: var(--hover);
}

.job_title_design h6 a {
font-size: 14px;
color: var(--black);
text-decoration: underline;
padding: 5px 0;
}

.job_title_design h6 a:hover {
color: var(--hover);
}

.job_apply_design h5 {
font-size: 14px;
color: var(--black);
align-items: center;
display: flex;
font-weight: bolder;
}

.job_apply_design h5::before {
font-family: "FontAwesome";
content: "\f3c5";
font-size: 24px;
color: var(--black);
margin-right: 8px;
}

.job_apply_design h6 {
font-size: 14px;
color: var(--black);
align-items: center;
display: flex;
font-weight: bolder;
}

.job_apply_design h6::before {
font-family: "FontAwesome";
content: "\f017";
font-size: 24px;
color: var(--black);
margin-right: 8px;
}


.design_apply a {
background-color: var(--black);
padding: 12px 15px;
color: var(--white);
font-size: 14px;
font-weight: bolder;
transition: all ease 0.3s;
}
.design_apply a:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white!important;
}

.button_link{
text-align: center;
margin: 50px 0;
}
.button_link a{
border: 1px solid var(--black);
background-color: var(--black);
color: var(--white);
font-size: 17px;
padding: 12px 15px;
transition: all ease 0.3s;
font-weight: bolder;
}
.button_link a:hover{
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;

}
.job_design_1 {
position: relative;
}

.explain_more a {
transition: all 0.9s ease;
/* Reordered for better readability */
}

.explain_more a:hover {
text-decoration: underline;
}
.job_design_2{
position: relative;
}
.add {
position: sticky;
top: 120px;
right: 0;
}
.ad-container {
display: none;
}

#new-ad1{
position: sticky;
top: 240px;
right: 0;
padding: 0px;
background-color: transparent;
}
@media screen and (min-width: 992px) {
.add1{
top:0;
}
.ad-container {
display: block;
}
}
@media (max-width: 1200px) {
.job_apply_design {
border: none;
margin: 20px 0;
}
.job_design_2{
order:2;
}
}
@media (max-width: 1200px) {

.job_apply_design h5 , .job_apply_design h6 a, .design_apply a{
font-size: 12px!important;
}
.add {
position: relative !important;
top: 0px;
}

.job_apply_design {
border: none;
margin: 20px 0;
align-items: start;
}
}


/* job details show on next page start here */
.detail_desig_1{
position: relative;
}

.job_details_design_1 {
border: 1px solid var(--fade);
background-color: var(--fade);
margin: 20px 0;
padding: 20px;
position: relative;
}

.job_details_design_1 h4,
.job_role_insight h4 {
font-weight: bold;
font-size: 28px;
}

.job_details_design_1 h6 {
font-size: 15px;
}
.job_details_design_1 a{
color: var(--black);
text-decoration: underline;
}
.job_details_design_1 a:hover{
color: var(--hover);
}
.jdf_left,
.jdf_right {
display: flex;
align-items: center;
}

.jdf_left {
justify-content: flex-start;
gap: 1rem;
}
.jdf_left_1{
position: relative;
display: flex;
align-items: center;
}
.jdf_left_1::before{
font-family: "FontAwesome";
content: "\f3c5";
font-size: 20px;
color: var(--black);
margin-right: 8px;
}
.jdf_left_2{
position: relative;
display: flex;
align-items: center;
}
.jdf_left_2::before{
font-family: "FontAwesome";
content: "\f017";
font-size: 20px;
color: var(--black);
margin-right: 8px;
}
.jdf_right {
justify-content: flex-end;
}

.jdf_right a {
font-size: 17px;
background-color: var(--black);
color: var(--white);
padding: 10px 16px;
font-weight: bolder;
transition: all ease 0.3s;
}
.jdf_right a:hover {
color: white;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
}
.job_role_insight,
.description {
background-color: var(--fade);
padding: 20px;
margin: 20px 0;
}

.job_role_insight h1 {
font-weight: bold;
font-size: 28px;
}
.jri_content{
border-bottom: 1px solid rgb(199, 192, 192);
padding: 15px;
}
.description h1,
.description h2,
.description h3,
.description h4
{
font-weight: bold;
font-size: 24px;
margin: 20px 0;
}

.description p {
margin: 10px 0;
text-align: justify;
}

.description ul {
margin-bottom: 10px;
margin-left: 20px;
}

.description ul li {
text-align: justify;
}

.show_details_job {
background-color: var(--fade);
padding: 20px 20px 45px 20px;
}

.show_details_job h6{
color: black;
font-size: 30px;
font-weight: bold;
}
.show_details_job h5 {
color: black;
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
.show_details_job h5 a{
border: 1px solid black;
font-size: 17px;
padding: 10px 16px;
color: var(--white);
background-color: black;
transition: all ease 0.3s;
}
.show_details_job h5 a:hover{
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
.similar_post_title{
font-size: 30px;
margin: 10px 0;
font-weight: bold;
}
.similar_post_content{
background-color: var(--fade);
margin: 5px;
}
.similar_post_content:nth-child(1){
margin-left: 0;
}
.similar_post_content:nth-child(3){
margin-right: 0;
}
.similar_title{
font-size: 24px;
font-weight: bold;
padding: 20px 20px 0 20px;
}
.similar_company{
font-size: 14px;
padding: 0px 20px 0 20px;
}
.similar_company a{
color: black;
text-decoration: underline;
font-size: 14px;
}
.similar_company a:hover{
color: var(--hover);
}

.similar_link a{
font-size: 14px;
background-color: black;
padding: 8px 9px;
color: var(--white);
display: inline;
transition: all ease 0.3s;
}
.similar_link a:hover{
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
.filters{
position: sticky;
top: 120px;
right: 0;
}
.show_de_job {
background-color: var(--fade);
padding: 20px;
}
.open_filter_class , .close_filter_class{
display: none;
}
#filter_toggle{display: none;}
@media (max-width: 992px) {
.lb{
display: flex;
align-items: center;
justify-content: space-between;
}
.close_filter_class{
display: block;
padding: 4px 6px;
background-color: black;
color: white;
align-self: flex-start;
display: inline;
}

.job_design_1{
order: 1;
}
.open_filter_class {

font-family: "FontAwesome";
font-size: 19px;
color: var(--black);
cursor: pointer;
width: 30px; /* Adjust width and height as needed */
height: 30px;
}

.open_filter_class::before {
content: "\f0b0"; /* FontAwesome icon (cross symbol) */
}

.open_filter_class::after {
content: ""; /* Removes label text */
}
.open_filter_class{
display: flex;
}
.show_de_job {
position: fixed;
top: 50px;
right: -100%;
transition: all ease 0.3s;
margin: 0;
height: 100%;
padding: 20px;
z-index: 10;
width: 50%;
background:var(--fade);
}

#filter_toggle:checked ~ .show_de_job {
right: 0%;
}



.job_details_design_3{
margin-bottom: 20px;
}
.job_details_design_1 h4{
font-size: 22px;
}
.jdf_left_1{
font-size: 12px!important;
}
.jdf_left_2{
font-size: 12px!important;
}
.jdf_right a{
font-size: 11px;
padding: 7px 8px;

}
.job_role_insight h4{
font-size: 22px;
}
.jri_content p{
font-size: 13px;
}
.jri_content {
border-bottom: none; 
}
.jri_content1{
border-bottom: 1px solid rgb(199, 192, 192);
padding: 15px;
}
.show_details_job h6 a{
font-size: 25px;
}
.show_details_job h5 {
color: black;
font-size: 15px;
}
}
/* Flexbox layout for similar cards */


/* company name content styling start */
.company_name{
min-height: calc(70vh - 100px);
padding: 20px 0;
}

.company_name_title{
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
}
.company_name_content h1{
padding: 10px 0;
}

.company_name_content .button{

border: none;
background-color: transparent;
padding: 4px 8px;
border: 1px solid var(--black);
background-color:white;
margin-bottom: 10px;
font-weight: bold;
}
.company_name_content .button.active{
background-color: black;
color: white;
}
.company_new_title{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.company_new_title a{
border: 1px solid black;
font-size: 17px;
padding: 6px 8px;
font-weight: bold;
color: var(--white);
background-color: black;
transition: all ease 0.3s;
}
.company_new_title a:hover{
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
#overviewContent p{
text-align: justify;
}
@media (max-width: 992px) {
.company_new_title{
flex-direction: column;
justify-content: start;
align-items: flex-start;
}
}

/* category styling start here */
.category_page{
min-height: calc(70vh - 100px);
padding: 20px 0;

}
.category_title{
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
text-transform: uppercase;
}

/* about page styling start here */
.about_page{
min-height: calc(70vh - 100px);
padding: 40px 0;
}
.about_page h4{
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 30px;
font-weight: bolder;
}
.about_content{
background-color: var(--fade-2);
padding: 20px;
}
.about_content h1{
font-size: 30px;
padding: 10px 0;
}
.about_content p{
margin: 10px 0;
text-align: justify;
}
@media (max-width: 992px) {
.about_page{
padding: 0;
margin: 0px 0;
}
.about_page h4{
font-size: 30px;
padding: 20px 0;
margin-bottom:0;
}
.about_content h1{
font-size: 22px;
font-weight: bold;
}
}

/* contact page styling starts here */
.contact_page{
min-height: calc(70vh - 100px);
padding: 40px 0;
}
.contact_page h4{
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 30px;
font-weight: bolder;
}
.contact_form h5{
font-weight: bold;
margin-bottom: 10px;
}
.contact_eamil h5{
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
margin-bottom: 10px;
}
.contactfollow{
background-color: var(--fade);
padding: 20px;
margin-right: 20px;
margin-left: 10px;
}
.contact_eamil a{
font-weight: 500;
font-size: 18px;
color: var(--black-n);
}
.contact_follow h5{
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
margin-bottom: 10px;
}

.contact_follow i{
font-size: 30px;
color: black;
margin-right: 10px;
}
.contact_follow i:hover{
color: var(--hover);
}
.contact_form_content{
background-color: var(--fade);
padding: 20px;
margin-top: 10px
}
.input_style{
background-color: var(--fade);
border-radius: 0px;
height: 40px;
border: 1px solid black;
}
.input_style:focus{
background-color: transparent;
border: 1px solid black;
}
.input_style::placeholder{
color: white;
background-color: black;
padding: 4px 5px;
text-transform: uppercase;
}
.duration{
padding: 10px;
background-color: var(--fade);
}
.duration::placeholder{
color: white;
min-width: 20px;
background-color: black;
padding: 4px 5px;
text-transform: uppercase;
}
.duration2{
display: flex;
align-items: center;
}
.duration2 label{
display: flex;
align-items: center;
}
.text1{
font-weight: 500;
color: black;
padding-left: 10px;
}
.duration2 p{
padding: 0 10px;
font-weight: 600;
}


.contact_button button{
border: 1px solid black;
font-size: 17px;
padding: 6px 8px;
font-weight: bold;
color: var(--white);
background-color: black;
transition: all ease 0.3s;
}
.contact_button button:hover{
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}

@media (max-width: 992px) {
.contact_page h4{
font-size: 30px;
padding: 20px 0;
margin-bottom:0;
}
.contactfollow{
background-color: var(--fade);
margin:10px 0px 10px 15px;
}
}
/* footer strats here */
.bottom_menu{
background-color: var(--fade);
padding: 20px 0;
}
.bottom_left{
display: flex;
justify-content: center;
flex-direction: column;
align-items: end;
}
.bottom_left p{
font-weight: bold;
font-size: 25px;
color: var(--black);
text-align: left;
}
.bottom_right{
display: flex;
justify-content: left;
padding-left: 120px;
}
.bottom_right img{
height: 180px;
}
@media (max-width: 992px) {
.bottom_left {
align-items: center;
order: 2;
}
.bottom_left_text p{
font-size: 20px;
}
.bottom_right{
justify-content: center;
padding-left: 0px;
}
.bottom_right img{
height: 140px;
}
}

/* footer styling */
.my_footer {
display: flex;
justify-content: space-between;
background-color: var(--white);
}

.footer_group {
display: flex;
gap: 10px;
}

.footer_logo {
align-self: flex-start;
padding: 0px;
background-color: var(--black);
display: flex;
align-items: center;
padding: 0px 60px;
order: 1;
}

.footer_logo li {
list-style-type: none;
}

.footer_logo img {
height: 105px;
}

.footer_links {
display: flex;
flex-direction: column;
justify-content: flex-start;
order: 2;
margin: 10px 0;
}

.footer_links li {
list-style-type: none;

}

.footer_links li a {
color: var(--black);
text-decoration: none;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border: 1px solid var(--white);
background-color: var(--white);
transition: all ease 0.2s;
padding: 0 8px;
}

.footer_links li a:hover {
color: var(--white);
border: 1px solid var(--white);
background-color: var(--black);
}

.footer_follow {
padding-right: 20vw;
}

.footer_follow p {
font-size: 24px;
text-transform: uppercase;
font-weight: 800;
color: var(--black);
}

.footer_follow a {
font-size: 30px;
color: black;
margin: 0 4px;
}
.footer_follow a:hover {
color: var(--hover);
}
.sub_footer {
background-color: var(--black-n);
color: var(--white);
text-align: center;
padding: 10px 0;
}
.sub_footer h5{
font-size: 15px;
}
@media (max-width: 992px) {
.my_footer {
flex-direction: column;
}
.footer_follow {
padding-right: 0vw;
padding-left: 10px;
}
.footer_logo {
padding: 0px 10px;
}
.footer_logo li{
background-color: #000!important;
}

.footer_logo img {
height: 50px;
}
.footer_group {
flex-direction: column;
}
}
/* cookeie consent  */

#cookie-consent{
background-color: var(--fade-2);
padding: 20px;
display: flex;
justify-content: space-around;
color: black;
align-items: center;
}


#cookie-consent button{
border: 1px solid black;
font-size: 17px;
padding: 6px 8px;
font-weight: bold;
color: var(--white);
background-color: black;
transition: all ease 0.3s;
}
#cookie-consent button:hover{
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
@media (max-width: 992px) {
#cookie-consent{
flex-direction: column;
}
#cookie-consent button{
border: 1px solid black;
font-size: 15px;
padding: 6px 8px;
font-weight: bold;align-self: flex-start;
display: inline;
margin: 20px 0;        
color: var(--white);
background-color: black;
transition: all ease 0.3s;
}
}

/* admin styling starts here */
.login_page{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login_content{
border: 1px solid var(--fade-2);
padding: 20px;
box-shadow: 0px 5px 15px rgba(74, 103, 141, 0.16);
}
.home_user{
font-size: 32px;
padding: 20px;
border-radius: 50% 50% 30% 30%;
}
.login_page .form-control{
border: 1px solid var(--fade-2);

}
.login_page .login_button{
border: none;
padding: 6px 0;
background-color: var(--black);
color: var(--white);
}
.login_page .login_button:hover{
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
.home_link{
display: inline-block;
margin-left: 4px;
}
.home_link i{
transition: transform .3s ease;
}
.home_link:hover > i {
transform: translateX(5px);
}
.admin_forget_password a , .home_link a{
color: black;
}
.field-icon {
float: right;
margin-left: -25px;
margin-top: -27px;
position: relative;
padding-right: 10px;
z-index: 10;
}
#toolbar_1 {
margin-bottom: 15px;
}

#toolbar_1 button {
margin-right: 8px;
padding: 4px 5px;
border: none;
background-color: black;
color: white;

cursor: pointer;
font-size: 15px;
border-radius: 3px;
margin: 10px 0 0px 0;
}

#toolbar_1 button:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
.myb_tn button{
border: 1px solid black;
font-size: 17px;
padding: 6px 8px;
font-weight: bold;
color: var(--white);
background-color: black;
transition: all ease 0.3s;
}
.myb_tn button:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
#customContent_1 , #company_discription {
display: block;
resize: vertical;
/* Show textarea by default */
}

#preview_1 {

display: none;
/* Hide preview by default */
}

.insert_data .form-control{
border: 1px solid gray;
}
.home{
min-height: 50vh;
border: 1px solid white;
}
.cards_home{
border: 1px solid var(--fade-2);
background-color: var(--fade);
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.cards_home i{
font-size: 38px;
margin-bottom: 10px;
}
.home a{
color: black;
transition: all ease-in .3s;
}
.home a:hover{
box-shadow: 0px 5px 15px rgba(195, 201, 209, 0.16);
color: var(--hover);
}
.editPage{
min-height: calc(100vh - 100px);
border: 1px solid white;
padding-top: 10px;
}

.edit_content{
background-color: var(--fade);
margin: 10px 0;
display: flex;
align-items: center;
padding: 10px;
}
.edit_content_p{
display: flex;
flex-direction: column;
}
.edit_content_p p{
margin:0 6px;
}
.edit_buttons{
display: flex;
justify-content: end;
align-items: center;
}
.edit_btn{
border: none;
border: 1px solid black;
background-color: black;
color: white;
padding: 4px 8px;
font-weight: bold;
margin: 10px;
text-transform: capitalize;
transition: all ease 0.3s;
}
.edit_btn:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white;
}
@media (max-width: 992px) {
.edit_content_p{
display: flex;
flex-direction: column;
}
.edit_buttons{
display: flex;
justify-content: left;
}
.edit_btn{
padding: 2px;
margin: 10px;
}
}
.featured-title{
font-size: 25px;font-weight:bold;
}
.featured-post{
background-color: var(--fade);
padding: 20px 20px;
margin: 10px 0;
}
.featured-post-title{
font-size: 24px;
}
.featured-post-title a{
color: var(--black);
font-weight: bold;
}
.featured-post-title a:hover{
color: var(--hover);
}
.featured-post-subtitle{
font-size: 14px;
margin-top: 6px;
}
.featured-post-subtitle a{
color: var(--black);
text-decoration: underline;
}
.featured-post-subtitle a:hover{
color: var(--hover);
}

.similar-cards{

display: flex;
justify-content: space-around;
align-items: center;
padding-top: 10px;
}
.similar-cards h3{
display: flex;
align-items: center;
}
.card-duration{
font-size: 12px;
font-weight: bold;
}
.card-duration a{
color: var(--black);
text-decoration: underline;
}
.card-duration :hover{
color: var(--hover);
}
.cards-location{
font-size: 12px;
font-weight: bold;
}
.card-learn-more {
background-color: var(--black);
color: var(--white);
padding: 10px 15px;
font-size: 12px;
font-weight: 900;
transition: all ease 0.3s;
}
.card-learn-more:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 4px 4px 15px rgba(0, 0, 0, 0.7), inset -2px 4px 50px rgba(120, 120, 120, 0.33);
color: white!important;
}
.card-duration::before {
font-family: "FontAwesome";
content: "\f017";
font-size: 22px;
color: var(--black);
margin-right: 8px;
}
.cards-location::before {
font-family: "FontAwesome";
content: "\f3c5";
font-size: 22px;
color: var(--black);
margin-right: 8px;
}

@media (max-width: 992px) {
.card-learn-more {
padding: 12px 15px;
}
}
.privacy_policy h2{
padding: 10px 0;
}
.privacy_policy ul{

margin: 10px 0;
margin-left: 20px;
}
.privacy_policy ul li{
margin: 10px 0;
}
.editPage .form-control{
border: 1px solid var(--black);
}

#popupPreview {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

#popupContent {
border: 1px solid white;
background: white;
width: 70%;
height: 70vh;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
overflow-y: auto;
}

#popupContent h1,
#popupContent h2,
#popupContent h3,
#popupContent h4
{
font-weight: bold;
font-size: 24px;
margin: 20px 0;
}

#popupContent p {
margin: 10px 0;
text-align: justify;
}

#popupContent ul {
margin-bottom: 10px;
margin-left: 20px;
}

#popupContent ul li {
text-align: justify;
}
#closePopup {
position: fixed;
padding: 4px;
margin-top: -44px;
background: white;
border-radius: 6px;
border: none;
font-size: 16px;
cursor: pointer;
z-index: 100;
}