@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
    --oxpins-font: "Montserrat", sans-serif;
    --oxpins-font-two: "Montserrat", sans-serif;
    --oxpins-sayinistic-font: "the_sayinisticitalic";
    --oxpins-font-three: "Noteworthy", sans-serif;
    --oxpins-gray: #6f7775;
    --oxpins-gray-rgb: 111, 119, 117;
    --oxpins-base: #0036fc;
    --oxpins-base-rgb: 94, 143, 253;
    --oxpins-primary: #9fdefe;
    --oxpins-primary-rgb: 159, 222, 254;
    --secondary: #f5e2c8;
    --secondary-rgb: 245, 226, 200;
    --oxpins-black: #001666;
    --oxpins-black-rgb: 0, 22, 102;
    --oxpins-white: #ffffff;
    --oxpins-white-rgb: 255, 255, 255;
    --oxpins-extra: #d7f1fe;
    --oxpins-extra-rgb: 249, 244, 232;
    --oxpins-extra-two: #f2f0ec;
    --oxpins-extra-two-rgb: 242, 240, 236;
    --oxpins-bdr-color: #eee9db;
    --oxpins-bdr-color-rgb: 238, 233, 219;
    --oxpins-letter-space-big: 0em;
    --oxpins-letter-space-small: -0em;
    --oxpins-bdr-radius: 20px;
    --transition: 0.4s all ease-in-out;


  --white-color:                  #ffffff;
  --primary-color:                #5bc1ac;
  --secondary-color:              #5a6f80;
  --section-bg-color:             #f0f8ff;
  --site-footer-bg-color:         #44525d;
  --custom-btn-bg-color:          #597081;
  --custom-btn-bg-hover-color:    #5bc1ac;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --border-color:                 #e9eaeb;

  --body-font-family:             'Metropolis', sans-serif;

  --h1-font-size:                 52px;
  --h2-font-size:                 46px;
  --h3-font-size:                 32px;
  --h4-font-size:                 28px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  16px;
  --btn-font-size:                18px;
  --copyright-font-size:          14px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-semibold:         600;
  --font-weight-bold:             700;
}

.nav_font_size li a {
    font-size: 13px!important;
}

/* HERO SECTION */
/* =========================
        Home Page
=========================*/
/* --Banner-- */
#hero_section {
    background-repeat: no-repeat;
    background-size: cover;
    height: 82vh;
}


.hero_section_container {
    height: 100%;
    display: flex;
    justify-content: center;
}

.carousel-inner, carousel-item{
    height: 100%;
}

.carousel-item img {
    min-height: 82vh;
    min-width: 100%;
    object-fit: cover;
}

.overlay {
    position: relative;
    overflow: hidden;
}

.overlay img {
    opacity: 1; /* Adjust image opacity as desired */
    transition: opacity 0.5s ease; /* Add transition effect for smooth opacity change */
}

/* .overlay:hover img {
    opacity: 0.5;
  } */

.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Adjust overlay color and opacity */
}

.hero_caption {
    display: flex;
    flex-direction: column;
    font-family: Montserrat, sans-serif;
    position: absolute;
    top: 10%;
    padding: 20px;
    color: #fff;
    z-index: 20;
    height: fit-content;
}

.hero_caption_left {
    align-items: start;
    text-align: left;
}

.hero_caption_center {
    align-items: center;
    text-align: center;
    margin-top: 30px;
}

.hero_caption_center .hero_title {
    border-radius: 50px;
    padding: 10px 30px;
}

.hero_caption_right {
    align-items: end;
    text-align: right;
    margin-top: 35px;
}

.hero_title {
    background: var(--oxpins-base);
    padding: 10px 20px;
    color: white;
    width: fit-content;
    margin-bottom: 10px;
}

.hero_title h2 {
    font-size: 40px;
    font-weight: 300;
    color: white;
    text-transform: uppercase;
}

.hero_subtitle {
    font-weight: 300;
    font-size: 25px;
    text-transform: uppercase;
    color: white;
    margin-bottom: 10px;
}

.hero_copy {
    font-weight: 300;
    font-size: 15px;
    color: white;
    width: 50%;
    line-height: 20px;
    margin-bottom: 10px;
}


@media (max-width: 570px) {
    .hero_caption_left,
    .hero_caption_right{
        align-items: start;
        justify-content: start;
        text-align: start;
    }


    .hero_caption_left{
        margin-top: 50px;
    }

    .hero_title h2 {
    font-size: 18px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
}

    .hero_subtitle {
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: white;
    margin-block: 10px;
}

    .hero_copy {
    font-weight: 300;
    font-size: 15px;
    color: white;
    width: 100%;
    line-height: 1.7;
    margin-bottom: 10px;
}
}

@media (min-width:570px) and (max-width:930px) {
    .hero_caption_left {
    margin-top: 60px;

}
    .hero_caption_right {
        margin-top: 85px;
    }

    .hero_caption_center {
        margin-top: 75px;
    }

    .hero_title h2 {
    font-size: 24px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
}

    .hero_subtitle {
    font-weight: 500;
    font-size: 17px;
    text-transform: uppercase;
    color: white;
    margin-block: 10px;
}

    .hero_copy {
    font-weight: 300;
    font-size: 15px;
    color: white;
    width: 60%;
    line-height: 1.7;
    margin-bottom: 10px;
}
}


.get_involved_section_card {
    padding: 25px 50px;
    color: white;
    z-index: 5;
}

.get_involved_section_card h5 {
    color: white;
    margin-bottom: 13px;
}

@media (max-width: 570px) {
    .get_involved_section_card {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .get_involved_section_card h5{
        margin-bottom: 0;
        font-size: 15px;
    }
}

/* NEW ABOUT SECTION */

.new_section_padding {
    padding-top: 70px;
}

.new_about_section {
    font-family: Montserrat, sans-serif;
    padding-top: 100px;
}

.custom_section_title {
    font-weight: 400;
    font-size: 23px;
    color: #000;
    margin-bottom: 35px;
}

.about_title_text {
    line-height: 1.7;
}

.line_bottom {
    position: relative;
}

.line_bottom::after {
    position: absolute;
    left: 0;
    bottom: -10px;
    content: "";
    height: 2px;
    width: 50px;
    background-color: var(--oxpins-base);
}

.custom_section_title span {
    font-weight: 400;
    color: var(--oxpins-base);
}

.custom_about_copy{
    line-height: 1.7;
    font-weight: 400;
    font-size: 16px;
    color: #777;
    text-align: justify;
    padding-bottom: 20px;
}
.custom_testimony_section p {
    line-height: 1.7;
    font-weight: 400;
    font-size: 14px;
    color: #777;
}

.custom_about_copy span,
.custom_volunteer_section p {
    line-height: 1.4;
    display: block;
    margin-bottom: 20px;
}

.custom_about_subtitle {
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    font-size: 16px;
    margin-block: 10px;
}

.custom_about_img {
    width: 100%;
    height: 230px;
}

.row-eq-height {
    display: flex;
    display: -webkit-flex; /* Safari compatibility */
    flex-wrap: wrap;
}

.custom_about_content {
    display: flex;
    flex-direction: column;
}

.custom_about_content_left {
    position: relative;
    overflow: hidden;
    /*background: red!important;*/
}

.custom_about_content_left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.custom_about_button {
    align-self: flex-start;
    justify-self: flex-end;
}

.custom_about_video {
    margin-top: 70px;
    position: relative; /* Enable absolute positioning for child elements */
    width: 100%; /* Set width to fill the container */
}

.custom_about_vid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.custom_about_vid::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the button */
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Create a circular button */
    background-color: #fff; /* White button color */
    opacity: 1; /* Initially hide the button */
    transition: opacity 0.5s ease; /* Add smooth transition effect */
}

.custom_about_vid:hover::before,
.custom_about_vid:hover::after {
    opacity: 0; /* Show the overlay and button on hover */
}

.custom_about_big_img {
    padding-top: 70px;
    position: relative;
    overflow: hidden;
}

.custom_about_big_img img {
    width: 100%;
    transition: var(--transition);
}

.custom_about_big_img img:hover {
    transform: scale(1.3);
}

/* LOGO SECTION */

.partners-logo-section {
    background: white;
    padding: 50px 50px;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
}

.partner-logo {
    display: flex;
    justify-items: center;
    align-items: center;
    padding-left: 50px;
}

/* PROJECTS SECTION */
.custom_project_section {
    font-family: Montserrat, sans-serif;
}

.custom_project_img {
    margin-bottom: 15px;
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.custom_project_details {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.custom_project_details h5,
.custom_volunteer_section h4 {
    font-size: 16px;
    line-height: 1.5px;
    margin-top: 12px;
    margin-bottom: 15px;
    color: #333;
}

@media (max-width: 540px) {
    .custom_project_details h5 {
        line-height: 22px;
        margin-bottom: 0px;
}
    .custom_project_details span {
        font-size: 12px!important;
    }
}

.custom_project_details span {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #a9a9a9;
    margin-right: 10px;
}

.custom_project_details p,
.custom_project_details_right p,
.custom_volunteer_section ul,
.custom_testimonial_item p {
    line-height: 1.7;
    font-weight: 400;
    font-size: 13px;
    color: #777;
}

.custom_project_details_right h4 {
    color: #5b5b5bce;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 3px;
}

.project_date {
    background: var(--oxpins-base);
    width: 80px;
    height: 130px;
    font-size: 20px;
    margin-bottom: 15px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    line-height: 50px;
}

.project_date li {
    list-style-type: none;
}

.date-top {
    font-size: 29px;
    font-weight: 600;
}

.date-bottom {
    font-size: 12px;
    font-weight: 400;
}

.tns-nav {
    display: flex;
    justify-content: end;
    margin-top: -15px; /* Adjust spacing as needed */
}

.tns-nav button {
    border: none;
    padding: 6px;
    border-radius: 50%;
    background-color: #ddd; /* Adjust color as desired */
    margin-left: 15px;
    z-index: 1;
}

.tns-nav .tns-nav-active {
    background-color: var(--oxpins-black); /* Adjust color as desired */
}

.project-slider {
    position: relative;
    overflow: hidden;
    background: transparent;
}

.project-slider .carousel-wrapper {
    display: flex;
    transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.project-slider .custom_project_details_right {
    flex: 0 0 100%;
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity;
}

.project-slider-dots {
    display: none;
}

.project-slider-dot {
    display: none;
}

.project-slider:hover .custom_project_img {
    transform: scale(1.02);
}

.project-slider * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@media (max-width: 768px) {
    .project-slider-dots {
        gap: 8px;
        margin-top: 15px;
    }

    .project-slider-dot {
        width: 10px;
        height: 10px;
    }

    .project-slider-dot.active {
        transform: scale(1.15);
    }
}

/* VOLUNTEER SECTION */
.custom_volunteer_section {
    font-family: Montserrat, sans-serif;
}

.form_card {
    backdrop-filter: blur(7px) saturate(100%);
    -webkit-backdrop-filter: blur(7px) saturate(100%);
    background-color: rgba(222, 227, 237, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    padding: 38px;
    filter: drop-shadow(0 30px 10px rgba(0, 0, 0, 0.125));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.form_card_wrapper {
    width: 100%;
    height: 100%;

}

.custom_volunteer_form-group {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 20px;
}

.custom_volunteer_form-group input::placeholder {
    color: #d0d0d0;
    padding-left: 15px;
}

.custom_volunteer_form-group label {
    padding-left: 15px;
    font-weight: 400;
}


.custom_volunteer_section p {
    color: #171717;
    font-weight: 200;
}

.custom_volunteer_section ul {
    color: #171717;
    font-weight: 400;
    line-height: 2;
}

/* TESTIMONIAL SECTION */

.custom_testimony_section {
    font-family: Montserrat, sans-serif;
}

.custom_testimony_section p {
    line-height: 1.7;
    font-weight: 400;
    font-size: 14px;
    color: #777;
}

.testimonial_right{
  position: relative;
}

.testimonial_right_wrapper{
    position: absolute;
    left: 0;
    width: 100%;
    height: 400px;
    margin-left: 25px;
}

@media (max-width: 765px) {
    .testimonial_right_wrapper{
    position: relative!important;
    margin-top: 20px!important;
    height: auto;
    margin-left: 0px;
}
}

.custom_testimonial_item {
    width: 90%!important;
    padding: 60px 20px 20px 20px;
}

.custom_testimonial_item p{
    font-size: 12px!important;
}

@media (min-width: 766px) {
  .testimonial_right_wrapper{
    position: absolute;
    top: -70px;
      max-width:100% ;
  }
}

.testimonial_slider_wrapper{
  padding-top: 100px;
  position: relative;
}

.custom_testimonial_item {
    position: relative;
}

.custom_testimonial_client_info h3 {
    color: var(--oxpins-black);
    line-height: 1.5;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
}

.custom_testimonial_item p{
  font-size: 13px;

}

/*NEWS SECTION*/
.custom_news_section{
    margin-bottom: 100px;
  font-family: Montserrat, sans-serif;
}

.custom_news_content h5 {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--oxpins-base);
}

.custom_news_content h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    height: fit-content;
    margin-bottom: 15px;
}
.custom_news_content h3 a{
    text-decoration: none;
    color: var(--oxpins-black)!important;
}

.news_readmore_link a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    color: var(--oxpins-base);
    border-bottom: var(--oxpins-base) solid 1px;
    padding-bottom: 5px;
}

.news-one__bottom{
    background: var(--oxpins-base);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
}

.news-one__bottom a,
.news-one__bottom i{
    color: white!important;
}





/* BUTTONS CSS */
.button-58-light {
    align-items: center;
    background-color: var(--oxpins-white);
    border: none;
    border-radius: 0;
    color: var(--oxpins-black);
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    justify-content: center;
    outline: 0;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-top: 10px;
    padding: 10px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button-58-light:hover {
    background-color: #ffc45a;
    color: var(--oxpins-black);
    border: none;
    fill: white;
}

.button-58-light:active {
    background-color: var(--oxpins-primary);
    color: var(--oxpins-black);
    border-color: none;
    fill: white;
}

.button-58 {
    align-items: center;
    background-color: var(--oxpins-black);
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    justify-content: center;
    outline: 0;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-top: 10px;
    padding: 10px 25px;
}

.button-58:focus {
    color: white;
}

.button-58:hover {
    background-color: var(--oxpins-primary);
    color: var(--oxpins-black);
    border-color: none;
    fill: white;
}

.button-58:active {
    background-color: var(--oxpins-primary);
    color: var(--oxpins-black);
    border-color: none;
    fill: white;
}

.button-28 {
    appearance: none;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 50px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    margin: 0;
    outline: none;
    font-size: smaller;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
}

.button-28:disabled {
    pointer-events: none;
}

.button-28:hover {
    color: var(--oxpins-black);
    background-color: white;

    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.button-28:active {
    box-shadow: none;
    transform: translateY(0);
}

.button_outline {
    background: none;
    border: white solid 1.5px;
    border-radius: 20px;
}

.button_outline:hover {
    border: rgba(0, 0, 0, 0) solid;
}


/* BACKGROUND COLORS */
.cbg_primary {
    background-color: var(--oxpins-primary);
}

.cbg_base {
    background-color: var(--oxpins-base);
}

.cbg_dark {
    background-color: var(--oxpins-black);
}

/* LOGO BLOB */

.blob {
    position: absolute;
    top: 0;
    left: 0;
    fill: #ffffff;
    width: 20vmax;
    z-index: -1;
    animation: move 10s ease-in-out infinite;
    transform-origin: 50% 50%;
    opacity: 0.2;
}

@keyframes move {
    0% {
        transform: scale(1) translate(10px, -30px);
    }
    38% {
        transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
    }
    40% {
        transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
    }
    78% {
        transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
    }
    80% {
        transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
    }
    100% {
        transform: scale(1) translate(10px, -30px);
    }
}


/* ----------------------------
    Make a donetion Page
---------------------------------*/
.sidebar_first .case_boxed_wrapper {
    margin-bottom: 30px;
}

.donet_amount_area {
    background: #FFFFFF;
    box-shadow: -4px -4px 20px rgb(0 0 0 / 8%), 8px 10px 24px rgb(0 0 0 / 8%);
    border-radius: 6px;
    padding: 55px 25px;
    display: flex;
    justify-content: space-between;
}

.input_donet_amount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.input_donet_amount span {
    font-size: 30px;
}

.input_donet_amount input {
    border: none;
    border-bottom: 1px solid var(--main-color);
    font-size: 24px;
    width: 55%;
}

.input_donet_amount input:focus {
    border-bottom: 1px solid var(--main-color);
    outline: none;
}

.donet_amount_form_area {
    background: #FFFFFF;
    box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.08), 8px 10px 24px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 25px 25px;
}


.donet_amount_form_area .form-group {
    margin-top: 15px;
}

.doner_content_pbottom {
    margin-bottom: 30px;
}

.payment_option_area {
    padding-top: 30px;
}

.payment_option_area ul {
    display: flex;
}

.payment_option_area ul li {
    padding-right: 25px;
}

.payment_option_area ul li img {
    cursor: pointer;
}

.payment_amount_submit {
    padding-top: 30px;
}

.custom_form_title {
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

/*.custom_donate_top {*/
/*    margin-bottom: 20px;*/
/*}*/

.custom_donate_card hr{
    background: #777;
    margin-top: 25px;
    margin-bottom: 35px;
}

/* CSS */
.button-87 {
  margin-top: 25px;
  padding: 15px 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 10px;
  display: block;
  border: 0px;
  font-weight: 700;
  box-shadow: 0px 0px 14px -7px #f09819;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-87:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.button-87:active {
  transform: scale(0.95);
}

@media (max-width: 370px) {
    .button-58{
        display: none;
        background: red!important;
    }
}

.donate_button {
    border: none;
    background: orange;
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

/*---------------------------------------
  VOLUNTEER
-----------------------------------------*/
.volunteer-section {
  background: var(--oxpins-base);
  position: relative;
  overflow: hidden;
}

.volunteer-section::after {
  content: "";
  background: var(--oxpins-primary);
  border-radius: 50%;
  position: absolute;
  bottom: -110px;
  right: -80px;
  width: 350px;
  height: 350px;
}

.volunteer-form {
  background: var(--oxpins-white);
  border-radius: 20px;
  padding: 50px;
}

.volunteer-image {
  border-radius: 100%;
  display: block;
  margin: auto;
  width: 300px;
  height: 300px;
  object-fit: cover;
}

.volunteer-section .custom-block-body {
  max-width: 440px;
  margin: 0 auto;
}

.volunteer-section .custom-block-body p {
  line-height: 1.7;
}

.custom-text-box,
.volunteer-form {
padding: 30px;
}


/*---------------------------------------
  CUSTOM FORM
-----------------------------------------*/
.custom-form .form-control,
.input-group-file {
  background-color: var(--section-bg-color);
  box-shadow: none;
  border: 0;
  color: var(--p-color);
  margin-bottom: 24px;
  padding-top: 13px;
  padding-bottom: 13px;
  outline: none;
}

.custom-form .form-control:hover,
.custom-form .form-control:focus {
  border-color: var(--secondary-color);
}

.custom-form label {
  margin-bottom: 10px;
}

.custom-form .form-check-group {
  margin-bottom: 20px;
}

.donate-form .form-check-group-donation-frequency {
  padding-right: 0;
}

.form-check-group-donation-frequency + .form-check-group-donation-frequency {
  padding-right: 12px;
  padding-left: 0;
}

.form-check-group-donation-frequency .form-check-label {
  font-weight: var(--font-weight-semibold);
}

#DonationFrequencyOne {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#DonationFrequencyMonthly {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-form .form-check-radio {
  position: relative;
  height: 100%;
  padding-left: 0;
}

.custom-form .input-group-text {
  background: var(--secondary-color);
  border: 0;
  color: var(--white-color);
}

.custom-form .form-check-radio .form-check-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.form-check-radio .form-check-input[type=radio] {
  background-color: var(--section-bg-color);
  border-radius: .25rem;
  border: 0;
  box-shadow: none;
  outline: none;
  width: 100%;
  margin-top: 0;
  margin-left: 0;
  padding: 25px 50px;
  transition: all 0.5s;
}

.form-check-radio .form-check-input:checked[type=radio] {
  background-image: none;
}

.form-check-radio .form-check-input:checked[type=radio] + .form-check-label,
.form-check-radio .form-check-input:hover + .form-check-label,
.form-check-radio .form-check-input:checked + .form-check-label {
  color: var(--white-color);
}

.form-check-radio .form-check-input:hover,
.form-check-radio .form-check-input:checked {
  background-color: var(--secondary-color);
  border-color: var(--white-color);
}

.input-group-file {
  border-radius: .25rem;
  padding: 13px .75rem;
}

.input-group-file input[type=file] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  padding: 0;
}

.input-group-file .input-group-text {
  background: transparent;
  color: inherit;
  margin-bottom: 0;
  padding: 0;
}

.custom-form button[type="submit"] {
  background: var(--custom-btn-bg-color);
  border: none;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s;
  margin-bottom: 0;
}

.custom-form button[type="submit"]:hover,
.custom-form button[type="submit"]:focus {
  background: var(--oxpins-base);
  border-color: transparent;
}


/*---------------------------------------
  CONTACT SEARCH & DONATE & SUBCRIBE FORM
-----------------------------------------*/
.contact-form .form-control {
  background: var(--white-color);
}

.search-form {
  position: relative;
}

.search-form .form-control {
  padding-right: 50px;
}

.search-form button[type="submit"] {
  background: transparent;
  position: absolute;
  top: 0;
  right: 0;
  color: var(--p-color);
  width: 50px;
  padding: 12px;
}

.search-form button[type="submit"]:hover {
  background: transparent;
  color: var(--dark-color);
}

.subscribe-form {
  background: var(--section-bg-color);
  border-radius: var(--border-radius-small);
  padding: 30px;
}

.subscribe-form .form-control {
  background: var(--white-color);
}

.donate-form .form-control {
  margin-bottom: 0;
}

.input-item input{
    padding-left: 10px;
}


/***

====================================================================
	TOY FESTIVAL 2023
====================================================================

***/

.winner-card {
  position: relative;
  width: 250px;
  height: 300px;
  border-radius: 14px;
  z-index: 1111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff;
  ;
}

.card-bg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 240px;
  height: 290px;
  z-index: 2;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px);
  border-radius: 10px;
  overflow: hidden;
  outline: 2px solid white;
}

.card-bg img{
    height: 100%;
}

.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: 1;
  filter: blur(12px);
  animation: blob-bounce 5s infinite ease;
}

.first-position {
  background-color: gold;
}

.second-position {
  background-color: silver;
}

.third-position {
  background-color: saddlebrown;
}

@keyframes blob-bounce {
  0% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }

  25% {
    transform: translate(-100%, -100%) translate3d(100%, 0, 0);
  }

  50% {
    transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
  }

  75% {
    transform: translate(-100%, -100%) translate3d(0, 100%, 0);
  }

  100% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }
}