/*------*/
/*START OF REPEATED SECTION*/
/*------*/

/*Smooth scrolling*/
html {
  scroll-behavior: smooth;
}

/*Header modifiers --- SAME FOR EVERY WEB PAGE*/
header {
  padding: 1.5% 1.5% 0 1.5%;
  color: #fff;
  background: #333;
  display: flex;
  align-items: center;
}

.logo {
  flex: 1;
  padding-right: 8%;
}

header img {
  width: 100%;
  height: auto;
  border: 0;
}

nav {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8%;
  padding-right: 4%;
}

/*Footer modifiers --- SAME FOR EVERY WEB PAGE*/
footer {
  color: #fff;
  background: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  text-align: center;
}

footer div {
  display: flex;
  justify-content: center;
  gap: 20%;
}

.navBottom {
  justify-content: center;
  gap: 20%;
  padding-left: 4%;
  padding-bottom: 25px;
}

footer img {
  border: 0;
}

/*Nav item modifiers (In header & footer) --- SAME FOR EVERY WEB PAGE*/
.navItem {
  color: #fff;
  text-decoration: none;
  flex: 3 1 auto;
  font-size: 1.3rem;
  max-width: 100%;
}

/*Increase size of header elements to make them more visually pleasing on web page*/
h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 3rem;
}

/*Button modifiers - act as hyperlinks to other pages and/or submit button*/
.button {
  color: #fff;
  background-color: #000;
  font-size: 30px;
  border-radius: 8px;
}

/*Remove blue color from certain <a> links*/
.defaultColor {
  color: #000;
  font-weight: normal;
}

/*Add a small border for every IMG*/
img {
  border: 1px #000 solid;
}
/*------*/
/*END OF REPEATED SECTION*/
/*------*/

/*------*/
/*START OF HOME SECTION*/
/*------*/

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

.homeItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.homeSubItem {
  flex: 1;
  text-align: center;
  gap: 10px;
  margin: 3%;
  position: relative;
}

#homeMainImage {
  min-width: 250px;
  max-width: 100%;
  border-radius: 25px;
}

.homeVerticalFlex {
  flex-direction: column;
  background-color: #ededed;
  border: #e0e0e0 5px solid;
}

.homeBodyImg {
  max-width: 100%;
  border-radius: 25px;
  min-width: 200px;
}

.homeBodyText {
  flex: 3;
  text-align: left;
  margin-right: 3%;
  margin-left: 3%;
  min-width: 200px;
}

.homeCenter {
  text-align: center;
  font-weight: bold;
}

#homeBottomButton {
  margin-bottom: 50px;
  border-radius: 20px;
  font-size: 32px;
}

#homeOverlayText {
  font-size: 36px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#homeOverlayImg {
  width: 100%;
  border-radius: 25px;
  min-width: 200px;
  height: auto;
}
/*------*/
/*END OF HOME SECTION*/
/*------*/

/*------*/
/*START OF INQUIRY SECTION*/
/*------*/

.inquiryMain {
  background-image: url(Images/IMG_1285.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 10px;
  height: min-content;
}

.inquiryMainContainer {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 5%;
  padding-right: 5%;
}

.inquiryMainItem {
  background-color: #fff;
  border-radius: 25px;
  text-align: center;
  padding: 15px;
}

#inquiryForm {
  display: flex;
  flex-direction: column;
  text-align: left;
}

#inquiryForm #submit {
  margin-top: 25px;
  font-size: 16px;
}

#inquiryForm input,
#inquiryForm textarea {
  border-radius: 8px;
}

/*------*/
/*END OF INQUIRY SECTION*/
/*------*/

/*------*/
/*START OF CONTACT SECTION*/
/*------*/

.contactMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.contactContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding-left: 3%;
  padding-right: 3%;
  flex-wrap: wrap;
}

.contactLineBreak {
  background-color: #000;
  height: 5px;
  width: 90%;
  border-radius: 3px;
}

.contactItem {
  flex: 1;
  text-align: center;
}

.contactImg {
  width: 100%;
  height: auto;
  border-radius: 25px;
  min-width: 100px;
}

#contactBottom {
  margin-top: 3%;
  margin-bottom: 3%;
}

/*------*/
/*END OF CONTACT SECTION*/
/*------*/

/*------*/
/*START OF ABOUT SECTION*/
/*------*/

.aboutMain {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 25px;
}

.aboutContainer {
  display: flex;
  gap: 2%;
  flex-wrap: wrap;
}

.aboutImg {
  flex: 2;
}

.aboutImg img {
  width: 100%;
  height: auto;
  border-radius: 25px;
  min-width: 250px;
}

.aboutContent {
  flex: 3;
}

.aboutBold {
  font-weight: bold;
}

/*------*/
/*END OF ABOUT SECTION*/
/*------*/

/*------*/
/*START OF GALLERY SECTION*/
/*------*/

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

.galleryContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.galleryContainer a {
  text-decoration: none;
  justify-items: center;
  color: #000;
  font-weight: bold;
  font-size: 1.1rem;
}

.galleryMainImageContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 3%;
  margin-top: 3%;
  margin-bottom: 3%;
  margin-left: 3%;
  margin-right: 3%;
}

.galleryMainImageItem1 {
  width: 100%;
  height: auto;
  flex: 3;
  border-radius: 25px;
  min-width: 280px;
}

.galleryMainImageItem2 {
  flex: 1;
  text-align: center;
}

.galleryContainer h2 {
  background-color: #4f4f4f;
  color: #fff;
  width: 100%;
  text-align: center;
  padding-top: 3%;
  padding-bottom: 3%;
  font-size: 2.5rem;
}

.galleryBody {
  justify-content: space-evenly;
  align-items: start;
  flex-wrap: wrap;
  margin-top: 1%;
  margin-bottom: 1%;
}

.galleryInnerContainer {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.galleryInnerContainer img {
  border-radius: 15px;
  min-width: 250px;
  height: auto;
}

/*------*/
/*END OF GALLERY SECTION*/
/*------*/

/*------*/
/*MEDIA SECTION FOR RESIZING*/
/*------*/

/*Shrink for screens under 600px*/
@media (max-width: 600px) {
  body {
    font-size: 12px;
  }
  .navItem {
    font-size: 0.9rem;
  }
  h1 {
    font-size: 2.7rem;
  }
  .galleryContainer h2 {
    font-size: 2.7rem;
  }
  footer h2,
  .contactItem h2,
  .aboutContent h2,
  .homeItem h2 {
    font-size: 1.5rem;
  }
  .galleryContainer a {
    font-size: 0.8rem;
  }
  .aboutImg {
    flex: 4;
  }
  #inquiryForm #submit {
    font-size: 12px;
  }
  #homeBottomButton,
  #homeOverlayText {
    font-size: 20px;
  }
}

/*Increase for screens over 1200px*/
@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
  .navItem {
    font-size: 2.5rem;
  }
  h1 {
    font-size: 4.5rem;
  }
  .galleryContainer h2,
  footer h2,
  .contactItem h2,
  .aboutContent h2 {
    font-size: 3.5rem;
  }
  .galleryContainer a {
    font-size: 2rem;
  }
  .aboutMain p {
    font-size: 32px;
  }
  #homeBottomButton,
  #homeOverlayText {
    font-size: 48px;
  }
}