/* =============================
   GLOBAL
============================= */
html, body {
  scroll-behavior: auto !important;
}


body {
  margin: 0;
  background-image: url("../images/RR (13).png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Montserrat", sans-serif;
  overflow: hidden; /* preloader ժամանակ */
}

/* =============================
   PRELOADER
============================= */

#preloader {
  position: fixed;
  inset: 0;
  background-image: url("../images/RR (13).png");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.8s ease;
}

#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

.preloader-inner {
  text-align: center;
}


.text-black{
    font-size: 22px;

  }

.logo {
  width: 600px;
}

.logo path {
  opacity: 0;
  transform: translateY(60px);
  animation: letterIn 0.8s ease forwards;
}

/* Letter delays */
.logo path:nth-child(1){animation-delay:0.1s;}
.logo path:nth-child(2){animation-delay:0.3s;}
.logo path:nth-child(3){animation-delay:0.5s;}
.logo path:nth-child(4){animation-delay:0.7s;}
.logo path:nth-child(5){animation-delay:0.9s;}
.logo path:nth-child(6){animation-delay:1.1s;}
.logo path:nth-child(7){animation-delay:1.3s;}
.logo path:nth-child(8){animation-delay:1.5s;}

.subtitle {
  margin-top: 25px;
  color: white;
  letter-spacing: 6px;
  font-size: 65px;
  opacity: 0;
  font-weight: 400;
  animation: fadeIn 1s forwards;
  animation-delay: 2s;
}

/* =============================
   MAIN CONTENT TRANSITION
============================= */

#main-content {
  opacity: 0;
  /* transform: translateY(20px); */
  transition: all 1s ease;
}

#main-content.show {
  opacity: 1;
  transform: translateY(0);
}

/* =============================
   VIDEO GALLERY
============================= */

.video-card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.video-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.video-card video {
  width: 100%;
  transition: transform 0.4s ease;
}

.video-card:hover video {
  transform: scale(1.05);
}

/* =============================
   ACADEMY GRID SECTION
============================= */

.academy-section {
  color: white;
}

.section-title {
  letter-spacing: 2px;
}

.section-subtitle {
  opacity: 0.8;
  max-width: 700px;
  margin: auto;
}

.table-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border: 1px solid rgba(255,255,255,0.2);
}


.grid-header {
  background: rgba(255,122,0,0.15);
  padding: 15px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.2);
}

.grid-cell {
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: 0.3s ease;
}

.grid-cell:hover {
  background: rgba(255,122,0,0.08);
}

.table-grid-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border: 1px solid rgba(255,255,255,0.2);
}

.grid-header-2 {
  background: rgba(255,122,0,0.15);
  padding: 15px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.2);
}

.grid-cell-2 {
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: 0.3s ease;
}

.grid-cell-2:hover {
  background: rgba(255,122,0,0.08);
}

.table-grid-3 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border: 1px solid rgba(255,255,255,0.2);
}

.grid-header-3 {
  background: rgba(255,122,0,0.15);
  padding: 15px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.2);
}

.grid-cell-3 {
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: 0.3s ease;
}

.grid-cell-3:hover {
  background: rgba(255,122,0,0.08);
}

.table-grid-5{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr 1fr; 
  border:1px solid rgba(255,255,255,0.2);
}

.grid-header-5{
  background: rgba(255,122,0,0.15);
  padding:15px;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.2);
}

.grid-cell-5{
  padding:15px;
  border:1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition:0.3s ease;
}

.grid-cell-5:hover{
  background: rgba(255,122,0,0.08);
}


/* =============================
   ANIMATIONS
============================= */

@keyframes letterIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 0.9;
  }
}

.service {
    justify-content: center;
}

.service-box{
  background:#FFFDE9;
  padding:25px;
  border-radius:16px;
  transition:0.4s ease;
  border: 1px solid #FF6D21;
}

.service-box:hover{
     transform: scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,0.5);
}

.service-img{
  height:300px;
  object-fit:cover;
}

.service-slider{
  position:relative;
  max-width:600px;
  margin:auto;
  background:#1a1a1a;
  padding:30px;
  border-radius:18px;
  text-align:center;
  color:white;
  overflow:hidden;
}

.slide-img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:12px;
  margin:20px 0;
  transition:opacity 0.4s ease;
}

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.1);
  border:none;
  color:white;
  font-size:28px;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s ease;
}

.arrow:hover{
  background:rgba(255,122,0,0.7);
}

.arrow.left{
  left:-20px;
}

.arrow.right{
  right:-20px;
}


@media (max-width: 1320px){

  .logo{
    width:520px;
  }

  .service-slider{
    max-width:520px;
  }

  .text-black{
    font-size: 25px;

  }

}

@media (max-width: 1320px){

  .logo{
    width:520px;
  }

  .service-slider{
    max-width:520px;
  }
  .text-black{
    font-size: 21px;

  }

}

@media (max-width: 992px){

  body{
    overflow-x:hidden;
  }

  .logo{
    width:400px;
  }

  .subtitle{
    font-size:40px;
    letter-spacing:4px;
  }

  .text-black{
    font-size: 25px;

  }

  /* Grid → Stack */
  .table-grid,
  .table-grid-2,
  .table-grid-3,
  .table-grid-5{
    grid-template-columns:1fr;
  }

  .service-box{
    padding:22px;
  }

  .service-img,
  .slide-img{
    height:240px;
  }

  .service-slider{
    max-width:100%;
  }

  .arrow{
    width:40px;
    height:40px;
  }

}

@media (max-width: 768px){

  .logo{
    width:320px;
  }

  .subtitle{
    font-size:28px;
    letter-spacing:3px;
  }

  .text-black{
    font-size: 25px;

  }

  .service-box{
    padding:24px;
    border-radius:20px;
    box-shadow:0 15px 30px rgba(0,0,0,0.2);
  }

  .service-box:hover{
    transform:none;
  }

  .service-img{
    height:260px;
  }

  .slide-img{
    height:240px;
  }

  .video-card:hover{
    transform:none;
    box-shadow:none;
  }

}

@media (max-width: 576px){

  #main-content{
    padding:20px 15px;
  }

  .service-box{
    width:100%;
    padding:26px;
  }

  .text-black{
    font-size: 25px;

  }

  .service-img{
    height:240px;
  }

  .slide-img{
    height:220px;
  }

  .arrow.left{
    left:8px;
  }

  .arrow.right{
    right:8px;
  }

}

@media (max-width: 450px){

  .logo{
    width:240px;
  }

  .subtitle{
    font-size:22px;
    letter-spacing:2px;
  }

  .text-black{
    font-size: 25px;

  }

  .service-box{
    padding:28px;
    border-radius:24px;
  }

  .service-box h3{
    font-size:22px;
  }

  .service-box p{
    font-size:16px;
    line-height:1.7;
  }

  .service-img{
    height:260px;
    border-radius:18px;
  }

  .slide-img{
    height:240px;
    border-radius:18px;
  }

  .arrow{
    width:42px;
    height:42px;
    font-size:22px;
  }

}