.main-section {
     padding: 120px 20px 40px;
     max-width: 1300px;
     margin: 0 auto;
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .content-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 15px;
     color: #333;
 }

 .content-paragraph {
     font-size: 14px;
     color: #666;
     margin-bottom: 30px;
     line-height: 1.6;
 }

 .form-container {
     border-radius: 10px;
     padding: 40px 20px;
     text-align: center;
     background-color: #f8f8f8;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .form-placeholder {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 25px;
     width: 100%;
 }

 .grid-item {
     min-width: 100%;
 }

 .grid-item img {
     width: 100%;
     height: auto;
     display: block;
     cursor: pointer;
 }

 @media(min-width:768px) {
     .content-title {
         font-size: 28px;
         margin-bottom: 20px;
     }

     .content-paragraph {
         font-size: 15px;
         margin-bottom: 40px;
     }

     .form-container {
         padding: 40px;
     }

     .form-placeholder {
         font-size: 28px;
         letter-spacing: 2px;
     }
 }

 @media(min-width:1024px) {
     .main-section {
         padding: 120px 20px 40px;
         flex-direction: row;
         gap: 25px;
     }

     .form-placeholder {
         grid-template-columns: repeat(7, 1fr);

     }

 }

 .slide-page {
     position: fixed;
     top: 0;
     right: -100%;
     width: 100%;
     height: 100vh;
     background: white;
     z-index: 1000;
     transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     overflow-y: auto;
     box-shadow: none;
 }

 .slide-page.active {
     right: 0;
 }

 .slide-content {
     max-width: 1000px;
     margin: 0 auto;
     height: 100%;
     overflow: hidden;
 }

 .close-btn {
     position: absolute;
     top: 30px;
     right: 30px;
     background: #ff4757;
     color: white;
     border: none;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     font-size: 1.5rem;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
 }

 .close-btn:hover {
     background: #ff3742;
     transform: rotate(90deg) scale(1.1);
 }

 .page-title {
     font-size: 2rem;
     color: #333;
     margin-bottom: 30px;
     text-align: center;
 }

 .page-icon {
     font-size: 6rem;
     text-align: center;
     margin-bottom: 30px;
     display: block;
 }

 .page-content {
     font-size: 1.2rem;
     line-height: 1.8;
     color: #555;
     text-align: center;
     max-width: 100%;
     height: 100%;
     margin: 0 auto;
 }

 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .overlay.active {
     opacity: 1;
     visibility: visible;
 }



 .close-btn {
     top: 20px;
     right: 20px;
     width: 40px;
     height: 40px;
     font-size: 1.2rem;
 }

 @media (min-width: 768px) {


     .slide-page {
         width: 1000px;
     }



     .close-btn {
         top: 30px;
         right: 30px;
         width: 50px;
         height: 50px;
         font-size: 1.5rem;
     }




 }