@media (min-width: 0px) and (max-width: 920px) {

    .fullProduct {

        display: flex;
        flex-direction: column;
        width: 95%;

    }


    .displayProduct {

        display: flex;
        flex-direction: column;
        margin-top: 110px;
        width: 100%;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        
        

        

    }

    .displayProduct img {

        width: 100%;
        max-height: 500px;
        object-fit: contain;
        border-radius: 10px;

    }

    .mainProductImg {

        position: relative;
        display: inline-block;

    }

    .mainProductImg img {

        width: 100%;
        display: block;

    }

    .arrows {

        
        display: none;
        bottom: 20px;         
        left: 50%;
        transform: translateX(-50%);
        gap: 45px;
        margin-top: auto;

        position: absolute;
        

        

    }

    .arrows img {

        width: 15px;
        cursor: pointer;

    }

    .thumbnails {

        display: flex;
        flex-direction: row;
        gap: 5px;
        align-items: center;
        justify-content: center;
        

    }

    .thumbnails img {

        width: 19%;
       
        max-width: 100px;
        cursor: pointer;
        object-fit: contain;

    }

    .productDescription1 {

        display: flex;
        flex-direction: column;
        margin-top: 25px;
        

    }

    .title {

        font-size: 30px;
        font-family: "Anton", sans-serif;
        font-weight: 400;

    }

    .description {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        margin-top: 10px;

    }

    .benefits {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        margin-top: 20px;

    }

    .variationFlex {

        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;

    }

    .selectTopText {

        font-family: "DM Sans", sans-serif;
        font-size: 20px;
        font-weight: 800;
        margin-top: 20px;

    }

    .selectProductVariation {

        display: grid;
        width: 100%;
        height: 420px;
        grid-template-columns: 49% 49%;
        grid-template-rows: 50% 50%;
        gap: 2%;

    }

    .item1 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: rgb(209, 209, 209);
        justify-content: center;
        align-items: center;

        
        

    }

    .item2 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: black;
        justify-content: center;
        align-items: center;

        
        

    }

    .item3 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: navy;
        justify-content: center;
        align-items: center;

        
        

    }

    .item4 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: grey;
        justify-content: center;
        align-items: center;

        
        

    }

    .item1 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .item2 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .item3 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .item4 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .quatity {

        display: flex;
        flex-direction: row;
        width: 150px;
        height: 50px;
        background-color: rgb(232, 232, 232);
        border-radius: 50px;
        justify-content:space-between;
        align-items: center;
        gap: 10px;
        
    }

    .minus { 

        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "DM Sans", sans-serif;
        font-size: 25px;
        margin-left: 10px;
        width: 30px;
        height: 30px;
        background-color: white;
        border-radius: 100px;
        cursor: pointer;

    }

    .amount {

        font-family: "DM Sans", sans-serif;
        font-size: 20px;

    }

    .plus { 

        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "DM Sans", sans-serif;
        font-size: 25px;
        margin-right: 10px;
        width: 30px;
        height: 30px;
        background-color: white;
        border-radius: 100px;
        cursor: pointer;

    }

    .flex {

        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .discountArea {

        display: grid;
        grid-template-columns: 60% 40%;
        margin-top: 20px;
        width: 90%;
        height: 100px;
        justify-content: center;
        align-items: center;
        transition: 1s;
        
        gap: 10px;

    }

    .discountFlex {

        display: flex;
        flex-direction: column;
        

    }

    .discountFlexFirstSection {

        display: flex;
        flex-direction: row;
        height: 35px;
        gap: 10px;
        align-items: center;

    }

    .Add {

        font-family: "DM Sans", sans-serif;
        font-size: 14px;
         
        font-weight: 600;
        

    }

    .discount {

        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "DM Sans", sans-serif;
        font-size: 12px;
        color: white;
        font-weight: 600;
        height: 35px;
        width: 125px;
        background: linear-gradient(
            
            to top,
            #587dff,
            #6385ff


        
        );

        border-radius: 50px;

    }

    .discountFlexSecondSection {

        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
        

        

    }

    .oldPrice {

        font-family: "DM Sans", sans-serif;
        font-weight: 250;
        font-size: 15px;
        text-decoration: line-through;
        font-style: italic;
        transition: 1s;
        
        
    }

    .newPrice {

        font-family: "DM Sans", sans-serif;
        font-size: 30px;
        
    }

    .discountGridSecondSection {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 85px;
        background-color: #ddeaff;
        border-radius: 5px;

    }

    .savings {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
       

    }

    .savingNumber {

        font-family: "DM Sans", sans-serif;
        font-size: 25px;
        font-weight: 300;
        
    }

    .sep {

        width: 95%;
        height: 1px;
        background-color: rgb(182, 182, 182);
        margin-top: 10px;

    }

    .buyCTA {

        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 95%;
        height: 55px;
        margin-top: 10px;
        background: linear-gradient( to top,
        
            #1ede00bb,
            #1ac500c3
        
        );

        border-radius: 50px;

        color: white;

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        font-weight: 300;

        


    }

    .load_spinner {

        display: none;

        content: "";

        width: 30px;
        height: 30px;

        border: 2px solid rgb(234, 234, 234);
        border-top-color: rgb(190, 190, 190);
        
        border-radius: 50%;

        animation: load_spinner 1.5s ease infinite;
        
        
    }

    @keyframes load_spinner {
        
        from { transform: rotate(0turn);}
        to {transform: rotate(1turn);}

    }

    .cartBackground {

        width: 100vw;
        height: 100vh;

        
        z-index: 1;

        overflow: hidden;

        position: absolute;

        display: flex;
        justify-content: flex-end;
        

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(10px); /* Safari */
        background: rgba(255, 255, 255, 0.087);

        pointer-events: none;
        
        

    }

    .cart {

        width: 70vw;
        height: 100vh;

        max-width: 500px;

        background: linear-gradient(

            to left,
            #ffffff,
            #f0f0f0

        );

        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;

        position: relative;

        transform: translateX(100%);
        



    }

    .cartHeader {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 85%;
        margin-top: 20px;

    }

    .cartTitle {

        font-family: "DM Sans", sans-serif;
        font-size: 35px;
        font-weight: 600;
        letter-spacing: -1.5px;

    }

    .cartClose {

        cursor: pointer;
        transition: .5s;

    }

    .cartClose:hover {

        transform: scale(1.1);

    }

    .cartItemFlex {

        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 10px;
        width: 85%;

    }

    .cell {

        display: flex;
        flex-direction: row;
        height: 65px;
        
        align-items: center;
        gap: 5px;

        position: relative;

    }

    .cell img {

        height: 65px;
        border: solid 1.5px;
        border-radius: 7px;
        border-color: rgb(213, 213, 213);
        object-fit: contain;

    }

    .divider {

        width: 1px;
        height: 60px;
        background-color: rgba(128, 128, 128, 0.298);

    }

    .subFlex {

        display: flex;
        flex-direction: column;
        gap: 3px;

    }

    .itemName {

        font-family: "DM Sans", sans-serif;
        font-size: 20px;
        font-weight: 600;

    }

    .qAmount {

        

        font-family: "DM Sans", sans-serif;
        font-size: 15px;

    }

    .subFlex1 {

        display: flex;
        flex-direction: column;

    }

    .cartPrice {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;

        position: absolute;
        bottom: 7px;
        right: 0;

        color: #208811;

    }

    .checkout {

        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 95%;
        height: 45px;
        margin-top: 25px;
        background: linear-gradient( to top,
        
            #000000,
            #242424
        
        );

        border-radius: 50px;

        color: white;

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        font-weight: 300;

        bottom: 75px;

        position: absolute;

        transition: 0.5s;

    }

    .checkout:hover {

        transform: scale(1.01);

    }


    .choose_size {


        display: flex;
        flex-direction: row;
        font-family: "DM Sans", sans-serif;
        gap: 20px;
        justify-content: center;
        padding: 10px;
        
    }

    .size_small, .size_medium, .size_large, .size_extra_large {

        display: flex;
        justify-content: center;
        align-items: center;
        border: solid 1px rgb(216, 216, 216);
        border-radius: 100px;
        width: 40px; 
        height: 30px;
        background-color: #f3f3f3;
        cursor: pointer;
        transition: .25s;

    }


}




@media (min-width: 920px) and (max-width: 2500px) {

    .fullProduct {

        display: flex;
        flex-direction: row;
        width: 95%;
        height: 1100px;
        gap: 25px;
        margin-top: 140px;
        justify-content: center;

    }


    .displayProduct {

        display: flex;
        flex-direction: column;
        
        width: 100%;
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;

        max-width: 700px;
        min-width: 500px;
        
        

        

    }

    .displayProduct img {

        width: 100%;
        object-fit: contain;
        border-radius: 10px;

    }

    .mainProductImg {

        position: relative;
        display: inline-block;

    }

    .mainProductImg img {

        width: 100%;
        
        display: block;

    }

    .arrows {

        
        display: none;
        bottom: 20px;         
        left: 50%;
        transform: translateX(-50%);
        gap: 45px;
        margin-top: auto;

        position: absolute;
        

        

    }

    .arrows img {

        width: 15px;
        cursor: pointer;

    }

    .thumbnails {

        display: flex;
        flex-direction: row;
        gap: 5px;
        align-items: center;
        justify-content: center;

    }

    .thumbnails img {

        width: 19%;
        cursor: pointer;


    }

    .productDescription1 {

        display: flex;
        flex-direction: column;
        
        

    }

    .title {

        font-size: 30px;
        font-family: "Anton", sans-serif;
        font-weight: 400;

    }

    .description {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        margin-top: 10px;

    }

    .benefits {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        margin-top: 20px;

    }

    .variationFlex {

        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;

    }

    .selectTopText {

        font-family: "DM Sans", sans-serif;
        font-size: 20px;
        font-weight: 800;
        margin-top: 20px;

    }

    .selectProductVariation {

        display: grid;
        width: 100%;
        height: 420px;
        grid-template-columns: 49% 49%;
        grid-template-rows: 50% 50%;
        gap: 2%;
        
        

    }

    .item1 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: rgb(220, 220, 220);
        justify-content: center;
        align-items: center;

        -webkit-user-select: none; /* Safari */
        -moz-user-select: none;    /* Firefox */
        -ms-user-select: none;     /* IE */
        user-select: none;  

        
        

    }

    .item2 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: #000000;
        justify-content: center;
        align-items: center;

        
        

    }

    .item3 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: navy;
        justify-content: center;
        align-items: center;

        
        

    }

    .item4 {

        
        display: flex;
        flex-direction: column;
        border: solid 2px;
        border-radius: 15px;
        border-color: gray;
        justify-content: center;
        align-items: center;

        
        

    }

    .item1 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .item2 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .item3 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .item4 img {

        width: 125px;
        height: 125px;

        object-fit: contain;


    }

    .quatity {

        display: flex;
        flex-direction: row;
        width: 150px;
        height: 50px;
        background-color: rgb(232, 232, 232);
        border-radius: 50px;
        justify-content:space-between;
        align-items: center;
        gap: 10px;
        
    }

    .minus { 

        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "DM Sans", sans-serif;
        font-size: 25px;
        margin-left: 10px;
        width: 30px;
        height: 30px;
        background-color: white;
        border-radius: 100px;
        cursor: pointer;

    }

    .minus:hover {

        background-color: rgb(90, 90, 90);
        color: white;

    }

    .amount {

        font-family: "DM Sans", sans-serif;
        font-size: 20px;

    }

    .plus { 

        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "DM Sans", sans-serif;
        font-size: 25px;
        margin-right: 10px;
        width: 30px;
        height: 30px;
        background-color: white;
        border-radius: 100px;
        cursor: pointer;

    }

    .plus:hover {

        background-color: rgb(90, 90, 90);
        color: white;

    }

    .flex {

        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;

    }

    .discountArea {
        

        display: grid;
        grid-template-columns: 60% 40%;
        margin-top: 20px;
        width: 90%;
        height: 100px;
        justify-content: center;
        align-items: center;
        
        gap: 10px;

        animation: 1s ease 

    }

    .discountFlex {

        display: flex;
        flex-direction: column;
        

    }

    .discountFlexFirstSection {

        display: flex;
        flex-direction: row;
        height: 35px;
        gap: 10px;
        align-items: center;

    }

    .Add {

        font-family: "DM Sans", sans-serif;
        font-size: 14px;
        
        font-weight: 600;
        

    }

    .discount {

        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "DM Sans", sans-serif;
        font-size: 12px;
        color: white;
        font-weight: 600;
        height: 35px;
        width: 125px;
        background: linear-gradient(
            
            to top,
            #567BFF,
            #214ADE


        
        );

        border-radius: 50px;

    }

    .discountFlexSecondSection {

        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
        

        

    }

    .oldPrice {

        font-family: "DM Sans", sans-serif;
        font-weight: 250;
        font-size: 15px;
        text-decoration: line-through;
        font-style: italic;
        transition: 1s;
        
        
    }

    .newPrice {

        font-family: "DM Sans", sans-serif;
        font-size: 30px;
        
    }

    .discountGridSecondSection {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 85px;
        background-color: #ddeaff;
        border-radius: 5px;

    }

    .savings {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
       

    }

    .savingNumber {

        font-family: "DM Sans", sans-serif;
        font-size: 25px;
        font-weight: 300;
        
    }

    .sep {

        width: 95%;
        height: 1px;
        background-color: rgb(182, 182, 182);
        margin-top: 10px;

    }

    .buyCTA {

        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 95%;
        height: 55px;
        margin-top: 10px;
        background: linear-gradient( to top,
        
            #69d958,
            #73cf65
        
        );

        border-radius: 50px;

        color: white;

        font-family: "DM Sans", sans-serif;
        font-size: 20px;
        font-weight: 400;


    }

    .load_spinner {

        display: none;

        content: "";

        width: 30px;
        height: 30px;

        border: 2px solid rgb(234, 234, 234);
        border-top-color: rgb(90, 90, 90);
        
        border-radius: 50%;

        animation: load_spinner 1.5s ease infinite;
        
        
    }

    @keyframes load_spinner {
        
        from { transform: rotate(0turn);}
        to {transform: rotate(1turn);}

    }



    .cartBackground {

        width: 100vw;
        height: 100vh;

        
        z-index: 1;

        overflow: hidden;

        position: absolute;

        display: flex;
        justify-content: flex-end;
        

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(10px); /* Safari */
        background: rgba(255, 255, 255, 0.087);

        pointer-events: none;
        
        

    }

    .cart {

        width: 70vw;
        height: 100vh;

        max-width: 500px;

        background: linear-gradient(

            to left,
            #ffffff,
            #f0f0f0

        );

        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;

        position: relative;

        transform: translateX(100%);
        



    }

    .cartHeader {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 85%;
        margin-top: 20px;

    }

    .cartTitle {

        font-family: "DM Sans", sans-serif;
        font-size: 35px;
        font-weight: 600;
        letter-spacing: -1.5px;

    }

    .cartClose {

        cursor: pointer;
        transition: .5s;

    }

    .cartClose:hover {

        transform: scale(1.1);

    }

    .cartItemFlex {

        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 10px;
        width: 85%;

    }

    .cell {

        display: flex;
        flex-direction: row;
        height: 65px;
        
        align-items: center;
        gap: 5px;

        position: relative;

    }

    .cell img {

        height: 65px;
        border: solid 1.5px;
        border-radius: 7px;
        border-color: rgb(213, 213, 213);
        object-fit: contain;

    }

    .divider {

        width: 1px;
        height: 60px;
        background-color: rgba(128, 128, 128, 0.298);

    }

    .subFlex {

        display: flex;
        flex-direction: column;
        gap: 3px;

    }

    .itemName {

        font-family: "DM Sans", sans-serif;
        font-size: 20px;
        font-weight: 600;

    }

    .qAmount {

        

        font-family: "DM Sans", sans-serif;
        font-size: 15px;

    }

    .subFlex1 {

        display: flex;
        flex-direction: column;

    }

    .cartPrice {

        font-family: "DM Sans", sans-serif;
        font-size: 15px;

        position: absolute;
        bottom: 7px;
        right: 0;

        color: #208811;

    }

    .checkout {

        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 95%;
        height: 45px;
        margin-top: 25px;
        background: linear-gradient( to top,
        
            #000000,
            #242424
        
        );

        border-radius: 50px;

        color: white;

        font-family: "DM Sans", sans-serif;
        font-size: 15px;
        font-weight: 300;

        bottom: 55px;

        position: absolute;

        transition: 0.5s;

    }

    .checkout:hover {

        transform: scale(1.01);

    }

    /*

    .pre_cart_add {

        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        width: 100%;
        background-color: rgb(233, 233, 233);
        border: 2px solid;
        border-color: rgb(201, 201, 201);
        border-radius: 7.5px;
        margin-top: 10px;
        


    }

    

    .pre_cart_add_text {

        z-index: 2;
        font-family: "DM Sans", sans-serif;
        font-size: 30px;
        margin-top: 10px;


    } */

    
    .choose_size {


        display: flex;
        flex-direction: row;
        font-family: "DM Sans", sans-serif;
        gap: 20px;
        justify-content: center;
        padding: 10px;
        
    }

    .size_small, .size_medium, .size_large, .size_extra_large {

        display: flex;
        justify-content: center;
        align-items: center;
        border: solid 1px rgb(216, 216, 216);
        border-radius: 100px;
        width: 40px; 
        height: 30px;
        background-color: #f3f3f3;
        cursor: pointer;
        transition: .25s;

    }

    .size_small:hover, .size_medium:hover, .size_large:hover, .size_extra_large:hover {

        transform: scale(1.1)

    }


}