/* Section Background Styles - Animated Floating Shapes */

/* Shared Animation Definitions */
@keyframes floatSlow {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -50px) rotate(10deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes floatMedium {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, 40px) scale(1.1);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* Base class for all animated sections to set positioning */
.bg-marine-floating,
.bg-pattern-about,
.bg-pattern-corruption,
.bg-pattern-activity,
.bg-pattern-contact {
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Establish stacking context */
}

/* Ensure content is above background */
.bg-marine-floating .container,
.bg-pattern-about .container,
.bg-pattern-corruption .container,
.bg-pattern-activity .container,
.bg-pattern-contact .container {
    position: relative;
    z-index: 2;
}

/* Pseudo-element shared styles */
.bg-marine-floating::before,
.bg-marine-floating::after,
.bg-pattern-about::before,
.bg-pattern-about::after,
.bg-pattern-corruption::before,
.bg-pattern-corruption::after,
.bg-pattern-activity::before,
.bg-pattern-activity::after,
.bg-pattern-contact::before,
.bg-pattern-contact::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    opacity: 0.6;
}


/* ==========================================================================
   1. Why Choose Us (Marine Blue)
   ========================================================================== */
.bg-marine-floating {
    background-color: #f4fbfd;
    /* Very light blue */
}

.bg-marine-floating::before {
    top: 10%;
    right: 10%;
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z' fill='%23b2ebf2' fill-opacity='0.4'/%3E%3C/svg%3E");
    /* Diamond */
    animation: floatSlow 15s ease-in-out infinite;
}

.bg-marine-floating::after {
    bottom: 10%;
    left: 5%;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%234dd0e1' stroke-width='2' fill='none' stroke-opacity='0.3'/%3E%3C/svg%3E");
    /* Ring */
    animation: floatMedium 20s ease-in-out infinite reverse;
}


/* ==========================================================================
   2. About Section (Clean White/Teal)
   ========================================================================== */
.bg-pattern-about {
    background-color: #ffffff;
}

.bg-pattern-about::before {
    top: 5%;
    left: 5%;
    width: 180px;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23e0f2f1' fill-opacity='0.6'/%3E%3C/svg%3E");
    /* Circle */
    animation: floatMedium 18s ease-in-out infinite;
}

.bg-pattern-about::after {
    bottom: 20%;
    right: 10%;
    width: 120px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,50 Q50,0 90,50 T170,50' stroke='%23b2dfdb' stroke-width='4' fill='none'/%3E%3C/svg%3E");
    /* Wave line */
    animation: floatSlow 22s ease-in-out infinite;
}


/* ==========================================================================
   3. Zero Corruption (Light Gold/Yellow)
   ========================================================================== */



.bg-pattern-corruption::before {
    top: 15%;
    left: 10%;
    width: 160px;
    height: 160px;
    /* Hexagon/Shield Shape */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%23ff0000' fill-opacity='0.4'/%3E%3C/svg%3E");
    animation: floatSlow 16s ease-in-out infinite;
}

.bg-pattern-corruption::after {
    bottom: 10%;
    right: 5%;
    width: 140px;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='20' y='20' width='60' height='60' rotate='45' fill='none' stroke='%23ff0000' stroke-width='2' stroke-opacity='0.2'/%3E%3C/svg%3E");
    /* Diamond Outline */
    animation: floatMedium 24s ease-in-out infinite reverse;
}


/* ==========================================================================
   4. Certificates/Activity (Light Indigo)
   ========================================================================== */
.bg-pattern-activity {
    background-color: #e8eaf6;
    /* Light indigo base */
}

.bg-pattern-activity::before {
    top: 5%;
    right: 15%;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='80' height='80' rx='10' fill='%23c5cae9' fill-opacity='0.5'/%3E%3C/svg%3E");
    /* Rounded Square */
    animation: floatMedium 19s ease-in-out infinite;
}

.bg-pattern-activity::after {
    bottom: 15%;
    left: 10%;
    width: 180px;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 H90 V90 H10 Z' fill='none' stroke='%237986cb' stroke-width='1' stroke-dasharray='5,5' opacity='0.3'/%3E%3C/svg%3E");
    /* Dashed Square */
    animation: floatSlow 25s ease-in-out infinite reverse;
}


/* ==========================================================================
   5. Contact (Cyan/Connect)
   ========================================================================== */

.bg-pattern-contact::before {
    top: 20%;
    left: 20%;
    width: 220px;
    height: 220px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%2300008B' stroke-width='8' stroke-opacity='0.1'/%3E%3C/svg%3E");
    /* Thick Ring */
    animation: floatSlow 30s linear infinite;
}

.bg-pattern-contact::after {
    bottom: 5%;
    right: 5%;
    width: 160px;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L100 100 L0 100 Z' fill='%2300008B' fill-opacity='0.4'/%3E%3C/svg%3E");
    /* Triangle */
    animation: floatMedium 15s ease-in-out infinite;
}