/*==================================================
TERMS & CONDITIONS
Jerucas Transportation
==================================================*/



/* HERO */

.hero-small{

min-height:55vh;

padding-top:150px;

padding-bottom:90px;

background:

linear-gradient(

135deg,

rgba(0,0,0,.92),

rgba(0,0,0,.65)

),

url("mercedes-sprinter-blanc.png");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}



.hero-small h1{

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

margin-bottom:20px;

color:#fff;

}



.hero-small p{

max-width:850px;

margin:auto;

font-size:1.1rem;

color:#ececec;

line-height:1.8;

}





/* INTRO */

.terms-container{

max-width:1200px;

margin:auto;

}



.terms-container h2{

font-size:2.2rem;

margin-bottom:15px;

color:var(--gold);

}



.terms-container h3{

margin-top:30px;

margin-bottom:15px;

color:#111;

font-size:1.25rem;

}



.terms-container p{

margin-bottom:18px;

line-height:1.9;

font-size:1rem;

color:#444;

}



.terms-container ul{

margin-left:28px;

margin-bottom:25px;

}



.terms-container li{

margin-bottom:12px;

line-height:1.8;

}





/* QUICK INDEX */

.terms-index{

background:#fff;

padding:40px;

border-radius:22px;

box-shadow:

0 15px 50px rgba(0,0,0,.08);

margin-top:50px;

margin-bottom:70px;

}



.terms-index h3{

margin-bottom:25px;

color:#111;

}



.terms-index ul{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:12px;

list-style:none;

margin:0;

padding:0;

}



.terms-index li{

margin:0;

}



.terms-index a{

display:block;

padding:14px 18px;

background:#fafafa;

border-radius:12px;

transition:.25s;

font-weight:700;

}



.terms-index a:hover{

background:var(--gold);

color:#000;

transform:translateX(6px);

}



/* TERMS CARDS */

.terms-card{

background:#fff;

padding:45px;

margin-bottom:35px;

border-radius:26px;

box-shadow:

0 18px 60px rgba(0,0,0,.08);

border-left:6px solid var(--gold);

transition:.35s;

}



.terms-card:hover{

transform:translateY(-6px);

box-shadow:

0 25px 80px rgba(0,0,0,.14);

}



.terms-card h2{

margin-bottom:20px;

font-size:2rem;

}



.terms-card h3{

margin-top:30px;

color:var(--gold-dark);

}



.terms-card hr{

margin:35px 0;

border:none;

height:1px;

background:#ececec;

}


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

.contact-box{

margin-top:30px;

padding:35px;

background:linear-gradient(
135deg,
#111,
#1b1b1b
);

color:#fff;

border-radius:24px;

border:1px solid rgba(212,175,55,.25);

box-shadow:

0 20px 60px rgba(0,0,0,.18);

}

.contact-box h3{

color:var(--gold);

margin-bottom:25px;

font-size:1.8rem;

}

.contact-box p{

color:#f5f5f5;

margin-bottom:20px;

font-size:1rem;

line-height:1.8;

}

.contact-box strong{

color:var(--gold);

}



/*==================================================
CALL TO ACTION
==================================================*/

.dark-section{

position:relative;

overflow:hidden;

}



.dark-section::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:320px;

height:320px;

border-radius:50%;

background:

rgba(212,175,55,.05);

}



.dark-section::after{

content:"";

position:absolute;

bottom:-120px;

left:-120px;

width:280px;

height:280px;

border-radius:50%;

background:

rgba(212,175,55,.04);

}



.dark-section .section-heading{

position:relative;

z-index:2;

}



.dark-section h2{

color:#fff;

font-size:clamp(2.4rem,5vw,4rem);

margin-bottom:25px;

}



.dark-section p{

color:#ddd;

margin-bottom:35px;

font-size:1.15rem;

}



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

.dark-section .btn{

padding:18px 38px;

font-size:1.05rem;

box-shadow:

0 15px 40px rgba(212,175,55,.30);

}

.dark-section .btn:hover{

transform:

translateY(-4px);

}


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

.site-footer{

margin-top:0;

}


.site-footer h3{

margin-bottom:18px;

color:var(--gold);

}


.site-footer p{

color:#ddd;

line-height:1.8;

}


.site-footer img{

filter:

drop-shadow(

0 8px 30px rgba(0,0,0,.25)

);

}


/*==================================================
LINKS
==================================================*/

.terms-card a{

color:var(--gold-dark);

font-weight:700;

transition:.25s;

}


.terms-card a:hover{

color:var(--gold);

}


/*==================================================
SPANISH BLOCK
==================================================*/

.terms-card h3{

padding-top:10px;

border-top:

1px dashed #ddd;

}


/*==================================================
SCROLL OFFSET
==================================================*/

html{

scroll-padding-top:120px;

}


/*==================================================
ACTIVE MENU
==================================================*/

.nav a.active{

color:var(--gold);

}


/*==================================================
SMOOTH FADE
==================================================*/

.terms-card{

opacity:0;

transform:

translateY(50px);

animation:

fadeUp .8s ease forwards;

}

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

animation-delay:.10s;

}

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

animation-delay:.20s;

}

.terms-card:nth-child(4){

animation-delay:.30s;

}


.terms-card:nth-child(5){

animation-delay:.40s;

}


.terms-card:nth-child(6){

animation-delay:.50s;

}


@keyframes fadeUp{

to{

opacity:1;

transform:

translateY(0);

}

}


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

@media(max-width:980px){

.terms-index ul{

grid-template-columns:1fr;

}

.terms-card{

padding:30px;

}

.hero-small{

padding-top:130px;

}

}



@media(max-width:768px){

.hero-small h1{

font-size:2.7rem;

}

.terms-card h2{

font-size:1.55rem;

}

.contact-box{

padding:25px;

}

}



@media(max-width:560px){

.terms-index{

padding:25px;

}

.terms-index a{

font-size:.95rem;

}

.terms-card{

padding:22px;

border-left:4px solid var(--gold);

}

.terms-card p{

font-size:.95rem;

line-height:1.75;

}

.dark-section h2{

font-size:2rem;

}

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

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:var(--gold);

color:#111;

font-size:24px;

font-weight:bold;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.30s;

box-shadow:

0 10px 30px rgba(0,0,0,.20);

z-index:999;

}


#backToTop.show{

opacity:1;

visibility:visible;

}


#backToTop:hover{

transform:

translateY(-5px);

background:var(--gold-dark);

}

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

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:var(--gold);

color:#111;

font-size:24px;

font-weight:bold;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.30s;

box-shadow:

0 10px 30px rgba(0,0,0,.20);

z-index:999;

}


#backToTop.show{

opacity:1;

visibility:visible;

}

#backToTop:hover{

transform:

translateY(-5px);

background:var(--gold-dark);

}