:root{

    --cadet-blue-crayola: hsl(227, 13%, 73%);
    --maximum-yellow-red: hsl(41, 95%, 61%);
    --medium-sea-green: hsl(146, 19%, 42%);
    --blue-crayola_10: hsla(222, 100%, 61%, 0.05);
    --smocky-black_30: hsla(0, 0%, 6%, 0.3);
    --eerie-black-1: hsl(240, 5%, 8%);
    --eerie-black-2: hsl(228, 9%, 10%);
    --raisin-black: hsl(225, 15%, 16%);
    --blue-crayola: hsl(222, 100%, 61%);
    --roman-silver: hsl(223, 10%, 52%);
    --presian-red: hsl(0, 64%, 52%);
    --gunmetal_50: hsla(230, 16%, 22%, 0.5);
    --gainsboro: hsl(0, 0%, 85%);
    --cultured: hsl(0, 0%, 93%);
    --white_50: hsla(0, 0%, 100%, 0.5);
    --white_30: hsla(0, 0%, 100%, 0.3);
    --white_10: hsla(0, 0%, 100%, 0.1);
    --black_10: hsla(0, 0%, 0%, 0.1);
    --white: hsl(0, 0%, 100%);
    
    --gradient: linear-gradient(90deg, var(--white_10) 0px 77%, var(--white_50) 92%, transparent);
    
    --ff-dm-sans: 'DM Sans', sans-serif;
    
    --shadow-1: 0px 4px 8px var(--black_10);
    --shadow-2: 0px 30px 10px -20px var(--smocky-black_30);
    --shadow-3: 0px 15px 10px -20px var(--smocky-black_30);
    
    --radius-12: 12px;
    --radius-24: 24px;
    
    --transition: all 0.5s ease;
    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
    
    }
    
    ::-webkit-scrollbar{
        width: 10px;
    }
    
    ::-webkit-scrollbar-track{
        background-color: hsl(220, 4%, 4%);
    }
    
    ::-webkit-scrollbar-thumb{
        background-color: hsl(220, 5%, 20%);
    }
    
    ::-webkit-scrollbar-thumb:hover{
        background-color: hsl(220, 5%, 30%);
    }
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        text-transform: capitalize;
        box-sizing: border-box;
        list-style: none;
        font-family: var(--ff-dm-sans);
    }
    
    body{
        background: var(--eerie-black-2);

        color: white;
        line-height: 1.4;
        scroll-behavior: smooth;
        width: 100%;
    }
    
    img{
        height: auto;
    }
    
    a{
        cursor: pointer;
        color: var(--white);
        font-size: var(--fs-8);
    }
    
    .btn{
        border: 2px solid transparent;
        padding: 0.5rem 1.5rem;
        border-radius: var(--radius-24);
        color: var(--white);
        display: inline-block;
        margin-top: 1rem;
        font-weight: 700;
        position: relative;
        overflow: hidden;
    }
    
    .btn::before{
        content: '';
        position: absolute;
        top: -1rem;
        left: -100%;
        background: #fff9;
        height: 200%;
        width: 22%;
        transform: rotate(25deg);
        z-index: 2;
    }
    
    .btn:hover::before{
        transition: .3s linear;
        left: 120%;
    }
    
    .btn.primary{
        background: var(--blue-crayola);
    }
    
    .profit-btn{
        background: var(--medium-sea-green);
        border-radius: var(--radius-12);
        padding: 0.3rem 0.6rem;
        color: var(--white);
        font-size: 0.7rem;
        font-weight: 800;
    }
    
    .loss-btn{
        background: var(--presian-red);
        border-radius: var(--radius-24);
        padding: 0.3rem 0.6rem;
        color: var(--white);
        font-size: 0.7rem;
        font-weight: 750;
    }
    
    .profit{
        color: var(--medium-sea-green);
    }
    
    .loss{
        color: var(--presian-red);
    }
    
    table{
        border-collapse: collapse;
    }
    
    section,footer{
        padding: 6rem 4rem 3rem;
    }
    
    h1{
        font-size: 3rem;
    }
    
    h2{
        font-size: 2rem;
    }
    
    h3{
        font-size: 1.5rem;
    }
    
    h4{
        font-size: 1rem;
    }
    
    h5{
        font-size: 0.8rem;
    }
    
    header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        width: 100%;
        background: var(--eerie-black-1);
        font-weight: 700;
        z-index: 4;
        padding: 0.8rem 4rem;
        top: 0;
        left: 0;
    }
    
    header a{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    header a img{
        width: 3rem;
    }
    
    header nav #menu-close{
        display: none;
    }
    
    header nav ul{
        display: flex;
        align-items: center;
        gap: 3rem;
    }
    
    header nav .registration{
        display: none;
    }
    
    header nav ul a:hover{
        color: var(--blue-crayola);
    }
    
    header nav ul .dropdown{
        position: relative;
    }
    
    header nav ul .dropdown a i{
       margin-left: 0.4rem;
    }
    
    header nav ul .dropdown ul{
        position: absolute;
        background: var(--white);
        color: var(--eerie-black-1);
        display: block;
        top: 100%;
        left: 0;
        transition: var(--transition);
        display: none;
        width: 14rem;
    }
    
    header nav ul .dropdown:hover ul{
        display: inline-block;
    }
    
    header nav ul .dropdown ul li a{
        color: var(--eerie-black-1);
        padding: 0.2rem 0;
        margin: 0.7rem 0;
        background: rgb(226, 227, 227);
        transition: var(--transition);
    }
    
    header nav ul .dropdown ul li a:hover{
        background: var(--blue-crayola);
    }
    
    header nav ul li .li.active{
        background: var(--blue-crayola);
        padding: 0.7rem;
    }
    
    header nav ul li .li.active:hover{
        color: var(--white);
        opacity: 0.8;
    }
    
    header .menu-container{
        display: flex;
        align-items: center;
    }
    
    header .menu-container .fa-bars{
        font-size: 1.7rem;
        color: var(--white);
        display: none;
        margin-right: 1rem;
    }
    
    header .menu-container .wallet-btn{
        background: transparent;
        border: 2px solid var(--cadet-blue-crayola);
        padding: 0.2rem 1rem;
        border-radius: var(--radius-24);
    }
    
    header .menu-container .wallet-btn:hover{
        background: var(--blue-crayola);
        border: 2px solid var(--blue-crayola);
    }
    
    .home{
        padding-bottom: 7rem;
        padding-top: 8rem;
    }
    
    .home .box-container{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4rem;
    }
    
    .home .box-container .text{
        padding-bottom: 3rem;
    }
    
    .home .box-container .text h1{
        color: var(--white);
        font-size: 3rem;
        padding-bottom: 20px;
    }
    
    .home .box-container .image{
        text-align: center;
    }
    
    .crypto{
        background: var(--cadet-blue-crayola);
        position: relative;
        display: flex;
        place-content: center;
        min-height: 49vh;
    }
    
    .crypto .container{
        position: absolute;
        background: var(--eerie-black-2);
        border: 2px solid var(--blue-crayola_10);
        border-radius: var(--radius-12);
        padding: 0 1rem;
        top: -4rem;
        left: 50%;
        margin-left: -45%;
        display: flex;
        flex-direction: column;
        width: 90%;
    }
    
    .crypto .container .header{
        border-bottom: 2px solid var(--blue-crayola_10);
        padding: 1rem 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    
    .crypto .container .header a{
        padding: 0.2rem 1rem;
        font-weight: 700;
    }
    
    .crypto .container .header a:hover{
        color: var(--blue-crayola);
    }
    
    .crypto .container .header a.active{
        background: var(--blue-crayola);
        border-radius: var(--radius-24);
        padding: 0.2rem 1rem;
    }
    
    .crypto .container .header a.active:hover{
        color: var(--white);
        opacity: 0.8;
    }
    
    .crypto .container .coins{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding: 1.5rem 0;
        margin: 0 auto;
    }
    
    .crypto .container .coin{
        margin: 0 auto;
    }
    
    .market{
        background: var(--eerie-black-1);
        color: var(--white);
        padding-top: 1rem;
    }
    
    .market .market_header h1{
        padding-bottom: 1rem;
        text-align: center;
    }
    
    .market table{
        width: 100%;
        font-weight: 700;
    }
    
    .instructions .header{
        text-align: center;
    }
    
    .instructions .header h1{
        color: var(--white);
    }
    
    .instructions .box-container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        justify-content: center;
        gap: 5rem;
        margin-top: 3rem;
    }
    
    .instructions .box-container .box{
        text-align: center;
        position: relative;
    }
    
    .instructions .box-container .box img:hover{
        transform: rotate(360deg);
    }
    
    .instructions .box-container .box::after{
        content: "";
        width: 150px;
        height: 12px;
        background-image: url(../images/connect-line.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: 50px;
        right: -120px;
    }
    
    .instructions .box-container .box:last-child::after{
        display: none;
    }
    
    .instructions .box-container .box h3{
        color: var(--white);
    }
    
    .about{
        background: var(--smocky-black_30);
    }
    
    .about .box-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }
    
    .about .box-container .about-image img{
        width: 100%;
        text-align: center;
    }
    
    .about .box-container .about-image div{
        width: 100%;
        margin: 0 auto;
    }
    
    .about .box-container .about-text div{
        padding: 1rem 0;
    }
    
    .about .box-container .about-text div h2,
    .about .box-container .about-text div h3{
        color: var(--white);
    }
    
    .about .box-container .about-text div h2,
    .about .box-container .about-text div h3{
        color: var(--white);
        padding-bottom: 0.8rem;
    }
    
    .about .box-container .about-text div h3 i{
        color: var(--blue-crayola);
    }
    
    .about.calculator{
        background: var(--white);
        padding-top: 1rem;
        color: var(--eerie-black-2);
    }
    
    .about.calculator .box-container .about-text div h2,
    .about.calculator .box-container .about-text div h3{
        color: var(--blue-crayola);
    }
    
    /* still in home page */
    .includes{
        background: var(--cadet-blue-crayola);
        color: var(--eerie-black-2);
        padding-top: 0;
    }
    
    .includes .include-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }
    
    .includes .include-container .box{
        text-align: center;
        line-height: 1.5rem;
    }
    
    .includes .include-container .box img{
        width: 4rem;
        height: 4rem;
     }
    
    .includes .include-container .box img:hover{
       transform: translateX(-1rem);
       transition: var(--transition);
    }
    
    .includes .include-container .box h3{
        margin-bottom: 1rem;
    }
    
    .invest-writeup{
        background: var(--cadet-blue-crayola);
        color: var(--eerie-black-2);
    
    }
    
    .invest-writeup .invest-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }
    
    .invest-writeup .invest-container .img{
        overflow: hidden;
        height: 25rem;
        border-radius: var(--radius-12);
    }
    
    .invest-writeup .invest-container .img:hover{
       transform: translateY(-1rem);
       transition: var(--transition);
    }
    
    .invest-writeup .invest-container .img img{
       width: 100%;
       height: 100%;
        object-fit: cover;
    }
    
    .invest-writeup .invest-container h1{
        margin-bottom: 1.5rem;
        line-height: 1;
        color: var(--eerie-black-2);
    }
    
    .invest-writeup .invest-container p{
        margin-bottom: 2rem;
        font-size: 1.5rem;
        color: var(--eerie-black-2);
    }
    
    .invest-writeup .invest-container .invest-btn{
       border: 2px solid var(--eerie-black-2);
       padding: 0.5rem;
       color: var(--eerie-black-2);
       transition: var(--transition);
    }
    
    .invest-writeup .invest-container .invest-btn:hover{
        background: var(--eerie-black-2);
        color: var(--white);
    }
    
    .invest-writeup.trade{
        background: var(--white);
    }
    
    .invest-writeup.user-invest{
        background: var(--white);
    }
    
    .about.registration{
        background: var(--cadet-blue-crayola);
        color: var(--eerie-black-2);
    }
    
    .about.registration h1{
        font-size: 3.5rem;
    }
    
    .about.registration p{
        font-size: 1.5rem;
    }
    
    .working-plans{
        background: var(--white);
        text-align: center;
        color: var(--eerie-black-2);
    }
    
    .working-plans h1{
        margin-bottom: 1.5rem;
    }
    
    .working-plans a{
        padding: 1rem;
        color: var(--eerie-black-2);
        border: 1px solid var(--eerie-black-2);
        transition: var(--transition);
    }
    
    .working-plans a:hover{
        background: var(--eerie-black-2);
        color: var(--white);
    }
    
    footer .box-container{
        display: grid;
        grid-template-columns: 2fr repeat(3, 1fr);
        gap: 1rem;
    }
    
    footer .box-container .box a{
        display: flex;
        align-items: center;
        padding-bottom: 1rem;
    }
    
    footer .box-container .box a img{
        width: 3rem;
        aspect-ratio: 1/1;
    }
    
    footer .box-container h3{
        color: var(--blue-crayola);
        padding-bottom: 1rem;
    }
    
    footer .box-container .box p{
        padding-bottom: 1rem;
    }
    
    footer .box-container .box ul li a{
        line-height: 1;
        color: var(--cadet-blue-crayola);
        transition: var(--transition);
    }
    
    footer .box-container .box ul li a:hover{
        padding-left: 0.5rem;
        color: var(--blue-crayola);
    }
    
    .social{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--eerie-black-1);
        padding: 1rem 4rem;
        flex-wrap: wrap;
        margin: 0 auto;
        gap: 1.5rem;
    }
    
    .social p{
        color: var(--white);
    }
    
    .social p span{
        color: var(--blue-crayola);
    }
    
    .social div a{
        margin: 0 0.5rem;
    }
    
    .social div i{
        padding: 0 5px;
        font-size: 20px;
    }
    
    .social div i:hover{
        color: var(--blue-crayola);
    }
    
    .general{
        height: 100vh;
        color: var(--white);
        position: relative;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* about style */
    #about{
        background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-christina-morillo-1181406.jpg) no-repeat;
        background-size: cover; 
        background-position: center;
    }
    
    .general > img{
        position: absolute;
        bottom: -5px;
        width: 100%;
    }
    
    .general .about-text{
        padding: 4rem 3rem;
        width: 100%;
    }
    
    .general .about-text h1{
        font-size: 3.5rem;
    }
    
    .general .about-text p{
        font-size: 1.5rem;
    }
    
    .going-strong{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        gap: 10rem;
        background: var(--white);
        color: var(--eerie-black-2);
        padding-top: 0.5rem;
    }
    
    .strong-text h2,.going-strong h4{
        margin-bottom: 1.5rem;
    }
    
    .strong-text p{
        margin-bottom: 1rem;
    }
    
    .strong-text p i{
        color: var(--blue-crayola);
    }
    
    .going-strong img{
        width: 100%;
        height: 40rem;
        border-radius: var(--radius-12);
    }
    
    /* testimonials style */
    #testimonials{
            background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-karolina-grabowska-7875900.jpg) no-repeat;
            background-size: cover; 
            background-position: center;
    }
    
    .customers{
        background: var(--white);
        color: var(--eerie-black-2);
        text-align: center;
        padding-top: 0.5rem;
    }
    
    .customers .customer{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        margin-top: 3rem;
        gap: 1rem;
    }
    
    .customers .customer img{
        max-width: 25rem;
        height: 25rem;
        border-radius: 50%;
        margin: 0 auto;
        transition: var(--transition);
    }
    
    .customers .customer img:hover{
        border-radius: 10%;
    }
    
    /*  */
    .other-customers{
        background:  url(../images/pexels-adrien-olichon-6395415.jpg) no-repeat;
        background-size: cover; 
        background-position: center;
        width: 100%;
        height: 100vh;
        padding: 1rem 0;
        position: relative;
        color: var(--white);
    }
    
    .other-customers > img{
        position: absolute;
        bottom: -5px;
        width: 100%;
    }
    
    .other-customers .swipers-container{
        /* display: grid; */
        /* width: 900px; */
        grid-template-columns: 1fr 2fr;
        align-items: center;
        justify-content: center;
        /* gap: 5rem; */
        padding: 4rem;
    }
    
    .swiper-pagination-bullet{
        background: var(--white);
        border: 7px solid var(--white);
    }
    
    .swiper-pagination-bullet-active{
        background: var(--blue-crayola);
        border: 7px solid var(--blue-crayola);
    }
    
    .other-customers .swipers-container .img{
        border: 10px solid var(--white);
        overflow: hidden;
        width: 100%;
        max-height: 24rem;
        transition: var(--transition);
    }
    
    .other-customers .swipers-container img{
        width: 100%;
        min-height: 24rem;
        object-fit: cover;
    }
    
    .other-customers .swipers-container .img:hover{
        transform: translateY(-1rem);
    }
    
    .other-customers .swipers-container .review-slider{
        width: 100%;
    }
    
    .other-customers  .review-slider .box .content p{
        font-size: 2rem;
        padding-bottom: .5rem;
        font-style: italic;
    }
    
    .other-customers  .review-slider .box .content h3{
        color:var(--black);
        font-size: 1rem;
        padding-bottom: .5rem;
        font-style: italic;
    }
    
    /* trading */
    #trading{
        background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-alphatradezone-5833273.jpg) no-repeat;
        background-size: cover; 
        background-position: center;
    }
    
    .account-types{
        background: var(--white);
        color: var(--eerie-black-2);
        padding-top: 1rem;
        text-align: center;
    }
    
    .account-types .box-container{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap:1.5rem;
        margin-top: 3rem;
     }
     
     .account-types .box-container .box{
        text-align: center;
        border-radius: .5rem;
        background: var(--black_10);
        box-shadow: var(--shadow-2);
        padding: 1rem;
     }
    
     .account-types .box-container .box img{
        width: 4rem;
        height: 4rem;
     }
     
     .account-types .box-container .box h3{
        font-size: 1.5rem;
        text-transform: uppercase; 
        color:var(--blue-crayola);
     }
     
     .account-types .box-container .box .price{
        padding:0.2rem;
        border-radius: .5rem;
        background: var(--blue-crayola);
        color:var(--white);
        font-size: 1.7rem;
        margin:0.5rem 0;
     }
    
     .account-types .box-container .box .price h3{
        color: var(--white);
     }
     
     .account-types .box-container .box .list p{
        font-size: 1rem;
        color:var(--black);
        padding:0.5rem 0;
     }
     
     .account-types .box-container .box .list p i{
        padding-right: .2rem;
        color:var(--medium-sea-green);
     }
    
     .account-types .box-container .box > .btn.plan{
        border: 2px solid var(--black);
        background: var(--blue-crayola);
     }
    
     .quote{
        background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-alesia-kozik-6771985.jpg) no-repeat;
        background-size: cover; 
        background-position: center;
        padding: 1rem 0;
        position: relative;
        height: 100vh;
    }
    
    .quote > .img1{
        position: absolute;
        top: -5px;
        width: 100%;
        transform: rotate(180deg);
    }
    
    .quote > .img2{
        position: absolute;
        bottom: -5px;
        width: 100%;
    }
    
    .quote p{
        margin-top: 15rem;
        font-size: 2rem;
        padding: 0 3rem;
        color: var(--white);
    }
    
    /* investment */
    #investment{
        background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-kampus-production-8353800.jpg) no-repeat;
        background-size: cover; 
        background-position: center;
    }
    
    /* contact */
    #contact{
            background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-mart-production-7709157.jpg) no-repeat;
            background-size: cover; 
            background-position: center;
    }
    
    .contact{
        background: var(--white);
        color: var(--eerie-black-2);
    }
    
    .contact .row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        gap:1.5rem;
    }
    
    .contact .row .contact-text h1{
        margin: 2rem 0;
        color: var(--blue-crayola);
    }
    
    .contact .row .contact-text .socials > div{
        margin-top: 1rem;
        display: flex;
        gap: .5rem;
        
    }
    
    .contact .row .contact-text .socials a{
        padding: 0.5rem;
        background: var(--blue-crayola);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }
    
    .contact .row .contact-text .socials a:hover{
      opacity: 0.8;
    }
    
    .contact .row .contact-text .socials{
        margin: 2rem 0;
    }
    
    .contact .row form{
        padding:2rem;
        background: var(--black_10);
        text-align: center;
        border-radius: .5rem;
    }
    
    .contact .row form .box{
        width:100%;
        border-radius: .5rem;
        padding:0.5rem 0.7rem;
        font-size: 1rem;
        text-transform: none;
        margin:.7rem 0;
        border: 1px solid var(--smocky-black_30);
    }
    
    .contact .row form textarea{
        height:13rem;
        resize: none;
    }
    
    .contact .row form .btn.contact-btn{
        background: var(--blue-crayola);
        color: var(--white);
    }
    
    .contact .row form .btn.contact-btn:hover{
        opacity: 0.8;
    }
    
    #policy{
        background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-pixabay-301792.jpg) no-repeat;
        background-size: cover; 
        background-position: center;
    }
    
    .contact.agreement > p i{
        color: var(--blue-crayola);
    }
    
    .contact.agreement .agree{
       margin-top: 2.2rem;
    }
    
    .contact.agreement .agree p{
        text-align: justify;
    }
    
    
    /* faq */
    #faq{
        background: linear-gradient(rgba(12, 12, 12, 0.9), rgba(14, 14, 14, 0.9)), url(../images/pexels-rdne-stock-project-7648055.jpg) no-repeat;
        background-size: cover; 
        background-position: center;
    }
    
    .faq{
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: flex-start;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
    }
    .faq img{
        width: 100%;
    }
    
    .faq .questions{
        background: var(--black_10);
        margin-bottom: 0.5rem;
        border-radius: .5rem;
    }
    
    .faq .questions:hover{
        background: var(--blue-crayola);
    }
    
    .faq .questions:hover .query .numbering{
        color: var(--white);
    }
    
    .faq .questions .query{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1rem;
    }
    
    .faq .questions.active p{
        display: inline-block;
    }
    
    .faq .questions.active .query i{
        transform: rotate(180deg);
    }
    
    .faq .questions .query h3{
        font-size: 1.2rem;
    }
    
    .faq .questions .query .numbering{
        color: var(--blue-crayola);
    }
    
    .faq .questions .query .title{
        display: flex;
        gap: 0.2rem;
        text-align: left;
    }
    
    .faq .questions p{
        padding: 1rem;
        background: var(--white);
        border: 2px solid var(--black_10);
        border-radius: .5rem;
        text-align: left;
        display: none;
        transition: var(--transition);
    }
    
    
    
    
    
    @media (max-width: 1290px){
        .crypto .container .coins{
            grid-template-columns: repeat(3, 1fr);
        }
    
        .crypto{
            min-height: calc(49vh + 230px);
        }
    }
    
    
    
    @media (max-width: 1210px){
        header nav{
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: -100%;
            z-index: 20;
            background: var(--eerie-black-1);
            width: 17rem;
            height: 100vh;
            padding: 4rem 1rem 2rem;
            animation: showSidebar 500ms ease forwards;
            display: none;
            overflow-y: auto;
        }
        
        @keyframes showSidebar {
            to{
                left: 0;
            }
        }
    
        header nav #menu-close{
            display: inline-block;
            font-size: 1.7rem;
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: var(--white);
        }
    
        header nav .registration{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 3rem;
        }
    
        header nav .registration a{
            padding: 0.5rem;
            margin: 0 0.5rem;
        }
    
        header nav .registration .signup{
            color: var(--white);
            background: transparent;
            border: 2px solid var(--cadet-blue-crayola);
        }
    
        header nav .registration .signup:hover{
            background: var(--blue-crayola);
            border: 2px solid var(--blue-crayola);
        }
    
        header nav .registration .signin{
            background: var(--blue-crayola);
            border: 2px solid var(--blue-crayola);
        }
    
        header nav ul{
            flex-direction: column;
        }
    
        header nav ul li{
            margin-bottom: 1.4rem;
        }
    
        header .menu-container .fa-bars{
            display: inline-block;
        }
    
        header nav ul .dropdown ul{
            position: unset;
            background: none;
            display: block;
            top: 100%;
            left: 0;
            transition: var(--transition);
            display: none;
            width: 100%;
        }
    
        header nav ul .dropdown:focus-within ul{
            display: inline-block;
        }
    
        header nav ul .dropdown ul li a{
            padding: 0.3rem 1rem;
        }
    
        .home .box-container{
            display: block;
        }
    
        .about .box-container{
            grid-template-columns: 1fr;
        }
    
        /*  */
        .other-customers .swipers-container{
            gap: 2rem;
            padding: 1rem;
        }
    
        /* faq */
        .faq{
            grid-template-columns: 1fr;
        }
    }
    
    @media (max-width: 1080px){
        .crypto .container .coins{
            grid-template-columns: repeat(2, 1fr);
        }
    
        section,footer{
            padding: 6rem 2rem 3rem;
        }
    
        .social{
            padding: 1rem 2rem;
        }
    
        header{
            padding: 0.8rem 2rem;
        }
    
        .home .box-container .image{
            display: flex;
            max-width: 35rem;
            margin: 0 auto;
        }
    
        .home .box-container .image img{
            width: 100%;
        }
    
        .market .table{
            overflow-x: auto;
        }
    
        .market .table::-webkit-scrollbar{
            height: 2px;
        }
    
        .instructions .box-container{
            grid-template-columns: repeat(2, 1fr);
        }
    
        .instructions .box-container .box:nth-child(even)::after{
            display: none;
        }
    
        .general .about-text{
            padding: 4rem 1rem;
            width: 100%;
        }
        
        .general .about-text h1{
            font-size: 3rem;
        }
        
        .general .about-text p{
            font-size: 1.5rem;
        }
    
        .going-strong{
            grid-template-columns: 1fr;
            gap: 3rem;
        }
    
        .going-strong img{
            width: 90%;
            height: 40rem;
            margin: 0 auto;
            border-radius: var(--radius-12);
        }
    
        footer .box-container{
            grid-template-columns: 2fr 1fr;
        }
    
        /*  */
        .other-customers .swipers-container{
            grid-template-columns: 1fr;
        }
    
        .other-customers .swipers-container .img{
            max-height: 35rem;
            max-width: 70%;
            margin-inline: auto;
        }
    
        .other-customers  .review-slider .box .content p{
            font-size: 1.5rem;
        }
    
        .customers .customer{
            grid-template-columns: 1fr;
        }
    
        .customers .customer.second img{
            grid-row: 1;
        }
    
         /* contact */
         .contact .row form{
            padding:1rem;
        }
    
        .includes .include-container{
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
       
    }
    
    @media (max-width: 943px){
    
        h1{
            font-size: 2.5rem;
        }
        
        h2{
            font-size: 1.7rem;
        }
        
        h3{
            font-size: 1.2rem;
        }
    
        /* contact */
        .contact .row{
            grid-template-columns: 1fr;
        }
    
        .invest-writeup .invest-container{
            grid-template-columns: 1fr;
        }
        
    }
    
    @media (max-width: 710px){
        .crypto .container .coins{
            grid-template-columns: repeat(1, 1fr);
        }
    
        .crypto{
            min-height: calc(49vh + 690px);
        }
    
        .general .about-text{
            padding: 1rem;
        }
    
        .quote p{
            margin-top: 8rem;
            font-size: 2rem;
            padding: 0 3rem;
            color: var(--white);
        }
    }
    
    @media (max-width: 600px){
        section,footer{
            padding: 6rem 1rem 3rem;
        }
    
        h1{
            font-size: 2rem;
            font-weight: 500;
            line-height: 1.2;
        }
    
        .social{
            padding: 1rem 1rem;
        }
    
        header{
            padding: 0.8rem 1rem;
        }
    
        header a img{
            width: 2rem;
        }
    
        .crypto .container{
            top: -5rem;
            padding: 0 0.5rem;
        }
    
        .instructions .box-container{
            grid-template-columns: 1fr;
        }
    
        .instructions .box-container .box::after{
            display: none;
        }
    
        .general .about-text h1{
            font-size: 2.5rem;
        }
    
        footer .box-container{
            grid-template-columns: 1fr;
        }
    
        .social div{
            margin: 1.5rem auto;
        }
    
        .social p{
            margin: 0 auto;
        }
    
        .customers .customer img{
            width: 16rem;
            height: 16rem;
        }
    
        .customers .customer h2{
            font-size: 1.5rem;
        }
    
        .quote p{
        font-size: 1.5rem;
        padding: 0 1rem;
        }
    
        /* faq */
        .faq .questions .query h3{
            font-size: 1rem;
        }
    
        .faq .questions .query{
            align-items: start;
            gap: 0.5rem;
            padding: 0.8rem 0.5rem;
        }
        
        .faq .questions p{
            padding: 1rem 0.5rem;
        }
    
        .includes .include-container{
            grid-template-columns: 1fr;
        }
    
        .about.registration h1{
            font-size: 3rem;
        }
    
        .home .box-container .text h1{
            font-size: 2.5rem;
        }
    
        .invest-writeup .invest-container .img{
            height: 15rem;
        }
    
        .invest-writeup .invest-container .img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    
        .other-customers{
            height: 80vh;
        }
    
        .other-customers .swipers-container .img{
            max-height: 22rem;
            transition: var(--transition);
        }
    
        .other-customers .swipers-container img{
            min-height: 22rem;
        }
        
    }
    
    @media (max-width: 345px){
        .crypto .container{
            gap: 0.5rem;
            padding: 0 0.5rem;
        }
    
        .about.registration h1{
            font-size: 2.7rem;
        }
    
        .home .box-container .text h1{
            font-size: 2rem;
        }
    }