nav {
    position: relative;
    z-index: 999999999
}
section,
.about-container {
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
}

.hero,
.about-container {
    position: relative;
    background-image: url(/assets/images/bg/001.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
    background-blend-mode: normal;
}

.hero {
    padding-top: 40px;
    padding-bottom: 0;
}

.hero-inner-container {
    position: relative;
    padding-bottom: 50px;
    background-image: url(/assets/images/002.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-blend-mode: normal;
    z-index: 2;
    color: white;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/assets/images/bg/005.svg), rgba(0, 0, 0, .9);
    background-repeat: no-repeat;
    z-index: 1;
}

.about-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    background-repeat: no-repeat;
    z-index: 1;
}

.zindex-99 {
    z-index: 99;
}

body {
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
}

.nav-link a {
    color: white;
    text-decoration: none;
}

.sell,
.buy {
    border: 1px solid #D47815;
    color: #D47815;
    background: transparent;
    transition: .3s ease-in-out;
}

.swapBtn:hover {
    background: #D47815;
    color: black;
}

.active,
.buyy {
    background: #D47815;
    color: black;
    border: #D47815;
}

.buy,
.sell {
    width: 100%;
    max-width: 100px;
    border-radius: 8px;
}

.buy-span,
.sell-span,
.coinSpan {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;

}

.buy-span {
    color: #00C32B;
}

.sell-span {
    color: #FF0000;
}

.big-head {
    font-weight: 700;
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: 0%;
}

.bitcoin {
    background: #D4781533;
}

.other-text {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
}

.faint-blue {
    background: #5A28B033;
}

.faint-green {
    background: #33875A26;
}

.deeper-green {
    background: #64DD1726;
}

.bigg-text {
    color: #D47815;
    font-weight: 250;
    font-size: 56px;
    line-height: 67.2px;
    letter-spacing: 0%;
}

.norm-text {
    color: white;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0%;
    text-align: center;
}

.small-text {
    color: #D47815;
    font-weight: 500;
    font-size: 17px;
    line-height: 18.7px;
    letter-spacing: 0%;
}

.header-text {
    font-weight: 500;
    font-size: 48px;
    line-height: 57.6px;
    letter-spacing: 0%;
    color: white;
}

.header-text span {
    color: #D47815;
}

.bigger-text {
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0%;

}

.name {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.name span {
    font-weight: 300;
}

.middle-textt {
    color: #4D4D4D;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.avatar-name {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #1A1A1A;
}

.avatar-name span {
    color: #999999;
    font-weight: 400;
}

.caution-text {
    font-weight: 700;
    font-size: 18px;
    line-height: 21.6px;
    letter-spacing: 0%;
    text-align: center;
    color: white;
}

.caution-text span {
    color: #D47815;
}

.grid-container {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.scroll-content {
    display: flex;
    transition: transform 0.3s ease-in-out;
    gap: 20px;
}

.col-item {
    min-width: 350px;
}

.grid-container::-webkit-scrollbar {
    display: none;
}

input,
select,
#result-div {
    /* background: #FFFFFF1A; */
    outline: none;
}

#result-div {
    background: white;
    color: black;
}

.dollar {
    transform: translate(-50%, -50%);
    left: 25px;
    top: 50%;
    font-weight: 600;
}

.img-case {
    border: 1px solid #D47815;
    border-radius: 30px;
    max-width: 350px;
}
.img-casee {
    border: 1px solid #D47815;
    border-radius: 30px;
}
.img-case img {
    width: 100%;
    max-height: 350px;
}

.qa-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.q-area {
    border: 1px solid #D47815;
    font-size: 18px;
    font-weight: 500;
    line-height: 30.8px;
    color: white;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.q-area svg {
    transition: .3s ease-in-out;
    fill: #D47815;
}

.q-area.active {
    background-color:#D47815;
    color: white;
}

.q-area.active svg {
    fill: white;
    rotate: 180deg;
}

.a-area {
    font-size: 14px;
    font-weight: 400;
    line-height: 25.6px;
    color: #D47815;
    display: none;
    transition: .3s ease-in-out;
    background: white;
    border-radius: 8px;
}

.mini-text, .main-header {
    color: white;
}

.footer {
    position: sticky;
    bottom: 0;
    
    z-index: 9999;
    padding-top: 0px;
    padding-bottom: 0;
}

.footer-container {
    background: #D47815;
    padding-bottom: 15px;
    padding-top: 10px;
}

.mini-header {
    font-weight: 500;
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: 0%;
    text-align: center;
}

.icon-8 {
    top: 25%;
    left: 92%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}
.icon-9 {
    top: 43%;
    left: 85%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}
.icon-10 {
    top: 55%;
    left: 80%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}

.icon-13 {
    top: 25%;
    left: 8%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}
.icon-12 {
    top: 43%;
    left: 14%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}
.icon-11 {
    top: 55%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}

.main-header {
    font-weight: 500;
    font-size: 64px;
    line-height: 76.8px;
    letter-spacing: 0%;
    text-align: center;
    padding-bottom: 150px;
}

.arrow {
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
}
.arrow-forward {
    background: #D47815;
}

.logo {
    width: 150px;
    height: 58px;
}

.middle-links {
    display: flex;
}

.instagram {
    padding: .5rem;
    border-radius: 50%;
    background: white;
    width: 35px;
    height: 35px;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faded {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(40%);
    transition: all 1s ease;
} 

.fade-left {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(40%);
    transition: all 1s ease;
}

.fade-right {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-40%);
    transition: all 1s ease;
}

.fade-down {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-40%);
    transition: all 1s ease;
} 

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.reveal {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.delay1 {
    transition-delay: 50ms;
}

.delay2 {
    transition-delay: 100ms;
}

.delay3 {
    transition-delay: 150ms;
}
.delay4 {
    transition-delay: 200ms;
}
.delay5 {
    transition-delay: 250ms;
}
.delay6 {
    transition-delay: 300ms;
}
.delay7 {
    transition-delay: 350ms;
}

@media only screen and (max-width: 991px) {
    .logo {
        width: 120px;
        height: auto;
    }
    .middle-nav {
        width: 100%;
        max-height: 0;
        transition: all .3s ease-in-out;
    }

    .middle-links {
        display: none;
    }

    .line {
        width: 25px;
        height: 2px;
        background: white;
    }

    .middle-line {
        width: 15px;
    }

    .logo-header {
        width: 100%;
    }

    .show {
        max-height: 600px;
        padding-top: 1.5rem;
    }
    .main-header {
        font-size: 42px;
        line-height: 50px;
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 500px) {
    .logo {
        width: 80px;
        height: auto;
    }
    section,
    .about-container {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .main-header {
        font-size: 38px;
        line-height: 45px;
        padding-bottom: 40px;
    }
    .big-head {
        font-size: 14px;
    }

    .other-text {
        font-size: 14px;
    }

    .buy-span,
    .sell-span,
    .coinSpan {
        font-size: 12px;
    }

    .coin-image {
        width: 40px;
        height: 40px;
    }

   .caution-text {
        font-size: 14px;
   }
   .img-link img, .instagram  {
        width: 25px;
        height: 25px;
   }
   .col-item {
        min-width: 100%;
    }
}