/* ===========================================
   LIVES DOMAINS
   Premium Landing Page
=========================================== */

:root{

--primary:#1D4ED8;
--secondary:#2563EB;
--accent:#60A5FA;
--dark:#0F172A;
--text:#334155;
--light:#F8FAFC;
--white:#ffffff;
--border:#E2E8F0;

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

--radius:18px;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#F8FAFC;
color:var(--text);
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}
.logo img{

height:110px;
width:auto;

}



a{

text-decoration:none;

}

ul{

list-style:none;

}

section{

padding:90px 8%;

}

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title h2{

font-size:2.4rem;
color:var(--dark);
margin-bottom:15px;

}

.section-title p{

color:#64748B;
font-size:1.05rem;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;

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

backdrop-filter:blur(12px);

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

}

.navbar{

max-width:1400px;
margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 40px;

}

.logo img{

height:58px;

}

.nav-links{

display:flex;
gap:35px;

}

.nav-links a{

color:var(--dark);
font-weight:500;
transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-btn{

padding:14px 28px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

border-radius:50px;

font-weight:600;

transition:.35s;

box-shadow:
0 12px 30px rgba(37,99,235,.25);

}

.nav-btn:hover{

transform:translateY(-4px);

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

background:

linear-gradient(
135deg,
#eff6ff,
#ffffff
);

padding-top:120px;

}

/* Animated circles */

.hero::before{

content:"";

position:absolute;

width:600px;
height:600px;

background:#60A5FA;

border-radius:50%;

filter:blur(130px);

opacity:.25;

top:-150px;
left:-120px;

animation:floatOne 8s infinite alternate;

}

.hero::after{

content:"";

position:absolute;

width:550px;
height:550px;

background:#2563EB;

border-radius:50%;

filter:blur(140px);

opacity:.18;

right:-120px;
bottom:-200px;

animation:floatTwo 10s infinite alternate;

}

.hero-content{

max-width:820px;

position:relative;

z-index:5;

text-align:center;

}

.badge{

display:inline-block;

padding:10px 20px;

background:white;

border:1px solid var(--border);

border-radius:40px;

font-size:.85rem;

font-weight:600;

color:var(--primary);

margin-bottom:25px;

box-shadow:var(--shadow);

}

.hero h1{

font-size:4rem;

line-height:1.2;

color:var(--dark);

margin-bottom:25px;

font-weight:700;

}

.hero p{

font-size:1.15rem;

color:#475569;

line-height:1.9;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

padding:16px 38px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

border-radius:50px;

font-weight:600;

transition:.35s;

box-shadow:

0 20px 35px rgba(37,99,235,.30);

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-secondary{

padding:16px 38px;

background:white;

border:2px solid var(--primary);

color:var(--primary);

font-weight:600;

border-radius:50px;

transition:.35s;

}

.btn-secondary:hover{

background:var(--primary);

color:white;

}

/*==========================
ANIMATIONS
==========================*/

@keyframes floatOne{

from{

transform:translateY(0px);

}

to{

transform:
translateY(70px)
translateX(60px);

}

}

@keyframes floatTwo{

from{

transform:translateY(0px);

}

to{

transform:
translateY(-60px)
translateX(-80px);

}

}
/*===========================================
FEATURED DOMAINS
===========================================*/

.featured{

background:linear-gradient(
180deg,
#ffffff,
#F8FAFC);

}

.domain-slider{

display:flex;
gap:28px;

overflow-x:auto;

padding:20px 5px 30px;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

}

/* Scrollbar */

.domain-slider::-webkit-scrollbar{

height:10px;

}

.domain-slider::-webkit-scrollbar-track{

background:#E2E8F0;
border-radius:50px;

}

.domain-slider::-webkit-scrollbar-thumb{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

border-radius:50px;

}

/* Cards */

.domain-card{

min-width:330px;
max-width:330px;

background:white;

padding:30px;

border-radius:24px;

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

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

transition:.4s ease;

scroll-snap-align:start;

position:relative;

overflow:hidden;

cursor:pointer;

}

/* Gradient glow */

.domain-card::before{

content:"";

position:absolute;

top:-120px;
right:-100px;

width:230px;
height:230px;

background:

radial-gradient(circle,
rgba(37,99,235,.18),
transparent 70%);

transition:.5s;

}

.domain-card:hover::before{

transform:scale(1.3);

}

.domain-card:hover{

transform:
translateY(-12px);

box-shadow:
0 30px 60px rgba(37,99,235,.18);

}

/* Available badge */

.domain-card::after{

content:"AVAILABLE";

position:absolute;

top:22px;
right:22px;

font-size:.72rem;

font-weight:700;

letter-spacing:.08em;

padding:8px 14px;

border-radius:40px;

background:#DCFCE7;

color:#15803D;

}

/* Domain name */

.domain-card h3{

font-size:1.25rem;

line-height:1.5;

color:var(--dark);

margin-top:45px;

margin-bottom:15px;

word-break:break-word;

}

/* Category */

.domain-card p{

display:inline-block;

background:#EFF6FF;

color:var(--primary);

padding:8px 16px;

border-radius:50px;

font-weight:600;

font-size:.85rem;

margin-bottom:28px;

}

/* Price */

.domain-card span{

display:block;

font-size:2rem;

font-weight:700;

color:var(--primary);

margin-bottom:28px;

}

/* Button */

.domain-card button{

width:100%;

padding:16px;

border:none;

border-radius:50px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

color:white;

font-size:1rem;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.domain-card button:hover{

transform:translateY(-3px);

box-shadow:
0 18px 30px rgba(37,99,235,.25);

}

/* Small decorative icon */

.domain-card .icon{

width:65px;
height:65px;

border-radius:18px;

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

background:linear-gradient(
135deg,
#DBEAFE,
#EFF6FF);

margin-bottom:20px;

font-size:28px;

color:var(--primary);

}

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

.about{

background:white;

}

.about-content{

max-width:900px;

margin:auto;

text-align:center;

}

.about-content h2{

font-size:2.5rem;

margin-bottom:30px;

color:var(--dark);

}

.about-content p{

font-size:1.08rem;

line-height:2;

margin-bottom:25px;

color:#475569;

}

/*===========================================
WHY CHOOSE US
===========================================*/

.why{

background:#F8FAFC;

}

.features{

display:grid;

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

gap:30px;

}

.feature-card{

background:white;

padding:40px 30px;

border-radius:24px;

text-align:center;

transition:.4s;

box-shadow:
0 15px 35px rgba(15,23,42,.05);

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-card h3{

margin:25px 0 15px;

font-size:1.3rem;

color:var(--dark);

}

.feature-card p{

line-height:1.8;

color:#64748B;

}

/* Decorative icon */

.feature-card::before{

content:"✓";

display:flex;

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

margin:auto;

width:70px;
height:70px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

color:white;

font-size:28px;

font-weight:bold;

}
/*===========================================
TESTIMONIALS
===========================================*/

.testimonials{

background:#ffffff;

}

.testimonial-grid{

display:grid;

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

gap:35px;

}

.testimonial{

background:white;

padding:35px;

border-radius:22px;

box-shadow:0 15px 35px rgba(15,23,42,.06);

transition:.35s;

position:relative;

overflow:hidden;

}

.testimonial:hover{

transform:translateY(-8px);

box-shadow:0 25px 50px rgba(37,99,235,.15);

}

.testimonial::before{

content:"★★★★★";

display:block;

color:#FBBF24;

font-size:1.2rem;

margin-bottom:20px;

}

.testimonial p{

line-height:1.9;

color:#475569;

margin-bottom:25px;

font-style:italic;

}

.testimonial h4{

color:var(--dark);

margin-bottom:5px;

}

.testimonial span{

color:#64748B;

font-size:.95rem;

}


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

.contact{

background:linear-gradient(
180deg,
#EFF6FF,
#F8FAFC);

}

.contact-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.contact-info h2{

font-size:2.5rem;

color:var(--dark);

margin-bottom:20px;

}

.contact-info p{

line-height:2;

margin-bottom:20px;

color:#475569;

}

.contact-info h4{

margin-top:35px;

margin-bottom:15px;

color:var(--primary);

}

.contact-form{

background:white;

padding:45px;

border-radius:25px;

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

}

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-form input,
.contact-form textarea{

width:100%;

padding:18px;

border:1px solid #CBD5E1;

border-radius:14px;

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

font-size:1rem;

outline:none;

transition:.3s;

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.contact-form button{

padding:18px;

border:none;

border-radius:50px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

color:white;

font-size:1rem;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.contact-form button:hover{

transform:translateY(-4px);

box-shadow:0 18px 30px rgba(37,99,235,.25);

}


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

footer{

background:#0F172A;

padding:35px;

text-align:center;

color:white;

}

footer p{

opacity:.8;

}


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

@media(max-width:1100px){

.hero h1{

font-size:3.2rem;

}

.contact-container{

grid-template-columns:1fr;

}

}


@media(max-width:900px){

.navbar{

padding:18px 25px;

}

.nav-links{

display:none;

}

.hero{

padding-top:160px;

}

.hero h1{

font-size:2.8rem;

}

.hero p{

font-size:1rem;

}

.section-title h2{

font-size:2rem;

}

.domain-card{

min-width:300px;

}

}


@media(max-width:768px){

section{

padding:70px 6%;

}

.hero h1{

font-size:2.3rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:240px;

text-align:center;

}

.contact-form{

padding:30px;

}

}


@media(max-width:500px){

.hero h1{

font-size:2rem;

}

.hero p{

line-height:1.8;

}

.domain-card{

min-width:260px;

padding:25px;

}

.contact-info h2{

font-size:2rem;

}

.about-content h2{

font-size:2rem;

}

.section-title h2{

font-size:1.8rem;

}

}


/*===========================================
SMOOTH HOVER EFFECTS
===========================================*/

button,
a,
.domain-card,
.feature-card,
.testimonial{

transition:all .35s ease;

}


/*===========================================
SELECTION COLOR
===========================================*/

::selection{

background:var(--primary);

color:white;

}
.offer-btn{
display:block;
width:100%;
text-align:center;
padding:16px;
border-radius:50px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
font-weight:600;
}

.logo img{

height:150px;
width:auto;

}