major.css

.title{
 
    background-color: rgba(165, 165, 165, 0.205);
     text-align: center;
      height: 5%;
      width: 100%;
      padding: 50px;
        background-size: cover;
  }
  
  .titlee{
    color:white;
    text-decoration: none;
  }

  /* navi bar */
.navbar{
    padding: 50px;
    background-color: #b9b4b562; 
    color: ivory; 
    height: 10%;
    width: 1265px;
    text-align: center;
  }
  .nav-link{
    text-decoration: none;
    color: #ffffff;
    padding: 50px;
  }
  
body
{
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;

}

.navbar-nav li a{
padding: 5px 9px;
color: #866a2e;
margin-right: 10px;
transition: 0.5s ease;
}


.navbar-nav li a:hover{
color: #000000;
background-color:#866a2e;
}


.navbar-brand
{
color:#ffffff;
}


.navbar-brand:hover{
color: #ffffff;
text-decoration: none;
}


.jumbotron
{
color: #e6e6e6;
height: 100%;
text-align: center;
}


h1{
font-size: 500%;
margin-top: 15%;
font-family: 'Dancing Script', cursive;
}


p{
font-size: 200%;
font-family: 'Dancing Script', cursive;
}


.button
{
border: 1px solid #ffffff;
color: #ffffff;
margin-right: 2%;
padding: 10px 30px;
transition: 0.4s ease;
}


.button:hover{
color: #000000;
text-decoration: none;
background-color: #9d9e76;
}

@font-face {
font-family: Montserrat-Regular;
src: url('../fonts/montserrat/Montserrat-Regular.ttf'); 
}
@font-face {
font-family: Montserrat-Bold;
src: url('../fonts/montserrat/Montserrat-Bold.ttf'); 
}
@font-face {
font-family: Montserrat-ExtraBold;
src: url('../fonts/montserrat/Montserrat-ExtraBold.ttf'); 
}
@font-face {
font-family: Montserrat-Medium;
src: url('../fonts/montserrat/Montserrat-Medium.ttf'); 
}
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}



.container-contact100 {
width: 100%; 
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}



.contact100-form-title {
display: block;
font-family: Montserrat-ExtraBold;
font-size: 30px;
color: rgb(19, 18, 18);
line-height: 1.2;
text-align: left;
padding-bottom: 36px;
}


/* to give outer boarder */ 
.wrap-contact100 {
width: 85%;
border-radius: 10px;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 110px 130px 157px 148px;
}



.contact100-pic {
width: 550px;
padding-top: 55px;
}
.contact100-pic img {
max-width: 100%;
}
.contact100-form {
width: 350px;
}
/* title of contact*/ 
input.input100 {
height: 60px;
border-radius: 32px;
padding: 0 30px 0 50px;
}
input.input100[name="email"] {
padding: 0 30px 0 50px;
}
textarea.input100 {
min-height: 210px;
border-radius: 30px;
padding: 14px 30px;
}


.wrap-input100 {
position: relative;
width: 100%;
z-index: 1;
margin-bottom: 10px;
}
.input100 {
display: block;
width: 100%;
background: #e6e6e6;
font-family: Montserrat-Bold;
font-size: 15px;
line-height: 1.5;
color: #666666;
}
.focus-input100 {
display: block;
position: absolute;
border-radius: 25px;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 0px;
color: rgba(132,106,221, 0.5);
}


.input100:focus + .focus-input100 {
-webkit-animation: anim-shadow 0.5s ease-in-out forwards;
animation: anim-shadow 0.5s ease-in-out forwards;
}
@-webkit-keyframes anim-shadow {
to {
box-shadow: 0px 0px 60px 25px;
opacity: 0;
}
}
@keyframes anim-shadow {
to {
box-shadow: 0px 0px 60px 25px;
opacity: 0;
}
}


.symbol-input100 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
position: absolute;
border-radius: 25px;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
padding-left: 30px;
pointer-events: none;
color: #aaaaaa;
font-size: 15px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.input100:focus + .focus-input100 + .symbol-input100 {
color: #846add;
padding-left: 22px;
}


/*------------------------------------------------------------------
[ Button ]*/
.container-contact100-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}

.contact100-form-btn {
width: 100%;
height: 50px;
border-radius: 25px;
background: #6accdd;
font-family: Montserrat-Bold;
font-size: 15px;
line-height: 1.5;
color: rgb(32, 138, 170);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 25px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.contact100-form-btn:hover {
background: #2e6170;
}
@media (max-width: 1200px) {
.contact100-pic {
width: 33.5%;
}
.contact100-form {
width: 44%;
}
}
@media (max-width: 992px) {
.wrap-contact100 {
padding: 110px 80px 157px 90px;
}
.contact100-pic {
width: 35%;
}
.contact100-form {
width: 55%;
}
}
@media (max-width: 768px) {
.wrap-contact100 {
padding: 110px 80px 157px 80px;
}
.contact100-pic {
display: none;
}
.contact100-form {
width: 100%;
}
}
@media (max-width: 576px) {
.wrap-contact100 {
padding: 110px 15px 157px 15px;
}
}
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: white;
border: 1px solid #c80000;
border-radius: 13px;
padding: 4px 25px 4px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 8px;
pointer-events: none;
font-family: Montserrat-Medium;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 13px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
@media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}

.donatebox
{
background-color: rgba(235, 226, 226, 0.6);
border-radius: 20px;
padding: 5%;
text-align: center;
color: rgb(19, 17, 17);
margin: 5%;
}
.donatebox h1
{
text-align: center;
font-size: 100%;
}
.donatebox .fa-user
{
margin-bottom: 2px;
}

.nav-link{
  text-decoration: none;
  color: #ffffff;
  padding: 50px;
}


.navbar{
  padding-top:50px;
  background-color: #58525362; color: ivory; height: 10%; width: 100%; text-align: center;
}

.title{
  background-color: rgba(255, 255, 255, 0.295); text-align: center; height: 12%; width: 100%; padding-top: 70px;
}

.navbar-brand ml-5{
text-decoration: none;
 padding-top: 20px;
  font-size: x-large;
   margin-top: 0px;
}

.gallery{
  width: 400px;
  height: 400px;
  padding: 90px;
  text-align: center;
  display: inline;
  border-color: black;
}