/* landing page */

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;     
 }
 
.landing-container {
     min-height: 100vh;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .content-wrapper {
    background-color: #FFFFFF;
    border-radius: 62px;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: fit-content;
    position: relative; 
    padding: 1rem;
}

.top-logo {
    width: 100%;
    max-width: clamp(200px, 30vw, 350px);
    margin: 0 auto;
    position: absolute;
    left: 46.69%;
    transform: translate(-50%, -50%);
    top: 5%;
    z-index: 1;
}

.landing-title h1 {
    font-size: clamp(1.75rem, 5vw, 4rem);
    font-weight: 600;
    color: #0061AF;
    padding-top: 10rem;
    text-align: center;
}


.landing-title .green {
    color: #009933;
    font-size: 1.3rem;
}

/* circles */


.pre-footer-anim {
    width: 40%;
    margin: auto;
    padding-block: 1rem;
}

.pre-footer-anim .logo-wrp {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.pre-footer-anim .logo-wrp .logo-outer-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%)
}

.pre-footer-anim .logo-wrp .logo-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

.pre-footer-anim .logo-outer-svg {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    border-radius: 100%;
    animation: outerDiagramRotation 100s linear infinite;
    animation-delay: 0.1s;
    animation-fill-mode: backwards;
}

.pre-footer-anim .logo-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;
    height: 57%; 
    transform: translate(-50%, -50%);
    animation: innerDiagramRotation 50s linear infinite;
    animation-delay: 0.1s;
    animation-fill-mode: backwards;
}

.pre-footer-anim .logo-inner svg {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-outer-svg {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    border-radius: 100%;
    transition: var(--transition);
}

.logo-outer-svg svg {
    width: 103.6%;
    height: 100.25%;
    display: block;
}

.logo-outer-svg svg path {
    transition: var(--transition);
}

@keyframes innerDiagramRotation {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes outerDiagramRotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}


/* logo gallery */

 .logo-gallery .module-gallery-inner {
    display: flex;
    justify-content: center; 
    align-items: center;
    height: 100px;
}

.gallery-item {
    height: 70%;
    display: flex;
    align-items: center;
    border-right: 3px solid #0061AF;
    padding: 0 3rem; 
    margin-bottom: 1rem;
}

.gallery-item:last-child {
    border-right: none;
}

.gallery-item a {
    display: flex;
    align-items: center;
    height: 100%;
}

.gallery-item img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}


/* landing footer */

.landing-footer ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 2rem;
    height: 20px;
}

.landing-footer ul li {
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 2px solid #0061AF;
    padding: 0 10px;
}

.landing-footer ul li:last-child {
    border-right: none;
}

.landing-footer ul li a {
    color: #0061AF;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 15px;
}

.landing-footer ul li a:hover {
    text-decoration: underline;
}


@media screen and (max-width: 768px) {
    .logo-gallery .module-gallery-inner {
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
        gap: 1rem;
    }

    .gallery-item {
        border: none;
        border-bottom: 3px solid #0061AF;
        padding: 1rem 0;
        width: calc(50% - 1rem);
        justify-content: center;
        height: 100px;
    }

    .gallery-item:last-child {
        width: 100%;
        border-bottom: 3px solid #0061AF;
    }

    .gallery-item img {
        max-height: 100%;
        width: auto;
        object-fit: contain;
    }


    .landing-footer ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: auto;
        padding:0;
        gap: 1rem;
    }

    .landing-footer ul li {
        padding: 0;
        height: auto;
    }

    .landing-footer ul li:first-child {
        border-right: 2px solid #0061AF;
        padding-right: .875rem;
    }

    .landing-footer ul li:nth-child(2) {
        border-right:0;
        
    }

    .landing-footer ul li:last-child {
        border-right: none;
        text-align: center;
    }

    .landing-footer ul li a {
        font-size: 1rem;
    }

    .modules-wrapper.circle-wrapper {
        height: 300px;  
    }

    .circle-outside {
        width: 272px;  
        height: 237px; 
    }

    .circle-inside {
        width: 146px; 
        height: 146px;  
    }

    .landing-container {
        background-position: center center;
    }

    .landing-title h1 {
        padding-top: 6rem; 
    }


    .logo-gallery {
        margin-bottom: 2rem; 
    }
    .top-logo {
       top: 3%;
    }

    .pre-footer-anim {
        width: 70%;
    }
}

@media screen and (max-width: 576px) {
    .content-wrapper {
        border-radius: 32px;
        top: 50%;
        padding: 20px;
        width: 100%;
        margin-bottom: 12rem !important;
    }

    .modules-wrapper.circle-wrapper {
        height: 250px;
    }

    .circle-outside {
        width: 217px;  
        height: 190px; 
    }

    .circle-inside {
        width: 117px; 
        height: 117px;  
    }
}


 
 @media screen and (min-width: 577px) and (max-width: 991px) {
     .landing-container {
         min-height: 100vh;
         background-position: center center;
     }
 }
 
 @media screen and (max-height: 500px) {
     .landing-container {
         min-height: 120vh; 
     }
 }


 .gallery-item img {
    transition: all 0.3s;
  }
  
  .gallery-item img:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 15px -10px rgba(0, 97, 175, 0.3);
    cursor: pointer;
  }