/* ==========================
   NEVERMORE LLC
   Premium Corporate Website CSS
========================== */


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


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


html{
    scroll-behavior:smooth;
}


body{

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

    color:#1b1b1b;

    background:#ffffff;

    line-height:1.6;

}
/* ==========================
   SERVICE ICONS
========================== */


.service-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#071426;

    color:#d4af37;

    border-radius:50%;

    font-size:30px;

    margin-bottom:25px;

    transition:.4s;

}



.service-card:hover .service-icon{

    transform:rotateY(360deg);

    background:#d4af37;

    color:#071426;

}


a{
    text-decoration:none;
}



section{

    padding:90px 8%;

}




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


.btn{

    display:inline-block;

    padding:15px 35px;

    background:
    linear-gradient(
        135deg,
        #d4af37,
        #f5d76e
    );

    color:#071426;

    font-weight:700;

    border-radius:50px;

    transition:.35s;

}



.btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(212,175,55,.35);

}




.btn-outline{

    display:inline-block;

    padding:14px 35px;

    border:2px solid white;

    color:white;

    border-radius:50px;

    margin-left:15px;

    font-weight:600;

    transition:.35s;

}



.btn-outline:hover{

    background:white;

    color:#071426;

}






/* ==========================
 HEADER
========================== */


header{

    position:absolute;

    width:100%;

    top:0;

    z-index:999;

    transition:.4s;

}




.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 8%;

}





/* LOGO */


.logo img{

    width:230px;

    height:auto;

    display:block;

}




.nav-links{

    display:flex;

    gap:35px;

    list-style:none;

}



.nav-links a{

    color:white;

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover{

    color:#d4af37;

}







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


.hero{

    min-height:100vh;

    display:flex;

    align-items:center;


    background:

    linear-gradient(
        rgba(4,10,25,.80),
        rgba(4,10,25,.90)
    ),

    url("../images/hero-bg.jpg");



    background-size:cover;

    background-position:center;

}



.hero-content{

    max-width:780px;

    color:white;

}



.hero h1{

    font-size:65px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

}



.hero p{

    font-size:20px;

    color:#ddd;

    max-width:650px;

    margin-bottom:40px;

}





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


.section-title{

    text-align:center;

    margin-bottom:60px;

}



.section-title h2{

    font-size:42px;

    color:#071426;

}



.section-title p{

    color:#666;

}







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


.about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

}



.about-text h3{

    font-size:32px;

    margin-bottom:20px;

}



.about-box{

    background:#071426;

    color:white;

    padding:45px;

    border-radius:20px;

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

}



.about-box h3{

    color:#d4af37;

}







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


.services{

    background:#f7f8fa;

}




.service-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}



.service-card{

    background:white;

    padding:40px 30px;

    border-radius:20px;

    border:1px solid #eee;

    transition:.4s;

}



.service-card:hover{

    transform:
    translateY(-12px);

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

}



.service-card h3{

    color:#071426;

    margin-bottom:15px;

}






/* ==========================
 STATS
========================== */


.stats{

    background:#071426;

    color:white;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    text-align:center;

}



.stats h2{

    color:#d4af37;

    font-size:55px;

}







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


.contact{

    text-align:center;

}



.contact form{

    max-width:600px;

    margin:40px auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}



.contact input,

.contact textarea{

    padding:18px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:16px;

}



.contact textarea{

    height:160px;

}






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


footer{

    background:#050b16;

    color:white;

    text-align:center;

    padding:35px;

}







/* ==========================
 SCROLL ANIMATION
========================== */


section,
.service-card,
.about-box,
.stats div{


    opacity:0;

    transform:
    translateY(40px);


    transition:
    all .8s ease;

}



.show{


    opacity:1;

    transform:
    translateY(0);

}







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


@media(max-width:900px){


.nav-links{

    display:none;

}



.logo img{

    width:180px;

}



.hero h1{

    font-size:42px;

}



.hero p{

    font-size:17px;

}



.about-container,

.service-grid,

.stats{

    grid-template-columns:1fr;

}



section{

    padding:70px 5%;

}



.btn-outline{

    margin-left:0;

    margin-top:15px;

}


}


/* ==========================
   ANIMATION EFFECTS
========================== */


section,
.service-card,
.about-box,
.stats div{

opacity:0;

transform:translateY(50px);

transition:
all .8s ease;

}



.show{

opacity:1;

transform:translateY(0);

}



/* Service card stagger */

.service-card:nth-child(1){

transition-delay:.1s;

}


.service-card:nth-child(2){

transition-delay:.2s;

}


.service-card:nth-child(3){

transition-delay:.3s;

}


/* Logo hover */

.logo img{

transition:.4s;

}


.logo img:hover{

transform:scale(1.05);

}

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


.why-us{

    background:white;

}



.why-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



.why-card{

    background:#071426;

    color:white;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    transition:.4s;

}



.why-card i{

    font-size:40px;

    color:#d4af37;

    margin-bottom:20px;

}



.why-card h3{

    margin-bottom:15px;

}



.why-card:hover{

    transform:translateY(-12px);

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

}





@media(max-width:900px){

    .why-grid{

        grid-template-columns:1fr;

    }

}





.stats{
    opacity:1 !important;
    transform:none !important;
}

.stats div{
    opacity:1 !important;
    transform:none !important;
}




/* ==========================
   PREMIUM ABOUT SECTION
========================== */


.about{

background:#f7f8fa;

}



.about-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}





.about-image{

height:450px;

border-radius:25px;


background:

linear-gradient(
rgba(7,20,38,.45),
rgba(7,20,38,.7)
),

url("../images/about.jpg");


background-size:cover;

background-position:center;

display:flex;

align-items:flex-end;

padding:35px;

}





.experience-box{

background:#071426;

color:white;

padding:25px 35px;

border-radius:15px;

}



.experience-box h2{

font-size:45px;

color:#d4af37;

}





.about-content span{

color:#d4af37;

font-weight:700;

letter-spacing:2px;

}



.about-content h2{

font-size:42px;

line-height:1.2;

margin:20px 0;

color:#071426;

}



.about-content p{

color:#555;

margin-bottom:25px;

}





.about-features{

display:grid;

gap:15px;

margin-bottom:30px;

}



.about-features div{

display:flex;

align-items:center;

gap:15px;

}



.about-features i{

background:#d4af37;

color:#071426;

width:30px;

height:30px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

}





@media(max-width:900px){


.about-container{

grid-template-columns:1fr;

}


.about-image{

height:350px;

}


.about-content h2{

font-size:32px;

}


/* ==========================
   TESTIMONIAL CONTAINER FIX
========================== */


.testimonial-container {

    width:100%;

    max-width:800px;

    margin:60px auto 0;

    display:block;

}



.testimonial-item {

    display:block;

    padding:40px 0;

    border-bottom:1px solid #eeeeee;

}



.testimonial-item:last-child {

    border-bottom:none;

}



.testimonial-card {

    display:block;

    width:100%;

    background:none;

    border:none;

    box-shadow:none;

}





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


.contact-info{

display:flex;

justify-content:center;

gap:50px;

margin-top:50px;

flex-wrap:wrap;

}



.info-box{

display:flex;

align-items:center;

gap:20px;

padding:25px 35px;

background:#f7f8fa;

border-radius:15px;

}



.info-box i{

font-size:30px;

color:#d4af37;

}



.info-box h3{

color:#071426;

margin-bottom:5px;

}



.info-box p{

color:#555;

}



@media(max-width:700px){


.contact-info{

flex-direction:column;

align-items:center;

}


.info-box{

width:100%;

}


}