@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');


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

.logo {
    max-width: 90px;
    /* Adjust the max width */
    height: auto;
    /* Maintain aspect ratio */
}

@media (max-width: 768px) {
    .logo {
        max-width: 50px;
        /* Smaller logo on small screens */
    }
}

.pro {
    border-radius: 50%;
    
}

/* Hero Section */
.hero {
    background: url(https://i.im.ge/2024/12/27/zcZPA6.2-block.jpeg) no-repeat center center/cover;
    color: rgb(55, 52, 52);
    text-align: center;
}
#about {
   
    color: rgb(0, 0, 0); /* Change text color to white for better contrast */
    padding: 50px 0; /* Add some padding for spacing */
}


/* Card Styling */
.card {
 
    border: none;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

/* styles.css */
.gallery-card {
    border-radius: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden; /* Ensures the border radius is applied to the image */
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0
     10px 20px rgba(0, 0, 0, 0.3);
}

/* Maps */
.map-responsive {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Custom styles for medium and large screens */
@media (min-width: 768px) {
    .map-responsive {
        padding-bottom: 80%;
        /* Adjusted aspect ratio for medium screens */
    }
}

@media (min-width: 992px) {
    .map-responsive {
        padding-bottom: 60%;
        /* Adjusted aspect ratio for large screens */
    }
}

/* Footer Styling */
footer {
    background-color: #343a40;
    color: white;
}