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


body{
    font-family: Arial, Helvetica, sans-serif;
}
.navbar{
   background-color:  white;
   border-top: 4px solid #FF7500;
}

.container{
width: 90%;
max-width: 1250px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}


.hero_img{
display: flex;
align-items: center;
gap: 12px;
margin-top: 25px;
}

.main_nav a{
text-decoration: none;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: black;
padding: 0 15px;
}

.hero_btn{
  width: 155px;
  height: 40px;
  background-color:  #FF7500;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


.hero_btn:hover{
 
background-color:  white;
color:  #FF7500;
border: 3px solid #FF7500;
cursor: pointer;
}


a {
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: solid #FF7500;
  width: 0%;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
  animation: heartbeat116 1.5s ease-in-out 0.3s infinite;
}


 a {
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: #FF7500;
  width: 0%;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
  animation: heartbeat116 1.5s ease-in-out 0.3s infinite;
}

@keyframes heartbeat116 {
  0%, 100% {
    width: 100%;
  }
  50% {
    width: 60%;
  }
}



.section{
    background: #252420;
    margin: auto;
    position: relative;
    padding: 50px 0 110px;
    margin-top: 20px;
}

.hero_container{
    width: 90%;
    max-width: 1150px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero_main{
 margin-left: 50px;
}

.hero_main h1{
    color: white;
    font-size: 40px;
    font-weight: bold;
    line-height: normal;
    width: 550px;
}


.hero_main p{
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    width: 550px;
    margin-top: 10px;
}


.btn_main{
width: 155px;
height: 42px;
background: #FF7500;
color: white;
font-size: 16px;
font-weight: 900;
border: none;
border-radius: 6px;

margin-top: 50px;
}


.btn_main:hover{
background-color: white;
color: #FF7500;
border: 3px solid #FF7500;
}
.main{
  background-color: #ffffff;
}

.container_main{
  width: 90%;
  max-width: 1350px;
  margin: auto;
  margin-top: 150px;

}

.main_line {
  background-color: #252420;
color: black;
  width: 140px;
  height: 5px;
  background-color: #FF7500;
  margin-bottom: 40px;
}


.hero_line h1{
color: black;
  font-size: 70px ;
  font-weight: bold;
gap: 90%;
}

.item_main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  margin-left: 50px;
}

.item1 {
 padding: 25px 0 20px;

}
.item1 h3 {
 padding: 15px 0;

}

.item2{
  padding: 25px 0 20px;
}

.item2 h3{
  padding: 15px 0;
}

.item3{
  padding: 25px 0 20px;
}

.item3 h3{
  padding: 15px 0;
}



.hero_main_-{
  width: 1040px;
  max-width: 1550px;
  margin: auto;
  margin-bottom: 10%;
  background: #252420;
  border: 100px;
  border-radius: 20px;
}








.hero_main_- h1{
  color: white;
}




.hero_main_- p{
  color: white;
}



.main_img{
  position: relative;
  top: -50px;
}




.hero_main_-{
 margin-top: 100px;
}

.logo{
  display: flex;
  align-items: center;
  gap: 12px;
margin-top: 25px;
}

.footer{
   background-color: #f8f8f8;
}



.footer_container{
   width: 90%;
   max-width: 1250px;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.footer_icons{
   display: flex;
   align-items: center;
  justify-content: center;
  gap: 30px;
  cursor: pointer;
}


.nav_item1{
  display: flex;
  flex-direction: column;
}


.nav_item2{
  display: flex;
  flex-direction: column;
}



.nav_item3{
  display: flex;
  flex-direction: column;
}


.nav_item4{
  display: flex;
  flex-direction: column;
}


/* footer */



.footer {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 40px 0;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 30px;
}

.footer-col{
  display: flex;
  align-items: center;
}

.footer-logo img {
  width: 40px;
}

.footer-col h4 {
  margin-bottom: 12px;
  font-size: 16px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  text-decoration: none;
  font-size: 14px;
  color: #6a1b9a;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.social-icons img {
  width: 20px;
  opacity: 0.7;
  transition: 0.3s;
}

.span2{
  color: #FF7500;
  font-size: 25px;
  font-weight: 600;
}
.span1{
  color: #060605;
   font-size: 25px;
  font-weight: 600;
}

.social-icons img:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}