@font-face {
    font-family: 'Araboto';
    src: url('../assets/font/ArabotoThin400.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../assets/font/ArabotoLight400.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../assets/font/ArabotoNormal400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../assets/font/ArabotoMedium400.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../assets/font/ArabotoBold400.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../assets/font/Araboto%20Black%20400.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Araboto', sans-serif;

}

::selection {
    background-color: #349FA5;
    color: white;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #349FA5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2c8a8f;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #349FA5 #f1f1f1;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.top ul li a {
    transition: all 0.3s ease;
}

.top ul li a:hover {
    color: #e8c204;
}

.pages ul li a {
    transition: all 0.3s ease;
}

.pages ul li a.active,
.pages ul li a:hover {
    color: #349FA5;
}


.title-shape {
    display: block;
    width: 80px;
    height: 2.5px;
    background-color: #349FA5;
    position: relative;
    margin: 20px 0 25px 0;
    border-radius: 2px;
}

.section-3 .title-shape {
    margin: 20px auto 25px auto;
}

.title-shape::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: #349FA5;
    border-radius: 50%;
}

.half-circle {
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 110px solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #f4eb2e;
    border-left-color: #f4eb2e;
    z-index: -1;
    transform: rotate(10deg) translateY(40%);
}

.yello-color {
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: #f4eb2e;
    filter: blur(100px);
    border-radius: 50%;
    z-index: -2;
    opacity: 0.6;
}

.section-1 .content .yello-color {
    transform: translateX(50%);
    z-index: 0;
    filter: blur(140px);

}

.section-5 {
    background-image: url(../assets/images/Section-5-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-5 a {
    transition: all 0.3s ease;
}

.section-5 a:hover {
    background: #f9cb76;
    color: black;
}

.section-6 .yello-color {
    left: -50%;
    top: 50%;
    z-index: 20;
    background-color: #f4eb2eb5;
}

footer a {
    transition: all 0.3s ease;
}

footer a:hover {
    color: #349FA5;
    transform: translateX(5px);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .section-3 .title-shape {
        margin: 20px 0 25px 0;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Floating Elements Animation */
.floating-item {
    --mouse-x: 0px;
    --mouse-y: 0px;
    transform: translate(var(--mouse-x), var(--mouse-y));
    transition: transform 0.1s ease-out;
    will-change: transform;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translate(var(--mouse-x), calc(var(--mouse-y) + 0px));
    }

    50% {
        transform: translate(var(--mouse-x), calc(var(--mouse-y) - 15px));
    }
}

.delay-1 {
    animation-delay: 0s;
}

.delay-2 {
    animation-delay: 1s;
}

.delay-3 {
    animation-delay: 2s;
}

.delay-4 {
    animation-delay: 3s;
}

.delay-5 {
    animation-delay: 1.5s;
}

/* Hide scrollbar for slider */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

/* Service Marquee Infinite Scrolling */
@keyframes marquee-ltr {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(100% + 25px));
    }
}

.animate-marquee-ltr {
    animation: marquee-ltr 25s linear infinite;
}

.img-title:hover .animate-marquee-ltr {
    animation-play-state: paused;
}

/* ── SVG Icon System ── */
.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    overflow: visible;
    flex-shrink: 0;
}