@import url('https://fonts.googleapis.com/css?family=PT+Sans');

/* CSS Variables */
:root {
  --primary-color: #b90415;
  --primary-color-hover: #d3071b;
  --secondary-color: #103063;
  --secondary-color-hover: #143f85;
  --light-color: #f4f4f4;
}

body {
  font-family: 'PT Sans', sans-serif;
  background-color: #252529;
  margin: 0;
  color: #fff;
  line-height: 2rem;
  position: relative;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
  color: lightskyblue;
}
/* Header */
header{
  top: 0;
  position: absolute;
}

/* Section index.html */
.section {
  padding: 2rem 0;
}

.section-head {
  font-size: 2.5rem;
  margin: 0;
}

.section h3 {
  font-size: 2rem;
}

section#entertainment {
  background: url('../img/section-bg.jpg') no-repeat bottom/cover;
  padding: 10rem 0;
}

.gift-cards {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;

}
/* contact hero */
.contact-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../img/ContactHero.jpg") no-repeat center/cover;
  width: 100%;
  height: 70vh;
  margin-top: 5vh;
  z-index: 1;
  position: relative;
}
.contact-hero h1 {
  font-weight: 700;
  font-size: 3rem;
  color: #f4f4f4;
}
/* section address */
.section-address{
  margin-inline: 4rem;
  padding-bottom: 5rem;
}
.section-address h2{
  font-size: 1.8rem;
  text-align: center;
  padding-block: 4rem;
  border-bottom: 1px solid skyblue;
} 
.section-address h3{
  font-size: 1.4rem;
}
.section-address .container{
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}
input{
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
  width: 100%;
 }
 select{
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
  width: 100%;
 }
 textarea{
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
  width: 100%;
 }
 input[type="checkbox"] {
  display: inline;
  margin: 0;
  width: 20px;
}
.button_1{
  padding: 12px;
  width: 78.2%;
  border-radius: 0.2rem;
  border: 1rem;
  font-size: 1rem;
  color: #eee;
  background-color: skyblue;
}
/* about hero */
.about-hero{
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../img/AboutHero.jpg") no-repeat center/cover;
  width: 100%;
  height: 45vh;
  margin-top: 5vh;
  z-index: 1;
  position: relative;
}
.about-hero h1 {
  font-weight: 700;
  font-size: 3rem;
  color: #f4f4f4;
}
/* about-main-section*/
.about-main-section{
  padding-bottom: 5rem;
}
/* first section */
h2{
  display: flex;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
  align-items: center;
  padding-block: 2rem;
}
h3{
  font-size: 1.8rem;
  padding-bottom: 2rem;
}
.first-section{
  padding-bottom: 5rem;
  margin-inline: 11rem;
}
.first-section p{
  text-align: justify;
}
.first{
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 1.8rem;
}
.approach{
  display: grid;
  grid-gap: 5rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
}
.goal{
  display: grid;
  grid-gap: 5rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: right;
}
.introduction{
  display: grid;
  grid-gap: 5rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: right;
}
/* history section */
h2{
  display: flex;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
  align-items: center;
  padding-block: 2rem;
}
h3{
  font-size: 1.8rem;
  padding-bottom: 2rem;
}
.history-section{
  background-color: #333;
  padding-bottom: 5rem;
}
.history{
  margin-inline: 11rem;
}
p{
  text-align: justify;
}
/* appreciation section */
h2{
  display: flex;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
  align-items: center;
  padding-block: 2rem;
}
h3{
  font-size: 1.8rem;
  padding-bottom: 2rem;
}
.appreciation-section{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5rem;
  background: linear-gradient(to right, #000055, #006594);
  background-color: transparent;
}
.appreciation{
  width: min(100%, 60rem);
  margin-inline: 11rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.btn-btn{
  border-radius: 0.2rem;
  font-size: 14px;
  padding: 0.7rem;
  letter-spacing: .11em;
  color: #fff;
  display: inline-block;
  background-color: #007aff;
  border-color: #007aff;
  font-size: 14px;
  text-align: center;
}
/* values section */
.values{
  margin-inline: 11rem;
  padding-bottom: 5rem;
}
/* invitation-section */
.invitation{
  text-align: center;
  margin-inline: 11rem;
  padding-bottom: 5rem;
}




/* Showcase */
#showcase {
  margin: 0;
  padding: 0;
  color:#eeeeee;
  background: url('../img/showcase.jpg') no-repeat center/cover;
  width: 100%;
  height: 100vh;
  position: relative;
}
header{
    z-index: 10;
    position: fixed;
}
#showcase .container1 {
  padding-block-start: 25vh;
  z-index: 2;
  position: relative;
}

#showcase h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

#showcase h2 {
  font-size: 2rem;
}
#showcase::after{
    position: absolute;
    z-index: 1;
    inset: 0;
	  content: "";
    background-color: rgba(0 , 0, 0, 0.5);
}

/* Footer */
footer .container{
  border-top: 1px solid skyblue;
  }
footer .footer-cols {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    padding: 2rem;
    text-align: left;
    font-size: 14px;
  }
  
  footer .footer-cols ul {
    list-style: none;
  }
  
  footer .footer-cols ul li:first-child {
    font-size: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: #444 solid 1px;
    margin-bottom: 1rem;
  }
  
  footer .footer-bottom {
    background: #333;
    padding: 1rem;
  }
  
  /* Utility Classes */
  .container1 {
    max-width: 1180px;
    text-align: center;
    margin: 0 auto;
    padding: 0 3rem;
  }

  .lead {
    font-size: 1.3rem;
  }
  
  .text-center {
    text-align: center;
  }
  
  /* Buttons */
  .btn {
    padding: 1rem;
    color: #fff;
    display: inline-block;
  }
  
  .btn-primary {
    background: var(--primary-color);
  }
  
  .btn-primary:hover {
    background: var(--primary-color-hover);
  }
  
  .btn-secondary {
    background: var(--secondary-color);
  }
  
  .btn-secondary:hover {
    background: var(--secondary-color-hover);
  }
  
  /* Text colors */
  .text-primary {
    color: var(--primary-color);
  }
  
  .text-secondary {
    color: var(--secondary-color);
  }
  
  .text-light {
    color: var(--light-color);
  }
  
  .bg-light {
    background: var(--light-color);
    color: #333;
  }
  
  .mb {
    margin-bottom: 1rem;
  }
  
  .mt {
    margin-top: 1rem;
  }
  
  /* Navigation */
  nav {
    width: 100%;
    background-color: #333;
    color: #eee;
    position: fixed;
  }
  nav ul {
    padding: 0;
    margin: 0;
  }
  nav li {
    display: inline;
    float: left;
  }
  nav a {
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    padding: 10px 0;
    color: #eee;
    text-decoration: none;
  }
  nav li:hover {
    background-color: #444;
  }
  nav a#openup {
    display: none;
  }
  
  @media screen and (max-width: 580px) {
    .hide-on-small {
      display: none;
    }
  
    #showcase {
      height: 50vh;
    }
    #showcase .container {
      margin-top: 15vh;
    }
  
    #showcase h1 {
      font-size: 3rem;
    }
    #showcase h2 {
      font-size: 1.5rem;
    }
    nav {
      height: auto;
      border-bottom: 0;
    }
    nav ul {
      display: none;
      height: auto;
    }
    nav li {
      width: 100%;
      float: left;
      position: relative;
    }
    nav a {
      text-align: left;
      width: 100%;
      text-indent: 25px;
      background: #333;
      border-bottom: 1px solid #555;
    }
    nav a:hover {
      background: #444;
    }
    nav a#openup:after {
      content: '|||';
      transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      /* IE 9 */
      -webkit-transform: rotate(-90deg);
      /* Safari and Chrome */
      width: 30px;
      height: 30px;
      display: inline-block;
      position: absolute;
      right: 1.5rem;
      top: 1.7rem;
    }
    nav a#openup {
      display: block;
      background-color: #333;
      width: 100%;
      position: relative;
    }
    #main h2{
      font-size: 1.5rem;
    }
  }
  .cf:before,
  .cf:after {
    content: '';
    display: table;
  }
  
  .cf:after {
    clear: both;
  }
  
  .cf {
    zoom: 1;
  }
  
  @media screen and (max-width: 780px) {
    .gift-cards {
      grid-template-columns: 1fr;
    }
  
    footer .footer-cols {
     grid-template-columns: repeat(2, 1fr);
    }
    #sidebar{
      float:none;
      text-align:center;
      width:100%;
    }

  }
  
  @media screen and (max-width: 580px) {
    #showcase p.lead {
      display: none;
    }
    footer .footer-cols {
      grid-template-columns: repeat(1, 1fr);
      padding-inline: 0;
     }
     footer .container{
      padding: 0;
     }
    #sidebar{
      float:none;
      text-align:left;

    }
  }
  @media (min-width: 768px) {
     .section-address .container{
      grid-template-columns: 1fr 1fr;

     }
     form{
      width: min( 100%,27.8rem);
     }
   
  }