/* =====================
    Background Images START
    ==================== */

    body {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
    }

    .bg-home {
            background-image: url(../img/serhatmutaf-coast-4757843_1920.jpg);
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed; 
    } 

    .bg-sub {
          background-image: url(../img/street-art.jpg);
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;   
    }

/* =====================
    Background Images END
    ==================== */

/* ===================== 
    Font Styles START 
    ==================== */
    
    /* Import font styles from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Prata&display=swap');

/* Font Classes for Website */
.prata-regular {
  font-family: "Prata", serif;
  font-weight: 400;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* ===================== 
    Font Styles START 
    ==================== */

    /* =================
    Link Styles START 
    ==================== */

    a {
        text-decoration: none; 
        color:rgb(93, 65, 65) 
    }

    a:hover {
        color:rgb(128, 9, 9) 
    }

    /* =================
    Link Styles END
    ==================== */

    /* =====================================
        Heading and Paragraph  Styles START
        =================================== */ 

        h1 {font-size: 6rem;}
        h2 {font-size: 5rem;}
        h3 {font-size: 4rem;}
        h4 {font-size: 3rem;}
        h5 {font-size: 2rem;} 
        h6 {font-size: 1.6rem;}

        h1, h2, h3, h4, h5, h6 {
            font-family: "Prata", serif;
            font-weight: 400;
            font-style: normal;
            padding: 0;
            margin: 0;
            color:#120202
        }

         h1 {
            font-family: "Prata", serif;
            font-weight: 400;
            font-style: normal;
            padding: 0;
            margin: 0;
            color:#ffffff;
         }

        p {
            font-family: "Prata", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem; 
            line-height: 1.75; 
            padding: 0;
            margin: 0 0 20px 0; 
            color:#291f1f
        }

         hr {
          border-top: 1px solid #2e1313; 
          border-width: 2px; 
         }

        /* =====================================
        Heading and Paragraph  Styles END
        =================================== */ 

     /* =========================
        Button Styles START
        ======================== */ 

        .action-btn {
            background-color:#2e1313;
            box-shadow: 0px 0px 3px 3px rgb(52, 29, 33);
            font-family: "Lato", sans-serif;
            font-weight: 400;
            font-style: normal;
            text-decoration: none;
            font-size: 1.2rem;
            color:white; 
            padding: 7px 17ppx 7px 17px; 
            border: none; 
            border-radius: 7px; 
            cursor: pointer;
        }

        .action-btn:hover {
            background-color:rgb(214, 151, 151); 
            color:white 
        }

        /* ===================
          Button Styles END
          =================== */ 

          /* ===================
          NavBar Styles Start
          =================== */ 

          .nav-container {
              background-color: #251a1a; 
              box-shadow: 0px 0px 10px 10px rgba(75, 45, 45, 0.4);
              font-size: 1.2rem;
              font-family: "Lato", sans-serif;
              font-weight: 400;
              font-style: normal;
              height: 60px; 
              width: 100%; 
              position: sticky; 
              top: 0;
              z-index: 100;
          }

          .navbar{
            display: flex; 
            align-items: center; 
            justify-content: center;
            height: 100%; 
            width: 90%;
            max-width: 1200px; 
            margin: auto; 
          }

          .navbar ul {
            display: flex; 
          }

          .nav-container .navbar {
              justify-content: space-between; 
          }

          .navbar ul li {
              list-style-type: none; 
          }

          .nav-container .navbar ul li {
            padding: 0px;
            margin: 0 20px; 
          }

          .nav-container h6 {
              font-family: "Lato", sans-serif;
              font-weight: 400;
              font-style: normal;
          }

          .navbar h2 {
              padding: 0px; 
              margin: 0; 
          }

          .navbar a {
              color: #fff;  
              text-decoration: none; 
          }

          .navbar a:hover {
              color: #6d4646; 
          } 

          @media screen and (min-width: 390px) and (max-width: 787px) {
              .nav-container {
                height: auto;
              }

              .nav-container .navbar {
                  flex-direction: column; 
              }
          }

           /* ===================
          NavBar Styles END
          =================== */ 

           /* =========================
          Page Containers Styles START
          ============================= */ 

          .homepage-container {
            background-color:#bdbdbd(255, 255, 255, 0.9); 
            width: 90%;
            max-width: 1200px;
            margin: 0 auto; 
            padding: 20px;
            text-align: center; 
          }

          .homepage-container h1 {
              margin: 150px 0 -10px 0;
          }

          .subpage-container{
            background-color:rgb(255, 255, 255, 0.3); 
            width: 90%;
            max-width: 1200px;
            margin: 0 auto; 
            padding: 20px;
            text-align: center; 
            flex-grow: 1;
          }

          .grid-cards a:hover {
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            color:#ffffff; 
          }

           /* =========================
          Page Containers Styles END
          ============================= */ 

           /* =========================
          Subpage Content Styles START
          ============================= */ 

          .subpage-content {
            width: 70%;
            height: 100%;
            margin: 0 auto;
            padding: 20px;
            text-align: center; 
          }

          .photo {
            width: 70%;
            border-radius: 20px;
          }

          .subpage-content details {
              background:#fff; 
              opacity: 88%;
              border: 1px solid #595959;
              border-radius: 10px; 
              margin-bottom: 5px;
          }

          .subpage-content summary {
            padding: 20px;
            font-weight: bold;
            font-size: 1.1rem;
            color:#444343;
            cursor: pointer;
            outline: none;
            list-style-type: '📍';
            align-items: center;
            text-align: center;
          }

          .subpage-content summary:hover {
            background-color:#ccc9c9;
            border-radius: 10px
          }

          .subpage-content details p {
              padding: 10px;
              margin: 10px;
              line-height: 1.5; 
              color:#2d2d2d; 
          }

          .subpage-content h2 {
            font-size: 1.5rem;
            color:#2d2d2d; 
            padding-bottom: 5px;
            margin-top: 1.5rem;
          }

          .subpage-content ul {
            list-style: none;
            padding: 0;
          }

          .subpage-content li {
            background-color: rgba(78, 65, 65, 0.5);
            border-radius: 10px; 
            padding: 20px;
            margin-bottom: 10px; 
            line-height: 1.5; 
          }

          .subpage-content li a {
            font-weight: bold;
            font-size: 1.3rem; 
            color:#000000; 
            text-decoration: none;
          }

          .subpage-content li a:hover {
            text-decoration: underline;
            color:#f7f3f3 
          }

          /* =========================
          Subpage Content Styles END
          ============================= */ 

          /* =========================
          Contact Form Styles START
          ============================= */ 

          form {
            font-family: "Prata", serif;
            font-weight: 600;
            font-style: normal;
            font-size: 1rem; 
            line-height: 1.75; 
          }

          input[type=text], select {
            width: 100%;
            padding: 20px;
            margin: 10px 0px 20px 0px;
            display: inline-block;
            border: 1px solid #241212; 
            border-radius: 10px; 
            box-sizing: border-box;
            font-family: "Prata", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem; 
            line-height: 1.75; 
          }

          input[type=email] {
            width: 100%;
            padding: 20px;
            margin: 10px 0px 20px 0px;
            display: inline-block;
            border: 1px solid #241212; 
            border-radius: 10px; 
            box-sizing: border-box;
            font-family: "Prata", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem; 
            line-height: 1.75; 
          }

          textarea {
            width: 100%;
            height: 150px;
            padding: 20px;
            margin: 10px 0px 20px 0px;
            box-sizing: border-box;
            border: 1px solid #241212; 
            border-radius: 10px; 
            background-color:#ffffff;
            resize: none;
            font-family: "Prata", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem; 
            line-height: 1.75; 
          } 
          
          input[type=submit] {
            width: 100%;
            background-color:#2e1313;
            box-shadow: 0px 0px 3px 3px rgb(59, 42, 45);
            font-family: "Lato", sans-serif;
            font-weight: 400;
            font-style: normal;
            text-decoration: none;
            font-size: 1.2rem;
            color:white; 
            padding: 7px 17ppx 7px 17px; 
            border: none; 
            border-radius: 7px; 
            cursor: pointer;
          }
         
          input[type=submit]:hover {
            background-color:rgb(155, 120, 120); 
            color:white 
          }

           /* =========================
          Contact Form Styles END
          ============================= */ 

           /* =========================
          Page Containers Styles END
          ============================= */ 

            .grid-container {
              display: flex;
              justify-content: center;
            }

            .grid-cards{
              display: grid;
              width: 100%;
              grid-gap: 20px;
              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }

            .grid-card {
              display: flex;
              justify-content: center; 
              align-items: center; 
              background-color:rgba(40, 16, 16, 0.5);
              color:#fff;
              height: 100px;
              border-radius: 10px; 
              font-size: 1.2rem;
            }

            .grid-cards a:hover{
              background-color: rgba(31, 12, 12, 0.8);
              border-radius: 10px;
            }

           /* =========================
          Footer Styles START
          ============================= */ 

          .footer-container {
            background-color:rgb(0, 0, 0);
            height: 40px;
            width: 100%;
            padding: 20px 0px 10px 0px;
          }

          .footer-content {
            text-align: center;
            color:white;
            font-size: 0.8rem;
            font-family: "Prata", serif;
            font-weight: 400;
            font-style: normal;
          }