/* CSS Document */
/* lime #dbff00*/
:root {
    --primary: #000;
    --secondary: #555555;
    --border: rgba(17, 17, 17, 0.1);
    --bg: #111111;
    --theme: #FF6A3A;
    --black: #111111;
    --black-2: #999999;
    --white: #FFFFFF;
    --white-2: #999999;
    --action: #FF6A3A;
}

.color-black{color: #000 !important;}
.color-lime{color: #ffffff !important;}
.color-blu{color:rgb(59 142 254) !important}
.bg-lime{ background-color: #dbff00;}
.header-area .main-menu li a:hover { color: rgb(59 142 254);}
.btn-lime:hover{background-color: #dbff00 !important; color:#000 !important;}
.header-area .header__logo img { max-width: 180px;}
.header-area .main-menu li a { font-size: 20px;}
.size100-clamp{font-size: clamp(20px, 6vw, 50px);}
.radial-bg{background-image: radial-gradient(#dbff00, #ffffff);}
.hero-area { 
	background-image: inherit;
	position: relative;
    z-index: 1;
	/*background-color: #dbff00; */
	font-style:inherit;
	height:1080px !important; /* L'altezza si adatta al contenuto */
  
}
.hero-area::after {
    content: ""; /* Obbligatorio per gli pseudo-elementi */
    position: absolute; /* Copre esattamente l'area del genitore (.hero-area) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 1. L'APPLICAZIONE DEL GRADIENTE RADIALE */
    /* Inizia con un giallo semi-opaco e sfuma verso la completa trasparenza */
    background-image: radial-gradient(
        circle,#ffff00d1, #ffffffc4 
    );
    
    /* 2. MANTIENE IL GRADIENTE SOPRA IL VIDEO MA SOTTO IL CONTENUTO */
    /* Il video è z-index: -1, il contenuto è z-index: 1. Questo deve stare nel mezzo. */
    z-index: -1; 
}
.hero-area .big-text {
  font-size: 500px;
  font-weight: 700;
  line-height: 0.477;
  letter-spacing: -0.02em;
}
.client-area .client-box { width: 175px;height: 80px;
	padding: 5px 10px;
    background-color: transparent;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
	border:solid #999 1px;
}
.client-area .line2 {
    border-bottom: 1px solid #dbff00;
}

.header-area .header__logo {border: 0px solid var(--border);}
.header-area .header__nav {border: 0px solid var(--border);}

.hero-area .section-title {font-size: 80px; font-weight: 700; line-height: 0.9; max-width: 660px;}

.rr-btn {
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 5;
    padding: 26px 42px;
    background-color: #dbff00;
    color: #000000;
    border: 0px solid #dbff00;
    border-radius: 100px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    text-transform: capitalize;
    letter-spacing: -0.02em;
}
.rr-btn .btn-wrap .text-one {
    position: relative;
    display: block;
    color: #000000;;
    transition: all 0.5s;
}
.btn-lime:hover {
    background-color: #000 !important;
    color: #dbff00 !important;
    border: 0px solid #dbff00;
}
.hero-area .hero-content {
    display: grid;
    gap: 40px 100px;
    grid-template-columns: 130px 1fr 560px;
    margin-top: 61px;
    margin-bottom: 210px;
}
.hero-area .feature-box .number {
    font-size: 100px;
    font-weight: 500;
    line-height: 0.72;
    display: inline-block;
    color: var(--primary);
}
.hero-area .feature-box .text {
    font-size: 19px;
    font-weight: 500;
    line-height: 21px;
    color: var(--primary);
    margin-top: 21px;
	text-align:left;
}
.hero-area .text-wrapper .text {
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: var(--primary);
    max-width: 490px;
}

.about-area .section-content .text {
    font-size: 40px;
    font-weight: 200;
    line-height: 1.26;
    letter-spacing: 0em;
    max-width: 950px;
    color: var(--primary);
    margin-inline: auto;
}

.footer-area .footer-top-inner .info-text .text {
    max-width: 510px;
    font-size: 30px;
    line-height: 1.26;
    color: var(--primary);
    font-weight: 200;
}

.client-area .section-title span {
    color: #3b8efe;
}

.bg-theme2 {
    background-color: #dbff00 !important;
}

.bg-theme3 {
    background-color: #3b8efe !important;
}

.productivity-area .section-title span {
    color: #3b8efe;
    display: inline-block;
}

.hero-area .big-text {color: #000;}

footer {background-color:#dbff00;}

@media only screen and (max-width: 1919px) {
  .hero-area { height:787px !important; }
  .hero-area .big-text { font-size: 400px;}
  .section-title {font-size: 50px; }
}
@media only screen and (max-width: 1399px) {
  .hero-area { height:720px !important; }
  .hero-area .big-text { font-size: 350px; }
  .section-title {font-size: 40px; }
}
@media only screen and (max-width: 1199px) {
  .hero-area { height:1080px !important; }
  .hero-area .big-text { display: none;}
  .client-area .client-box { width: 135px;height: 50px;padding: 5px 10px;}
  .section-title {font-size: 30px; }
}
@media only screen and (max-width: 767px) {
	.award-wrapper{ display:none !important;}
	.hero-area .hero-content {display: grid; gap: 40px 100px; grid-template-columns: none; margin-top: 61px; margin-bottom: 210px;}
	.award-wrapper {display: inherit !important;}
	.about-area .section-content .text {font-size: 22px; font-weight: 200; line-height: 1.26; letter-spacing: 0em; max-width: 950px; color: var(--primary); margin-inline: auto;}
	.hero-area .big-text {display: inherit;}
    .hero-area .big-text {font-size: 50px; text-align: center;}
	.client-area .client-capsule-wrapper {height: 610px;}
	.section-spacing-top-loghi {padding-top: 0px;}
	.about-area .section-title {
        font-size: 120px;
    }
}
.hero-area .award-wrapper .circle-text-wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: transparent;
}
.about-area-inner {
    height: 68vh;
}

/* Stili per il contenitore del video */
.video-background {
  position: relative; /* Importante per posizionare il video all'interno */
  width: 100%;
  height: 100vh; /* Esempio: occupa l'intera altezza della viewport */
  /*overflow: hidden;*/ /* Nasconde le parti del video che escono dal contenitore */
  /* Se vuoi aggiungere del contenuto sopra il video, usa z-index */
  /* background-color: #000; /* Colore di fallback se il video non carica */
}
/* Stili per il tag video */
.video-background video {
  position: absolute; /* Posiziona il video rispetto al suo genitore (.video-background) */
  top: 50%; /* Sposta il video del 50% dal top */
  left: 50%; /* Sposta il video del 50% da sinistra */
  min-width: 100%; /* Assicura che il video copra sempre la larghezza minima */
  min-height: 100%; /* Assicura che il video copra sempre l'altezza minima */
  width: auto; /* Permette al video di scalare in larghezza */
  height: auto; /* Permette al video di scalare in altezza */
  z-index: -1; /* Mette il video dietro a qualsiasi altro contenuto nel div */
  transform: translate(-50%, -50%); /* Centra il video perfettamente */
  object-fit: cover; /* Assicura che il video copra il contenitore tagliando gli eccessi */
}
/* Stili per il contenuto sopra il video (opzionale) */
.video-background .content {
  position: relative;
  z-index: 1; /* Assicura che il contenuto sia sopra il video */
  color: white; /* Colore del testo per contrasto */
  text-align: center;
  padding: 20px;
  /* Altri stili per il tuo contenuto... */
}
.service-area-service-page .services-wrapper-2 .service-box-wrapper {
    background-color:#dbff00 !important;
}

.title-footer{ font-size:24px;}

.rr-btn.hover-bg-theme::before { background-color: #dbff00 !important; color:#000000 !important;}
.rr-btn .btn-wrap .text-two {color: #000000 !important;transition: all 0.5s;}

/*
@media only screen and (max-width: 1399px) {
    .section-spacing {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}*/


@media only screen and (max-width: 1199px) {
    .hero-area .section-title {
        max-width: 590px;
    }
}
@media only screen and (max-width: 1399px) {
    .hero-area .section-title {
        font-size: 50px;
        max-width: 340px;
    }
}
@media only screen and (max-width: 1919px) {
    .hero-area .section-title {
        font-size: 40px;
    }
	    .hero-area .feature-box .number {
        font-size: 50px;
    }
	.video-background .content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: left;
    padding: 0px;
}
}