/* Add your styles here */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: white;
}

#home-slider.wedding {
    /* background: url(../img/heroimage.jpg) no-repeat top center; height: 600px; background-size: cover; */
    background: url(leader.jpg) no-repeat center center;
    height: 400px;
    background-size: cover;
    /*   background: url(../img/nov-wedding.jpg) no-repeat top center; height: 1050px; background-size: cover; */
    /* Set up proportionate scaling */
    width: 100%;
}
#photo #home-slider h1 {
    color: rgb(255, 247, 238);
}

h1 {
    padding: 20px;
}
h3 {text-align: left;padding:0 10%}
p {font-family: sans-serif;font-size:1.2em; font-weight: lighter;padding:4px 10%;line-height: 1.4em; text-align: left}
a {color:#909fb0}
hr {display: block;margin:0px  auto 20px;width:60%}
header p {padding:0px 0px 0px 20px;}
header p img {height:75px;}
.skills h1 {color: rgb(234, 234, 234);
    font-style: normal;
    /* font-weight: lighter; */
    text-align: center;
    font-size: 3rem;
    padding: 40px 20px;
    /* font-stretch: extra-expanded; */
    word-spacing: 5px;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    bottom: 30%;
        text-shadow: 2px 2px 4px #000000;
    line-height: 1.2em;}
div.skills {box-sizing: border-box;display: block}


.gallery {
    margin: 0 auto;
    max-width: 90%; /* Center the gallery and use 90% of available width */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Adjust the gap between thumbnails as needed */
}

.gallery-item {
    position: relative;
    cursor: pointer;
    width: calc(25% - 10px); /* 4 columns with 10px spacing in between */
    margin: 0 5px 10px 5px;
    overflow: hidden; /* Crop portrait images to match the height of landscape thumbnails */
}

.gallery-item img {
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Crop images to fit the container */
    height: 100%; /* Ensure all thumbnails have the same height */
}

/* Fancybox styles */
.fancybox-slide {
    background: transparent !important;
    padding: 0 !important;
}

.fancybox-navigation, .fancybox-toolbar {
    display: block !important;
}

.fancybox-button {
    background: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
}

.fancybox-button svg {
    fill: #fff !important;
}

.fancybox-inner {
    max-width: 90% !important; /* Set the maximum width to 90% */
}

.fancybox-toolbar {
    bottom: 10px !important;
}

.fancybox-prev, .fancybox-next {
    background: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    color: #fff !important;
}

/* Close button */
.fancybox-close-small {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: 50% !important;
    cursor: pointer;
}

@media only screen and (max-width: 768px){
.gallery-item {
    max-width: 96% !important;
    width: 96% !important;
}
}