:root {
    --color-1: #1b2b4a;
    --color-2: #06467f;
    --color-3: #053b6c;
    --color-4: #28a745;

}

body {font-family: 'Poppins', sans-serif;}

@media (max-width: 600px) {.container {--bs-gutter-x: 3rem;}}

.bg-1 {background-color: var(--color-1);}
.bg-2 {background-color: var(--color-2);}
.bg-3 {background-color: var(--color-3);}

.color-1 {color: var(--color-1);}
.color-2 {color: var(--color-2);}
.color-3 {color: var(--color-3);}

.fill-1 {fill: var(--color-1);}
.fill-2 {fill: var(--color-2);}
.fill-3 {fill: var(--color-3);}

.fill-white {fill: white;}

.bg-gradient-1 {background: linear-gradient(to bottom, var(--color-3), var(--color-1));}
.bg-gradient-2 {background: linear-gradient(to right, var(--color-1), var(--color-3));}
.bg-gradient-3 {background: linear-gradient(to right, var(--color-3), var(--color-1));}

.btn-success {--bs-btn-bg: var(--color-4); --bs-btn-border-color: var(--color-4);}

.clip-path {
   clip-path: polygon(
        40px 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

.swiper-button-next, .swiper-button-prev {color: #fff !important; background: var(--color-1); width: 36px !important; height: 36px !important; border-radius: 50%;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 21px !important;}
.swiper-pagination-bullet {background-color: var(--color-1) !important;}
.swiper-pagination-bullet-active {background-color: var(--color-1) !important;}