@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,800;1,300;1,400&display=swap");
:root {
    --pinkish: #dd05fa8f;
    --purplish: #4f02a2;
    --transi: #d9d9d9;

    --content-width: 1000px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth !important;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #333;
}
::-webkit-scrollbar-thumb {
    background: var(--transi);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--purplish);
}

i{
    font-size: 1.5rem;
}
body {
    position: relative;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

#header{
    width: 100%;
    
}

#header .container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#header .part_1:nth-child(1) {
    width: var(--content-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header .part_1 .logo_part img {
    width: 200px;
}

#header .part_1 .menu_part #menu {
    display: flex;
    justify-content: space-between;
}

#header .part_1 .menu_part #menu li {
    list-style-type: none;
    padding: 0 1.5rem;
}

#header .part_1 .menu_part #menu li a {
    text-decoration: none;
    font-weight: 800;
    color: black;
    font-size: 18px;
    position: relative;
    transition: 0.2s ease-in-out;
}

#header .part_1 .menu_part #menu li a::after {
    content: "";
    position: absolute;
    top: 120%;
    left: 0%;
    width: 0%;
    height: 2px;
    border-radius: 10px;
    background-color: var(--purplish);
    transition: 0.2s ease-in-out;
}

#header .part_1 .menu_part #menu li.active a::after {
    width: 100%;
}

#header .part_1 .menu_part #menu li a:hover:after {
    right: 50%;
    width: 100%;
}

#header .part_1 .menu_part #menu li a:hover,
#header .part_1 .menu_part #menu li.active a {
    color: var(--purplish);
}

#header .hero_part {
    background: rgba(0, 0, 0, 0.2) url("../images/slides/slide14.jpg");
    width: 100%;
    min-height: 600px;
    position: relative;
    background-Repeat: no-repeat;
    background-Attachment: fixed;
    background-Position: center;
	background-Size:  cover;
	background-blend-mode: darken;
    color: white;
    padding: 10rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fade 1s both;
    transition: all 0.5s linear;
}
.hero_part .container{
    width: var(--content-width);
    
}
.arrow-left,
.arrow-right {
    background: transparent;
    position: absolute;
    top: 40%;
    width: 4em;
    height: 4em;
    border: 1px solid var(--purplish);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.arrow-left:hover,
.arrow-right:hover {
    background: var(--purplish);
    color: #fff;
}

.arrow-left {
    left: 1em;
}

.arrow-right {
    right: 1em;
}

.image-fade {
    animation: Fade 0.5s ease-in-out;
}

@keyframes Fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#header .hero_part .part_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

#header .hero_part .part_1 h1 {
    text-align: center;
    color: white;
    font-size: 18px;
    width: 50%;
    line-height: 1.8rem;
    background-color: rgba(0,0,0,0.5);
    border-radius: 8px;
    padding: 1rem;
}

#header .hero_part .part_1 button {
    margin-top: 1.5rem;
    
}

.btn {
    background-color: transparent;
    border: 1px solid var(--purplish);
    padding: 0.5rem 1.5rem;
    color: var(--purplish);
    font-weight: 500;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 0.15rem;
    transition: 0.2s ease-in-out;
}

.btn:hover {
    background-color: var(--purplish);
    color: white;
}

.btn1{
     background-color: var(--purplish);
     color: white;
}
.btn1:hover{
    background-color: transparent;
}
#header .hero_part .part_1 .btn {
    color: white;
}

#header .hero_part .part_2 {
    margin-top: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--content-width);
}

#header .hero_part .part_2 a {
    text-decoration: none;
    color: white;
    font-weight: 500;
    text-decoration: none transparent;
    transition: 0.2s ease-in-out;
}

#header .hero_part .part_2 a:hover {
    text-decoration: underline var(--purplish) 3px;

}


/* Section_1 */

#section_1 {
 
    margin-top: 2rem;
    padding: 1.5rem 1rem;
    width: var(--content-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 2rem;
}

.title_part h2 {
    font-weight: 700;
    font-size: 30px;
    color: var(--purplish);
}

#section_1 .text_part {
    margin-top: 1rem;
}

#section_1 .text_part p {
    font-size: 15px;
}

#section_1 .button_part {
    margin-top: 1rem;
}


/*section_2*/

#section_2 {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
    background-color: var(--pinkish);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section_2 .container{
    width: var(--content-width);
    text-align: center;
    
}
#section_2 .title_part h2 {
    color: black;
}

#section_2 .box_part {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    grid-gap: 3rem;
}

.box {
    height: 250px;
    text-align: center;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    transition: 0.2s ease-in-out;
}

.box:hover {
    box-shadow: 0 10px 4px 0 var(--purplish);
}

#section_2 .box_part .box h3 {
    font-size: 20px;
    font-weight: 700;
}

#section_2 .box_part .box p {
    margin-top: 1.5rem;
    color: white;
    font-size: 18px;
}

#section_2 .button_part {
    margin-top: 1.5rem;
}


/* section_3*/

#section_3 {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
    width: var(--content-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section_3 .feed_part {
    margin-top: 2rem;
    min-height: 500px;
    width: 500px;
    background-color: var(--transi);
}


/* section_4 */

#section_4 {
    padding: 1.5rem;
}

#section_4 .partners {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 2rem;
}

.circle {
    border: none;
    padding: 1.5rem;
    background-color: var(--transi);
    height: 100px;
    width: 100px;
    border-radius: 50%;
}


/*      About Page      */

#about_1 {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 2rem;
    width: var(--content-width);
}

/* #about_1 .part_1 {
    flex-basis: 70%;
} */

#about_1 h2 {
    font-weight: 700;
    font-size: 30px;
    color: var(--purplish);
}

#about_1 p {
    margin-top: 0.5rem;
}

#about_1 .part_2 {
    
    background-color: var(--pinkish);
    height: 400px;
    padding: 2rem;
    border-radius: 15px;
    line-height: 1.5rem;
}

#about_2 {
    padding: 1.5rem 1rem;
    margin-top: 2rem;
    /* margin-bottom: 2rem; */
    background: rgba(0, 0, 0, 0.4) url("../images/slideshow/img14.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: cover;
    background-blend-mode: multiply;
    min-height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about_2 .box_part {
    width: var(--content-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

#about_2 .box_part .box {
    width: 300px;
    
}

#about_2 .box_part .box h3 {
    font-weight: 800;
    color: var(--purplish);
}

#about_2 .box_part .box p {
    margin-top: 1rem;
    line-height: 1.5rem;
    color: white;
}

#about_2 .box_part .box:last-child .arrange {
    display: flex;
    justify-content: center;
    grid-gap: 2rem;
}

#about_2 .box_part .box ol {
    margin-top: 1rem;
}

#about_2 .box_part .box ol li {
    list-style-type: none;
    padding: 0.1rem 0;
    color: white;
}

#about_3 {
    padding: 1.5rem;
}


/*      Programmes Page      */

#programmes_1 {
    padding: 1.5rem 1rem;
}

#programmes_1 .title h2 {
    font-weight: 700;
    font-size: 30px;
    color: var(--purplish);
}

#programmes_2 .box_part,#gallery_2 .box_part {
    padding: 1.5rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 2rem;
}

#programmes_2 .box_part .box, #gallery_2 .box_part .box {
    background-color: var(--pinkish);
}

/* Gallery Page */
#gallery_2 .box_part{
    padding: 1rem;
}
#gallery_2 .box_part .box{
    height: 200px;
    padding: 1rem;
    background-color: var(--pinkish);
}
#gallery_2 .box_part .box img{
    width: 100%;
    
}
/*     Contact Page      */

#contact_1 {
    padding: 1.5rem 1rem;
}

#contact_1 .title h2 {
    font-weight: 700;
    font-size: 30px;
    color: var(--purplish);
}

#contact_2 {
    width: var(--content-width);
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    grid-gap: 10rem;
    
}

form div {
    margin-top: 0.5rem;
}

form div input,
form div textarea {
    background-color: transparent;
    border: 1px solid var(--purplish);
    border-radius: 3px;
    padding: 0.5rem 0.4rem;
    min-width: 500px;
    transition: 0.2s ease-in-out;
}

form div textarea {
    width: 100%;
    height: 100px;
    resize: none;
}

form div input:focus,
form div textarea:focus,
form div input:valid,
form div textarea:valid {
    outline: none;
    border: 1px solid var(--pinkish);
}

#contact_2 .address_part{
    margin-right: auto;
}
.address_part ul li {
    list-style-type: none;
    padding: 0.2rem 0;
}

#contact_2 .btn1:hover{
    color: black;
}
/* footer */

#footer {
    padding: 1.5rem 1rem;
    background-color: var(--pinkish);
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#footer .container,#map_part{
    width: var(--content-width);
}
#footer .part_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
/* #footer .part_1 div:first-child{
    flex-basis: 400px;
}
#footer .part_1 .button_part{
    flex-basis: 400px;
} */
#footer .part_1 ul li {
    list-style-type: none;
    padding: 0.3rem 0;
}

#footer a {
    text-decoration: none;
    color: black;
    font-size: 12px;
    font-weight: 700;
    transition: 0.2s ease-in-out;
}
#footer a:hover{
    color: var(--purplish);
}
#footer .part_2 small {
    margin-top: 1.5rem;
    font-size: 10px;
}


/* Donate Box */

#donate_box{
	position: fixed;
	top: 20%;
	background: white;
	padding: 2rem;
	width: 50%;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-gap: 2rem;
	border-radius: 6px;
	box-shadow: 400px 1px 10px 3000px rgb(0 0 0 / 70%);;
	z-index: 1000!important;
	animation: fade 0.8s both;
}
@keyframes fade {
  from {opacity: 0.4;}
  to {opacity: 1;}
}
#donate_box p{
	line-height: 1.5rem;
}
#donate_box .part_2{
    width: 100%;
	display: flex;
	justify-content: center;
	grid-gap: 2rem;
}
#donate_box .box{
    background: var(--pinkish);
	width: 100%;
	height: 100px;
	padding: 1rem;
	text-align: center;
}
#donate_box .box h2{
	font-size: 18px;
    color: var(--purplish);
}
#donate_box .box p{
	font-size: 20px;
	letter-spacing: 0.2rem;
	font-weight: 700;
}
#donate_box .box p:nth-child(2){
    margin-top: 1rem;
}
.menu_btn {
    display: none;
}

.close_btn {
    display: none;
}


/* Media Screens */

@media (max-width: 800px) {
    :root{
        --content-width: 100%;
    }
    #header .part_1 .menu_part #menu {
        display: none;
    }
    .menu_btn {
        display: flex;
        font-size: 2rem;
        margin: 0 0.5rem 0 0;
    }
    .close_btn {
        margin: 1.5rem 0.5rem 0rem 10rem;
    }
    #header .part_1 .menu_part #menu {
        display: block;
        background-color: #fff;
        position: fixed;
        top: 0;
        right: -1000px;
        min-height: 100vh;
        width: 50%;
        box-shadow: 0 15px 10px 500px rgb(0 0 0 / 40%);
        z-index: 9999;
        transition: all .5s ease-in-out;
    }
    #header .part_1 .menu_part #menu.opened {
        right: 0;
        transition: all .5s ease-in-out;
    }
    #header .part_1 .menu_part #menu li {
        margin-top: 3rem;
    }
    #header .part_1 .menu_part #menu li:nth-child(1) {
        margin-top: 5.5rem;
    }
    .arrow-left,
    .arrow-right {
        top: 50%;
        width: 2em;
        height: 2em;
    }
    #header .hero_part .part_1 h1 {
        width: 100%;
    }

    #header .hero_part .part_2{
        flex-direction: column;
        gap: 1rem;
    }
    #section_1,#section_3,#section_3 .feed_part{
        width: 100%;
    }
    #section_1 .text_part p {
        text-align: center;
    }
    #section_2 .box_part {
        flex-direction: column;
    }
    #footer .part_1 {
        text-align: center;
        flex-direction: column;
        align-items: center;
        grid-gap: 2rem;
    }
    /*   About Page   */
    #about_1,#about_2{
        width: 100%;
    }
    #about_1,
    #about_2 .box_part {
        flex-direction: column;
        gap: 2rem;
    }
    #about_2 .box_part .box{
        width: 100%;
    }
    .box{
        width: 100%;
    }
    form div input,
    form div textarea {
        min-width: 100%;
    }
    #contact_2 {
        flex-direction: column;
        width: 100%;
        grid-gap: 2rem;
    }
    .form_part {
        width: 100%;
        flex-basis: 50px; 
    }

    #footer .container{
        text-align: center;
    }
    #footer .part_1 {
        width: 100%;
    }
    #footer .part_1 div:first-child{
        flex-basis: 50px;
    }
    #footer .part_1 .button_part{
        flex-basis: 50px;
    }
    #donate_box {
        top: 5%;
        width: 90%;
       
        grid-gap: 1rem;
        text-align: center;
    }
    #donate_box .box{
        width: 100%;
    }
    #donate_box .box p{
        font-size: 18px;
    }
    #donate_box .part_2 {
        flex-direction: column;
    }
}