@media  screen and (max-width: 1024px){
    .mobile {
        display: flex;
    }

    .desktop {
        display: none;
    }

    .my-bag > div {
        width: 70%;
        right: -70%;
    }

    .order-wave img {
        width: 100%;
    }

    .prd-img-bag {
        width: 14vw;
        height: 24vw;
    }

    .my-bag-header span {
        width: 7vw;
        height: 7vw;
        font-size: clamp(7px, 3vw, 28px);
    }

    .my-bag-header h3 {
        font-size: clamp(15px, 5vw, 49.65px);
    }

    .my-bag-header button {
        width: 7vw;
        height: 7vw;
    }

    .order-content {
        margin: 7% 0;
    }

    .order-content h3 {
        font-size: clamp(10px, 4vw, 40px);
    }

    .order-content h4 {
        font-size: clamp(14px, 5.8vw, 60px);
    }
    
    .order-price span {
        font-size: clamp(10px, 3.5vw, 30px);
    }

    .order-price button {
        font-size: clamp(10px, 3.5vw, 30px);
    }

    .prd-info-bag {
        width: 70%;
    }
    
    .btn-order-content {
        height: 75%;
    }

    .bg-btn-order {
        padding: 10% 0;
    }

    .quant-btns-order button {
        font-size: clamp(15px, 7vw, 75px);
    }

    .quant-btns-order span {
        font-size: clamp(10px, 4vw, 45px);
    }

    .my-bag-checkout h3 {
        font-size: clamp(13px, 3.563vw, 40px);
    }

    .my-bag-checkout button {
        font-size: clamp(10px, 5vw, 55px);
    }

    .my-bag-checkout p {
        font-size: clamp(7px, 3.5vw, 30px);
    }

    .umbrella {
        margin-top: -0.5%;
    }

    .btn-language {
        right: 4%;
        top: 72%;
        width: 2.5%;
    }

    .dhl-logo {
        height: auto;
        width: 15vw;
    }

    .free-express-text {
        font-size:clamp(10px, 6vw, 65px);
    }

    .menu-mobile {
        position: fixed;
        top: -100%;
        left: 0;
        height: 80vh;
        width: 100%;
        border: 2px solid #383737;
        background: #FFFDF0;
        border-radius: 0px 0px 30px 30px;
        z-index: -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        transition: top 0.3s ease-in-out;
    }

    .menu-mobile-active {
        top: 6%;
    }

    .close-menu {
        display: none;
        cursor: pointer;
        border-radius: 50%;
        border: 2px solid #000;
    }

    .menumob-nav {
        padding: 0 2.87%;
        width: 94%;
        height: 30%;
        margin-top: 25%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .menumob-nav a {
        cursor: pointer;
        color: var(--gray);
        font-family: "margin-regular";
        font-size: clamp(20px,9.20vw,60px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .menu-line {
        width: 92.78%;
        height: 2px;
        background-color: #383737;
    }

    .menumob-nav2 {
        display: flex;
        flex-direction: column;
        width: 92.78%;
        height: 15%;
        justify-content: space-between;
    }

    .menumob-nav2 a {
        color: var(--gray);
        font-family: "itc-bold";
        font-size: clamp(15px,4.48vw,30px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .menumob-nav3 {
        margin-top: 5%;
        width: 92.78%;
        height: 6.5%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    } 

    .select2-container {
        width: 37.80% !important;
        height: 100%;

    }

    .select2-container--default .select2-selection--single {
        width: 100%;
        height: 100%;
        border-radius: 100px !important;
        border: 2px solid #383737 !important;
    } 

    .select2-container--default .select2-results>.select2-results__options {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .select2-container--open .select2-dropdown--above {
        border-radius: 20px;
        border: 2px solid #383737;
        overflow: hidden;
    }

    .select2-results__option--selectable > span {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 70%;
    }

    .select2-results__option--selectable {
        color: var(--gray);
    }
    
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: #353535;
        color: #FFF;
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable path {
        fill: #FFF;
    }

    .select2-results__option {
        padding: 6px 0;
    }

    .select2-results__option--selectable > span > span {
        width: 40%;
        display: flex;
        justify-content: center;
        font-family: "itc-regular";
        font-size: clamp(15px,4.48vw,50px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        text-align: center;
        text-align-last: center;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        height: 100%;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 8px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 9%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: unset;
        border-style: unset;
        height: unset;
        position: static;
    }

    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b::after {
        transform: rotate(180deg) !important;
        transition: transform 0.3s ease-in-out;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b::after {
        content: '';
        background-image: url("../images/arrow-select.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center;
        background-size: contain !important;    
        width: 3vw; 
        height: 5vw;
        display: block !important;
        transform: rotate(0deg) !important;
        transition: transform 0.3s ease-in-out;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered > span {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered > span > span {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--gray);
        font-family: "itc-regular";
        font-size: clamp(15px,4.48vw,50px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        text-align: center;
        text-align-last: center;
    }

    .select2-results__option--selectable {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .dolar-mob {
        width: 3vw;
        height: auto;
    }

    .ksa-mob {
        width: 7vw;
        height: auto;
    }

    .aed-mob {
        width: 4vw;
        height: auto;
    }

    .gbp-mob {
        width: 3vw;
        height: auto;
    }

    .eur-mob {
        width: 3vw;
        height: auto;
    }
    
    .menumob-nav3 button {
        width: 37.80%;
        height: 100%;
        border-radius: 100px;
        border: 2px solid #383737;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--gray);
        font-family: "margin-regular";
        font-size: clamp(15px,4.48vw,50px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        text-align: center;
    }
    
    .navbar {
        padding: 7% 2.87%;
    }

    .open-menu {
        width: 30%;
        height: auto;
        cursor: pointer;
    }

    .close-menu {
        width: 7vw;
        height: auto;
        cursor: pointer;
    }

    .logo {
        width: 21.64%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-btns {
        justify-content: flex-end;
    }

    .nav-bag div {
        padding: 4vw;
    }

    .nav-bag span {
        font-size: clamp(8px, 3.5vw, 35px);
        line-height: 72.5%;
    }

    .contact {
        height: auto;
        min-height: unset;
    }

    .contact > div {
        padding-top: 40%;
        padding-bottom: 15%;
        flex-direction: column;
        justify-content: unset;
        align-items: center;
        width: 100%;
        height: auto;
    }

    .contact-cont1 {
        height: auto;
        width: 100%;
        justify-content: unset;
        align-items: center;
    }

    .contact-cont1 h2 {
        font-size: clamp(20px,17.41vw,140px);
        text-align: center;
    }

    .contact-cont1 p {
        font-size: clamp(15px,4.48vw,70px);
        text-align: center;
        line-height: 91.061%;
        margin: 9% 0;
    }

    .contact-cont1 > div {
        width: 26.12%;
    }

    .contact-cont2 {
        align-items: center;
        width: 87.56%;
        height: auto;
        justify-content: unset;
        margin-top: 5%;
    }

    .contact-cont2 input {
        border-radius: 87.763px;
        font-size: clamp(10px, 3.92vw, 45px);
        padding: 2% 3%;
        margin-top: 3%;
        width: 94%;
        border: 2px solid #383737;
    }

    .contact-cont2 textarea {
        font-size: clamp(10px, 3.92vw, 45px);
        padding: 2% 3%;
        margin-top: 3%;
        width: 94%;
        border-radius: 26.329px;
        height: 200px;
        border: 2px solid #383737;
    }

    .contact-cont2 button {
        width: 100%;
        font-size: clamp(14px, 6.38vw, 60px);
        padding: 2% 0;
        margin-top: 3%;
        border: 2px solid #383737;
    }

    footer {
        height: auto;
        min-height: unset;
    }

    .foo-social-wave {
        margin: 5% 0;
    }

    #text1, #text2 {
        font-size: clamp(10px, 6vw, 35px);
    }

    .hashtag {
        font-size: clamp(10px, 8vw, 45px);
    }

    .foo-social-wave img {
        width: 200%;
    }

    .foo-soc-swiper-wrapper {
        width: 100%;
        margin-left: -139%; 
    }

    .foo-soc-swiper-slide {
        width: 50% !important;
    }

    .foo-soc-swiper-wrapper .swiper-slide-active {
        width: 58% !important;
    }

    .foo-soc-button-prev {
        width: 18%;
    }

    .foo-soc-button-next {
        width: 18%;
    }

    .footer-content {
        margin-top: 10%;
        height: auto;
    }


    .poster-img {
        left: -5%;
        bottom: 3%;
        width: 60%;
    }
    
    .poster-img svg {
        top: 0;
        left: 0;
    }

    .foo-background {
        height: auto;
    }

    .foo-background {
        position: relative;
    }

    .foo-cont-1-2 {
        position: absolute;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: 8%;
        width: 70%;
        height: 80%;
    }

    .foo-content1 {
        width: 100%;
        height: auto;
        padding-left: 0;
    }

    .foo-content1 h2 {
        font-size: clamp(15px,9.35vw,100px);
        display: flex;
        white-space: nowrap;
        width: 100%;
        align-items: flex-start;
        gap: 1%;
        padding-left: 8%;
        width: 86%;    
    }

    .foo-content1 h2 img {
        width: 4%;
    }

    .foo-content1 p {
        font-size: clamp(8px,3.98vw,40px);
        margin-top: 2%;
        width: 86%;
        padding-left: 8%;
    }

    .foo-input {
        width: 80%;
        height: auto;
        margin: 3% 0;
        padding-left: 5%;
    }

    .foo-input-content {
        height: 80%;
        width: 93.5%;
    }

    .foo-input-content input {
        height: auto;
        font-size: clamp(15px,4.48vw,30px);
    }

    .foo-input-content input::placeholder {
        font-size: clamp(15px,4.48vw,30px);
    }

    .foo-input-content button {
        height: auto;
    }

    .foo-input-background {
        padding: 10% 0;
        height: auto;
        width: 100%;
    }

    .foo-content2 {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .foo-nav {
        padding-top: 6%;
        height: auto;
        width: auto;
        justify-content: unset;
        gap: 2%;
        padding-left: 8%;
    }

    .foo-nav ul {
        align-items: flex-start;
        width: 45%;
    }
    .foo-nav ul li {
        padding: 5% 0;
    }

    .foo-nav a {
        font-size: clamp(13px,4.69vw,55px);
        white-space: nowrap;
    }

    .foo-social-media-icon {
        width: 86%;
        margin-top: 2%;
        margin-bottom: 8%;
        padding-left: 8%;
        justify-content: unset;
        gap: 8%;
    }

    .foo-social-media-icon a {
        width: 10%;
    }

    .tik-icon {
        width: 90%;
    }

    .ig-icon {
        width: 100%;
    }

    .foo-payment-container-mobile {
        width: 93%;
        position: relative;
        z-index: 2;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 2%;
    }

    .foo-payment-container-mobile h4 {
        font-size: clamp(8px,3.98vw,30px);
        padding-left: 2%;
        color: #FFFDF1;
        font-family: "itc-bold";
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -0.32px;
    }

    .foo-payment-container-mobile > div {
        width: 95%;
        padding-top: 3%
    }

    .foo-payment-container-mobile > div img {
        width: 100%;
    }

    .foo-copyright {
        position: absolute;
        font-size: clamp(8px,3.98vw,30px);
        height: auto;
        padding-bottom: 1.5%;
    }
}

@media  screen and (max-width: 768px){
    .contact-cont2 textarea {
        height: 135px;
    }
}

@media  screen and (max-width: 479px){    
    .contact-cont2 textarea {
        height: 110px;
        padding: 3% 3%;
    }
}