* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}
  
  .services-section{
background:linear-gradient(135deg,#111,#000);
padding:100px 8%;
text-align:center;


    padding:100px 8%;
    text-align:center;
}

.service-small{
    color: #EB7034;
    letter-spacing:3px;
    font-size:14px;
    margin-bottom:10px;
}

.service-title{
    color:#ffffff;

    font-size:48px;
    margin-bottom:70px;
}

.services-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:40px;
}

/* CARD */

.service-box{
    background:#1a1a1a;

    padding:40px;
    border-radius:12px;
    text-align:left;
    border:1px solid #222;
    transition:0.4s;
    position:relative;
}

.service-box:hover{
    transform:translateY(-10px);
border-color:#EB7034;
box-shadow:0 15px 45px rgba(235,112,52,0.35);

}

/* ICON */

.service-icon{
    font-size:40px;
    color:#EB7034;
    margin-bottom:15px;
}

.service-box h3{
    color:#ddd;
    font-size:22px;
    margin-bottom:15px;
}

/* LINE */

.line{
    height:1px;
    background:#333;
    margin:20px 0;
}

/* TEXT */

.service-box p{
    color:#bbbbbb;

    line-height:1.7;
    font-size:15px;
}

/* BUTTON */

.service-box a{
    display:inline-block;
    margin-top:20px;
    color: #EB7034;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.service-box a:hover{
 
    letter-spacing:1px;
    color:#ffffff;

}






@media (max-width:1024px){

.services-section{
padding:80px 6%;
overflow-x: hidden;
}

.service-title{
font-size:40px;
margin-bottom:60px;
}

.services-container{
gap:30px;
}

.service-box{
padding:30px;
}

}




@media (max-width:768px){

.service-title{
font-size:34px;
margin-bottom:50px;
}

.services-container{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.service-box{
padding:25px;
}

.service-box h3{
font-size:20px;
}

.service-box p{
font-size:14px;
}

}




@media (max-width:480px){

.services-section{
padding:60px 20px;
}

.service-small{
font-size:12px;
}

.service-title{
font-size:28px;
margin-bottom:40px;
}

.services-container{
grid-template-columns:1fr;
}

.service-box{
padding:22px;
text-align:center;
}

.service-icon{
font-size:34px;
}

.service-box h3{
font-size:18px;
}

.service-box p{
font-size:13px;
}

}