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

:root{

--agt-blue:#5E6C8F;
--agt-orange:#FF8A2B;
--agt-green:#118C0A;

--text-dark:#2a2a2a;
--text-light:#6c757d;

--light-bg:#f7f9fc;

--shadow-soft:0 10px 30px rgba(0,0,0,0.06);
--shadow-hover:0 20px 45px rgba(0,0,0,0.15);

--radius:14px;

--navbar-height:80px;

}

/* ============================= */
/* GLOBAL */
/* ============================= */

body{
font-family:'Montserrat',sans-serif;
color:#2a2a2a;
line-height:1.7;
background:#ffffff;
overflow-x:hidden;
padding-top:80px;
}

h1,h2,h3,h4,h5{
font-weight:700;
}

.section{
padding:120px 0;
}

.section-title{
font-size:40px;
color:#5E6C8F;
margin-bottom:20px;
}

.section-subtitle{
max-width:700px;
margin:auto;
color:#6c757d;
}
.section-title::after{
content:"";
width:60px;
height:4px;
background:#FF8A2B;
display:block;
margin:15px auto 0;
border-radius:4px;
}
/* ============================= */
/* NAVBAR */
/* ============================= */
.navbar-brand img{
height:45px;
}
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
z-index:999;
background:#FF8A2B; /* orange AGT */
box-shadow:0 4px 20px rgba(0,0,0,0.08);
transition:all 0.3s ease;
}

/* garder orange même au scroll */
.navbar.scrolled{
background:#FF8A2B;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.navbar .nav-link{
color:black !important;
font-weight:500;
}

.navbar .nav-link:hover{
color:#5E6C8F !important; /* bleu AGT */
}
/* ============================= */
/* HERO */
/* ============================= */
.hero{
background:#000000;
position:relative;
min-height:calc(100vh - 80px);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
overflow:hidden;
}
.hero-title{
font-size:60px;
font-weight:700;
margin-bottom:20px;
line-height:1.2;
animation:fadeHero 1.4s ease;
max-width:900px;
margin:auto;
margin-bottom:20px;
}
.hero-text{
text-shadow:0 4px 15px rgba(0,0,0,0.45);
font-size:26px;
color:white;
overflow:hidden;
}
/* IMAGES */


.hero-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0.6;
z-index:1;
animation:heroSlider 18s infinite, heroZoom 18s infinite;
}

/* OVERLAY */

.hero::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.25);
z-index:2;
}

/* CONTENU */

.hero-content{
position:relative;
z-index:3;
}
.text-orange{
color:var(--agt-orange);
}
/* ============================= */
/* FOOTER SOCIAL */
/* ============================= */

.footer-social a{

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

width:40px;
height:40px;

background:#222;

border-radius:8px;

margin:5px;

color:#fff;

font-size:16px;

transition:.3s;

}

.footer-social a:hover{

background:#FF8A2B;
transform:translateY(-3px);

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

.btn-agt{
background:var(--agt-orange);
color:white;
padding:14px 32px;
border-radius:8px;
font-weight:600;
border:none;
transition:all 0.3s;
}

.btn-agt:hover{
background:#7a5a40;
transform:translateY(-4px) scale(1.02);
box-shadow:0 18px 40px rgba(0,0,0,0.25);
}
.btn-contact{
background:var(--agt-blue);
color:white;
padding:14px 32px;
border-radius:8px;
font-weight:600;
border:none;
transition:all 0.3s;
}

.btn-contact:hover{
background:#5E6C9F;
transform:translateY(-4px) scale(1.02);
box-shadow:0 18px 40px rgba(0,0,0,0.25);
color:white;
}
.btn-light{
padding:14px 30px;
font-weight:600;
}
.hero-buttons{
margin-top:40px;
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}
/* ============================= */
/* STATISTICS MODERN */
/* ============================= */

.stat-card{

background:white;

padding:18px 20px;

border-radius:12px;

display:flex;

align-items:center;

gap:15px;

box-shadow:0 8px 25px rgba(0,0,0,0.08);

transition:all .3s ease;

}

/* HOVER */

.stat-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,0.15);

}

/* ICON */

.stat-icon{

width:50px;

height:50px;

background:rgba(255,138,43,0.1);

color:var(--agt-orange);

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

font-size:22px;

flex-shrink:0;

}

/* INFO */

.stat-info{
display:flex;
flex-direction:column;
}

/* NUMBER */

.counter{

font-size:28px;

font-weight:700;

color:var(--agt-orange);

margin:0;

line-height:1;

}

/* TEXT */

.stat-info p{

font-size:14px;

color:#6c757d;

margin:0;

}
/* ============================= */
/* SERVICES & PLATFORMS CARDS */
/* ============================= */

.services-section{
background:#ffffff;
}

/* CARD */

.service-card{

background:#fff;

border:2px solid rgba(0,0,0,0.08);

border-radius:14px;

height:100%;

display:flex;

flex-direction:column;

justify-content:space-between;

overflow:hidden;

transition:all .4s ease;

box-shadow:var(--shadow-soft);

}

/* HOVER */

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(0,0,0,0.18);

border:2px solid rgba(255,138,43,0.7);

}

/* CONTENT */

.service-content{

padding:25px;

display:flex;

flex-direction:column;

gap:10px;

flex-grow:1;

}

/* ============================= */
/* TITLE BAR (ICON + TITLE) */
/* ============================= */

.service-title-bar{

background:var(--agt-orange);

display:flex;

align-items:center;

gap:10px;

padding:10px 16px;

border-radius:30px;

margin-bottom:10px;

}

/* ICON */

.service-title-bar .service-icon{

background:white;

color:var(--agt-orange);

width:32px;

height:32px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:14px;

flex-shrink:0;

}

/* TITLE */

.service-title-bar h4{

margin:0;

color:white;

font-size:15px;

font-weight:600;

line-height:1.2;

}
.service-title-agt h2{

margin:0;

color:black;

font-size:30px;

font-weight:600;

line-height:1.2;

}
.agt-bleu{
    color:var(--agt-blue);
}
/* DESCRIPTION */

.service-card p{

color:#555;

font-size:15px;

margin-bottom:10px;

}

/* ============================= */
/* LIST */
/* ============================= */

.service-list{

list-style:none;

padding:0;

margin-bottom:18px;

}

.service-list li{

position:relative;

padding-left:28px;

line-height:1.6;

font-size:14px;

margin-bottom:6px;

color:#555;

}

/* ORANGE CHECK BULLETS */

.service-list li::before{

content:"✔";

position:absolute;

left:0;

top:3px;

width:18px;

height:18px;

background:var(--agt-orange);

color:white;

font-size:11px;

font-weight:bold;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

}

/* BUTTON */

.service-card .btn{

align-self:flex-start;

margin-top:auto;

background:var(--agt-blue);

border:none;

}

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

.service-image{

overflow:hidden;

border-radius:12px;

}

/* IMAGE */

.service-img{

width:100%;

height:210px;

object-fit:cover;

transition:transform 1.2s ease, filter .7s ease;

display:block;

}

/* IMAGE ZOOM EFFECT */

.service-card:hover .service-img{

transform:scale(1.35);

filter:brightness(1.08);

}
/* ============================= */
/* TESTIMONIAL */
/* ============================= */

.testimonial{
background:#5E6C8F;
padding:40px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:0.3s;
height:100%;
}

.testimonial:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

.testimonial p{
font-style:italic;
}

/* ============================= */
/* TEAM */
/* ============================= */

.team-card{
background:white;
padding:35px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
text-align:center;
transition:0.3s;
padding:15px;
overflow:hidden;
}

.team-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

.team-card img{

width:100%;
height:auto;

border-radius:10px;

margin-bottom:15px;

}

.team-role{
color:#5E6C8F;
font-size:14px;
margin-bottom:10px;
}

.team-social a{

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

width:38px;
height:38px;

background:#f5f5f5;

border-radius:8px;

margin:4px;

transition:.3s;

}

.team-social a:hover{

background:#FF8A2B;
color:white;

}
.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:white;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:28px;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
z-index:999;
}

.whatsapp-float:hover{
transform:scale(1.1);
}
/* ============================= */
/* PARTNERS */
/* ============================= */

.partner-logo{
max-height:70px;
opacity:0.7;
transition:all 0.4s;
filter:grayscale(100%);
}

.partner-logo:hover{
opacity:1;
transform:scale(1.12);
filter:grayscale(0);
}
/* ============================= */
/* CTA */
/* ============================= */

.cta{
background:#5E6C8F;
color:white;
padding:110px 0;
text-align:center;
}

.cta h2{
margin-bottom:20px;
}

/* ============================= */
/* FOOTER */
/* ============================= */
.footer{
background:#111;
color:#ccc;
padding:80px 0;
border-top:4px solid #FF8A2B;
}

.footer a{
color:#ccc;
text-decoration:none;
}

.footer a:hover{
color:white;
}

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

.fade-up{
opacity:0;
transform:translateY(30px);
transition:0.6s;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}
/* ============================= */
/* SERVICES RESPONSIVE */
/* ============================= */

@media(max-width:992px){

.service-img{

height:180px;

}

}

@media(max-width:768px){

.service-content{

padding:20px;

}

.service-img{

height:160px;

}

}
/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media(max-width:768px){

.stat-card{
padding:25px 15px;
}

.counter{
font-size:20px;
}

.stat-card p{
font-size:12px;
}

.hero{
padding:120px 20px;
}

.hero-title{
font-size:28px;
}

.hero-text{
font-size:16px;
}

.section{
padding:80px 20px;
}

}
@media(max-width:576px){

.hero-title{
font-size:26px;
}

.hero-buttons{
gap:15px;
}

.btn-agt,
.btn-light,
.btn-contact{
width:100%;
}

}
/* HERO IMAGES ANIMATION */

@keyframes heroSlider{

0%{
background-image:url("../images/hero1.jpg");
}

33%{
background-image:url("../images/hero2.jpg");
}

66%{
background-image:url("../images/hero3.jpg");
}

100%{
background-image:url("../images/hero1.jpg");
}

}
@keyframes heroZoom{

0%{
transform:scale(1);
}

100%{
transform:scale(1.08);
}

}
@keyframes fadeHero{

0%{
opacity:0;
transform:translateY(30px);
}

100%{
opacity:1;
transform:translateY(0);
}

}
@keyframes heroFade{

0%,100%{
opacity:0.55;
}

50%{
opacity:0.65;
}

}