/* iFSP Website - Sectors Page CSS */
/* This file contains styles specific to the sectors page */

/* Body background that shows gradient only at 100% zoom */
body {
    background: #00231f; /* Fallback solid color */
    margin: 0;
    padding: 0;
}

/* Show gradient only at 100% zoom (96dpi is standard 100%) */
@media (resolution: 96dpi), (resolution: 1dppx) {
    body {
        background: linear-gradient(135deg, #00231f 0%, #003d35 100%);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/* Extended Header Section - SECTORS SPECIFIC */
.extended-header {
    background: transparent;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    padding: 50px 20px;
}

.icon-container {
    position: relative;
    width: 42vw;
    height: 42vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure the container never goes above header height */
    margin-top: max(0px, calc(120px - 50vh + 21vw));
}


/* SVG container for connecting lines */
.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.connection-lines line {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: opacity 0.5s ease, stroke-dashoffset 1.5s ease;
}

.connection-lines line.animate {
    opacity: 1;
    stroke-dashoffset: 0;
}

.center-icon {
    position: relative;
    z-index: 10;
    width: 15.6vw;
    height: 15.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.center-icon img {
    width: 13.5vw;
    height: 13.5vw;
    object-fit: contain;
}

/* Green circle that covers the center where lines meet */
.center-line-cover {
    position: absolute;
    width: 5.2vw;
    height: 5.2vw;
    background: #00231f;
    border-radius: 50%;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Change center circle color when gradient is showing (100% zoom) */
@media (resolution: 96dpi), (resolution: 1dppx) {
    .center-line-cover {
        background: #00302a;
    }
}

.company-circle {
    position: absolute;
    width: 8vw;
    height: 8vw;
    border: 0.15vw solid white;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25vw 0.75vw rgba(0,0,0,0.2);
    overflow: visible;
    z-index: 5;
}

.company-circle img {
    width: 7.6vw;
    height: 7.6vw;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.company-circle {
    /* center each circle around the container and then offset via top/left below */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.company-circle:hover {
    /* avoid replacing the positioning transform — only bump shadow and z-index */
    box-shadow: 0 0.5vw 1.25vw rgba(0,0,0,0.3);
    z-index: 1001;
}

.company-circle.glow {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
    transition: box-shadow 0.1s ease-in-out;
}

.company-circle:hover img {
    transform: scale(1.1);
}

/* Company Info Tooltip */
.company-info {
    position: absolute;
    background: #f8f9fa;
    border-radius: 1.56vw;
    padding: 0;
    width: 20vw;
    box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.04vw);
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    overflow: hidden;
}

.company-full-image {
    width: 100% !important;
    height: 6.25vw;
    object-fit: cover;
    object-position: center;
    border-radius: 8px 8px 0 0;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block;
    max-width: none !important;
    min-width: 100%;
}

.company-info-content {
    padding: 20px;
}

.company-info h3 {
    color: #00231f;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.company-info p {
    color: #5a6c7d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.company-info h3 {
    color: #00231f;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.company-info p {
    color: #5a6c7d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.company-circle:hover .company-info {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Positioning for each company circle - Evenly spaced around center */
.circle-1 {
    /* Top - move slightly outward */
    left: 50%;
    top: 12%;
    transform: translate(-50%, -50%);
    animation: gentleFloat1 8s ease-in-out infinite;
}

.circle-2 {
    /* Top-Right - move slightly outward */
    left: 78%;
    top: 22%;
    transform: translate(-50%, -50%);
    animation: gentleFloat2 9s ease-in-out infinite;
}

.circle-3 {
    /* Right - move slightly outward */
    left: 88%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: gentleFloat3 7s ease-in-out infinite;
}

.circle-4 {
    /* Bottom-Right - move slightly outward */
    left: 78%;
    top: 78%;
    transform: translate(-50%, -50%);
    animation: gentleFloat4 10s ease-in-out infinite;
}

.circle-5 {
    /* Bottom - move slightly outward */
    left: 50%;
    top: 88%;
    transform: translate(-50%, -50%);
    animation: gentleFloat5 6s ease-in-out infinite;
}

.circle-6 {
    /* Bottom-Left - move slightly outward */
    left: 22%;
    top: 78%;
    transform: translate(-50%, -50%);
    animation: gentleFloat6 8.5s ease-in-out infinite;
}

.circle-7 {
    /* Left - move slightly outward */
    left: 12%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: gentleFloat7 7.5s ease-in-out infinite;
}

.circle-8 {
    /* Top-Left - move slightly outward */
    left: 22%;
    top: 22%;
    transform: translate(-50%, -50%);
    animation: gentleFloat8 9.5s ease-in-out infinite;
}

/* Company Info positioning - tooltips positioned outward from circles */
.circle-1 .company-info {
    top: 80%; /* Move tooltip lower for top circle to avoid cutoff */
    left: 130px; /* Position to the right of top circle */
    transform: translateY(-50%) translateX(20px);
}

.circle-1:hover .company-info {
    transform: translateY(-50%) translateX(0);
}

.circle-2 .company-info {
    top: -20px; /* Position above and to the right (outward) */
    left: 130px;
    transform: translateY(-20px);
}

.circle-2:hover .company-info {
    transform: translateY(0);
}

.circle-3 .company-info {
    top: 50%;
    left: 130px; /* Position to the right (outward) */
    transform: translateY(-50%) translateX(20px);
}

.circle-3:hover .company-info {
    transform: translateY(-50%) translateX(0);
}

.circle-4 .company-info {
    bottom: -20px; /* Position below and to the right (outward) */
    left: 130px;
    transform: translateY(20px);
}

.circle-4:hover .company-info {
    transform: translateY(0);
}

.circle-5 .company-info {
    top: 20%; /* Move tooltip higher for bottom circle to avoid cutoff */
    right: 130px; /* Position to the right of bottom circle instead of below */
    transform: translateY(-50%) translateX(10px);
}

.circle-5:hover .company-info {
    transform: translateY(-50%) translateX(0);
}

.circle-6 .company-info {
    bottom: -20px; /* Position below and to the left (outward) */
    right: 130px;
    transform: translateY(20px);
}

.circle-6:hover .company-info {
    transform: translateY(0);
}

.circle-7 .company-info {
    top: 50%;
    right: 130px; /* Position to the left (outward) */
    transform: translateY(-50%) translateX(-20px);
}

.circle-7:hover .company-info {
    transform: translateY(-50%) translateX(0);
}

.circle-8 .company-info {
    top: -20px; /* Position above and to the left (outward) */
    right: 130px;
    transform: translateY(-20px);
}

.circle-8:hover .company-info {
    transform: translateY(0);
}

/* Gentle floating animations - subtle movement from fixed positions */
@keyframes gentleFloat1 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-8px); }
}

@keyframes gentleFloat2 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); }
    50% { transform: translate(-50%, -50%) translateY(-6px) translateX(4px); }
}

@keyframes gentleFloat3 {
    0%, 100% { transform: translate(-50%, -50%) translateX(0px); }
    50% { transform: translate(-50%, -50%) translateX(-8px); }
}

@keyframes gentleFloat4 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); }
    50% { transform: translate(-50%, -50%) translateY(6px) translateX(4px); }
}

@keyframes gentleFloat5 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(8px); }
}

@keyframes gentleFloat6 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); }
    50% { transform: translate(-50%, -50%) translateY(6px) translateX(-4px); }
}

@keyframes gentleFloat7 {
    0%, 100% { transform: translate(-50%, -50%) translateX(0px); }
    50% { transform: translate(-50%, -50%) translateX(8px); }
}

@keyframes gentleFloat8 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); }
    50% { transform: translate(-50%, -50%) translateY(-6px) translateX(-4px); }
}