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


    .login .container {
        width: 70%;
        margin: auto;
    }

    .login .container h1 {
    }

    .details .container .left {
        flex-direction: column-reverse
    }

    .details .container .left .photos {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .details .container .left .photos .photo-box {
        width: 100%;
    }

    .scripts .wrapper {
        grid-template-columns: 1fr 1fr 1fr;
    }

    header nav {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .sidebar {
        display: block;

    }

    header nav .logo {
        display: none;
    }



    header nav .menu {
        display: none;
    }



    .hero .container .left h1 {
        font-size: 6.8vh;
        font-weight: 400;
        margin-bottom: 40px;
    }

    .hero .container .left .box {
        width: 90%;
    }

    .hero .container .right .text p {
        color: #ADB9C7;
        font-family: "Poppins";
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 30px;
        line-height: 30px;
    }

    .hero .container .right .wrapper .link p {
        font-size: 20px;
        font-weight: 600;
    }

    .hero .container .right .wrapper .link img {
        width: 30px;
        height: 30px;
    }


    .services {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 50px 60px;

    }

    .best-scripts .container .wrapper {
        padding: 20px 40px;
    }

    .best-scripts .container .wrapper h2 {
        font-size: 45px;
        margin-bottom: 20px;
    }


    .best-scripts .container .wrapper .btns .left-btn {
        padding: 13px 40px;
        font-size: 15px;
    }

    .best-scripts .container .wrapper .btns .right-btn {
        padding: 13px 40px;
        font-size: 15px;
    }

    .payments .container .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }


    footer .container {
        grid-template-columns: 2fr 1fr 1fr;

    }

    footer {
        padding: 20px 50px;

    }

}

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

    .details .container {
        width: 80%;
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }

    .login .container {
        width: 80%;
        margin: auto;
    }
    .login .container h1 {
        font-size: 50px;
    }

    .login .container .login-btns {
        flex-wrap: wrap;
    }
    .scripts .wrapper {
        grid-template-columns: 1fr 1fr;
    }


    .side-menu .icons {
        display: block;
    }

    header nav .icons {
        display: none;
    }

    header nav {
        grid-template-columns: 2fr 1fr;
    }

    .services {
        grid-template-columns: 1fr 1fr;
    }

    .payments .container h1,
    .payments .container h1 span {

        font-size: 60px;
    }

    .questions .container h1,
    .questions .container h1 span {
        font-size: 45px;
    }

    .hero .container {
        grid-template-columns: 1fr;
    }

    .hero .container .left h1 {
        color: #fff;
        font-family: Chakra Petch;
        font-size: 9vh;
        font-weight: 400;
        margin-bottom: 40px;
    }

    .hero .container .left .box .wrapper {
        width: 90%;
    }

    .hero .container .left {
        margin-bottom: 40px;
    }

    .hero .container .right .wrapper {
        justify-items: left;
    }


    .best-scripts .container .wrapper {
        padding: 10px 20px;
    }

    .best-scripts .container .wrapper h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }

    .best-scripts .container .wrapper p {
        font-size: 13px;
        line-height: 22px;
        margin-bottom: 20px;
    }


    .best-scripts .container .wrapper .btns .left-btn {
        padding: 12px 30px;
        font-size: 14px;
    }

    .best-scripts .container .wrapper .btns .right-btn {
        padding: 12px 30px;
        font-size: 14px;
    }


    .questions .container h1,
    .questions .container h1 span {
        font-size: 55px;
    }

    .slider .slide-container .slide .slide-image {
        width: 90vmin;
    }

    .dot {
        width: 26px;
        height: 12px;
    }

    footer .container {
        grid-template-columns: 1fr 1fr;
        padding: 20px 50px;

    }

    footer {
        padding: 20px 20px;

    }


}


@media only screen and (max-width: 700px) {
  
  
  
    .login .container .login-btns .login-btn {
        width: 200px;
        height: 40px;
 
    }
  
    
    
    .login .container .login-btns .without-discord-btn {
        width: 220px;
        height: 40px;
     
    }
  
  
  
  
  
  
  
    .basket .container {
        padding: 15px;
    }

    .basket .container .basket-item {
        padding: 4px 10px;
    }

    .basket .container .basket-item .left img {
        width: 30px;
        height: 25px;
        border-radius: 4px;
    }

    .basket .container .basket-item .left p {
        font-family: "oxanium";
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }


    .basket .container .basket-item .left h5 {
        color: #fff;
        font-family: "oxanium";
        font-weight: 400;
        font-size: 12px;
    }

    .basket .container .basket-item {
        flex-direction: column;
        gap: 10px;
    }

    .basket .container .box .left h1 {
        font-size: 24px;
    }

    .basket .container .box .left p {
        font-size: 13px;
    }


    .basket .container .box .remain-item {
        font-size: 20px;
    }





    .basket .container .basket-item .right .basket-price {
        font-size: 13px;
    }

    .basket .container .basket-item .right .minus-icon-box {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }



    .details .container .left .photos {
        flex-wrap: wrap;
    }

    .details-image-box h1 {
        font-size: 40px;
    }

    .details-image-box .box p {
        font-size: 20px;
    }

    .details .container .right .features .features-tags .tag {
        padding: 4px 10px;
        font-size: 12px;
    }

    .details .container .right .features .btn-1,
    .details .container .right .features .btn-2,
    .details .container .right .features .btn-3 {
        font-size: 12px;
    }

    .hero .container {
        grid-template-columns: 1fr;
    }

    .hero .container .left h1 {
        font-size: 6.5vh;
    }

    .hero .container .left .box .wrapper {
        width: 90%;
    }

    .hero .container .left {
        margin-bottom: 40px;
    }

    .hero .container .right .wrapper .text p {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .hero .container .right .wrapper .link p {
        font-size: 18px;
        font-weight: 600;
    }

    .hero .container .right .wrapper .link img {
        width: 28px;
        height: 28px;
    }

    .hero .container .left .box .icon-left {
        font-size: 14px;
    }

    .hero .container .left .box .icon-right {
        font-size: 14px;
    }

    .hero .container .left .box .icon-right img {
        width: 26px;
        height: 26px;
    }

    .hero .container .left .box .icon-left .icon-box {
        width: 45px;
        height: 45px;
    }

    .hero .container .left .box .icon-right .icon-box {
        width: 45px;
        height: 45px;
    }


    .hero .container .left .box .icon-left img {
        width: 18px;
        height: 14px;
    }

    .payments .container .wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .payments .container h1,
    .payments .container h1 span {
        font-size: 50px;
    }

    .questions .container h1,
    .questions .container h1 span {
        font-size: 40px;
    }

    .questions {
        padding: 20px 50px;
    }



    .questions .container .wrapper .question .text {
        font-size: 14px;
    }

    .questions .container .wrapper .question .title .left {
        font-size: 30px;
    }

    .questions .container .wrapper .question .title .right svg {
        width: 30px;
        height: 30px;

    }

    .services {
        padding: 50px 20px;

    }

    .services .item {
        padding: 20px;
    }

    .services .item h3 {
        margin: 10px 0;
        font-size: 22px;
    }

    .services .item p {
        margin: 10px 0 0 0;
        line-height: 18px;
        font-size: 13px;
    }

    .services .item .icon-box {
        width: 40px;
        height: 40px;
    }

    .services .item .icon-box img {
        width: 24px;
        height: 24px;
    }



    footer .container {
        grid-template-columns: 1fr 1fr;
        padding: 20px 50px;
    }

    footer {
        padding: 20px 20px;
    }


    footer .container .left .text {
        color: #fff;
        margin-top: 50px;
    }

    footer .container .middle h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    footer .container .middle p {
        font-size: 14px;
        margin-bottom: 5px;
    }

    footer .container .middle p:nth-last-child(1) {
        margin-bottom: 0;
    }

    footer .container .right h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    footer .container .right p {
        font-size: 14px;
        margin-bottom: 5px;
    }

    footer .container .right .icon-box {
        display: flex;
        gap: 20px;

    }

    footer .container .right .icon-box .icon {
        width: 25px;
        height: 25px;
    }





}

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

    .scripts .wrapper {
        grid-template-columns: 1fr;
    }

    .login .container .login-btns .column {
        display: flex;
        flex-direction: column;
    }


    .login .container .login-btns .login-btn {
        width: 300px;
        height: 40px;
        font-size: 12px;
 
    }
 
    .login .container .login-btns .without-discord-btn {
        width: 300px;
        height: 40px;
        font-size: 12px;
     
    }
  
}




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



    .basket .container .box .left h1 {
        font-size: 20px;
    }

    .basket .container .box .left p {
        font-size: 12px;
    }


    .basket .container .box .remain-item {
        font-size: 16px;
    }


    .basket .container .basket-check-btn {
        font-size: 14px;

    }


    .details-image-box h1 {
        font-size: 30px;
    }

    .scripts .container h1 {
        color: #FFF;
        font-weight: 300;
        font-family: "Chakra Petch";
        font-size: 40px;
    }

    .scripts .container h2 {
        color: #3296E6;
        font-weight: 600;
        font-family: "Chakra Petch";
        font-size: 40px;
        margin-bottom: 30px;
    }



   

    .hero .container .left .box .separator {
        flex-direction: column;
        gap: 20px;
    }

    .best-scripts .container .wrapper h2 {
        font-size: 35px;
        margin-bottom: 20px;
    }


    .best-scripts .container .wrapper .btns .left-btn {
        padding: 10px 26px;
        font-size: 12px;
    }

    .best-scripts .container .wrapper .btns .right-btn {
        padding: 10px 26px;
        font-size: 12px;
    }


    .payments .container h1,
    .payments .container h1 span {
        font-size: 40px;
    }

    .questions .container h1,
    .questions .container h1 span {
        font-size: 30px;
    }

    .questions {
        padding: 10px 20px;
    }

    .slider .slide-container .slide .slide-image {
        width: 80vmin;
    }

    .dot {
        width: 20px;
        height: 8px;
    }

    .services {
        grid-template-columns: 1fr;
    }

    .hero .container .left h1 {
        font-size: 5vh;
    }

    footer .container {
        grid-template-columns: 1fr;
        padding: 20px 50px;
    }

    footer .container .middle {
        margin-bottom: 20px;
    }

    header nav .right .login-btn {
        display: none;
    }

    .side-menu .login-btn {
        display: block;
        font-size: 12px;
    }
}

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



    .login .container .login-btns .login-btn {
        width: 230px;
        height: 40px;
        font-size: 12px;
 
    }
    .login .container h5{
        font-size: 13px;
    }
 
    .login .container .login-btns .without-discord-btn {
        width: 230px;
        height: 40px;
        font-size: 12px;
     
    }

    .hero .container .left h1 {
        font-size: 3.5vh;
    }



    .details-image-box h1 {
        font-size: 25px;
    }

    .details-image-box .box p {
        font-size: 14px;
    }

    .questions .container h1,
    .questions .container h1 span {
        font-size: 24px;
    }

    .best-scripts .container .wrapper h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .best-scripts .container .wrapper p {
        font-size: 12px;
        line-height: 20px;
    }

    .questions .container .wrapper .question .title .left {
        font-size: 20px;
    }


    .payments .container h1,
    .payments .container h1 span {
        font-size: 35px;
    }

    .best-scripts .container .wrapper .btns .left-btn {
        padding: 8px 8px;
        font-size: 10px;
    }

    .best-scripts .container .wrapper .btns .right-btn {
        padding: 8px 8px;

        font-size: 12px;
    }

    .side-menu {
        width: 200px;
    }
}