@import url("https://fonts.googleapis.com/css2?family=Anybody:wght@600&family=Poppins:wght@300;400;500;600&display=swap");



:root {

  --para: #444;

  --all: #201410;

  --btn: #da4817;

  --bg: #faf9ff;

}

.service_section {

  width: 100%;

  height: auto;

  /* background-color: var(--bg); */

  padding: 90px 10%;

}

.service_section .service_heading {

  font-size: 2.7rem;

  color: #da4817;

  margin-bottom: 4rem;

  letter-spacing:1px;

  text-transform: uppercase;

}

.service_section .service_container {

  width: 100%;

  height: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 50px;

}



.service_container a {

  text-decoration: none;

  color: inherit;

}



.service_container .service_card {

  padding: 35px 30px;

  border: 2px solid rgba(255, 255, 255, 0.091);

  border-radius: 10px;

  box-shadow: -5px 5px 21px rgba(139, 139, 139, 0.103);

  cursor: pointer;

  /* transition: .5s; */

  height: 100%;

  animation: float 6s ease-in-out infinite;

  overflow: hidden;

  transition: transform 0.4s ease, box-shadow 0.4s ease,

    background-color 0.4s ease;

    background-color: #ccc;

}



.service_card h4 {

  text-transform: uppercase;

}



.service_container .service_card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    135deg,

    rgba(255, 72, 0, 0.1),

    rgba(255, 255, 255, 0.2)

  );

  z-index: 0;

  opacity: 0.4;

}



.service_container .service_card:hover {

  transform: translateY(-10px) scale(1.05);

  box-shadow: 0 16px 32px rgba(255, 255, 255, 0.242); /* Elevated shadow on hover */

  background-color: rgb(255, 255, 255); /* Slight background color change on hover */

  position: relative;

  overflow: hidden;

  color: black;

}



.service_container .service_card:hover::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    135deg,

    rgba(255, 255, 255, 0.4),

    rgba(255, 89, 0, 0.8)

  );

  opacity: 0.4;

  transform: translateX(-100%) rotate(-30deg);

  transition: transform 0.6s ease, opacity 0.6s ease;

}



.service_container .service_card:hover::after {

  transform: translateX(100%) rotate(30deg);

}

@keyframes float {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-5px);

  }

  100% {

    transform: translateY(0);

  }

}



.service_card i {

  font-size: 25px;

  transition: 0.5s;

}

.service_card h4 {

  font-size: 17px;

  margin: 7px 0 5px 0;

  transition: 0.5s;

}

.service_card p {

  font-size: 14px;

  line-height: 23px;

  color: var(--para);

}

.service_card:hover {

  box-shadow: -18px 15px 34px rgba(51, 51, 51, 0.103);

  transform: translateY(-2px);

}

.service_card:hover i,

.service_card:hover h4 {

  color: var(--btn);

}

@media only screen and (min-width: 860px) and (max-width: 1060px) {

  .service_section {

    padding: 90px 5%;

  }

  .service_section .service_container {

    grid-gap: 50px 40px;

  }

}

@media only screen and (max-width: 860px) {

  .service_section .service_container {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media only screen and (max-width: 620px) {

  .service_section .service_container {

    grid-template-columns: repeat(1, 1fr);

  }

}













    







/*               footer */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");



footer {

  position: relative;

}



.container {

  max-width: 1170px;

  margin: auto;

}

.row {

  display: flex;

  flex-wrap: wrap;

}

ul {

  list-style: none;

}

.footer {

  /* margin-top: 120px; */

  /* background-color: #24262b; */

  background: linear-gradient(#3d3d3d, #232323, #000000);

  padding: 70px 0;

}

.footer-col {

  width: 25%;

  padding: 0 15px;

}

.footer-col h4 {

  font-size: 18px;

  color: #ffffff;

  text-transform: capitalize;

  margin-bottom: 35px;

  font-weight: 700;

  position: relative;

  letter-spacing: 1px;

}

.footer-col h4::before {

  content: "";

  position: absolute;

  left: 0;

  bottom: -10px;

  background-color: #da4817;

  height: 2px;

  box-sizing: border-box;

  width: 50px;

}

.footer-col ul li:not(:last-child) {

  margin-bottom: 10px;

}

.footer-col ul li a {

  font-size: 16px;

  text-transform: capitalize;

  color: #ffffff;

  text-decoration: none;

  font-weight: 300;

  color: #bbbbbb;

  display: block;

  transition: all 0.3s ease;

}

.footer-col ul li a:hover {

  color: #ffffff;

  padding-left: 8px;

}

.footer-col .social-links a {

  display: inline-block;

  height: 40px;

  width: 40px;

  background-color: rgba(255, 255, 255, 0.2);

  margin: 0 10px 10px 0;

  text-align: center;

  line-height: 40px;

  border-radius: 50%;

  color: #ffffff;

  font-size: 1.2rem;

  transition: all 0.5s ease;

}

.footer-col .social-links a:hover {

  color: #24262b;

  background-color: #ffffff;

}



.footer-bottom {

  position: absolute;

  bottom: 0;

  width: 100%;

  text-align: center;

  font-size: 13px;

  color: #fff;

  letter-spacing: 1px;

  font-family: sans-serif;

  padding: 3px;

}



.footer-bottom b {

  color: #da4817;

  font-size: 15px;

  font-weight: bolder;

}



.footer-bottom p {

  margin: 0;

}



.footer-bottom a {

  color: #da4817cb;

  text-decoration: none;

}



.footer-bottom a:hover {

  text-decoration: underline;

}



/*responsive*/

@media (max-width: 767px) {

  .footer-col {

    width: 50%;

    margin-bottom: 30px;

  }

}

@media (max-width: 574px) {

  .footer-col {

    width: 100%;

  }

}