/*
 * StudyHub.AZ Universal Zoom Optimization
 * Filename: zoom.css
 * Author: Ostwind by Dr.FC
 * Универсальные исправления для всех масштабов зума: 110%, 125%, 150%, 175%, 200%
 */

/* === ИСПРАВЛЕНИЯ ДЛЯ ЗУМА 110% === */
@media screen and (min-resolution: 1.1dppx), 
       screen and (-webkit-min-device-pixel-ratio: 1.1) {
  
  /* Карточки features */
  .features-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1.7rem !important;
    padding: 0 1.1rem !important;
  }
  
  .feature-item {
    min-width: 260px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    padding: 1.7rem !important;
  }
  
  /* Кнопки навигации */
  .welcome-button {
    padding: 11px 17px !important;
    font-size: 0.95rem !important;
    min-height: 42px !important;
    min-width: 110px !important;
    max-width: 220px !important;
  }
  
  .welcome-button i {
    font-size: 0.9rem !important;
  }
  
  /* Контейнеры */
  .container {
    padding: 1.7rem 1.1rem !important;
  }
  
  /* Картинка StudyHub */
  .studyhub-image {
    max-width: 550px !important;
    max-height: 460px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  .top-image {
    max-width: 550px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === ИСПРАВЛЕНИЯ ДЛЯ ЗУМА 125% === */
@media screen and (min-resolution: 1.25dppx), 
       screen and (-webkit-min-device-pixel-ratio: 1.25) {
  
  /* Карточки features */
  .features-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 1.6rem !important;
    padding: 0 1rem !important;
  }
  
  .feature-item {
    min-width: 250px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 280px !important;
    padding: 1.6rem !important;
  }
  
  /* Кнопки навигации */
  .welcome-button {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    min-height: 40px !important;
    min-width: 105px !important;
    max-width: 210px !important;
  }
  
  .welcome-button i {
    font-size: 0.85rem !important;
  }
  
  /* Контейнеры */
  .container {
    padding: 1.6rem 1rem !important;
  }
  
  /* Картинка StudyHub */
  .studyhub-image {
    max-width: 500px !important;
    max-height: 420px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  .top-image {
    max-width: 500px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === ИСПРАВЛЕНИЯ ДЛЯ ЗУМА 150% === */
@media screen and (min-resolution: 1.5dppx), 
       screen and (-webkit-min-device-pixel-ratio: 1.5) {
  
  /* Карточки features */
  .features-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 1.5rem !important;
    padding: 0 0.9rem !important;
  }
  
  .feature-item {
    min-width: 240px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 260px !important;
    padding: 1.5rem !important;
  }
  
  /* Кнопки навигации */
  .welcome-button {
    padding: 9px 13px !important;
    font-size: 0.85rem !important;
    min-height: 38px !important;
    min-width: 100px !important;
    max-width: 200px !important;
  }
  
  .welcome-button i {
    font-size: 0.8rem !important;
  }
  
  /* Контейнеры */
  .container {
    padding: 1.5rem 0.9rem !important;
  }
  
  /* Картинка StudyHub */
  .studyhub-image {
    max-width: 480px !important;
    max-height: 400px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  .top-image {
    max-width: 480px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === ИСПРАВЛЕНИЯ ДЛЯ ЗУМА 175% === */
@media screen and (min-resolution: 1.75dppx), 
       screen and (-webkit-min-device-pixel-ratio: 1.75) {
  
  /* Карточки features */
  .features-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.3rem !important;
    padding: 0 0.7rem !important;
  }
  
  .feature-item {
    min-width: 220px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    padding: 1.3rem !important;
  }
  
  /* Кнопки навигации */
  .welcome-button {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
    min-width: 95px !important;
    max-width: 190px !important;
  }
  
  .welcome-button i {
    font-size: 0.75rem !important;
  }
  
  /* Контейнеры */
  .container {
    padding: 1.3rem 0.7rem !important;
  }
  
  /* Вертикальное расположение для section-top при зум 175% */
  .section-top.container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  
  .top-text, .top-image {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  .top-image {
    order: 2 !important; /* Картинка под текстом */
    max-width: 450px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .top-text {
    order: 1 !important; /* Текст сверху */
  }
  
  /* Картинка StudyHub */
  .studyhub-image {
    max-width: 450px !important;
    max-height: 380px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* === АДАПТИВНЫЕ ИСПРАВЛЕНИЯ ДЛЯ РАЗНЫХ РАЗМЕРОВ ЭКРАНА === */

/* Мобильные устройства (до 768px) */
@media screen and (max-width: 768px) {
  /* Зум 110% */
  @media screen and (min-resolution: 1.1dppx) {
    .features-wrapper {
      grid-template-columns: 1fr !important;
      gap: 1.5rem !important;
    }
    
    .feature-item {
      min-width: 100% !important;
      min-height: 280px !important;
    }
    
    .welcome-button {
      padding: 10px 14px !important;
      font-size: 0.9rem !important;
      min-width: 90px !important;
    }
  }
  
  /* Зум 125% */
  @media screen and (min-resolution: 1.25dppx) {
    .features-wrapper {
      grid-template-columns: 1fr !important;
      gap: 1.4rem !important;
    }
    
    .feature-item {
      min-width: 100% !important;
      min-height: 260px !important;
    }
    
    .welcome-button {
      padding: 9px 13px !important;
      font-size: 0.85rem !important;
      min-width: 85px !important;
    }
  }
  
  /* Зум 150% */
  @media screen and (min-resolution: 1.5dppx) {
    .features-wrapper {
      grid-template-columns: 1fr !important;
      gap: 1.3rem !important;
    }
    
    .feature-item {
      min-width: 100% !important;
      min-height: 240px !important;
    }
    
    .welcome-button {
      padding: 8px 12px !important;
      font-size: 0.8rem !important;
      min-width: 80px !important;
    }
  }
  
  /* Зум 175% */
  @media screen and (min-resolution: 1.75dppx) {
    .features-wrapper {
      grid-template-columns: 1fr !important;
      gap: 1.2rem !important;
    }
    
    .feature-item {
      min-width: 100% !important;
      min-height: 220px !important;
    }
    
    .welcome-button {
      padding: 7px 11px !important;
      font-size: 0.75rem !important;
      min-width: 75px !important;
    }
  }
}

/* Планшеты (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Зум 110% */
  @media screen and (min-resolution: 1.1dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
      gap: 1.6rem !important;
    }
    
    .feature-item {
      min-width: 240px !important;
      min-height: 280px !important;
    }
    
    .welcome-button {
      padding: 10px 15px !important;
      font-size: 0.9rem !important;
      min-width: 100px !important;
    }
  }
  
  /* Зум 125% */
  @media screen and (min-resolution: 1.25dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
      gap: 1.5rem !important;
    }
    
    .feature-item {
      min-width: 220px !important;
      min-height: 260px !important;
    }
    
    .welcome-button {
      padding: 9px 14px !important;
      font-size: 0.85rem !important;
      min-width: 95px !important;
    }
  }
  
  /* Зум 150% */
  @media screen and (min-resolution: 1.5dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
      gap: 1.4rem !important;
    }
    
    .feature-item {
      min-width: 200px !important;
      min-height: 240px !important;
    }
    
    .welcome-button {
      padding: 8px 13px !important;
      font-size: 0.8rem !important;
      min-width: 90px !important;
    }
  }
  
  /* Зум 175% */
  @media screen and (min-resolution: 1.75dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
      gap: 1.3rem !important;
    }
    
    .feature-item {
      min-width: 180px !important;
      min-height: 220px !important;
    }
    
    .welcome-button {
      padding: 7px 12px !important;
      font-size: 0.75rem !important;
      min-width: 85px !important;
    }
  }
}

/* Десктопы (1025px+) */
@media screen and (min-width: 1025px) {
  /* Зум 110% */
  @media screen and (min-resolution: 1.1dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
      gap: 1.8rem !important;
    }
    
    .feature-item {
      min-width: 280px !important;
      min-height: 320px !important;
    }
    
    .welcome-button {
      padding: 12px 18px !important;
      font-size: 1rem !important;
      min-width: 120px !important;
    }
  }
  
  /* Зум 125% */
  @media screen and (min-resolution: 1.25dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
      gap: 1.7rem !important;
    }
    
    .feature-item {
      min-width: 260px !important;
      min-height: 300px !important;
    }
    
    .welcome-button {
      padding: 11px 17px !important;
      font-size: 0.95rem !important;
      min-width: 115px !important;
    }
  }
  
  /* Зум 150% */
  @media screen and (min-resolution: 1.5dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
      gap: 1.6rem !important;
    }
    
    .feature-item {
      min-width: 240px !important;
      min-height: 280px !important;
    }
    
    .welcome-button {
      padding: 10px 16px !important;
      font-size: 0.9rem !important;
      min-width: 110px !important;
    }
  }
  
  /* Зум 175% */
  @media screen and (min-resolution: 1.75dppx) {
    .features-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
      gap: 1.5rem !important;
    }
    
    .feature-item {
      min-width: 220px !important;
      min-height: 260px !important;
    }
    
    .welcome-button {
      padding: 9px 15px !important;
      font-size: 0.85rem !important;
      min-width: 105px !important;
    }
  }
}

/* === ОБЩИЕ ИСПРАВЛЕНИЯ ДЛЯ ВСЕХ МАСШТАБОВ === */

/* Улучшенная типографика */
@media screen and (min-resolution: 1.1dppx) {
  .feature-item h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
  
  .feature-item p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }
}

@media screen and (min-resolution: 1.25dppx) {
  .feature-item h3 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }
  
  .feature-item p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
}

@media screen and (min-resolution: 1.5dppx) {
  .feature-item h3 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
  
  .feature-item p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }
}

@media screen and (min-resolution: 1.75dppx) {
  .feature-item h3 {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
  
  .feature-item p {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }
}

/* Исправления для контейнеров кнопок */
@media screen and (min-resolution: 1.1dppx) {
  .logo-actions {
    gap: 0.7rem !important;
  }
}

@media screen and (min-resolution: 1.25dppx) {
  .logo-actions {
    gap: 0.6rem !important;
  }
}

@media screen and (min-resolution: 1.5dppx) {
  .logo-actions {
    gap: 0.5rem !important;
  }
}

@media screen and (min-resolution: 1.75dppx) {
  .logo-actions {
    gap: 0.4rem !important;
  }
}

/* Исправления для иконок в кнопках */
@media screen and (min-resolution: 1.1dppx) {
  .welcome-button i {
    font-size: 0.9rem !important;
  }
}

@media screen and (min-resolution: 1.25dppx) {
  .welcome-button i {
    font-size: 0.85rem !important;
  }
}

@media screen and (min-resolution: 1.5dppx) {
  .welcome-button i {
    font-size: 0.8rem !important;
  }
}

@media screen and (min-resolution: 1.75dppx) {
  .welcome-button i {
    font-size: 0.75rem !important;
  }
}
/*

 * StudyHub.AZ Zoom 200% Fixes

 * Filename: zoom-200-fixes.css

 * Author: Ostwind by Dr.FC

 *  Y! Q!  Q!!  �! T Q �  Q! W! �  � �  Q!  � �!  �!S X � 200%

 */



/* ===  Y � � ^ � � "   Y � "   �  _ � R   :  "  \ �     :       Z R 200% === */



/*  _! Q !S � Q!  � �!
 !9  � !!  Q � Q  � �!  �!S X � 200% -  X � T! Q X � �!
 !9  !  W! Q U! Q!  �!  */

@media screen and (min-resolution: 2dppx), 

       screen and (-webkit-min-device-pixel-ratio: 2),

       screen and (min-width: 800px) and (max-width: 1200px) {

  

  /*  _ �! � U W! � � � �! � X  ! � !!  Q � Q  � �! features-wrapper */

  .features-wrapper {

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;

    gap: 0.8rem !important;

    padding: 0 0.4rem !important;

    max-width: 100% !important;

    width: 100% !important;

    margin: 0 auto !important;

    justify-content: center !important;

  }

  

  /*  _ �! � U W! � � � �! � X  ! � !!  Q � Q  � �! feature-item */

  .feature-item {

    min-width: 160px !important;

    max-width: 100% !important;

    width: 100% !important;

    height: auto !important;

    min-height: 180px !important;

    max-height: none !important;

    padding: 0.8rem !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    text-align: center !important;

  }

  

  /*  _ �! � U W! � � � �! � X  T U !  � !  �!!9  */

  .container {

    padding: 0.8rem 0.4rem !important;

    max-width: 100% !important;

    width: 100% !important;

    margin: 0 auto !important;

  }

  

  .section-features {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

  }

  

  .section-features .container {

    padding: 0.8rem 0.4rem !important;

    max-width: 100% !important;

    width: 100% !important;

  }

  

  /*  �! W! �  � �  Q!  � �! !  � T!!  � */

  .feature-item h3 {

    font-size: 1rem !important;

    margin: 0.5rem 0 !important;

    line-height: 1.2 !important;

  }

  

  .feature-item p {

    font-size: 0.875rem !important;

    margin: 0.5rem 0 !important;

    line-height: 1.4 !important;

  }

  

  .feature-item .feature-icon {

    font-size: 1.5rem !important;

    margin-bottom: 0.5rem !important;

  }

  

  /*  Y �!!  Q  T � StudyHub  � �!  �!S X � 200% */

  .studyhub-image {

    max-width: 350px !important;

    max-height: 300px !important;

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

  }

  

  .top-image {

    max-width: 350px !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }

}



/*    U W U �  Q!  � �!
 !9  �  Q! W! �  � �  Q!  � �! ! � � !9 !&  ! � � X �! U  ! T! �  �  W! Q  �!S X � 200% */

@media screen and (min-width: 800px) and (max-width: 1200px) and (min-resolution: 2dppx) {

  .features-wrapper {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;

    gap: 1rem !important;

    padding: 0 0.6rem !important;

  }

  

  .feature-item {

    min-width: 200px !important;

    min-height: 200px !important;

    padding: 1rem !important;

  }

  

  .feature-item h3 {

    font-size: 1.1rem !important;

  }

  

  .feature-item p {

    font-size: 0.9rem !important;

  }

}



@media screen and (min-width: 1200px) and (max-width: 1600px) and (min-resolution: 2dppx) {

  .features-wrapper {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;

    gap: 1.2rem !important;

    padding: 0 0.8rem !important;

  }

  

  .feature-item {

    min-width: 250px !important;

    min-height: 220px !important;

    padding: 1.2rem !important;

  }

  

  .feature-item h3 {

    font-size: 1.2rem !important;

  }

  

  .feature-item p {

    font-size: 1rem !important;

  }

}



/*  �! W! �  � �  Q!  � �!  U!!  � !
  � U �!
!�  Q!&  ! T! �  U   W! Q  �!S X � 200% */

@media screen and (min-width: 1600px) and (min-resolution: 2dppx) {

  .features-wrapper {

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;

    gap: 1.5rem !important;

    padding: 0 1rem !important;

    max-width: 90% !important;

  }

  

  .feature-item {

    min-width: 300px !important;

    min-height: 250px !important;

    padding: 1.5rem !important;

  }

  

  .feature-item h3 {

    font-size: 1.3rem !important;

  }

  

  .feature-item p {

    font-size: 1.1rem !important;

  }

}



/*  _! Q !S � Q!  � �!
 !9  �  Q! W! �  � �  Q!  � �!  ! �!&  ! � � X � !  U   W! Q  �!S X � 200% */

@media screen and (min-resolution: 2dppx) {

  /*   � Q! � � X  ! � !  Q T! Q! U  �  !9  � ! � � X �!!9  */

  .feature-item,

  .features-wrapper,

  .container,

  .section-features {

    max-width: none !important;

  }

  

  /*  [ � �! W �!!  Q  � � X  W! �  Q �!
  U �  W U  � � �  Q � flexbox */

  .feature-item {

    flex: 1 1 auto !important;

  }

  

  /*  �! W! �  � �  Q!  � �!  Q � U �! � � �  Q ! */

  .feature-item img {

    max-width: 100% !important;

    height: auto !important;

  }

  

  /*  �! W! �  � �  Q!  � �!  Q T U  U T */

  .feature-item .feature-icon {

    width: auto !important;

    height: auto !important;

    max-width: 100% !important;

  }

}



/*    U W U �  Q!  � �!
 !9  �  Q! W! �  � �  Q!  � �!  �!S X � 200%   �  X U � Q �!
 !9 !&  !S!! ! U !!!   �!&  */

@media screen and (max-width: 768px) and (min-resolution: 2dppx) {

  .features-wrapper {

    grid-template-columns: 1fr !important;

    gap: 0.6rem !important;

    padding: 0 0.2rem !important;

  }

  

  .feature-item {

    min-width: 100% !important;

    max-width: 100% !important;

    min-height: 160px !important;

    padding: 0.6rem !important;

  }

  

  .feature-item h3 {

    font-size: 0.9rem !important;

  }

  

  .feature-item p {

    font-size: 0.8rem !important;

  }

}



/*  �! W! �  � �  Q!  � �!  �!S X � 200%   �  W � � !�  �!  �!&  */

@media screen and (min-width: 769px) and (max-width: 1024px) and (min-resolution: 2dppx) {

  .features-wrapper {

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;

    gap: 0.8rem !important;

    padding: 0 0.4rem !important;

  }

  

  .feature-item {

    min-width: 180px !important;

    min-height: 180px !important;

    padding: 0.8rem !important;

  }

}



/* ===  �  _ � R   :  "  \ �     :    Y \ [ _ [ Y  \ R   �   R � � �  _ � �     Z "  200% === */



/*  Y  U W T Q   �  Q V �!   Q Q  W! Q  �!S X � 200% */

@media screen and (min-resolution: 2dppx), 

       screen and (-webkit-min-device-pixel-ratio: 2) {

  

  /*  [!  U  !9  � !!  Q � Q  � �!  T  U W U T   �  Q V �!   Q Q */

  .welcome-button {

    padding: 8px 12px !important;

    font-size: 0.8rem !important;

    min-height: 36px !important;

    min-width: 100px !important;

    max-width: 200px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

  }

  

  /*  � T U  T Q    T  U W T �!&  */

  .welcome-button i {

    font-size: 0.75rem !important;

    line-height: 1 !important;

    margin: 0 !important;

  }

  

  /*  ^ � T!!     T  U W T �!&  */

  .welcome-button span,

  .welcome-button {

    font-size: 0.8rem !important;

    line-height: 1.2 !important;

    font-weight: 500 !important;

  }

  

  /*  Y U !  � !  �!  T  U W U T */

  .logo-actions {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 0.5rem !important;

    justify-content: center !important;

    align-items: center !important;

  }

  

  /*  R � � W!  Q   U!! !
  � �! ! � � !9 !&  ! � � X �! U  ! T! �  � */

  @media screen and (max-width: 768px) {

    .welcome-button {

      padding: 6px 10px !important;

      font-size: 0.75rem !important;

      min-height: 32px !important;

      min-width: 80px !important;

      max-width: 150px !important;

    }

    

    .welcome-button i {

      font-size: 0.7rem !important;

    }

  }

  

  @media screen and (min-width: 769px) and (max-width: 1200px) {

    .welcome-button {

      padding: 10px 14px !important;

      font-size: 0.85rem !important;

      min-height: 40px !important;

      min-width: 120px !important;

      max-width: 180px !important;

    }

    

    .welcome-button i {

      font-size: 0.8rem !important;

    }

  }

  

  @media screen and (min-width: 1201px) {

    .welcome-button {

      padding: 12px 16px !important;

      font-size: 0.9rem !important;

      min-height: 44px !important;

      min-width: 140px !important;

      max-width: 220px !important;

    }

    

    .welcome-button i {

      font-size: 0.85rem !important;

    }

  }

}



/*    U W U �  Q!  � �!
 !9  �  Q! W! �  � �  Q!  � �!  T  U W U T  W! Q  !9 ! U T U X DPI */

@media screen and (-webkit-min-device-pixel-ratio: 2) {

  .welcome-button {

    border-radius: 6px !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;

    transition: all 0.2s ease !important;

  }

  

  .welcome-button:hover {

    transform: translateY(-1px) !important;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;

  }

  

  .welcome-button:active {

    transform: translateY(0) !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;

  }

}