/*==================================================
ADLER SYSTEMS
style.css
Versión 1.0
==================================================*/

:root{

    --primary:#163A5F;
    --secondary:#0E7A37;
    --dark:#101828;
    --gray:#667085;
    --light:#F5F7FA;
    --white:#FFFFFF;

    --radius:16px;

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

    --transition:.30s ease;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
font-size:16px;
line-height:1.8;
color:var(--dark);
background:#fff;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

ul{

list-style:none;
padding:0;
margin:0;

}

h1,
h2,
h3,
h4,
h5,
h6{

font-family:'Poppins',sans-serif;
font-weight:700;
line-height:1.2;
color:var(--dark);

}

.display-3{

font-size:4rem;

}

.display-5{

font-size:2.9rem;

}

.section-label{

display:inline-block;

font-size:.9rem;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

color:var(--secondary);

}

.section-title{

font-size:2.7rem;

margin-bottom:20px;

}

.section-description{

font-size:1.15rem;

color:var(--gray);

max-width:700px;

margin:auto;

}

.py-6{

padding:120px 0;

}

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

.navbar{

padding:18px 0;
transition:.4s;

}

.navbar-brand img{

max-height:80px;

}

.nav-link{

font-weight:500;
margin-left:20px;
color:var(--dark)!important;

}

.nav-link:hover{

color:var(--secondary)!important;

}

.nav-link.active{

color:var(--secondary)!important;

}

.btn-success{

background:var(--secondary);
border:none;
padding:14px 34px;
border-radius:12px;
font-weight:600;

}

.btn-success:hover{

background:#2ca758;

}

.btn-outline-primary{

border:2px solid var(--primary);
color:var(--primary);
border-radius:12px;
padding:14px 34px;

}

.btn-outline-primary:hover{

background:var(--primary);
color:#fff;

}

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

.hero{

padding-top:120px;

background:#fff;

}

.hero h1{

font-size:4.2rem;

margin-bottom:30px;

}

.hero .lead{

font-size:1.25rem;

color:var(--gray);

}

.hero img{

max-height:760px;

animation:float 8s ease infinite;

}

.hero--bg{

position:relative;

background-size:cover;

background-position:center;

}

.hero--bg::before{

content:"";

position:absolute;

inset:0;

background:rgba(16,24,40,var(--hero-overlay,.55));

}

.hero--bg .container{

position:relative;

z-index:1;

}

.hero--dark h1,
.hero--dark .lead,
.hero--dark p,
.hero--dark .section-label{

color:#fff;

}

.hero--dark .lead{

color:rgba(255,255,255,.85);

}

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

.service-card{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

}

.service-card:hover{

transform:translateY(-12px);

}

.service-icon{

width:70px;
height:70px;

border-radius:18px;

background:rgba(51,184,100,.12);

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.service-icon i{

font-size:34px;

color:var(--secondary);

}

.service-card h4{

margin-bottom:18px;

}

.service-card p{

color:var(--gray);

margin-bottom:20px;

}

.service-card a{

font-weight:600;

color:var(--primary);

}

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

.about img{

border-radius:28px;

box-shadow:var(--shadow);

}

.about h5{

margin-bottom:10px;

}

.about p{

color:var(--gray);

}

/*=============================
PROCESS
=============================*/

.process-section{

background:linear-gradient(
135deg,
#163A5F,
#214d7a);

color:#fff;

}

.process-section .section-label{

color:#66d69b;

}

.process-box{

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

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

border-radius:20px;

padding:32px 24px;

height:100%;

text-align:center;

transition:var(--transition);

}

.process-box:hover{

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

transform:translateY(-8px);

}

.process-number{

display:inline-flex;

align-items:center;

justify-content:center;

width:56px;
height:56px;

border-radius:16px;

background:var(--secondary);

color:#fff;

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

font-weight:700;

font-size:1.15rem;

margin-bottom:18px;

}

.process-box h5{

color:#fff;

margin-bottom:8px;

}

.process-box p{

color:rgba(255,255,255,.75);

font-size:.95rem;

margin-bottom:0;

}

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

.portfolio-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.portfolio-card:hover{

transform:translateY(-10px);

}

.portfolio-body{

padding:30px;

}

.portfolio-category{

display:inline-block;

margin-bottom:15px;

color:var(--secondary);

font-size:.85rem;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

}

.portfolio-body p{

color:var(--gray);

}

.portfolio-body a{

font-weight:600;

color:var(--primary);

}

.portfolio-carousel .carousel-item img{

height:480px;

object-fit:cover;

}

.portfolio-carousel .carousel-caption{

bottom:30px;

left:0;

right:0;

padding:20px;

background:linear-gradient(180deg,rgba(15,23,42,.05),rgba(15,23,42,.7));

border-radius:22px;

max-width:400px;

margin:0 auto;

text-align:center;

}

.portfolio-carousel .carousel-caption h3{

color:#fff;

margin-bottom:0;

}

.portfolio-carousel .carousel-caption .portfolio-category{

color:#fff;

margin-bottom:5px;

}

.portfolio-carousel .carousel-indicators{

margin-bottom:1rem;

}

/*=============================
TECH
=============================*/

.tech-logo{

height:60px;

opacity:.75;

transition:.3s;

}

.tech-logo:hover{

opacity:1;

transform:scale(1.05);

}

/*=============================
CTA
=============================*/

.cta-section{

background:linear-gradient(
135deg,
#163A5F,
#214d7a);

color:#fff;

}

.cta-section h2{

color:#fff;

}

.cta-section p{

opacity:.85;

}

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

.footer{

background:#101828;

padding:90px 0 40px;

color:#D0D5DD;

}

.footer h5{

color:#fff;

margin-bottom:20px;

}

.footer ul li{

margin-bottom:12px;

}

.footer a{

color:#D0D5DD;

}

.footer a:hover{

color:#fff;

}

.footer p{

color:#D0D5DD;

}

.social-links{

display:flex;

gap:16px;

margin-top:25px;

}

.social-links a{

width:42px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(255, 255, 255, 0.4);

}

.social-links i{

font-size:20px;

}

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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0);

}

}

.fade-up{

opacity:0;

transform:translateY(50px);

transition:.8s;

}

.fade-up.show{

opacity:1;

transform:none;

}


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

.contact-wrapper{

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

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

}

.contact-info{

    background:#163A5F;

    color:#ffffff;

    height:100%;

    padding:70px 50px;

}

.contact-info .section-label{

    color:#8EE7B3;

}

.contact-info h2{

    color:#ffffff;

    font-size:2.2rem;

    margin:25px 0;

}

.contact-info p{

    opacity:.85;

    margin-bottom:40px;

}

.contact-info ul{

    list-style:none;

    padding:0;

    margin:0;

}

.contact-info li{

    display:flex;

    align-items:center;

    margin-bottom:25px;

    font-size:1rem;

}

.contact-info i{

    width:48px;

    height:48px;

    border-radius:14px;

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

    display:flex;

    justify-content:center;

    align-items:center;

    margin-right:18px;

    font-size:20px;

}

#contactForm{

    padding:70px;

}

#contactForm label{

    font-weight:600;

    margin-bottom:10px;

    display:block;

    color:#101828;

}

#contactForm .form-control,

#contactForm .form-select{

    height:58px;

    border-radius:14px;

    border:1px solid #D0D5DD;

    padding:0 18px;

    box-shadow:none;

    transition:.30s;

}

#contactForm textarea{

    min-height:180px;

    resize:none;

    padding:18px;

}

#contactForm .form-control:focus,

#contactForm .form-select:focus{

    border-color:#33B864;

    box-shadow:0 0 0 .20rem rgba(51,184,100,.20);

}

#contactForm button{

    width:100%;

    height:60px;

    font-size:1rem;

}

/*==================================================
PRELOADER
==================================================*/

#preloader{

position:fixed;

inset:0;

background:#ffffff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

#preloader.hide{

opacity:0;

visibility:hidden;

}

.loader{

animation:pulse 1.8s infinite;

}

.loader img{

width:72px;

}

@keyframes pulse{

0%{

transform:scale(.95);

opacity:.6;

}

50%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(.95);

opacity:.6;

}

}

/*==================================================
COOKIES
==================================================*/

.cookie-box{

position:fixed;

bottom:25px;

left:25px;

right:25px;

background:#101828;

color:#fff;

padding:20px;

border-radius:18px;

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

z-index:9999;

}

/*=============================
BACK TO TOP
=============================*/

.scroll-top{

position:fixed;

bottom:25px;

right:25px;

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

background:var(--secondary);

color:#fff;

border:none;

border-radius:50%;

box-shadow:0 10px 25px rgba(51,184,100,.35);

font-size:1.25rem;

cursor:pointer;

opacity:0;

visibility:hidden;

transform:translateY(10px);

transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background .3s ease;

z-index:9998;

}

.scroll-top:hover{

background:#2ca758;

transform:translateY(-3px);

}

.scroll-top.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.cookie-box ~ .scroll-top{

bottom:100px;

}