*{
margin:0;
padding:0;
box-sizing:border-box
}
:root{
--red:#e13b20;
--dark:#090b0d;
--dark2:#111518;
--text:#1c2023;
--muted:#6e7478;
--light:#f5f6f7;
--white:#fff;
--border:#e6e8ea
}
html{
scroll-behavior:smooth
}
body{
font-family:Inter,Arial,sans-serif;
color:var(--text);
background:#fff;
line-height:1.7
}
img{
max-width:100%;
display:block
}
a{
text-decoration:none;
color:inherit
}
button,input,textarea,select{
font:inherit
}
.container{
width:min(1180px,92%);
margin:auto
}
.site-header{
position:absolute;
z-index:20;
top:0;
left:0;
width:100%;
border-bottom:1px solid rgba(255,255,255,.16)
}
.nav-wrap{
height:88px;
display:flex;
align-items:center;
justify-content:space-between
}
.brand{
display:flex;
align-items:center;
gap:11px;
color:#fff
}
.brand-mark{
width:45px;
height:45px;
border:2px solid var(--red);
display:grid;
place-items:center;
border-radius:50%;
background:#fff;
color:var(--dark);
font-size:20px
}
.brand strong{
display:block;
font-family:"Barlow Condensed",sans-serif;
font-size:26px;
line-height:22px;
letter-spacing:1px
}
.brand small{
display:block;
color:var(--red);
font-size:10px;
letter-spacing:5px;
font-weight:800;
margin-top:2px
}
.main-nav{
display:flex;
align-items:center;
gap:27px;
color:#fff;
font-size:13px;
font-weight:700
}
.main-nav>a:not(.nav-call){
position:relative;
padding:31px 0
}
.main-nav>a:not(.nav-call):after{
content:"";
position:absolute;
left:0;
bottom:22px;
width:0;
height:2px;
background:var(--red);
transition:.3s
}
.main-nav>a:hover:after{
width:100%
}
.nav-call{
background:var(--red);
padding:11px 17px;
border-radius:4px
}
.menu-toggle{
display:none;
background:none;
border:0;
color:#fff;
font-size:24px
}
.hero{
height:760px;
position:relative;
background:#090b0d;
overflow:hidden
}
.hero-slider,.hero-slide{
position:absolute;
inset:0
}
.hero-slide{
background-size:cover;
background-position:center;
opacity:0;
transform:scale(1.04);
transition:opacity .8s,transform 5s
}
.hero-slide.active{
opacity:1;
transform:scale(1)
}
.hero-content{
padding-top:205px;
color:#fff;
position:relative;
z-index:2
}
.eyebrow,.section-kicker{
display:inline-block;
color:var(--red);
font-weight:800;
font-size:12px;
letter-spacing:2.2px
}
.hero h1{
font-family:"Barlow Condensed",sans-serif;
font-size:clamp(55px,7vw,92px);
line-height:.94;
text-transform:uppercase;
max-width:800px;
margin:18px 0
}
.hero h1 span{
color:#fff;
-webkit-text-stroke:1px rgba(255,255,255,.35)
}
.hero p{
max-width:670px;
color:#e3e6e8;
font-size:16px
}
.hero-actions{
display:flex;
gap:13px;
margin:30px 0 22px;
flex-wrap:wrap
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
border:0;
cursor:pointer;
padding:13px 22px;
font-weight:800;
font-size:13px;
border-radius:4px;
transition:.25s
}
.btn-red{
background:var(--red);
color:#fff
}
.btn-red:hover{
background:#b92812;
transform:translateY(-2px)
}
.btn-light-outline{
border:1px solid rgba(255,255,255,.55);
color:#fff;
background:rgba(255,255,255,.06)
}
.btn-light-outline:hover{
background:#fff;
color:#111
}
.hero-points{
display:flex;
gap:24px;
flex-wrap:wrap;
font-size:12px;
color:#ddd
}
.hero-points i{
color:var(--red);
margin-right:5px
}
.slider-arrow{
position:absolute;
z-index:5;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
border:1px solid rgba(255,255,255,.35);
background:rgba(0,0,0,.25);
color:#fff;
border-radius:50%;
cursor:pointer
}
.slider-arrow:hover{
background:var(--red);
border-color:var(--red)
}
.prev{
left:25px
}
.next{
right:25px
}
.slider-dots{
position:absolute;
z-index:5;
bottom:32px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:7px
}
.slider-dots button{
width:30px;
height:3px;
border:0;
background:rgba(255,255,255,.35);
cursor:pointer
}
.slider-dots button.active{
background:var(--red)
}
.quick-strip{
background:var(--red);
color:#fff
}
.quick-grid{
display:grid;
grid-template-columns:repeat(4,1fr)
}
.quick-grid>div{
min-height:92px;
display:flex;
align-items:center;
gap:14px;
padding:15px 20px;
border-right:1px solid rgba(255,255,255,.2)
}
.quick-grid>div:last-child{
border:0
}
.quick-grid i{
font-size:26px
}
.quick-grid b,.quick-grid small{
display:block
}
.quick-grid b{
font-size:14px
}
.quick-grid small{
font-size:11px;
opacity:.8
}
.section{
padding:50px 0
}
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:75px;
align-items:center
}
.about-image{
position:relative
}
.about-image img{
height:520px;
width:100%;
object-fit:cover;
border-radius:5px
}
.about-image:before{
content:"";
position:absolute;
left:-14px;
top:-14px;
width:100px;
height:100px;
border-left:5px solid var(--red);
border-top:5px solid var(--red);
z-index:-1
}
.experience-badge{
position:absolute;
bottom:25px;
right:-20px;
background:var(--red);
color:#fff;
padding:18px 28px;
text-align:center;
box-shadow:0 15px 35px rgba(225,59,32,.25)
}
.experience-badge strong{
font-family:"Barlow Condensed";
font-size:29px;
display:block;
line-height:25px
}
.experience-badge span{
font-size:11px;
text-transform:uppercase;
letter-spacing:1px
}
.section-kicker{
margin-bottom:10px
}
h2{
font-family:"Barlow Condensed",sans-serif;
text-transform:uppercase;
font-size:54px;
line-height:1.02;
margin-bottom:19px
}
h2 span{
color:var(--red)
}
.about-content p{
color:var(--muted);
font-size:14px;
margin-bottom:14px
}
.about-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin:25px 0
}
.about-list div{
display:flex;
gap:9px;
font-size:12px;
font-weight:700
}
.about-list i{
color:var(--red)
}
.text-btn{
font-weight:800;
color:var(--red);
font-size:13px
}
.text-btn i{
margin-left:8px
}
.services-section{
background:var(--light)
}
.section-heading{
display:flex;
align-items:end;
justify-content:space-between;
gap:30px;
margin-bottom:45px
}
.section-heading>p{
max-width:450px;
color:var(--muted);
font-size:13px
}
.services-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px
}
.service-card{
background:#fff;
border:1px solid var(--border);
transition:.3s;
overflow:hidden
}
.service-card:hover{
transform:translateY(-7px);
box-shadow:0 18px 45px rgba(0,0,0,.09)
}
.service-image{
height:205px;
position:relative;
overflow:hidden
}
.service-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s
}
.service-card:hover .service-image img{
transform:scale(1.07)
}
.service-image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 60%)
}
.service-image span{
position:absolute;
z-index:2;
right:13px;
top:13px;
background:var(--red);
color:#fff;
font-family:"Barlow Condensed";
padding:3px 8px;
font-size:14px
}
.service-body{
padding:22px 20px 20px;
position:relative
}
.service-body>i{
color:var(--red);
font-size:22px;
margin-bottom:8px
}
.service-body h3{
font-family:"Barlow Condensed";
font-size:25px;
text-transform:uppercase;
line-height:1.1;
margin-bottom:8px
}
.service-body p{
font-size:12px;
color:var(--muted);
min-height:63px
}
.enquiry-btn{
margin-top:15px;
border:0;
background:none;
color:var(--red);
font-size:12px;
font-weight:800;
cursor:pointer;
padding:0
}
.enquiry-btn i{
margin-left:6px
}
.cta-banner{
background:var(--dark);
color:#fff;
padding:60px 0;
position:relative;
overflow:hidden
}
.cta-banner:after{
content:"";
position:absolute;
width:320px;
height:320px;
border:45px solid rgba(225,59,32,.1);
border-radius:50%;
right:-100px;
top:-100px
}
.cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
position:relative;
z-index:2
}
.cta-inner h2{
margin:3px 0 8px;
font-size:46px
}
.cta-inner p{
color:#aeb4b8;
font-size:13px
}
.why-section{
background:#fff
}
.center{
text-align:center;
display:block
}
.center>p{
margin:0 auto
}
.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}
.why-card{
text-align:center;
padding:35px 22px;
border:1px solid var(--border);
transition:.3s
}
.why-card:hover{
border-color:var(--red);
box-shadow:0 15px 35px rgba(0,0,0,.06)
}
.why-icon{
width:68px;
height:68px;
margin:0 auto 18px;
display:grid;
place-items:center;
background:#fff2ef;
color:var(--red);
font-size:25px;
border-radius:50%
}
.why-card h3{
font-family:"Barlow Condensed";
font-size:25px;
text-transform:uppercase
}
.why-card p{
font-size:12px;
color:var(--muted);
margin-top:7px
}
.gallery-section{
background:var(--light)
}
.gallery-grid{
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
grid-auto-rows:230px;
gap:15px
}
.gallery-item{
position:relative;
overflow:hidden;
border-radius:4px;
background:#111
}
.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
transition:.45s
}
.gallery-item:hover img{
transform:scale(1.08)
}
.gallery-item span{
position:absolute;
inset:0;
display:grid;
place-items:center;
background:rgba(225,59,32,.75);
color:#fff;
font-size:25px;
opacity:0;
transition:.3s
}
.gallery-item:hover span{
opacity:1
}
.gallery-item.tall{
grid-row:span 2
}
.gallery-item.wide{
grid-column:span 2
}
.contact-section{
background:#fff
}
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:start
}
.contact-info>p{
color:var(--muted);
font-size:13px;
max-width:540px;
margin-bottom:30px
}
.contact-item{
display:flex;
gap:15px;
margin:20px 0
}
.contact-item>div{
width:45px;
height:45px;
flex:0 0 45px;
border-radius:50%;
background:#fff0ec;
color:var(--red);
display:grid;
place-items:center
}
.contact-item small{
display:block;
color:#8a9094;
font-size:10px;
text-transform:uppercase;
font-weight:800;
letter-spacing:1px
}
.contact-item a,.contact-item strong{
display:block;
font-size:13px;
font-weight:800;
margin-top:1px
}
.contact-buttons{
display:flex;
gap:10px;
margin-top:25px
}
.btn-whatsapp{
background:#20b65a;
color:#fff
}
.btn-whatsapp:hover{
background:#168d44
}
.contact-form{
background:var(--dark);
padding:38px;
border-radius:5px;
color:#fff;
box-shadow:0 20px 50px rgba(0,0,0,.12)
}
.form-head>span{
color:var(--red);
font-size:11px;
font-weight:800;
letter-spacing:2px
}
.form-head h3{
font-family:"Barlow Condensed";
font-size:34px;
text-transform:uppercase;
margin:3px 0 25px
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:13px
}
.field{
margin-bottom:15px
}
.field label{
display:block;
font-size:10px;
font-weight:800;
text-transform:uppercase;
letter-spacing:1px;
color:#aeb4b8;
margin-bottom:6px
}
.field input,.field textarea,.field select,.modal-box input,.modal-box textarea{
width:100%;
border:1px solid #30373b;
background:#171b1e;
color:#fff;
padding:12px 13px;
outline:0;
border-radius:3px;
font-size:12px
}
.field input:focus,.field textarea:focus,.field select:focus{
border-color:var(--red)
}
.field select option{
background:#171b1e
}
.submit-btn{
width:100%;
margin-top:4px
}
.form-note{
font-size:10px;
color:#777f83;
text-align:center;
margin-top:12px
}
.map-section{
height:390px
}
.map-section iframe{
width:100%;
height:100%;
border:0;
filter:grayscale(100%) contrast(1.05)
}
.footer{
background:#080a0c;
color:#fff
}
.footer-top{
display:grid;
grid-template-columns:1.7fr 1fr 1fr 1.2fr;
gap:45px;
padding:70px 0
}
.footer-logo{
margin-bottom:18px
}
.footer-brand>p{
font-size:12px;
color:#858d91;
max-width:330px
}
.footer h4{
font-family:"Barlow Condensed";
font-size:22px;
text-transform:uppercase;
margin-bottom:17px
}
.footer-top>div:not(.footer-brand)>a{
display:block;
color:#858d91;
font-size:12px;
margin:7px 0
}
.footer-top>div:not(.footer-brand)>a:hover{
color:#fff
}
.footer-top>div>p{
font-size:12px;
color:#858d91;
line-height:1.8
}
.socials{
display:flex;
gap:8px;
margin-top:20px
}
.socials a{
width:35px;
height:35px;
border:1px solid #303438;
display:grid;
place-items:center;
border-radius:50%;
color:#fff;
font-size:13px
}
.socials a:hover{
background:var(--red);
border-color:var(--red)
}
.footer-bottom{
border-top:1px solid #202427;
padding:17px 0;
color:#666e72;
font-size:10px
}
.footer-bottom .container{
display:flex;
justify-content:space-between
}
.floating-call,.floating-whatsapp{
position:fixed;
right:18px;
width:48px;
height:48px;
border-radius:50%;
display:grid;
place-items:center;
color:#fff;
z-index:30;
box-shadow:0 7px 20px rgba(0,0,0,.2)
}
.floating-call{
bottom:82px;
background:var(--red)
}
.floating-whatsapp{
bottom:23px;
background:#20b65a;
font-size:22px
}
.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
display:none;
place-items:center;
padding:20px;
z-index:100
}
.modal.open{
display:grid
}
.modal-box{
width:min(470px,100%);
background:#101315;
color:#fff;
padding:35px;
border-top:4px solid var(--red);
position:relative
}
.modal-close{
position:absolute;
right:16px;
top:14px;
border:0;
background:none;
color:#aaa;
font-size:20px;
cursor:pointer
}
.modal-icon{
width:58px;
height:58px;
border-radius:50%;
display:grid;
place-items:center;
background:#2a1714;
color:var(--red);
font-size:22px;
margin-bottom:15px
}
.modal-box h3{
font-family:"Barlow Condensed";
font-size:35px;
text-transform:uppercase;
margin:3px 0
}
.modal-box p{
font-size:12px;
color:#899095;
margin-bottom:18px
}
.modal-box input,.modal-box textarea{
margin-bottom:10px
}
.modal-box input:focus,.modal-box textarea:focus{
border-color:var(--red);
outline:0
}
.modal-box .btn{
width:100%
}
@media(max-width:1000px){
.main-nav{
gap:15px
}
.services-grid{
grid-template-columns:repeat(2,1fr)
}
.why-grid{
grid-template-columns:repeat(2,1fr)
}
.about-grid,.contact-grid{
gap:40px
}
.footer-top{
grid-template-columns:1.5fr 1fr 1fr
}
.footer-top>div:last-child{
grid-column:2
}
}
@media(max-width:780px){
.site-header{
background:rgba(8,10,12,.88)
}
.nav-wrap{
height:72px
}
.menu-toggle{
display:block
}
.main-nav{
display:none;
position:absolute;
left:0;
right:0;
top:72px;
background:#101315;
flex-direction:column;
align-items:stretch;
padding:15px 6%;
gap:0
}
.main-nav.open{
display:flex
}
.main-nav>a:not(.nav-call){
padding:11px 0
}
.main-nav>a:not(.nav-call):after{
display:none
}
.nav-call{
text-align:center;
margin-top:8px
}
.hero{
height:690px
}
.hero-content{
padding-top:160px
}
.hero h1{
font-size:59px
}
.slider-arrow{
display:none
}
.quick-grid{
grid-template-columns:1fr 1fr
}
.quick-grid>div{
border-bottom:1px solid rgba(255,255,255,.2)
}
.section{
padding:75px 0
}
.about-grid,.contact-grid{
grid-template-columns:1fr
}
.about-image img{
height:420px
}
.experience-badge{
right:10px
}
.section-heading{
display:block
}
.section-heading>p{
margin-top:15px
}
.services-grid{
grid-template-columns:1fr 1fr
}
.cta-inner{
display:block
}
.cta-inner .btn{
margin-top:20px
}
.gallery-grid{
grid-template-columns:1fr 1fr;
grid-auto-rows:190px
}
.gallery-item.tall{
grid-row:span 1
}
.gallery-item.wide{
grid-column:span 2
}
.footer-top{
grid-template-columns:1fr 1fr
}
.footer-top>div:last-child{
grid-column:auto
}
}
@media(max-width:520px){
h2{
font-size:44px
}
.brand strong{
font-size:22px
}
.brand-mark{
width:40px;
height:40px
}
.hero h1{
font-size:49px
}
.hero p{
font-size:13px
}
.hero-actions{
margin-top:22px
}
.hero-points{
gap:9px;
display:grid
}
.quick-grid{
grid-template-columns:1fr
}
.quick-grid>div{
border-right:0
}
.services-grid,.why-grid{
grid-template-columns:1fr
}
.about-list,.form-row{
grid-template-columns:1fr
}
.gallery-grid{
grid-template-columns:1fr;
grid-auto-rows:230px
}
.gallery-item.wide{
grid-column:auto
}
.footer-top{
grid-template-columns:1fr
}
.footer-top>div:last-child{
grid-column:auto
}
.footer-bottom .container{
display:block
}
.footer-bottom span{
display:block;
margin:3px 0
}
.contact-form{
padding:25px
}
.floating-call,.floating-whatsapp{
width:44px;
height:44px;
right:14px
}
}