/* Importing fonts */
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,900;1,700&display=swap");

/* Variables */
:root{
  --font-family: "Vollkorn",serif;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: rgb(0, 0, 0);
  --bg-color-2: rgb(128, 128, 128);
  --primary-color: rgb(192, 192, 192);
  --secondary-color: rgb(255, 0, 0);
  --text-color: rgb(255, 255, 255);
  --primary-shadow: rgb(236, 234, 228);
  --secondary-shadow: rgb(161, 122, 105);
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}

/* Variables end */

html {
  scroll-behavior: smooth;

}

/* CSS Resets */

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

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

body {
  font-family: var(--font-family);
}

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  background-color: var(--bg-color);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

}

nav h1 {
  color: var(--primary-color);

}

nav a {
  color: var(--primary-color);
  transition: var(--transition);
}

nav a:hover {
  color: var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);

}

nav ul {
  display: flex;
  gap: 1.9rem;
}

nav ul li {
  font-weight: var(--bold-font);
}

.burger-menu {
  color: var(--primary-color);
  font-size: 2rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: none;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 100%;
}

/* Services section */
.row {
  display: flex;
  justify-content: center;
}

.column1 {
  float: left;
  padding: 5px;
}

.column2 {
  padding: 5px;
}

.column3 {
  float: right;
  padding: 5px;
}

.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 250px;
}

.gallery:hover {
    border: 1px solid #777;
    padding: 10px;
}

.gallery__img{
    max-width: 100%;
    max-height: 100%;
}

.service-details {
    padding: 15px ;
    text-align: center;
    margin-bottom: var(--bottom-margin);
    font-weight: var(--normal-font);
}
.services-title {
    text-align: center;
    margin-bottom: 1rem;
}

.service-title {
  text-align: center; 
  margin-bottom: var(--bottom-margin);
}


/* Footer */
footer {
  background-color: var(--bg-color);
  padding: 1.25rem;
  text-align: center;
  margin: 2rem 0 0;
  clear: both;

}

@media screen and (max-width: 720px) {
   nav {
        padding: 1.5rem 1rem;
   }
   nav ul {
         position: fixed;
         background-color: var(--bg-color);
         flex-direction: column;
         top: 86px;
         left: 10%;
         width: 80%;
         text-align: center;
         transform: translateX(120%);
         transition: transform 0.5s ease-in;
   }
   nav ul li {
         margin: 8px;
   }
   .burger-menu {
         display: block;
   }
   nav ul.show {
         transform: translateX(0);
   }
   .icon {
         width: 5.875rem;
         height: 5.25rem;
   }
   .responsive {
         width: 100%;
         margin: 6px 0;
   }
}

@media screen and (max-width: 420px ) {
    .responsive {
          width: 100%;
    }
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}