@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Colors */
  --yellow-color     : #FCC302;
  --dark-yellow-color: #DAAC00;
  --white-color      : #FFFFFF;
  --cyan-color       : #00BEC9;
  --gray-color       : #343434;
  --navy-color       : #313243;

  /* Breakpoints */
  --sm               : 640px;
  --md               : 768px;
  --lg               : 1024px;
  --xl               : 1280px;
  --xxl              : 1536px;
}

body {
  font-family: 'Poppins';
}

img {
  border-radius: .3rem;
}

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

.container {
  width        : 90%;
  max-width: 1100px;
  margin-inline: auto;
}

/* ----------------- Home Section Start ----------------- */

.homeSection {
  width           : 100%;
  background-color: var(--yellow-color);
  position        : relative;
  overflow        : hidden;
  height          : 50rem;
}

.homeSection nav {
  width           : 100%;
  padding         : 1rem 0;
  /* background-color: var(--white-color); */
}

.homeSection nav .container {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.homeSection nav i {
  font-size: 3rem;
  color    : var(--white-color);
}

.homeSection nav ul {
  list-style      : none;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  gap             : 3rem;
  position        : absolute;
  height          : calc(100vh - 80px);
  width           : 100%;
  text-align      : center;
  padding         : 5rem;
  bottom          : 0;
  left            : -105%;
}

@media (min-width: 800px) {
  .homeSection nav ul {
    flex-direction: row;
    height        : auto;
    position      : unset;
    width         : fit-content;
    gap           : 2.5rem;
    padding       : 0;
  }
}

.homeSection nav ul li {
  font-size : 2.5rem;
  text-align: left;
}

@media (min-width: 800px) {
  .homeSection nav ul li {
    font-size: 1.2rem;
    text-align: center;
  }
}

.homeSection nav ul li a {
  text-decoration: none;
  color          : var(--white-color);
  text-transform : uppercase;
  letter-spacing : .2rem;
}

.homeSection nav .hamburgerIcon {
  width: fit-content;
}

@media (min-width: 800px) {
  .homeSection nav .hamburgerIcon {
    display: none;
  }
}

.homeSection nav .hamburgerIcon span {
  width           : 3rem;
  height          : .35rem;
  display         : block;
  background-color: var(--white-color);
  border-radius   : 5rem;
}

.homeSection nav .hamburgerIcon .middleBar {
  margin: .5rem 0;
}

.homeSection .content {
  margin-top    : 3vh;
  padding-bottom: 1.5rem;
}

@media (min-width: 900px) {
  .homeSection .content {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    max-width      : 60rem;
    margin-inline  : auto;
    margin-top     : 7rem;
  }
}

@media (min-width: 900px) {
  .homeSection .content .textContent {
    width: 60%;
  }
}

.homeSection .content .textContent h1 {
  color         : var(--white-color);
  text-transform: capitalize;
  font-weight   : 600;
  font-size     : 10vw;
  text-align    : justify;
  margin        : 0;
}

@media (min-width: 500px) {
  .homeSection .content .textContent h1 {
    font-size    : 3rem;
    text-align   : center;
    max-width    : 30rem;
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .homeSection .content .textContent h1 {
    text-align: left;
    margin    : 0;
  }
}

.homeSection .content .textContent p {
  color      : var(--white-color);
  font-size  : 1.1rem;
  text-align : justify;
  margin     : 1rem 0 1.5rem;
  font-weight: 400;
}

@media (min-width: 500px) {
  .homeSection .content .textContent p {
    max-width    : 33rem;
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .homeSection .content .textContent p {
    margin: 1rem 0 2rem;
  }
}

.homeSection .content .textContent .buttons {
  display        : flex;
  justify-content: space-between;
  max-width      : 19rem;
  margin-inline  : auto;
}

@media (min-width: 500px) {
  .homeSection .content .textContent .buttons {
    max-width: 20rem;
  }
}

@media (min-width: 900px) {
  .homeSection .content .textContent .buttons {
    max-width: 20rem;
    margin: 0;
  }
}

.homeSection .content .textContent .buttons button {
  background-color: transparent;
  padding         : .9rem 0;
  width           : 9rem;
  border-radius   : .3rem;
}

.homeSection .content .textContent .buttons button:first-of-type {
  background-color: var(--cyan-color);
  border          : .2rem solid var(--cyan-color);
}

.homeSection .content .textContent .buttons button:last-of-type {
  border: .2rem solid var(--white-color)
}

.homeSection .content .textContent .buttons button a {
  color          : var(--white-color);
  text-transform : capitalize;
  font-size      : 1.1rem;
  text-decoration: none;
  font-weight    : 500;
}

.homeSection .content img {
  width  : 100vw;
  display: block;
  margin : 2rem auto 0;
}

@media (min-width: 500px) {
  .homeSection .content img {
    width: 20rem;
  }
}

@media (min-width: 900px) {
  .homeSection .content img {
    /* width: 30rem; */
    margin: 0;
  }
}
/* ------------------ Home Section End ------------------ */
/* ------------------------------------------------------ */
/* ----------------- About Section Start ---------------- */
.aboutSection {
  padding: 5rem 0;
}

.aboutSection .textContent {
  margin-bottom: 3rem;
}

.aboutSection .textContent h2 {
  font-size    : 8vw;
  text-align   : center;
  margin-bottom: 2rem;
  color        : var(--navy-color);
}

@media (min-width: 500px) {
  .aboutSection .textContent h2 {
    font-size: 2rem;
    max-width: 23rem;
    margin-inline: auto;
  }
}

.aboutSection .textContent p {
  font-size    : 1.3rem;
  text-align   : justify;
  margin-bottom: 2rem;
  color        : var(--navy-color);
}

@media (min-width: 500px) {
  .aboutSection .textContent p {
    max-width    : 40rem;
    margin-inline: auto;
  }
}

.aboutSection .textContent button {
  background-color: var(--yellow-color);
  padding         : .9rem 0;
  width           : 9rem;
  border-radius   : .3rem;
  border          : .2rem solid var(--yellow-color);
  margin-inline   : auto;
  display         : block;
}

.aboutSection .textContent button a {
  color          : var(--white-color);
  text-transform : capitalize;
  font-size      : 1.1rem;
  text-decoration: none;
  font-weight    : 500;
}

.aboutSection .videoContent {
  width              : 80%;
  aspect-ratio       : 1;
  margin-inline      : auto;
  position           : relative;
  background-image   : url('../assets/aboutSectionVideoPicture.png');
  display            : block;
  background-position: center;
  background-size    : cover;
  display            : grid;
  place-items        : center;
}

@media (min-width: 500px) {
  .aboutSection .videoContent {
    max-width: 20rem;
  }
}

.aboutSection .videoContent::before {
  content         : "";
  display         : block;
  width           : 100%;
  height          : 100%;
  background-color: #FCC302;
  position        : absolute;
  bottom          : 0;
  left            : 0;
  opacity         : .5;
}

.aboutSection .videoContent i {
  font-size: 5rem;
  color    : var(--white-color);
  z-index  : 5;
}

.aboutSection .videoContent .backgroundSquar {
  position        : absolute;
  width           : 8rem;
  aspect-ratio    : 1;
  background-color: var(--yellow-color);
  bottom          : -1.5rem;
  left            : -1.5rem;
  display         : block;
  z-index         : -1;
}
/* ------------------ About Section End ----------------- */
/* ------------------------------------------------------ */
/* --------------- Services Section Start --------------- */
.servicesSection {
  background-color: var(--yellow-color);
  padding         : 5rem 0;
}

.servicesSection h2 {
  font-size     : 8vw;
  text-align    : center;
  margin-bottom : 2rem;
  color         : var(--white-color);
  text-transform: capitalize;
}

@media (min-width: 500px) {
  .servicesSection h2 {
    font-size: 2rem;
    max-width: 23rem;
    margin-inline: auto;
  }
}

.servicesSection p {
  font-size    : 1.3rem;
  text-align   : justify;
  margin-bottom: 2rem;
  color        : var(--white-color)
}

@media (min-width: 500px) {
  .servicesSection p {
    max-width    : 40rem;
    margin-inline: auto;
  }
}

.servicesSection .services {
  margin-top: 5rem;
}

@media (min-width: 900px) {
  .servicesSection .services {
    display              : grid;
    gap                  : 3rem;
    justify-content      : center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 320px));
  }
}

.servicesSection .services .serviceContainer {
}

.servicesSection .services .serviceContainer img {
  border : .8rem solid var(--white-color);
  width  : 80%;
  margin : auto;
  display: block;
}

@media (min-width: 500px) {
  .servicesSection .services .serviceContainer img {
    width: 18rem;
  }
}

.servicesSection .services .serviceContainer .textContent {

}

.servicesSection .services .serviceContainer .textContent h3 {
  color      : var(--white-color);
  font-size  : 7vw;
  font-weight: 500;
  text-align : center;
  margin     : 1rem 0 .5rem;
}

@media (min-width: 500px) {
  .servicesSection .services .serviceContainer .textContent h3 {
    font-size: 2rem;
  }
}

.servicesSection .services .serviceContainer .textContent p {

}

@media (min-width: 500px) {
  .servicesSection .services .serviceContainer .textContent p {
    max-width    : 25rem;
    margin-inline: auto;
    text-align   : justify;
    font-size    : 1.1rem;
  }
}

.servicesSection .services .serviceContainer:NOT(:last-of-type) {
  margin-bottom: 3rem;
}

@media (min-width: 900px) {
  .servicesSection .services .serviceContainer:NOT(:last-of-type) {
    margin-bottom: 0;
  }
}
/* ---------------- Services Section End ---------------- */
/* ------------------------------------------------------ */
/* ------------- Other Service Section Start ------------ */
.otherServiceSection {
  padding: 5rem 0 3rem;
}

.otherServiceSection .videoContent {
  width              : 80%;
  aspect-ratio       : 1;
  margin-inline      : auto;
  position           : relative;
  background-image   : url('../assets/otherServicePicture.png');
  display            : block;
  background-position: center;
  background-size    : cover;
  display            : grid;
  place-items        : center;
}

@media (min-width: 500px) {
  .otherServiceSection .videoContent {
    max-width: 20rem;
  }
}

.otherServiceSection .videoContent::before {
  content         : "";
  display         : block;
  width           : 100%;
  height          : 100%;
  background-color: #FCC302;
  position        : absolute;
  bottom          : 0;
  left            : 0;
  opacity         : .5;
}

.otherServiceSection .videoContent i {
  font-size: 5rem;
  color    : var(--white-color);
  z-index  : 5;
}

.otherServiceSection .videoContent .backgroundSquar {
  position        : absolute;
  width           : 8rem;
  aspect-ratio    : 1;
  background-color: var(--yellow-color);
  bottom          : -1.5rem;
  left            : -1.5rem;
  display         : block;
  z-index         : -1;
}

.otherServiceSection .textContent {
  margin: 5rem 0 3rem;
}

.otherServiceSection .textContent h4 {
  font-size    : 8vw;
  text-align   : center;
  margin-bottom: 2rem;
  color        : var(--navy-color);
}

@media (min-width: 500px) {
  .otherServiceSection .textContent h4 {
    font-size: 2rem;
    max-width: 23rem;
    margin-inline: auto;
  }
}

.otherServiceSection .textContent p {
  font-size    : 1.3rem;
  text-align   : justify;
  margin-bottom: 2rem;
  color        : var(--navy-color);
}

@media (min-width: 500px) {
  .otherServiceSection .textContent p {
    max-width    : 40rem;
    margin-inline: auto;
  }
}

.otherServiceSection .textContent button {
  background-color: var(--yellow-color);
  padding         : .9rem 0;
  width           : 9rem;
  border-radius   : .3rem;
  border          : .2rem solid var(--yellow-color);
  margin-inline   : auto;
  display         : block;
}

.otherServiceSection .textContent button a {
  color          : var(--white-color);
  text-transform : capitalize;
  font-size      : 1.1rem;
  text-decoration: none;
  font-weight    : 500;
}
/* -------------- Other Service Section End ------------- */
/* ------------------------------------------------------ */
/* ------------- Dogs Adoption Section Start ------------ */
.dogsAdoptionSection {
  background-color: var(--yellow-color);
  padding         : 5rem 0;
}

.dogsAdoptionSection h2 {
  font-size     : 8vw;
  text-align    : center;
  margin-bottom : 2rem;
  color         : var(--white-color);
  text-transform: capitalize;
}

@media (min-width: 500px) {
  .dogsAdoptionSection h2 {
    font-size: 2rem;
    max-width: 23rem;
    margin-inline: auto;
  }
}

.dogsAdoptionSection p {
  font-size    : 1.3rem;
  text-align   : justify;
  margin-bottom: 2rem;
  color        : var(--white-color)
}

@media (min-width: 500px) {
  .dogsAdoptionSection p {
    max-width    : 40rem;
    margin-inline: auto;
    margin-bottom: 0;
  }
}

.dogsAdoptionSection .dogs {
  margin-top: 5rem;
}

@media (min-width: 900px) {
  .dogsAdoptionSection .dogs {
    display              : grid;
    gap                  : 3rem;
    justify-content      : center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 320px));
  }
}

.dogsAdoptionSection .dogs .dogContainer {
  margin-top: 8rem;
}

@media (min-width: 500px) {
  .dogsAdoptionSection .dogs .dogContainer {
    margin-top: 0rem;
  }
}

.dogsAdoptionSection .dogs .dogContainer img {
  border : .8rem solid var(--white-color);
  width  : 80%;
  margin : auto;
  display: block;
}

@media (min-width: 500px) {
  .dogsAdoptionSection .dogs .dogContainer img {
    width: 18rem;
  }
}

.dogsAdoptionSection .dogs .dogContainer .priceContainer {
  display        : flex;
  justify-content: center;
  gap            : 1.5rem;
  margin-top     : 1.5rem;
}

.dogsAdoptionSection .dogs .dogContainer .priceContainer span {
  color      : var(--white-color);
  font-size  : 7vw;
  font-weight: 500;
  display    : block;
  width      : fit-content;
}

@media (min-width: 500px) {
  .dogsAdoptionSection .dogs .dogContainer .priceContainer span {
    font-size: 2rem;
  }
}

.dogsAdoptionSection .dogs .dogContainer .priceContainer .oldPrice {
  text-decoration-line     : line-through;
  text-decoration-color    : var(--cyan-color);
  text-decoration-thickness: .2rem;
}

.dogsAdoptionSection .dogs .dogContainer button {
  background-color: var(--cyan-color);
  padding         : .6rem 0;
  width           : 6rem;
  border-radius   : 10rem;
  border          : .2rem solid var(--cyan-color);
  margin-inline   : auto;
  margin-top      : 1rem;
  display         : block;
}

.dogsAdoptionSection .dogs .dogContainer button a {
  color          : var(--white-color);
  text-transform : uppercase;
  font-size      : 1rem;
  text-decoration: none;
  font-weight    : 500;
  letter-spacing: .1rem;
}

.dogsAdoptionSection .dogs .dogContainer:NOT(:last-of-type) {
  margin-bottom: 3rem;
}
/* -------------- Dogs Adoption Section End ------------- */
/* ------------------------------------------------------ */
/* ------------- Team Members Section Start ------------- */
.teamSection {
  background-color: var(--white-color);
  padding         : 5rem 0;
}

.teamSection .textContent h4 {
  font-size     : 8vw;
  text-align    : center;
  margin-bottom : 2rem;
  color         : var(--navy-color);
  text-transform: capitalize;
}

@media (min-width: 500px) {
  .teamSection .textContent h4 {
    font-size: 2rem;
    max-width: 23rem;
    margin-inline: auto;
  }
}

.teamSection .textContent p {
  font-size    : 1.3rem;
  text-align   : justify;
  margin-bottom: 2rem;
  color        : var(--navy-color)
}

@media (min-width: 500px) {
  .teamSection .textContent p {
    max-width    : 40rem;
    margin-inline: auto;
  }
}

.teamSection .teamMembers {
  margin-top: 5rem;
}

@media (min-width: 900px) {
  .teamSection .teamMembers {
    display              : grid;
    gap                  : 3rem;
    justify-content      : center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 320px));
  }
}

.teamSection .memberContainer img {
  width  : 80%;
  margin : auto;
  display: block;
}

@media (min-width: 500px) {
  .teamSection .memberContainer img {
    width: 18rem;
  }
}

.teamSection .memberContainer .textContent {
  text-align: center;
}

.teamSection .memberContainer .textContent h3 {
  color      : var(--navy-color);
  font-size  : 7vw;
  font-weight: 700;
  text-align : center;
  margin     : 1rem 0 0;
}

@media (min-width: 500px) {
  .teamSection .memberContainer .textContent h3 {
    font-size: 1.8rem;
  }
}

.teamSection .memberContainer .textContent span {
  color      : var(--navy-color);
  font-size  : 5vw;
  font-weight: 500;
}

@media (min-width: 500px) {
  .teamSection .memberContainer .textContent span {
    font-size: 1.5rem;
  }
}

.teamSection .memberContainer .textContent .socialMedia {
  width          : 15rem;
  display        : flex;
  justify-content: space-between;
  margin-inline  : auto;
  margin-top     : 1rem;
}

@media (min-width: 500px) {
  .teamSection .memberContainer .textContent .socialMedia {
    width: 13.5rem;
  }
}

.teamSection .memberContainer .textContent .socialMedia i {
  background-color: var(--dark-yellow-color);
  padding         : 1rem;
  width           : 3rem;
  color           : var(--white-color);
  aspect-ratio    : 1;
  border-radius   : 10rem;
}

.teamSection .memberContainer:NOT(:last-of-type) {
  margin-bottom: 6rem;
}
/* -------------- Team Members Section End -------------- */
/* ------------------------------------------------------ */
/* ---------------- Counter Section Start --------------- */
.counterSection {
  padding            : 3rem 0;
  background-image   : url('../assets/counterPicture.png');
  background-size    : cover;
  background-position: center;
  position           : relative;
}

.counterSection:before {
  content         : "";
  background-color: var(--dark-yellow-color);
  display         : block;
  width           : 100%;
  height          : 100%;
  top             : 0;
  left            : 0;
  position        : absolute;
  z-index         : 2;
  opacity         : .8;
}

.counterSection .counterContainer {
  display       : flex;
  flex-direction: column;
  gap           : 2rem;
  position      : relative;
  z-index       : 5;
}

@media (min-width: 900px) {
  .counterSection .counterContainer {
    padding: 7rem 0;
    display              : grid;
    gap                  : 3rem;
    justify-content      : center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 320px));
  }
}

.counterSection .counterContainer .counter {
  text-align    : center;
  display       : flex;
  flex-direction: column;
  color         : var(--white-color);
}

.counterSection .counterContainer .counter i {
  font-size: 4rem;
}

.counterSection .counterContainer .counter span {
  font-size: 6vw;
  margin   : 1rem 0 0;
}

@media (min-width: 500px) {
  .counterSection .counterContainer .counter span {
    font-size  : 2rem;
    font-weight: 600;
  }
}

.counterSection .counterContainer .counter p {
  font-size  : 6vw;
  font-weight: 600;
}

@media (min-width: 500px) {
  .counterSection .counterContainer .counter p {
    font-size  : 1.5rem;
  }
}
/* ----------------- Counter Section End ---------------- */
/* ------------------------------------------------------ */
/* ------------- Recent Posts Section Start ------------- */
.recentPostsSection {
  background-color: var(--white-color);
  padding         : 5rem 0;
}

.recentPostsSection h2 {
  font-size     : 8vw;
  text-align    : center;
  margin-bottom : 2rem;
  color         : var(--navy-color);
  text-transform: capitalize;
}

@media (min-width: 500px) {
  .recentPostsSection h2 {
    font-size: 2rem;
    max-width: 23rem;
    margin-inline: auto;
  }
}

.recentPostsSection p {
  font-size    : 1.3rem;
  text-align   : justify;
  margin-bottom: 2rem;
  color        : var(--navy-color)
}

@media (min-width: 500px) {
  .recentPostsSection p {
    max-width    : 40rem;
    margin-inline: auto;
  }
}

.recentPostsSection .posts {
  margin-top: 5rem;
}

@media (min-width: 900px) {
  .recentPostsSection .posts {
    display              : grid;
    gap                  : 3rem;
    justify-content      : center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 320px));
  }
}

.recentPostsSection .posts .postContainer {
  width        : 20rem;
  height       : fit-content;
  margin-inline: auto;
  box-shadow   : 0 0 10px 5px #DDDDDD50;
}

.recentPostsSection .posts .postContainer img {
  width  : 100%;
  margin : 0 auto;
  display: block;
}

.recentPostsSection .posts .postContainer .textContent {
  margin        : 0;
  padding-inline: 1rem;
  border-left   : 1px solid #DDDDDD;
  border-right  : 1px solid #DDDDDD;
  border-bottom : 1px solid #DDDDDD;
}

.recentPostsSection .posts .postContainer .textContent h3 {
  color      : var(--navy-color);
  font-size  : 6vw;
  font-weight: 600;
  text-align : left;
  margin     : 0 0 .5rem;
  padding-top: 1rem;
}

@media (min-width: 500px) {
  .recentPostsSection .posts .postContainer .textContent h3 {
    font-size: 1.5rem;
  }
}

.recentPostsSection .posts .postContainer .textContent span {
 color         : var(--cyan-color);
 text-transform: uppercase;
 font-weight   : 600;
 font-size     : 1rem;
}

.recentPostsSection .posts .postContainer .textContent p {
  color        : var(--navy-color);
  font-size    : .9rem;
  margin-top   : 1.5rem;
  font-weight  : 500;
  text-align   : justify;
  margin-bottom: 1rem;
}

.recentPostsSection .posts .postContainer .textContent button {
  background-color: transparent;
  border       : none;
  margin-bottom: 1rem;
  margin-top: 0;
}

.recentPostsSection .posts .postContainer .textContent button a {
  font-size      : 1.2rem;
  text-transform : capitalize;
  text-decoration: none;
  color          : var(--cyan-color);
  font-weight    : 600;
}

@media (min-width: 500px) {
  .recentPostsSection .posts .postContainer .textContent button a {
    font-size: 1rem;
  }
}

.recentPostsSection .posts .postContainer .textContent button a span {
  font-size  : 1.5rem;
  font-weight: 600;
  position   : relative;
  top        : .2rem;
}

@media (min-width: 500px) {
  .recentPostsSection .posts .postContainer .textContent button a span {
    font-size: 1.2rem;
    top: .1rem;
  }
}

.recentPostsSection .posts .postContainer:NOT(:last-of-type) {
  margin-bottom: 3rem;
}
/* -------------- Recent Posts Section End -------------- */
/* ------------------------------------------------------ */
/* ---------------- Footer Section Start ---------------- */
footer {
  background-color: var(--gray-color);
  padding         : 3rem 0;
}

footer .container {
  display       : flex;
  flex-direction: column;
  gap           : 3rem;
}

@media (min-width: 900px) {
  footer .container {
    flex-direction: row;
    justify-content: space-between;
  }
}

footer .leftSide {
  width          : 100%;
  display        : flex;
  justify-content: space-between;
}

@media (min-width: 500px) {
  footer .leftSide {
    justify-content: space-around;
  }
}

@media (min-width: 900px) {
  footer .leftSide {
    width: 45%;
  }
}

footer .leftSide .links {

}

footer .leftSide .links span {
  color      : var(--white-color);
  font-size  : 7vw;
  font-weight: 600;
}

@media (min-width: 500px) {
  footer .leftSide .links span {
    font-size     : 1.6rem;
    letter-spacing: .1rem;
  }
}

footer .leftSide .links ul {
  list-style: none;
}

footer .leftSide .links ul li {
  margin: .3rem 0;
}

footer .leftSide .links ul li a {
  color          : var(--white-color);
  text-decoration: none;
  text-transform : capitalize;
  letter-spacing : .1rem;
}

footer .rightSide {
  text-align: center;
}

@media (min-width: 900px) {
  footer .rightSide {
    width: 45%;
  }
}

footer .rightSide span {
  color         : var(--white-color);
  font-size     : 7vw;
  font-weight   : 600;
  text-transform: capitalize;
}

@media (min-width: 500px) {
  footer .rightSide span {
    font-size     : 1.6rem;
  }
}

footer .rightSide p {
  font-size: 1rem;
  color    : var(--white-color)
}

footer .rightSide .subscribe {
  margin-top   : 1rem;
  margin-bottom: 1rem;
  position     : relative;
}

@media (min-width: 500px) {
  footer .rightSide .subscribe {
    max-width: 25rem;
    margin-inline: auto;
  }
}

footer .rightSide .subscribe input {
  background-color: var(--yellow-color);
  border          : none;
  width           : 100%;
  height          : 79.59px;
  padding-left    : 1rem;
  border-radius   : .2rem;
}

@media (min-width: 500px) {
  footer .rightSide .subscribe input {
    height: 3.5rem;
  }
}

footer .rightSide .subscribe input:focus {
  outline  : none;
  font-size: 1.2rem;
  color    : var(--white-color);
}

footer .rightSide button {
  border          : none;
  width           : 79.59px;
  aspect-ratio    : 1;
  background-color: var(--cyan-color);
  position        : absolute;
  border-radius: 0 .2rem .2rem 0;
  right           : 0;
}

@media (min-width: 500px) {
  footer .rightSide button {
    width: 3.5rem;
  }
}

footer .rightSide button i {
  color    : var(--white-color);
  font-size: 1.8rem;
}

footer .rightSide .socialMedia {
  display      : flex;
  gap          : 1rem;
  margin-inline: auto;
  width        : fit-content;
  margin-top   : 3rem;
}

@media (min-width: 900px) {
  footer .rightSide .socialMedia {
    margin-top: 0; 
  }
}

footer .rightSide .socialMedia i {
  background-color: var(--white-color);
  padding         : 1rem;
  width           : 3.5rem;
  color           : var(--gray-color);
  aspect-ratio    : 1;
  border-radius   : 10rem;
  font-size       : 1.4rem;
}
/* ----------------- Footer Section End ----------------- */