body{
 
  font-family: "League Spartan", sans-serif;

}
/* ........................................... Top bar ............................  */

/* .................................. Service Page ..........................  */
.service-landing{
  background-image: url(./assets/images/welding-7104637_1280.jpg);
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 80vh;
}
.service-content{
  margin: 0 auto;
  width: 80%;
}
.service-head{
  font-size: 40px;
  font-weight: 500;
  margin-top: 20px;
  color: #AF0D1F
}
.service-para{
    font-size: 16px;
    font-weight: 500;
}
.service-icon{
  width: 100px;
}
.service-icon-para{
  color: #AF0D1F;
  font-weight: 300;
  font-size: 18px;
}
/* .................... filter ..............................  */
.filter-contain{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 4rem auto;
  width: 90%;
}
.menus{
  margin: 1.5rem auto;
}
.menus a{
  font-size: 1.1rem;
  background-color:#014194;
  text-decoration: none;
  color: white;
  padding: 5px 15px;
  margin: auto 1.1rem;
}
.menus a:hover{
  color: black;
  background-color: transparent;
  border: 2px solid #AF0D1F;
}
.box{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.store-item{
  width: 300px;
  padding: 1rem;
  /* border: 1px solid black; */
  margin: 10px;
  box-shadow: 5px 5px 20px #ccc;
 border-radius: 10px;
}
.store-item img{
  width: 100%;
  display: block;
}
.store-item img:hover{
  scale: 1.4;
}
@media screen and (max-width: 768px) {
  .menus a {
    font-size: 0.9rem; /* Adjust font size for smaller screens */
    padding: 8px 16px; /* Adjust padding for smaller screens */
  }
  .service-icon{
    width: 60px;
  }
  .service-icon-para{
    font-size: 15px;
  }
}
@media screen and (max-width: 576px) {
  .menus a {
    font-size: 0.8rem; /* Adjust font size for smaller screens */
    padding: 8px 16px; /* Adjust padding for smaller screens */
    margin-top: 20px;
  }
  .service-icon{
    width: 60px;
  }
  .service-icon-para{
    font-size: 15px;
  }
  .service-para{
    font-size: 15px;
  }
  .service-landing{
    background-size: 100% 100%;
  }
}
/* ........................... Contact Form ......................  */
.contact-contain{
  background-color: rgb(255, 255, 255);
  
}
.contact-tilte{
  text-align: center;
  font-size: 40px;
  color: #af0d1d;
  margin-top: 5 0px;
}
.contact-row{
  margin: 0 auto;
  width: 80%;
   -webkit-box-shadow: -7px -7px 44px -10px rgba(179,179,179,1);
  -moz-box-shadow: -7px -7px 44px -10px rgba(179,179,179,1);
  box-shadow: -7px -7px 44px -10px rgba(179,179,179,1);
}
.input {
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 1em;
  background-color: #ccc;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  transition: 300ms ease-in-out;
  margin-top: 10px;
  width: 300px;
}
.contactus-head-para{
  font-size: 18px;
  text-align: center;
}
/* .contact-col{
  border: 1px solid black;
}
.map{
  border: 1px solid red;
} */
.input:focus {
  background-color: white;
  transform: scale(1.05);
  box-shadow: 13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}

.contact-inputs{
  width: 300px;
}
button {
  font-family: inherit;
  font-size: 20px;
  background-color:#014194;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  margin-top: 20px;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}
@media screen and (max-width:1025px) {
  .map-img{
    width: 440px;
    height: 350px;
  }
}
@media screen and (max-width:769px) {
 .contact-inputs{
  width: 50px;
 }
  .map-img{
      width: 600px;
      margin-left: 20px;
  }
}
@media screen and (max-width:500px) {
  .map-img{
    width: 300px;
    height: 200px;
    margin-left: 0;
  }
  .service-head{
    font-size: 30px;
  }
  .contact-tilte{
    font-size: 30px;
  }
  .footer-list-title{
    font-size: 18px;
   }
   .footer-link{
    font-size: 16px;
   }
}
@media screen and (max-width:321px) {
  .map-img{
      width: 300px;
  }
 
  .input{
      width: 200px;
  }
  .map-img{
      width: 200px;
  }
  
}
/* ............................ footer ......................  */
.footer {
  background-color: #ecececd5;
  background-image: url(./assets/images/Egg\ Shell.png);
  background-size: cover;

  padding: 40px 0;
}
.footer-icon{
  width: 30px;
}
.footer-logo{
  width: 200px;
}
li{
  list-style: none;
}
li a{
  font-size: 16px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-brand {
  flex-basis: 300px;
}

.footer-brand .logo {
  color: #000000;
  font-size: 24px;
  text-decoration: none;
  font-weight: bold;
}

.footer-text {
  color: #000000;
  margin-top: 10px;
  text-align: justify;
}

.social-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin-top: 20px;
}

.social-link {
  color: #000000;
  font-size: 20px;
  margin-right: 10px;
}

.footer-list {
  flex-basis: 300px;
  margin-top: 20px;
}

.footer-list-title {
  font-size: 22px;
  font-weight: bold;
  color: #000000;
}

.footer-link {
  color: #000000;
  text-decoration: none;
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 500;
}

.footer-bottom {
  margin-top: 30px;
}

.copyright a{
  font-size: 20px;
  color: #AF0D1F;
  text-decoration:none;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
  }

  .footer-brand,
  .footer-list {
    flex-basis: 100%;
    text-align: center;
  }
}
@media screen and (max-width:500px) {
  .footer-list-title{
    font-size: 18px;
   }
   .footer-link{
    font-size: 16px;
   }
}