.important-links-section {
     padding: 20px 20px;
     /* border: 1px solid var(--border-color-2); */
     background: var(--primary-grad-100);
 }

 .links-container {
     max-width: 1200px;
     margin: auto;
 }

 /* HEADER */
 .section-header {
     text-align: center;
     margin-bottom: 10px;
 }

 .section-header h2 {
     font-size: 1.5rem;
     color: var(--text-color-5);
     /* margin-bottom: 12px; */
     font-weight: 500;
     text-align: left;
 }

 .section-header p {
     color: var(--text-light);
     font-size: 16px;
 }

 /* GRID */
 .important-links-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 25px;
 }

 /* CARD */
 .important-link-card {
     position: relative;
     background: var(--bg-color-white-1);
     border-radius: 5px;
     padding: 18px 14px;
     text-decoration: none;
     overflow: hidden;
     display: flex;
     align-items: center;
     gap: 18px;
     transition: 0.35s ease;
     border: 1px solid rgba(0, 0, 0, 0.06);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .important-link-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 5px;
     height: 100%;
     background: linear-gradient(to bottom, var(--primary), var(--secondary-color));
     transition: 0.3s;
 }

 .important-link-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
 }

 .link-icon {
     min-width: 45px;
     width: 45px;
     height: 45px;
     border-radius: 5px;
     background: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;

     transition: 0.3s;
 }

 .link-icon i {
     color: var(--accent-1);
 }

 .important-link-card:hover .link-icon {
     transform: scale(1.08) rotate(4deg);
 }

 .link-content {
     flex: 1;
 }

 .link-content h3 {
     margin: 0;
     font-size: 0.9rem;
     color: var(--primary);
     font-weight: 500;
 }

 .link-content span {
     color: var(--accent-1);
     font-size: 14px;
 }

 .link-arrow {
     font-size: 18px;
     color: var(--primary);
     opacity: 0.7;
     transition: 0.3s;
 }

 .important-link-card:hover .link-arrow {
     transform: translate(4px, -4px);
     opacity: 1;
 }

 /* MOBILE */
 @media(max-width:768px) {

     .important-links-section {
         padding: 50px 15px;
     }

     .section-header h2 {
         font-size: 30px;
     }

     .important-link-card {
         padding: 22px 18px;
     }

     .link-content h3 {
         font-size: 18px;
     }

     .link-icon {
         width: 58px;
         height: 58px;
         min-width: 58px;
         font-size: 22px;
     }
 }