* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    /* border:1px solid blue; */
    text-decoration: none !important;
    outline: none !important;
}

@font-face {
    font-family: Roboto-regular;
    src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: Roboto-medium;
    src: url(../fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: Poppins-regular;
    src: url(../fonts/Poppins-Regular.ttf);
}


@font-face {
    font-family: Dela;
    src: url(../fonts/DeLatto-0W974.ttf);
}


html {
    font-size: 85%;
    scroll-behavior: smooth;
}

p {
    font-family: Poppins-regular;

}

h1,
h2,
h3,
h4,
h5,
h6,
small,
a {
    font-family: Poppins-regular;
}

a {
    font-family: Roboto-regular;
}



/* Animation----------- */
.jiggle {
    animation: social 2s ease-in-out infinite alternate;
}

@keyframes social {
    0% {
        transform: translateY(-3px) scale(1.15);
    }

    40% {
        transform: rotate(7deg);
    }

    80% {
        transform: rotate(-7deg);
    }

    100% {
        transform: translateY(0px) scale(0.9);
    }
}

/* ------------------------ */


/* Color pallet--- */
:root {
    --primary-color: whitesmoke;
    --white-bg: #ffffff;
    --secondary-color: #037a03c2;
    --secondary-color-solid: #039903;
    --light-text: rgba(255, 255, 255, 0.699);
    --dark-text: rgba(0, 0, 0, 0.911);
    --dark-bg: rgba(0, 0, 0, 0.863);
}

.light-text {
    color: var(--light-text);
}

.dark-text {
    color: var(--dark-text);
}

.dark-bg {
    background: var(--dark-text);
}

.primary-bg {
    background-color: var(--primary-color);
}

.primary-color {
    color: var(--primary-color);
}

.secondary-bg {
    background-color: var(--secondary-color);
}

.secondary-bg-solid {
    background-color: var(--secondary-color-solid);
}

.secondary-color-solid {
    color: var(--secondary-color-solid);
}

.white-bg {
    background-color: var(--white-bg);
}

.secondary-color {
    color: var(--secondary-color);
}

/* -------------- */



/* Utility */
.fw-600 {
    font-weight: 600;
}

.fs-medium {
    font-size: 1.1rem;
}

.fs-large {
    font-size: 1.15rem;
}

.fs-small {
    font-size: 1.06rem
}

/* -------- */



/* Components- */
.custom-btn {
    padding: 0.3rem 1rem;
    border-radius: 6px;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.5s ease-in-out;
}

.custom-btn:hover {
    border-radius: 100px;
    background-color: transparent;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.274);
    color: rgba(0, 0, 0, 0.274);
}

/* ------------ */


/* NAVIGATION STYLE STARTS---------*/
.isoko-logo {
    color: var(--secondary-color-solid);
    font-weight: 900;
    text-shadow: 0px 0px 1px black;
    transition: all 0.5s ease-in-out;
    font-size: 2rem;
}

.navbar li {
    margin: 0 0.5rem;
}

.navbar ul a {
    font-family: Roboto-medium;
    letter-spacing: 0.1rem;
    position: relative;
    transition: all 0.5s ease-in-out;
}

.navbar ul a:hover {
    color: #333333d5 !important;
    font-family: Roboto-medium;
    letter-spacing: 0.1rem;
    position: relative;
}

.navbar ul a::after {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    margin: auto;
    bottom: 0;
    left: 0.6rem;
    transition: all 0.5s ease-in-out;
    height: 2px;
    background: var(--secondary-color);
}

.navbar ul a:hover::after {
    width: 25px;
}


.subnav nav {
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.096);
}

.subnav .nav-link {
    letter-spacing: 1px !important;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.5s ease-in-out;
    color: #333 !important;

}

.subnav .navbar-nav .nav-link:hover {
    color: #333333d5 !important;
}


.subnav .nav-link:hover {
    color: var(--blue) !important;
}

/* ----------------------- */



/* HERO STYLE STARTS------- */

/* Hero----- */

.hero .wrapper {
    background: linear-gradient(rgba(0, 0, 0, 0.719), rgba(0, 0, 0, 0.719)), url(../images/hero-bg.jpg);
    background-size: cover;
    background-position: top;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 0 0 10px 10px;
    min-height: 80vh;
    position: relative;
    padding: 1rem 0;
    padding-top: 3rem;
    /* overflow: hidden; */
}


.hero .wrapper::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 200px;
    bottom: 15px;
    left: 0px;
    z-index: 2;
    background: url(../images/wave2.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.hero .wrapper::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 200px;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    background: url(../images/wave.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.hero .wrapper .wave3 {
    position: absolute;
    width: 100%;
    height: 70px;
    bottom: -70px;
    left: 0px;
    z-index: 2;
    background: url(../images/wave3.svg);
    background-repeat: no-repeat;
    background-size: cover;
}


.hero .wrapper .content {
    /* max-width: 600px; */
    position: relative;
    z-index: 3;
}

.hero .wrapper .content .pen {
    font-size: 3.5rem;
    color: var(--primary-color);
    font-family: Roboto-medium;
    font-weight: 900;
}

.hero .wrapper .content p {
    font-size: 1rem;
    max-width: 250px;
}

.hero .wrapper .content .custom-btn.explore {
    border: 1px solid rgba(245, 245, 245, 0.404);
    transition: all 0.7s;
    letter-spacing: 1px;
}

.hero .wrapper .content .custom-btn.explore:hover {
    letter-spacing: 1.5px;
    color: rgba(245, 245, 245, 0.404);
}

.hero .wrapper .content .custom-btn.donate {
    background: transparent;
    border: 1px solid rgba(245, 245, 245, 0.404);
}

.hero .wrapper .content .custom-btn.donate:hover {
    letter-spacing: 1.5px;
    color: rgba(245, 245, 245, 0.404);
}



.hero-bg {
    background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0.692)), url(../images/hero-bg-h.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-bg.ms {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.767), rgba(0, 0, 0, 0.767)), url(../images/members.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-bg.bg1 {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.788)), url(../images/bg2.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-bg .custom-btn {
    transition: all 0.5s ease-in-out;
}

.hero-bg .custom-btn:hover {
    color: rgba(245, 245, 245, 0.521)
}

.hero-bg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0;
    bottom: 0;
    background: white;
    border-radius: 100px 100px 0 0;
}

.hero-bg .content-wrapper {
    min-height: 40vh;
}

.hero-bg .content-wrapper p {
    max-width: 300px;
}

.announcement {
    margin-top: 3rem;
}

.announcement .a-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.8rem;
    border-radius: 100px;
    display: inline-block;
    margin: 0 auto;
    border: 2px solid var(--secondary-color);
    background-color: var(--primary-color);
}

.announcement p {
    color: rgba(245, 245, 245, 0.856);
}

.announcement .a-icon img {
    width: 35px;
}

/* HERO STYLE ENDS */


/* ABOUT------- */
.about {
    margin-top: 5rem;
}

.about.bg {
    background: linear-gradient(rgba(255, 255, 255, 0.856), rgba(255, 255, 255, 0.822)), url(../images/map.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.about .content-box {
    background-color: var(--primary-color);
    padding: 3rem 2rem;
}

.about .content .texts {
    max-width: 500px;
}

.about .img-box {
    border: 5px solid var(--blue-hover);
    border-radius: 15px;
    transform: rotate(-3deg);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.26);
}

.about .img-box img {
    border-radius: 15px;
    border: 6px solid var(--secondary-color);
}

.about .content .texts .paragraph-box {
    border-bottom: 1px solid #333333c2;
    border-left: 1px solid #333333b7;
    border-bottom-left-radius: 5px;
    padding: 0 0.5rem;
}

.about .content .texts .paragraph-box p {
    font-size: 0.98rem;
}

/* ----------------------- */

/* leaders---- */
.leaders {
    margin: 5rem 0;
}

.leaders.bg {
    background: linear-gradient(rgba(255, 255, 255, 0.856), rgba(255, 255, 255, 0.822)), url(../images/map.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.leaders .content {
    border: 2px solid var(--secondary-color-solid);
    background-color: whitesmoke;
}

.leaders .content img {
    height: 330px;
    object-fit: cover;
}

/* ----------------------- */

/* Women league */
.league {
    margin-top: 5rem;
}

.league .content {
    position: relative;
}

.league .content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 3;
    background: rgba(255, 255, 255, 0.26);
    border-radius: 10px 0 0 10px;
}

.league .content::after {
    content: "";
    position: absolute;
    left: 40px;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 3;
    background: rgba(0, 128, 0, 0.507);
}

.league .texts-wrapper {
    position: absolute;
    top: 225px;
    width: 100%;
    z-index: 4;
    color: white;
}

.league .texts-wrapper p {
    color: var(--primary-color);
    font-size: 0.95rem;
    max-width: 300px;
}

.league .img {
    position: relative;
    border-radius: 10px 0 0 10px;
}

.league .img img {
    border-radius: 10px 0 0 10px;
}

.league .img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.596), rgba(0, 0, 0, 0.589));
    z-index: 2;
    left: 0;
    top: 0;
    border-radius: 10px 0 0 10px;
}

.league .col-md-6 {
    border-radius: 0 25px 10px 0
}

.league .right .top {
    border-radius: 0 10px 0 40px;
    position: relative;
}

.league .right .top::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    bottom: -50px;
}

.league .right .top::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background: var(--secondary-color-solid);
    border-radius: 0 40px 0 0;
}

.league .right .bottom {
    position: relative;
    z-index: 5;
}

.league .right .bottom a.pdf {
    display: inline-block;
    border-radius: 5px;
    background: var(--primary-color);
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    color: #333333f5;
    font-size: 0.85rem;
}

.league .right .bottom a.more {
    display: inline-block;
    border-radius: 5px;
    color: var(--primary-color);
    background-color: transparent;
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    border: 1px solid var(--primary-color);
    font-size: 0.85rem;
}

.league-members .content {
    border-radius: 10px;
}

.league-members .content img {
    border-radius: 10px;
    height: 300px;
    object-fit: cover;
}

.league-members .content small {
    font-size: 0.9rem;
}

.league-members .content .custom-btn {
    border: 1px solid #333333c7;
    padding: 0.2rem 1rem;
    font-size: 0.97rem;
    border-radius: 0 30px 30px 30px;
}

.league-members .content .custom-btn:hover {
    border: none;
}

.league-member .member-item {
    border-radius: 10px
}

.league-member .member-item img {
    border-radius: 10px 10px 20px 20px
}

/* ----------------- */

/* services----------- */
.services-section {
    margin-top: 10rem;
    margin-bottom: 6rem;
}

.services-section .content {
    border-radius: 10px;
}

.services-section .content .head h1 {
    position: relative;
    font-weight: 700;
}

.services-section .content .head p {
    margin-top: 1.2rem;
}

.services-section .content .head h1::after {
    position: absolute;
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    background: linear-gradient(to right, rgb(27, 26, 26), var(--blue-hover));
    border-radius: 50px;
    bottom: -5px;
    left: 0;
}

.services-section .content .body .img-wrapper img {
    border-radius: 10px;
}

.services-section .content .body .text-wrapper {
    background: linear-gradient(rgba(210, 105, 30, 0.575), rgb(27, 26, 26));
    color: whitesmoke;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 0 100px 100px 100px;
    text-transform: up;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    padding: 1rem;
}

.services-section .item .head {
    background: rgb(27, 26, 26);
    color: whitesmoke;
    border-radius: 50px;
    padding: 1rem;
    letter-spacing: 2px;
}

.services-section .item .head i {
    font-size: 0.8rem;
}

.services-section .item .body .top {
    background-color: var(--blue);
    clip-path: polygon(0 1%, 100% 0, 100% 62%, 49% 100%, 0 62%);
    border-radius: 10px 10px 0 0;
}

.services-section .item .body .top h5 {
    font-size: 1rem;
}

.services-section .item .body .top h5 span {
    font-size: 1.7rem;
}

.services-section .item .body .bottom {
    border-radius: 0 0 15px 15px;
}

.item-list {
    border-bottom: 1px solid #33333321;
    cursor: pointer;
}

.item-list h6 {
    font-weight: 600;
    color: #333;
}

.item-list .accordion {
    display: none;
}

.item-list .accordion.active {
    display: block;
}

.item-list ul {
    list-style-type: none;
}

.item-list ul li {
    font-size: 0.9rem;
}

/* -------------------------------------------------------------- */



/* PROJECT SECTION---- */

.gallery {
    position: relative !important;
    margin-top: 8rem;
    margin-bottom: 5rem;
}

.gallery .col-md-4 {
    position: sticky !important;
    top: 0px;
    z-index: 5;
}

.gallery h1 {
    position: relative;
}


.gallery h1::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 50px;
    bottom: -6px;
    margin: auto;
    background: linear-gradient(to right, rgb(27, 26, 26), var(--secondary-color-solid));
    left: 0;
}

.gallery .content {
    background: linear-gradient(black, rgb(27, 26, 26));
    border-radius: 6px;

}

.gallery .col-md-4 .content .img {
    padding: 0.3rem;
    position: relative;
}

.gallery .col-md-4 .content .img img {
    height: 300px;
    object-fit: cover;
}

.gallery .col-md-4 .content #display-text {
    transition: all 0.3s ease-in;
}


.gallery .col-md-4 .content #display-text.remove-active {
    height: 0px;
    overflow: hidden;
    padding: 0 !important;
}

.gallery .col-md-4 .content .img .drop-btn {
    position: absolute;
    background: white;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%);
    border-radius: 100px;
    right: -17px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.329);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.gallery .col-md-4 .content .img .drop-btn:hover {
    background: var(--secondary-color-solid);
    color: white;
    border: 2px solid white;
}

.gallery .col-md-8 .img {
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.gallery .col-md-8 .img:hover {
    transform: rotate(-3deg);
}


.gallery .col-md-8 .img:hover .text-overlay {
    clip-path: polygon(0 74%, 100% 73%, 100% 100%, 0% 100%);
    background: var(--secondary-color-solid);
    color: white;
}


.gallery .col-md-8 .img::before {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    content: "";
    top: 0;
    left: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.548));
    transition: all 0.5s ease-in-out;
}

.gallery img {
    width: 100%;
    border-radius: 6px;
}

.gallery .col-md-8 .img img {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.329);
    height: 150px;
    object-fit: cover;
}

.gallery .col-md-8 .img .text-overlay {
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 80%, 100% 65%, 100% 100%, 0% 100%);
    z-index: 2;
    background: whitesmoke;
    border-radius: 5px;
    color: #333;
    text-align: center;
    transition: all 0.5s ease-in-out;
}

.gallery .col-md-8 .img .text-overlay h6 {
    position: absolute;
    bottom: -3px;
    width: 100%;
}

.gallery .col-md-8 .img .hidden-texts {
    display: none;
}

.gallery .custom-btn {
    padding: 0.3rem 0.9rem;
    border: 1px solid #333333ab;
}

/* ------------------- */




.get-started-section {
    background-color: #130f40;
    background-image: linear-gradient(315deg, #130f40 0%, #000000d5 56%);
    padding: 2rem;
    border-radius: 20px;
}

.get-started-section .left-side {
    text-align: right;
    color: white;
}

.get-started-section .left-side small {
    max-width: 300px;
    display: inline-block;
    margin-left: auto;
}

.get-started-section .left-side h1 span {
    color: var(--blue-hover);
}

.get-started-section .owl-carousel .prize {
    width: 60px !important;
    transform: rotate(-8deg);
}

.get-started-section .owl-carousel .snd-prize {
    width: 75% !important;
}



/* League members SLIDE-------------- */
.members {
    margin: 5rem 0;
}

.members .content-wrapper {
    background: rgb(27, 26, 26);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.123);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.members .content-wrapper::after {
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 450px;
    height: 400px;
    position: absolute;
    background: rgb(27, 26, 26);
    clip-path: circle(50% at 9% 4%);
    border-radius: 15px 0 0 0;
}

.members .content {
    background: whitesmoke;
    padding: 3rem;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.members .content .con-bg {
    position: absolute;
    width: 260px;
    z-index: 1;
    right: 50px;
    bottom: -50px;
    transform: rotate(-25deg);
    opacity: 0.6;
}

.members .content .owl-carousel img {
    width: 220px;
    height: 220px;
    border-radius: 100% 100% 100% 100%;
    border: 8px solid var(--secondary-color-solid);
    object-fit: cover;
    border-bottom-color: var(--secondary-color);
    border-left-color: var(--secondary-color);
    object-position: center;
}

.members h1 {
    position: relative;
    font-weight: 700;
}

.members h1::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 50px;
    bottom: -6px;
    margin: auto;
    background: linear-gradient(to right, rgb(27, 26, 26), var(--secondary-color-solid));
    left: 0;
}

.members .content h3 {
    color: #333;
    font-weight: 600;
}

.members .content p {
    max-width: 400px;
}

.members .content .socials i {
    color: var(--secondary-color);
    font-size: 1.2rem;
}

/* ------------------------ */




/* contact section---------- */
.contact-section {
    background-color: var(--secondary-color-solid);
    border-radius: 10px 10px 0 0;
}

.contact-section .top {
    padding: 3rem;
}

.contact-section .top small {
    color: aqua;
    letter-spacing: 1px;
    position: relative;
}

.contact-section .top h2 {
    font-weight: 800;
    max-width: 400px;
}

.contact-section .top .c-btn {
    padding: 1rem 2rem;
    border: 4px solid #33333380;
    color: whitesmoke;
    display: inline-block;
    font-size: 1.6rem;
    transition: all 0.5s ease-in-out;
}

.contact-section .top .c-btn:hover {
    background-color: var(--secondary-color-solid);
    border: 2px solid whitesmoke;
}

.contact-section .body {
    border-radius: 10px 10px 0 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.555), rgb(0, 0, 0)), url(../images/contact.jpg);
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 160%);
    padding-top: 2rem;
    /* background-attachment: fixed; */
}

.contact-section .body form .f-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-section .body form .f-row .item {
    flex-basis: 45%;
    min-width: 300px
}

.contact-section .body form .f-row .item i {
    color: aqua;
}

.contact-section .body form .f-row .item input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 255, 255, 0.39);
    color: rgba(245, 245, 245, 0.952);
}

.contact-section .body form textarea {
    border: 1px solid rgba(0, 255, 255, 0.39);
    width: 100%;
    background: transparent;
    color: rgba(245, 245, 245, 0.952);
    border-radius: 5px;
    padding: 0.5rem;
}

.contact-section .body form .submit-btn {
    background: whitesmoke;
    color: #333;
    font-weight: 700;
    border: 2x solid rgba(0, 255, 255, 0.39);
    padding: 0.7rem 2rem;
    transition: all 0.5s ease-in-out;
}

.contact-section .body form .submit-btn:hover {
    background: transparent;
    color: whitesmoke;
}

.contact-section .footer {
    background-color: rgb(1, 92, 1);
    color: whitesmoke;
    padding-top: 3rem;
}

.contact-section .footer h1 {
    color: var(--blue-hover);
}

.contact-section .footer h1 span {
    color: whitesmoke;
    font-size: 1.5rem;
}

.contact-section .footer ul {
    list-style-type: none;
}


.contact-section .footer ul li h4 {
    letter-spacing: 1px;
    color: white;
}

.contact-section .footer ul li {
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    transition: all 0.5s;
    color: rgba(245, 245, 245, 0.589);
}


.contact-section .footer ul li a {
    color: rgba(245, 245, 245, 0.589);
}

.contact-section .footer ul li.item:hover {
    margin-left: 0.5rem;
}

.contact-section .footer ul li i {
    color: var(--blue-hover);
}

.contact-section .footer ul li p {
    font-size: 0.8rem;
    max-width: 200px;
}

/* ------------------------- */










@media(max-width:980px) {
    .bottom-section {
        bottom: -150px;
        width: 100%;
        border-bottom-left-radius: 50px;
    }
}

@media(max-width:800px) {
    .hero-content {
        text-align: center;
    }

    .w-75 {
        margin: auto;
    }
}

@media(max-width:680px) {
    .contact-section .footer {
        background-position: bottom;
        clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 160%);
    }

    .contact-section .top h2 {
        font-weight: 700;
        max-width: 700px;
        font-size: 1.8rem;
    }

    .contact-section .top .c-btn {
        padding: 0.7rem 1.5rem;
        border: 3px solid #33333380;
        display: inline-block;
        font-size: 1rem;
    }

}

@media(max-width:480px) {
    html {
        font-size: 82%
    }

    .hero .wrapper {
        border-radius: 0;
    }

    .hero .wrapper .content .pen {
        font-size: 3.1rem;

    }

    .hero .wrapper::before {
        height: 270px;
    }

    .hero .wrapper::after {

        height: 270px;
    }

    .leaders .content img {
        height: 500px;
    }


    .league .img {
        border-radius: 10px 10px 0 0;
    }

    .league .img img {
        border-radius: 10px 10px 0 0;
    }

    .league .img::after {
        border-radius: 10px 10px 0 0
    }

    .league .content::before {
        border-radius: 10px 0 0 0;
    }

    .league .col-md-6 {
        border-radius: 0 10px 10px 10px
    }

    .league .texts-wrapper {
        top: 120px;
    }

    .overview h4 {
        font-size: 0.95rem;
    }

    .contact-section .body {
        background: linear-gradient(rgba(0, 0, 0, 0.774), rgba(0, 0, 0, 0.76)), url(../images/contact.jpg);
        background-size: cover;
        background-position: center;
    }

    .contact-section .body form .f-row .item {
        flex-basis: 100%;
        margin-bottom: 20px;
        font-size: 1.1rem;
    }

    .announcement {
        margin-top: 6rem;
    }

}