:root{
      --overlay: rgba(0,0,0,0.9);
      --btn-bg: rgba(0,0,0,0.45);
      --btn-hover: rgba(255,255,255,0.12);
      --white: #ffffff;
    }

    *{box-sizing:border-box}


    .gallery-section{
      max-width: 66%;
      margin:15px auto;
      padding-bottom:18px;
    }

    .main-image{
      position:relative;
      overflow:hidden;
      background:#000;
      height: 500px;
    }

    .main-image img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      opacity:0;
      transform:scale(1.03);
      transition:opacity .6s ease, transform .6s ease;
      cursor:pointer;
    }

    .main-image img.active{ opacity:1; transform:scale(1); z-index:1; }

    .arrow{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      z-index:5;
      background:rgba(0,0,0,0.45);
      border:0;
      width:46px; height:46px;
      border-radius:50%;
      color:var(--white);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      cursor:pointer;
      opacity:0;
      transition:opacity .2s, background .2s;
    }

    .main-image:hover .arrow{ opacity:1; }
    .arrow:hover{ background:rgba(0,0,0,0.6); }

    .arrow.left{ left:12px; }
    .arrow.right{ right:12px; }

    .thumbnails{
      display:flex;
      gap:10px;
      margin-top:8px;
      overflow:auto;
     padding: 4px 6px 6px 6px;
    }
    .thumbnails::-webkit-scrollbar{ display:none }
    .thumbnails img{
      width:110px; height:110px; object-fit:cover;
      opacity:.55; cursor:pointer; border:2px solid transparent;
      transition:all .18s ease;
      flex-shrink:0;
    }
    .thumbnails img:hover{ transform:scale(1.03); opacity:1; }
    .thumbnails img.active{ border-color:#fff; opacity:1; transform:scale(1.04); }

    /* Modal overlay (fullscreen) */
    .modal{
      display:none;
      position:fixed;
      inset:0;
      z-index:9999;
      background:var(--overlay);
      align-items:center;
      justify-content:center;
      overflow:hidden;
      flex-direction:column;
    }

    .modal-inner{
      position:relative;
      width:100%;
      height:100%;
      /* display:flex; */
      align-items:center;
      justify-content:center;
      /* padding: 20px; */
    }

    /* Top-left toolbar (SVG icon buttons) */
.modal-toolbar {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    gap: 10px;
    z-index: 12000;
}

    .toolbar-btn{
      width:44px; height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      background:var(--btn-bg);
      border:0;
      cursor:pointer;
      transition:background .15s, transform .12s;
    }
    .toolbar-btn:hover{ background:var(--btn-hover); transform:translateY(-2px); }

    /* Modal close also left per your request; keep as last toolbar btn */
    .toolbar-btn svg{ width:20px; height:20px; fill:var(--white); }

    /* Center image */
    .modal-img-wrap{
      /* max-width:calc(100% - 120px); */
      /* max-height:calc(100% - 140px); */
      display:flex;
      align-items:center;
      justify-content:center;
      height: 82%;
    }
    .modal-img{
      max-width:100%;
      max-height:100%;
      transition:transform .35s ease;
      cursor:zoom-in;
      user-select:none;
      -webkit-user-drag:none;
    }
    .modal-img.zoomed{ transform:scale(1.6); cursor:zoom-out; }

    /* Large nav arrows inside modal (sides) */
    .modal-nav{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      z-index:12000;
      width:60px; height:60px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,.45);
      border:0;
      cursor:pointer;
    }
    .modal-nav.left{ left:22px; }
    .modal-nav.right{ right:22px; }
    .modal-nav svg{ width:26px; height:26px; fill:var(--white); }

    /* Bottom thumbnails (centered) */
    .modal-thumbs{
      position: relative;
      bottom: 0;
      left: 0;
      /* transform:translateX(-50%); */
      display:flex;
      gap:10px;
      padding:8px 10px;
      z-index:11000;
      max-width: 60%;
      overflow:auto;
      align-items:center;
      justify-content:center;
      margin: 12px auto 0;
    }
    .modal-thumbs::-webkit-scrollbar{ display:none; }
    .modal-thumbs img{
      width:88px; height:64px; object-fit:cover;
      opacity:.6; cursor:pointer; border:2px solid transparent;
      transition:all .15s ease;
      flex-shrink:0;
    }
    .modal-thumbs img.active{ opacity:1; border-color:#fff; transform:translateY(-2px); }

    /* small-screen adjustments */
    @media (max-width:768px){
      .main-image{ height:300px }
      .thumbnails img{ width:86px; height:86px }
      .toolbar-btn{ width:40px; height:40px }
      .modal-nav{ width:48px; height:48px }
      .modal-nav svg{ width:22px; height:22px }
      .modal-thumbs img{ width:68px; height:56px }
    }
    @media (max-width:480px){
      .modal-thumbs img{ width:56px; height:40px }


   .modal-toolbar {
    position: absolute;
    top: 18px;
    left: 50%;
    display: flex;
    gap: 10px;
    z-index: 12000;
}
   .video_section-2 {
    padding: 34px 0px;
    height: auto;
    /* width: 100%; */
}
    }
@media (max-width:412px) {
    .modal-toolbar {
        position: absolute;
        top: 18px;
        left: 50%;
        display: flex;
        gap: 10px;
        z-index: 12000;
    }
}
@media (max-width:768px){
  .modal-inner{padding:14px;}
  .modal-img-wrap{max-width:calc(100% - 40px);max-height:calc(100% - 100px);}
  .modal-thumbs img{width:68px;height:56px;}
}
@media (max-width:480px){
  .modal-inner{padding:8px;}
  .modal-img-wrap{max-width:calc(100% - 16px);max-height:calc(100% - 90px);}
  .modal-toolbar{top:10px;left:50%;transform:translateX(-50%);gap:6px;}
  .toolbar-btn{width:36px;height:36px;}
  .modal-nav{width:44px;height:44px;}
  .modal-nav svg{width:20px;height:20px;}
  .modal-thumbs{bottom:8px;gap:4px;padding:4px 6px;}
  .modal-thumbs img{width:54px;height:40px;}
}
@media (max-width:380px){
  .modal-toolbar{top:6px;gap:4px;}
  .toolbar-btn{width:32px;height:32px;}
  .modal-img-wrap{max-width:calc(100% - 10px);max-height:calc(100% - 80px);}
}