.prata-regular {
  font-family: "Prata", serif;
  font-weight: 400;
  font-style: normal;
}

body {
    margin: 0;
    font-family: "Prata", sans-serif;
}
/* Navbar Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Height of the navbar */
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    z-index: 1000; /* Ensure it's above other content */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    clip-path: polygon(
       0% 0%, /* Top-left corner */
       100% 0%, /* Top-right corner */
       100% 70%, /* Start of the curve on the right */
       80% 100%, /* Control point for the curve */
       20% 100%, /* Control point for the curve */
       0% 70% /* Start of the curve on the left */
   );
}

/* Website Name */
.navbar-brand {
    flex-grow: 1; /* Take up remaining space */
    text-align: left; /* Align text to the left */
}

.navbar-brand .fancy-text {
    font-family: 'Prata', serif;
    font-size: 24px;
    color: white;
    font-weight: bold;
}

/* Hamburger Menu */
.hamburger {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger .line {
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 2px;
}

/* Nav Links */
.nav-links {
    list-style: none;
    margin-right: 35px;
    padding: 0;
    display: flex;
    gap: 20px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 20px;
    transition: background 0.3s ease;
}

.nav-links li a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .navbar-brand {
        flex-grow: 0; /* Don't take up remaining space */
        text-align: center ;; /* Center the website name */
        margin-right: 50px;
    }

    .hamburger {
        display: flex; /* Show hamburger on small screens */
        order: -1; /* Move hamburger to the left */
    }

    .nav-links {
        position: fixed; /* Fixed position */
        top: 80px; /* Below the navbar */
        left: -100%; /* Start off-screen */
        width: 250px; /* Width of the menu */
        height: calc(100vh - 80px); /* Full height minus navbar */
        background: black; /* Black background */
        flex-direction: column;
        align-items: flex-start; /* Align links to the left */
        gap: 10px;
        padding: 20px;
        transition: left 0.3s ease; /* Smooth slide-in animation */
    }

    .nav-links.active {
        left: 0; /* Slide in from the left */
    }

    .nav-links li a {
        color: white; /* White font */
        font-size: 18px;
    }
}
/*-----------------------------------Mainpage*/
/* Background Section */
.background-section {
    margin-top: 80px; /* Push down by navbar height */
    position: relative;
    height: 600px; /* Adjust height as needed */
    overflow: hidden;
    width: 100%;
}

.background {
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(45deg, #FFF2C2, #FFFDF0, #EFF3EA);
    animation: gradientAnimation 5s ease infinite;
}

/* Rest of your background section styles */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Row styling */
.row {
  position: absolute;
  width: 200%; /* Wider than the screen to allow seamless looping */
  display: flex;
  align-items: center;
  white-space: nowrap; /* Prevent images from wrapping */
  padding: 20px 0; /* Space between rows */
}

.row1 {
  top: 8%;
  animation: slide 50s linear infinite; /* Slower speed */
}

.row2 {
  top: 37.33%;
  animation: slide 40s linear infinite; /* Faster speed */
}

.row3 {
  top: 64.66%;
  animation: slide 60s linear infinite; /* Slower speed */
}

/* Keyframes for sliding animation */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Move left to right */
  }
}

/* Image styling */
/* Image styling */
.row img {
  height: 120px; /* Adjust image height as needed */
  width: auto;
  margin-right: 40px; /* Space between images */
  border: 8px solid white; /* White border around images */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  position: relative;; /* Required for the name pop-up */
}

/* Hover effect */
.row img:hover {
  transform: scale(1.5); /* Pop out effect */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
  z-index: 10; /* Bring the image to the front */
}

/* Image name pop-up */
.row img::after {
  content: attr(data-name); /* Display the image name */
  position: absolute;
  bottom: -30px; /* Position below the image */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  color: white; /* White text */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9rem;
  white-space: nowrap;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

.row img:hover::after {
  opacity: 1; /* Show the name on hover */
}

/* Transparent Box */
/* Transparent Box */
.overlay-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* Adjust width as needed */
  max-width: 600px; /* Maximum width */
  padding: 30px; /* Increase or decrease padding */
  background: rgba(22 , 64, 77, 0.5); /* Semi-transparent white background */
  border-radius: 30px; /* Rounded corners */
  text-align: center; /* Center-align text */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Optional: Add shadow for depth */
  transition: background 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Hover effect for overlay box */
.overlay-box:hover {
  background: rgba(255, 255, 255, 0.7); /* Less transparent on hover */
}

/* Hover effect for text inside overlay box */
.overlay-box:hover h1,
.overlay-box:hover p {
  color: #3D5300; /* Change text color on hover (e.g., blue) */
}

.overlay-box h1 {
  margin: 0 0 10px 0;
  font-size: 2.5rem; /* Large heading */
  color:  #A6CDC6 /* Dark text color */
  transition: color 0.3s ease; /* Smooth transition for text color */
}

.overlay-box p {
  margin: 0;
  font-size: 1.3rem; /* Paragraph text size */
  color: #fbf5dd; /* Slightly lighter text color */
  transition: color 0.3s ease; /* Smooth transition for text color */
}
/* Responsive Styles for Tablets and Mobile Devices */
@media (max-width: 768px) {
  .background-section {
    height: 500px; /* Reduce height for tablets */
  }

  .background {
    height: 500px; /* Match the reduced height */
  }

  .row img {
    height: 100px; /* Reduce image size for tablets */
    margin-right: 20px; /* Reduce spacing between images */
  }

  .overlay-box {
    width: 70%; /* Increase width for better readability */
    padding: 20px; /* Reduce padding */
  }

  .overlay-box h1 {
    font-size: 1.5rem; /* Reduce heading size */
  }

  .overlay-box p {
    font-size: 1rem; /* Reduce paragraph text size */
    how to upoload my html css and java inot hostinger
  }
}

@media (max-width: 480px) {
  .background-section {
    height: 400px; /* Further reduce height for mobile */
  }

  .background {
    height: 400px; /* Match the reduced height */
  }

  .row img {
    height: 80px; /* Further reduce image size for mobile */
    margin-right: 15px; /* Further reduce spacing between images */
  }

  .overlay-box {
    width: 80%; /* Increase width for better readability */
    padding: 15px; /* Further reduce padding */
  }

  .overlay-box h1 {
    font-size: 1.5rem; /* Further reduce heading size */
  }

  .overlay-box p {
    font-size: 0.9rem; /* Further reduce paragraph text size */
  }
}
/* Fixed Box with Paragraph */
.fixed-box-section {
  position: relative;
  width: 100%;
  padding: 0px;
  background: linear-gradient(45deg, #FFF2C2, #FFFDF0, #EFF3EA);
  text-align: center;
  z-index: 1; /* Ensure it appears above the background */
}
.fixed-box {
  position: relative;
  width: 100%;
  padding: 00px;
  background: linear-gradient(45deg, #FFF2C2, #FFFDF0, #EFF3EA);
  text-align: center;
  z-index: 1;
  padding-bottom: 30px;

}

.fixed-box p {
  margin: 0;
  font-size: 1.5rem; /* Paragraph text size */
  color: #3D5300; /* Dark text color */
}
* Responsive Styles for Tablets and Mobile Devices */
@media (max-width: 768px) {
  .fixed-box p {
    font-size: .9rem; /* Reduce font size for tablets */
  }

  .fixed-box {
    padding-bottom: 20px; /* Reduce padding for tablets */
  }
}

@media (max-width: 480px) {
  .fixed-box p {
    font-size: 0.7rem; /* Further reduce font size for mobile */
  }

  .fixed-box {
    padding-bottom: 15px; /* Further reduce padding for mobile */
  }
}
/* Products Section */
.products-section {
    padding: 80px 20px;
    background: linear-gradient(45deg, #FFF2C2, #FFFDF0, #EFF3EA);
    text-align: center;
    position: relative; /* Ensure it stays in the document flow */
    z-index: 1; /* Ensure it doesn't overlap other sections */
}

.products-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-head h2 {
    font-family: 'Prata', serif;
    font-size: 2rem;
    color: #16404d;
    margin-bottom: 20px;
}

.section-head p {
    font-family: 'Prata', serif;
    font-size: 1rem;
    color: #555;
    margin-bottom: 40px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    background: white;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.product-card-img {
    width: 100%;
    height: 400px; /* Set a fixed height for uniformity */
    overflow: hidden; /* Hide any part of the image that exceeds the container */
    border-radius: 10px; /* Optional: Add rounded corners */
}

.product-card-img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover; /* Ensure the image covers the entire container without distortion */
}

.product-card h6 {
    font-family: 'Prata', serif;
    font-size: 1.2rem;
    color: #16404d;
    margin: 15px 0;
}

.product-card p {
    font-family: 'Prata', serif;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .section-head h2 {
        font-size: 1.5rem;
    }

    .section-head p {
        font-size: 0.9rem;
    }

    .product-card h6 {
        font-size: 1rem;
    }

    .product-card p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .products-section {
        padding: 40px 10px;
    }

    .section-head h2 {
        font-size: 1.2rem;
    }

    .section-head p {
        font-size: 0.8rem;
    }

    .product-card h6 {
        font-size: 0.9rem;
    }

    .product-card p {
        font-size: 0.7rem;
    }
}
/* About Section */
/* About Section */
.about-section {

  background: linear-gradient(45deg, #FFF2C2, #FFFDF0, #EFF3EA);
}

.about-container {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  max-width: 1200px;
  padding-top: 30px;
  margin:  auto;
  gap: 120px;
}

.about-photo {
  position: relative;
  width: 500px; /* Adjust as needed */
  height: 600px; /* Adjust as needed */
}

.about-photo img {
  width: 100%;
  height: 100%;
  border-radius: 10%; /* Rounded corners for the photo */
  object-fit: cover;
  border: 12px solid white;
  box-shadow: 0 10px 8px rgba(237, 197, 97, 0.9);
}

/* Text Overlay */
.text-overlay {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(22, 64, 77, 0.5); /* Semi-transparent white background */
  border-radius: 100%; /* Match the photo's border radius */
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

.text-overlay h2 {
  font-family: 'Prata', serif;
  font-size: 2rem;
  color: #a6cdc6;
  margin-bottom: 10px;
}

#typing-text {
  font-family: 'Prata', serif;
  font-size: 1rem;
  color: #fbf5dd;
  line-height: 1.7;
  white-space: pre-wrap; /* Allow text to wrap line by line */
  overflow: hidden;
  border-right: 1px solid #3D5300; /* Cursor effect */
  animation: blink-cursor 0.75s step-end infinite;
}

/* CSS Writing Box */
.css-writing-box {
  position: relative; /* Required for the photo and text overlay */
  width: 550px; /* Same size as the photo */
  height: 600px;; /* Same size as the photo */
  background: black; /* Light gray background */
  border: 12px solid white; /* Match the photo border */
  border-radius: 40%; /* Match the photo's border radius */
  box-shadow: 0 10px 10px rgba(239, 197, 97, 0.9); /* Match the photo shadow */
  overflow: hidden;
}

/* Photo inside the CSS Writing Box */
.css-writing-box .css-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10%; /* Match the border radius */
}

/* Text Overlay for CSS Writing Box */
.css-writing-box .css-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(22, 64, 77, 0.5); /* Semi-transparent white background */
  border-radius: 20%; /* Match the border radius */
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}

.css-writing-box h2 {
  font-family: 'Prata', serif;
  font-size: 1.5rem;
  color: #a6cdc6;
  margin-bottom: 10px;
}

#css-code {
  font-family: 'Courier New', monospace; /* Monospace font for code */
  font-size: 0.9rem;
  color: #FFF2C2;
  white-space: pre-wrap; /* Preserve line breaks and spaces */
  overflow: hidden;
  border-right: 1px solid #3D5300; /* Smaller cursor */
  animation: blink-cursor 0.2s step-end infinite;
}

/* Typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Cursor blink animation */
@keyframes blink-cursor {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #3D5300;
  }
}
/* Responsive Styles for Tablets and Mobile Devices */
@media (max-width: 1200px) {
  .about-container {
    gap: 200px; /* Reduce gap between items for smaller screens */
  }

  .about-photo,
  .css-writing-box {
    width: 500px; /* Reduce size for smaller screens */
    height: 500px;
  }

  .text-overlay h2 {
    font-size: 1.8rem; /* Reduce heading size */
  }

  #typing-text {
    font-size: 0.9rem; /* Reduce text size */
  }

  .css-writing-box h2 {
    font-size: 1.3rem; /* Reduce heading size */
  }

  #css-code {
    font-size: 0.8rem; /* Reduce code text size */
  }
}

@media (max-width: 768px) {
  .about-container {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items */
    gap: 50px; /* Reduce gap between items */
  }

  .about-photo,
  .css-writing-box {
    width: 400px; /* Further reduce size for tablets */
    height: 400px;
  }

  .text-overlay h2 {
    font-size: 1.5rem; /* Further reduce heading size */
  }

  #typing-text {
    font-size: 0.8rem; /* Further reduce text size */
  }

  .css-writing-box h2 {
    font-size: 1.2rem; /* Further reduce heading size */
  }

  #css-code {
    font-size: 0.7rem; /* Further reduce code text size */
  }
}

@media (max-width: 480px) {
  .about-photo,
  .css-writing-box {
    width: 300px; /* Reduce size for mobile */
    height: 300px;
  }

  .text-overlay h2 {
    font-size: .9rem; /* Reduce heading size for mobile */
  }

  #typing-text {
    font-size: 0.5rem; /* Reduce text size for mobile */
  }

  .css-writing-box h2 {
    font-size: .9rem; /* Reduce heading size for mobile */
  }

  #css-code {
    font-size: 0.5rem; /* Reduce code text size for mobile */
  }
}
/* Services Section */
/* Services Section */
.services-section {
  padding: 80px 20px;
  background: linear-gradient(45deg, #FFF2C2, #FFFDF0, #EFF3EA);
  text-align: center;
}

.services-section h2 {
  font-family: 'Prata', serif;
  font-size: 1.7rem;
  color: #16404d;
  margin-bottom: 60px;
}

/* Hive Grid Layout */
.hive-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: -55px;
}

.hive-row {
  display: flex;
  gap: -25px;
  margin-bottom: -45px;
}

.hive-row.offset {
  margin-left: 110px;
}

/* Hexagon Base Style */
.hexagon {
  width: 200px;
  height: 230px;
  background: #e9ab17;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-right: -20px;
}

/* Hexagons with Images */
.hex-with-image {
  background: transparent;
  overflow: hidden;
}

.hex-with-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform 0.3s ease;
}

/* Hexagons with Text */
.hex-with-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(233, 171, 23, 0.5);
}

.hex-with-text h3 {
  font-family: 'Prata', serif;
  font-size: 1.5rem;
  color: #3D5300;
  margin-bottom: 10px;
}

/* Pop-up Window (Square Box) */
.hex-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-height: 80%; /* Ensure pop-up doesn't overflow */
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 20;
  overflow-y: auto; /* Add scrollbar if content overflows */
}

.hex-popup h3 {
  font-family: 'Prata', serif;
  font-size: 1.5rem;
  color: #3D5300;
  margin-bottom: 10px;
}

.hex-popup p {
  font-family: 'Prata', serif;
  font-size: 1rem;
  color: #555;
  line-height: 1.4;
}

/* Hide Hexagon and Show Pop-up on Hover */
.hex-with-text:hover {
  clip-path: none; /* Remove hexagon shape */
  background: transparent; /* Make background transparent */
}

.hex-with-text:hover .hex-popup {
  opacity: 1;
  visibility: hidden;
}

/* Hover Effects for Images */
.hex-with-image:hover img {
  transform: scale(1.1); /* Enlarge image on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
  .hexagon {
    width: 150px;
    height: 173px;
  }

  .hive-row.offset {
    margin-left: 85px;
  }

  .hex-popup {
    width: 250px;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .hexagon {
    width: 90px;
    height: 105px;
  }

  .hive-row.offset {
    margin-left: 0px;
  }

  .hex-popup {
    width: 150px;
    padding: 10px;
  }

  .hex-with-text h3 {
    font-size: 0.8rem;
  }
  .hex-popup p {

    font-size: .6rem;

    line-height: 1;
  }
  .services-section h2 {

    font-size: 1.2rem;

    margin-bottom: 30px;
  }
}

/* Contact Circle */
.contact-circle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    background: #E9AB17;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(233, 171, 23, 0.5);
    animation: pulse 2s infinite;
    z-index: 1000;
}

.contact-circle span {
    color: white;
    font-family: 'Prata', serif;
    font-size: 1.2rem;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(233, 171, 23, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(233, 171, 23, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(233, 171, 23, 0); }
}
@media (max-width: 480px){
  .contact-circle {


      width: 50px;
      height: 50px;


      animation: pulse 3s infinite;

  }
  .contact-circle span {

      font-size: .8rem;
  }

}

/* Contact Popup */
.contact-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

.contact-form {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #3D5300;
}

.contact-form h2 {
    color: #3D5300;
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.form-group label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    transition: 0.3s;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

.form-group input:focus ~ label,
.form-group input:valid ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:valid ~ label {
    top: -10px;
    left: 5px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
    color: #E9AB17;
}

button[type="submit"] {
    background: #E9AB17;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    transition: background 0.3s;
}

button[type="submit"]:hover {
    background: #D19B15;
}
/* Responsive Styles for Tablets and Mobile Devices */
@media (max-width: 768px) {
  .contact-form {
    padding: 20px; /* Reduce padding for tablets */
  }

  .contact-form h2 {
    font-size: 1.5rem; /* Reduce heading size for tablets */
    margin-bottom: 20px; /* Reduce margin for tablets */
  }

  .form-group input,
  .form-group textarea {
    font-size: 14px; /* Reduce font size for tablets */
  }

  .form-group label {
    font-size: 14px; /* Reduce label size for tablets */
  }

  button[type="submit"] {
    font-size: 14px; /* Reduce button text size for tablets */
    padding: 10px 20px; /* Adjust button padding for tablets */
  }
}

@media (max-width: 480px) {
  .contact-form {
    padding: 15px; /* Further reduce padding for mobile */
  }

  .contact-form h2 {
    font-size: 1rem; /* Further reduce heading size for mobile */
    margin-bottom: 15px; /* Further reduce margin for mobile */
  }

  .form-group input,
  .form-group textarea {
    font-size: 12px; /* Further reduce font size for mobile */
  }

  .form-group label {
    font-size: 12px; /* Further reduce label size for mobile */
  }

  button[type="submit"] {
    font-size: 12px; /* Further reduce button text size for mobile */
    padding: 8px 15px; /* Adjust button padding for mobile */
  }
  .form-group input,
  .form-group textarea {
      width: 95%;

  }
}
/* Why Choose Me Section */
.why-choose-me-section {
  padding: 80px 20px;
  background: linear-gradient(45deg, #FFF2C2, #FFFDF0, #EFF3EA);
  text-align: center;
}

.why-choose-me-section h2 {
  font-family: 'Prata', serif;
  font-size: 2rem;
  color: #16404d;
  margin-bottom: 60px;
}

.why-choose-me-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.why-choose-me-item {
  max-width: 300px;
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-me-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.why-choose-me-item i {
  font-size: 2.5rem;
  color: #E9AB17;
  margin-bottom: 20px;
}

.why-choose-me-item h3 {
  font-family: 'Prata', serif;
  font-size: 1.5rem;
  color: #16404d;
  margin-bottom: 15px;
}

.why-choose-me-item p {
  font-family: 'Prata', serif;
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .why-choose-me-grid {
    gap: 20px;
  }

  .why-choose-me-item {
    max-width: 100%;
  }

  .why-choose-me-item h3 {
    font-size: 1.3rem;
  }

  .why-choose-me-item p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .why-choose-me-section h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .why-choose-me-item i {
    font-size: 2rem;
  }

  .why-choose-me-item h3 {
    font-size: 1.2rem;
  }

  .why-choose-me-item p {
    font-size: 0.8rem;
  }
}
/* Footer Section */
.footer {
    background: linear-gradient(90deg, #e76f51, #f4a261, #36ba98);
  color: white;
  padding: 20px 0; /* Compact padding */
  text-align: center;
  font-family: 'Prata', serif;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between icons */
  margin-bottom: 10px; /* Space between icons and copyright */
}

.footer-social a {
  color: #16404d;
  font-size: 1.2rem; /* Icon size */
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #FFD700; /* Bright gold color on hover */
}

.footer-bottom {
  font-size: 0.9rem; /* Smaller font for copyright */
}
@media (max-width: 480px){


  .footer-social {

    gap: 20px; /* Space between icons */
    margin-bottom: 10px; /* Space between icons and copyright */
  }

  .footer-social a {

    font-size: 1rem; /* Icon size */

  }


  .footer-bottom {
    font-size: 0.5rem; /* Smaller font for copyright */
  }
}