/* HOME HERO */
 .home-hero {
     /* background: #f6f6f6; */
     padding: 80px 20px 100px;
     text-align: center;
 }

 .hero-container {
     max-width: 1100px;
     margin: auto;
 }

 /* TITLE */
 .practice-top-text {
     font-size: 34px;
     font-weight: 700;
     color: #8a2c13;
     margin-bottom: 30px;
     font-family: cursive;
 }

 .hero-title .red {
     color: #ff2b2b;
 }

 .hero-title .green {
     color: #17b857;
     font-family: cursive;
     font-weight: 600;
 }

 /* SUBTITLE */
 .hero-subtitle {
     max-width: 900px;
     margin: 0 auto 40px;
     font-size: 20px;
     color: #7a1e1e;
     line-height: 1.5;
 }

 /* IMAGE BOX */
 .hero-image-box {
     position: relative;
     display: inline-block;
 }

 .hero-image-box .student {
     width: 890px;
     max-width: 100%;
     border-radius: 4px;
     height: 500px;
     object-fit: cover;
 }

 /* BUTTON OVER IMAGE */
 .hero-buttons {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     gap: 20px;
 }

 .hero-btn {
     background: #9C968C;
     padding: 17px 28px;
     border-radius: 8px;
     font-size: 20px;
     font-weight: 700;
     text-decoration: none;
     box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
     /* border: 2px solid #f7f2ea; */
 }

 .hero-btn .blue {
     color: #00a8ff;
     text-shadow: 2px 2px 0 #000
 }


 .hero-btn .orange {
     color: #ff7a00;
     text-shadow: 2px 2px 0 #000
 }

 /* UPDATE BUTTON */
 .hero-update {
     margin-top: 40px;
 }

 .update-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 30px;
     background: #bdbdbd;
     border-radius: 14px;
     font-size: 22px;
     text-decoration: none;
     color: #6a00ff;
     background: linear-gradient(to right, #bdbdbd, #ffffff);
 }

 .update-btn .telegram {
     background: #00a8ff;
     color: #fff;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
 }

 /* RESPONSIVE */
 @media(max-width:768px) {
     .hero-title {
         font-size: 28px;
     }

     .hero-subtitle {
         font-size: 16px;
     }

     .hero-buttons {
         flex-direction: column;
     }
 }