/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&family=Roboto+Mono:wght@200&display=swap');


html {
    font-size: 62.5%;
}


.smallCircle {
    z-index: 99;
    position: fixed;
    display: none;
    border: 2px solid #bc9a6b;
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
    right: 0;
    margin-right: 4rem;
    bottom: 20px;
    cursor: pointer;
    -webkit-animation: circle 2s ease-in-out infinite;
            animation: circle 2s ease-in-out infinite;
}

@-webkit-keyframes circle {
    0% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }

    50% {
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
}

@keyframes circle {
    0% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }

    50% {
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
}


.smallCircle i {
    color: #bc9a6b;
    position: relative;
    font-size: 1.5rem;
    top: 1.5rem;
    left: 1.7rem;
}

html,
body {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    background-color: #0b1315;
}

.backgroundLines {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    z-index: -1;
}

.backgroundline {
    border-left: 1px solid #21221e;
    height: 440vh;
    z-index: -1;
}

.allData {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}


.trLines {
    cursor: pointer;
    position: relative;
    bottom: 3rem;
}

.trLines2 {
    display: none;
}

header :is(.tr, .tr2) {
    border-left: 1px solid #968462;
    border-bottom: 1px solid #968462;
    width: 2.7rem;
    height: 4rem;
    position: relative;
    margin-top: 1rem;
}

header :is(.tr, .tr2):nth-child(2) {
    position: relative;
    bottom: 4.5rem;
    left: 0.5rem;
}

header :is(.tr, .tr2):nth-child(3) {
    position: relative;
    bottom: 9rem;

    left: 1rem;
}

/* navbar */

header {
    position: relative;
    padding: 4rem 5rem 0rem 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 12rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    z-index: 9999;
}

header>nav>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
}

li {
    position: relative;
    margin-left: 1px;
    width: 15rem;
    /* background-color: red; */
    height: 8rem;
}

header nav ul li a {
    margin-left: 7rem;
    font-size: 2rem;
    font-variant: small-caps;
    letter-spacing: 0.2rem;
    text-transform: capitalize;
    color: white;
    font-weight: lighter;
    position: relative;
    font-family: 'Roboto Mono', monospace;
}

/* anchor tag active */

header :is(strong, a).active::after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}

header :is(strong, a)::after {
    content: '';
    position: absolute;
    width: 5.5rem;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    height: 1px;
    top: 30px;
    left: -0.4rem;
    border-top: 1px solid #968462;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

header :is(strong, a):hover::after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
}

header strong::after {
    -webkit-transition-delay: 0.10s;
         -o-transition-delay: 0.10s;
            transition-delay: 0.10s;
    top: 3.5rem;
    left: 6.4rem;
}

.dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #0f1d22;
    margin-top: 5.1rem;
    padding: 2rem 0rem 5rem 0rem;
    display: none;
    width: 30rem;
    margin-left: 0px;
    -webkit-transition: 0.6s ease;
    -o-transition: 0.6s ease;
    transition: 0.6s ease;
}

header nav ul .hover:hover .dropdown {
    display: block;

}

.dropdown>a {
    font-size: 2rem;
    letter-spacing: 0rem;
    line-height: 5rem;

}

.dropdown a::after {
    opacity: 0;
}

.text {
    display: none;
}


/* navbarEnd */

.hamburger {
    width: 5rem;
    height: 5rem;
    z-index: 9999;
    cursor: pointer;
}

.hamburger>.hamburgerLines {
    border-bottom: 1px solid #968462;
    width: 25px;
    height: 5px;
    position: relative;
    margin-top: 0.3rem;
    -webkit-transition: left 0.2s ease-in-out;
    -o-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out;
}

.hamburger>.hamburgerLines:nth-child(1) {
    left: 0.7rem;
}

.hamburger>.hamburgerLines:nth-child(3) {
    left: 1.2rem;
}

.hamburger>.hamburgerLines:nth-child(4) {
    left: 0.6rem;
}

.hamburger:hover .hamburgerLines:nth-child(1) {
    left: 0.9rem;
}

.hamburger:hover .hamburgerLines:nth-child(2) {
    left: 1.6rem;
}

.hamburger:hover .hamburgerLines:nth-child(3) {
    left: 0rem;
}

.hamburger:hover .hamburgerLines:nth-child(4) {
    left: 1rem;
}

.hr {
    border-top: 0.1px solid #645841;
}


@media (width < 992px) {

    /* header start */
    nav {
        background-color: #0f1d22;
        height: 100vh;
        position: fixed;
        overflow: hidden;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50rem;
        z-index: 9999;
        -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
                transform: translateX(100%);
        -webkit-transition: 0.5s ease;
        -o-transition: 0.5s ease;
        transition: 0.5s ease;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .showMenu {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }

    header>nav>ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        list-style: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        position: relative;
        top: 5rem;
    }

    li {
        margin-left: 0px;
        width: 100%;
        height: 6rem;
        text-align: center;
    }

    header nav ul li a {
        margin-left: 0rem;
    }

    .text {
        display: block;
        color: white;
        position: relative;
        z-index: 1;
        line-height: 3rem;
        font-size: 1.6rem;
        font-family: monospace;
        text-align: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .text h4 {
        -webkit-transition: 0.2s ease;
        -o-transition: 0.2s ease;
        transition: 0.2s ease;
        font-family: 'Montserrat', sans-serif;
        font-weight: lighter;
    }

    .text h4:hover {
        color: #968462;
    }

    .dropdown {
        opacity: 0;
    }

    .trLines2 {
        display: block;
        position: relative;
        width: 4rem;
        height: 10rem;
        z-index: 1;
    }

    .tr2 {
        width: 3rem;
        height: 5rem;
        margin-top: 0rem;
    }

    header :is(strong, a)::after {
        content: '';
        position: absolute;
        width: 5.5rem;
        -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
                transform: scaleX(1);
        height: 1px;
        top: 30px;
        left: -0.4rem;
    }
    
    header >  :is(strong, a):hover::after {
        -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
            display: none;
                transform: scaleX(1);
        -webkit-transform-origin: 
    }
    header strong::after {
        -webkit-transition-delay: 0.10s;
             -o-transition-delay: 0.10s;
                transition-delay: 0.10s;
        top: 3.5rem;
        left: 0rem;
    }

    /* header end */
}

@media (width < 500px) {
    .backgroundLines {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    header {
        padding: 4rem 2.2rem 0rem 2.2rem;
    }

    .hamburger {
        position: fixed;
        right: 0;
        top: 3rem;
    }

    nav {
        width: 100%;
    }

    header>nav>ul li a {
        font-size: 2rem;
    }

    li {
        height: 6rem;
    }

    header nav ul li a {
        margin-left: 0rem;
    }

    header strong::after {
        left: 0rem;
    }

    header :is(a)::after {
        left: -0.4rem;
    }
}