/* Wrapping container for image and rotating border */
.profile-wrapper {
    position: relative;
    width: 270px;
    height: 270px;
    margin: 0 auto;
}

/* Rotating dashed circle */
.rotating-border {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 257px;
    height: 257px;
    border: 2px dashed #4dabf7;                                       /* dashed circle color */
    box-shadow: 0 0 4px rgba(70, 59, 59, 0.5), 0 0 24px rgba(18, 52, 86, 0.8);          /* dashed circle outer ring color glow */
    border-radius: 50%;
    animation: rotate 50s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Profile image centered inside rotating border */
.profile-img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #123456;                  /* photo outer border circle color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Keyframes for rotation */
@keyframes rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* EMAIL CSS code + color + icons */
.email-link {
  color: #3682ceff; /* Set text color to black */
  font-size: 18px;
  text-decoration: none;
  transition: text-shadow 0.3s ease;
}

.email-link i {
  color: #D44638; /* Gmail red for the icon only */
  margin-right: 6px;
}


/* PHONE CSS code + color + icons */
.phone-link {
  color: #3682ceff; /* Text color */
  font-size: 18px;
  text-decoration: none;
  transition: text-shadow 0.3s ease;
}

.phone-link i {
  color: #28A745; /* A friendly green (Bootstrap success green) */
  margin-right: 6px;
}


/* About Me button */
.about-button {
    font-size: 18px;
    padding: 10px 24px;
    border-radius: 12px;
}

/* Social media icon styles */
.social-icons a i {
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Individual icon colors */
.social-icons a[href*="scholar.google"] i { color: #4285F4; }     /* Google Scholar - Blue */
.social-icons a[href*="orcid.org"] i { color: #A6CE39; }          /* ORCID - Green */
.social-icons a[href*="grabcad.com"] i { color: #C73E1D; }        /* GrabCAD - Reddish Brown */
.social-icons a[href*="youtube.com"] i { color: #FF0000; }        /* YouTube - Red */
.social-icons a[href*="linkedin.com"] i { color: #0077B5; }       /* LinkedIn - Blue */
.social-icons a[href*="facebook.com"] i { color: #1877F2; }       /* Facebook - Blue */
.social-icons a[href*="x.com"] i { color: #000000; }              /* Twitter (X) - Black */

/* Hover effect */
.social-icons a i:hover {
    filter: brightness(1.3);
    transform: scale(1.3);
    transition: all 0.3s ease;
}

/* Mobile */
@media (max-width: 767px) {
    .profile-wrapper {
        width: 220px;
        height: 220px;
        margin-bottom: 20px;
    }

    .rotating-border {
        width: 210px;
        height: 210px;
    }

    .profile-img {
        width: 200px;
        height: 200px;
    }

    .text-section {
        margin-bottom: 30px;
    }
}

/* High-res */
@media (min-width: 2000px) {
    .profile-wrapper {
        width: 320px;
        height: 320px;
    }

    .rotating-border {
        width: 320px;
        height: 320px;
        border-width: 6px;
    }

    .profile-img {
        width: 300px;
        height: 300px;
        border-width: 6px;
    }

    .about-button {
        font-size: 20px;
    }

    .social-icons a i {
        font-size: 26px;
    }
}

.hero-glass-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);         /* transparent white */
    backdrop-filter: blur(10px);                  /* blur effect */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 30px;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Optional media tweak for smaller screens */
@media (max-width: 768px) {
    .hero-glass-container {
        flex-direction: column;
        padding: 20px;
        gap: 24px;
    }
}