/* =====================================================
ADPP MOZAMBIQUE — OFFICIAL CSS SYSTEM
Author: ADPP Website
Artur Issa
===================================================== */


/* =====================================================
LOAD FONT TYPEKIT
===================================================== */

@import url("https://use.typekit.net/plr5vmi.css");


/* =====================================================
ROOT VARIABLES
===================================================== */

:root{

--adpp-red:#E80404;
--adpp-red-dark:#b80303;
--adpp-red-light:#ff2a2a;

--adpp-black:#111111;
--adpp-grey:#666666;
--adpp-light-grey:#f5f5f5;
--adpp-white:#ffffff;

--adpp-font:"gotham","gotham ssm",Arial,Helvetica,sans-serif;

--adpp-radius:40px;

--adpp-transition:0.3s ease;

--adpp-container:1200px;

}


/* =====================================================
BASE
===================================================== */

body{

font-family:var(--adpp-font);

font-size:16px;

color:var(--adpp-black);

line-height:1.6;

background:white;

overflow-x:hidden;

}



/* =====================================================
CONTAINER SYSTEM
===================================================== */

.e-con,
.elementor-section.elementor-section-boxed > .elementor-container{

max-width:var(--adpp-container);

margin:auto;

padding-left:30px;

padding-right:30px;

}


.elementor-section{

padding-top:80px;

padding-bottom:80px;

}



/* =====================================================
TYPOGRAPHY
===================================================== */

h1{

font-size:56px;

font-weight:700;

line-height:1.1;

margin-bottom:20px;

}


h2{

font-size:42px;

margin-bottom:20px;

}


h3{

font-size:28px;

}


p{

font-size:18px;

color:var(--adpp-grey);

margin-bottom:20px;

}



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

header{

height:90px;

display:flex;

align-items:center;

box-shadow:0 2px 20px rgba(0,0,0,0.05);

background:white;

position:sticky;

top:0;

z-index:999;

}


.elementor-nav-menu a{

font-weight:600;

font-size:16px;

transition:var(--adpp-transition);

}


.elementor-nav-menu a:hover{

color:var(--adpp-red);

}



/* =====================================================
BUTTON SYSTEM
===================================================== */

.elementor-button{

background:var(--adpp-red);

color:white !important;

padding:16px 34px;

border-radius:var(--adpp-radius);

font-weight:700;

transition:var(--adpp-transition);

}


.elementor-button:hover{

background:var(--adpp-red-dark);

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(0,0,0,0.15);

}


.button-secondary .elementor-button{

background:transparent;

border:2px solid var(--adpp-red);

color:var(--adpp-red) !important;

}


.button-secondary .elementor-button:hover{

background:var(--adpp-red);

color:white !important;

}



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

.hero-section{

min-height:80vh;

display:flex;

align-items:center;

padding-top:140px;

padding-bottom:140px;

}


.hero-section h1{

font-size:64px;

}



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

.card{

background:white;

border-radius:20px;

padding:40px;

box-shadow:0 10px 40px rgba(0,0,0,0.05);

transition:var(--adpp-transition);

}


.card:hover{

transform:translateY(-10px);

}



/* =====================================================
IMAGE SYSTEM
===================================================== */

img{

border-radius:12px;

max-width:100%;

}



/* =====================================================
FORMS
===================================================== */

input,
textarea{

border-radius:30px;

padding:14px 20px;

border:1px solid #ddd;

width:100%;

}


input:focus,
textarea:focus{

border-color:var(--adpp-red);

outline:none;

}



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

footer{

background:var(--adpp-black);

color:white;

padding-top:80px;

padding-bottom:40px;

}


footer a{

color:white;

transition:var(--adpp-transition);

}


footer a:hover{

color:var(--adpp-red);

}



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

.elementor-column-gap-default
> .elementor-column
> .elementor-element-populated{

padding:20px;

}



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

.elementor-widget{

transition:var(--adpp-transition);

}


.elementor-widget:hover{

transform:translateY(-5px);

}



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

@media(max-width:1024px){

h1{

font-size:42px;

}

}


@media(max-width:767px){

.e-con{

padding-left:20px;

padding-right:20px;

}


.hero-section{

padding-top:80px;

padding-bottom:80px;

}


h1{

font-size:32px;

}


h2{

font-size:26px;

}


p{

font-size:16px;

}

}