/* ==========================================
ArtiDéSigns Website V6
style.css
========================================== */

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

:root{

--arti-black:#000000;
--arti-dark:#050505;

--arti-red:#ff1414;
--arti-yellow:#ffcc00;

--arti-white:#ffffff;
--arti-grey:#a0a0a0;

--container:1300px;

}

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

html{
scroll-behavior:smooth;
}

body{

background:#000;
color:#fff;

font-family:'Inter',sans-serif;

line-height:1.8;

overflow-x:hidden;

}

/* ==========================
LOADER
========================== */

#loader{

position:fixed;

inset:0;

background:#000;

display:flex;

align-items:center;
justify-content:center;

z-index:999999;

transition:.7s;

}

#loader.hide{

opacity:0;
visibility:hidden;

}

.loader-logo{

width:110px;

height:auto;

animation:
artiSpin 5s linear infinite;

}

@keyframes artiSpin{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/* ==========================
GLOBAL
========================== */

.container{

width:min(100%,var(--container));

margin:auto;

padding:0 30px;

}

section{

padding:120px 0;

}

.section-title{

font-family:'Montserrat',sans-serif;

font-size:clamp(2rem,4vw,3.4rem);

font-weight:800;

text-align:center;

margin-bottom:20px;

}

.section-subtitle{

max-width:850px;

margin:0 auto 60px;

text-align:center;

color:var(--arti-grey);

}

.hero-bg,
.hero-overlay,
.hero-glow{

pointer-events:none;

}

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

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

z-index:9999;

background:rgba(0,0,0,.78);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.06);

}

.nav-container{

display:flex;
align-items:center;
justify-content:space-between;

padding:18px 30px;

}

.nav-logo{

display:flex;

align-items:center;

text-decoration:none;

width:180px;

overflow:hidden;

}

.nav-logo img{

width:180px;

height:auto;

display:block;

}

.nav-menu{

display:flex;

gap:28px;

}

.nav-menu a{

color:#fff;

text-decoration:none;

font-size:.92rem;

font-weight:500;

transition:.3s;

}

.nav-menu a:hover{

color:var(--arti-yellow);

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:120px;

background:#000;

}

.hero-bg{

position:absolute;

inset:0;

background-image:
url('../assets/hero/hero-bg.jpg');

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

opacity:.30;

transform:scale(1.05);

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
rgba(0,0,0,.75) 0%,
rgba(0,0,0,.82) 40%,
rgba(0,0,0,.92) 100%
);

}

.hero-glow{

position:absolute;

border-radius:50%;

filter:blur(160px);

pointer-events:none;

}

.hero-glow-red{

width:550px;
height:550px;

right:-180px;
top:-120px;

background:
rgba(255,20,20,.18);

}

.hero-glow-yellow{

width:500px;
height:500px;

left:-150px;
bottom:-150px;

background:
rgba(255,204,0,.10);

}

.hero-content{

position:relative;

z-index:20;

display:flex;

justify-content:flex-start;

align-items:center;

min-height:80vh;

}

.hero-copy{

max-width:760px;

}

.hero-label{

display:inline-block;

margin-bottom:22px;

font-size:.82rem;

font-weight:700;

letter-spacing:4px;

color:var(--arti-yellow);

}

.hero h1{

font-family:'Montserrat',sans-serif;

font-size:clamp(3rem,6vw,5.5rem);

font-weight:800;

line-height:1.02;

margin-bottom:32px;

max-width:900px;

}

.hero-story{

max-width:820px;

font-size:1.08rem;

color:#d2d2d2;

line-height:1.95;

}

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

.hero-actions{

margin-top:42px;

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn{

display:inline-flex;

align-items:center;
justify-content:center;

padding:15px 34px;

border-radius:999px;

text-decoration:none;

font-weight:700;

transition:.3s;

cursor:pointer;

}

.btn-primary{

background:var(--arti-red);

color:#fff;

box-shadow:
0 15px 35px rgba(255,20,20,.30);

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:
0 20px 45px rgba(255,20,20,.40);

}

.btn-secondary{

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.12);

color:#fff;

}

.btn-secondary:hover{

border-color:var(--arti-yellow);

color:var(--arti-yellow);

}

/* ==========================
SECTION TRANSITION
========================== */

#services{

position:relative;

background:

linear-gradient(
180deg,
#030303 0%,
#050505 100%
);

}

/* ==========================
GRID
========================== */

.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:28px;

}

/* ==========================
CARDS
========================== */

.card{

background:

linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

border:1px solid rgba(255,255,255,.06);

border-radius:24px;

padding:34px;

transition:.35s;

backdrop-filter:blur(10px);

}

.card:hover{

transform:translateY(-8px);

border-color:
rgba(255,204,0,.20);

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

}

.card h3{

font-family:'Montserrat',sans-serif;

font-size:1.3rem;

margin-bottom:16px;

}

.card p{

color:#bfbfbf;

line-height:1.9;

}

/* ==========================
PORTFOLIO
========================== */

#portfolio{

background:#000;

}

.portfolio-card{

display:flex;

flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

min-height:340px;

}

.portfolio-placeholder{

font-size:4rem;

margin-bottom:22px;

filter:
drop-shadow(0 0 25px rgba(255,204,0,.15));

}

.portfolio-card h3{

margin-bottom:14px;

}

.portfolio-card p{

max-width:320px;

}

/* ==========================
DIGITAL DESIGN STUDIO
========================== */

.ai-section{

position:relative;

background:

linear-gradient(
180deg,
#040404 0%,
#090909 50%,
#040404 100%
);

border-top:
1px solid rgba(255,255,255,.05);

border-bottom:
1px solid rgba(255,255,255,.05);

}

.ai-box{

max-width:950px;

margin:auto;

text-align:center;

}

.ai-box p{

font-size:1.08rem;

color:#d0d0d0;

line-height:2;

}

/* ==========================
CLIENTS
========================== */

.client-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:24px;

}

.client-card{

height:180px;

display:flex;

align-items:center;
justify-content:center;

text-decoration:none;

background:

linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

border-radius:24px;

border:1px dashed rgba(255,255,255,.12);

transition:.35s;

}

.client-card:hover{

transform:translateY(-6px);

border-color:
rgba(255,204,0,.25);

box-shadow:
0 20px 50px rgba(0,0,0,.35);

}

.client-card span{

color:#888;

font-size:.95rem;

font-weight:500;

}

/* ==========================
CONTACT
========================== */

.contact-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:28px;

}

.contact-card{

background:

linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

border:1px solid rgba(255,255,255,.06);

border-radius:24px;

padding:34px;

}

.contact-card h3{

font-family:'Montserrat',sans-serif;

margin-bottom:20px;

}

.contact-card p{

margin-bottom:12px;

color:#c8c8c8;

}

.contact-card a{

color:#fff;

text-decoration:none;

transition:.3s;

}

.contact-card a:hover{

color:var(--arti-yellow);

}

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

.footer{

padding:70px 0;

text-align:center;

border-top:
1px solid rgba(255,255,255,.06);

background:#000;

}

.footer p{

color:#777;

margin-bottom:8px;

}

/* ==========================
WHATSAPP FLOAT
========================== */

.whatsapp-float{

position:fixed;

right:24px;
bottom:24px;

width:64px;
height:64px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

background:#25D366;

color:#fff;

z-index:99999;

box-shadow:
0 15px 35px rgba(37,211,102,.35);

transition:.3s;

}

.whatsapp-float:hover{

transform:scale(1.08);

}

.whatsapp-float svg{

width:30px;
height:30px;

}

/* ==========================
REVEAL ANIMATION
========================== */

.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1;

transform:none;

}

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

@media(max-width:1100px){

.hero-content{

justify-content:center;

}

.hero-copy{

text-align:center;

}

.hero-story{

margin:auto;

}

.hero-actions{

justify-content:center;

}

}

@media(max-width:900px){

/* Remove Hero Effects */

.hero-overlay{
display:none;
}

.hero-glow{
display:none;
}

/* Bigger Navbar Logo */

.nav-logo{

width:320px;

overflow:hidden;

}

.nav-logo img{

width:100%;

height:auto;

display:block;

}

/* Hide Any Accidental Icon Logos */

.loader-logo{

display:none;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:3rem;

}

.hero-story{

font-size:1rem;

line-height:1.85;

}

.hero-bg{

background-position:center center;

}


.hero{

padding-top:140px;

}

.hero h1{

font-size:3rem;

}

.hero-story{

font-size:1rem;

line-height:1.85;

}

.hero-bg{

background-position:center center;

}

}

@media(max-width:600px){

.hero h1{

font-size:2.3rem;

line-height:1.08;

}

.hero-actions{

flex-direction:column;

align-items:center;

}

.btn{

width:100%;

max-width:320px;

}

.contact-grid{

grid-template-columns:1fr;

}

.client-grid{

grid-template-columns:1fr;

}

.whatsapp-float{

width:58px;
height:58px;

right:18px;
bottom:18px;

}

.loader-logo{

width:90px;

}

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050505;

}

::-webkit-scrollbar-thumb{

background:#222;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#333;

}

/* ==========================
TEXT SELECTION
========================== */

::selection{

background:
rgba(255,20,20,.35);

color:#fff;

}