/* RESET */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================BODY===================== */

body{

    font-family: Arial, Helvetica, sans-serif;

    background-color: #f5f7fa;
}

/* ================= HEADER ================= */

.header{

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

    background: rgba(255,255,255,0.88);

    backdrop-filter: blur(12px);

    box-shadow: 0 4px 20px rgba(0,0,0,0.08);

    transition: 0.3s ease;
}

/* NAVBAR */

.navbar{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 30px;
}

/* LOGO BOX */

.logo-box{

    display: flex;

    align-items: center;

    gap: 15px;
}

/* LOGO */

.logo{

    width: 55px;

    height: 55px;

    object-fit: cover;

    border-radius: 50%;
}

/* NAME */

.logo-name{

    font-size: 34px;

    color: #102542;

    font-weight: bold;
}

/* ICONS */

.nav-icons{

    display: flex;

    align-items: center;

    gap: 30px;
}

/* ICON */

.icon,
.menu-icon{

    font-size: 30px;

    color: #102542;

    cursor: pointer;

    transition: 0.3s;
}

/* HOVER */

.icon:hover,
.menu-icon:hover{

    color: #3baee7;
}

/* =================================================================================== */
/* MOBILE MENU */
/* =================================================================================== */

.mobile-menu{

    position: fixed;

    top: 0;

    right: -100%;

    width: 50%;

    height: 100vh;

    background: linear-gradient( 180deg, rgba(8,12,30,0.97), rgba(5,10,25,0.98) );

    backdrop-filter: blur(14px);

    z-index: 99999;

    transition: 0.5s ease;

    padding: 120px 50px;

    box-shadow: -10px 0 30px rgba(0,0,0,0.25);

    overflow-y: auto;
}

/* ACTIVE */

.mobile-menu.active{

    right: 0;
}

/* MENU LIST */

.mobile-menu ul{

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 35px;
}

.mobile-menu ul li{

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* LINKS */

.mobile-menu ul li a{

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-decoration: none;

    font-size: 24px;

    color: white;

    font-weight: bold;

    padding: 18px 22px;

    border-radius: 16px;

    transition: 0.3s ease;
}

.mobile-menu ul li a:hover i{

    transform: translateX(-5px);

    opacity: 1;
}

/* HOVER */

.mobile-menu ul li a:hover{

    background: rgba(59,174,231,0.12);

    color: #3baee7;

    transform: translateX(-8px);
}

/* CLOSE BUTTON */

.close-btn{

    position: absolute;

    top: 30px;

    right: 30px;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: rgba(255,255,255,0.08);

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    font-size: 28px;

    cursor: pointer;

    transition: 0.3s;
}

/* HOVER */

.close-btn:hover{

    background: #3baee7;

    transform: rotate(90deg);
}
/* ======================================================================================================
 CONTACT MODAL
========================================================================================================== */

.contact-modal{

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.75);

    backdrop-filter: blur(6px);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: .4s;

    z-index: 999999;
}

.contact-modal.active{

    opacity: 1;

    visibility: visible;
}

/* BOX */

.contact-box{

    width: 500px;

    max-width: 95%;

    background: white;

    border-radius: 25px;

    padding: 35px;

    text-align: center;
}

/* TITLE */

.contact-box h2{

    color: #102542;

    margin-bottom: 10px;
}

.contact-box p{

    color: #777;

    margin-bottom: 30px;
}

/* ITEM */

.contact-item{

    display: flex;

    align-items: center;

    gap: 15px;

    text-decoration: none;

    padding: 16px 20px;

    margin-bottom: 12px;

    border-radius: 15px;

    background: #f4f7fa;

    color: #102542;

    font-size: 18px;

    transition: .3s;
}

.contact-item i{

    font-size: 24px;
}
/* الصورة */
.contact-item img{

    width: 30px;

    height: 30px;

    object-fit: contain;
}

.contact-close{

    position: absolute;

    top: 15px;

    right: 440px;

    width: 35px;

    height: 35px;

    border-radius: 50%;

    background: #3baee7;

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: .3s;

    z-index: 100;
}

.contact-close:hover{

    background: #3baee7;

    transform: rotate(90deg);
}

.contact-box{

    position: relative;
}
/* ===========االوان الهوفر لكل  منصة ============*/

.whatsapp:hover{

    background:#25D366;
    color:white;
}

.facebook:hover{

    background:#1877F2;
    color:white;
}

.instagram:hover{

    background:#E4405F;
    color:white;
}

.messenger:hover{

    background:#00B2FF;
    color:white;
}

.tiktok:hover{

    background:#000;
    color:white;
}

.youtube:hover{

    background:#FF0000;
    color:white;
}

/* ======================================================================================================
ABOUT MODAL
========================================================================================================== */
.about-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    z-index:999999;

    opacity:0;

    visibility:hidden;

    transition:.4s;
}

.about-modal.active{

    opacity:1;

    visibility:visible;
}

.about-content{

    width:100%;

    height:100vh;

    overflow-y:auto;

    background:#f5f8fc;

    padding:40px;
}



.about-intro{

    max-width:1000px;

    margin:40px auto;

    text-align:center;
}

.about-intro h2{

    font-size:45px;

    color:#102542;

    margin-bottom:15px;
}

.about-intro p{

    font-size:20px;

    line-height:2;

    color:#555;
}
.about-hero{
    position:relative;
    height:380px;
    overflow:hidden;
    border-radius:25px;
}

.about-hero img{
    width:100%;
    height:380px;
    object-fit:cover;
    border-radius: 25px;
}

.hero-overlay{
    position:absolute;
    top:50%;
    right:60px;
    transform:translateY(-50%);
    width:520px;
    direction:rtl;
    color:#fff;
    z-index:10;

    display:flex;
    flex-direction:column;
    justify-content:center;

    text-align:right;
}

.hero-overlay h2{
    font-size:70px;
    margin-bottom:10px;
    line-height:1;
}

.hero-line{
    width:180px;
    height:2px;
    background:#7fc4ea;
    margin:15px 0 25px auto;
}

.hero-overlay p{
    font-size:16px;
    line-height:2;
    margin-top:10px;
}

.about-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to left,
        rgba(0,0,0,.75),
        rgba(0,0,0,.35),
        transparent
    );
}
/*SERVICES  */

.services-list{

    max-width:1250px;

    margin:35px auto;

    display:flex;

    flex-direction:column;

    gap:12px;
}

/* ROW */
.service-row{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    align-items:center;
    height:140px;
    min-height:160px;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.service-row:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* IMAGE */
.service-image {
    width: 420px;
    height: 170px;
    overflow: visible;
    border-radius: 12px;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENT */

.service-content{

    flex:1;

    padding:15px  20px;
}

/* NUMBER */

.service-number{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#1d5aa6;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
}

/* TITLE */

.service-content h3{
    font-size:16px;
    color:#102542;
    margin-bottom:5px;
}

/* TEXT */

.service-content p{
    color:#555;
    line-height:1.6;
    font-size:11px;
}

/* ICON */

.service-icon{

    width:100px;

    display:flex;

    justify-content:center;

    align-items:center;
}

.service-icon i{
    font-size:42px;
    color:#1d5aa6;
}
/*======*/
.features-bar{
    background:#002c73; /* أغمق */
    border-radius:10px;

    margin-top:20px;
    padding:10px 15px;

    display:flex;
    justify-content:space-around;
    align-items:center;
}

.feature-item{
    display:flex;
    flex-direction:column;
    text-align:center;
    color:#fff;
    gap:5px;
}

.feature-item i{
    font-size:24px;
}

.feature-item span{
    font-size:13px;
    font-weight:500;
}

.close-about{
    position: fixed;
    top: 20px;
    right: 25px;

    width: 33px;
    height: 33px;

    background: #ffffff;
    color: #102542;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    cursor: pointer;

    z-index: 9999999;

    box-shadow: 0 5px 20px rgba(0,0,0,.15);

    transition: .3s;
}

.close-about:hover{
    background:#1d5aa6;
    color:#fff;
    transform: rotate(90deg);
}

/* ==================================================================================================
 الأقسام 
 ======================================================================================================== */

.departments-section{
    padding: 20px 40px 50px;
}

.departments-container{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.department-card{
    position: relative;
    background:#fff;
    border-radius:25px;
    border: 1PX solid #EDF1F7;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
    transition:.4s;
}

.department-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.department-card img{
    width:100%;
    height:190px;
    object-fit:cover;
    display:block;
}
/* اسم القسم */
.department-card h3{
    margin-top:40px;
    margin-bottom:8px;
    padding:0 15px;
    text-align:center;
    font-size:18px;
    font-weight:700;
    color:#102542;
    line-height:1.6;
}

.department-card span{
    display:block;
    padding:0 15px 20px;
    text-align:center;
    font-size:14px;
    line-height:1.8;
    color:#666;
}

/* الدائرة البيضاء */
.card-icon{
    position:absolute;

    left:50%;
    top:190px;

    transform:translate(-50%,-50%);

    width:60px;
    height:60px;

    background:#0a4a96;
    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    z-index:10;
}

.card-icon i{
    font-size:26px;
    color:#FFF;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ======================================================================================================
   HERO SECTION
========================================================================================================== */

.hero{

    width: 100%;

    min-height: 90vh;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 60px;

    background-color: #eef4fb;

    gap: 40px;
}

.hero-content{

    flex: 1;
}


.hero-content h2{

    font-size: 60px;

    color: #102542;

    line-height: 1.3;
}


.hero-content span{

    color: #3baee7;
}


.hero-content p{

    font-size: 20px;

    margin-top: 20px;

    color: #555;

    line-height: 1.8;
}

.hero-content button{

    margin-top: 30px;

    padding: 15px 35px;

    border: none;

    background-color: #3baee7;

    color: white;

    font-size: 18px;

    border-radius: 10px;

    cursor: pointer;

    transition: 0.3s;
}


.hero-content button:hover{

    background-color: #102542;

    transform: translateY(-5px);
}

/* HERO IMAGE */

.hero-image{

    flex: 1;
}


.hero-image img{

    width: 100%;

    border-radius: 20px;
}
/* ======================================================================================
   HERO SLIDER
========================================================================================== */

.hero-slider{

    position: relative;

    width: 100%;

    height: 75vh;

    overflow: hidden;
}



.slides{

    width: 100%;

    height: 100%;
}


.slide{

    position: absolute;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: 1s ease-in-out;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}

.slide::after{

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.35);
}


.slide.active{

    opacity: 1;
}



.slide1{

    background-image: url("images/background6.jpeg");
}

.slide2{

    background-image: url("images/background2.jpeg");
}

.slide3{

    background-image: url("images/background3.jpeg");
}

.slide4{

    background-image: url("images/background4.jpeg");
}

.slide5{

    background-image: url("images/background5.jpeg");
}


.slide-content{

    position: absolute;

    top: 50%;

    left: 7%;

    transform: translateY(-50%);

    color: white;

    max-width: 420px;

    background: rgba(0,0,0,0.25);

    padding: 30px;

    border-radius: 20px;

    backdrop-filter: blur(5px);
}


.slide-content h2{

    font-size: 42px;

    margin-bottom: 15px;

    line-height: 1.2;
}


.slide-content p{

    font-size: 20px;

    line-height: 1.6;

    margin-bottom: 20px;
}



.slide-content button{

    padding: 14px 30px;

    border: none;

    background-color: #3baee7;

    color: white;

    font-size: 16px;

    border-radius: 12px;

    cursor: pointer;

    transition: 0.3s;
}



.slide-content button:hover{

    background-color: #102542;
}


.prev,
.next{

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 65px;

    height: 65px;

    border-radius: 50%;

    border: none;

    background: rgba(0,0,0,0.45);

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    z-index: 10;
}


.prev i,
.next i{

    font-size: 26px;
}


.prev{

    left: 20px;
}

.next{

    right: 20px;
}


.prev:hover,
.next:hover{

    background-color: #3baee7;
}


.dots{

    position: absolute;

    bottom: 30px;

    width: 100%;

    display: flex;

    justify-content: center;

    gap: 15px;
}



.dot{

    width: 15px;

    height: 15px;

    background-color: rgba(255,255,255,0.5);

    border-radius: 50%;

    cursor: pointer;

    transition: 0.3s;
}



.dot.active{

    background-color: white;

    transform: scale(1.3);
}
/* ===================================================== SEARCH BOX====================================================== */
.search-box{

    position: fixed;

    top: 85px;

    right: 80px;

    width: 0;

    height: 58PX;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 15px;

    background: rgba(0,0,0,0.92);

    border: 2px solid #3baee7;

    border-radius: 50px;

    box-shadow: 0 0 20px rgba(59,174,231,0.25);

    padding: 18px 22px;

    backdrop-filter: blur(10px);

    transition: 0.5s ease;

    opacity: 0;

    z-index: 999999;

    transform: translateY(-10px);

    scale: 0.9;

}
/* ==============ACTIVE ===================*/

.search-box.active{

    width: 320px;

    opacity: 1;

      transform: translateY(0);

      scale: 1;
}

/* ICON */

.search-box i{

    color: white;

    font-size: 24px;
}

/* ==============INPUT ======================*/

.search-box input{

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: white;

    font-size: 18px;
}
/* سهم */
/*=============== PLACEHOLDER =================*/

.search-box input::placeholder{

    color: #ddd;
}
/* SMALL ARROW */

.search-box::before{

    content: "";

    position: absolute;

    top: -10px;

    left: 45px;

    width: 20px;

    height: 20px;

    background: rgba(0,0,0,0.92);

    border-left: 2px solid #7fff00;

    border-top: 2px solid #7fff00;

    transform: rotate(45deg);

}

.search-box::before{
    display:none;
}

/* =========================================LOGIN SECTION============================================= */

.login-section{

    width: 100%;

    padding: 100px 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #f5f7fa;
}

/* LOGIN BOX */

.login-box{

    width: 100%;

    max-width: 500px;

    background: rgba(255,255,255,0.75);

    border: 1px solid rgba(255,255,255,0.4);

    backdrop-filter: blur(15px);

    border-radius: 30px;

    padding: 50px 40px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

/* TITLE */

.login-box h2{

    font-size: 42px;

    color: #102542;

    margin-bottom: 40px;

    text-align: center;
}

/* INPUT BOX */

.input-box{

    margin-bottom: 30px;

    position: relative;
}

/* LABEL */

.input-box label{

    display: block;

    margin-bottom: 12px;

    color: #102542;

    font-size: 18px;

    font-weight: bold;
}

/* INPUT */

.input-box input{

    width: 100%;

    padding: 18px 20px;

    border: 2px solid transparent;

    border-radius: 15px;

    font-size: 17px;

    background: rgba(255,255,255,0.9);

    transition: 0.3s;
}

/* FOCUS */

.input-box input:focus{

    outline: none;

    border-color: #3baee7;

    box-shadow: 0 0 15px rgba(59,174,231,0.4);
}

/* PASSWORD ICON */

.password-box i{

    position: absolute;

    right: 20px;

    top: 58px;

    font-size: 20px;

    color: #555;

    cursor: pointer;
}

/* REMEMBER */

.remember-box{

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

    color: #444;
}

/* BUTTON */

.login-btn{

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 15px;

    background: linear-gradient(135deg,#3baee7,#102542);

    color: white;

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

/* HOVER */

.login-btn:hover{

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(16,37,66,0.3);
}

/* FORGOT PASSWORD */

.forgot-password{

    display: block;

    text-align: center;

    margin-top: 25px;

    text-decoration: none;

    color: #102542;

    font-weight: bold;

    transition: 0.3s;
}

/* HOVER */

.forgot-password:hover{

    color: #3baee7;
}
/* ========================  LOGIN MODAL============================= */

.login-modal{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: rgba(0,0,0,0.45);

    backdrop-filter: blur(8px);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transition: 0.4s ease;
}

/* ACTIVE */

.login-modal.active{

    opacity: 1;

    visibility: visible;
}

/* CLOSE BUTTON */

.login-close{

    position: absolute;

    top: 30px;

    right: 35px;

    width: 50px;

    height: 50px;

    background: white;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    font-size: 28px;

    color: #102542;

    transition: 0.3s;
}

/* HOVER */

.login-close:hover{

    background: #3baee7;

    color: white;

    transform: rotate(90deg);
}
/* ================================================================================================
 CATEGORY BAR
  ============================================================================================ */

.categories-section{

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 25px;

    background: #f5f7fa;
}

/* LIST */

.categories-list{

    display: flex;

    gap: 18px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;
}

.categories-list::-webkit-scrollbar{

    display: none;
}

/* ITEM */

.category-item{

    display: flex;

    align-items: center;

    gap: 10px;

    background: #f1f3f6;

    padding: 16px 28px;

    border-radius: 18px;

    color: #102542;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

    white-space: nowrap;

    position: relative;

    z-index: 2;
}

/* ICON */

.category-item i{

    font-size: 16px;

    color: #3baee7;
}

/* ACTIVE */

.category-item.active{

    background: #102542;

    color: white;
}

/* ACTIVE ICON */

.category-item.active i{

    color: #3baee7;
}

/* ARROWS */

.category-arrow{

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: #102542;

    color: white;

    font-size: 18px;

    cursor: pointer;

    transition: 0.3s;

    flex-shrink: 0;

    display: flex;

    justify-content: center;

    align-items: center;
}

/* HOVER */

.category-arrow:hover{

    background: #3baee7;
}

/* ================================= PRODUCTS SECTION ================================= */

.products-section{

    padding: 50px 40px;
}

/* TOP */

.section-header{

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    margin-bottom: 30px;

  background:linear-gradient(135deg,#071325,#0B1D38);

    padding: 20px 35px;

    border-radius: 22px;

    margin-bottom: 35PX;
}

/* TITLE */

.section-header h2{

    color: #FFF;
margin: 0 !important;
    font-size: 38px;
    font-weight: 400;
}



/* PRODUCTS */

.products-container{

    display: grid;

    grid-template-columns: repeat(5,1fr);

    gap: 20px;
}

/* CARD */

.product-card{

    background: white;

    border-radius: 18px;

    overflow: hidden;

   box-shadow: 0 8px 25px rgba(0,0,0,0.06);

   transition: 0.4s ease;

    border: 1px solid rgba(0,0,0,0.04);
}

.product-card:hover{

    transform: translateY(-10px);

    box-shadow: 0 15px 35px rgba(0,0,0,0.12);

     border-color: #3baee7;
}

/* IMAGE */

.product-image{

    position: relative;

    overflow: hidden;
}

.product-image img{

    width: 100%;

    height: 220px;

    object-fit: contain;

    padding: 15px;

    transition: 0.5s;

    z-index: 1;

    background: #dcdcdc;
}


/* OVERLAY */

.overlay{

    position: absolute;

    bottom: -100%;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.65);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: 0.5s ease;

    z-index: 2;
}

/* BUTTON */

.overlay button{

    padding: 14px 30px;

    border: none;

    background: #3baee7;

    color: white;

    border-radius: 12px;

    font-size: 17px;

    cursor: pointer;

    transition: 0.3s;
}

.overlay button:hover{

    background: white;

    color: #102542;
}

/* HOVER */

.product-card:hover .overlay{

    bottom: 0;
}

.product-card:hover img{

    transform: scale(1.5);
}

/* INFO */

.product-info{

   padding: 18px 20px 25px;
}

.product-info h3{

    font-size: 17px;

    margin-bottom: 12px;

    color: #102542;

    line-height: 1.5;
}

.product-info p{

    font-size: 30px;

    font-weight: bold;

    color: #0000b1;
}

.more-products{
    display:none;
}

.more-products.active{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

/* ================================MORE PRODUCTS ==============================*/

.more-products{
    display:none;
}

.more-products.show{
    display:grid;
    grid-template-columns:inherit;
    gap:inherit;
}

/* ACTIVE */

.more-products.active{

    display: grid;

    animation: fadeIn 0.5s ease;
}

/* ANIMATION */

@keyframes fadeIn{

    from{

        opacity: 0;

        transform: translateY(20px);
    }

    to{

        opacity: 1;

        transform: translateY(0);
    }
}
/* ======================================================= PRODUCT MODAL عروضات ============================================== */

.product-modal{

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.75);

    backdrop-filter: blur(6px);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999999;

    opacity: 0;

    visibility: hidden;

    transition: 0.4s;

    padding: 0;
}

/* ACTIVE */

.product-modal.active{

    opacity: 1;

    visibility: visible;
}

/* CONTENT */

.modal-content{
  width:100%;
    height:100vh;
    border-radius:0;
    background:#fff;
    display:flex;
    overflow:hidden;
}
/* MAIN IMAGE */

.main-image{

    flex: 1;

  position:relative;

  height:calc(100vh - 120px);

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border-radius:35px;

    background:

    radial-gradient(
    circle at 20% 20%,
    rgba(59,174,231,.12),
    transparent 35%
    ),

    radial-gradient(
    circle at 80% 10%,
    rgba(16,37,66,.08),
    transparent 40%
    ),

    linear-gradient(
    180deg,
    #ffffff,
    #f4f9ff
    );

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.main-image::before{

 content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(59,174,231,.12);

    filter:blur(100px);

    z-index:0;
}

.main-image img{

 width:90%;

    height:90%;

    object-fit:contain;

    position:relative;

    z-index:2;

    transition:.4s;

    filter:
    drop-shadow(
    0 25px 35px rgba(0,0,0,.18)
    );
}

.main-image:hover img{

    transform:scale(1.03);
}

/* THUMBNAILS */

.thumbnails{

    position: static;

display:flex;

flex-direction:column;

left:20px;

top:50%;

transform: none;

gap: 15px;

order: -1 ;
}

.thumb{

      width:120px;

    height:120px;

    object-fit:contain;

    cursor:pointer;

    padding:8px;

    border-radius:18px;

    border:2px solid transparent;

    background:#fff;

    transition:.3s;

    box-shadow:
    0 8px 20px rgba(0,0,0,.08);
}

.thumb:hover{

    transform:translateY(-3px);
}

/* ACTIVE THUMB */

.active-thumb{

    border-color:#3baee7;

    box-shadow:
    0 12px 25px rgba(59,174,231,.25);
}

/* ARROWS */

.gallery-btn{

   position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:#102542;

    cursor:pointer;

    transition:.3s;

    z-index:10;

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);
}

.gallery-btn:hover{

background:#3baee7;

color:white;
}

.prev-btn{

        left:20px;
}

.next-btn{

    right:20px;
}

/* CLOSE */

.close-modal{

    position:fixed;

    top:25px;

    right:35px;

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,0,0,.65);

    color:#fff;

    font-size:30px;

    cursor:pointer;

    z-index:9999999;

    transition:.3s;
}

/* HOVER */

.close-modal:hover{

      background:#3baee7;

    transform:rotate(90deg);
}

.product-gallery{

  display:flex;

    gap:25px;

    align-items:center;

flex:0 0 50%;

max-width:50%;

padding: 10px 20px;

    position:relative;
}

/* SHADOW UNDER PRODUCT */

.product-gallery::after{
    content:"";

    position:absolute;

    bottom:110px;

    left:50%;

    transform:translateX(-50%);

    width:320px;

    height:45px;

    border-radius:50%;

    background:

    radial-gradient(
    ellipse,
    rgba(0,0,0,.20),
    transparent 70%
    );

    filter:blur(30px);
}


/* =============================DETAILS عروضات ====================================*/

.product-details{

  flex:0 0 50%;

max-width:50%;

display:flex;

flex-direction:column;

justify-content:flex-start;

overflow-y:hidden;

padding-right: 20px;

padding-top: 20px;

padding:25px  40px;

}

/* TITLE */

.product-details h2{

 font-size:32px;

font-weight:900;

margin:8px 0;

  line-height: 1.2;

    color:#102542;

    margin-bottom:0;
}

/* PRICE */
.product-price{

    display:block;

    margin-bottom:20px;

  font-size:46px;

font-weight:900;

    line-height:1;

background: linear-gradient(135deg,#3baee7,#102542);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* TEXT */

.product-details p{

    font-size:17px;

    line-height:1.9;

    color:#666;

    margin-bottom:35px;
}

/* BUTTON */

.order-now-btn{

   border:none;

    width:100%;

    height:64px;

    font-size:22px;

    font-weight:800;

    border-radius:18px;

    padding:0 40px;

    background:
    linear-gradient(
    135deg,
    #3baee7,
    #102542
    );

    color:#fff;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 15px 35px rgba(59,174,231,.25);

    margin-bottom: 10px;
}
/* ايقونة */
.order-now-btn i{
    font-size:24px;
    margin-right:10px;
}

.order-now-btn:hover{

 transform:translateY(-3px);

    box-shadow:
    0 20px 40px rgba(59,174,231,.35);
}

/* CATEGORY 

.product-category{
display:block;
font-size:15px;
font-weight:700;
color:#3baee7;
margin-bottom:8px;
}
*/
/* الوصف */

.product-subtitle{
font-size:15px;
line-height:1.6;
color:#555;
margin-bottom:5px;
min-width: auto;
width: 100%;
}

/* التقييم والسعر */
.price-rating-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:8px;
    margin-top: -5px;
    gap: 60px;
}

.product-price{
    margin:0;

        margin-top: -10px;
}
.product-rating{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
margin:0;
position: relative;
top: -4px;
}

.stars{
color:#f7b500;
font-size:22px;
letter-spacing:2px;
}

.product-rating span{
color:#666;
font-size:15px;
}

/* PRICE BOX */

.price-box{
display:flex;
align-items:center;
gap:20px;
margin-bottom:10px;
}

.tax-text{
font-size:20px;
color:#666;
font-weight:500;
}

/* الميزات */

.product-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:8px;
margin-top: -5px;
}
/* الميزات مربعات */
.feature-item{
background:#f5f7fb;
border-radius:16px;
padding:14px ;
display:flex;
align-items:center;
justify-content:space-between;
font-size:14px;
font-weight:600;
color:#102542;
}

.feature-item i{
color:#3baee7;
font-size:20px;
}

/* SERVICES */

.service-boxes{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-bottom:8px;
}

.service-item{
background:#fff;
border:1px solid #edf0f5;
border-radius:18px;
padding:4px;
text-align:center;
margin-top: -5px;
}

.service-item i{
font-size:24px;
color:#3baee7;
margin-bottom:10px;
}

.service-item h4{
font-size:13px;
margin-bottom:6px;
color:#102542;
}

.service-item span{
font-size:11px;
color:#888;
}

/* SECURITY */

.security-box{
height:40px;
border-radius:18px;
background:#eef5fc;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
font-size: 10px;
font-weight:700;
color:#3baee7;
}

.security-box i{
font-size:22px;
}


/* ================================= CLIENTS SECTION ================================ */


.clients-section{
    padding:50px 20px;
    background:#f5f7fa;
}

.services-grid{
    display:flex;
    flex-direction:column;
    gap:5px;
}

/* البطاقة */
.client-row{
    display:flex;
    align-items:center;
 background:linear-gradient(135deg,#071325,#0B1D38);
    border-radius:35px;
    padding:15px;
    min-height:110px;
    cursor:pointer;
    transition:.4s;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(138,124,255,.15);
}

.client-row::before{
    content:"";
    position:absolute;
    top:0;
    left:0;

    width:5px;
    height:100%;

    background:linear-gradient(#3B82F6,#1F56B3);

    border-radius:20px;
}

.client-row::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;

    width:50%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.04),
        transparent
    );

    transition:1s;
}

.client-row:hover::after{
    left:120%;
}

.client-row:hover{
    background:linear-gradient(135deg,#16325C,#0E2345);
    transform:translateY(-5px);
    box-shadow:
    0 10px 30px rgba(0,0,0,.4),
    0 0 20px rgba(138,124,255,.25);
}

/* الصورة */
.client-image{
    width:110px;
    height:110px;
    flex-shrink:0;
}

.client-image img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border: 4PX solid rgba(225, 225, 225, .15);
    box-shadow: 0 10PX 25PX rgba(0,0,0,.35);
    transition: .5S;
}

.client-row:hover .client-image img{
    transform:scale(1.07);
}

/* النص */
.client-content{
    flex:1;
    padding:0 25px;
    text-align:right;
}

.client-content h3{
    color:white;
    font-size:34px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom:10px;
}

.client-content p{
    color:#C5D2E5;
    font-size:16px;
    line-height:1.8;
    margin:0;
}

.client-arrow{
    width:45px;
    height:45px;

    background:linear-gradient(135deg,#3B82F6,#1F56B3);

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;
    font-size:20px;

    box-shadow:
    0 15px 35px rgba(31,86,179,.45),
    0 0 30px rgba(59,130,246,.35);

    transition:.4s;
}

.client-row:hover .client-arrow{
    transform:translateX(-10px) scale(1.08);
}

/*كود الجديد */

.clients-gallery{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;

  max-height:0;
  opacity:0;
  overflow:hidden;

  padding:0 22px;
  margin:-20px 0 0;

  background:linear-gradient(135deg,#071325,#0B1D38);
 border-radius:0 0 28px 28px;

  transform:translateY(-25px);
  transition:
    max-height .9s cubic-bezier(.16,1,.3,1),
    opacity .35s ease,
    padding .55s ease,
    margin .55s ease,
    transform .7s cubic-bezier(.16,1,.3,1);
}

.clients-gallery.active{
  max-height:1000px;
  opacity:1;
  padding:22px;
  margin:-20px 0 22px;
  transform:translateY(0);
}

.clients-gallery img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:16px;
  display:block;
border: 1PX solid #2055D4;
  opacity:0;
  transform:translateY(25px) scale(.94);
  animation:photoDrop .55s ease forwards;

  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

.clients-gallery.active img:nth-child(1){animation-delay:.05s}
.clients-gallery.active img:nth-child(2){animation-delay:.10s}
.clients-gallery.active img:nth-child(3){animation-delay:.15s}
.clients-gallery.active img:nth-child(4){animation-delay:.20s}
.clients-gallery.active img:nth-child(5){animation-delay:.25s}
.clients-gallery.active img:nth-child(6){animation-delay:.30s}
.clients-gallery.active img:nth-child(7){animation-delay:.35s}
.clients-gallery.active img:nth-child(8){animation-delay:.40s}
.clients-gallery.active img:nth-child(9){animation-delay:.45s}
.clients-gallery.active img:nth-child(10){animation-delay:.50s}

@keyframes photoDrop{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.client-row{
  transition:
    transform .35s ease,
    border-radius .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.client-row.active{
  transform:translateY(-2px);
  box-shadow:
    0 18px 35px rgba(0,0,0,.28),
    0 0 25px rgba(47,125,246,.18);
      border-radius:28px 28px 0 0;
}

.client-row.active .client-arrow{
  animation:arrowPulse .45s ease;
  background:linear-gradient(135deg,#65a2ff,#1f56e8);
}

.client-row.active .client-arrow i{
  transform:rotate(180deg);
}

@keyframes arrowPulse{
  0%{
    transform:scale(1);
  }
  45%{
    transform:scale(1.18);
  }
  100%{
    transform:scale(1);
  }
}

/* ======================================================================= ACCESSORIES SECTION ============================================= */

.acc-section{
   padding:18px 15px 28px;
  background:#f4f6f9;

}

.acc-section .section-header{
  margin-bottom:12px;
}

.acc-grid{
  max-width:1150px;
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}

.acc-card{
  position:relative;
  background:#fff;
  border-radius:22px;
  padding:14px;
  min-height:260px;
  box-shadow:0 12px 28px rgba(7,19,37,.08);
}

.acc-card img{
  width:100%;
  height:120px;
  object-fit:contain;
  display:block;
  margin-bottom:12px;
}

.acc-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 35px rgba(7,19,37,.14);
}

.acc-heart{
  position:absolute;
  top:13px;
  left:13px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#f7f9fc;
  color:#9ca3af;
  font-size:18px;
  cursor:pointer;
  transition:.3s ease;
}

.acc-heart.active{
  background:#2055D4;
  color:#fff;
  transform:scale(1.12);
  box-shadow:0 8px 18px rgba(32,85,212,.35);
    animation:heartPop .35s ease;
}


@keyframes heartPop{
  0%{transform:scale(.7);}
  60%{transform:scale(1.25);}
  100%{transform:scale(1);}
}
.acc-card h3{
  margin:0 0 5px;
  color:#071325;
  font-size:15px;
  font-weight:900;
  line-height:1.5;
}

.acc-card p{
  margin:0 0 8px;
  color:#7b8494;
  font-size:13px;
}

.acc-rate{
  color:#f6b400;
  font-size:13px;
  margin-bottom:14px;
}

.acc-rate span{
  color:#7b8494;
  margin-right:4px;
}

.acc-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.acc-bottom strong{
  color:#071325;
  font-size:18px;
  font-weight:900;
}

.acc-bottom button{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#3B82F6,#005CFF);
  color:white;
  font-size:18px;
  box-shadow:0 10px 22px rgba(31,111,255,.35);
}
/* ======================================================================= MODAL SECTION ============================================= */
.acc-product-modal{
  position:fixed;
  inset:0;
  background:rgba(7,19,37,.72);
  backdrop-filter:blur(10px);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:25px;
}

.acc-product-modal.active{
  display:flex;
}

.acc-modal-box{
  position:relative;
  width:min(1250px,100%);
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:34px;
  padding:34px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:36px;
  direction:rtl;
  animation:accModalOpen .45s ease;
}

@keyframes accModalOpen{
  from{opacity:0; transform:translateY(35px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}


.acc-thumbs{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.acc-thumbs img{
  width:92px;
  height:92px;
  object-fit:cover;
  border-radius:16px;
  padding:6px;
  background:#fff;
  border:2px solid transparent;
  box-shadow:0 8px 20px rgba(7,19,37,.08);
  cursor:pointer;
}

.acc-thumbs img.active{
  border-color:#2077ff;
}

.acc-main-image{
  position:relative;
  background:linear-gradient(135deg,#f8fbff,#edf5ff);
  border-radius:30px;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.acc-main-image img{
  max-width:88%;
  max-height:500px;
  object-fit:contain;
  animation:accImgShow .35s ease;
}

@keyframes accImgShow{
  from{opacity:0; transform:scale(.96);}
  to{opacity:1; transform:scale(1);}
}

.acc-img-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#071325;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  cursor:pointer;
}

.acc-prev{left:20px;}
.acc-next{right:20px;}

.acc-modal-info h2{
  margin:0 0 8px;
  color:#071325;
  font-size:34px;
  font-weight:900;
}

.acc-modal-subtitle{
  margin:0 0 18px;
  color:#6b7280;
  font-size:16px;
}

.acc-price-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
}

.acc-price-row strong{
  color:#176fdc;
  font-size:48px;
  font-weight:900;
}

.acc-price-row span{
  color:#f6b400;
  font-size:16px;
}

.acc-modal-info h3{
  color:#0b2a55;
  font-size:22px;
  margin:0 0 10px;
}

.acc-desc{
  color:#4b5563;
  font-size:15px;
  line-height:1.9;
  margin-bottom:18px;
}

.acc-features{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.acc-features li{
  background:#f5f7fb;
  border-radius:16px;
  padding:14px 16px;
  color:#1f2937;
  font-size:15px;
  line-height:1.6;
}

.acc-features li i{
  color:#2077ff;
  margin-left:8px;
}




/* =======================================================================================================
========================================================================================================== */
/* ================= MODAL ACCESSORIES ================= */

.acc-new-modal{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:#06111f;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
}

.acc-new-modal.active{
  display:flex;
}

.acc-new-content{
  width:100vw;
  height:100vh;
  background:#fff;
  border-radius:0;
  padding:28px 45px 18px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:45px;
  direction:ltr;
  overflow:hidden;
  box-shadow:0 35px 90px rgba(0,0,0,.28);
}

/* LEFT GALLERY */

.acc-new-gallery{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.acc-main-box{
  position:relative;
  height:calc(100vh - 255px);
  min-height:360px;
}

.acc-new-main-img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:linear-gradient(180deg,#f6f9ff,#eef4fb);
  border-radius:32px;
  padding:28px;
  box-shadow:inset 0 0 0 1px rgba(32,85,212,.08);
}

.acc-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#071325;
  box-shadow:0 14px 28px rgba(0,0,0,.15);
  cursor:pointer;
  z-index:5;
  font-size:18px;
  transition:.3s;
}

.acc-arrow:hover{
  background:#2055D4;
  color:#fff;
}

.acc-prev{
  left:22px;
}

.acc-next{
  right:22px;
}

/* THUMBNAILS */

.acc-new-thumbs-wrap{
  position:relative;
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:16px;
}

.acc-new-thumbs{
  flex:1;
  display:flex;
  justify-content:center;
  gap:16px;
  overflow:hidden;
  padding:4px 0;
}

.acc-new-thumbs img{
  flex:0 0 82px;
  width:82px;
  height:82px;
  object-fit:contain;
  border-radius:18px;
  background:#f5f8fd;
  padding:8px;
  cursor:pointer;
  border:2px solid transparent;
}

.acc-new-thumbs img.active{
  border-color:#0b66e4;
}

.thumb-arrow{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#071325;
  box-shadow:0 12px 25px rgba(0,0,0,.14);
  cursor:pointer;
  font-size:17px;
  transition:.3s;
}

.thumb-arrow:hover{
  background:#2055D4;
  color:#fff;
}

.acc-dots{
  display:flex;
  justify-content:center;
  gap:13px;
  margin-top:8px;
}

.acc-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#cfd6e2;
  cursor:pointer;
}

.acc-dots span.active{
  background:#0b66e4;
}

/* RIGHT INFO */

.acc-new-info{
  direction:rtl;
  text-align:center;
  padding-top:0;
  overflow:hidden;
}

.acc-new-info h2{
  font-size:34px;
  margin:0 0 6px;
  color:#071325;
  line-height:1.25;
  font-weight:900;
}

.acc-new-info p{
  color:#6b7280;
  margin:0 0 18px;
  font-size:16px;
  margin-bottom: 10px;
}

#accNewPrice{
  display:block;
  color:#2055D4;
  font-size:38px;
  font-weight:900;
  margin-bottom:10px;
}

.acc-new-desc{
  color:#374151;
  line-height:1.45;
  margin:0 auto 18px;
  font-size:14px;
  max-width:620px;
    margin-bottom:10px;
}

.acc-new-features{
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
  margin:0 0 18px;
    margin-bottom:8px;
}

.acc-new-features li{
  background:#f4f7fb;
  min-height:42px;
  padding:6px 14px;
  border-radius:14px;
  color:#111827;
  text-align:left;
  direction:ltr;
  display:flex;
  align-items:center;
  font-size:13px;
  line-height:1.4;
}

.acc-new-features li::before{
  content:"\f108";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:#0b66e4;
  font-size:22px;
  width:34px;
  flex:0 0 34px;
  margin-right:14px;
}

.acc-new-features li:nth-child(2)::before{
  content:"\f6ff";
}

.acc-new-features li:nth-child(3)::before{
  content:"\f287";
}

.acc-new-features li:nth-child(4)::before{
  content:"\f0e7";
}

.acc-new-features li:nth-child(5)::before{
  content:"\f3fd";
}

.acc-new-whatsapp{
  height:46px;
  border-radius:16px;
  background:linear-gradient(135deg,#20d66b,#0074c8);
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:17px;
  font-weight:900;
  box-shadow:0 18px 35px rgba(0,111,174,.28);
  transition:.3s;
}

.acc-new-whatsapp:hover{
  transform:translateY(-3px);
}

/* CLOSE */

.acc-new-close{
  position:fixed;
  top:25px;
  right:25px;
  width:35px;
  height:35px;
  border-radius:50%;
  background:#fff;
  color:#071325;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  z-index:99999999;
  transition:.3s;
}

.acc-new-close:hover{
  background:#2055D4;
  color:#fff;
  transform:rotate(90deg);
}




/* =======================================================================================================
========================================================================================================== */
/* =======================================================================================================
   TABLET
========================================================================================================== */
/* =======================================================================================================
========================================================================================================== */
@media (max-width: 992px){

    .hero{

        flex-direction: column;

        text-align: center;
    }

    .hero-content h2{

        font-size: 45px;
    }

    /* ========================= slide ========================= */

    .slide-content h2{

        font-size: 45px;
    }

    .slide-content p{

        font-size: 20px;
    }

/* ============================================ PRODUCTS SECTION ====================================== */
        .products-container{

        grid-template-columns: repeat(3,1fr);
    }


}

/* =======================================================================================================
========================================================================================================== */
/* ===================================================================================================================
   MOBILE
==================================================================================================================== */
/* =======================================================================================================
========================================================================================================== */

@media (max-width: 768px){

   /*================ HEADER ===========*/

   .header{

    box-shadow:
    0 3px 15px rgba(0,0,0,.08);
}

.navbar{
    min-height:80px;

    padding:12px 15px;
}

.logo-box{
    gap:10px;
}

.logo{
    width:45px;
    height:45px;
}

.logo-name{
    font-size:24px;
}

.nav-icons{
    gap:20px;
}

.icon,
.menu-icon{
    font-size:22px;
}
/* ================================================== MOBILE MENU ================================================ */

.mobile-menu{
    width:85%;
    padding:90px 20px 40px;
}

.mobile-menu ul{
    gap:20px;
}

.mobile-menu ul li{
    padding-bottom:15px;
}

.mobile-menu ul li a{
    font-size:18px;
    padding:15px;
    border-radius:14px;
}

.close-btn{
    width:50px;
    height:50px;
    font-size:24px;
}

/* ============================================== HERO SLIDER ======================================== */

.hero-slider{
    height:50vh;
}

.slide{
    background-size:cover;
    background-position:center center;
}

/* صندوق النص */
.slide-content{

    left:20px;

    top:50%;

    transform:translateY(-50%);


    width:180px;

    padding:18px;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(12px);


    border-radius:25px;

    text-align:right;

    direction:rtl;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

}

/* العنوان */
.slide-content h2{

      width:100%;

    text-align:right;

    font-size:22px;

    line-height:1.4;

    margin-bottom:12px;
}

/* الوصف */
.slide-content p{

    font-size:13px;

   width:100%;

    text-align:right;

    line-height:1.8;

    margin-bottom:15px;
}

/* الزر */
.slide-content button{

    width:130px;

    height:42px;

    font-size:14px;

    border-radius:15px;

     align-self:center;

       display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.prev,
.next{
    display: none;
    width:38px;
    height:38px;
}

.prev{
    left:8px;
}

.next{
    right:8px;
}

.prev i,
.next i{
    font-size:16px;
}

.dot{

    width:10px;
    height:10px;
}

/* ============================================== categories ========================================== */

/* إخفاء أسهم التصنيفات على الهاتف فقط */

.category-arrow{
    display:none;
}

/* جعل التصنيفات قابلة للسحب */

.categories-section{
    padding:8px 0;
}

.categories-list{
    overflow-x:auto;
    gap:8px;
    padding:0 8px;
}

.category-item{

    flex: 0 0 auto;

    min-width: 90px;

    height: 42px;

    padding: 0 15px;

    border-radius: 12px;

    font-size: 11px;

    gap: 6px;

    justify-content: center;
}

.category-item i{

    font-size: 12px;
}

.categories-list::-webkit-scrollbar{
    display:none;
}



/* =============================== search========================================== */
.search-box{

    position: fixed;

    top: 85px;

    right: 15px;

    left: auto;

    width: 0;

    height: 45px;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 15px;

    background: rgba(0,0,0,0.92);

    border: 2px solid #3baee7;

    border-radius: 50px;

    box-shadow: 0 0 20px rgba(59,174,231,0.25);

    padding: 0;

    opacity: 0;

    transition: .5s ease;

    z-index: 999999;
}

.search-box.active{

    width: 190px;

    padding: 0 18px;

    opacity: 1;
}


.search-box i{

    color:#102542;

    font-size:20px;
}

.search-box input{

    color:#ced3db;

    font-size:15px;
}

.search-box input::placeholder{

    color:#777;
}

.search-box::before{

    display:none;
}


/* ========================================== login================================================== */


/* LOGIN */

.login-section{

    padding:40px 15px;
}

.login-box{

    max-width:100%;

    padding:30px 20px;

    border-radius:25px;
}

.login-box h2{

    font-size:28px;

    margin-bottom:30px;
}

.input-box{

    margin-bottom:20px;
}

.input-box label{

    font-size:17px;

    margin-bottom:10px;
}

.input-box input{

    height:58px;

    padding:0 18px;

    font-size:16px;

    border-radius:15px;
}

.password-box i{

    top:50px;

    right:18px;

    font-size:20px;
}

.remember-box{

    font-size:15px;

    margin-bottom:25px;
}

.login-btn{

    height:60px;

    font-size:20px;

    border-radius:18px;
}

.forgot-password{

    margin-top:20px;

    font-size:15px;
}

.login-close{

    position: fixed;

    top: 15px;

    right: 15px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

    color: #102542;

    z-index: 99999999;

    box-shadow: 0 5px 20px rgba(0,0,0,.15);
}

.login-close:hover{

    background:#3baee7;

    color:white;

    transform:rotate(90deg);
}
/* ============================================ PRODUCTS SECTION ====================================== */
/* القسم */
.products-section{
    padding:15px 10px;
}

/* الشبكة */
.products-container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

/* الكرت */
.product-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(0,0,0,.04);

    height:auto;        /* مهم */
}

/* الصورة */
.product-image{
   padding: 0;
}

.product-image img{
    width:100%;
    height:135px;
    object-fit:contain;
    padding:0 10px;
    display: block;
    background: #dcdcdc;
}

/* المعلومات */
.product-info{
    padding:5px 14px 12px;
}

/* اسم المنتج */
.product-info h3{
    font-size:12px;
    font-weight:700;
    color:#102542;
    line-height:1.7;
    margin-bottom:8px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp: 2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* السعر */
.product-info p{
    font-size:16px;
    font-weight:800;
     color: #0000b1;
}

/* زر العرض */
.overlay button{
    width:110px;
    height:42px;

    border:none;
    border-radius:22px;

    display:flex;
    justify-content:center;
    align-items:center;

    white-space:nowrap; /* يمنع نزول النص لسطرين */

    background:linear-gradient(135deg,#56d1ff,#39aff4);

    color:#fff;
    font-size:15px;
    font-weight:700;

    box-shadow:0 6px 15px rgba(57,175,244,.25);
}
/*  الهيدر الأزرق للعروضات:  */
/* الشريط */
.section-header{

   background:linear-gradient(135deg,#071325,#0B1D38);

    height:50px;

    padding:0 15px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

/* العنوان */
.section-header h2{

    margin:0;

    color:#fff;

    font-size:18px !important;

    font-weight:700;
}

/* زر المزيد */
.section-header button{

    width:85px;
    height:34px;

    border:none;

    border-radius:18px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;

    line-height:1;

    font-size:15px !important;
    font-weight:700;

    background:linear-gradient(
        135deg,
        #55d0ff,
        #39aff4
    );

    color:#fff;
}

.close-modal{

    top:18px;
    right:18px;

    width:35px !important;
    height:35px !important;

    border:none;
    border-radius:50%;

    background:#5f5f5f;

    color:#fff;

    font-size:25px !important;

    display:flex;
    justify-content:center;
    align-items:center;
}

.main-image{
    position:relative;

    background:#f5fbff;

    border-radius:30px;

    padding:30px 20px;
}

.main-image img{
    width:100%;
    height:260px;

    object-fit:contain;

    display:block;
}

/* الاسهم */
.gallery-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:26px !important;
    height:26px !important;

    border:none;
    border-radius:50%;

    background:#fff;
    color:#102542;

    box-shadow:0 8px 20px rgba(0,0,0,.1);

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:11px;

    cursor:pointer;

    z-index:5;
}

.next-btn{
    right:4px;
}

.prev-btn{
    left:4px;
}

.thumbnails{
    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:12px;
}

.thumbnail{
    width:75px;
    height:75px;

    border-radius:20px;

    background:#fff;

    border:2px solid #f0f0f0;

    cursor:pointer;

    transition:.3s;
}

.thumbnail img{
    width:80%;
    object-fit:contain;
}

.thumbnail.active{
    border-color:#4bc8ff;

    box-shadow:0 0 0 3px rgba(75,200,255,.15);
}

/*عنوان المنتج داخل المودال */
.product-details h2{
    margin-top:15px;

    margin-bottom: 3px !important; /* المسافة تحت العنوان */

    text-align:center;

    color:#102542;

    font-size:20px !important;

    font-weight:800;

    line-height:1.8;
}

/* الوصف تحت عنوان المنتج دلخل مودال*/

.product-subtitle{
    margin-top:0;

     margin-bottom: 10px  !important;  /* المسافة تحت الوصف */

    text-align:center;

    color:#888;

       font-size:14px !important;;

    line-height:1.5;
}

/* السعر داخل المنتج */
/* السعر والتقييم */
.price-rating-row{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
}

.product-price{
    font-size:28px !important;
    margin:0 !important;
    line-height:1 !important;
}

.product-rating{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    margin:0 !important;
    position:relative;
    top:1px;      /* نزّل النجوم قليلاً */
}

.stars{
    font-size:14px !important;
    margin:0 !important;
    line-height:1 !important;
}

.product-rating span{
    font-size:12px !important;
    line-height:1 !important;
}

.product-features{

        display:grid !important;

        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;

        margin-top:15px !important;

    }

.feature-item{

    background:#f5f6fa;

    border:1px solid #edf0f5;

    border-radius:18px;

    padding:14px 8px;

    margin:0 !important;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:6px;

    box-shadow:none;
}

    .feature-item i{

        font-size:20px;

    }
    
.order-now-btn{
    width:100%;
    height:65px;

    margin-top:20px;

    border:none;

    border-radius:35px;

    background:
    linear-gradient(90deg,#59d4ff,#03285f);

    color:#fff;

    font-size:20px;

    font-weight:800;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:15px;

    position:sticky;

    bottom:10px;

    z-index:50;
}

.service-boxes{

        display:grid !important;

        grid-template-columns:repeat(3,1fr) !important;

        gap:6px;

        margin-top:15px;
    }

    .service-item{

        background:#f5f6fa;

        border:1px solid #edf0f5;

        border-radius:16px;

        padding:10px 4px;

        text-align:center;

        min-height:70px;

        box-shadow: none;
    }

    .service-item i{

        font-size:18px;

        margin-bottom:6px;

        color: #49c8ff;
    }

    .service-item h4{

        font-size:11px;

        font-weight: 700;

        line-height:1.3;

        margin:0;
    }


.product-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:15px;
}

.modal-content{

    width:100%;

    max-width:430px;

    max-height:92vh;

    overflow-y:auto;

    background:#fff;

    border-radius:35px;

    padding:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

     .more-products{
        display:none;
    }

    .more-products.active{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

/* =======================================  MOBILE MODAL=================================================== */

.modal-content{
    flex-direction: column;
    overflow-y: auto;
    padding: 15px;
    gap: 20px;
}

.product-gallery{
    flex: none;
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    gap: 15px;
    padding: 0;
}

.main-image{
    height: 260px;
    border-radius: 20px;
}

.main-image img{
    width: 85%;
    height: 85%;
}

.thumbnails{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    order: 0;
}

.thumb{
    width: 65px;
    height: 65px;
    border-radius: 12px;
}

.product-details{
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 0;
}

.product-details h2{
    font-size: 24px;
    text-align: center;
}

.product-subtitle{
    min-width: auto;
    width: 100%;
    text-align: center;
    font-size: 14px;
}


.product-price{
    font-size: 34px;
}

.product-features{
    grid-template-columns: 1fr;
}

.service-boxes{
    grid-template-columns: 1fr;
}

.order-now-btn{
    height: 58px;
    font-size: 18px;
}

.security-box{
    height: 50px;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.close-modal{
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    font-size: 26px;
}

.gallery-btn{
    width: 40px;
    height: 40px;
}


/* ============================================================= الأقسام ================================================================================ */


    .departments-section{
        padding: 15px;
        background: #f4f6f9;
    }

    .more-btn{
        background: linear-gradient(to right,#42c9ff,#63d3ff);
        color: white;
        border: none;
        border-radius: 25px;
        padding: 12px 30px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    /* الأقسام الظاهرة */
/* أول 4 أقسام */
.departments-container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

    /* البطاقة */
    .department-card{
        background: white;
        border-radius: 25px;
        overflow: hidden;
     box-shadow:
0 8px 25px rgba(0,0,0,.06),
0 2px 8px rgba(0,0,0,.03);
        transition: .3s;
    }

    .department-card:hover{
        transform: translateY(-3px);
    }

    /* الصورة */
 .department-card img{
    width:100%;
    height:120px;
    object-fit:cover;
    display:block;
}

    /* اسم القسم */
.department-card h3{
    margin-top:38px;
    margin-bottom:8px;
    padding:0 15px;

    text-align:center;
    font-size:16px;
    font-weight:700;
    color:#102542;
    line-height:1.5;
}

.department-card span{
    display:block;
    padding:0 15px 20px;
    text-align:center;
    font-size:13px;
    line-height:1.7;
    color:#777;
}

.department-card{
    position:relative;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
}

.card-icon{
    position:absolute;
    left:50%;
    top:120px;
    transform:translate(-50%,-50%);

    width:55px;
    height:55px;

    background:#1F56B3;
    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    z-index:10;
}

.card-icon i{
    font-size:22px;
    color:#fff;
}

/* ================================================ CLIENTS SECTION ================================================= */
/* ======== CLIENTS MOBILE STYLE ======== */
.services-grid{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.clients-section{
  padding:10px 15px  ;

  background:#f4f6f9;
}

/* الكرت */
.client-row{
  background:linear-gradient(135deg,#071325,#0B1D38);
  border-radius:28px;
  min-height:auto;

  display:grid;
  align-items:center;
   grid-template-columns:78px 1fr 42px;
    gap:-15px;
    padding:12px;

  overflow:hidden;
  direction:rtl;
}

/* الصورة */
.client-image{
  width:78px;
  height:90px;
  flex-shrink:0;
}

.client-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
  border:4px solid rgba(255,255,255,.08);
}

/* النص */
.client-content{
  width:auto;
  min-width:0;
  text-align:right;
}

.client-content h3{
  color:#fff;
  font-size:17px;
  font-weight:800;
  margin:0 0 6px;
  line-height:1.25;
}

.client-content p{
  color:#a9b3c5;
  font-size:11px;
  line-height:1.6;
  margin:0;
}

/* السهم */
.client-arrow{
  width:35px;
  height:35px;
  border-radius:50%;
  background:linear-gradient(135deg,#4B8BFF,#2A66D9);

  display:flex;
  justify-content:center;
  align-items:center;
}


.client-arrow i{
  color:#fff;
  font-size:15px;
}

/* كود الجديد */
  .clients-gallery{
 display:grid;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    gap:10px;

    padding:0 12px;
    margin:-18px 0 0;

    border-radius:0 0 24px 24px;

    transform:translateY(-22px);
  }

  .clients-gallery.active{
    max-height:1600px;
    padding:12px;
    margin:-18px 0 18px;
    transform:translateY(0);
  }

  .clients-gallery img{
    height:100px;
    border-radius:14px;
  }


/* ======================================================= ABOUT MODAL ============================================= */
.about-content{
    padding:15px;
}
.about-hero{
    height:220px;
    border-radius:25px;
}

.about-hero img{
    height:100%;
}

.hero-overlay{
    width:140px;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    padding:10px;
}

.hero-overlay h2{
    font-size:18px;
    margin-bottom:8px;
}

.hero-line{
    width:60px;
    margin-bottom:10px;
}

.hero-overlay p{
    font-size:9px;
    line-height:1.7;
}

.hero-overlay ul{
    font-size:9px;
    line-height:1.8;
}
/* البطاقة */
.service-row{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    margin-bottom:18px;
    min-height: 130PX;
    height: auto;
    align-items: stretch;

}

/* الصورة */
.service-image{
    width:145px;
     height:auto;
    min-height:90px;
    overflow:hidden;
    border-radius:22px 0 0 22px;
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* المحتوى */
.service-content{

        flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
      text-align:right;
  
    padding:15PX 12px;

}

/* الرقم */
.service-number{
    width:35px;
    height:35px;

    border-radius:50%;
    background:linear-gradient(135deg,#3baee7,#1d5aa6);

    color:#fff;
    font-size:13px;
    font-weight:bold;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:0 auto 15px auto;
}

/* العنوان */
.service-content h3{
    font-size:15px;
    line-height: 1.6;
    color:#102542;
    margin-bottom:10px;
}

/* الوصف */
.service-content p{
    font-size:10px;
    line-height:1.6;
    color:#666;

 
}


/* الأيقونة */
.service-icon{
    padding:0 0 25px;
    width: 35PX;
}

.service-icon i{
    font-size:16px;
    color:#1d5aa6;
    opacity: .9;
}
.features-bar{
 background:linear-gradient(135deg,#e8f3ff,#d9eaff);
    border-radius:20px;
    padding:8px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}

.feature-item{
    background:#fff;
    border-radius:16px;
    min-height:55px;

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

    padding:5px;
}

.feature-item i{
    font-size:14px;
    color:#3baee7;
    margin-bottom:4px;
}

.feature-item span{
    font-size:8px;
    line-height:1.4;
    color:#102542;
    font-weight:600;
}
/* ================================================== CONTACT MODAL =============================================== */
/* نافذة التواصل */

.contact-box{
    width:95%;
    max-height:90vh;
        max-width:380px;
    overflow-y:auto;
    padding:20px;


    background:#fff;
    border-radius:35px;


    position:relative;

    box-shadow:
    0 20px 50px rgba(0,0,0,.15);

    scroll-behavior: smooth;
}

.contact-box h2{
    font-size:20px;
    color:#102542;
    margin-bottom:20px;
    text-align:center;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:18px;

    height:75px;

    min-height: 65px;

    padding:15px 18px;

    background:#fff;

    border-radius:25px;

    margin-bottom:12px;

    text-decoration:none;

    color:#102542;

    font-size:17px;
    font-weight:700;

    border:1px solid #edf1f7;

    box-shadow:
    0 5px 20px rgba(0,0,0,.05);

    transition:.3s;
}

.contact-item:hover{
    transform:translateY(-4px);
}

.contact-item img{
    width:36px;
    height:36px;
    object-fit:contain;
}

.contact-close{
    position:absolute;
    top:15px;
    right:15px;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#fff;

    color:#102542;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:
    0 8px 25px rgba(0,0,0,.12);

    transition:.3s;
}

.contact-close:hover{
    background:#3baee7;
    color:#fff;
    transform:rotate(90deg);
}

.whatsapp:hover{
    background:#25D366;
    color:white;
}

.facebook:hover{
    background:#1877F2;
    color:white;
}

.messenger:hover{
    background:#00B2FF;
    color:white;
}

.instagram:hover{
    background:linear-gradient(135deg,#833AB4,#E1306C,#FCAF45);
    color:white;
}

.tiktok:hover{
    background:#111;
    color:white;
}

.youtube:hover{
    background:#FF0000;
    color:white;
}


/* ============================================================== MODAL ACCESSORIES ==================================================== */
/* ACCESSORIES MOBILE FIX */

  .acc-section{
    padding: 25px 16px;
  }

  .acc-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .acc-card{
    width: 100%;
    min-height: 275px;
    padding: 12px 10px;
    border-radius: 22px;
    position: relative;
  }

/* الصورة */
  .acc-card > img{
    width: 100%;
    height: 145px;
    object-fit: contain;
    margin-bottom: 8px;
  }

.acc-card img{
  max-width: 100%;
  display: block;
}

  .acc-heart{
    width: 38px;
    height: 38px;
    font-size: 18px;
    top: 14px;
    left: 14px;
  }

/* اسم المنتج */
  .acc-card h3{
    font-size: 14px;
    line-height: 1.2;
    margin: 4px 0 5px;
    min-height: auto;
  }

/* اسم الشركة */
  .acc-card p{
    font-size: 13px;
    margin: 0 0 2PX;
    line-height: 1.2;
  }

  /* النجوم والعدد */
  .acc-rate{
    font-size: 13px;
    white-space: nowrap;
      margin: 0 ;
    line-height: 1.2;
        margin-top: 8px;
  }

  .acc-rate span{
    font-size: 14px;
  }

  
/* السعر */
  .acc-bottom{
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .acc-bottom strong{
    font-size: 18px;
    white-space: nowrap;
  }

  .acc-open-btn{
    width: 45px;
    height: 45px;
    border-radius: 16px;
    font-size: 22px;
    flex-shrink: 0;
  }


  .acc-new-modal{
    padding:0;
    background:#fff;
    overflow:hidden;
  }
  
  .acc-new-content{
    width:100vw;
    height:100vh;
    display:block !important;
    padding:35px 16px 25px !important;
    overflow-y:auto !important;
    background:#fff;
  }

  .acc-new-close{
    position: fixed;
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    font-size:15px;
    background:#fff;
  }

  .acc-new-gallery{
    width:100%;
    flex:0 0 auto;
    display:block !important;
    margin-bottom:25px !important;
    margin-top: 12px !important;
  }

 .acc-main-box{
    height:300px !important;
    min-height:300px !important;
    margin-bottom:18px !important;
        padding-top:10px !important;
  }

  .acc-new-main-img{
    width:100%;
    height:100%;
    padding:14px;
    border-radius:26px;
    object-fit:contain;
  }

  .acc-arrow{
    width:30px;
    height:30px;
    font-size:15px;
  }

  .acc-prev{ left:10px; }
  .acc-next{ right:10px; }

 .acc-new-thumbs-wrap{
    position:relative !important;
    z-index:3 !important;
    height:78px !important;
    margin:0 0 12px !important;
    display:grid !important;
    grid-template-columns:40px 1fr 40px !important;
  }

  .thumb-arrow{
    width:25px;
    height:25px;
    flex:unset;
    border-radius:12px;
    box-shadow:none;
    background:#f4f7fb;
    font-size: 11px;
  }

  .acc-new-thumbs{
    height:78px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }

  .acc-new-thumbs img{
      width:62px !important;
    height:62px !important;
    flex:0 0 62px !important;
    border-radius:14px;
    padding:6px;
    background:#fbf7f4;
  }
  
  .acc-dots{
     margin:0 0 25px !important;
    gap:7px;
  }

  .acc-dots span{
    width:7px;
    height:7px;
  }

  .acc-new-info{
    width:100%;
    text-align:center;
    direction:rtl;
    overflow:visible;
        display:block !important;
    position:relative !important;
    z-index:1 !important;
    clear:both !important;
    padding-top:0 !important;
    margin-top:0 !important;
  }

  .acc-new-info h2{
    font-size:20px;
    line-height:1.2;
    margin-top:0 !important;
  }

  .acc-new-info p{
    font-size:12px;
    margin:0 0 12px;
  }

  #accNewPrice{
    text-align:center;
    font-size:30px;
    margin-bottom:14px;
  }

  .acc-new-desc{
    font-size:15px;
    line-height:1.75;
    text-align:center;
    margin-bottom:18px;
  }

  .acc-new-features{
    gap:10px;
    margin-bottom:22px;
  }

  .acc-new-features li{
    padding:13px 14px;
    border-radius:16px;
    font-size:12px;
    line-height:1.45;
  }

.acc-new-whatsapp{
  position:static !important;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:56px;
  border-radius:18px;
  font-size:18px;
  z-index:auto;
  margin: 20 0 40px;
}









/* ===================================================== ===============================================================
GENERAL MOBILE FIXES 
=============================================================================================================== */

body{
    overflow-x:hidden;
}

img{
    max-width:100%;
}

.section-header h2{
    font-size:22px;
}

.section-header button{
    font-size:14px;
    padding:10px 16px;
}

.category-item{
    padding:14px 18px;
    font-size:14px;
}

.category-arrow{
    width:42px;
    height:42px;
}

.logo-name{
    font-size:22px;
}



html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

*{
    max-width:100%;
}

#categoriesSection {
    scroll-margin-top: 120px;
}

}