/* RESET */

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

body{
font-family:'Poppins',sans-serif;
color:#222;
line-height:1.6;
}

html {
  scroll-padding-top: 80px; /* slightly more than navbar height */
}

/* NAVBAR */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 8%;
background:#0b0f1a;
position:sticky;
top:0;
z-index:1000;
}

.logo img{
height:70px;
}

#nav-links{
display:flex;
gap:30px;
list-style:none;
}

#nav-links a{
text-decoration:none;
color:white;
font-weight:500;
transition:.3s;
}

#nav-links a:hover{
color:#186BC6;
}

/* MOBILE MENU */

.menu-toggle{
display:none;
flex-direction:column;
cursor:pointer;
}

.menu-toggle span{
width:25px;
height:3px;
background:white;
margin:4px 0;
}

/* HOME */

#home{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/hero-bg.jpg) center center no-repeat;
  background-size: cover;
color:white;
padding:40px;
}

.home h2{
font-weight:400;
margin-bottom:10px;
}

.home h1{
font-size:60px;
margin-bottom:10px;
}

.home span{
color:#186BC6;
font-weight:600;
}

.btn{
display:inline-block;
margin-top:20px;
padding:12px 28px;
background:#186BC6;
color:white;
text-decoration:none;
border-radius:30px;
transition:.3s;
}

.hr-class {
	display: inline-block;
	border-bottom: 2px solid #5294D6;
	width: 150px;
	margin: 1.25rem 0;
}
		
.btn:hover{
background:#0099cc;
}

/* SECTIONS */

section{
padding: 120px 10%;
}

.section-title{
font-size:36px;
text-align:center;
}

.section-title span{
color:#186BC6;
}

.text-white{
	color: #f5efef;
}

.section-subtitle{
text-align:center;
max-width:700px;
margin:0 auto 50px auto;
color:#f5efef;
}

/* ABOUT */

#about {
    background-color: #efefef;
}

.about-container{
	text-align: center;
}

.about-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.about-card{
background:white;
padding:20px;
border-radius:12px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:.3s;
}

.about-card h3{
	padding: 10px 0;
}

.about-card:hover{
transform:translateY(-6px);
}

.about-card i{
font-size:40px;
color:#186BC6;
margin-bottom:15px;
}

/* INDUSTRIES */

#industries {
    background-color: #0d6dbb;
}

.industries-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.industry-card{
background:#f7f7f7;
padding:40px;
border-radius:10px;
text-align:center;
transition:.3s;
}

.industry-card i{
font-size:40px;
margin-bottom:10px;
}

/* OFFERINGS */

.offering{
text-align:center;
margin:auto;
}

.offering p{
margin:20px auto 50px auto;
}

.offerings-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.offering-item{
background:#186BC6;
color: #fff;
padding:30px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.offering-item i{
font-size:40px;
margin-bottom:10px;
}

.automating h3{
    padding: 30px 0;
    color: #186BC6;
}

.automating-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 31px;
}

.automating-flex .col {
    background: #5294D6;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
}

.max-w-2xl {
    max-width: 42rem;
}

/* CONTACT */

#contact{
	background-color: #f0f2f5;
}

.contact{
text-align:center;
max-width:900px;
margin:auto;
}

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.contact-card{
background:#f7f7f7;
padding:30px;
border-radius:10px;
}

.contact-card i{
margin-right:6px;
color:#186BC6;
}

.contact-card h4{
	padding-top: 10px;
	padding-bottom: 15px;
}

.contact-card h3{
	color: #186BC6;
}

footer {
    background: #186BC6;
    padding: 10px 0 !important;
    text-align: center;
    color: #fff;
    font-size: 13px;
}

/* MOBILE */

@media(max-width:768px){

#nav-links{
position:absolute;
top:70px;
right:0;
background:#0b0f1a;
flex-direction:column;
width:200px;
padding:20px;
display:none;
}

#nav-links.active{
display:flex;
}

.menu-toggle{
display:flex;
}

.home h1{
font-size:40px;
}

section{
padding:80px 15px;
}

}