/* 3D Circle Effect for Images
   Designed to complement the existing orbit and radar effects
   with a 3D/volumetric angled look
*/

/* Container for the image with relative positioning */
.img-area {
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: visible;
}

/* Special styling for containers with tilt effect */
.img-area.has-tilt-effect {
    background-color: transparent !important;
}

/* Disable tilt and transform effects for no-tilt elements */
.img-area.no-tilt {
    transform: none !important;
    perspective: none !important;
    transform-style: flat !important;
}

.img-area.no-tilt .image {
    transform: none !important;
    transform-style: flat !important;
}

/* Fix for VanillaTilt inner elements */
.img-area.has-tilt-effect .js-tilt-glare {
    pointer-events: none;
}

/* Ensure the tilt container doesn't affect transparency */
.img-area.has-tilt-effect .js-tilt-container {
    background-color: transparent !important;
}

/* Image styling */
.image {
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

/* Ensure images maintain transparency */
.img-area img {
    background-color: transparent !important;
}

/* Circle decorations around images */
.circle-decoration {
    position: absolute;
    top: 65%; /* Moved down to focus on lower part of image */
    left: 50%;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform-style: preserve-3d;
}

/* Elliptical circles to simulate 3D perspective - removed from Why Choose Us section */

/* 3D-compatible rotation animations */
@keyframes rotateClockwise3D {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateX(30deg) rotateY(0deg);
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    }
    50% {
        transform: translate(-50%, -50%) rotateZ(180deg) rotateX(35deg) rotateY(5deg);
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
    }
    100% {
        transform: translate(-50%, -50%) rotateZ(360deg) rotateX(30deg) rotateY(0deg);
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    }
}

@keyframes rotateCounterClockwise3D {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateX(30deg) rotateY(0deg);
        box-shadow: 0 0 15px rgba(0, 128, 128, 0.2);
    }
    50% {
        transform: translate(-50%, -50%) rotateZ(-180deg) rotateX(35deg) rotateY(-5deg);
        box-shadow: 0 0 20px rgba(0, 128, 128, 0.3);
    }
    100% {
        transform: translate(-50%, -50%) rotateZ(-360deg) rotateX(30deg) rotateY(0deg);
        box-shadow: 0 0 15px rgba(0, 128, 128, 0.2);
    }
}

/* No pulse effect for the image as requested */
.img-area .image img {
    /* Animation removed */
}

/* Keyframes removed */

/* Enhanced 3D effect when hovering - removed for Why Choose Us section */

/* CSS-based rotating circles */
.css-circle-container {
    position: absolute;
    top: 49.25%; /* Fine-tuned vertical position */
    left: 27.5%; /* Fine-tuned position */
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 120px; /* Fixed size */
    height: 120px; /* Fixed size */
    pointer-events: none; /* Allow clicks to pass through */
    transform-style: preserve-3d;
}

.css-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform-origin: center center;
    pointer-events: none;
}

.css-circle-1 {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(0, 210, 255, 0.7);
    transform: translate(-50%, -50%) rotateX(30deg);
    animation: rotateCircle1 15s linear infinite;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

.css-circle-2 {
    width: 70%;
    height: 70%;
    border: 2px solid rgba(0, 128, 128, 0.6);
    transform: translate(-50%, -50%) rotateX(30deg);
    animation: rotateCircle2 12s linear infinite reverse;
    box-shadow: 0 0 10px rgba(0, 128, 128, 0.2);
}

/* About us section single rotating circle */
.about-circle {
    width: 120px; /* Fixed size in pixels for consistency */
    height: 120px; /* Equal height to ensure perfect circle */
    border: 4px dashed rgba(0, 210, 255, 1.0); /* Thinner border */
    border-radius: 50%; /* Ensure it's a perfect circle */
    animation: rotate2D 15s linear infinite;
    position: absolute; /* Ensure proper positioning */
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.7); /* Reduced glow */
    top: 55%;
    left: 35%;
    z-index: 10;
    transition: box-shadow 0.3s ease-out;
    will-change: transform, box-shadow;
    pointer-events: none;
}

/* Increase glow during hover/tilt */
.img-area:hover .about-circle {
    box-shadow: 0 0 60px rgba(0, 210, 255, 0.9);
}

@keyframes rotate2D {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Why choose us section specific circle decorations - removed */

@keyframes rotateCircle1 {
    0% { transform: translate(-50%, -50%) rotateX(30deg) rotateZ(0deg); }
    100% { transform: translate(-50%, -50%) rotateX(30deg) rotateZ(360deg); }
}

@keyframes rotateCircle2 {
    0% { transform: translate(-50%, -50%) rotateX(30deg) rotateZ(0deg); }
    100% { transform: translate(-50%, -50%) rotateX(30deg) rotateZ(360deg); }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .circle-decoration {
        width: 100% !important;
        height: 100% !important;
    }

    .css-circle-container {
        width: 100px;
        height: 100px;
        left: 35%;
    }
}

@media (max-width: 992px) {
    /* Adjust about-circle for tablets */
    .about-circle {
        width: 100px;
        height: 100px;
        border-width: 3px;
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
    }
}

@media (max-width: 768px) {
    /* Adjust about-circle for mobile */
    .about-circle {
        width: 80px;
        height: 80px;
        border-width: 2px;
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
    }
}

@media (max-width: 576px) {
    /* Adjust about-circle for small mobile */
    .about-circle {
        width: 60px;
        height: 60px;
        border-width: 2px;
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
    }
}