*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- Custom Properties --- */

:root {
    --clr-white: #fefefe;
    --clr-gray: #717171;
    --clr-dark: #2f2e2e;
    --clr-accent: #68ccc3;
    
    font-size: 62.5%; 
}
/* --- Custom Properties End --- */

/* -- General Styles --*/

html, body {
    height: 100%;
}
body {
	padding: 0;
	margin: 0;
	background: #f4f4f4;
}

.action_info button, .description button, .form-btn {
	background: var(--clr-accent);
	border-radius: 5px;
	color: #fff;
    border: 2px solid #68ccc3;
}

.action_info button:hover, .description button:hover, .form-btn:hover {
    background: white;
    border: 2px solid #68ccc3;
    color: #68ccc3;
    font-weight: 500;
}

.center-img {
    display: block;
    margin: auto;
    padding: 4rem;
}

/* -- General Styles End --*/

/* --- Typography --- */

h1 {font-size: 4.4rem; font-family: 'Raleway', sans-serif;}
h2 {font-size: 3.0rem; font-family: 'Raleway', sans-serif;}
h3 {font-size: 2.4rem; font-family: 'Raleway', sans-serif;}
h4 {font-size: 1.8rem; font-family: 'Raleway', sans-serif;}
p, a, .btn {font-size: 1.6rem; font-family: 'Roboto', sans-serif;}
ul li {font-size: 1.6rem; font-family: 'Roboto', sans-serif;}
.title-style, .title-style-wide, .title-style-white {font-size: 2.2rem;}
.logo {font-size: 2rem; font-family: 'Abril Fatface', cursive; }

@media only screen and (max-width: 768px) {
    h1 {font-size: 3rem;}
    h2 {font-size: 2.2rem;}
    h3 {font-size: 2rem;}
}

@media only screen and (max-width: 480px) {
/*    h1 {font-size: 1rem;}*/
    h3 {font-size: 1.6rem;}
    p, a, .btn {font-size: 1.4rem;}
    ul li {font-size: 1.4rem;}
    .title-style, .title-style-wide, .title-style-white {font-size: 1.8rem;}
}

strong { font-weight: var(--fw-bold) }


.title-style {
    text-align: center;
    text-transform: uppercase;
    color: var(--clr-white);
    background-color: var(--clr-accent);
    width: 180px;
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 1rem;
}

.title-style-wide {
    text-align: center;
    text-transform: uppercase;
    color: var(--clr-white);
    background-color: var(--clr-accent);
    width: 250px;
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 1rem;
}

.txt-accent {
    color: #717171;
    margin: auto;
    padding-top: 2rem;
    text-align: center;
    line-height: 1.4;
}

.long-txt {
    padding: 1rem 4rem;
    margin-bottom: 1rem;
}

.long-txt h3 {
    color: var(--clr-accent);
    padding: 1rem 0;
}

.long-txt h4 {
    color: var(--clr-gray);
}

/* --- Typography End --- */

/*--- navigation bar ---*/
.navbar {
	background-color: var(--clr-dark);
}
.nav-link,
.navbar-brand {
    text-transform: uppercase;
	color: var(--clr-white);
	cursor: pointer;
}
.nav-link {
	margin-right: 1em !important;
}
.nav-link:hover, .navbar-brand:hover {
	color: var(--clr-accent);
    font-weight: 500;
}
.navbar-collapse {
	justify-content: flex-end;
}

/*--- home page ---*/

.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
	background-image: url('../images/mother_daughter.jpg');
	background-size: cover;
	background-position: right;
	position: relative;
    height: 100vh;
}

.overlay-gradient {
	position: absolute;
	min-height: 100%;
	min-width: 100%;
	left: 0; 
	top: 0;
    background: rgb(38,38,38);
    background: linear-gradient(90deg, rgba(38,38,38,1) 0%, rgba(56,56,56,0) 60%);
}

.description {
    left: 5rem;
    padding: 2rem;
	position: absolute;
    width: 30vw;
    text-align: center;
}

.description h1 {
    padding-bottom: 2rem;
	color: var(--clr-white);
}

.description h3 {
    margin-bottom: 3rem;
	color: var(--clr-white);
	line-height: 1.5;
}

.featured {
	margin: auto;
	position: relative;
    color: var(--clr-white);
}

.featured img {
	margin: 2rem 0 2rem 0;
    color: white;
}

.feature-title {
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.featured p {
    margin: 0 2rem 2rem 2rem;
}

.column-01 {background-color: #68ccc2; padding: 6rem;}
.column-02 {background-color: #bf87ae; padding: 6rem;}
.column-03 {background-color: #e3bf81; padding: 6rem;}

.call-to-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
	background-image: url('../images/hugging_mom.jpg');
	background-size: cover;
	background-position:top;
    padding: 10rem 0;
}

.action_info {
    margin: 3rem 0;
    position: relative;
    padding: 5rem;
}

.action_info h2, .action_info h3 {
    color: var(--clr-white);
    text-shadow: 2px 2px 6px black;
    padding-bottom: 3rem;
}

/*--- Hero Images with Text Overlay --- */

.hero {
    position: relative;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    
}
.hero img {
    max-width: 100%;
}
.txt-over-img {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -100%);
}
/*--- Hero Images End ---*/

/*--- about page ---*/

.mission {
    margin: 3rem 0;
    text-align: center;
}

.mission h1 {margin: auto;}

.team {
    background-color: var(--clr-accent);
    text-align: center;
}

.team h1 {
    color: var(--clr-accent);
    background-color: var(--clr-white);
    width: 180px;
    margin: auto;
    padding: 1rem;
    margin-bottom: 4rem;
}
.team img { margin-bottom: 2rem;}

.team h2 {color: #fff; text-transform: uppercase; font-size: 1.8rem;}

.team h3 {color: #eee; font-size: 1.6em;}

.team h4 {color: #fff; margin-bottom: 3rem; font-size: 1.4rem;}

.story p {
    margin-bottom: 4rem;
    line-height: 3.4rem;
}

/*--- program page ---*/

.program-header img {
    margin: 2rem 0;
    box-shadow: 4px 6px 8px #666;
}

@media only screen and (max-width: 1200px) {
    .program-header {
        width: 100%;
    }
}

.program-info {
    margin-bottom: 5rem;
}

.program-col {
    background-color: #fff;
    padding: 3rem;
    text-align: center;
    height: 100%;
}

.program-info h2 {
    color: var(--clr-accent);
    padding: 2rem 0;
}

.program-info h3 {
    color: var(--clr-gray);
    padding: 1rem 0;
}

/*--- services page ---*/

.services {
    background-color: #fff;
    padding: 1rem 3rem;
    text-align: center;
}

.services-header {
    padding: 4rem;
}

/*--- donate page ---*/

.dnt {
    background-color: #fff;
    margin: 2rem 0;
    padding: 2rem;
}

.carousel {
    width: 50%;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.carousel-item {
  text-align: center;
}

/*--- contact page ---*/

.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 83vh;
}
.contact p {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--clr-gray);
}

#first-name, #last-name, #email, #msg {
    font-size: 1.6rem;
    padding: 1.4rem;
    border-radius: 4px;
    background-color: var(--clr-white);
}

form {
    font-size: 1.8rem;
}


/*--- footer ---*/

.page-footer {
	background-color: var(--clr-dark);
	color: #ccc;
	padding: 4rem 0 3rem 0;
}

.footer-nav {
    color: #fff;
}

.footer-nav:hover {
    color: #aaa;
    text-decoration: none;
}

/*--- media queries ---*/


@media only screen and (max-width: 768px) {
    .header {
        background-image: url('../images/mother_daughter_devices.jpg');
        background-position: top;
        
    }
    .description {
        width: 100%;
        left: 0;
		padding: 0 15px;
/*		bottom: 5%;*/
    }
    .action_info {
        padding: 0;
    }
    .overlay-gradient {
        background: linear-gradient(0deg, rgba(38,38,38,1) 0%, rgba(56,56,56,0) 90%);
    }
    .program-col {
        padding: 0 2rem;
    }
    .carousel {
    width: 100%;
    }
    
}