:root {
  --primary-color: #c78e3d;
  --font-style: "Playfair Display", serif;
}
#footer {
  position: relative;
}
.leftDecorationImg {
  position: absolute;
  left: 0;
  top: -50px;
  z-index: -1;
}
.rightDecorationImg {
  position: absolute;
  right: 0;
  top: -50px;
  z-index: -1;
}

/* footer top section */
/* home page */
.hpTopSectionBtn {
  color: white !important;
  border: white 1px solid !important;
  height: 52px !important;
  font-size: 16px !important;
}
.hpTopSectionBtn:hover {
  color: #d3203f !important;
}
.hpTopSectionBtn::before {
  background: white !important;
}
/* home page */
/* ourstory page */
.osFooter {
  background-image: url("../images/backgrounds/blueFrame.png") !important;
}
.osTopSectionBtn {
  color: white !important;
  border: white 1px solid !important;
  height: 52px !important;
  font-size: 16px !important;
}
.osTopSectionBtn:hover {
  color: #007f7a !important;
}
.osTopSectionBtn::before {
  background: white !important;
}
/* ourstory page */

/* ourteam page */
.otFooter {
  background-image: url("../images/backgrounds/mustardFrame.png") !important;
}
.otTopSectionBtn {
  color: white !important;
  border: white 1px solid !important;
  height: 52px !important;
  font-size: 16px !important;
}
.otTopSectionBtn:hover {
  color: #b96e2b !important;
}
.otTopSectionBtn::before {
  background: white !important;
}
/* ourteam page */
/* ouroffeings page */
.ooFooter-left {
  background-image: url("../images/backgrounds/redFrame.png") !important;
}
.ooTopSectionBtn-left {
  color: white !important;
  border: white 1px solid !important;
  height: 52px !important;
  font-size: 16px !important;
}
.ooTopSectionBtn-left:hover {
  color: #d3203f !important;
}
.ooTopSectionBtn-left::before {
  background: white !important;
}
.ooFooter-middle {
  background-image: url("../images/backgrounds/blueFrame.png") !important;
}
.ooTopSectionBtn-middle {
  color: white !important;
  border: white 1px solid !important;
  height: 52px !important;
  font-size: 16px !important;
}
.ooTopSectionBtn-middle:hover {
  color: #007f7a !important;
}
.ooTopSectionBtn-middle::before {
  background: white !important;
}
.ooFooter-right {
  background-image: url("../images/backgrounds/mustardFrame.png") !important;
}
.ooTopSectionBtn-right {
  color: white !important;
  border: white 1px solid !important;
  height: 52px !important;
  font-size: 16px !important;
}
.ooTopSectionBtn-right:hover {
  color: #b96e2b !important;
}
.ooTopSectionBtn-right::before {
  background: white !important;
}
/* ouroffeings page */
/* celebrations by nk */
/* ourteam page */
.cbnkFooter {
  background-image: url("../images/backgrounds/lightyellowFrame.png") !important;
}
.cbnkTopSectionBtn {
  color: white !important;
  border: white 1px solid !important;
  height: 52px !important;
  font-size: 16px !important;
}
.cbnkTopSectionBtn:hover {
  color: #c68e3d !important;
}
.cbnkTopSectionBtn::before {
  background: white !important;
}
/* ourteam page */
/* celebrations by nk */
.topSection {
  background-image: url("../images/backgrounds/redFrame.png");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 60%;
  display: flex;
  padding: 36px 80px;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  top: 68px;
  border-radius: 4px;
}
.topSection h2 {
  color: white;
  font-size: 48px;
  font-weight: 700;
  line-height: 52px;
  font-family: var(--font-style);
  /* width: 60%; */
}
/* footer bottom section */
#bottomSection {
  background-color: #f9f4ee;
}

.footerContent {
  padding: 152px 162px 40px;
  /* border: 1px solid black; */
  display: grid;
  grid-template-areas: "logo links events info";
  grid-template-columns: 1fr 1fr 1fr 2fr;
}
.footerContent h3 {
  font-size: 24px;
  color: var(--primary-color);
  margin-bottom: 16px;
  font-family: var(--font-style);
}
/* logo section */
.footerLogo {
  grid-area: logo;
  display: flex;
  flex-direction: column;
  /* border: 1px solid black; */
  gap: 16px;
}
.footerLogo img {
  width: 150px;
}
.footerMedia {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  /* border: 1px solid black; */
  width: 150px;
}
.footerMedia img {
  width: 20px;
  height: 20px;
}

/* links section */
.footerLinks {
  grid-area: links;
}
.footerLinks div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footerLinks a {
  text-decoration: none;
  color: #57585a;
  font-size: 16px;
}

/* events section */
.footerEvents {
  grid-area: events;
  display: flex;
  flex-direction: column;
  /* border: 1px solid black; */
}
.footerEvents ul {
  /* list-style-image: url("../images/footer/Vector.png"); */
  list-style: none;
  padding-left: 0px;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.footerEvents li {
  font-size: 16px;
  color: #57585a;
}

/* Informatin section */
/* footer button */
.footerInfo {
  grid-area: info;
}
.footerBtn {
  appearance: none;
  background-color: transparent;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  margin: 0;
  min-height: 0px;
  min-width: 0;
  outline: none !important;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  will-change: transform;
  letter-spacing: 1px;
  overflow: hidden;
}

.footerBtn:disabled {
  pointer-events: none;
}

.footerBtn:hover {
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.footerBtn:active {
  box-shadow: none;
  transform: translateY(0);
}
.footerBtn::before {
  background: var(--primary-color);
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: all 0.6s ease;
}
.footerBtn::before {
  width: 100%;
  height: 0%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.footerBtn:hover::before {
  height: 400%;
}
.formBtn:hover::before {
  height: 700% !important;
}
.footerInfoContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
  color: #57585a;
}
.footerInfoContent div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact {
  list-style-image: url("../images/footer/contact.png");
}
.mail {
  list-style-image: url("../images/footer/mail.png");
}
.location {
  list-style-image: url("../images/footer/location.png");
}
.copyright {
  text-align: center;
  color: #57585a;
  font-size: 12px;
  padding: 24px 0px;
  margin: 0 162px;
  border-top: 2px solid var(--primary-color);
}
.copyright p {
  margin: 0;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* media queries */
@media all and (min-width: 993px) and (max-width: 1400px) {
  /* top section */
  .topSection {
    width: 70%;
    padding: 24px 60px;
    justify-content: space-between;
  }
  .topSection h2 {
    width: 100%;
    font-size: 44px;
    line-height: 52px;
  }

  /* bottom section */
  .footerLogo {
    /* border: 1px solid black; */
    justify-content: center;
    align-items: center;
  }
  .footerContent {
    padding: 152px 64px 40px;
    grid-template-areas:
      "links links events events info info info info"
      ". . logo logo logo logo  . .";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 40px;
  }
  .copyright {
    margin: 0 64px;
  }
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media all and (min-width: 481px) and (max-width: 992px) {
  .leftDecorationImg {
    display: none;
  }
  .rightDecorationImg {
    display: none;
  }
  /* top section */
  .topSection {
    width: 80%;
    padding: 20px 40px;
    flex-direction: column;
    gap: 24px;
  }
  .topSection h2 {
    font-size: 32px;
    line-height: 36px;
    text-align: center;
  }

  /* bottom section */
  .footerLogo {
    /* border: 1px solid black; */
    justify-content: center;
    align-items: center;
  }
  .footerContent {
    padding: 152px 64px 40px;
    grid-template-areas:
      "links links info info "
      "events events  info info"
      ".logo logo.";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr; */
    gap: 40px;
  }
  .copyright {
    margin: 0 64px;
  }
  .footerInfoContent {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    row-gap: 16px;
    color: #57585a;
  }
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media all and (max-width: 480px) {
  .leftDecorationImg {
    display: none;
  }
  .rightDecorationImg {
    display: none;
  }
  /* top section */
  .topSection {
    width: 90%;
    padding: 20px 40px;
    flex-direction: column;
    gap: 24px;
  }
  .topSection h2 {
    width: 100%;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
  }
  .topSection h2:nth-child(2) {
    margin-top: -8px;
  }

  /* bottom section */
  /* logo section */
  .footerLogo {
    margin: auto;
  }
  /* information section */
  .footerInfo {
    margin-top: -12px;
  }

  .footerContent {
    padding: 152px 64px 40px;
    grid-template-areas:
      "links"
      "events"
      "info"
      "logo";

    grid-template-columns: 1fr;
    gap: 24px;
  }
  .copyright {
    margin: 0 8px;
  }
  .footerInfoContent {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    row-gap: 16px;
    color: #57585a;
  }
}