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

        body {
            font-family: 'Georgia', 'Times New Roman', serif;
            background-color: rgb(195, 201, 186);;
            color: #2c2c2c;
            line-height: 1.6;
        }

        .container {
            max-width: 98%;
            margin: 0 auto;
            padding: 20px;
        }

        /* Header */
        header {
            text-align: center;
            padding:0px 0px 0px 0px;
            background-color: rgb(238, 241, 234);
        }

        header h1 {
            font-size: 2.5em;
            font-weight: 400;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        header h2 {
            font-size: 2em;
            font-weight: 400;
            letter-spacing: 1px;
        }

        /* Hero Images */
        .hero-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0px;
            margin: 0px 0;
             margin-top: 20px;
        }

        .hero-images img {
           width: 100%;
            height: 100%;
            object-fit: cover;
           
            border-radius: 0px;
            
        }

        .hero-image-placeholder {
            width: 500px;
            height: 562.94px;
            background: linear-gradient(135deg, #8b7355 0%, #6b5844 100%);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.9em;
            text-align: center;
            padding: 0px;
        }

        .hero-image-placeholder .msh-hero{

        }
        .hero-image-placeholder .msn-hero{
            
        }

        .hero-image-placeholder .mgsn-hero{
            
        }

        /* Sections */
      
        section {
            margin: 30px 0;
        }

       


        section h2 {
            text-align: center;
            font-size: 2.2em;
            font-weight: 400;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }

        /* Upcoming Events */
        .events-container {
            display: grid;
            grid-template-columns: 40%  auto;
            gap: 30px;
            align-items: stretch;
            min-height: 400px;
            margin-top: 40px;;
        }

        .event-details {
            background-color: rgb(238, 241, 234);
            padding: 30px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .event-details h3 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 400;
            text-align: center;;
        }
        .event-details.urs-event h3 {
            font-size: 3.2em;
            margin-bottom: 10px;
            font-weight: 400;
            text-align: center;;
        }
         .event-details.urs-event p {
            margin-bottom: 15px;
            font-size: 1.9em;
        }

        .event-details p {
            margin-bottom: 15px;
            font-size: 1.7em;
        }

        .event-flyer {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 0px;
            color: white;
            text-align: center;
        }

        .event-flyer h3 {
            color: #d4af37;
            font-size: 1.5em;
            margin-bottom: 5px;
            font-weight: 400;
            letter-spacing: 2px;
        }

        .event-flyer h4 {
            color: #f4e4a6;
            font-size: 1.8em;
            margin-bottom: 20px;
            font-weight: 400;
            font-style: italic;
        }

        .event-flyer-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 5px;
        }

        .event-time {
            margin: 15px 0;
            padding: 10px;
            background-color: rgba(255,255,255,0.1);
            border-radius: 3px;
        }

        .event-time .time {
            font-size: 1.3em;
            color: #f4e4a6;
            display: block;
        }

        .event-time .date {
            font-size: 0.85em;
            margin-top: 3px;
        }

        .event-time .location {
            font-size: 0.8em;
            margin-top: 5px;
            line-height: 1.4;
        }

        .rsvp-note {
            margin-top: 20px;
            font-size: 0.85em;
        }

        .btn {
            display: inline-block;
            padding: 12px 35px;
            background-color: #3a5f5f;
            color: white;
            text-decoration: none;
            text-align: center;
            border-radius: 25px;
            margin-top: 20px;
            font-size: 0.95em;
            transition: background-color 0.3s;
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #2d4a4a;
        }

        /* Weekly Dhikr */
        .dhikr-content {
            text-align: center;
            padding: 30px;
            background-color: rgb(238, 241, 234);
            border-radius: 5px;
        }

        .dhikr-content h3 {
            font-size: 1.2em;
            margin: 20px 0 10px;
            font-weight: 600;
            letter-spacing: 2px;
        }

        .dhikr-content p {
            margin: 8px 0;
            font-size: 0.95em;
        }

        .dhikr-content .location-note {
            margin-top: 25px;
            font-size: 0.9em;
        }

        .dhikr-content .location-note strong {
            display: block;
            margin-bottom: 5px;
        }

        .dhikr-content a {
            color: #3a5f5f;
            text-decoration: underline;
        }

        .dhikr-content .potluck {
            margin-top: 25px;
            font-size: 0.9em;
        }

        /* Resources */
        .resources-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .resource-card {
            background-color: rgb(238, 241, 234);
            padding: 30px;
            border-radius: 5px;
            text-align: center;
        }

        .resource-card a.link {
            text-decoration: underline;
            color: #2c2c2c;
        }

        .resource-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background-color: #3a5f5f;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2em;
        }

        .resource-card h3 {
            font-size: 1.2em;
            margin-bottom: 10px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .resource-card p {
            font-size: 0.9em;
            line-height: 1.6;
        }

        /* Donate Section */
        .donate-content {
            text-align: center;
            padding: 40px 30px;
            background-color: rgb(238, 241, 234);
            border-radius: 5px;
        }

        .donate-content .arabic {
            font-size: 1.1em;
            margin: 20px 0;
            font-weight: 600;
        }

        .donate-content .transliteration {
            font-style: italic;
            margin: 15px 0;
            font-size: 0.95em;
        }

        .donate-content .translation {
            margin: 15px 0;
            font-size: 0.95em;
        }

        .donate-content .message {
            margin: 25px 0;
            font-size: 0.95em;
            line-height: 1.7;
        }

        /* Connect Section */
        .connect-content {
            text-align: center;
            padding: 30px;
        }

        .connect-content p {
            font-size: 0.9em;
            color: #666;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-image-placeholder{
            width: 100%;
            height: auto;
            }

            .hero-images{
                margin-top: 20px;
            }
            header h1 {
                font-size: 1.8em;
            }

            header h2 {
                font-size: 1.5em;
            }

            .hero-images {
                grid-template-columns: 1fr;
            }

            .events-container {
                grid-template-columns: 1fr;
                min-height: 600px;
                align-items: stretch;
            }

            .resources-container {
                grid-template-columns: 1fr;
            }

            .event-details {
                overflow-y: auto;
            }

            .event-details h3 {
                font-size: 1.5em;
                margin-bottom: 20px;
            }

            .event-details p {
                font-size: 1em;
            }

             .event-details.urs-event h3 {
                font-size: 1.7em;
                
            }
            .event-details.urs-event p {
               
                font-size: 1.2em;
            }


            .event-flyer {
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .event-flyer-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            section h2 {
                font-size: 1.8em;
            }
        }

        @media (min-width: 769px) and (max-width: 1370px) {
            .events-container {
                grid-template-columns: 40% auto;
                height: 500px;
                align-items: stretch;
            }

            .resources-container {
                grid-template-columns: 1fr;
            }

            .event-details {
                overflow-y: auto;
            }

            .event-flyer {
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .event-flyer-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

          @media (min-width: 1371px) and (max-width: 1700px)  {
             #dhikr h3{
                font-size: 3.0em;
              }
              #dhikr p{
                font-size: 2.5em;
              }
               #dhikr h3{
                font-size: 3.0em;
            }
              .dhikr-content a{
                font-size: 2.5em;
              }

              .location-note strong{
                font-size: 2.5em;
              }

              .donate-content p{
                font-size: 2.5em !important;
              }

              .resource-card h3{
                font-size: 2.5em;
              }

              .resource-card p{
                font-size: 2.5em;
              }
              
              section h2 {
                font-size: 3.5em;
              }

              .event-details h3{
                font-size: 1.9em;
              }
               .event-details p{
                font-size: 1.9em;
              }

              .btn{
                font-size: 2.5em;
               }

               .connect-content p{
                font-size: 2.5em;
               }
          }