/**********About Road safety basic page********************************/




/* ===============================
   Highlighted Content Block
================================ */

.highlighted-content-block {
    margin: 20px 0;
    padding: 30px 25px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9e6e6;
    border-left: 6px solid #003366;
    box-shadow: rgba(0, 0, 0, 0.12) 0 6px 18px;
    font-family: var(--font-family-Poppins);
}

/* ===============================
   Layout
================================ */

.content-wrapper {
    display: flex;
    gap: 2vw;
    align-items: center;
    flex-wrap: wrap;
}

.content-left {
    flex: 1 1 45%;
    min-width: 280px;
}

.content-left h3 {
    font-size: 22px;
    color: #003366;
    margin-bottom: 15px;
}

.content-list {
    list-style: none;
    padding-left: 0;
}

.content-list li {
    font-size: var(--font-content-size-18);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ===============================
   road-safety-slider
================================ */

.road-safety-road-safety-slider-right {
    flex: 1 1 50%;
    min-width: 300px;
    max-width: 35vw;
    position: relative;
    margin: 0 auto;
}

.road-safety-slider {
    overflow: hidden;
    border-radius: 8px;
}

.road-safety-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.road-safety-slides img {
    width: 100%;
    flex-shrink: 0;
    border-radius: 8px;
    max-height: 20vw ;
}

/* ===============================
   road-safety-slider Buttons
================================ */

.road-safety-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    z-index: 2;
}

.road-safety-slider-btn.prev {
    left: 10px;
}

.road-safety-slider-btn.next {
    right: 10px;
}



.content-wrapper.reverse{

   flex-direction: row-reverse;


}



 .highlighted-content-block p{

     font-size: 1.2rem;
    text-align: center;

  } 

  
.traffic-park-title{

  text-align: center;
}


   

.road-safety-table tbody tr td{
 font-size: 18px;
  }



.road-safety-table thead tr th{
  text-align :center;
  background:#000080;
      font-size: 20px;
          
    padding-bottom: 27px;
  }







/* Force horizontal card layout */
.road-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 20px;

    padding: 24px;
    border-radius: 18px;
    border: 1px solid #dcdcdc;
    background: #ffffff;

    transition: all 0.3s ease;
}

.road-card:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

/* LEFT image box */
.road-card .icon {
    flex: 0 0 38%;


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

    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Image size control */
.road-card .icon img {
    max-width: 90%;
    height: auto;
}

/* RIGHT content */
.road-card .content {
    flex: 1;
}

.road-card .content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.road-card .content p {
    font-size: 15px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}




/*************************flex slider on road safety page***********************/

/* FlexSlider container */
.flexslider-road-saftey {
  position: relative;
}

.flexslider-road-saftey{

  margin-bottom: 2vw;
}

/* Arrows */
.flexslider-road-saftey .flex-direction-nav a {
  opacity: 1 !important;
  display: block !important;
  z-index: 10;
}

.flexslider-road-saftey .flex-prev {
  left: 10px !important;
}

.flexslider-road-saftey .flex-next {
  right: 10px !important;
}

/* Bullets (dots) */
.flexslider-road-saftey .flex-control-nav {
  bottom: -35px;
}

.flexslider-road-saftey .flex-control-nav li a {
  background: #999;
}

.flexslider-road-saftey .flex-control-nav li a.flex-active {
  background: #000;
}


.flexslider-road-saftey .slides li{

  display: flex !important;
    justify-content: center;
}

--------------------------------------------------------------------------------------------------------



/****************** About roas safety page slides********************************/



(function (Drupal, once, $) {
  Drupal.behaviors.aboutRoadSafetyPage = {
    attach: function (context) {

      $(once('custom-slider', '.road-safety-slider', context)).each(function () {

        const $slider = $(this);
        const $slides = $slider.find('.road-safety-slides');
        const $images = $slides.find('img');

        const $container = $slider.closest('.road-safety-road-safety-slider-right');
        const $prevBtn = $container.find('.road-safety-slider-btn.prev');
        const $nextBtn = $container.find('.road-safety-slider-btn.next');

        if (!$images.length) return;

        let index = 0;
        const totalSlides = $images.length;
        let autoSlide;

        function showSlide(i) {
          $slides.css('transform', 'translateX(-' + (i * 100) + '%)');
        }

        function startAutoSlide() {
          autoSlide = setInterval(function () {
            index = (index + 1) % totalSlides;
            showSlide(index);
          }, 3000);
        }

        function resetAutoSlide() {
          clearInterval(autoSlide);
          startAutoSlide();
        }

        $nextBtn.on('click', function () {
          index = (index + 1) % totalSlides;
          showSlide(index);
          resetAutoSlide();
        });

        $prevBtn.on('click', function () {
          index = (index - 1 + totalSlides) % totalSlides;
          showSlide(index);
          resetAutoSlide();
        });

        startAutoSlide();

      });
    }
  };
})(Drupal, once, jQuery);


/***************flexslider on road saftey page***********************/



(function ($, Drupal) {
  Drupal.behaviors.flexsliderInit = {
    attach: function (context) {
      $('.flexslider-road-saftey', context).flexslider({
       
    



            animation: "slide",
          slideshow: true,
          slideshowSpeed: 4000,
          animationSpeed: 600,

          directionNav: true,   
          controlNav: true,     

          pauseOnHover: true,
          keyboard: true,
          touch: true
      });
    }
  };
})(jQuery, Drupal);


------------------------------------------------------------------------------------------------


<div class="highlighted-content-block container">
    <!-- 
                        
                    
                
            
        
    <h2>
                                                About the Road Safety Cell
                                            
                                    
                            
                    
            
    </h2>
                         -->
    <h3 class="traffic-park-title">
        TRAFFIC TRAINING PARKS
    </h3>
    <p class="traffic-park-description">
        Since 1972, four Traffic Training Parks in Delhi have been imparting road safety education, especially to students.
    </p>
    <table class="table table-bordered table-responsive table-striped table-condensed middle-align road-safety-table">
        <thead class="table-header">
            <tr>
                <th scope="col">
                    S. No.
                </th>
                <th scope="col">
                    Traffic Training Parks
                </th>
                <th scope="col">
                    Address
                </th>
                <th scope="col">
                    Get Direction
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    1.
                </td>
                <td>
                    Punjabi Bagh - Four-wheeler simulation
                </td>
                <td>
                    West Punjabi Bagh, Punjabi Bagh, Delhi, 110026
                </td>
                <td class="center-position">
                    <a href="https://maps.app.goo.gl/Aa1bQB2u5xMS4WVh6" target="_blank">Take me there</a>
                </td>
            </tr>
            <tr>
                <td>
                    2.
                </td>
                <td>
                    Roshanara Bagh - Safe cycling and pedestrian drills
                </td>
                <td>
                    Roshanara Rd, Roshanara Garden, Shakti Nagar, Delhi, 110007
                </td>
                <td class="center-position">
                    <a href="https://maps.app.goo.gl/o7CkmNwpezpKVVhFA" target="_blank">Take me there</a>
                </td>
            </tr>
            <tr>
                <td>
                    3.
                </td>
                <td>
                    B.K.S. Marg - Two-wheeler riding practice
                </td>
                <td>
                    Baba Kharak Singh Rd, near Gurudwara Bangla Sahib, Hanuman Road Area, Connaught Place, New Delhi, Delhi 110001
                </td>
                <td class="center-position">
                    <a href="https://maps.app.goo.gl/FzFW9HSURLPRibWE9" target="_blank">Take me there</a>
                </td>
            </tr>
            <tr>
                <td>
                    4.
                </td>
                <td>
                    National Bal Bhavan
                </td>
                <td>
                    Bal Bhavan, Kotla Marg, Mcd Market, Mata Sundari Railway Colony, New Delhi, Delhi 110002
                </td>
                <td class="center-position">
                    <a href="https://maps.app.goo.gl/kLpM6pjM9ic9NCjt5" target="_blank">Take me there</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- ====== SECTION 1 ====== -->
<div class="highlighted-content-block container">
    <div class="content-wrapper">
        <div class="road-safety-road-safety-slider-right">
            <div class="road-safety-slider">
                <div class="road-safety-slides">
                    <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-01.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-02.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-03.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-04.jpeg" alt="" width="1200" height="800">
                </div>
            </div>
            <p>
                <button class="road-safety-slider-btn prev">❮</button> <button class="road-safety-slider-btn next">❯</button>
            </p>
        </div>
        <div class="content-left">
            <h3>
                TRAFFIC TRAINING PARK PUNJABI BAGH
            </h3>
            <ul class="content-list">
                <li>
                    Special attraction: Four Wheeler Simulator Training.
                </li>
                <li>
                    Refresher course for Delhi police drivers and new recruits.
                </li>
                <li>
                    Road safety awareness camps.
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ====== SECTION 2 ====== -->
<div class="highlighted-content-block container">
    <div class="content-wrapper reverse">
        <div class="road-safety-road-safety-slider-right">
            <div class="road-safety-slider">
                <div class="road-safety-slides">
                    <img src="/sites/default/files/images/traffic-training-park/ROSHANARA-BAGH-IMG-01.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/ROSHANARA-BAGH-IMG-02.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/ROSHANARA-BAGH-IMG-03.jpeg" alt="" width="1200" height="800">
                </div>
            </div>
            <p>
                <button class="road-safety-slider-btn prev">❮</button> <button class="road-safety-slider-btn next">❯</button>
            </p>
        </div>
        <div class="content-left">
            <h3>
                TRAFFIC TRAINING PARK ROSHANARA BAGH
            </h3>
            <ul class="content-list">
                <li>
                    Road safety awareness activities for students.
                </li>
                <li>
                    Practical training in safe crossing &amp; cycling.
                </li>
                <li>
                    Road safety awareness camps.
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ====== SECTION 3 ====== -->
<div class="highlighted-content-block container">
    <div class="content-wrapper">
        <div class="road-safety-road-safety-slider-right">
            <div class="road-safety-slider">
                <div class="road-safety-slides">
                    <img src="/sites/default/files/images/traffic-training-park/BABA-KHARAK-DSC-01.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BABA-KHARAK-DSC-02.jpeg" alt="" width="1200" height="800">
                </div>
            </div>
            <p>
                <button class="road-safety-slider-btn prev">❮</button> <button class="road-safety-slider-btn next">❯</button>
            </p>
        </div>
        <div class="content-left">
            <h3>
                TRAFFIC TRAINING PARK BABA KHARAK SINGH MARG
            </h3>
            <ul class="content-list">
                <li>
                    Special attraction: Safe Two-Wheeler Riding Training for women.
                </li>
                <li>
                    Road safety awareness camps.
                </li>
                <li>
                    Visitors include children, Private/ Public Sector.
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ====== SECTION 4 ====== -->
<div class="highlighted-content-block container">
    <div class="content-wrapper reverse">
        <div class="road-safety-road-safety-slider-right">
            <div class="road-safety-slider">
                <div class="road-safety-slides">
                    <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-01.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-02.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-03.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-04.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-05.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-06.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-07.jpeg" alt="" width="1200" height="800"> <img src="/sites/default/files/images/traffic-training-park/BAL-BHAWAN-08.jpeg" alt="">
                </div>
            </div>
            <p>
                <button class="road-safety-slider-btn prev">❮</button> <button class="road-safety-slider-btn next">❯</button>
            </p>
        </div>
        <div class="content-left">
            <h3>
                TRAFFIC TRAINING PARK BAL BHAWAN
            </h3>
            <ul class="content-list">
                <li>
                    Training in safe and proper road/traffic use.
                </li>
                <li>
                    Road safety awareness camps.
                </li>
                <li>
                    Visitors include children, Private/ Public Sector.
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container my-4">
    <div class="row g-4">
        <!-- Card 1 -->
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card road-card h-100">
                <div class="icon">
                    <img src="/sites/default/files/images/about_road_safety_icons/outreach_programs.png" alt="outreach programs" width="300" height="300">
                </div>
                <div class="content">
                    <h3>
                        Outreach Programs
                    </h3>
                    <p>
                        Workshops, contests, health camps, sensitisation drives, street plays &amp; rallies to raise awareness.
                    </p>
                </div>
            </div>
        </div>
        <!-- Card 2 -->
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card road-card h-100">
                <div class="icon">
                    <img src="/sites/default/files/images/about_road_safety_icons/target_groups.png" alt="target group" width="300" height="300">
                </div>
                <div class="content">
                    <h3>
                        Target Groups
                    </h3>
                    <p>
                        Programs tailored for children, drivers, slum communities, defence staff, and the general public.
                    </p>
                </div>
            </div>
        </div>
        <!-- Card 3 -->
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card road-card h-100">
                <div class="icon">
                    <img src="/sites/default/files/images/about_road_safety_icons/teaching_approaches.png" alt="teaching approach" width="300" height="300">
                </div>
                <div class="content">
                    <h3>
                        Teaching Approaches
                    </h3>
                    <p>
                        Interactive lectures, film screenings, simulators, contests, pamphlets, rallies &amp; reflective drives.
                    </p>
                </div>
            </div>
        </div>
        <!-- Card 4 -->
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card road-card h-100">
                <div class="icon">
                    <img src="/sites/default/files/images/about_road_safety_icons/supporting_content.png" alt="supporting content" width="300" height="300">
                </div>
                <div class="content">
                    <h3>
                        Supporting Content
                    </h3>
                    <p>
                        Custom pamphlets, school curriculum (2,000+ schools), training park maps &amp; downloadable guides.
                    </p>
                </div>
            </div>
        </div>
        <!-- Card 5 -->
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card road-card h-100">
                <div class="icon">
                    <img src="/sites/default/files/images/about_road_safety_icons/why_it_matters.png" alt="why it matters" width="300" height="300">
                </div>
                <div class="content">
                    <h3>
                        Why It Matters
                    </h3>
                    <p>
                        1551 fatalities in 2024; focused interventions have reduced accidents by 20% across Delhi.
                    </p>
                </div>
            </div>
        </div>
        <!-- Card 6 -->
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card road-card h-100">
                <div class="icon">
                    <img src="/sites/default/files/images/about_road_safety_icons/Next_Steps.png" alt="next step" width="300" height="300">
                </div>
                <div class="content">
                    <h3>
                        Next Steps
                    </h3>
                    <p>
                        Book a park visit, invite our team, join Road Safety Clubs, download resources &amp; share feedback.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="flexslider-road-saftey">
    <ul class="slides">
        <li>
            <img src="/sites/default/files/images/activities/road-safety-cell-03.jpeg" width="480" height="384">
        </li>
        <li>
            <img src="/sites/default/files/images/activities/road-safety-cell-08.jpeg" width="480" height="384">
        </li>
        <li>
            <img src="/sites/default/files/images/activities/road-safety-cell-10.jpeg" width="480" height="384">
        </li>
    </ul>
</div>

_____________________________________________________

global-styling:
  version: 1.x
  css:
    theme:
      libraries/flexslider/flexslider.css: {}
      css/style.css: {}
      css/style-responsive.css: {}
      bootstrap/css/bootstrap.min.css: {}
  js:
    libraries/flexslider/jquery.flexslider-min.js: {}
    https://www.instagram.com/embed.js: { type: external }
    https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0:
      type: external
      attributes:
        async: true
        defer: true
        crossorigin: anonymous
    js/script.js: {}
    bootstrap/js/bootstrap.bundle.min.js: {}
   
    https://maps.googleapis.com/maps/api/js?key=AIzaSyDUcwfYuGlQ5-hnysQO78aMtbzKWV3ElPw&callback=initMap&v=weekly&libraries=marker:
      type: external
      attributes:
        async: true
        defer: true
  dependencies:
     - core/jquery
     - core/drupal
     - core/drupalSettings
     - core/once