@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;600;700&display=swap');

* {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    font-size: 1rem;
    font-family: 'Roboto Slab', serif;
    width: 100%;
    height: 100%;
}

/* navbar */
#main-navbar {
    background: #00000f;
    box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);
}

.navbar-brand img {
    height: 60px;
    width: 200px;
}

.nav-item .nav-link {
    font-weight: bold;
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: .9rem;
}

.navbar-light .navbar-nav .nav-link.active {
    color: #B50003;
    border-bottom: 2px solid #B50003;
}

.navbar .nav-item:hover .nav-link {
    color: #B50003;
}

.dropdown .dropdown-item {
    border: none;
    padding: 10px;
}

.dropdown .dropdown-item:hover {
    color: #B50003;
    background: #000;
    transition: all .5s;
}

.dropdown-menu {
    --bs-dropdown-padding-y: 0px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    margin-top: 0;
    padding: 0;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #B50003;
    background-color: #000;
}
.main-content{
    padding-top: 85px;
}
/* Slider */
.carousel-indicators [data-bs-target] {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
}

/* Top section */
.top-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/backgound/contact.jpg');
    color: #fff;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-section .text-section {
    align-items: center;
    margin: 0 auto;
}

.top-section .text-section h1 {
    font-weight: bold;
    font-size: 3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* Back to top button */
@font-face {
    font-family: 'unicons';
    src: url('../vendor/fonts/unicons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@-webkit-keyframes border-transform {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.progress-wrap {
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(6, 6, 6, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: 'unicons';
    content: '\e84b';
    text-align: center;
    line-height: 50px;
    font-size: 26px;
    color: #B50003;
    left: 0;
    top: 0;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap:hover::after {
    opacity: 0;
}

.progress-wrap::before {
    position: absolute;
    font-family: 'unicons';
    content: '\e84b';
    text-align: center;
    line-height: 50px;
    font-size: 26px;
    opacity: 0;
    background: #B50003;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 0;
    top: 0;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #B50003;
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}


/* Footer */
.footer-section {
    color: #fff;
}

.footer-top {
    padding: 25px;
    background: rgb(1, 13, 27);
}

.footer-about img {
    width: 200px;
    height: 60px;
    margin-bottom: 1.5rem;
}

.footer-about {
    text-align: justify;
}

.footer-section a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.footer-bottom {
    padding: 15px;
    background: #000011;
    margin: 0 auto;
    text-align: center;
}

.social-icon {
    font-size: 20px;
}

.social-icon i {
    padding: 5px;
}

.social-icon i:hover {
    animation: mymove 3s infinite;
}

@keyframes mymove {
    50% {
        transform: rotate(360deg);
    }
}

.social-icon .fa-facebook-f {
    color: #0A81ED;
}

.social-icon .fa-youtube {
    color: #FF0000;
}


/* Preload */
.preload-section {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    background-color: #efefef;
    z-index: 99999;
}
.preload-section .preloader {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.preload-section .item {
    width: 50px;
    height: 50px;
    position: absolute;
}

.preload-section .item-1 {
    background-color: #FA5667;
    top: 0;
    left: 0;
    z-index: 1;
    animation: item-1_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

.preload-section .item-2 {
    background-color: #7A45E5;
    top: 0;
    right: 0;
    animation: item-2_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

.preload-section .item-3 {
    background-color: #1B91F7;
    bottom: 0;
    right: 0;
    z-index: 1;
    animation: item-3_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

.preload-section .item-4 {
    background-color: #FAC24C;
    bottom: 0;
    left: 0;
    animation: item-4_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

@keyframes item-1_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(0, 50px)
    }

    50% {
        transform: translate(50px, 50px)
    }

    75% {
        transform: translate(50px, 0)
    }
}

@keyframes item-2_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(-50px, 0)
    }

    50% {
        transform: translate(-50px, 50px)
    }

    75% {
        transform: translate(0, 50px)
    }
}

@keyframes item-3_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(0, -50px)
    }

    50% {
        transform: translate(-50px, -50px)
    }

    75% {
        transform: translate(-50px, 0)
    }
}

@keyframes item-4_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(50px, 0)
    }

    50% {
        transform: translate(50px, -50px)
    }

    75% {
        transform: translate(0, -50px)
    }
}

/* Media Query */

@media only screen and (max-width: 480px) {

    .top-section {
        height: 30vh;
    }

    .top-section .text-section h1 {
        font-size: 2rem;
    }

}