@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    text-decoration: none;

    list-style: none;

}

body{

    width: 100%;

    height: 100%;

    font-family: 'Lato', sans-serif;

}

.navbar {

    background-color:rgba(0,0,0,0.2);

    height: 80px;

    width: 100%;

    position: fixed;

    display: flex;

    text-align: left;

    justify-content: center;

    justify-content: space-around; 

    

}



.navbar img{

    width: 300px;

    height: 73px;

}



nav ul{

   /* text-align: center; */

    font-size:0.625em;

}



nav ul li{

    display: inline-block;

    text-align: left;

    padding: 24px 0; 

    line-height: 30px;

   /* margin: 0 5px; */

} 



.fas, .far{

    margin-right: 5px;

} 



.dropdown{

    position: relative;

    display: inline-block;

    min-width: 130px; 

    padding: 0;

}



.dropdown-content{

    display: none;

    position: absolute;

    padding: 4px 6px;

    background-color: #33383b;

    min-width: 180px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index:1;

    box-sizing:border-box;

    float: left;

    transition-delay: 5s;

}

.dropdown-content a:hover {background-color: #e72e19;}

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

.dropdown:hover .dropbtn{background-color:rgba(0,0,0,0.2);}

.fa-caret-down{pointer-events: none;}



.burger{

    margin-top: 20px;

    display: none;

}

.burger div{

    width: 25px;

    height: 3px;

    background-color: rgb(226, 226, 226);

    margin: 5px;

    transition: all 0.3s ease;

}

/* Responsiveness of the nav bar */

@media screen and (max-width: 768px){

    body{

        overflow-x: hidden;

    } 



    .navbar img{

        width: 230px;

        height: 75px;

    }

    

    .navbar{

        position:static;

        background-color: #33383b;

    }

    .nav-bar{

        position: absolute;

        right: 0px;

        height: 100vh; 

        width: 300px;

        top: 10vh;

        background-color: #33383b;

        display: flex;

        flex-direction: column;

        align-items: center;

        transform: translateX(100%);

        transition: transform 0.5s ease-in;

    }

    .nav-bar li{

        opacity: 0;

    }



    .nav-bar li:last-child{

        padding-left: 3px;

        padding-top: 3px;

    }



    .burger{

        display: block; 

        margin-top: 27px;

        cursor: pointer;

    }

    .banner-caption1 h1 {padding: 40;}

    label.logo{font-size: 1.5em;}

    .show{width: 300px;}

}



.nav-active{transform: translateX(0);}

@keyframes navLinkFade{

    from{

        opacity: 0;

        transform: translation(50px);

        

    }

    to{

        opacity: 1;

        transform: translation(0px);

    }



}



.toggle .line1{

    transform: rotate(-45deg) translate(-5px, 6px);

}

.toggle .line2{

    opacity: 0;

}

.toggle .line3{

    transform: rotate(45deg) translate(-5px, -6px);

}



.banner{

    width: auto;

    background-image: url("/UsefulImages/Home\ banner\ 2.jpg");

    background-size: 100% 100%;

    background-repeat:no-repeat;

    background-color:#212f3d;

    background-blend-mode: soft-light;

    background-position: center;

    justify-content: center;

}  



.banner1{

    width: auto;

    background-image: url("/UsefulImages/Home\ banner\ 2.jpg");

    background-size: 100% 100%;

    background-repeat:no-repeat;

    background-color:#212f3d;

    background-blend-mode: soft-light;

    background-position: center;

    justify-content: center;

}  



.tithely-give-btn{cursor: pointer;}



nav ul li a{

    color: #FDFEFE;

    font-size: 12px;

    padding: 7px 13px;

    border-radius: 3px;

    text-transform: uppercase;   

}

 nav a:hover, .footer-links a:hover, .navbar ul li a.active-page {

    background: #e72e19;

    transition: .5s;

}



/* banner caption */

.banner-caption{

    vertical-align: text-bottom;

    color: #FDFEFE;

    padding: 18%;

    text-align: center;

}



.banner-caption h1{

    padding: 5%;

    font-size: 2.5em;

    font-family:'Inter', sans-serif;

}



.banner-caption1 h1{

    color: white;

    text-align: center;

    font-size: 3em;

    padding:7%;

    text-align: center;

}



.banner-caption a{

    display: inline-block;

    padding: 7px;

    background-color:  #e72e19;

    font-weight: bold;

    margin: 15px;

    color: #FBFCFC;

    border-radius: 4px; 

    box-sizing: border-box;

    font-size: 1rem;

    font-weight: 700px;

    border-radius: 4px;

}



/*Banner slide-show */

.slideshow-container{

    width: 100%;

    position: relative;

    margin: auto;

    background-color:  #33383b;

}



.mySlides{display: none;} 

.mySlides img{

    vertical-align: middle;

    width: 100%;

    height: 100%;

}

.active {

    background-color: #717171;

  }



.fade {

    -webkit-animation-name: fade;

    -webkit-animation-duration: 1.5s;

    animation-name: fade;

    animation-duration: 1.5s;

  }

  

  @-webkit-keyframes fade {

    from {opacity: .4} 

    to {opacity: 1}

  }

  

  @keyframes fade {

    from {opacity: .4} 

    to {opacity: 1}

  }

  

/* Footer design */



footer{

    background-color: #292c2f;

	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

	box-sizing: border-box;

	width: 100%;

	text-align: left;

	font: bold 1.2em sans-serif;

 

	padding: 55px 50px;

	margin-top: 80px;

}



footer .footer-left,

footer .footer-right,

footer .footer-center{

    display: inline-block;

    vertical-align: top;

}



footer .footer-left{

    width: 40%;

}



footer h3{

    color: #ffffff;

    margin: 0;

}

footer h3 span{

    color: #EC7063;

}



footer .footer-links{

    color:  #ffffff;

	margin:0 0 12px;

	padding: 0;

}



footer .footer-links a{

    display:inline-block;

    line-height: 1.8;

    margin-right: 5px;

	text-decoration: none;

    color:  inherit;

    padding: 5px;

}



footer .social-media-icon{

    color:  #ffffff;

	font-size: 14px;

	font-weight: normal;

	margin: 0;

}



footer .social-media-icon p a{

    display:inline-block;

	line-height: 1.8;

	text-decoration: none;

	color:  inherit;

}



footer .footer-center{

    width: 35%;

}



footer .footer-center i{

    background-color:  #33383b;

	color: #ffffff;

	font-size: 25px;

	width: 38px;

	height: 38px;

	border-radius: 50%;

	text-align: center;

	line-height: 42px;

	margin: 10px 15px;

	vertical-align: middle;

}



.footer .footercenter i .fa-envelope{

    font-size: 17px;

	line-height: 38px;

}



footer .footer-center p{

    display: inline-block;

	color: #ffffff;

	vertical-align: middle;

	margin:0;

}



footer .footer-center p span{

    display:block;

	font-weight: normal;

	font-size:14px;

	line-height:2;

}



footer .footer-center p a{

    color: #EC7063;

    text-decoration: none;

}



footer .footer-right{

    width: 20%;

}



footer .social-media-icon{

    line-height: 20px;

	color:  #92999f;

	font-size: 13px;

	font-weight: normal;

	margin: 0;

}



footer .footer-right .social-media-icon{

    color: #ffffff;

}



footer .footer-right .social-media-icon span{

    display: block;

	color:  #ffffff;

	font-size: 14px;

	font-weight: bold;

	margin-bottom: 20px;

}



footer .social-media-icon{

    margin-top: 20px;

}



footer .rights{

    text-align: center;

}



footer .social-media-icons a{

    display: inline-block;

	width: 35px;

	height: 35px;

	cursor: pointer;

	background-color:  #33383b;

	border-radius: 2px;

 

	font-size: 20px;

	color: #ffffff;

	text-align: center;

	line-height: 35px;

 

	margin-right: 10px;

	margin-top: 20px;

}



footer .rights{

    margin-top: 50px;

    color: #ffffff;

}



@media (max-width: 880px){

    .footer{

        font: bold 14px sans-serif;

    }

    footer .footer-left,

    footer .footer-center,

    footer .footer-right{

        display: block;

		width: 100%;

		margin-bottom: 40px;

		text-align: center;

    }

    footer .footer-center i{

        margin-left: 0;

    }

}