*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html{
    background-color: rgb(85, 7, 7);
    color: #4a4a4a;
    font-family: 'Texturina', serif;
    font-size:20px;
    font-weight: 300;
    scroll-behavior: smooth;
    
}

/*--------------------------------*/
/*--------All Headings-----------*/
/*--------------------------------*/

.head h2
{
  color:white;
  text-shadow:3px 3px 3px #e67e21;  
  font-size:1.75rem;
  font-weight:400;
  text-align: center;
  align-self: center;
  justify-self: center;
  padding:10px;
}

.row-heading h2
{
  color:#e67e21;
  font-weight:400;
  font-size:1.5rem;
  text-align: center;
}
.row-heading img{
  width:150px; 
  margin:0 auto;
}

.section-location h3{
  color:#e67e21;
  font-weight: 400;
  text-align: center;

}



/*--------------------------------*/
/*--------Re usable code-----------*/
/*--------------------------------*/

section{
  padding:20px 50px;
}

.row-heading{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.row{
  width:100%;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
}



.devider-head{
 background-image: linear-gradient(to bottom,rgb(136,7,7) 20%, rgb(85, 7 ,7 ));
}

.devider-head,
.devider{
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.devider img{
  width:500px;
}
.devider-head img{
  width:400px;
}



/*--------------------------------*/
/*--------header-----------*/
/*--------------------------------*/

.header{
  background-image: linear-gradient(rgba(85, 7, 7,0.7),rgba(85, 7, 7,0.7)),
  url("background.jpeg");
  background-size:cover;
  background-position: center;
  height:90vh;
}

.head-image-left,
.head-image-right
{
  position: absolute;
  width: 20%;
  height:40%;
}

.head-image-left{
  left:0px;
  top:135px;
}


.head-image-right{
  right:0;
  bottom:9.9%;
}


.head{
  background-image: linear-gradient(to top, rgb(50,10,10) 50%, rgb(110, 10, 10));
  display: none;
  width:100%;
  height:80px;
  overflow: hidden;
  position: absolute;
  top:0;
  left:0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.head-pic{
  width:200px; 
  margin:0 auto;
}

.tag-line{
  position: absolute;
  width: 100%;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%);
  
}

.tag-line h2{
  text-align:center;
  color: #ff9940; 
  text-shadow:3px 3px 3px #612f03;
  font-size:1.8rem; 
}



/*--------------------------------*/
/*--------Main navigation-----------*/
/*--------------------------------*/

.main-nav{
  display: flex;
  justify-content:center;
  position: absolute;
  top:80px;
  width: 100%;
  background-image: linear-gradient(to top, rgb(50,10,10) 30%, rgb(110, 10, 10));
  overflow: auto;
  border-top:1px solid #e67e21;
  border-bottom:1px solid #e67e21;
  z-index: 99;
}

.main-nav{
  top:80px;
}


.main-nav a {
  align-self: center;
  justify-self: center;
  padding:12px 20px;
  color: white;
  font-weight:500;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 1px;
}

.main-nav a:hover {
  background-color:#e67e21;
}

.main-nav a.active {
  background-color:#e67e21;
}


/*--------------------------------*/
/*--------Sticky navigation-----------*/
/*--------------------------------*/


.sticky .main-nav{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  background-color: rgba(85, 7, 7);
  
}


.sticky .main-nav a{
  padding:12px 20px;
  color:white;
  text-decoration: none;
  font-size: 17px;
  
}


.sticky .nav-mob {
  position: fixed;
  top:10px;
  right:10px;
  background-color:  #e67d21e7;
  width:40px;
  height:40px;
  text-decoration: none;
  border-radius:4px;
  z-index: 200;
}

.sticky .nav-mob i{
  position: relative;
  left:50%;
  top:35%;
  transform: translate(-50%,-50%) ;
  cursor: pointer;
  font-size:20px;
  color: rgb(255, 255, 255);
  z-index:500;
}

/*--------------------------------*/
/*--------mobile navigation-----------*/
/*--------------------------------*/

.nav{
  position: relative;
}


.nav-mob{
  position:absolute;
  display:none;
  top:107px;
  right:10px;
  background-color:  #e67e22;
  width:35px;
  height:35px;
  box-shadow: 2px 0 3px #f18900,
              -2px 0px 3px  #f18900,
              0 2px 3px  #f18900,
              0 -2px 3px  #f18900;
  text-decoration: none;
  border-radius:4px;
  z-index:500;
}


.nav-mob i{
  position: relative;
  left:50%;
  top:35%;
  transform: translate(-50%,-50%) ;
  cursor: pointer;
  font-size:20px;
  color:#fff;
}



/*--------------------------------*/
/*--------Section about-----------*/
/*--------------------------------*/


.section-about{
  width:100%;
  padding:45px 30px;
}


.section-about .row
{
  margin-top:10px;
 justify-content:center;
 align-items: center;
}


.section-about .box{
  width:100%;
}

.about-video{
  display: flex;
  align-self: center;
  justify-self: center;
  margin:0 auto;
  width:90%; 
  height:auto;
  border: none;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}

.about-video iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}


.section-about p{
  text-align:justify;  
  font-weight:300 ;
  letter-spacing: 1px;
  word-spacing:2px;
  color: rgb(214, 214, 214);
  font-size:1rem;

}


/*--------------------------------*/
/*--------Section history-----------*/
/*--------------------------------*/

.section-history{
  padding:45px 40px;
}

.section-history .row{
  margin-top:10px;
  align-items: center;
}

.section-history p{
  text-align:justify;  
  font-weight:300 ;
  letter-spacing: 1px;
  word-spacing:0.5px;
  color: rgb(214, 214, 214);
  font-size:1rem;
}

.history-pic{
  display:flex;
  justify-content: center;
  align-items: center;
}

.history-pic img{
  display:flex;
  justify-content: center;
  align-items: center;
  width:90%; 
  height: 100%;
  margin:0 auto;
  border:3px solid #e67e22;
}

.box{
  width: 100%;
  margin: 0;
  padding: 0;
}


.button {
  display: block;
  text-align: center;
  width: 30%;
  font-weight:400;
  font-size: 0.9rem;
  background-color: #e67e21;
  box-shadow: inset 5px 5px 8px #fdab62,
              inset -5px -5px 8px #7e3c03;
  padding: 0.3rem 0.5rem;
  color:rgb(50, 7, 7);
  border: 0;
  outline:none;
  border-radius: 20px;
  cursor: pointer;
  margin: 0 auto;
  margin-top:10px;
}

.button:hover {
  background-color:  #b45a0c;
  color: #fff;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-color:rgb(85, 7, 7);
 
  
}

.modal-content {
  margin: 2.5% auto;
  width: 95%;
  box-shadow: 0 5px 8px 0 rgba(200, 0, 0, 0.2), 0 7px 20px 0 rgba(200, 0, 0, 0.17);
  border-radius:10px ;
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

.modal-header h2 {
  font-size: 1.2rem;
  font-weight: 300;
  margin-left: 5px;
  text-align: center;
}

.modal-header img{
  width:180px; 
  margin:0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

}

.modal-header {
  background: rgb(60,10,10);
  padding: 15px;
  color: #e67e22;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.modal-body {
  padding: 10px 20px;
  /*background-color: red;*/
  background: rgb(60,10,10);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
 
}

.modal-body p{
  color:#ddd;
  font-weight:500 ;
  text-align: justify;
  
  
}

.close {
  color:#fff; 
  float: right;
  font-size: 30px;
}

.close:hover,
.close:focus {
  color:#e67e21; 
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/*--------------------------------*/
/*--------Section gallery-----------*/
/*--------------------------------*/

.section-gallery{
  padding:45px 30px;
}

.section-gallery .row > .column {
  padding: 0 8px;
}

.section-gallery .row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  position: relative;
  float: left;
  width: 23%;
  margin:1%;
}
.column img{
  display:block;
  margin-bottom: -6px;
  width:100% ; 
}


.lightBox {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 30px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(85,7,7);
}


.lightBox-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 60%;
  max-width: 1200px;
}

.mySlides {
  display: none;
}

.mySlides img{
  width:100%;
  margin-bottom: -6px;
}


.close1 {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close1:hover,
.close1:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform:translate(0,-40%);
  width: auto;
  padding: 10px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


.section-gallery h3{
  text-align: center;
}


/*--------------------------------*/
/*-------- Section donation-----------*/
/*--------------------------------*/


.section-donate{
  padding:45px 30px;
}

.section-donate .row{
  align-items: center;
justify-content:center}

/*--------donate box-----------*/

.donate-box{
  width: 100%;
  display: flex;
  align-items:center;
  justify-content: center;
  flex-direction: column;
  margin-top:20px;
}

.donate-box img{
  width:130px;
  height:130px;
  background-color:#e67e22;
  box-shadow: inset 5px 5px 8px #fdab62,
              inset -5px -5px 8px #7e3c03;
  padding:20px;
  margin-bottom: 10px;
  border-radius: 50%;
}

.btn-full{
  display: block;
  width:30%;
  padding: 0.2rem 0.5rem;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  border-radius: 10px;
  background-color:  #e67e22;
  color:rgb(50, 7, 7);
  box-shadow: inset 5px 5px 8px #fdab62,
              inset -5px -5px 8px #7e3c03;
  transition: background-color 0.2s,color 0.2s;
}

.btn-full i{
  margin-right:10px;
}

.btn-full:hover{
  background-color:  #b45a0c;
  color: #fff;
}

/*--------donate description-----------*/
  
.donate-description{
  margin-right:0;
  margin-top:20px;
}

.donate-description h2{
  color:#e67e21;
  font-weight: 400;
  text-align: center;
}


.donate-description p{
  color:#fff;
  font-weight: 200;
  color: rgb(214, 214, 214);
  text-align: justify;
  text-justify: distribute;
  letter-spacing: 1px;
  word-spacing: 3px;
  text-align: justify;
  border:2px solid  #e67e22;
  border-radius:10px;
  padding:10px;
}

/*--------------------------------*/
/*-------- Section place-----------*/
/*--------------------------------*/

.section-place{
  padding:45px 30px;

}
.section-location .row{
  margin-top:10px;
  align-items: center;
}

.place {
  width: 100%;
  min-height: 300px;
  display: flex;
  margin-top:20px;
}

.place-hero {
  flex: 0 0 45%;
 

}
.place-img {
  width: 100%;      
  height: 100%;
  display: block;
  border:2px solid #e67e21;
  border-top-left-radius: 10px;
  border-bottom-left-radius:10px;
 
}

.place-content {
  background:  #df7e2a;
  color: rgb(85, 7, 7);
  padding:0  5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-right-radius: 10px;
  border-bottom-right-radius:10px;

}

.place-content p{
  color: rgb(85, 7, 7);
  font-size: 0.8rem;
  font-weight:500;

}

.place-content h2 {
  font-size: 20px;
}

.place-description {
  color: rgb(50, 0, 0);
  margin-top:10px;
  margin-bottom:10px;
}

.place-details {
  display: flex;
 
  color: rgb(50, 0, 0);

}


.place-detail {
  font-size: 0.9rem;
  margin-right: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  
}


/*--------------------------------*/
/*-------- Section location-----------*/
/*--------------------------------*/


.section-location{
  padding:45px 30px;

}
.section-location .row{
  margin-top:10px;
  align-items: center;
}

.section-location .map{
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map iframe {
  width: 100%;
 
}

.section-location h3{
  color:#e67e21;
  font-weight: 400;
  text-align: center;
}



/*--------------------------------*/
/*--------Footer Section-----------*/
/*--------------------------------*/


footer{
  position: relative;
  width:100%;
  height:auto;
  padding:30px 40px;

}


/*--------Quick links-----------*/

.quick-links{
  width:100%;
  display: flex;
  flex-direction:column;
}

.quick-links h2{
  position: relative;
  font-weight: 500;
  margin-bottom:15px;
  color:#fff;
  font-size:1.2rem;
}

.quick-links h2:after{
  content:'';
  width:100px;
  height:2px;
  display: block;
  left:35%;
  bottom:-5px;
  background-color: #e67e22;

}


.quick-links ul li{
  list-style:none;
}

.quick-links ul li i{
  color:#e67e21;
}

.quick-links ul li a{
  color:#999;
  display:inline-block;
  margin-bottom:10px;
  text-decoration: none;
  margin-left:10px;

}

.quick-links ul li a:hover{
  color:#fff;
}

/*--------footer about-----------*/
/*--------Social links-----------*/

.footer-about{
  width:90%;

}

.footer-about h2{
  position: relative;
  font-weight: 500;
  margin-bottom:15px;
  color:#fff;
  font-size:1.2rem;
}

.footer-about h2:after{
  content:'';
  display: block;
  width:100px;
  height:2px;
  left:0;
  bottom:-5px;
  background-color: #e67e22;

}

.footer-about p{
  color:#999;
}

.social-links{
  margin-top:20px;
  display: flex;
  
}

.social-links li{
  list-style: none;
}

.social-links li a{
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(177, 21, 21);
  color:#fff;
  width:30px;
  height:30px;
  text-decoration: none;
  margin-right:10px ;
  border-radius:4px;
}



.logo-facebook:hover{
  background-color:#3b5998;
 }
 
 .logo-gmail:hover{
  background-color: #00aced;
  }
  .logo-youtube:hover{
    background-color: red;
  }
  .logo-instagram:hover{
    background-color: #517fa4;
  }



  /*--------Conatct info-----------*/

  .contact-info{
    margin:0 auto;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    align-self: center;
}

.contact-info h2{
  position: relative;
  font-weight: 500;
  margin-bottom:15px;
  color:#fff;
  font-size:1.2rem;
}

.contact-info h2:after{
  content:'';
  display: block;
  width:100px;
  height:2px;
  left:0;
  bottom:-5px;
  background-color: #e67e22;
}


.contact-info .info-group{
    padding:10px 0;
    display: flex;
    justify-self: center;
    
}

.contact-info .info-group .title{
  display: inline;
  color: #999;
}
.contact-info .info-group .icons{
    min-width: 30px;
    height:30px;
    font-size: 1.1rem;
    color:#e67e22;
}

.contact-info .info-group .text p {
    color:#999;
}

.text .phone:link,
.text .phone:visited,
.text .mailid:link,
.text .mailid:visited{
  text-decoration: none;
  color:#999;
}

.text .phone:active,
.text .phone:hover,
.text .mailid:active,
.text .mailid:hover{
  color:#fff;
}


/*--------------------------------*/
/*--------copyright Section-----------*/
/*--------------------------------*/



.copyright-text {
  width:100%;
  left: 0;
  bottom: 0;
  padding:8px 0;
  text-align:center;
  color:#999;
  background-color: rgb(50, 0, 0);
}
.copyright-text p{
  
  color:#999; 
  font-size:0.8rem;

}