.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}
.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}

/* Cookie popup styling */
#cookie-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #3361e1;
    font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    background-color: #f5f5f7;
    padding: 20px 30px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    animation: slide-down 0.5s ease-in-out forwards;
    display: none;
    z-index: 1000;
}

/* Animation for cookie popup */
@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

#cookie-popup button {
    background-color: #3361e1;
    color: white;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 3px;
    cursor: pointer;
}

#cookie-popup button:hover {
    background-color: #2548b5;
}


.forest {
  margin: 8px;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  overflow: hidden;
  position: relative;
  width: auto;
  height: 500px; /* Fixed height */
  border-radius: 3px;
  padding: 10px 20px;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
  margin-bottom: 12px;
  background-color: rgba(0, 128, 255, 1);
}


.forest::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 97, 225, 0.4);/* Semi-transparent black overlay */
  z-index: 1; /* Ensure the overlay is on top of the image */
}







.forest .banner1, .forest .banner2, .forest .banner3, .forest .banner4 {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.forest img {
  width: 100%; /* Allow the image to adjust its width based on its intrinsic aspect ratio */
  height: 100%; /* Ensure the image covers the full height of its container */
  object-fit: cover; /* Ensures the image covers the available space without distorting */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Center the image both vertically and horizontally */
  animation: zoom-out 10s linear infinite;
  z-index: 0; /* Ensure the image is behind the overlay */

}
/*@keyframes zoom-out{
  100%{
    width:95%;
  }
}*/

.forest .text-box {
  width:300px;
  position: absolute;
  top: 200px;
  left: 25px;
  color: #fff;
  background:#3361e1;
  padding:7px;
  border-radius: 3px;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px;
  z-index: 2; /* Ensure the text is above the overlay */
}

.forest .text-box h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

.forest .text-box p {
  font-size: 14px;
  line-height: 18px;
  margin-top: 80px;
}

.forest .text-box span {
  background: #000;
  height: 1px;
  width: 100px;
  position: absolute;
  left: 20;
}



.banner1{
  animation: slide1 40s linear infinite;
}
.banner2{
  animation: slide2 40s linear infinite;
}
.banner3{
  animation: slide3 40s linear infinite;
}
.banner4{
  animation: slide4 40s linear infinite;
}

@keyframes slide1{
  0%{
    visibility:visible;
  }
  25%{
    visibility: hidden;
  }
  50%{
    visibility: hidden;
  }
  75%{
    visibility: hidden;
  }
  100%{
    visibility: visible;
  }
}
@keyframes slide2{
  0%{
    visibility:hidden;
  }
  25%{
    visibility: hidden;
  }
  50%{
    visibility: visible;
  }
  75%{
    visibility: hidden;
  }
  100%{
    visibility: hidden;
  }
}
@keyframes slide3{
  0%{
    visibility:hidden;
  }
  25%{
    visibility: hidden;
  }
  50%{
    visibility: hidden;
  }
  75%{
    visibility: visible;
  }
  100%{
    visibility: hidden;
  }
}
@keyframes slide4{
  0%{
    visibility:hidden;
  }
  25%{
    visibility: hidden;
  }
  50%{
    visibility: hidden;
  }
  75%{
    visibility: hidden;
  }
  100%{
    visibility: visible;
  }
}


#top-social-section {
  display: flex;
  background-color: #3361e1;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin:8px;
  border-radius:3px;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
  margin-bottom: 12px;
  padding-bottom: 5px;
 
}

header {
  background-color: #000;
  color: #fff;
  padding: 5px 20px;
  margin: 8px;
  border-radius: 3px;
  display: flex;
  flex-direction: row; /* Organize children elements in a row */
  align-items: center; /* Center align the child elements */
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px; 
  margin-bottom: 9px;
}

.top-row {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Adds space between items when wrapping */
  flex-wrap: wrap; /* Allows the content to wrap when necessary */
  align-items: center;
}

.logo {
  flex: 0 0 auto; /* Prevents the logo from shrinking */
}

.logo img {
  height: 150px; /* Adjust this as needed without affecting sibling elements */
  width: auto;
}

.contact-info-te {
  display: flex;
  gap: 10px;

  align-items: center;
}
.contact-item {
  text-decoration:none;
  font-weight: 600;
  font-size: 16px; /* Adjust font size as needed */
  color: #fff; /* Adjust text color */
}

.social-links {
  display: flex;
  gap: 5px; /* Space between social media icons */
}

.social-links img {
    width: 25px; /* Adjust icon width */
    height: 25px; /* Adjust icon height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    object-fit: contain; /* Ensures icons don't stretch */
}

.social-links a {
  display: flex;
  align-items: center; /* Ensures alignment within links */
  justify-content: center;
}


/* Style for navigation */
#main-nav {
  flex: 1 1 auto; /* Allows the nav to shrink and grow as needed */
}

#main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 40px; /* Spacing between navigation items */
  flex-wrap: wrap; /* Enables wrapping of nav items */
  justify-content: flex-end; /* Aligns nav items to the right */
  row-gap: 5px;
}

#main-nav ul li {
  display: inline;
  flex: 0 1 auto; /* Allows items to resize and wrap properly */
}

#main-nav ul li a {
  text-decoration: none; /* Removes underline from links */
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px; /* Default font size, adjust as needed */
  color: #fff; /* Default text color, change as necessary */
  padding: 5px 10px;
  line-height: 1.5; /* Controls spacing inside the wrapped lines */
}

#main-nav ul li a:hover {
  text-decoration: none; /* Ensure no underline */
  box-shadow: inset 0 -2px 0 0 #3361e1; /* Creates a faux underline with a gap */
}





#tagline {
  font-size: 28px;
  color: #3361e1;
  line-height: 1.1428571429;
  font-weight: 600;
  letter-spacing: .007em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}


#footer {
  clear: both; /* Clear floats */
}

#know {
  /*float:right;*/
  text-align: center;

  /*width: calc(100% - 49%); /* Adjust the width as needed */
  padding: 10px 20px;
  margin:8px;
  background:#3361e1;
  color: #fff;
  border-radius: 3px;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
  margin-bottom: 12px;
 
}

#welcome-image-here{
  text-align: center;
  background: #fff;
  color: #3361e1;
  border-radius: 3px;
  padding: 10px 20px;
  margin:8px;
  margin-bottom: 12px;
  height:200px;
}

#welcome-message {
  text-align: center;
  background: #000;
  color: #fff;
  border-radius: 3px;
  padding: 10px 20px;
  margin:8px;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
  margin-bottom: 12px;
}

#welcome-image-here.about-page {
  background-color: #3361e1;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
  color: #f5f5f7;
}

#welcome-image-here.pina-page {
  background-color: #3361e1;
  color: #f5f5f7;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
}

#welcome-image-here.services-page {
  background-color: #3361e1;
  color: #fff;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
}

#welcome-image-here.blog-page {
  background-color: #3361e1;
  color: #fff;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
}

#welcome-image-here.contact-page {
  background-color: #3361e1;
  color: #fff;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
}

#welcome-image-here.testimonials-page {
  background-color: #3361e1;
  color: #fff;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
}


.no-decoration {
  color: #3361e1!important; /* Keeps the original color */
  text-decoration: none!important; /* Removes the underline */
}




#services {
  text-align: center; /* Center-align the heading and boxes */


}

#services h1 {
text-align: center; /* Center-align the heading and boxes */
color: #000;
font-size:32px;
line-height: 1.1428571429;
font-weight: 600;
letter-spacing: .007em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.service-boxes {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  margin: 8px;
  margin-bottom: 13px;
}

.service-box {
  width: calc(25% - 5px);
  background-color: #f5f5f7;
  color: #3361e1;
  border: 1px solid #e9eaf2 !important;
  padding: 10px;
  margin: 0 7px;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
 
}

.service-image {
  position: relative;
  overflow: hidden;
}
  .service-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 97, 225, 0.4);/* Semi-transparent black overlay */
    z-index: 1; /* Ensure the overlay is on top of the image */
}

.service-image img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  
}

.service-box h3 {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 100%;
  padding: 10px;
  margin: -10px;
  margin-bottom:0;
  color:#f5f5f7;
  background-color: #3361e1;
  font-size: 16px;
  text-align: center;
  border-radius: 3px;
}


#services h3 {
  color: #f5f5f7;
  font-size: 18px;
  line-height: 1.1428571429;
  font-weight: 600;
  letter-spacing: .007em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 0.5em; /* Smaller margin below paragraphs */
}

/* Add spacing to line breaks */
.spaced-line-break {
  display: block;
  margin-bottom: 0.5em; /* Add margin to mimic spacing */
}


#h1 {
  font-size: 28px;
  color: #3361e1;
  line-height: 1.1428571429;
  font-weight: 600;
  letter-spacing: .007em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

#body{
    font-size: 14px;
    color:#3361e1;
    line-height: 1.2353641176;
    font-weight: 400;
    letter-spacing: -0.022em;
    font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

#footer {
  margin:10px;
  justify-content: space-between;
  text-align: center;
  font-size: 14px;
  color:#000;
  line-height: 1.2353641176;
  font-weight: 400;
  letter-spacing: -0.022em;
  background:#fff;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

#additional-section {
  padding: 20px;
  margin:10px;
  color:#000;
  background-color: #f5f5f7; /* Adjust background color as needed */
 
}

#additional-section h2 {
  margin: 10px;
  text-align: center;
}

#additional-section p {
  margin: 0;
  text-align: center;
}

#intouch {
  text-align: center;
  background: #f5f5f7;
  color: #000;
  border-radius: 3px;
  padding: 10px 20px;
  margin: 8px;
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
  margin-bottom: 12px;
}
.social-links-footer {
  text-align: center;
  background-color: #f5f5f7;
  margin-top: 5px;
  border-radius: 3px;
  
}

.social-links-footer a {
  display: inline-block;
  margin-top:3px;
  color: #000;
  text-decoration: none;
  line-height: 1.2353641176;
  font-weight: 400;
  letter-spacing: -0.022em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  padding:20px;
}

.social-links-footer p {
  margin-top: 5px;
}

.get-in-touch {
  display: block;
  width: 150px; /* Adjust width as needed */
  margin: 0 auto; /* Center the link horizontally */
  margin-top:50px;
  padding: 10px;
  text-align: center;
  color: #fff;
  background-color: #3361e1 !important;
  text-decoration: none; /* Remove underline */
  border-radius: 3px;
  margin-bottom: 12px;
}

#get-in-touch:hover {
  background-color: #3361e1; /* Change background color on hover */
}







#footer a {
  color: #3361e1;
  text-decoration: none;
  margin:5px;
}

#footer-nav {
  background-color: none; 
  padding: 20px 0; /* Add spacing around the navigation */
}

#footer-nav ul {
  display: flex;
  flex-wrap: wrap; /* Enables wrapping of nav items */
  gap: 15px; /* Horizontal spacing between items */
  row-gap: 8px; /* Vertical spacing between wrapped rows */
  padding: 0;
  margin: 0;
  list-style: none; /* Removes bullet points */
  justify-content: center; /* Centers items for footer */
  text-align: center; /* Ensures centered text in each item */
}

#footer-nav ul li {
  margin: 0;
  padding: 0;
}

#footer-nav ul li a {
  text-decoration: none;
  color: #000; /* White text for visibility on dark background */
  padding: 5px 10px; /* Adjust padding inside each link */
  font-size: 14px; /* Footer link font size */
  border-radius: 5px;
  line-height: 1.3; /* Controls spacing inside each link */
}

#footer-nav ul li a:hover {
  text-decoration:underline;
  color:#000;
  }



  #additional-images {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    margin-top: 10px;
    margin: 8px;
    margin-bottom: 12px;
  }
  
  .additional-image {
    width: calc(45% - 20px); /* Adjusted width to include gap and margin */
    max-width: 400px; /* Set a maximum width for the images */
    background-color: #f5f5f7;
    padding: 20px;
    margin: 0 10px; /* Adjusted margin to create gap */
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
    text-align: center;
    overflow: hidden;
    margin-bottom: 10px; /* Add some space between each item */
  }
  
  .additional-image img {
    width: 100%; /* Allow the image to fill its container */
    max-height: 400px; /* Set a maximum height for the images */
    object-fit: cover; /* Maintain aspect ratio while filling the container */
    border-radius: 3px;
  }
  
  .additional-image p {
    margin-top: 10px;
    font-size: 14px;
    color: #000;
    word-wrap: break-word;
  }
  



#contact-info {
  display: flex;
  justify-content: space-around;
  margin-top: 10px; /* Adjust as needed */
  margin: 8px;
  margin-bottom: 12px;
}

.contact-box {
  width: calc(45% - 5px); /* Set width of each box (1/3 of container width minus margin) */
  background-color: #f5f5f7; /* Box background color */
  padding: 20px;
  line-height: 0.7; /* Adjust the value as needed */
  margin: 0 7px; /* Adjust margin between boxes */
  box-sizing: border-box; /* Include padding and border in box's total width */
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
  overflow: hidden; /* Hide overflowing content */
  font-size: 14px!important;

}
.contact-box h3 {
  font-weight:bold;
  color:#000;
  margin-bottom:10px;
  line-height: 2.00; 
}

.contact-box p {
  margin: 0;
  color:#000;
  line-height: 1.5; 
}

.contact-box .address {
  margin-top: 5px;
  line-height: 0.7; 
}

.contact-box .line-space {
  margin-top: 15px;
  line-height: 0.7; 
}




.contact-box img {
  width: 100%; /* Ensure the map image fills the container */
  height: auto; /* Allow the height to adjust automatically */
  border-radius: 3px; /* Optional: Add border radius */
}



.contact-box a {
  color: #000; /* Text color for navigation links */
  text-decoration: none; /* Remove underline from links */
  font-size: 14px;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

#contact-info a.privacy-policy,
#contact-info a.terms-of-service {
    color: #fa3454; /* Sets the link color */
    text-decoration: none; /* Optional: Removes underline from links */
    font-size: 10px; /* Sets font size of captcha section */
}
#contact-info .contact-box:last-child p:last-child {
    font-size: 10px; /* Sets font size of captcha section */
}


.east-midlands-container {
  margin: 8px;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  overflow: hidden;
  position: relative;
  width: auto;
  height: 300px; /* Fixed height */
  border-radius: 3px;
  padding: 10px 20px;
  box-shadow:rgba(0, 0, 0, 0.23) 0px 4px 4px; 
  margin-bottom: 12px;
}


.east-midlands-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 97, 225, 0.4);/* Semi-transparent black overlay */
  z-index: 1; /* Ensure the overlay is on top of the image */
}
.east-midlands-container img {
  width: 100%; /* Allow the image to adjust its width based on its intrinsic aspect ratio */
  height: 100%; /* Ensure the image covers the full height of its container */
  object-fit: cover; /* Ensures the image covers the available space without distorting */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Center the image both vertically and horizontally */
  z-index: 0; /* Ensure the image is behind the overlay */
}



.additional-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/*testimonials*/
/* Outer Container */
.testimonials {
  display: flex;
  justify-content: center; /* Center align the boxes */
  gap: 20px; /* Space between boxes */
  margin: 40px auto; /* Centered with margin on top and bottom */
  flex-wrap: wrap; /* Stack boxes if screen width is too small */
}

/* Individual Testimonial Box */
.testimonial-box {
  width: 30%; /* Adjust width to fit three boxes across */
  background-color: #f5f5f7; /* Light background */
  padding: 20px; /* Inner padding for spacing */
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
  text-align: left; /* Left-align the text */
  margin-bottom: 20px; /* Space between rows when wrapping */
}

/* Heading Styling */
.testimonial-box h3 {
  font-size: 1.rem; /* Larger font size for headings */
  color: #000; /* Primary brand color */
  margin-bottom: 10px; /* Space below the heading */
}

/* Paragraph Styling */
.testimonial-box p {
  font-size: 14px; /* Normal text size */
  color: #000; /* Neutral color for text */
  line-height: 1.6; /* Comfortable line spacing */
}


.contact-section {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Stretch items to match height */
  margin: 0 6px;
  margin-bottom:12px;
}

.contact-image,
.contact-form {
  width: calc(45% - 5px); /* Adjusted width to include gap and margin */
  padding: 20px;
  margin: 0 42px; /* Adjusted margin to create gap */
  border-radius: 3px;
  background-color: #f5f5f7;
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
  display: flex; /* Add display flex */
  flex-direction: column; /* Stack children vertically */
  flex-grow: 1; /* Allow the boxes to expand and fill the available space */
}

.contact-box {
  width: calc(45% - 5px); /* Set width of each box (1/3 of container width minus margin) */
  background-color: #f5f5f7; /* Box background color */
  padding: 20px;
  margin: 0 7px; /* Adjust margin between boxes */
  box-sizing: border-box; /* Include padding and border in box's total width */
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
  overflow: hidden; /* Hide overflowing content */
  font-size: 12px;
}

.contact-image img {
  max-width: 50%;
  height: auto;
  border-radius: 3px;
}

.image-text {
  margin-top: 10px;
  color: #000;
}

.contact-form h3 {
  margin-top: 0;
  font-size: 14px;
  color: #000;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  flex: 1; /* Make the form grow to fill the available space */
}

.contact-form label {
  margin-top: 10px;
  font-size: 14px;
  color: #000;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.contact-form textarea {
  height: 150px; /* Adjust the height of the textarea */
}

.contact-form button {
  padding: 10px 20px;
  margin-top: 10px;
  border: none;
  border-radius: 3px;
  background-color: #3361e1;
  color: white;
  cursor: pointer;
}



#footer .iconsby {
  color: #555; /* Default color for the link */
  font-size: 10px;
  text-decoration: none;
}

#footer .iconsby::before {
  content: "icons by - ";
  color: #777; /* Default color for the text "icons by" */
}

#footer .iconsby:hover {
  color: #777; /* Color change on hover for the link */
}

#footer .iconsby:hover::before {
  color: #777; /* Color change on hover for the text "icons by" */
}





/*heading*/
/* Style for headings in sections */
section h1 {
  text-align: center; /* Center-align the headings */
  font-size: 24px; /* Adjust the font size as needed */
  color: #000; /* Set the color of the headings */
  margin-bottom: 20px; /* Add some bottom margin for spacing */
}
/* pina colada fun*/
.song-container {
  display: flex;
  justify-content: center;
  align-items: center;

}

.song-verse {
  text-align: center;
  color: #000;
}


body{

    font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size:14px;
}


/* Outer Layout Container */
.three-boxes {
  display: flex;
  justify-content: center; /* Center boxes horizontally */
  gap: 20px; /* Space between the boxes */
  margin: 40px auto; /* Add margin around the container */
  flex-wrap: wrap; /* Stack boxes vertically on smaller screens */
}

/* Individual Location Box */
.location-box {
  width: 30%; /* Adjusted width to fit three boxes in a row */
  background-color: #f5f5f7; /* Light background color */
  padding: 15px;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px;
  text-align: center; /* Center align content */
  margin-bottom: 20px; /* Space between rows */
}

/* Image Styling */
.responsive-image {
  width: 100%; /* Full width of the box */
  height: auto; /* Maintain aspect ratio */
  border-radius: 3px; /* Match box corners */
}

/* Text Styling */
.location-text {
  margin-top: 10px; /* Space between image and text */
}

.location-title {
  font-size: 1.5rem; /* Title font size */
  color: #3361e1; /* Primary color for the title */
  margin-bottom: 5px;
}

.location-description {
  font-size: 1rem; /* Paragraph font size */
  color: #333; /* Neutral text color */
  line-height: 1.6; /* Comfortable spacing */
}

/* Responsive Design */
.three-boxes {
  justify-content: space-evenly; /* Adjust spacing on smaller screens */
}

.location-box {
  width: 90%; /* Adjust box width on small screens */
  max-width: 300px; /* Ensure max size consistency */
}



/* Media queries for tablets and mobile devices */
@media (max-width: 768px) {
  .top-social-links {
    text-align: center;
  }

  .top-social-links a {
    margin-right: 15px;
  }

  .top-social-links img {
    width: 25px;
    height: 25px;
  }

  .telephone, .email {
    padding: 5px 10px; /* Reduce padding */
    font-size: 14px; /* Smaller font size for better fit */
    flex: 1 0 100%; /* Full width */
    text-align: center; /* Center text */
    margin: 5px 0; /* Add spacing */
  }

  .logo, .telephone, .email {
    order: 0; /* Reset order */
  }

  .top-row {
    justify-content: center; /* Centers the content for smaller screens */
  }

  #main-nav ul {
      line-height: 1.8; /* Controls spacing inside each link */
      justify-content: center; /* Center items for smaller screens */
      gap: 10px;
      row-gap:6px;
  }
  #main-nav ul li a {
  font-size: 14px; /* Smaller text size for smaller screens */
  }
  .service-boxes {
    flex-wrap: wrap;
  }

  .service-box {
    width: 100%;
    margin-bottom: 20px;
  }

 
 
    #footer-nav ul {
      gap: 10px; /* Smaller spacing for mobile screens */
      row-gap: 6px; /* Reduce vertical gap between rows */
    }
  
    #footer-nav ul li a {
      font-size: 14px; /* Smaller text size for smaller screens */
    }
    #footer{
      font-size: 14px; /* Smaller text size for smaller screens */
    }

    #additional-images {
      flex-direction: column; /* Stack items vertically */
      align-items: center; /* Center items in the column layout */
  }

  .additional-image {
      width: 90%; /* Take up most of the width on smaller screens */
      max-width: 100%; /* Ensure it doesn't exceed the screen width */
  }



.additional-image p {
    font-size: 14px; /* Adjust font size for readability */
}









.contact-section {
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items */
}

.contact-form {
  order: 1; /* Form appears first */
  width: 90%; /* Adjust width for smaller screens */
}

.contact-image {
  order: 2; /* Image appears second */
  width: 90%; /* Adjust width for smaller screens */
}


.image-text,
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form button {
  font-size: 14px; /* Reduce font size for tablets */
}

.contact-form h3 {
  font-size: 14px; /* Slightly smaller headings */
}





#welcome-message, #know {
  font-size: 14px; /* Reduce font size */
  padding: 10px; /* Adjust padding */
}

#welcome-message h1, #know h1 {
  font-size: 20px; /* Slightly larger for headings */
}

#welcome-message p, #know p {
  font-size: 14px; /* Smaller font for paragraphs */
}

#welcome-image-here {
  height: auto; /* Adjust height for smaller devices */
  padding: 10px; /* Reduce padding */
}

.service-box {
  width: calc(45% - 10px); /* Adjust width for smaller screens */
}

.service-image {
  width: 100%; /* Full-width for mobile */
}

.service-image img {
  width:100%; /* Full-width for mobile */
}

#intouch {
  padding: 15px;
}

.social-links-footer {
  gap: 15px; /* Reduce spacing for tablets */
}

.get-in-touch {
  width: 130px; /* Slightly smaller button on tablets */
}

#additional-section p {
  font-size: 14px; /* Slightly smaller text for tablets */
  max-width: 500px; /* Adjust max width for better readability */
}



.pina-page h1, .about-page h1, .services-page h1, .blog-page h1, .contact-page h1, .testimonials-page h1 {
  font-size: 20px; /* Smaller font size for mobile */
}

.pina-page p, .about-page p, .services-page p, .blog-page p, .contact-page p, .testimonials-page p {
  font-size: 14px; /* Smaller font size for mobile */
}

.song-verse p {
  font-size: 14px; /* Smaller font size for tablet screens */
}

.testimonial-box {
  width: 45%; /* Two boxes across on smaller screens */
}


}

/* Media query for phones */
@media (max-width: 480px) {

  .service-box {
    width: 100%; /* Full-width for mobile */
  }

  .service-image img {
    width: 100% /* Smaller images for mobile */
  }

  .additional-image {
      padding: 15px; /* Reduce padding for smaller screens */
  }

  .additional-image p {
      font-size: 14px; /* Adjust font size for readability */
  }

  .additional-box h3 {
    font-size: 14px; /* Further reduce heading font size for very small screens */
}

.additional-box p {
    font-size: 14px; /* Maintain small font size */
}

.contact-form {
  order: 1; /* Form still appears first */
}

.contact-image {
  order: 2; /* Image still appears second */
}

.image-text,
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form button {
  font-size: 14px; /* Maintain smaller font size */
}

.contact-form h3 {
  font-size: 14px; /* Reduce heading size further */
}

.testimonial-box {
  width: 100%; /* Stack the boxes vertically on very small screens */
}




#welcome-message, #know {
  font-size: 14px; /* Keep text smaller */
  padding: 8px; /* Further reduce padding */
}

#welcome-message h1, #know h1 {
  font-size: 20px; /* Scale down headings */
}

#welcome-message p, #know p {
  font-size: 14px; /* Slightly smaller for very small screens */
}

#welcome-image-here {
  height: auto; /* Allow the height to adjust naturally */
  padding: 8px; /* Reduce padding further */
  margin: 5px; /* Narrow the margin */
}

#intouch {
  padding: 10px;
  margin: 5px auto;
}

#additional-section p {
  font-size: 14px; /* Smaller font for mobile */
  max-width: 90%; /* Allow paragraph to take more space on mobile */
}

.social-links-footer {
  gap: 10px; /* Even less gap for mobile */
  justify-content: center; /* Center items for small screens */
}

.social-links-footer img {
  max-width: 40px; /* Smaller icons for mobile */
}

.get-in-touch {
  width: 100px; /* Smaller button size for mobile */
  font-size: 14px; /* Adjust button text size */
}


.pina-page h1, .about-page h1, .services-page h1, .blog-page h1, .contact-page h1, .testimonials-page h1 {
  font-size: 20px; /* Smaller font size for mobile */
}

.pina-page p, .about-page p, .services-page p, .blog-page p, .contact-page p, .testimonials-page p {
  font-size: 14px; /* Smaller font size for mobile */
}

.song-verse p {
  font-size: 14px; /* Smaller font size for mobile */
}

  }

  @media (min-width: 769px) and (max-width: 1024px) {
    .services h3 {
      font-size: 16px;
    }

  }

  @media (max-width: 768px) {
    .testimonial-box {
      width: 80%; /* Full-width boxes on small screens */
    }
  }


  .ticker {
    display: flex;
    background-color: #008000; /* Green background */
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    padding: 10px;
    margin: 8px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.23) 0px 4px 4px; 
    margin-bottom: 12px;
    padding-bottom: 5px;
    overflow: hidden; /* Hide overflowing text */
    white-space: nowrap; /* Prevent text from wrapping */
    position: relative;
  }
  
  .ticker p {
    display: inline-block;
    color: white; /* White text */
    font-size: 14px; /* Adjust as needed */
    animation: scrollText 10s linear infinite; /* Scrolling effect */
    margin: 0; /* Remove default margin */
  }
  
  @keyframes scrollText {
    0% {
      transform: translateX(100%); /* Start off-screen to the right */
    }
    100% {
      transform: translateX(-100%); /* End off-screen to the left */
    }
  }
  
  @media screen and (orientation: landscape) {
    .ticker p {
      font-size: 14px; /* Slightly smaller font size in landscape mode */
    }
  }