html { overflow-y: scroll; } /* keep scrollbar visible */


/* _____________ >>> ABOUT PHOTO<<< CSS CODE STARTS HERE _____________ */
        .profile-image-about{
            width:180px;
            height:180px;
            border-radius:50%;
            object-fit:cover;
            border:3px solid #dce8fc;
        }

/* _____________wrapper anchors the ring_____________ */
        .profile-wrapper-about{
            position:relative;                                      /* lets the ring sit on top */
            display:inline-block;
            margin-top:-5%;
            margin-bottom:1%;
        }

/* _____________rotating dashed circle_____________ */
        .circle-rotate-about{
            position:absolute;
            top:50%; left:50%;
            transform:translate(-50%,-50%);                         /* true centre */
            width:187px; height:187px;
            border:2px dashed #4dabf7;
            border-radius:50%;
            pointer-events:none;                                    /* image remains clickable */
            animation:spin 60s linear infinite;                     /* adjust 10 s for speed */
        }

        @keyframes spin{
            to{transform:translate(-50%,-50%) rotate(360deg);}
        }
/* _____________ >>> ABOUT PHOTO<<< CSS CODE ENDS HERE _____________ */




/* __________ "FULL CV" BUTTON CUSTOM STYLE (Overrides Bootstrap) << Starts __________ */
.full-cv-button {
    font-size: 22px;
    background-color: #1b4f72;
    padding: 2px 18px;
    border-radius: 20px;
    text-decoration: none;
    color: #ffffff;
    border: 2px solid transparent; /* Reserve space to avoid jump on hover */
    transition: all 0.3s ease;
    display: inline-block;
}

.full-cv-button:hover {
    background-color: #ffffff;
    color: #1b4f72;
    border: 2px solid #1b4f72;
    box-shadow: 0 0 12px rgba(27, 79, 114, 0.5);
    transform: translateY(-1px);                /* ___________Slightly enlarge on hover. And scale(1.01) bumps the text___________ */
    text-decoration: none;
}
/* __________ "FULL CV" BUTTON CUSTOM STYLE (Overrides Bootstrap) << Ends __________ */



/* __________ ABOUT HEADING / TITLE [TEXT + COLOR] <<___ CSS STARTS HERE __________ */
/* __________ ABOUT HEADING / TITLE [TEXT + COLOR] <<___ CSS STARTS HERE __________ */
 /* __________ ABOUT HEADING / TITLE [TEXT + COLOR] <<___ CSS STARTS HERE __________ */
/* __________ ABOUT HEADING / TITLE [TEXT + COLOR] <<___ CSS STARTS HERE __________ */
.section-title-about-smart-color-text {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.4rem;
    letter-spacing: 5px;
    font-weight: bold;
    color: white;

    display: inline-block; /* Fit to content width */
    padding: 6px 17px;
    margin-bottom: 20px;

    border-bottom: 2px solid #123456;
    border-radius: 10px; /* Optional: rounded corners for a "smart" look */

    background: linear-gradient(to right, #2f7cc9, #188283);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow */
}

  .bullet-point-about-smart-color-text {
    margin-left: -10px;                 /* _________bullet point __________ */
  }
/* __________ ABOUT HEADING / TITLE [TEXT + COLOR] <<___ CSS STARTS HERE __________ */
/* __________ ABOUT HEADING / TITLE [TEXT + COLOR] <<___ CSS STARTS HERE __________ */




        
/* _____________ CERTIFICATION BADGE GRID <<< BADGES CSS CODE STARTS HERE _____________ */
/* _____________ CERTIFICATION BADGE GRID <<< BADGES CSS CODE STARTS HERE _____________ */
        .cert-grid {
            display: flex;
            flex-direction: column;
            align-items: center;                                /* center the grid */
            gap: 1rem;                                          /* space between tiles */
            margin-top: 3rem;
        }
        
        .cert-row { 
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.2rem;
        }

        .cert-grid a {                                              /* Optional: make image sizing easy to adjust */
            flex: 0 0 100px;                                        /* smaller tile width */  /* 110 px wide tiles, never shrink below */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: block;
            width: 120px;                                           /* easy to resize all badges here */
        }

        .cert-grid img {
            width: 100%;                                            /* fix width instead of 100% */
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,.15);
            display: block;
        }

/* __________________________ Hover Effect __________________________ */
        .cert-grid a:hover,
        .cert-grid a:focus {
          transform: translateY(-6px) scale(1.05);
          box-shadow: 0 8px 16px rgba(0,0,0,.25);
        }

/* _____________ Responsive hide for certifications on small screens _______________ */
        @media (max-width: 767.98px) {
          #certifications {
            display: none;
          }
        }
/* _____________ CERTIFICATION BADGE GRID <<< BADGES CSS CODE ENDS HERE _____________ */






/* ________ SOLIDWORKS Certificate Verifications With CERTIFICATE ID AND CREDLY <<< CSS STARTS HERE ________ */ 
/* ________ SOLIDWORKS Certificate Verifications With CERTIFICATE ID AND CREDLY <<< CSS STARTS HERE ________ */
/* ________________ LINE TO LINE + LIST TO LIST SPACING <<< STARTS HERE _______________ */

    .certification-title {
        font-weight: bold;
        font-size: 1.8rem; /* adjust as needed */
        background: linear-gradient(to right, #d3dce3, white);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text; /* fallback for non-webkit */
        color: transparent;
    }

    .smart-list-about-certification-links li {
        margin-bottom: .3rem;         /* creates space between list items */
        line-height: 1.2;              /* controls spacing within a long line */
    }
    
    ol.smart-list-about-certification-links {
        list-style: decimal;
    }
    
    ol.smart-list-about-certification-links li::marker {
        color: gray;
    }
    

/* ______________ONLY FOR MOBILE TEXTS (≥ 767 px)_______________ */
@media (max-width: 767px) {
    .smart-list-about-certification-links li {
        margin-bottom: 1rem;         /* creates space between list items */
        line-height: 1.4;              /* controls spacing within a long line */
    }
}

    
/* ________________ solidworks certs text color and formatting _______________ */
    .verification-text {
        color: #6c757d;
        font-style: italic;
        display: block;
        margin-top: 4px;
        line-height: 1.4;
    }

    ol.certification-list li {
        margin-bottom: 18px;
    }
/* ________________ LINE TO LINE + LIST TO LIST SPACING <<< STARTS HERE _______________ */
/* ________ SOLIDWORKS Certificate Verifications With CERTIFICATE ID AND CREDLY <<< CSS Ends HERE ________ */ 
/* ________ SOLIDWORKS Certificate Verifications With CERTIFICATE ID AND CREDLY <<< CSS Ends HERE ________ */