body {

             background-color: #f8f9fa;
             margin: 0;
             padding: 0;
             padding-bottom: 80px;
             /* = footer height */
         }

         header {
             background-color: #343a40;
             padding: 20px 0;
         }

         header h1 {
             color: white;
             text-align: center;
         }

         nav {
             background-color: #33669900;
             border-bottom: 1px solid lightgray;
         }

         nav .nav-link {
             color: #336699 !important;
         }

         .container {
             margin-top: 30px;
         }

         footer {
             background-color: #336699 ;
             color: white;
             padding: 10px;
             text-align: center;
             position: fixed;
             width: 100%;
             bottom: 0;
             margin-top: 20px;
             direction: rtl;
             
         }

         .navbar-nav {
             height: 100%;
             padding-right: 0;
             ;
         }

         .navbar-nav .nav-link {
             height: 100%;
             display: flex;
             align-items: center;
             /* vertically center links */
         }

         nav .nav-link {
             color: #336699 !important;
             padding: 5px 10px;
             border-radius: 2px;
             transition: background-color 0.3s, color 0.3s;
         }

         nav .nav-link:hover {
             background-color: #336699;
             /* darker background */
             color: white !important;
             /* text turns white */
         }

         .navbar-dark .navbar-toggler-icon {
             background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23336699' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
         }


         #navbarNav {
             margin-top: 10px;
             direction: rtl;
             background-color: #f4831d12;
             padding-top: 7px;
             padding-bottom: 10px;
         }

         .nav-item {
             font-size: 22px !important;
         }

         footer p {
             margin-bottom: 0;
         }

         .custom-toggler:focus,
         .custom-toggler:active,
         .custom-toggler:focus-visible {
             box-shadow: 0 0 0 0.25rem rgb(247 210 163);
         }

         /* Custom Hamburger Button */
         .custom-toggler .navbar-toggler-icon {
             display: none;
             /* Hide default hamburger */
         }

         .toggler-text {
             color: #336699;
             font-weight: bold;
             font-size: 18px;
         }


         .logo {
             max-width: 50%;
             margin: 0 auto 20px;
             display: block;
         }

         .contact-card {
             display: flex;
             align-items: center;
             gap: 15px;
             text-decoration: none;
             color: inherit;
             height: 100%;
         }

         .icon {
             font-size: 2.5rem;
             color: #336699;
             min-width: 50px;
         }

         .contact-card:hover {
             background-color: #f8f9fa;
             border-radius: 10px;
             transition: 0.3s;
         }

         .filter-btn.active,
         .filter-btn:hover {
             background-color: #336699;

         }

         .btn-primary {
             background-color: #336699;

         }

         .bg-primary {
             background-color: #336699 !important;
         }

         .navbar-nav .nav-link.active {
             background-color: #336699;
             color: white !important;
         }

         .card-img-top {
             height: 200px;
             /* same box height for all images */
             width: 100%;
             object-fit: contain;
             /* keep full image inside, no cut */
             background: #f8f9fa;
             /* optional: adds a light background if image is smaller */
             padding: 5px;
             /* optional: small padding so contained images look neat */
         }
         .bi-whatsapp{
            color: #25d366 !important;
         }

         .btn-warning{
                background-color: #ff9901 !important;
                border-color: #ff9901 !important;
                color:white !important;
         }
         h1.text-muted {
            /* your styles */
            
            font-size: 12px;
        }
         .btn-primary:hover {
             background-color: #ff9901 !important;
             /* ✅ custom hover color (green example) */
             border-color: #ff9901 !important;
         }


        .btn_new:hover {
            background-color: #336699 !important;   /* اللون عند التحويم */
            color: #fff;                  /* يمكنك تغييره إذا أحببت */
            box-shadow: 0 4px 8px rgba(51, 102, 153, 0.5) !important; /* ظل متناسق مع #336699 */
        }

         /* Customizations for mobile view */
         @media (max-width: 768px) {
             header h1 {
                 font-size: 24px;
             }

             .mx-2 {
                 margin-top: 0.9rem !important;
             }
         }

         @media (min-width: 992px) {
             .navbar-expand-lg .navbar-collapse {
                 background-color: unset !important;
             }

             .mx-2 {
                 margin-top: 0.9rem !important;
             }
         }