.rgcat{
  width:100%;
  padding:75px 20px 110px;
  background:#fbfbfb;
  box-sizing:border-box;
}

.rgcat *{
  box-sizing:border-box;
}

.rgcat__head{
  max-width:900px;
  margin:0 auto 42px;
  text-align:center;
}

.rgcat__head span{
  display:inline-block;
  margin-bottom:10px;
  color:#b89542;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:2.5px;
}

.rgcat__head h1{
  margin:0;
  color:#1e1e1e;
  font-family:Arial,sans-serif;
  font-size:clamp(28px,3vw,42px);
  font-weight:600;
  line-height:1.15;
}

.rgcat__head p{
  max-width:620px;
  margin:14px auto 0;
  color:#777;
  font-family:Arial,sans-serif;
  font-size:15px;
  line-height:1.7;
}

.rgcat__stage{
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

.rgcat__viewer{
  position:relative;
  width:min(1120px,100%);
  height:780px;
  margin:0 auto;
  overflow:hidden;
  border-radius:10px;
  background:#252525;
  box-shadow:0 15px 38px rgba(0,0,0,.22);
  transition:transform .35s ease,box-shadow .35s ease;
}

.rgcat__viewer:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 45px rgba(0,0,0,.28);
}

.rgcat__frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  opacity:0;
  transition:opacity .35s ease;
}

.rgcat__viewer.is-loaded .rgcat__frame{
  opacity:1;
}

.rgcat__loader{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fff;
  background:#252525;
  transition:opacity .3s ease,visibility .3s ease;
}

.rgcat__loader span{
  width:32px;
  height:32px;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#b89542;
  border-radius:50%;
  animation:rgcatSpin .75s linear infinite;
}

.rgcat__loader p{
  margin:0;
  font-family:Arial,sans-serif;
  font-size:12px;
  letter-spacing:.05em;
}

.rgcat__viewer.is-loaded .rgcat__loader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@keyframes rgcatSpin{
  to{
    transform:rotate(360deg);
  }
}

@media(max-width:1200px){
  .rgcat__viewer{
    width:100%;
    height:720px;
  }
}

@media(max-width:1024px){
  .rgcat__viewer{
    height:660px;
  }
}

@media(max-width:768px){
  .rgcat{
    padding:52px 14px 75px;
  }

  .rgcat__head{
    margin-bottom:28px;
  }

  .rgcat__head p{
    font-size:14px;
  }

  .rgcat__viewer{
    height:78vh;
    min-height:600px;
    border-radius:7px;
  }

  .rgcat__viewer:hover{
    transform:none;
  }
}

@media(max-width:480px){
  .rgcat__viewer{
    height:650px;
    min-height:0;
  }
}