*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background-color:#f5f5f5;min-height:100vh}
.header{height:70px;background-color:#191f2b;box-shadow:0 2px 10px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:100}
.logo-container{height:50px;width:150px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:18px;color:#333;font-weight:bold}
.back-button{padding:10px 25px;background-color:#1a73e8;color:white;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s;margin: 8px;}
.back-button:hover{background-color:#0d5bb5}
.container{max-width:1900px;margin:0 auto;padding:20px 10px}
.image-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;row-gap:30px;margin-bottom:20px}
.image-item{width:360px;height:405px;position:relative;cursor:pointer;overflow:hidden;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,0.1);background-color:#fff;transition:transform .3s ease,box-shadow .3s ease}
.image-item:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,0.15)}
.image-item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:4px solid transparent;border-radius:2px;z-index:2;pointer-events:none;transition:border-color .3s ease}
.image-item:hover::before{border-color:#1a73e8}
.image-item img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s ease}
.image-item:hover img{transform:scale(1.05)}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.95);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;overflow-y:auto;cursor:pointer}
.modal-overlay.active{opacity:1;visibility:visible}
.modal-content{position:relative;min-height:100vh;padding:40px 20px;display:flex;justify-content:center;align-items:flex-start;pointer-events:none}
.full-image-container{position:relative;max-width:1750px;width:100%;display:flex;justify-content:center;pointer-events:auto}
.full-image{width:auto;height:auto;max-width:1750px;display:block;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,0.3);pointer-events:auto}
.close-btn{position:fixed;top:90px;right:20px;background:none;border:none;color:white;font-size:32px;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background-color .3s ease;border-radius:50%;z-index:1001;pointer-events:auto}
.close-btn:hover{transform:rotate(90deg);background-color:rgba(255,255,255,0.1)}
.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:18px;display:none;pointer-events:none}
.modal-overlay.active .loading{display:block}
.modal-overlay.active .full-image{opacity:0;transition:opacity .3s ease}
.modal-overlay.active .full-image.loaded{opacity:1}
@media (max-width:1920px){.image-grid{grid-template-columns:repeat(5,1fr);gap:8px;row-gap:30px;justify-items:center}.image-item{width:350px;height:395px}}
@media (max-width:1800px){.image-item{width:340px;height:385px}}
@media (max-width:1700px){.image-item{width:320px;height:360px}}
@media (max-width:1600px){.image-grid{grid-template-columns:repeat(4,1fr);row-gap:30px}.image-item{width:360px;height:405px}}
@media (max-width:1500px){.image-grid{grid-template-columns:repeat(3,1fr);row-gap:30px}}
@media (max-width:1100px){.image-grid{grid-template-columns:repeat(2,1fr);row-gap:30px}.image-item{width:360px;height:405px}.header{padding:0 20px}}
@media (max-width:800px){.image-grid{grid-template-columns:1fr;row-gap:30px}.image-item{width:100%;max-width:360px;height:405px}.full-image-container{max-width:95vw;display:flex;justify-content:center;align-items:flex-start}.full-image{max-width:95vw!important;width:auto!important;height:auto!important;object-fit:contain}.modal-content{padding:20px 10px;align-items:flex-start}.close-btn{top:80px;right:10px;width:40px;height:40px;font-size:28px}.header{padding:0 15px;height:60px}.logo-container{height:40px;width:120px;font-size:16px}.back-button{padding:8px 20px;font-size:14px}}
@media (max-width:480px){.image-item{height:350px}.full-image{max-width:100vw!important}.modal-content{padding:10px 5px}.header{height:50px;padding:0 10px}.logo-container{height:35px;width:100px;font-size:14px}.back-button{padding:6px 10px;font-size:12px}.close-btn{top:60px;right:5px;width:35px;height:35px;font-size:24px}}
.image-title {text-align: center;padding: 5px 5px;font-size: 16px;color: #333;background: #f5f5f5;border-top: 1px solid #eee;line-height: 1.4;font-weight: bold;}
.item-box{width:350px;height:420px;}@media(max-width:768px){.item-box{height:375px;}}
#back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
}
@media (max-width: 768px) {
  #back-to-top {
    right: 15px;
  }
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#back-to-top .arrow-up {
  position: absolute;
  font-size: 20px;
  color: #191f2b;
  font-weight: bold;
}

.progress-ring {
  transform: rotate(-90deg);
  position: absolute;
  top: 0;
  left: 0;
}

.progress-ring__background {
  stroke-dasharray: 163.36;
  stroke-dashoffset: 0;
}

.progress-ring__progress {
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
  transition: stroke-dashoffset 0.2s ease-out;
}
header .logo img {
    width: 220px;
}

@media (max-width: 768px) {
    header .logo img {
        width: 120px !important;
    }
}