.html {
    padding: 0;
    margin: 0;
    box-sizing: border-box !important;
}
:root { --darkBlack : #181a1d; }
body {    background: var(--darkBlack) !important;}
a {
    color: inherit;
    text-decoration: none;
    outline: none;
}
.btn:focus { box-shadow: none !important; }
a:active { color: #145222; }
a:hover { color: #145222 !important; text-decoration: none; }
.flex-items-center {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
footer { border-top: 1px solid black;
    position: absolute;

}

#diverse, #travel, #aboutUs, #story, #job_profile { min-height: 75vh; display: flex; flex-direction: column; }

#diverse p { line-height: 26px; }
#diverse i {
    font-size: 20px;
    position: absolute;
    margin-left: 10px;
    margin-top: 9px;
}

.storyimg{
    height: 12rem;
}

#travel .row { gap: 30px; text-align: center; }
#travel .row .col { transition: all 500ms ease-in-out; }
#travel .row .boxes:hover { transform: scale(1.03, 1.03); }
#travel .desc { display: none; }
#travel .boxes { height: 250px; width: 100px; transition: all 0.7s ease-in-out; }
#travel .boxes:hover .title{ display: none; }
#travel .boxes:hover .desc { display: block; }

.darkBlk { background: var(--darkBlack); }

nav a { color: #d0d0d0 !important; text-shadow: 1px 1px 1px #292929;}
nav .nav-item .nav-link:after {
    content: '';
    width: 60%;
    height: 2px;
    background: #145222 ;
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
nav .nav-item .nav-link { position: relative; }
nav .nav-item .nav-link:hover { color: white !important; }
nav .nav-item .nav-link:hover::after { opacity: 1; }
nav .nav-item .active::after { opacity: 1; }
#navbarLinks { gap: 20px; }
.navbar .navbar-toggler { z-index: 999; }
#navbarLinks .dropdown-menu a:hover { background: transparent !important; transform: scale(1,1); }

#navbarContent li div a:hover { background: var(--darkBlack) !important; }

#story .abosolutePos { position: absolute; left: 0; }

#jobs .jobSection .hireTxt {
    writing-mode: tb-rl;
    transform: rotate(180deg);
    margin: 0;

}
#jobs .job-container:hover{
    background: linear-gradient(to bottom, #212121, #145222) !important;
    transform: scale(1.02);
}
#jobs .job-container { transition: all 500ms ease-in-out; }
#jobs .jobSection i.hand{ font-size: 32px; animation: move 2s ease-in-out infinite; }
#jobs .jobSection a:hover{ color: white !important; }
#diverse .applyBtn a:hover, #job_profile .applyBtn a:hover, #home .applyBtn a:hover { color: white !important; }
#home .applyBtn:hover  { transform: scale(1.1, 1.1); }


footer .row .col a { font-size: 1rem; }

.min-vh-100 { min-height: 100vh; }

.large-on-hover{
    transform: scale(1);
    transition: transform 1s ease-in-out;

}
.large-on-hover:hover{
    transform: scale(1.1);
}
#front-img:after {
    content: '';
    width: 50%;
    height: 50%;
    background: black;
    border-radius: 50%;
}
.fadeIn-ele {
    animation: fadeIn 1s ease-in-out;
}
.fadein-para{ opacity: 0; transition: opacity 1s ease-in-out; }

.fadeIn-ele-big {
    animation: fadeIn 5s ease-in-out;
}

.fadeIn-ele-bigger {
    animation: fadeIn 7s ease-in-out;
}

.fadeIn-ele-biggerer{
    animation: fadeIn 9s ease-in-out;
}
.clicked { background: #145222 !important; }
.circle { transition: transform 3s ease-in-out; }

#home .arrow_down { font-size: 50px; }

#error .btn:hover { color: black !important; font-weight: bold; }

#cookie-consent {
    position: fixed;
    top: 70vh;
    right: 0;
    width: 100%;
    height: auto;
    display: none;
}

#col1  { opacity:0;  transition:  ease-in-out; right: 500px; }
#col2 { opacity:0;  transition:  ease-in-out; right: -500px; }
#col3{ opacity:0;  transition:  ease-in-out; right: 500px; }
#col4{ opacity:0;  transition:  ease-in-out; right: -500px; }
#col5{ opacity:0;  transition:  ease-in-out; right: 500px; }
#col6{ opacity:0;  transition:  ease-in-out; right: -500px; }
.show { opacity: 1 !important; right: 0; }


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes move  {
    0% { transform: translateX(-140%);}
    50% {  transform: translateX(-120%); }
    100% {  transform: translateX(-140%); }
}

@media screen and (max-width: 1140px) {
    #bouncingBall { width: 80vw; }
    #storybox { min-height: 20vh;}
}

@media screen and (max-width: 1210px){
    #storybox { min-height: 20vh;}
}
@media screen and (max-width: 991px){
    #navbarLinks {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        padding: 20% 0;
        background: black;
        width: 100%;
    }
    #navbarLinks .dropdown-menu { background: black; border: none !important; border-radius: 0;  }
    #navbarLinks .dropdown-menu a:last-child { border-bottom: 1px solid #68696a; }
    #storybox { max-height: 20vh;}
}
@media screen and (max-width: 770px){
    #home .home_wrapper { height: auto !important; }
    #travel .boxes { height: auto; width: 100%;}
    .h1 { font-size: 2rem; }
    .h2 { font-size: 1.8rem; }
    .h3 { font-size: 1.5rem;}
    .h4 { font-size: 1.2rem;}
    .h5 { font-size: 1rem; }
    .h6 { font-size: 0.8rem }
    .display-4 { font-size: 2.5rem !important; }
    h3 { font-size: 1.5rem; }
    p {font-size: 1rem; }
    #home .arrow_down { font-size: 30px; }
    #section_1 { height: auto !important; }
    footer { font-size: 14px; }
    #story .carousel-inner { min-height: 450px; }
    #storybox { max-height: 20vh;}
}
@media screen and (max-width: 600px){
    #col5{ opacity:1;  transition:  ease-in-out; right: 0px; }
    #col6{ opacity:1;  transition:  ease-in-out; right: 0px; }
    .storyimg{
        height: 5rem;
    }
    .custom-display { font-size: 2rem; }

    #storybox { max-height: 20vh;}
}
@media screen and (max-width: 450px){
    .h1 { font-size: 1.8rem; }
    .h2 { font-size: 1.5rem; }
    .h3 { font-size: 1.2rem;}
    .h4 { font-size: 1rem;}
    .h5 { font-size: 1rem; }
    .h6 { font-size: 0.8rem }
    .display-4 { font-size: 2.1rem !important; }
    h3 { font-size: 1.2rem; }
    p { font-size: 0.8rem; }
    .btn { font-size: 0.8rem; }
    #home .arrow_down { font-size: 20px; }
    #terms_conditions { text-align: center; }
    footer { font-size: 11px; }
    footer .copyright { font-size: 11px !important; }
    #storybox { max-height: 20vh;}

}

.contact-details p {
    margin-bottom: 0;
    padding-left: 2.2rem;
    padding-top: 0.3rem;
}

.storybox{
    background-color: #1b1e21;
    transition: all 500ms ease-in-out;
    max-height: 45vh;
}
.storybox:hover{
    background-color: #145222;
}

ul.red-squares {
    list-style: square;
    padding-left: 1.5rem;
}

ul.red-squares li::marker  {
    color: #145222;
}


.angled-container-right {
    background: #0c0c0c;
    color: white;
    padding: 2rem;
    width: 100%;
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);

}

.angled-container-left {
    background: #145222;
    color: black;
    padding: 2rem;
    width: 100%;
    clip-path: circle(100% at 80% 80%);

}

.grid-center-bordered {
    display: grid;
    place-items: center;
    border-left: 10px solid black;
    border-right: 10px solid black;
}


.grid-all-bordered {
    display: grid;
    place-items: center;
    border: 20px solid #2f2e38;

}



.alineat {
    text-indent: 25px;
}

.gold{
  color: rgba(112, 83, 30, 0.87);
}

.mov{
    color: #8d84a4;
}
.top {
    position: relative;
    border-top: 8px solid #2e6426;
    border-radius:  40% 40% 0 0;
    box-shadow: 0 6px 6px rgb(40, 116, 28);
    background-position: center 6px;
}