.service-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 450px;
      }

      .service-info {
        align-items: center;
        padding: 2rem;
        text-align: center;
        height: 100%;
        width: 100%;
      }

      .service-info h4 {
        font-size: 1.5rem;
      }

      .icon-grid {
        font-size: 3rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
        margin-top: 2rem;
        width: 100%;
      }

      .resume-header-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-top: 70px;
      }

      .btn {
        background-color: var(--main-color);
        color: #fff;
        padding: 0.75rem 1.5rem;
        border-radius: 2rem;
        text-decoration: none;
        font-weight: 600;
        transition: background-color 0.3s ease;
      }

      .btn:hover {
        background-color: var(--second-bg-color);
        color: var(--main-color);
      }

      /* Add spacing between this section and the skills section below */
      #resume {
        padding-top: 3rem;
      }

      .timeline {
        position: relative;
        padding: 6rem 12%;
        background-color: var(--second-bg-color);
      }

      .timeline h2.heading {
        text-align: center;
        margin-bottom: 5rem;
      }

      .timeline-container {
        position: relative;
        margin: 0 auto;
        padding-left: 2rem;
        border-left: 3px solid var(--main-color);
      }

      .timeline-item {
        position: relative;
        width: 100%;
        margin-bottom: 4rem;
      }

      .timeline-item.left .content {
        margin-left: 3rem;
        text-align: left;
      }

      .timeline-item.right .content {
        margin-left: 3rem;
        text-align: left;
        transform: translateX(50%);
      }

      .timeline-item .content {
        background-color: var(--bg-color);
        color: var(--text-color);
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        position: relative;

        max-width: 600px;
        width: 100%;
        word-wrap: break-word;
      }

      .timeline-location {
        font-size: 1.4rem;
        color: var(--main-color);
        margin-bottom: 0.5rem;
      }

      /* Timeline dot */
      .timeline-item::before {
        content: "";
        position: absolute;
        left: -1.6rem;
        top: 1.2rem;
        width: 1.2rem;
        height: 1.2rem;
        background-color: var(--main-color);
        border-radius: 50%;
        border: 2px solid var(--bg-color);
      }

      /* Certifications Grid */
      .cert-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
        justify-items: center;
      }

      .cert-card {
        perspective: 1000px;
        width: 250px;
        height: 250px;
      }

      .card-inner {
        width: 100%;
        height: 250px;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        position: relative;
      }

      .cert-card:hover .card-inner {
        transform: rotateY(180deg);
      }

      .card-front,
      .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1rem;

        color: var(--text-color);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
      }
      .card-front {
        background-color: var(--main-color);
      }

      .card-back {
        background-color: gray;
      }

      .card-front i {
        font-size: 3.5rem;
        margin-bottom: 1rem;
        color: var(--main-color);
      }

      .card-front h4 {
        font-size: 1.4rem;
      }

      .card-back {
        transform: rotateY(180deg);
        font-size: 1rem;
        line-height: 1.6;
        text-align: center;
      }
      .myCertSwiper {
        max-width: 1100px;
        margin: 0 auto;
        padding: 2rem 2.5rem;
        position: relative;
      }
      .swiper-slide {
        display: flex;
        justify-content: center;
        padding: 0 10px; /* creates horizontal space inside each slide */
        box-sizing: border-box;
      }
      .swiper-button-prev,
      .swiper-button-next {
        color: var(--main-color);
        z-index: 10;
      }

      .slide-label {
        text-align: center;
        margin-top: 6rem;
        font-weight: 600;
        color: var(--main-color);
        font-size: 1.5rem;
      }

      .swiper-pagination {
        margin-top: 1rem;
      }
      .swiper-pagination-bullet {
        background: white !important;/* unselected bullets */
        opacity: 1;
      }

      .swiper-pagination-bullet-active {
        background: var(--main-color); /* active bullet uses your theme */
      }

      .education-card {
        margin: 3rem auto 5rem auto;
        padding: 2rem 3rem;
        max-width: 700px;
        background-color: var(--bg-color);
        color: var(--text-color);
        border-radius: 1rem;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);

        background-color: rgba(255, 255, 255, 0.85); 
        backdrop-filter: blur(6px);
      }

      .edu-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;
      }

      .edu-text {
        flex: 1;
        text-align: left;
        min-width: 250px;
      }

      .edu-text h3 {
        margin: 0;
        font-size: 3rem;
        color: black;
      }

      .edu-text p{

        color: black;
      }

      .edu-text .subtext {
        font-style: italic;
        margin-top: 0.3rem;
        color: var(--main-color);
        font-size: 2rem;
      }

      .edu-text .highlight {
        color: var(--main-color);
        font-weight: 600;
        margin: 0.5rem 0;
      }

      .edu-logo {
        width: 160px;
        height: auto;
        transition: transform 0.3s ease, filter 0.3s ease;
      }

      .edu-logo:hover {
        transform: scale(1.1);
        filter: brightness(1.1);
      }

      .timeline-item h3 {
        font-size: 1.8rem; 
       
      }
      
      .timeline-item p {
        font-size: 1.4rem; 
        line-height: 1.6;
      }

      /* <-- modal styling --> */

      .modal {
        display: none;
        position: fixed;
        z-index: 9999;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        

        background-color: rgba(0, 0, 0, 0.5);
          padding-top: 100px;
      
        
      }
      
      .modal-content {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px); /* for Safari */
        border-radius: 16px;
        padding: 30px;
        color: white;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        border: 1px solid rgba(255, 255, 255, 0.2);
        width: 80%;
        max-width: 600px;
        margin: auto;
        position: relative;
        text-align: left;

      
        
     
          animation: fadeInModal 0.3s ease-in-out;
        
        
      }
      @keyframes fadeInModal {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
      }
      
      .close {
        position: absolute;
        top: 15px;
        right: 25px;
        font-size: 28px;
        font-weight: bold;
        color: #aaa;
        cursor: pointer;
      }
      
      .close:hover {
        color: black;
      }