* {
    font-family: "Google Sans", sans-serif
}

body,
html {
    background-color: #222 !important;
    color: #fff !important
}

::selection {
    background: #5f16eb;
    color: #fff
}

.banner-xray,
.homepage-banner {
    background-size: cover;
    background-repeat: no-repeat
}

.navbar-brand {
    max-width: 10% !important
}

.navbar-brand img {
    width: 80%;
    height: auto
}

.nav-link:hover {
    color: #5f16eb !important;
    transition: .3s ease-in-out
}

.navbar-icon a ion-icon {
    color: #fff !important;
    font-size: 30px !important;
    text-decoration: none !important;
    margin-left: 15px
}

.homepage-banner {
    position: relative;
    background-image: url('../assets/banners/web-banner-homepage.png');
    width: 100%;
    height: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.homepage-banner .text-hover,
.motto-container span {
    color: #5f16eb
}

.banner-xray {
    position: absolute;
    inset: 0;
    background-image: url('../assets/banners/web-banner-homepage-2.png');
    filter: brightness(1.05);
    clip-path: circle(0px at 0 0);
    pointer-events: none;
    transition: clip-path 50ms linear
}

.homepage-banner h1 {
    font-size: 100px;
    font-weight: 700;
    margin-bottom: 30px
}
.homepage-banner h6 {
    font-size: 100px;
    font-weight: 700;
    margin-bottom: 30px
}

.homepage-banner p {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase
}

.banner-text-xray,
.banner-text-xray p {
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.homepage-banner h1,
.homepage-banner p {
    position: relative;
    z-index: 2
}

.banner-text,
.banner-text-xray {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: clamp(80px, 10vw, 200px)
}

.banner-text {
    z-index: 2
}

.banner-text-xray {
    color: #5f16eb;
    z-index: 3;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle 0px at 0 0, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle 0px at 0 0, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: mask-image 50ms linear
}

.banner-text-xray h2 {
    color: #fff !important
}

.connect-now-btn:hover,
.contact-right-section span,
.heading-container h5 span,
.tab-container h3 {
    color: #5f16eb !important
}

#typewriter::after {
    content: "|";
    margin-left: 4px;
    animation: 1s infinite blink
}

@keyframes blink {

    0%,
    100%,
    50% {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.strip-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px
}

.heading-container,
.homepage-card {
    justify-content: center;
    display: flex
}

.heading-container {
    width: 100%;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px
}

.heading-container h5 {
    font-size: 50px;
    font-weight: 800
}

.homepage-card-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.homepage-card {
    position: relative;
    width: 600px;
    height: 500px;
    padding: 20px;
    align-items: center;
    flex-direction: column;
    background-color: #202020;
    border-radius: 4px;
    margin-bottom: 20px
}

.homepage-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: #5f16eb;
    transition: width .25s
}

.homepage-card span::after,
.homepage-card::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 0;
    background: #5f16eb
}

.homepage-card::after {
    top: 0;
    right: 0;
    transition: height .25s .25s
}

.homepage-card span {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2px;
    width: 0;
    background: #5f16eb;
    transition: width .25s .5s
}

.homepage-card span::after {
    bottom: 0;
    left: 0;
    transition: height .25s .75s
}

.homepage-card:hover span,
.homepage-card:hover::before {
    width: 100%
}

.homepage-card:hover span::after,
.homepage-card:hover::after {
    height: 100%
}

.homepage-card h5 {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center
}

.homepage-card p {
    text-align: center;
    font-size: 16px;
    font-weight: 100 !important
}

.connect-now-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
    width: 100%
}

.connect-now-btn {
    text-decoration: none;
    color: #fff !important;
    border: 1px solid #fff;
    width: 200px;
    text-align: center;
    border-radius: 100px;
    padding: 20px;
    font-weight: 600;
    background-color: #222
}

.connect-now-btn:hover {
    background-color: #202020;
    border: 1px solid #5f16eb;
    transition: .3s ease-in-out
}

.row-container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.tab-container {
    display: flex;
    justify-content: center !important;
    align-items: flex-end !important;
    flex-direction: column;
    padding: 50px
}

.tab-container h3 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    text-align: left
}

.tab-container h4 {
    font-size: 50px;
    font-weight: 700;
    color: #fff !important;
    margin: 0
}

.tab-container p {
    font-size: 18px;
    line-height: 30px
}

.client-row-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap
}

.client-tab,
.motto-container {
    justify-content: center;
    display: flex
}

.client-tab {
    width: 300px;
    height: 200px;
    padding: 20px;
    margin-bottom: 20px;
    align-items: center;
    flex-direction: column
}

.client-tab img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter .3s ease-in-out
}

.client-tab:hover img {
    filter: grayscale(0%)
}

.motto-container {
    align-items: center;
    margin-top: 150px;
    margin-bottom: 100px;
    width: 100%
}

.motto-container p {
    font-size: 100px;
    font-weight: 700;
    text-align: center
}

.contact-section-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 150px
}

.contact-left-section {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column
}

.contact-section-left-tile-container {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.contact-section-icon-container {
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom, #222 0, #202020 50%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-right: 20px
}

.contact-section-icon-container ion-icon {
    font-size: 30px;
    color: #fff
}

.contact-section-content {
    display: flex;
    flex-direction: column
}

.contact-section-content p {
    margin: 0;
    color: #777;
    font-size: 18px
}

.contact-section-content a {
    margin: 0;
    color: #fff;
    font-size: 18px;
    text-decoration: none
}

.contact-right-section {
    background: linear-gradient(to bottom, #333331 25%, #242423 80%, #000 100%);
    padding: 50px;
    border-radius: 10px
}

.contact-right-section p {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 50px
}

.contact-right-section label {
    font-size: 12px;
    font-weight: 100 !important;
    background-color: #00000000 !important
}

.contact-btn {
    background-color: #333331;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: 18px
}

.contact-btn:hover {
    background-color: #5f16eb;
    transition: .3s ease-in-out;
    cursor: pointer
}

.footer-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 200px;
    border-top: 1px solid #333331;
    padding-top: 70px
}

.footer-logo-container img {
    width: 15%;
    height: auto
}

.footer-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px
}

.footer-menu a {
    text-decoration: none;
    color: #777;
    margin: 20px
}

.footer-menu a:hover {
    color: #fff;
    transition: .3s ease-in-out
}
.footer-note {
    width: 50%;
    background-color: #5f16eb !important;
    padding: 10px;
    border-top-right-radius: 250px !important;
}
.footer-note p {
    margin: 0;
    text-align: left;
    color: #ffffff !important;
    margin-left: 25px;
    font-size: 18px;
}

.adum-logo-style {
    background-color: #fff;
    width: 50px; 
    height: 50px;
    border-radius: 100%;    
    margin-left: 50px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* --- Continuous Animation --- */
    /* Changed to 'infinite' so it keeps running, and 'ease-in-out' for a smooth loop */
    animation: logoPulse 3s ease-in-out infinite;
    
    /* Smooth transition for the hover scaling */
    transition: transform 0.2s ease-in-out;
}

.adum-logo-style img {
    padding: 20%;
    width: 100%;
    height: auto;
}

/* --- Hover State --- */
.adum-logo-style:hover {
    /* This freezes the animation instantly on hover */
    animation-play-state: paused; 
    
    /* This gives it that clean, responsive lift while paused */
    transform: scale(1.1); 
}


/* --- Continuous Attracting Animation Keyframes --- */
@keyframes logoPulse {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.15) rotate(5deg);  /* Eye-catching pop and slight tilt */
    }
    30% {
        transform: scale(0.95) rotate(-3deg); /* Slight undershoot */
    }
    45% {
        transform: scale(1);                 /* Settles back */
    }
    100% {
        transform: scale(1);                 /* Rests peacefully before looping again */
    }
}

@media only screen and (max-width:768px) {

    .strip-tab,
    .tab-container {
        margin-bottom: 30px
    }

    .navbar-brand {
        max-width: 40% !important
    }

    .navbar-brand img {
        width: 100%;
        height: auto
    }

    .homepage-banner {
        height: 200px !important
    }

    .homepage-banner h1 {
        font-size: 40px;
        margin-bottom: 10px !important
    }
    .homepage-banner h6 {
        font-size: 40px;
        margin-bottom: 10px !important
    }

    .tab-container h3,
    .tab-container h4 {
        margin: 0;
        text-align: center
    }

    .homepage-banner p {
        font-size: 8px
    }

    .banner-text,
    .banner-text-xray {
        padding: 10px !important
    }

    .footer-menu,
    .row-container,
    .strip-container {
        flex-direction: column
    }

    .tab-container {
        align-items: center !important;
        padding: 10px
    }

    .tab-container h4 {
        font-size: 36px;
        font-weight: 700;
        color: #fff !important
    }

    .tab-container p {
        font-size: 16px;
        line-height: 30px;
        text-align: justify
    }

    .heading-container h5 {
        text-align: center
    }

    .client-row-container {
        justify-content: center
    }

    .client-tab {
        width: 200px;
        margin-bottom: 50px
    }

    .motto-container {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .motto-container p {
        font-size: 36px;
        text-align: center
    }

    .contact-section-row {
        flex-direction: column-reverse
    }

    .contact-left-section {
        margin-top: 100px
    }

    .contact-section-left-tile-container {
        margin-bottom: 50px
    }

    .contact-section-icon-container {
        width: 80px;
        height: 80px
    }

    .contact-section-content p {
        font-size: 12px
    }

    .contact-btn,
    .contact-section-content a {
        font-size: 14px
    }

    .contact-right-section {
        padding: 20px
    }

    .contact-right-section p {
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px
    }

    .footer-logo-container {
        margin-top: 50px
    }

    .footer-logo-container img {
        width: 50%
    }

    .footer-menu a {
        margin: 5px
    }
}