body {
    margin: 0;
    padding: 0;
    background: white;
    font-family: sans-serif;
    display: flex;               /* enables centering */
    justify-content: center;    /* horizontal center */
    align-items: center;        /* vertical center (optional) */
    min-height: 100vh;          /* full viewport height */
}






@font-face {
    font-family: 'Futura';
    src: url('/static/fonts/Futura\ Extra\ Bold.woff') format('woff');
    /* CHANGE 'Futura-ExtraBold.otf' to your EXACT file name */
    font-weight: 800;
    font-style: normal;
    font-display: swap;
} 















.getchat {
    position: relative;
    right: 57px;
    text-decoration: none;
    color: #ffffff;
}






@font-face {
    font-family: 'Fedra';
    src: url('/static/fonts/fedra\ arabic.woff') format('woff');
    /* CHANGE 'Futura-ExtraBold.otf' to your EXACT file name */
    font-weight: 800;
    font-style: normal;
    font-display: swap;
} 

.phone-container {
   /* width: 380;  */      /* it is the 380 that in mobile is set so mobile uses this 
                              amount of screen size */

     width: 327px;            /* this is the simulation of mobile screen so use 297 or 306
                               for simulating mobile screen in pc */ /* -------- */ /* use this and design by this amount then if you give the code to phone which phone screen size is defualt 380 the design will be in their place correctly so its a simulation we mesured the sim by the letter q of .bar mfont by puttin it to the very edge if screen in phone then got the amount of px so it got number 297px which we use dont care how we found out care that it works */ 

     /* height: 819px; */ 
    height: 1164px; 
    min-height: 819px;
    max-width: 100%;
    max-height: none;
    margin: 0 auto;             /* centers horizontally */
    background: rgb(52, 52, 52);
    /* overflow-y: auto; */
    overflow-y: hidden;
    /*border: 1px solid #ccc;     /* visible for debugging */
    overflow-x: hidden;
    padding-bottom: 7px;
}



.portal {
    position: relative;
    color: white;
    text-decoration: none;
    right: 36px !important;
}


.get {
    right: 14.7px !important;
}





.bar {
    /* No top rounding, only bottom corners rounded */
    border-radius: 0 0 16px 16px;
    background: rgba(29, 29, 31, .8);
    padding: 12px 24px;
}

.bar .mfont {
    margin: 0;
    position: relative;
    right: 209px;
    position: relative;
    bottom: 5px;
    font-size: 1.5rem;
    color: white;
}



/* .nfont { 
    margin: 0;
    position: relative;
    right: 151px;
    position: relative;
    font-size: 1.7rem;
    color: green;
} */

/*.nfontn {
    margin: 0;
    position: absolute;
    right: 151px;
    position: relative;
    font-size: 1.7rem;
    color: green;
} */






/*.nfontng {
    margin: 0;
    position: relative;
    right: 151px;
    position: absolute;
    font-size: 1.7rem;
    color: green;
} */


   /* ورود */
.sign {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    position: relative;
    bottom: 1px;
    display: inline-block; /* ensures height is respected */
    position: relative;
    right: -5px;
}


/*sign:before {
    content: "";
    position: relative;
    height: 44.44%;
    width: 100%;
    background-color: rgb(40, 233, 19);
    right: 0;
    z-index: 0;
    top: 44.44%;
} */
.sign:hover::before {
    content: '';          /* required! */
    position: absolute;
    height: 11.11%;
    width: 100%;
    background-color: rgb(40, 233, 19);
    right: 0;
    top: 11.11%;
    z-index: 0;
    /* optional: add pointer-events: none to avoid blocking clicks */
    pointer-events: none;
}









.sign:hover {
    text-decoration: none;   /* no underline */

}





.get {
    color: white;
    text-decoration: none;
    position: relative;
    right: 15px;

} 









.shopbag {
    font-size: 24px;
    color: rgb(18, 244, 40);
    position: relative;
    right: 15px;
    position: relative;
    top: 5px;
    text-decoration: none;   /* no underline */
}













.icons {
   position: relative;
   right: 157px;

   width: 45px;
   height: auto;
   
   

   border-radius: 15px;
   position: relative;
   top: 1px;
}




/*.isolated-container {
    all: initial;
    display: block;
    box-sizing: border-box;
    margin: 90px 9px;
    padding: 250px 20px;
    /*border: 3px solid red;*/
    /*background: rgb(15, 15, 15);
    isolation: isolate;
    position: relative;
    bottom: 70px;
    border-radius: 70px;

}*/





/*.isolated-container {
    all: initial;
    display: block;
    box-sizing: border-box;
    margin: 90px 9px;
    padding: 250px 20px;
    background: rgb(15, 15, 15);
    isolation: isolate;
    position: relative;
    bottom: 70px;
    border-radius: 70px;
    border: 1px solid rgba(255, 255, 255, 0.6);

    /* Top and bottom shadows – equal intensity */
   /* box-shadow: 0 20px 35px -10px rgba(255, 255, 255, 0.6),
                0 -20px 35px -10px rgba(255, 255, 255, 0.6);
}*/
















































/* ISOLATED CONTAINER – Luxury outline shadow + border, inline background color */
.isolated-container {
    all: initial;
    display: block;
    box-sizing: border-box;
    margin: 90px 9px;
    padding: 250px 20px;
    /*background: rgb(15, 15, 15);  */
    background: rgb(255, 255, 255);    /* inline color as requested */
    isolation: isolate;
    position: relative;
    bottom: 70px;
    border-radius: 70px;

    /* --- Luxurious shadow + border --- */
    /*border: 1px solid rgba(255, 255, 255, 0.6);    
    box-shadow: 0 20px 35px -10px rgba(255, 255, 255, 0.6),
                0 0 90px rgba(17, 255, 0, 0.3);  /* outer glow + depth */
/*}*/


box-shadow: 0 20px 25px -19px rgba(255,255,255,0.6),   /* bottom */
            0 -20px 25px -19px rgba(255,255,255,0.6),  /* top */
            0 0 29px -1px rgba(255, 255, 255, 0.29); 
}






.p {
    margin: 0;
    position: relative;
    right: 151px;
    position: relative;
    font-size: 1.5rem;

    color: green;   
} 

























































































































/* .downer {
    all: initial;
    display: block;
    box-sizing: border-box;
    margin: 90px 9px;
    padding: 250px 20px;
    background: rgb(29, 249, 0);
    isolation: isolate;
    position: relative;
    bottom: 70px;
    border-radius: 70px;
    box-shadow: 0 20px 25px -19px rgba(82, 255, 8, 0.6),
                0 -20px 25px -19px rgba(34, 255, 0, 0.6),
                0 0 29px -1px rgba(30, 255, 0, 0.29);
} */



.containertwo { /* container mimic */
    width: 154px;
    display: block;
    box-sizing: border-box;
    margin: 57px 9px;
    padding: 250px 17px;
    /*background: rgb(15, 15, 15);  */
    background: transparent;    /* inline color as requested */
    isolation: isolate;
    position: relative;
    bottom: 70px;  
    border-radius: 27px;

 


/*box-shadow: 0 20px 25px -19px rgba(255,255,255,0.6),   /* bottom */
          /*  0 -20px 25px -19px rgba(255,255,255,0.6),  /* top */
           /* 0 0 29px -1px rgba(255, 255, 255, 0.29); 
 */}




.containermimictoftrans {
    width: 151px;
    display: block;
    box-sizing: border-box;
    margin: 0px 0px;
    padding: 87px 17px;
    /*background: rgb(15, 15, 15);  */
    background: rgba(255, 255, 255, 0.952);    /* inline color as requested */
    isolation: isolate;
    position: relative;
    bottom: 247px;  
    right: -18.4px;
    border-radius: 27px;
}








.containeraftert {
    right: 147px;
    width: 154px;
    display: block;
    box-sizing: border-box;
    margin: 90px 9px;
    padding: 89px 17px;
    /*background: rgb(15, 15, 15);  */
    background: rgba(255, 255, 255, 0.952);    /* inline color as requested */
    isolation: isolate;
    position: absolute;
    bottom: 587.4px;
    border-radius: 27px;

 


/*box-shadow: 0 20px 25px -19px rgba(255,255,255,0.6),   /* bottom */
          /*  0 -20px 25px -19px rgba(255,255,255,0.6),  /* top */
           /* 0 0 29px -1px rgba(255, 255, 255, 0.29); 
 */}









.tmen {
    margin: 0;
    border-radius: 27px;
    position: relative;
    width: 154px;
    height: 177px;
    right: 138.8px;
    bottom: 424px;
}







.twomen {
    margin: 0;
    border-radius: 27px;
    position: absolute;
    width: 154px;
    height: 174px;
    right: 00.14px;
    bottom: -0.1px;
}

.pftst7 {
    color: green;
    font-size: 1.7rem;
    bottom: -77px;
}









/*.btn-transparent {
    background: transparent;
    border: 3px solid #ffffff;
    color: #ffffff;
    padding: 16px 44px;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
    background-image: linear-gradient(to right, #ffffff, #000000);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700; /* optional, for better visibility */

 /* }*/








 /* .btn-transparent:hover {
    background: rgba(255, 255, 255, 0.081);
    border-color: #66ffbb;
    color: #66ffbb;
} */






/*.btn-transparent:hover {
    background-color: rgba(255, 255, 255, 0.081); /* Use background-color, not background */
   /* border-color: #66ffbb;                       /* Green border pops */
    /* DO NOT set 'color' here — keep it transparent for the gradient */
 /* } */

 















/* .btn-transparent {
    background: transparent;
    border: 3px solid #ffffff;      /* white border by default */
   /* color: #ffffff;                 /* solid white text by default */
   /* padding: 16px 44px;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
    /* No gradient here — text is solid white */
 /*}

.btn-transparent:hover {
    border-color: #ff2a00;          /* green border pops */
    /*background-color: rgba(255, 255, 255, 0.081); /* optional subtle tint */

    /* Apply gradient to text ONLY on hover */
   /* background-image: linear-gradient(to right, #ffffff, #000000);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;             /* makes the gradient visible */
 /* }*/ 


 /*   .btn-transparent {
    background: transparent;
    border: 3px solid #ffffff;
    padding: 16px 44px;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    color: #ffffff;                    /* solid white text */
   /* transition: color 0.5s ease, border-color 0.3s ease;
}

.btn-transparent:hover {
    border-color: #66ffbb;             /* green border pops */
    /*color: transparent;                /* fade to transparent over 0.5s */

    /* Gradient applied on hover – appears as color fades */
   /*/* background-image: linear-gradient(90deg, #ffffff, #000000, #ffffff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;

    /* Continuous movement of the gradient */
   /* animation: slideGradient 2s linear infinite;
}

@keyframes slideGradient {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
} */


/* .btn-transparent {
    background: transparent;
    border: 3px solid #ffffff;
    padding: 16px 44px;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;

    /* Solid white text (hides gradient) */
 /*   color: #ffffff;

    /* Smooth transitions */
  /*  transition: 
        color 0.5s ease,
        border-color 0.5s ease,
        background-position 0.15s ease-out;

    /* Gradient setup (hidden until hover) */
/*    background-image: linear-gradient(90deg, #ffffff, #000000, #ffffff);
    background-size: 200% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
}
.btn-transparent:hover {
    border-color: #66ffbb;   /* green border pops */
 /*   color: transparent;      /* reveals the gradient */
/*} */

















/*.btn-transparent {
    background: transparent;
    border: 3px solid #ffffff;
    padding: 16px 44px;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;

    color: #ffffff; /* solid white – hides the gradient */

    /* Smooth transitions – slower for background-position */
  /*  transition: 
        color 0.6s ease,
        border-color 0.6s ease,
        background-position 0.4s ease-out;  /* slower movement */

    /* Radial gradient: white at center, black at edges */
  /*  background-image: radial-gradient(circle at 50% 50%, #ffffff, #000000);
    background-size: 200% 200%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
}

.btn-transparent:hover {
    border-color: #66ffbb;   /* green border */
  /*  color: transparent;      /* reveal gradient */
/* } */ 


/*.btn-transparent {
    position: relative;
    background: transparent;
    border: 3px solid #ffffff;
    padding: 16px 44px;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    color: #ffffff;

    /* Very fast transition for snappy following */
   /* transition: 
        color 0.6s ease,
        border-color 0.6s ease,
        background-position 0.05s ease-out;  /* nearly instant */

    /* Tighter gradient: tiny white spot, rest black */
  /*  background-image: radial-gradient(
        circle at 50% 50%,
        #ffffff 0%,
        #ffffff 5%,     /* white core radius ~5% */
     /*   #000000 10%,    /* quickly falls to black */
  /*      #000000 100%
    );
    background-size: 200% 200%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Subtle white background tint for visibility */
/*.btn-transparent::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.btn-transparent:hover::before {
    opacity: 1;
}
.btn-transparent:hover {
    border-color: #66ffbb;
    color: transparent;
} */











.btn-transparent {
    position: relative;
    bottom: 791px;
    right: 172.9px;   
    background: transparent;
    border: 3px solid #ffffff;
    padding: 7px 27px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'fedra';
    color: #ffffff;

    /* Fast transition for snappy following */
    transition: 
        color 0.6s ease,
        border-color 0.6s ease,
        background-position 0.05s ease-out;

    /* Radial gradient: tiny bright white core, gradual falloff to black */
    background-image: radial-gradient(
        circle at 50% 50%,
        #ffffff 0%,
        #ffffff 6%,       /* small white point (6% radius) */
        #333333 20%,      /* smooth transition to gray */
        #000000 40%,      /* fully black by 40% */
        #000000 100%
    );
    background-size: 200% 200%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Subtle white background tint for hover detectability */
.btn-transparent::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.btn-transparent:hover::before {
    opacity: 1;
}

.btn-transparent:hover {
    border-color: #1e1e1e;
    color: transparent;  /* reveal gradient */
}














.btn-twmen {
    position: relative;
    bottom: 791.4px;
    right: -121.9px;   
    background: transparent;
    border: 3px solid #ffffff;
    padding: 7px 27px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'fedra';
    color: #ffffff;

    /* Fast transition for snappy following */
    transition: 
        color 0.6s ease,
        border-color 0.6s ease,
        background-position 0.05s ease-out;

    /* Radial gradient: tiny bright white core, gradual falloff to black */
    background-image: radial-gradient(
        circle at 50% 50%,
        #ffffff 0%,
        #ffffff 6%,       /* small white point (6% radius) */
        #333333 20%,      /* smooth transition to gray */
        #000000 40%,      /* fully black by 40% */
        #000000 100%
    );
    background-size: 200% 200%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
}


.btn-twmen::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.btn-twmen:hover::before {
    opacity: 1;
}

.btn-twmen:hover {
    border-color: #1e1e1e;
    color: transparent;  
}








.crcontain {
    
    all: initial;
    display: block; 
    box-sizing: border-box;
    margin: 90px 4px;
    padding: 9.9px 17px;
    
    background: rgb(255, 255, 255);    
    isolation: isolate;
    position: relative;
    bottom: 777px;
    border-radius: 24px;
}









/*.crcontainmessure {
    all: initial;


    display: block; 
    box-sizing: border-box;
    margin: 90px 9px;
    padding: 7px 20px;
    
    background: rgb(255, 255, 255);    
    isolation: isolate;
    position: relative;
    bottom: 857px;
    border-radius: 70px;
} */

.copyright {
    font-family: sans-serif;
    font-size: 0.8rem;
    font-style: normal;
    color: #000000;
    position: relative;
    bottom: -102px;
    right: 7px; 
}











.instagram {
    font-size: 0.9rem;
    color: rgb(129, 127, 127);
    font-family: 'futura';
    position: relative;
    bottom: 27px;
    right: 207px;
}




.rubika {
    font-size: 0.9rem;
    color: rgb(129, 127, 127);
    font-family: 'futura';
    position: relative;
    bottom: 31px;
    right: 234.6px;
}




.bale {
    font-size: 0.9rem;
    color: rgb(129, 127, 127);
    font-family: 'futura';
    position: relative;
    bottom: 36px;
    right: 251px;
    margin: 0;
}








#order-list {
    font-size: 0.9rem;
    color: brown;
    height: 90px;
    width: 90px;
    background: green;
    border-color: purple;
    border-radius: 20px;
    position: absolute;
    right: 80px;
    top: 90px;
}