.elementor-34364 .elementor-element.elementor-element-e42f51f{--display:flex;}/* Start custom CSS for html, class: .elementor-element-e9277db */.raya-gallery-wrapper {
  direction:rtl;
  position:relative;
}
.raya-gallery-container {
  max-width:1200px; margin:20px auto; padding:0 15px; position:relative;
}
.raya-gallery-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:200px 200px;
  gap:8px;
  border-radius:12px;
  overflow:hidden;
}
.raya-gallery-item { position:relative; overflow:hidden; cursor:pointer; transition:transform .3s ease; }
.raya-gallery-grid:hover .raya-gallery-item:not(:hover) img { filter:grayscale(60%); opacity:.8; transition:all .5s ease; }
.raya-gallery-item img { width:100%; height:100%; object-fit:cover; transition:all .5s ease; border-radius:12px; }
.raya-gallery-item:first-child { grid-row:span 2; }

.raya-more-button {
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:16px;
  padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  box-shadow:none !important; transition:all .3s ease;
  z-index:10; backdrop-filter:blur(10px);
}
.raya-more-button:hover { background:rgba(255,255,255,.3); }
.raya-more-button .raya-icon { margin-left:8px; }

.raya-features { position:absolute; top:15px; right:15px; display:flex; flex-direction:column; gap:8px; z-index:5; }
.raya-badge {
  display:flex; align-items:center; padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:bold; color:#fff; background:rgba(0,0,0,.6); backdrop-filter:blur(5px);
}
.raya-badge .raya-icon { margin-left:5px; }
.raya-badge.raya-gallery-title { 
  background:rgba(255,255,255,.25); 
  border-radius:5px 0 0 5px; 
}

.raya-lightbox {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.95); display:flex; flex-direction:column;
  justify-content:center; align-items:center; z-index:1000;
  visibility:hidden; opacity:0; transform:translateY(100%);
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .5s ease, visibility 0s linear .6s;
  overflow:hidden;
}
.raya-lightbox:before {
  content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(circle at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 100%);
  z-index:-1;
}
.raya-lightbox.active {
  visibility:visible; opacity:1; transform:translateY(0);
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .5s ease, visibility 0s linear 0s;
}
.raya-lightbox.closing {
  opacity:0; transform:translateY(100%);
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.raya-lightbox-header {
  position:absolute; top:0; left:0; right:0; height:70px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 30px; background:rgba(0,0,0,.5); backdrop-filter:blur(10px);
  z-index:1001; transform:translateY(-20px); opacity:0;
  transition:transform .4s ease .2s, opacity .4s ease .2s;
}
.raya-lightbox.active .raya-lightbox-header { transform:translateY(0); opacity:1; }
.raya-lightbox-title { color:#fff; font-size:18px; font-weight:bold; }
.raya-lightbox-content {
  position:relative; width:100%; height:calc(100% - 100px);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(30px); opacity:0;
  transition:transform .5s ease .1s, opacity .5s ease .1s;
}
.raya-lightbox.active .raya-lightbox-content { transform:translateY(0); opacity:1; }
.raya-lightbox-image {
  max-width:90%; max-height:80%; object-fit:contain; border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.4); transition:opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.raya-lightbox-image.fade { opacity:.3; transform:scale(.95); }

.raya-close-lightbox {
  width:44px; height:44px; color:#fff; font-size:28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border-radius:50%; 
  transition:all .3s ease; cursor:pointer;
  position:relative; overflow:hidden;
}
.raya-close-lightbox:before {
  content:""; position:absolute; width:0; height:0; background:rgba(255,255,255,.2);
  border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);
  transition:width .4s ease, height .4s ease;
}
.raya-close-lightbox:hover:before { width:120%; height:120%; }
.raya-close-lightbox:hover { transform:rotate(90deg); }

.raya-prev-btn, .raya-next-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border:none; border-radius:50%;
  background:rgba(0,0,0,.2); color:#fff; font-size:24px;
  backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(0,0,0,.3);
  opacity:0; z-index:5; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.raya-lightbox.active .raya-prev-btn, .raya-lightbox.active .raya-next-btn { opacity:1; transition-delay:.3s; }
.raya-prev-btn { left:20px; } .raya-next-btn { right:20px; }
.raya-prev-btn:hover, .raya-next-btn:hover { background:rgba(255,255,255,.25); transform:translateY(-50%) scale(1.1); }

.raya-thumbnails {
  position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center;
  overflow-x:auto; padding:10px; gap:15px; opacity:0; transform:translateY(30px);
  transition:opacity .5s ease .2s, transform .5s ease .2s;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) rgba(255,255,255,.1);
}
.raya-lightbox.active .raya-thumbnails { opacity:1; transform:translateY(0); }
.raya-thumbnail {
  width:100px; height:75px; border:2px solid transparent; border-radius:6px;
  object-fit:cover; opacity:.5; transform:scale(.95);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:all .3s cubic-bezier(.16,1,.3,1); cursor:pointer;
}
.raya-thumbnail.active { border-color:#7d3c98; opacity:1; transform:scale(1.1); }
.raya-thumbnail:hover { opacity:.9; transform:scale(1); }

.raya-image-counter {
  position:absolute; bottom:100px; right:20px; background:rgba(0,0,0,.6);
  color:#fff; padding:8px 16px; border-radius:20px; backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,.3); opacity:0; transform:translateY(20px);
  transition:opacity .4s ease .3s, transform .4s ease .3s;
}
.raya-lightbox.active .raya-image-counter { opacity:1; transform:translateY(0); }

.raya-thumbnails::-webkit-scrollbar { height:6px; }
.raya-thumbnails::-webkit-scrollbar-track { background:rgba(255,255,255,.1); border-radius:10px; }
.raya-thumbnails::-webkit-scrollbar-thumb { background:rgba(255,255,255,.3); border-radius:10px; }
.raya-thumbnails::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.5); }

.raya-icon {
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:middle;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:768px){
  .raya-gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:150px 150px;}
  .raya-gallery-item:nth-child(3), .raya-gallery-item:nth-child(4){display:none;}
  .raya-lightbox-content{height:calc(100% - 120px);}
  .raya-thumbnails{bottom:10px;}
  .raya-prev-btn, .raya-next-btn{width:46px;height:46px;}
  .raya-prev-btn{left:10px;} .raya-next-btn{right:10px;}
}
@media(max-width:480px){
  .raya-gallery-grid{grid-template-columns:1fr;grid-template-rows:200px;}
  .raya-gallery-item:not(:first-child){display:none;}
  .raya-more-button{bottom:10px;right:10px;padding:8px 14px;font-size:12px;}
  .raya-lightbox-header{height:60px;padding:0 15px;} .raya-lightbox-title{font-size:16px;}
  .raya-thumbnail{width:70px;height:50px;}
}/* End custom CSS */