/* Resume Tips Circular Layout - Matching the screenshot exactly */
.circular-tips-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: u0px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.circular-wrapper {
    position: relative;
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center Image */
.center-image {
    width: 55%;
    height: 55%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
    position: relative;
}

.center-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Circular Tips - Each tip is a card with number above title */
.tip-circle {
    position: absolute;
    width: 200px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 15;
}

/* Position each tip in a circle */
.tip-06 { 
    top: 416px; 
    left: 80px; 
} /* Top */
.tip-01 { 
    top: 198px; 
    right: 170px; 
} /* Top Right */
.tip-03 { 
    bottom: 176px; 
    right: 169px; 
} /* Bottom Right */
.tip-04 { 
    bottom: 86px; 
    left: 405px; 
} /* Bottom */
.tip-05 { 
    bottom: 176px; 
    left: 171px; 
} /* Bottom Left */
.tip-07 { 
    top: 198px; 
    left: 181px; 
} /* Top Left */
.tip-02 { 
    top: 416px; 
    right: 80px; 
} /* Right Center */

/* Tip Number - Large and prominent */
.tip-circle .tip-number {
    font-size: 30px;
    font-weight: 800;
    color: #0F3E74;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* To be changed to cater per number bubble*/
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    flex-direction: column;
}

.tip-01 .tip-number {
    color: #FFFFFF;
    background: #A93189;
}

.tip-02 .tip-number {
    color: #0F3E74;
    background: #40AEE3;
}

.tip-03 .tip-number {
    color: #0F3E74;
    background: #EEB256;
}

.tip-04 .tip-number {
    color: #FFFFFF;
    background: #2666EB;
}

.tip-05 .tip-number {
    color: #0F3E74;
    background: #CED951;
}

.tip-06 .tip-number {
    color: #FFFFFF;
    background: #878787;
}

.tip-07 .tip-number {
    color: #FFFFFF;
    background: #1D70AC;
}

.tip-05 h2, .tip-02 h2, .tip-03 h2 { color: #0F3E74; margin: 0px }
.tip-01 h2, .tip-04 h2, .tip-06 h2, .tip-07 h2 { color: #FFF; margin: 0px;}

.tip-01:hover h2, .tip-04:hover h2, .tip-06:hover h2, .tip-07:hover h2 {
    color: #0F3E74;
}
/* .tip-03 h2 { color: #0F3E74 }
.tip-01 h2 { color: #0F3E74 }
.tip-01 h2 { color: #0F3E74 }
.tip-01 h2 { color: #0F3E74 }
.tip-01 h2 { color: #0F3E74 } */


/* Tip Title - Below the number */
.tip-circle .tip-title {
    font-size: 16px;
    font-weight: 600;
    /* color: #333;  // this should be as per bubble number*/
    line-height: 1.5;
    margin-bottom: 10px;
    transition: all 0.4s ease;
    padding: 0px 12px 15px;
}

/* Hover Text - Hidden by default */
.tip-circle .tip-hover-text {
    position: absolute;
    top: 55%;
    right: -9px;
    transform: translateX(-50%) translateY(10px);
    width: 250px;
    border-radius: 15px;
    padding: 15px 20px;
    color: white;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 17;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin-top: 20px;
    text-align: start;
}

.tip-02 .tip-hover-text {
    width: 310px;
    top: 7%;
    right: 3px;
}

.tip-03 .tip-hover-text {
    top: -75px;
    width: 316px;
    right: -33px;
}
.tip-04 .tip-hover-text {
    top: -123px;
    left: 98px;
    text-align: center;
    width: 290px;
    padding-bottom: 24px;
    z-index: 20;
}
.tip-05 .tip-hover-text {
    top: -91px;
    left: 258px;
    padding-bottom: 21px;
    padding-left: 25px;
}
.tip-06 .tip-hover-text {
    top: -20px;
    width: 401px;
    left: 354px;
    padding: 15px 20px 15px 27px;
}
.tip-07 .tip-hover-text {
    left: 250px;
    top: 102px;
    width: 325px;
    padding: 30px 15px 15px 20px;
}



/* Arrow for the hover bubble */
/* .tip-circle .tip-hover-text::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #764ba2;
} */

/* Hover Effects */
.tip-circle:hover {
    z-index: 15;
}

.tip-circle:hover .tip-number {
    transform: scale(0.9);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    background: #FFFFFF;
    color: #0F3E74;
    position: relative;
    z-index: 20;
}

.tip-circle:hover .tip-title {
    color: #0F3E74;
    /* box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3); */
}

.tip-circle:hover .tip-hover-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    background: #FFFFFF;
    color: #0F3E74;
}

/* Mobile Layout - Hidden on Desktop */
.mobile-tips {
    display: none;
}

/* Responsive Design */
@media (max-width: 1100px) {
    .circular-wrapper {
        width: 100%;
        height: 100%;
        margin: 90px auto;
    }
    
    .center-image {
        width: 70%;
        height: 70%;
    }
    
    .tip-01 {
        top: -2%;
        left: 62%;
        transform: scale(0.9);
    }

    .tip-02 {
        top: 32%;
        right: 2%;
        transform: scale(0.9);
    }
    .tip-03 {
        bottom: 0%;
        right: 10%;
        transform: scale(0.9);
    }
    .tip-04 {
        top: 92%;
        left: 39%;
        transform: scale(0.9)
     }
    .tip-05 {
        bottom: 0%;
        left: 10%;
        transform: scale(0.9);
     }
    .tip-06 {
        top: 32%;
        left: 2%;
        transform: scale(0.9);
     }
    .tip-07 {
        top: -2%;
        left: 18%;
        transform: scale(0.9);}
    
    .tip-circle .tip-number {
        width: 150px;
        height: 150px;
        font-size: 42px;
    }
}

/* @media (max-width: 950px) {
    .circular-wrapper {
        width: 800px;
        height: 800px;
    }
    
    .center-image {
        width: 220px;
        height: 220px;
    }
    
    .tip-01 { top: 30px; left: 320px; }
    .tip-02 { top: 150px; right: 140px; }
    .tip-03 { bottom: 150px; right: 140px; }
    .tip-04 { bottom: 30px; left: 320px; }
    .tip-05 { bottom: 150px; left: 140px; }
    .tip-06 { top: 150px; left: 140px; }
    .tip-07 { top: 300px; right: 40px; }
    
    .tip-circle .tip-number {
        width: 70px;
        height: 70px;
        font-size: 36px;
    }
    
    .tip-circle .tip-title {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .tip-circle .tip-hover-text {
        width: 220px;
        font-size: 13px;
    }
} */

@media (max-width: 850px) {
    /* Hide circular layout on mobile */
    .circular-wrapper {
        display: none;
    }
    
    /* Show mobile layout - exactly matching the screenshot style */
    .mobile-tips {
        display: block;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .mobile-tip-item {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        padding: 25px;
        margin-bottom: 15px;
        text-align: center;
        transition: all 0.3s ease;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        position: relative;
        cursor: pointer;
    }

    .item-01 {
        background: transparent linear-gradient(180deg, #A93189 0%, #551945 100%) 0% 0% no-repeat padding-box;
    }
    .item-02 {
        background: transparent linear-gradient(180deg, #41AEE3 0%, #0071AC 100%) 0% 0% no-repeat padding-box;
    }
    .item-03 {
        background: transparent linear-gradient(180deg, #EEB256 0%, #93651E 100%) 0% 0% no-repeat padding-box;
    }
    .item-04 {
        background: transparent linear-gradient(180deg, #2666EB 0%, #1040a3 100%) 0% 0% no-repeat padding-box;
    }
    .item-05 {
        background: transparent linear-gradient(180deg, #CED951 0%, #676D29 100%) 0% 0% no-repeat padding-box;
    }
    .item-06 {
        background: transparent linear-gradient(180deg, #EAEAEA 0%, #7F8083 100%) 0% 0% no-repeat padding-box;
    }
    .item-07 {
        background: transparent linear-gradient(180deg, #1D70AC 0%, #0d4771 100%) 0% 0% no-repeat padding-box;
    }
    
    .mobile-tip-number {
        font-size: 42px;
        font-weight: 800;
        color: white;
        background: rgba(255, 255, 255, 0.2);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        border: 3px solid white;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }
    
    .mobile-tip-title {
        font-size: 18px;
        font-weight: 600;
        color: white;
        line-height: 1.5;
        margin-bottom: 0;
        transition: all 0.3s ease;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .mobile-tip-hover-text {
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        color: rgba(255, 255, 255, 0.95);
        font-size: 15px;
        line-height: 1.6;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 12px;
        margin-top: 0;
    }
    
    /* Hover effect for mobile items */
    .mobile-tip-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 30px -10px rgba(102, 126, 234, 0.6);
    }
    
    .mobile-tip-item:hover .mobile-tip-number {
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.3);
    }
    
    .mobile-tip-item:hover .mobile-tip-hover-text {
        max-height: 250px;
        padding: 15px;
        margin-top: 15px;
    }
}

/* Animation for the center image */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.center-image {
    animation: pulse 4s infinite ease-in-out;
}

/* Subtle connecting lines (optional) */
.circular-wrapper::before {
    content: '';
    position: absolute;
    width: 65%;
    height: 65%;
    /* border: 2px dashed rgba(102, 126, 234, 0.2); */
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}