/* --------------- */
/* Basic Styles */
/* --------------- */

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

/* html {
    font-family: caliban-std, sans-serif;
    font-weight: 300;
    font-style: inherit;
}*/

/* --------------- */
/* Reusable Content */
/* --------------- */

/* link color: #626546, background color: #ebebeb */

.row {
    max-width: 1140px;
    margin: 0 auto;
}

section {
    margin: 80px auto;
    /* background-color: #ebebeb; */
}

/* --------------- */
/* Header */
/* --------------- */

.header {
    background-image: url(/resources/img/kccshero4.jpg);
    min-height: 400px; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
    background-color: #f2f2f2; /* Add a background color to create a white space */
    padding: 10px; /* Add some padding to create a space between the logo and navigation */
}


#gallery {
    background-image: url(/resources/img/kccshero6.jpg);
    min-height: 400px; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
    background-color: #f2f2f2; /* Add a background color to create a white space */
    padding: 10px; /* Add some padding to create a space between the logo and navigation */
}

#book {
    background-image: url(/resources/img/kccshero5.jpg);
    min-height: 400px; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
    background-color: #f2f2f2; /* Add a background color to create a white space */
    padding: 10px; /* Add some padding to create a space between the logo and navigation */
}

/* headings */

h7 {
    font-family: "filmotype-honey", sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 2px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
    line-height: 175%;
    font-size: 60px;
    text-transform: none;
}

p {
    margin-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
    line-height: 145%;
    font-family: "dunbar-low", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
}

p.bio {
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
    line-height: 145%;
    font-family: "dunbar-low", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 25px;
    letter-spacing: 1px;
}

h2 {
    font-family: "montserrat", sans-serif;
    font-weight: 300;
    font-style: normal;
    padding: 20px 10px 15px 10px;
    border-bottom: 2px solid #c79757;
    margin: 5px 20px;
    color: #2d2d2d;
    text-align: center;
}

.h2 {
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.h2me {
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    border-bottom: 2px solid #c79757;
    position: static;
}

.booking {
    font-family: "dunbar-low", sans-serif;
    margin-left: 120px;
    margin-right: 120px;
    margin: 15px, 0px, 15px, 0px;
    padding: 15px, 0px, 15px, 0px;
}

.bookingp {
    font-family: "dunbar-low", sans-serif;
    margin-left: 10px;
    margin-right: 20px;
    padding: 15px, 0px, 0px, 25px;
    font-size: 20px;
}

.photoheader {
    margin: 0 130px;
}

/* Navigation */

.logo-nav {
    display: flex;
    align-items: center;
}

.logo {
    width: 150px;
}

.main-nav {
    list-style: none;
    display: flex;
    margin-left: 30px;
}

.main-nav li {
    margin-left: 15px;
}

.main-nav li a {
    text-decoration: none;
    color: #2d2d2d;
    text-transform: uppercase;
    font-size: 16px;
}

.main-nav li a:hover {
    /* Styles for navigation links on hover */
    border-bottom: 2px solid #c79757;
}

/* Centering the header content */
.row {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

/* Minimizing Nav

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

/* --------------- */
/* Section */
/* --------------- */

/* Gallery */

.gal {
    margin: 20px;
}

/* Original before adjustments 
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

*/
.gallery-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 equal-width columns */
    gap: 10px; /* Space between grid items */
}


.gallery-item {
    position: relative; /* Ensures proper positioning */
}

.gallery-item a {
    display: block; /* Makes the anchor take up the full size of the grid item */
}

.gallery-item img {
    width: 100%; /* Ensures the image fits the grid item */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5px; /* Keeps existing border-radius styling */
    transition: transform 0.2s ease-in-out;
}

.gallery-item img:hover {
    transform: scale(1.05); /* Keeps existing hover effect */
}


/*Above is chatgpt adjusted text - testing to see if it works */

.img {
    height: 200px;
}

.gal-img:hover {
    opacity: inherit;
    
}

.row-padding {
    margin: 15px auto;
}

.contact {
    padding: 5px;
    margin-top: -4px;
    /*background-color: #c3c3c3;*/
    color: #7f7e7e;
    font-size: 110%;
}

.emailbottom {
    color: #626546;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.4s;
    background-size: cover;
}

.laura {
    font-size: 120%;
    margin-left: 130px;
}

.headshot {
    max-height: 500px;
    float: right;
    margin-top: 30px;
    margin-left: 35px;
    border-radius: 2%;
}

.headshot2 {
    max-height: 300px;
    float: right;
    margin-top: 30px;
    margin-left: 35px;
    margin-right: 35px;
    padding-right: 35px;
    border-radius: 2%;
}

/* ... */

/* Media Queries for Responsiveness */

/* Tablets and Small Laptops */
@media screen and (max-width: 1024px) {
    .row {
        /* Adjust the margin for smaller screens */
        margin: 40px auto;
    }

    .logo {
        /* Adjust the logo size for tablets */
        width: 120px;
    }

    .main-nav {
        /* Adjust the font size of navigation for tablets */
        font-size: 110%;
    }

    .header {
        /* Adjust the header height for tablets */
        min-height: 500px;
    }

    .headshot {
        /* Adjust the headshot size for tablets */
        max-height: 300px;
    }

    .headshot2 {
        /* Adjust the headshot size for tablets */
        max-height: 200px;
    }
}

/* Smartphones */
@media screen and (max-width: 768px) {
    .row {
        /* Adjust the margin for smartphones */
        margin: 30px auto;
    }

    .logo {
        /* Adjust the logo size for smartphones */
        width: 100px;
    }

    .main-nav {
        /* Adjust the font size of navigation for smartphones */
        font-size: 100%;
    }

    .header {
        /* Adjust the header height for smartphones */
        min-height: 400px;
    }

    .headshot {
        /* Adjust the headshot size for smartphones */
        max-height: 200px;
    }

    .headshot2 {
        /* Adjust the headshot size for smartphones */
        max-height: 150px;
    }

    /* Center align the logo and navigation items on smartphones */
    .logo-nav {
        justify-content: center;
    }
}