/*!
Theme Name: Beit Dan
Author: VAL:T
*/
.header{
	background: transparent;
}
.header--scrolled{
	background-color: #fff;
}
.reviews__img{
	border-radius: 50%;
	object-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	object-fit: cover;
	overflow: hidden;
}
.archive_page{
	padding: 50px 0px;
}
.archive__content_top, .single__content_top{
    display: flex;
    justify-content: space-between;
    padding: 50px 0px;
    width: 100%;
}
.archive__content_top{
	align-items: center;
}
.title_block{
	max-width: 700px;	
}
.title_block h1.title, .title{
	font-family: Montserrat;
	font-weight: 700;
	font-style: Bold;
	font-size: 52px;
	text-transform: uppercase;
	color: #054E05;	
}
.title.single_title{
	text-transform: initial!important;
}
.description_block{
	font-family: Montserrat;
	font-weight: 500;
	font-style: Medium;
	font-size: 20px;
	line-height: 32px;
}
.news__items{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
.archive_pagination{
	display: flex;
    justify-content: center;
    padding: 50px 0px 0px 0px;
	gap: 20px;
	
	font-family: Montserrat;
	font-weight: 500;
	font-style: Medium;
	font-size: 20px;
	line-height: 26px;
}
.archive_pagination .current{
	/*text-decoration: underline;*/
	border-bottom: solid 2px #117F1C;
	color: #117F1C;
}
.page-numbers{
	padding: 0px 10px 5px 10px;
}
.single__content{
	font-family: Montserrat;
	font-weight: 500;
	font-style: Medium;
	font-size: 18px;
	line-height: 24px;
	color: #000;
	padding-bottom: 50px;
}
.order-1{
	order: 1;
}
.order-2{
	order: 2;
}
.programs__img-wrapper {
    position: relative;
    flex: 0 0 46%;
    max-width: 46%;
    overflow: hidden;
    z-index: 1;
    border-radius: 16px;
}
.join__wrapper{
   background-image: url('./assets/images/Frame 41.png'); 
}
.rent_banner .join__wrapper{
	background-image: url('./assets/images/Frame 42.png');
}
.rent__content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0px; 
    color: #054E05;
    /*background: rgba(211, 244, 69, 0.45);*/
    position: relative;
}
.rent_banner{
    position: relative;
}
.rent_banner::before {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 72%;
    background: url(./assets/images/Rent-decor.svg) 0 0 / 100% no-repeat;
    width: 151px;
    height: 161px;
    z-index: 2;
    transition: all 0.5s;
}
.home-join{
    position: relative;
}
.home-join::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 190px;
    width: 200px;
    height: 200px;
    z-index: 2;
    background: url(./assets/images/left.svg) 0px 0px / 100% no-repeat;
    transition: 0.5s;       
}
.home-join::after{
    content: "";
    position: absolute;
    top: -70px;
    right: 50px;
    width: 200px;
    height: 200px;
    z-index: 2;
    background: url(./assets/images/right.svg) 0px 0px / 100% no-repeat;
    transition: 0.5s;       
}

.join__content::before {
    display: none;
   /* bottom: 0;
    left: -190px;
    -webkit-mask-image: url(../images/join-2.svg);
    mask-image: url(../images/join-2.svg);*/
}
.join__content::after {
    display: none;
    /*top: -17px;
    right: -190px;
    -webkit-mask-image: url(../images/join-1.svg);
    mask-image: url(../images/join-1.svg);*/
}
.new-join__btn{
    background-color: #117f1c;
    background: linear-gradient(
    100deg,
    #0555B8 0%,
    #0B68C1 25%,
    #17C8D0 50%,
    #0B68C1 75%,
    #0555B8 100%
);
}
.new-join__btn:hover {
        background-position: 100% 50%;
    box-shadow: 0 0 0 3px #00CCD2, inset 0 1px 0 #0555B8, 0 10px 26px #00CCD2;
}
.new-join__btn::before {
    background: linear-gradient(110deg, #0555B8 0%, #2368B8 15%, #00BDC2 38%, #0555B8 52%, #3B86EB 68%, #5CE4E7 82%, #00CCD2 100%);
}
.rent__text{
    font-family: Montserrat;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 62px;
    text-align: center;
    color: #054E05;
}
.rent__tel{
    font-family: Montserrat;
    font-weight: 700;
    font-style: Bold;
    font-size: 54px;
    line-height: 62px;
    text-align: center;
}
.archive_filters{
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    gap: 25px;
    margin-bottom: 20px;
}
.archive_filters .filter_item{
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #EBF4EE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 32px;
    color: #054E05;
}
.archive_filters .filter_item.active, .filter_item:hover{
    background-color: #054E05;
    color: #fff;
}
    .error_page{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 0 auto;
        width: 1024px;
        height: 600px;
        background: url('./assets/images/404.png') center no-repeat;
        position: relative;
    }
   
    .error_page::before{
        content: "";
        position: absolute;
        top: 60%;
        left: 15%;
        width: 100px;
        height: 100px;
        z-index: 2;
        background: url(./assets/images/smiley-3.png) 0px 0px / 100% no-repeat;
        transition: 0.5s;        
    }
    .error_page::after{
        content: "";
        position: absolute;
        top: 10%;
        right: 5%;
        width: 100px;
        height: 100px;
        z-index: 2;
        background: url(./assets/images/smiley-2.svg) 0px 0px / 100% no-repeat;
        transition: 0.5s; 
    }    
    .error_h1{
        font-family: Montserrat;
        font-weight: 700;
        font-style: Bold;
        font-size: 52px;
        line-height: 100%;
        text-transform: uppercase;
        color: #054E05;
    }
    .error_desc{
        font-family: Montserrat;
        font-weight: 500;
        font-style: Medium;
        font-size: 20px;
        line-height: 32px;
        text-align: center;
        color: #000;
        max-width: 771px;
        margin-bottom: 20px;
    }
    .error_button{
        text-transform: uppercase; 
        padding: 30px 50px;
    }
.volunteer_head{
	display: flex;
	flex-direction: row;
	gap: 30px;
}
.volunteer_logo{
	width: 300px;
}
.volunteer_logo img{
	width: 200px;
}
.volunteer_info, .volunteer__content, .volunteer_button, .volunteer_video{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}
.volunteer_video iframe{
	border-radius: 14px;
}
.volunteer_title h1{
	font-family: Montserrat;
	font-weight: 700;
	font-style: Bold;
	font-size: 52px;
	line-height: 100%;
	text-transform: uppercase;	
	color: #054E05;
	text-align: start;
	padding-bottom: 15px;
	color: #0555B8;
}
.volunteer_subtitle{
	font-family: Montserrat;
	font-weight: 500;
	font-style: Medium;
	font-size: 20px;
	line-height: 32px;
	color: #000;
	text-align: center;
	padding-bottom: 15px;
}
.volunteer_icons{
	display: grid;
    grid-template-columns: repeat(1, 1fr);
    -webkit-column-gap: 2.5rem;
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
    row-gap: 0px;	
}
.volunteer_icon{
	display: flex;
	flex-direction: row;
	align-items: start;
	gap: 20px;
	padding: 30px 0px 30px 0px;
	width: 100%;
	border-bottom: 5px solid rgba(0, 204, 210, 0.1);
}
.volunteer_icon:last-child{
	border-bottom: none;
}
.volunteer_icon img{
	width: 170px;
	height: auto;
}
.volunteer_icon__info{
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 50%;
}
.volunteer_slider{
	width: 50%;
}
.volunteer_icon__title{
	color: rgba(5, 85, 184, 1);
	font-family: Montserrat;
	font-weight: 700;
	font-style: Bold;
	font-size: 24px;
	line-height: 30px;
	text-align: left;
}
.volunteer_icon__descr{
	font-family: Montserrat;
	font-weight: 500;
	font-style: Medium;
	font-size: 18px;
	line-height: 28px;
	color: #000;
	text-align: left;
}
.tech_pages{
	display: flex;
	gap: 20px;
	margin-left: 135px;
}
.tech_pages__link{
	font-family: Montserrat;
	font-weight: 500;
	font-style: Medium;
	font-size: 17px;
	line-height: 41px;
	color: #D3F445;
}
.archive__content_top{
	padding-top: 0px;
}
.archive__content_top .icon_block img{
	width: 100px;
}

.pulse-svg {
    animation: pulseGlow 5s ease-in-out infinite;
}

.pulse-svg path {
    stroke: #117F1C;
    animation: pulseStroke 5s ease-in-out infinite;
}

@keyframes pulseStroke {
    0%, 100% {
        stroke: #117F1C;
    }
    50% {
        stroke: #A9C337;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(169,195,55,0));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(169,195,55,.8))
                drop-shadow(0 0 16px rgba(17,127,28,.5));
    }
}
.clubs__content{
	margin-bottom: 0px;
}
.lead__profile{
	overflow: visible;
    display: flex;
    align-items: center;
	gap: 50px;
}
.lead__info{
	display: flex;
	flex-direction: column;
	align-items: start;
}
.lead__profile img{
    width: 150px;
    height: 150px;
    border: solid 12px #EBF4EE;
    border-radius: 50%;
    object-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
    overflow: hidden;	
}
.lead__info-position{
	font-family: Montserrat;
	font-weight: 700;
	font-style: Bold;
	font-size: 35px;
	line-height: 40px;
	text-transform: capitalize;
	color: #054E05;
}
.lead__info-name{
	font-family: Montserrat;
	font-weight: 700;
	font-style: Bold;
	font-size: 24px;
	line-height: 32px;
	text-align: center;	
	color: #000;
}
.logo_club{
	max-width: 120px;
	height: auto;
}

/*about and home elements */
.values__item-wrap{
    animation: float 8s ease-in-out infinite;
    will-change: transform;
}
.values__item-wrap:nth-child(2){
    animation-duration: 10s;
    animation-delay: -2s;
}
.values__item-wrap:nth-child(3){
    animation-duration: 9s;
    animation-delay: -5s;
}
.values__item-wrap:nth-child(4){
    animation-duration: 11s;
    animation-delay: -3s;
}
.values__item-wrap:nth-child(5){
    animation-duration: 8.5s;
    animation-delay: -6s;
}
.values__item-wrap:nth-child(6){
    animation-duration: 9.5s;
    animation-delay: -1s;
}
.values__item-wrap:nth-child(7){
    animation-duration: 10.5s;
    animation-delay: -4s;
}
.values__item-wrap:nth-child(8){
    animation-duration: 12s;
    animation-delay: -7s;
}

@keyframes float{
    0%{
        transform:translate(0,0);
    }
    25%{
        transform:translate(4px,-6px);
    }
    50%{
        transform:translate(-5px,3px);
    }
    75%{
        transform:translate(3px,6px);
    }
    100%{
        transform:translate(0,0);
    }
}   
/* end about elements*/
/*about element 2*/
.main:has(.about)::after {
    opacity: 0;
    transform: translate(80px, -40px) scale(1.08);

    animation:
        heroDecor 1.5s cubic-bezier(.22,.61,.36,1) forwards,
        heroFloat 18s ease-in-out 1.5s infinite;

    will-change: transform, opacity;
}

@keyframes heroDecor {

    0% {
        opacity: 0;
        transform: translate(80px,-40px) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: translate(0,0) scale(1);
    }

}

@keyframes heroFloat {

    0% {
        transform: translate(0,0) scale(1);
    }

    25% {
        transform: translate(-18px,10px) scale(1.015);
    }

    40% {
        transform: translate(-6px, 22px) scale(1.02);
    }

    60% {
        transform: translate(16px, 12px) scale(1.01);
    }

    80% {
        transform: translate(10px, -8px) scale(1.018);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }

}
/*END about el 2*/
.single_icon_block{
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.programs__list-item{
	white-space: unset;
}
.volunteer_button_link, .volunteer_popup .popup_submit{
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 15px 63px;
    border: none;
    border-radius: 16px;

    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 500;
    white-space: nowrap;

    background: linear-gradient(
        100deg,
        #0555B8 0%,
        #0A79D8 30%,
        #00CCD2 50%,
        #0A79D8 70%,
        #0555B8 100%
    );

    background-size: 200% 100%;
    background-position: 0% 50%;

    transition:
        background-position .55s ease,
        box-shadow .25s ease;	
}
.volunteer_button_link:hover, .volunteer_popup .popup_submit:hover{
    background-position: 100% 50%;
    box-shadow: 0 2px 12px rgba(5, 85, 184, 0.28);	
}
.volunteer-header{
	
}
.volunteer_popup .custom-popup__close{
	    background: #0555B8;
}
.volunteer_popup .custom-popup__title, .volunteer_popup .about-contact__agree-text, .volunteer_popup .contact__agree-text{
	color: #0555B8;
}
.volunteer_popup .custom-popup__title{
	margin-bottom: 0px!important;
}
.volunteer_popup_top{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
}
.volunteer_popup_top img{
	width: 50px;
	height: 50px;
}
.archive_fon{
	position: relative;
}
.archive_fon:before{
    content: '';
    position: absolute;
	top: -100px;
	left: 0px;
    background: url(./assets/images/fon.svg) 0 0 / 100% no-repeat;
	width: 2376px;
	height: 1198px;
    z-index: -1;
    transition: all 0.5s;	
}
.about__image img{
	max-width: 800px;
}
.nav__list {
    gap: 34px;
}
.nav__item {
    font-size: 14px;
}
.vyvesty_zobrazhennya{
	display: flex;
	flex-direction: row; 
	gap: 20px;
}
.single_event_img{
	width: 400px;
	height: auto;
}
@media(max-width: 991px){
	.vyvesty_zobrazhennya{
		display: flex;
		flex-direction: column; 
		gap: 20px;
	}
	.single_event_img{
		width: 100%;
		height: auto;
	}	
	.news__items {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1.75rem;
	}
	.archive__content_top, .single__content_top{
		display: flex;
		justify-content: space-between;
		padding: 0px 0px 50px 0px;
		width: 100%;
	}	
	.title_block h1.title, .title{
		font-size: 25px;
	}
	.description_block{
		font-size: 16px;
		line-height: 22px;
	}	
	.archive__content_top .icon_block img{
		height: 60px;
		width: auto;
	}
    .rent__text{
        font-family: Montserrat;
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        color: #054E05;
    }
    .rent__tel{
        font-family: Montserrat;
        font-weight: 700;
        font-style: Bold;
        font-size: 35px;
        line-height: 45px;
        text-align: center;
    }
    .rent_banner::before {
        content: '';
        position: absolute;
        bottom: -10%;
        left: 72%;
        background: url(./assets/images/Rent-decor.svg) 0 0 / 100% no-repeat;
        width: 151px;
        height: 161px;
        z-index: 2;
        transition: all 0.5s;
    }   
    .archive_filters{
        overflow-x: scroll;
        scrollbar-width: thin;
		padding-bottom: 10px;
    }   
    .error_page{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 0 auto;
        width: 100%;
        background: url('./assets/images/404.png') center no-repeat;
        background-size: contain;
        position: relative;
    }    
    .error_h1 {
        font-size: 24px;
        line-height: 30px;
        text-align: center;
    }
    .error_desc{
        font-size: 18px;
        line-height: 28px;
    }
    .error_button {
        padding: 8px 50px;
    }  
    .error_page::before {
        top: 80%;
    }
    .home-join::before{
        bottom: 0;
        left: 10px;
        width: 100px;
        height: 100px;
    }
    .home-join::after{
        top: -30px;
        right: 0px;
        width: 100px;
        height: 100px;  
    } 
	.volunteer_icons{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		-webkit-column-gap: 20px;	
		-moz-column-gap: 20px;	
		column-gap: 20px;	
		row-gap: 0px;	
	}
	.volunteer_icon img{
		width: 100px;
		height: auto;
	}
	.volunteer_icon__descr{
		font-family: Montserrat;
		font-weight: 500;
		font-style: Medium;
		font-size: 16px;
		line-height: 22px;
		color: #000;
	}	
	.volunteer_title h1{
		font-size: 24px;
		line-height: 30px;
	}
	.volunteer_subtitle{
		font-size: 20px;
		line-height: 24px;		
	}
	.tech_pages{
		margin-left: 0px;
		flex-direction: column;
		gap: 0px;
		width: 100%;
	}
	.tech_pages__link{
		font-size: clamp(15px, 1.37vw, 17px);
	}
	.volunteer_icon{
		flex-direction: column;
	}
	.volunteer_icon__info, .volunteer_slider{
		width: 100%;
	}
	.archive_fon:before{
		content: '';
		position: absolute;
		top: -600px;
		left: 0px;
		background: url(./assets/images/fon_mobile.svg) 0 0 / 100% no-repeat;
		width: 100%;
		z-index: -1;
		transition: all 0.5s;	
		opacity: 0.3;
	}	
}
@media(max-width: 600px){
	.lead__profile{
		flex-direction: column;
		gap: 5px;
	}
	.lead__info{
		align-items: center;
	}
	.lead__info-position{
		font-size: 18px;
	}
	.accordion__card-img{
		position: relative;
		width: 100%;
		display: block;
	}
	.single__content_top{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}	
	.volunteer_head{
		flex-direction: column;
	}
	.volunteer_title h1, .volunteer_logo{
		text-align: center;
	}
	.volunteer_head{
		align-items: center;
	}
	.archive_filters .filter_item{
		padding: 5px 10px;
		font-size: 14px;
		white-space: nowrap;
	}
	.archive_fon:before{
		content: '';
		position: absolute;
		top: -300px;
		left: 0px;
		background: url(./assets/images/fon_mobile.svg) 0 0 / 100% no-repeat;
		width: 100%;
		z-index: -1;
		transition: all 0.5s;	
		opacity: 0.3;
	}	
}
@media(max-width: 450px){
	.volunteer_icons{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		-webkit-column-gap: 20px;	
		-moz-column-gap: 20px;	
		column-gap: 20px;	
		row-gap: 0px;	
	}	
	.header__socials{
		gap: 0px;
	}
	.junior__inner {
		margin-bottom: 0px;
	}	
	.programs__decor {
        width: 30px;
        height: 30px;
    }	
	.programs {
        padding-top: 60px;
    }
	.accordion__card-title{
		padding-top: 15px;
	}
	.volunteer_button_link, .volunteer_popup .popup_submit {
		padding: 15px 33px;
	}
}


@media (max-width: 1650px) {
    .nav__list {
        /*gap: 34px;*/
		gap: 20px;
    }
    .nav__item {
        /*font-size: 14px;*/
		font-size: 12px;
    }	
    .header__social img, .header__donate img {
        width: 22px;
        height: auto;
    }
	.header__socials {
        gap: 8px;
        padding: 0 10px;
    }	
}
@media(max-width: 1300px){
    .header__socials {
        gap: 0px;
        padding: 0 10px;
    }	
}