/*====================================================
SARL 6GWELD
Professional Industrial Website
====================================================*/

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

:root{

--primary:#002B5B;
--secondary:#D71920;
--light:#ffffff;
--dark:#121212;
--gray:#f5f7fa;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#fff;
color:#333;
overflow-x:hidden;

}

/*==========================
TOPBAR
==========================*/

.topbar{

background:var(--primary);
color:#fff;
padding:8px 0;
font-size:14px;

}

.topbar a{

color:white;
margin-left:15px;
transition:.3s;

}

.topbar a:hover{

color:var(--secondary);

}

/*==========================
NAVBAR
==========================*/

.navbar{

background:rgba(0,43,91,.95);
backdrop-filter:blur(10px);
padding:12px 0;
transition:.4s;

}

.navbar-brand img{

transition:.4s;

}

.navbar-brand img:hover{

transform:scale(1.05);

}

.nav-link{

font-weight:500;
font-size:16px;
margin-left:20px;
transition:.3s;

}

.nav-link:hover{

color:var(--secondary)!important;

}

.nav-link.active{

color:#fff!important;
border-bottom:2px solid var(--secondary);

}

/*==========================
HERO
==========================*/

.hero{

height:100vh;

background:
linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.70)),
url("../images/hero.jpg");

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

}

.hero h5{

color:#ffcc00;

font-weight:600;

letter-spacing:2px;

margin-bottom:20px;

}

.hero h1{

font-size:65px;

font-weight:800;

color:white;

line-height:1.1;

text-transform:uppercase;

}

.hero p{

font-size:20px;

margin:30px 0;

color:#ddd;

max-width:650px;

}

.hero .btn{

padding:15px 40px;

font-size:18px;

font-weight:600;

border-radius:50px;

transition:.4s;

}

.btn-danger{

background:var(--secondary);

border:none;

}

.btn-danger:hover{

transform:translateY(-5px);

box-shadow:0 15px 40px rgba(215,25,32,.4);

}

.btn-outline-light:hover{

background:white;

color:var(--primary);

}

/*==========================
SECTION TITLES
==========================*/

section{

padding:90px 0;

}

section h2{

font-size:42px;

font-weight:700;

color:var(--primary);

margin-bottom:25px;

position:relative;

}

section h2::after{

content:"";

width:80px;

height:4px;

background:var(--secondary);

display:block;

margin-top:15px;

}

/*==========================
ABOUT
==========================*/

.about img{

border-radius:20px;

box-shadow:0 25px 50px rgba(0,0,0,.2);

}

.about p{

font-size:17px;

line-height:1.9;

color:#666;

}

/*==========================
SERVICES
==========================*/

.services{

background:var(--gray);

}

.service-card{

background:white;

padding:40px 30px;

text-align:center;

border-radius:18px;

transition:.4s;

box-shadow:0 15px 40px rgba(0,0,0,.08);

height:100%;

cursor:pointer;

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.service-card i{

font-size:60px;

color:var(--secondary);

margin-bottom:25px;

transition:.3s;

}

.service-card:hover i{

transform:scale(1.15);

}

.service-card h4{

font-weight:700;

color:var(--primary);

}

/*==========================
CERTIFICATES
==========================*/

.cert-box{

padding:35px;

background:white;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

text-align:center;

height:100%;

}

.cert-box:hover{

background:var(--primary);

color:white;

transform:translateY(-10px);

}

.cert-box:hover h3{

color:white;

}

/*==========================
BUTTONS
==========================*/

.btn-primary{

background:var(--primary);

border:none;

border-radius:40px;

padding:14px 35px;

}

.btn-primary:hover{

background:var(--secondary);

}

/*==========================
FOOTER
==========================*/

footer{

background:#07192f;

color:white;

padding:70px 0 30px;

}

footer h5{

font-weight:700;

margin-bottom:20px;

}

footer p{

color:#bbb;

line-height:1.8;

}

footer i{

font-size:22px;

margin-right:15px;

cursor:pointer;

transition:.3s;

}

footer i:hover{

color:var(--secondary);

transform:translateY(-4px);

}

footer hr{

border-color:rgba(255,255,255,.15);

margin:30px 0;

}

/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#ddd;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--secondary);

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:991px){

.hero{

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.nav-link{

margin-left:0;

padding:10px 0;

}

}

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.hero h5{

font-size:16px;

}

.hero p{

font-size:16px;

}

section h2{

font-size:30px;

}

.service-card{

margin-bottom:25px;

}

}