@import url("../css/_hero-banner.css");
@import url("../css/_intro-here-module.css");
@import url("../css/_features-module.css");
@import url("../css/_programs-default-slider.css");
@import url("../css/_intro-module.css");
@import url("../css/_number-section.css");
@import url("../css/_repeater-section.css");
@import url("../css/_donation-section.css");

.home-shape-1{top: -36px; right: -21px;}
    .home-shape-2{top: -52px; left: 84px;}
    .home-shape-3{bottom: -35px; left: -95px;}

.hero-banner-section {background: var(--violetblue);}
.hero-banner-section .hero-banner-main .hero-banner-txt {width: 51%; margin-bottom: 2.5%;}
.hero-banner-section .hero-banner-main .hero-banner-txt .optional-text {margin: 0 0 7px 0;}
.hero-banner-section .hero-banner-main .hero-banner-txt h1 {margin-bottom: 22px;}
.hero-banner-section .hero-banner-main .hero-banner-txt h1 span{color: var(--pink);}
.hero-banner-section .hero-banner-main .hero-banner-txt p {max-width: 450px;}
.hero-banner-section .hero-banner-main .hero-banner-image {width: 46%;}
.hero-banner-section .hero-banner-main .hero-banner-image .banner-img {bottom: -71px; right: -102px; position: absolute; width: auto!important;
  height: auto!important;} 

.hero-banner-section.single_image .hero-banner-image .banner-img{height: 637px!important; width: 637px!important; bottom: -71px; position: absolute; right: 0; display: flex; align-items: stretch;}
.hero-banner-section.single_image .hero-banner-image {width: 53%;}

.ellipse {border-radius: 50%; border-style: solid; border-width: 54px;}
.ellipse-red {border-color: var(--red);}
.ellipse-orange {border-color: var(--orange); border-width: 56px;}
.ellipse-green {border-color: var(--green);}
.ellipse-pink {border-color: var(--pink); border-width: 56px;}
.ellipse-icon {width: 152px; height: 152px; align-items: center; justify-content: center;}
.ellipse-icon img {width:96px; height:88px; border-radius:0!important;}

.banner-faces-thumbs {width: 100%; height: 100%; position: absolute; left: 0;}
.banner-faces-thumbs .face {width: 230px; height:228px; top: 0; left: -12px;}
.banner-faces-thumbs .face:nth-child(2) {width: 184px; height: 184px; bottom: 40px; left: 12px; top: inherit;}
.banner-faces-thumbs .face:nth-child(3) {width: 180px; height: 180px; right: 20px; top: 48px; left: inherit; margin-left: auto;}
.banner-faces-thumbs .face:nth-child(4) {width: 227px; height: 227px; bottom: -19px; right:-57px; top: inherit; margin-left: auto;}

.features-module{padding:20px 0 58px;}
.intro-here-module{padding: 0 0 25px;}
.programs-default-slider{padding-top: 74px;}

@media only screen and (min-width:1024px){	
    .repeater-section {padding: 75px 0;} 
}

@media only screen and (max-width: 1480px) and (min-width:768px){
	.banner-faces-thumbs .face:nth-child(4) {right: 0;}
}

@media only screen and (max-width: 1399px) and (min-width:1024px){	
	.hero-banner-section .hero-banner-main .hero-banner-txt {width: 45%;}
	.hero-banner-section .hero-banner-main .hero-banner-txt p {max-width: 400px;}
	.hero-banner-section .hero-banner-main .hero-banner-image {width: 50%;}
	.hero-banner-section .hero-banner-main .hero-banner-image .banner-img {right: 0;}
	
	
}


@media only screen and (max-width: 1399px) and (min-width:768px){
.hero-banner-section .hero-banner-main .hero-banner-txt h1 span {font-size: 5rem; line-height:4.5rem;}
	.ellipse {border-width: 42px;}
	.ellipse-pink, .ellipse-orange {border-width: 44px;}
	
	.banner-faces-thumbs .face {width: 200px; height: 198px; top: -30px; left: -12px;}
	.banner-faces-thumbs .face:nth-child(2) {width: 164px; height: 164px;}
	.banner-faces-thumbs .face:nth-child(3) {width: 160px; height: 160px; right: 0;}
	.banner-faces-thumbs .face:nth-child(4) {width: 197px; height: 197px;}
}

@media only screen and (min-width: 1161px) {
.hero-banner-section.single_image .hero-banner-main {min-height: 704px; max-width: 1260px;}
}


@media only screen and (max-width: 1160px) and (min-width: 1024px) {
  .hero-banner-section.single_image .hero-banner-image .banner-img {height: 500px !important; width: 500px !important;}
}

@media only screen and (max-width: 1023px) and (min-width:200px){
	.hero-banner-section .hero-banner-main .hero-banner-txt {width: 100%; margin-bottom: 24px;}
 	.hero-banner-section .hero-banner-main .hero-banner-image .banner-img {position: relative; right: 0;}
    
    .hero-banner-section.single_image .hero-banner-txt  {width: 100%;}
    .hero-banner-section .single_image .hero-banner-image {width: 100%;}
    .hero-banner-section.single_image .hero-banner-image .banner-img {width: 342px !important; height: 342px !important; bottom: -36px;}

}


@media only screen and (max-width: 1023px) and (min-width:768px){
	.hero-banner-section {margin: 0 0 90px 0;}
	.hero-banner-section .hero-banner-main .hero-banner-txt {margin-bottom: 20px;}
	.hero-banner-section .hero-banner-main .hero-banner-image {width: 496px; margin: 0 auto;}
    .home-shape-1{top: -15px; right: -9px;}
    .home-shape-1 svg{width: 116px; height: 174px;}
    .home-shape-2{top: -23px; left: 39px;}
    .home-shape-2 svg{width: 85px; height: 91px;}
    .home-shape-3{bottom: -20px; left: -30px;}
    .home-shape-3 svg{width: 161px; height: 123px;}
}

@media screen and (max-width: 767px) and (min-width: 200px) {
    .home-shape-1{top: -15px; right: -9px;}
    .home-shape-1 svg{width: 116px; height: 174px;}
    .home-shape-2{top: -23px; left: 39px;}
    .home-shape-2 svg{width: 85px; height: 91px;}
    .home-shape-3{bottom: -20px; left: -30px;}
    .home-shape-3 svg{width: 161px; height: 123px;}
    
	.hero-banner-section {margin: 0 0 91px 0;}
	.hero-banner-section .hero-banner-main .hero-banner-image {width: 349px; margin-left: auto; margin-right: auto;}
	.hero-banner-section .hero-banner-main .hero-banner-txt .optional-text {margin: 0 0 2px 0;}
	.hero-banner-section .hero-banner-main .hero-banner-txt h1 {margin-bottom: 29px;}
	.hero-banner-section .hero-banner-main .hero-banner-txt p {max-width: inherit; margin-bottom: 25px;}

    
	.banner-faces-thumbs .face {width: 135px; height: 135px; left: -9px;}
	.banner-faces-thumbs .face:nth-child(3) {width: 106px; height: 106px; right: 11px; top: 28px;}
	.banner-faces-thumbs .face:nth-child(2) {width: 109px; height: 109px; left: 2px; bottom: 21px;}
	.banner-faces-thumbs .face:nth-child(4) {width: 134px; height: 134px; bottom: -13px; right: -2px;}
	
	.ellipse {border-width: 33px;}
	.ellipse-pink, .ellipse-orange {border-width: 32px;}
	.ellipse-icon {width: 89px; height: 89px;}
	.ellipse-icon img {height: 37px; width: 56px;}
	.banner-ellipse {position: relative; left: -2px;}
	
    .intro-module{padding: 52px 0 0;}
    .features-module{padding: 0 0 20px;}
    .features-module-grid .features-txt p { padding-right: 0;}
    .intro-here-module { padding: 0 0 25px;}
    .programs-default-slider{padding: 35px 0 35px 0;}
    .repeater-main {padding: 28px 0 60px;} 
    .repeater-content {padding-bottom: 27px;}
}

@media screen and (max-width: 385px) and (min-width: 200px) {

	.ellipse-pink, .ellipse-orange {border-width: 30px;}
	.ellipse {border-width: 31px;}
}