/* Imports */
@font-face {
    font-family: Cairo;
    src: url("../fonts/Cairo.ttf");
}

/* Globals */
:root {
    --warm-yellow: #f6c358;
    --navy-blue: #1a1c38;
}

body {
    font-family: Cairo;
}

.text-warm-yellow {
    color: var(--warm-yellow);
}

.bg-warm-yellow {
    background-color: var(--warm-yellow);
}
.bg-navy-blue {
    background-color: var(--navy-blue);
}

.border-warm-yellow {
    border-color: var(--warm-yellow);
}

.fix-bidir {
    unicode-bidi: bidi-override;
}

/* Bootstrap Customization */
.btn-outline-warm-yellow {
    --bs-btn-color: var(--warm-yellow);
    --bs-btn-border-color: var(--warm-yellow);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warm-yellow);
    --bs-btn-hover-border-color: var(--warm-yellow);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--warm-yellow);
    --bs-btn-active-border-color: var(--warm-yellow);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--warm-yellow);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--warm-yellow);
    --bs-gradient: none;
}

.btn-warm-yellow {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--warm-yellow);
    --bs-btn-border-color: var(--warm-yellow);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warm-yellow);
    --bs-btn-hover-border-color: var(--warm-yellow);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--warm-yellow);
    --bs-btn-active-border-color: var(--warm-yellow);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--warm-yellow);
    --bs-btn-disabled-border-color: var(--warm-yellow);
}

.navbar {
    --bs-navbar-toggler-icon-bg: url("data: image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' ><path stroke='rgba(246, 195, 88, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /></svg>");
}

.img-fluid-h {
    max-width: 100%;
    max-height: 100%;
}

.form-floating > .form-control,
.form-floating > .form-control:focus,
.form-floating > .form-control:hover,
.form-floating > .form-control:active {
    color: #fff;
    background-color: transparent;
    outline: none;
    box-shadow: none;
    border-color: #fff;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #fff;
    transform: scale(0.85) translateY(-0.7rem) translateX(-0.15rem);
}
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}
1

/* Header */
header {
    width: 100vw;
    height: 95vh;
    max-width: 100%;

    position: relative;
}

/* Nav Bar */
.navbar {
    max-height: 6rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
}

@media (min-width: 992px) .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}

/*.navbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3);
}*/

/* Slider */
header #header-slider {
    position:relative;
    height:100vh;
}

header #header-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    z-index: 9;
    opacity: 0;

    transition: all 0.5s ease-in-out;
}
a{
    text-decoration:none;
}
header #header-slider .slide.active {
    z-index: 10;
    opacity: 1;
}

header #page-header-slider {
    position:relative;
    height:55vh;
}
.accordion-button:not(.collapsed){
    background:#000;
    color:#fff;
}
.accordion-body {
    background: #eee;
}
header #page-header-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    z-index: 9;
    opacity: 0;

    transition: all 0.5s ease-in-out;
}

header #page-header-slider .slide.active {
    z-index: 10;
    opacity: 1;
}

header .slider-control {
    background: none;
    border: none;
    padding: 5px;
    font-size: 60px;
    position: absolute;
    bottom: 5px;
    color: #fff;
    z-index: 15;
}

header .slider-control.prev-slide {
    left: 5px;
}

header .slider-control.next-slide {
    right: 5px;
}

/* sidenav */
#sidenav-sm {
    z-index: 999;
    position: fixed;
    right: -110%;
    top: 0;
    bottom: 0;

    width: 300px;
    max-width: 90%;
    background-color: var(--navy-blue);

    transition: all 0.5s ease-in-out;
}

#sidenav-sm .closebtn {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 36px;
    margin-right: 50px;
    color: #fff;
    text-decoration: none;
}

#sidenav-sm.visible {
    right: 0;
}

/* Why Cards */
.why-card .card-image {
    width: 90px;
    position: relative;
}

.why-card .card-image img,
.why-card:hover .card-image::after {
    transition: all 0.5s ease-in-out;
}

.why-card .card-image::after {
    content: "";
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 10px;
    height: 10px;

    opacity: 0;
}

.why-card:hover .card-image img {
    transform: scale(0.75);
}

.why-card:hover .card-image::after {
    width: 110px;
    height: 110px;
    opacity: 1;
}

/* Steps Cards */
section#steps {
    counter-reset: steps-counter;
}

.steps-card {
    position: relative;
    counter-increment: steps-counter;
}

.steps-card::after {
    content: counter(steps-counter);

    position: absolute;

    bottom: 0;
    left: 2%;

    font-size: 3rem;
    font-weight: bolder;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.5s ease-in-out;
}

.steps-card:hover::after {
    font-size: 6rem;
}

/* News Cards */
.news-card .card-img-top {
    height: 200px;
    width: 100%;
    background-size: cover;
}

.news-card .read-more {
    color: #000;
    text-decoration: none;
}

.news-card .read-more .icon {
    padding-right: 5px;
}

.news-card .read-more,
.news-card .read-more .icon {
    transition: all 0.5s ease-in-out;
}

.news-card:hover .read-more {
    color: var(--warm-yellow);
}

.news-card:hover .read-more .icon {
    color: var(--warm-yellow);
    padding-right: 15px;
}
/* Footer */
footer {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0)
        );
    position: relative;
}
footer::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--navy-blue);
    z-index: -1;
}
footer::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../imgs/logo-white.png");

    background-size: 70%;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    opacity: 0.1;
    z-index: -1;
}

/* Contact Us Section */
.contact-us {
    padding-top: 15px;
    padding-right: 15px;
}
.contact-us-wrapper {
    border: 2px solid var(--warm-yellow);
    position: relative;
}

.contact-us-wrapper::before {
    content: "";
    position: absolute;
    top: -15px;
    right: -15px;

    width: 95%;
    height: 95%;
    border-top: 2px solid var(--warm-yellow);
    border-right: 2px solid var(--warm-yellow);
    z-index: -1;
}
.error{color:red;}
.mt-50{margin-top:50px;}
.text-left{text-align:left;}