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

:root {
   --header-height: 3.5rem;

   /* color */
   --title-color: hsl(0, 0%, 95%);
   --text-color: hsl(0, 0%, 70%);
   --title-color-light: hsl(0, 0%, 60%);
   --body-color: hsl(0, 0%, 0%);
   --container-color: hsl(0, 0%, 8%);
   --bg-light: hsl(0, 0%, 16%);

   /* font */
   --body-font: "Poppins", sans-serif;
   --second-font: "Montserrat", sans-serif;
   --biggest-font-size: 2.75rem;
   --h1-font-size: 1.5rem;
   --h2-font-size: 1.25rem;
   --h3-font-size: 1rem;
   --normal-font-size: .938rem;
   --small-font-size: .813rem;
   --smallest-font-size: .75rem;

   /* font weight */
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semi-bold: 600;

   /* z index */
   --z-tooltip: 10;
   --z-fixed: 100;

}

@media screen and(min-width:1152px) {
   :root {
      --biggest-font-size: 5.5rem;
      --h1-font-size: 2.5rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1rem;
      --small-font-size: .875rem;
      --smallest-font-size: .813rem;
   }
}

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   /* border: 1px solid; */
}

html {
   scroll-behavior: smooth;
}

Body,
button,
input {
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   color: var(--text-color);
}

body {
   background-color: var(--body-color);
}

button,
input {
   outline: transparent;
   border: none;
}

h1,
h2,
h3,
h4 {
   color: var(--title-color);
   font-family: var(--second-font);
   font-weight: var(--fs-semi-bold);
}

ul {
   list-style: none;
}

a {
   text-decoration: none;
}

img {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover;
}

/* utility classes */
.container {
   max-width: 1280px;
   margin-inline: 1.5rem;
}

.grid {
   display: grid;
   gap: 1.5rem;
}

.section {
   padding-block: 5rem 1rem;
}

.section_title {
   text-align: center;
   font-size: var(--h1-font-size);
   margin-bottom: 1.5rem;
}

.main {
   overflow: hidden;
}

/*============ header section ============*/
.header {
   position: fixed;
   width: 100%;
   background-color: transparent;
   top: 0;
   left: 0;
   z-index: var(--z-fixed);
}

.nav {
   height: var(--header-height);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nav_logo {
   color: var(--title-color);
   font-size: var(--h2-font-size);
   font-family: var(--second-font);
   font-weight: var(--fs-semi-bold);
}

.nav_toogle,
.nav_close {
   display: flex;
   font-size: 1.25rem;
   color: var(--title-color);
   cursor: pointer;
}

@media screen and (max-width: 980px) {
   .nav_menu {
      position: fixed;
      top: -100%;
      left: 0;
      background-color: hsla(0, 0%, 0%, 0.3);
      width: 100%;
      padding-block: 3rem;
      backdrop-filter: blur(24px);
      transition: top .4s;
   }
}

.nav_list {
   text-align: center;
   display: flex;
   flex-direction: column;
   row-gap: 2rem;
}

.nav_link {
   position: relative;
   color: var(--title-color);
   font-family: var(--second-font);
   font-weight: var(--fw-medium);
}

.nav_link::after {
   content: ' ';
   width: 0%;
   height: 2px;
   background-color: var(--title-color);
   position: absolute;
   left: 0;
   bottom: -.5rem;
   transition: width .4s;

}

.nav_link:hover::after {
   width: 70%;
}

.nav_close {
   position: absolute;
   top: 1rem;
   right: 1.5rem;
}

/* show menu */
.show-menu {
   top: 0;
}

/* add blur to header */
.blur-header::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: hsla(0, 0%, 0%, 0.3);
   backdrop-filter: blur(24px);
   top: 0;
   z-index: -1;
}

.active-link::after {
   width: 100%;
}

/*================ home section ===================*/
.home {
   position: relative;
}

.home_bg {
   position: absolute;
   top: 0;
   /* left: 0; */
   width: 100%;
   height: 750px;
   object-position: cover;
}

.home_shadow {
   position: absolute;
   top: 0;
   /* left: 0; */
   width: 100%;
   height: 800px;
   background: linear-gradient(180deg,
         hsla(0, 0%, 0%, 40%)48%,
         hsl(0, 0%, 0%) 78%);
}

.home_container {
   position: relative;
   padding-top: 3rem;
   row-gap: 3rem;
}

.home_data {
   text-align: center;
}

.home_subtitle {
   /* font-size: var(--h3-font-size); */
   margin-bottom: .5rem;
}

.home_title {
   font-size: var(--biggest-font-size);
   margin-bottom: 1rem;
}

.home_description {
   margin-bottom: 2rem;
   color: var(--title-color);
}

.home_cards {
   grid-template-columns: 240px;
   justify-content: center;
}

.home_card {
   position: relative;
   overflow: hidden;
}

.home_card img {
   height: 100%;
}

.home_card_img {
   transition: transform .4s;
}

.home_card_shadow {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: linear-gradient(180deg,
         hsla(0, 0%, 0%, 0) 50%,
         hsl(0, 0%, 0%) 125%);
}

.home_card_title {
   position: absolute;
   left: 1rem;
   bottom: 1rem;
   font-size: var(--h3-font-size);
   z-index: 1;
}

.home_card:hover .home_card_img {
   transform: scale(1.2);
}

/* button */
.button {
   background-color: hsla(0, 0%, 100%, 0.2);
   color: var(--title-color);
   padding: 1.25rem 1.5rem;
   display: inline-flex;
   align-items: center;
   column-gap: .5rem;
   font-family: var(--second-font);
   font-weight: var(--fw-semi-bold);
   backdrop-filter: blur(24px);
}

.button i {
   font-size: 1.25rem;
   transition: transform .4s;
   font-weight: initial;
}

.button:hover i {
   transform: translateX(.25rem);
}

/*=============== ABOUT ===============*/
.about_container {
   row-gap: 3rem;
}

.about_data {
   text-align: center;
}

.about-description {
   margin-bottom: 2rem;
}

.about_image {
   position: relative;
   justify-self: center;
   overflow: hidden;
}

.about_img {
   aspect-ratio: 1/1;
   width: 315px;
   transition: transform .4s;
}

.about_shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg,
         hsla(0, 0%, 0%, 0) 50%,
         hsl(0, 0%, 0%) 125%);
}

.about_image:hover .about_img {
   transform: scale(1.2);
}

/*=============== POPULAR ===============*/
.popular_container {
   padding-top: 1rem;
   grid-template-columns: 240px;
   justify-content: center;
   row-gap: 2.5rem;
}

.popular_image {
   position: relative;
   overflow: hidden;
   margin-bottom: 1rem;
}

.popular_img {
   transition: transform .4s;
}

.popular_shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg,
         hsla(0, 0%, 0%, 0) 50%,
         hsl(0, 0%, 0%)125%);
}

.popular_title {
   font-size: var(--h3-font-size);
   margin-bottom: .5rem;
}

.popular_location {
   display: inline-flex;
   align-items: center;
   column-gap: .25rem;
   font-size: var(--small-font-size);
   font-family: var(--second-font);
   font-weight: var(--fw-medium);
}

.popular_location i {
   font-size: 1rem;
}

.popular_image:hover .popular_img {
   transform: scale(1.2);
}

/*=============== EXPLORE ===============*/
.explore {
   position: relative;
}

.explore_image {
   position: absolute;
   overflow: hidden;
}

.explore_img {
   width: 100%;
   height: 333px;
   object-fit: cover;
   object-position: center;
}

.explore_shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg,
         hsl(0, 0%, 0%) 5%,
         hsla(0, 0%, 0%, 0) 40%,
         hsla(0, 0%, 0%, 0) 60%,
         hsl(0, 0%, 0%) 92%);
}

.explore_content {
   position: relative;
   padding-top: 16rem;
   text-align: center;
   row-gap: 2.5rem;
}

.explore_user {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   column-gap: 0.5rem;
}

.explore_perfil {
   width: 30px;
   border-radius: 50%;
}

.explore_name {
   font-size: var(--small-font-size);
   color: var(--title-color);
}

/*=============== JOIN ===============*/
.join_container {
   row-gap: 3rem;
   padding-bottom: 2.5rem;
}

.join_data {
   text-align: center;
}

.join_description {
   margin-bottom: 2rem;
}

.join_form {
   display: grid;
   row-gap: 1rem;
}

.join_input {
   padding: 1.25rem 1rem;
   background-color: var(--container-color);
}

.join_button {
   cursor: pointer;
}

.join_image {
   position: relative;
   justify-self: center;
   overflow: hidden;
}

.join_img {
   width: 300px;
   transition: transform .4s;
}

.join_shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg,
         hsla(0, 0%, 0%, 0) 50%,
         hsl(0, 0%, 0%) 125%);
}

.join_image:hover .join_img {
   transform: scale(1.2);
}

/*=============== FOOTER ===============*/
.footer {
   padding-block: 2.5rem 1rem;
   background-color: var(--container-color);
}

.footer_content {
   row-gap: 3.5rem;
}

.footer_logo {
   display: inline-block;
   color: var(--title-color);
   font-style: var(--h2-font-size);
   font-family: var(--second-font);
   font-weight: var(--fw-semi-bold);
   margin-bottom: 1rem;
}

.footer_data {
   grid-template-columns: repeat(2, max-content);
   gap: 2.5rem;
}

.footer_title {
   font-size: var(--h3-font-size);
   margin-bottom: 1rem;
}

.footer_links {
   display: grid;
   row-gap: .75rem;
}

.footer_link {
   color: var(--text-color);
   transition: color .4s;
}

.footer_link:hover {
   color: var(--title-color);
}

.footer_group,
.footer_social {
   display: flex;
}

.footer_group {
   margin-top: 3rem;
   flex-direction: column;
   align-items: center;
   row-gap: 2rem;
}

.footer_social {
   column-gap: 1.5rem;
}

.footer_social_link {
   color: var(--text-color);
   font-size: 1.25rem;
   transition: all .4s;
}

.footer_social_link:hover {
   color: var(--title-color);
   transform: translateY(-.25rem);
}

.footer_copy {
   font-size: var(--smallest-font-size);
   color: var(--title-color-light);
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
   width: .6rem;
   border-radius: .5rem;
   background-color: hsl(0, 0%, 10%);
}

::-webkit-scrollbar-thumb {
   border-radius: .5rem;
   background-color: hsl(0, 0%, 20%);
}

::-webkit-scrollbar-thumb:hover {
   border-radius: .5rem;
   background-color: hsl(0, 0%, 30%);
}

/*=============== SCROLL UP ===============*/
.scrollup {
   position: fixed;
   right: 1rem;
   bottom: -50%;
   background-color: hsla(0, 0%, 100%, .1);
   padding: 6px;
   display: inline-flex;
   color: var(--title-color);
   font-size: 1.25rem;
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   z-index: var(--z-tooltip);
   transition: bottom .4s, transform .4s;
}

.scrollup:hover {
   transform: translateY(-.25rem);
}

/* Show Scroll Up */
.show-scroll {
   bottom: 3rem;
}


/*==================== campsites =========================*/
/* body {
   background-color: var(--body-color);
   font-family: var(--body-font);
} */

.campsite_container {
   position: relative;
   /* margin-top: 7rem; */
}

.filter-section {
   display: flex;
   justify-content: flex-end;
   flex: 1;
   gap: 1rem;
   padding-block: 4.5rem 1rem;
   flex-wrap: wrap;
   margin-top: 5rem;
}

.filter-section select {
   background-color: transparent;
   backdrop-filter: blur(25px);
   color: var(--title-color);
   padding: 0.6rem 1rem;
   font-size: 1rem;
   border-radius: 8px;
   border: 1px solid transparent;
   cursor: pointer;
   outline: none;
   transition: all 0.3s;
}

.filter-section select:hover {
   border-color: var(--text-color);
   /* box-shadow: rgb(162, 162, 162) 1px 1px 3px; */
}

.filter-section option {
   background-color: var(--container-color);
   color: var(--text-color);
   border-radius: 1rem;
}

.camp-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), .5fr));
   justify-content: center;
   gap: 2rem;
   padding-block: 2rem 5rem;
}

.camp-card {
   background: var(--container-color);
   border-radius: .5rem;
   overflow: hidden;
   box-shadow: 2px 2px 10px 5px hsla(0, 0%, 100%, 0.1);
   transition: transform 0.3s;
   position: relative;
}

.camp-image {
   overflow: hidden;
}

.camp-card:hover {
   transform: translateY(-5px);
}

.camp-card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   transition: transform .4s;
   overflow: hidden;
}

.camp-card:hover img {
   transform: scale(1.1);
}

.camp-info {
   padding: 1rem;
   padding-bottom: 1.5rem;
}

.camp-info p {
   font-size: var(--normal-font-size);
}

.camp-info h3 {
   color: var(--title-color);
   font-size: var(--h2-font-size);
   font-weight: var(--fw-regular);
   margin-bottom: 0.5rem;
}

.camp_description {
   color: var(--title-color-light);
}

.camp-info strong {
   font-size: var(--h4-font-size);
   color: rgb(56, 156, 63);
}

.camp-card button {
   position: absolute;
   bottom: .7rem;
   right: .75rem;
   padding: .1rem .5rem;
   border-radius: .5rem;
   box-shadow: -2px -2px 4px 1px hsla(0, 0%, 100%, 0.2),
               2px 2px 5px 1px hsla(0, 0%, 0%, 0.8);
   background-color: var(--bg-light);
   color: var(--text-color);
}

.camp-card button:hover {
   color: rgb(255, 255, 255);
}



/* ==============contact section============= */


/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
   .container {
      margin-inline: 1rem;
   }

   .footer_data {
      grid-template-columns: max-content;
   }
}

@media screen and (max-width: 576px) {
   .filter-section select {
      max-width: 180px;
      padding: .4rem;

   }
}

/* For medium devices */
@media screen and (min-width: 576px) {

   .home_container {
      justify-content: center;
   }

   .home_data {
      width: 480px;
   }

   .about_container,
   .explore_content,
   .join_container {
      grid-template-columns: 380px;
      justify-content: center;
   }

   .camp-list {
      gap: 2rem;
   }

   .footer_data {
      grid-template-columns: repeat(4, max-content);
   }
}

@media screen and (min-width: 768px) {

   .home_data {
      width: 480px;
   }

   .home_cards {
      grid-template-columns: repeat(2, 240px);
   }

   .about_container,
   .join_container {
      grid-template-columns: repeat(2, 350px);
      align-items: center;
   }

   .about_data,
   .about_data .section_title,
   .join_data,
   .join_data .section_title {
      text-align: initial;
   }

   .join_image {
      order: -1;
   }

   .popular_container {
      grid-template-columns: repeat(2, 240px);
   }

   /* .explore_img {
      width: 100vw;
   } */

   .footer_content {
      grid-template-columns: repeat(2, max-content);
      justify-content: space-between;
   }

   .footer_data {
      grid-template-columns: repeat(3, max-content);
   }

   /* .footer_group {
      flex-direction: row;
      justify-content: space-around;
   }

   .footer_copy {
      order: -1;
   } */
}

/* For large devices */

@media screen and (min-width: 980px) {

   .nav_close,
   .nav_toggle {
      display: none;
   }

   .nav_list {
      flex-direction: row;
      column-gap: 4rem;
   }

   .section {
      padding-block: 9rem 0;
   }

   .popular_container {
      grid-template-columns: repeat(3, 240px);
   }

   .container {
      margin-inline: 2rem;
   }

   .camp-list {
      margin-top: 2rem;
   }

   .footer_data {
      grid-template-columns: repeat(4, fit-content);
      column-gap: 4.5rem;
   }
}

@media screen and (min-width: 1152px) {
   .container {
      margin-inline: auto;
   }

   .camps_body .container {
      padding-inline: 2rem;
   }

   /* .section {
      padding-block: 7rem 2rem;
   } */

   .nav {
      height: calc(var(--header-height) + 1.5rem);
   }

   .blur-header::after {
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
   }

   .home_container {
      grid-template-columns: initial;
      justify-content: initial;
      row-gap: 4rem;
      padding-top: 2.5rem;
   }

   .home_shadow {
      height: 980px;
   }

   .home_data {
      padding-left: 5rem;
      text-align: initial;
      width: 580px;
   }

   .home_subtitle {
      font-size: var(--h2-font-size);
   }

   .home_description {
      margin-bottom: 2.5rem;
   }

   .home_cards {
      grid-template-columns: repeat(4, 260px);
   }

   .home_card_title {
      left: 1.5rem;
      bottom: 1.5rem;
   }

   .button {
      column-gap: 1.5rem;
   }

   .about_container {
      grid-template-columns: 400px 460px;
      column-gap: 8.5rem;
      padding-block: 1rem;
   }

   .about-description {
      margin-bottom: 3rem;
   }

   .about_img {
      width: 430px;
   }

   .popular_container {
      grid-template-columns: repeat(3, 300px);
      column-gap: 3rem;
      padding-top: 4rem;
   }

   .popular_title {
      font-size: var(--h2-font-size);
   }

   .popular_location {
      font-size: var(--normal-font-size);
   }

   .explore_img {
      height: 600px;
   }

   .explore_content {
      padding-top: 28rem;
      grid-template-columns: 670px 1fr;
   }

   .explore_data,
   .explore_data .section_title {
      text-align: initial;
   }

   .explore_user {
      justify-content: flex-end;
      align-self: flex-end;
      margin-bottom: 1.25rem;
   }

   .join_container {
      grid-template-columns: 460px 340px;
      column-gap: 8.5rem;
      padding-block: 1rem 5rem;
   }

   .join_img {
      width: 460px;
   }

   .join_description {
      margin-bottom: 3rem;
   }

   .footer {
      padding-block: 5rem 1rem;
   }

   .footer_title {
      margin-bottom: 1.5rem;
   }

   /* .footer_group {
      margin-top: 7rem;
   } */

   .footer_social {
      column-gap: 2rem;
   }

   .footer_social_link {
      font-size: 1.5rem;
   }

   .camp-list {
      gap: 5rem;
   }

   .scrollup {
      right: 3rem;
   }
}

/* ================= contact specific styles ================= */
.contact_container {
   margin-bottom: 5rem;
}

.contact_data{
   max-width: 350px;
   margin-inline: auto;
   padding-inline: 1rem;
   /* display: flex; */
   /* align-items: center; */
   /* justify-content: space-around; */
   /* gap: 20px; */
}

.contact_form .input-group {
   display: grid;
   margin-bottom: 0.5rem;
}

.contact_data .section_title,.join_description{
   text-align: center;
}

.contact_submit-btn{
   margin: auto;
   cursor: pointer;
   padding: .5rem 1rem;
   background-color: var(--container-color);
   /* border-radius: 8px; */
   color: var(--text-color);
}

.contact_submit-btn:hover{
   color: var(--title-color);
}

.contact_form input, textarea {
   font-family: var(--body-font);
   width: min(350px, 100%);
   padding: .5rem;
   background-color: var(--container-color);
   /* border-radius: 8px; */
   color: var(--title-color);
   border: 1px solid transparent;
}

.contact_form input:focus, textarea:focus {
   outline: none;
   border-color: rgba(255,255,255,0.12);
}

.error {
   display: block;
   margin-top: .35rem;
   font-size: .85rem;
   color: #ff6b6b;
}

.input-error {
   border-color: #ff6b6b;
}

.contact_container{
   margin-inline: auto;
}