@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&display=swap');
* {  font-family: "National Park", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;;box-sizing: border-box;margin: 0;padding: 0}
header {background-color:#234176;padding: 20px;display: flex;justify-content: space-between;align-items: center;position: sticky;top: 0;z-index: 999; height: 80px;}
.Header {background-color: #ff9900;padding: 20px;display: flex;justify-content: space-between;align-items: center;position: sticky;top: 0;z-index: 999; height: 80px;}
.center-button  {background-color: #ffffff;color: rgb(31, 27, 27);text-decoration: none;padding:9px;border-radius: 5px;font-size: 20px;}
.center-button a {text-decoration: none;color: rgb(0, 0, 0);padding:9px;border-radius: 5px;font-size: 20px;font-weight: bold;}
.menu-btn {background-color: #0077b6;color: white;border: none;padding: 8px 14px;font-size: 27px;border-radius: 5px;cursor: pointer;}
.logo img {width: 100%;height: 69px;}
.popip-menu {position:absolute;top: 60px;right: 20px;background-color: rgb(255, 0, 0);box-shadow: 0 4px 8px rgba(0,0,0,0.2);border-radius: 8px;display: none;flex-direction: column;width: 200px;}
.popip-menu a {display:flex;align-items: center;padding: 10px;border-bottom: 1px solid #eee;text-decoration: none;font-size: 20px;font-weight: bold;color: #ffffff;transition: background-color 0.3s;}
.popip-menu a img {width:24px;height:24px;margin-right:10px;}
.popip-menu a:hover {background-color: #f1f1f1;}
/*.popap {position: absolute;background-color: rgb(34, 109, 189);box-shadow: 0 4px 8px rgba(0,0,0,0.2);border-radius: 8px;display: none;flex-direction: column;width: 150px;top:60px;left: 50%;transform: translate(-50%, 0%);width: 150px;text-align: center;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 8px;}
.popap a {display:flex;align-items: center;padding: 7px;font-size: large;border-bottom: 1px solid #eee;text-decoration: none;color: #ffffff;transition: background-color 0.3s;}
.popap a img {width:24px;height:24px;margin-right:10px;}
.popap a:hover {background-color: #f1f1f1;}*/
.hhh{background-color: #12e4e8ea;padding:25px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 30px;}
h1 {text-align: center;color:green;background-color: gainsboro;}
.product-card {max-width: 380px;margin: 0px auto;border: 1px solid #d30a0a;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.media-slider {position: relative;width: 100%;height: 250px;overflow: hidden;}
.slide {display: none;width: 100%;height: 100%;}
.slide.active {display: block;}
.slide img {width: 100%;height: 100%;object-fit: cover;}
.social-links {display: flex;justify-content: center;gap: 7px;padding: 5px;background-color: #ffffff;text-decoration: none;}
.social-icon {color: #fff;font-size: 1em;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;text-decoration: none;transition: transform 0.3s;}
.social-icon.youtube { background-color: #e74c3c; }
.social-icon.instagram { background-color: #e84393; }
.social-icon.facebook { background-color: #0984e3; }
.social-icon.tiktok { background-color: #000000; }
.social-icon.github { background-color: #333333; }
.social-icon.x { background-color: #1da1f2; }
.social-icon:hover {transform: scale(1.2);}
@media (max-width: 768px) {.product-card {max-width: 80%;}.media-slider {height: 200px;}}
.slideshow-container {position: relative;width: 100%;height: 370px;overflow: hidden;}
.slid {display: none;width: 100%;height: 100%;transition: opacity 1.5s ease-in-out;object-fit: cover;opacity: 0;}
.slid.active {display: block;opacity: 1;z-index: 1;}
.slid img {width: 100%;height: 100%;object-fit: cover;}
.aboutus {text-decoration: none;cursor: pointer;color: white;background-color:rgb(13, 142, 241);font-size: 1.45em;font-weight:1050em;display: inline-block;padding:0.5em 1.5em;letter-spacing:normal;margin-bottom: 15px;border-radius: 17.7px;transition: transform 0.5s ease-in-out} .aboutus:hover  {transform: scale(1.1);color: rgb(241, 189, 13);}
.aboutis {text-decoration: none;cursor: pointer;color: rgb(27, 22, 22);background-color:rgb(9, 235, 5);font-size: 1.45em;font-weight:bold;display: inline-block;padding:1em 2em;letter-spacing:normal;margin-bottom: 23px;border-radius: 17.7px;transition: transform 0.5s ease-in-out} .aboutus:hover  {transform: scale(1.1);color: rgb(241, 189, 13);}
.botton {display: flex;justify-content: center;background-color:#ffffffea;  align-items: center;height: 80px; }
.onwan {display: flex;justify-content: center; background-color: #00fd2a;padding: 10px;margin: 10px;}
.ourproducts {color:#00fd2a;font-size: 20px;background-color:#000000;padding: 17px;padding-left: 30px;padding-right: 30px;}
.product-container {display: flex;flex-wrap: wrap;background-color: rgba(186, 184, 184, 0.594);gap: 15px;justify-content: center;margin-top: 30px;padding: 7px;}
.prodoct-container {display: flex;flex-wrap: wrap;gap: 15px;justify-content: center;padding: 10px;;background-color:#ffffff;}
body {margin: 0; font-family: Arial, sans-serif; background-color: #f0f8ff;}
.products-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 15px; max-width: 1200px; margin: 0 auto;}
        .product {width: 140px; height:310px; padding: 3px;padding-bottom: 3px; background-color: #ffffff; border-radius: 5px; box-shadow: 0 5px 9px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease; border: 1.5px solid green; margin: 0 auto;}
        .product:hover {transform: scale(1.05);}*
        .product-media img {width: 100%; height: 140px; object-fit: cover;}
        .product-info {padding: 10px; text-align: center;}
        .product-description {font-size: 14px; color: #555; margin-bottom: 10px; height: 40px; overflow: hidden;}
        .product-price {font-size: 16px; font-weight: bold; color: #2c3e50; margin-bottom: 5px;}
        .view-details-btn {background-color: #3498db;margin-bottom: 40px; color: white; border: none;text-decoration: none; padding: 7px 15px; border-radius: 5px; cursor: pointer; font-size: 13px; transition: background-color 0.3s; width: 100%;}
        .view-details-btn:hover {background-color: #2980b9;}
.product-details {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f0f8ff; z-index: 1000; overflow-y: auto;}
.gallery {padding:7px;padding-bottom: 50px;padding-top: 130px;margin-top: 20px;background-color: #05b8ff;}
.producti {display:flex; flex-wrap:wrap; gap:25px; max-width:1100px; margin:auto; background:#fff; border-radius:12px; padding:11px; box-shadow:0 0 10px rgba(0,0,0,0.05); justify-content: center;}
.images {flex:1; min-width:260px;}
.main {width:100%; height:320px; object-fit:cover; border-radius:10px;}
.thumbs {display:flex; gap:10px; margin-top:10px; justify-content:center; flex-wrap: wrap;}
.thumbs img {width:70px; height:70px; object-fit:cover; border-radius:6px; border:2px solid transparent; cursor:pointer;}
.thumbs img:hover {border-color:#007bff;}
        .info {flex:1; min-width:260px; display:flex; flex-direction:column; gap:15px; text-align: center;}
        .info h2 {font-size:24px; margin:0;}
        .price {font-size:30px; color:#28a745; font-weight:bolder;}
        .desc {font-size:19px; line-height:1.8;font-weight: bold; color:#555;}
        .buttons {display:flex; gap:15px; flex-wrap:wrap; justify-content: center;}
        .btn {padding:10px 18px; border:none; border-radius:8px; color:#fff; text-decoration:none; font-size:19px;font-weight: bolder; cursor:pointer;}
        .paypal {background:#58bcff;}
        .cih {background:#e85d04;}
        .share {margin-top:10px; font-size:25px; font-weight: bold;}
        .share img {vertical-align:middle; margin-left:8px;}
        .popupi {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; justify-content:center; align-items:center; z-index:9999; flex-wrap:wrap}
        .popupi-content {background:#fff; padding:25px; border-radius:12px; width:90%; max-width:400px; box-shadow:0 0 20px rgba(0,0,0,0.2); position:relative; text-align:right; direction:rtl;}
        .close-btn {position:absolute; top:15px; left:15px; background:#f44336; color:#fff; border:none; padding:5px 12px; border-radius:6px; cursor:pointer; font-size:14px;}
        .popupi-content h3 {margin-top:0; margin-bottom:20px;}
        .copy-row {display:flex; justify-content:space-between; align-items:center; margin:10px 0; gap:10px; flex-wrap:wrap;}
        .copy-row span {flex:1;}
        .copy-row button {background:#007bff; color:#fff; border:none; padding:5px 10px; border-radius:6px; cursor:pointer; font-size:13px;}
        .copy-row button:hover {background:#0056b3;}
        .whatsapp-text {margin:20px 0 10px; font-weight:bold;}
        .whatsapp-btn {display:inline-block; background:#25d366; color:#fff; padding:10px 18px; border-radius:10px; text-decoration:none; font-size:16px;}
        .whatsapp-btn:hover {background:#1ebc5b;}
        .hea {position: fixed; top: 0; width: 100%; background-color: #0056b3; z-index: 1000; padding: 1vh 4vw; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); height: 120px; transition: height 0.3s ease;}
        .btnclose {background-color: red; padding: 15px; margin-right:30px; font-weight: bold; font-size: large; color: white; border: none; border-radius: 5px; cursor: pointer;}
        .headermaqal-content {display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; height: 100%;}
        .slidere {overflow: hidden; width: 100%; max-width: 800px; height: 100%; border-radius: 12px;}
        .image-track {display: flex; transition: transform 0.5s ease; align-items: center; height: 100%;}
        .slider-img {height: 110px; width: auto; margin-right: 10px; border-radius: 10px; object-fit: cover; transition: transform 0.3s;}
        .slider-img:hover {transform: scale(1.08);}
        .nav-btn {background: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 22px; cursor: pointer; align-self: center;}
        @media (max-width: 600px) {.hea {height: 140px !important;}.slider-img {height: 120px !important; margin-right: 10px;}.nav-btn {width: 44px; height: 44px; font-size: 22px}}
        @media (max-width: 768px) {.producti {flex-direction:column;}.main {height:250px;}.thumbs img {width:60px; height:60px;}}
        @media (max-width: 500px) {.popup-content {padding:10px;}.copy-row {flex-direction:row; flex-wrap:wrap;}}
.media-gallery {display: flex;flex-wrap: wrap;gap: 19px;justify-content: center;padding: 15px 19px;background:rgba(255, 255, 255, 0.781);;}
.product {width: 210px;aspect-ratio: 9 / 16;background: #eee;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 10px rgba(0,0,0,0.1);transition: transform 0.3s;}
.product:hover {transform: scale(1.03);}
.product img,
.product video {width: 100%;height: 100%;object-fit: cover;display: block;border: none;}
@media (max-width: 768px) {.product {width: 30%; /* كرتين في الصف */}}
@media (max-width: 480px) {.product {width: 45%; /* كرتين أيضًا */aspect-ratio: 9 / 16;}.product img,.product video {height: 100%;}}
footer {display: flex;background-color: #00bfff;justify-content: center;flex-direction: column;margin-top: 20px;padding:10px;align-items: center;z-index: 999;height: 50px;text-align: center;p {text-align: center;}}
.side-menu {position: fixed;z-index: 999;top: 0;right: -100vw;width: 100vw;height: 100vh;background-color: #231010;transition: right 0.5s ease;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;padding-top: 40px;overflow-y:scroll;overflow-x:hidden;justify-content: center;justify-content: space-between; body{overflow: hidden;}}
.side-menu.active {right: 0;}
.close-bton {position: absolute;top: 1px;margin-bottom: 30px;font-size: 49px;font-weight: bold;background:rgba(92, 86, 86, 0.874);border: none;color: #ff0000;position:absolute; border:none; padding:0px 29px;border-radius: 7px;}
.menu-item {display: flex;align-items: center;width: 100%;max-width: 300px;padding: 10px;margin: 29px; border-radius: 12px;background-color: #ffffff;text-decoration: none;color: #333;font-size: 15px;font-weight: bold;transition: background-color 0.3s ease; gap:17px}
.menu-item:hover {background-color: #e0e0e0;}
.menu-item img {width: 70px;height: 40px;margin-left: 15px;border-radius: 6px;object-fit: cover;}