/* ! Reset */
body, 
html {font-family: var(--font-primary); font-optical-sizing: auto; line-height: 1; font-size: 62.5%; box-sizing: border-box; margin: 0; padding: 0;}
*,
*:before,
*:after {box-sizing: border-box;}
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0; padding: 0;}
ol,ul{line-height: 1.5; list-style: none;}
img, video{display: block; max-width: 100%; height: auto;}
h1{font-size: 4rem;} 
h2{font-size: 3.4rem;}
h3{font-size: 2.6rem;} 
h4{font-size: 2rem;}
h5{font-size: 0.8rem;} 
h6{font-size: 0.6rem;}
p{font-size: 2rem;}
a{text-decoration:none; color: inherit; transition: .3s ease-in-out;}
button {font-family: inherit; padding: 0; background-color: transparent; border: none; cursor: pointer;}

body {background-color: var(--night);}

::-webkit-scrollbar {width: 8px; height: initial;}
::-webkit-scrollbar-thumb {background: #FF9A42; background: linear-gradient(0deg,rgba(255, 154, 66, 1) 0%, rgba(237, 86, 201, 1) 50%, rgba(54, 94, 207, 1) 100%); border-radius: 100px;}

:root {

    /* ! Color */
    --byzantineBlue: #365ECF;
    --purplePyzzazz: #ED56C9;
    --sandyBrown: #FF9A42;
    --night: #111117;
    --ghostWhite: #EBEFFA;
    --seaShell: #FFF5EC;
    --gray: #61616A;
    --success: #07a312;
    --error: #bf0b0b;

    /* ! Fonts */
    --font-primary: "Inter", sans-serif;
    --font-title: "Sora", sans-serif;

    --fs-xl: clamp(3.5rem, 4.8vw, 4.8rem);
    --fs-lg: clamp(2.8rem, 3.8vw, 3.8rem);
    --fs-text: clamp(1.6rem, 2vw, 2rem);
    --fs-sm: clamp(1.6rem, 1.6vw, 1.6rem);
    --fs-xsm: clamp(1.4rem, 1.4vw, 1.4rem);

    /* ! Background Images */
    --bgHero: url(../images/hero-background.webp);
    --bgPaolo: url(../images/paolo.webp);
    --bgProgettazione: url(../images/progettazione-background.webp);
    --bgMetodo: url(../images/metodo-background.webp);
    --bgContatti: url(../images/contattami-banner-background.webp);

}

/* ! CTA */
.cta {display: inline-block; font-size: 1.6rem; font-weight: 500; text-align: center; color: var(--ghostWhite); padding: 2rem 7rem; border: 1px solid var(--purplePyzzazz); position: relative; overflow: hidden; cursor: pointer; transition: color .3s ease-in-out, border-color .3s ease-in-out;}
.cta span {position: relative; z-index: 1;}
.cta::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--purplePyzzazz); z-index: 0; transition: width .3s ease-in-out;}
.cta:hover::before {width: 100%;}

@media (max-width: 768px) {

    .cta {font-size: 1.4rem; padding: 1.3rem 2.8rem;}

}

/* ! Form */
form,
input,
textarea,
select {width: 100%;}

input[type="checkbox"] {width: 14px; height: 14px; margin: 0;}

label {display: inline-block;}

textarea {resize: none;}

input,
textarea,
select {font-family: inherit; font-size: clamp(1.4rem, 1.6vw, 1.6rem); color: var(--night); padding: 2rem 1.6rem; border: 1px solid var(--sandyBrown); background: transparent;}

input::placeholder,
textarea::placeholder {color: var(--gray);}

input:focus-visible::placeholder,
textarea:focus-visible::placeholder {visibility: hidden;}

input:focus-visible,
textarea:focus-visible {outline: none;}

select {color: var(--night);}
select:focus-visible {outline: none;}

/* ! Font */
.text-xl {font-family: var(--font-title); font-size: var(--fs-xl); line-height: 1.2;}
.text-lg {font-family: var(--font-title); font-size: var(--fs-lg); line-height: 1.2;}
.text {font-size: var(--fs-text); line-height: 1.3;}
.text-sm {font-size: var(--fs-sm); line-height: 1.2;}
.text-xsm {font-size: var(--fs-xsm); line-height: 1.;}

/* ! Grid System */
.container { display: flex; flex-flow: row; max-width: 1400px; margin: 0 auto; padding: 0 1rem;}
.container--center{justify-content: center;}

[class*='col-'] { position: relative; padding: 0 1rem;}
.container .container [class*='col-'] {padding: 0px;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-40{ width: 40%; }
.col-50{ width: 50%; }
.col-60{ width: 60%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-90{ width: 90%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
}

/* ! Animazioni allo scroll */

.scroll-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ! Header */

.header {width: 100%; position: fixed; top: 0; left: 0; right: 0; transition: top 0.3s ease, background-color 0.3s ease, padding 0.3s ease; z-index: 1000;}
.header.hidden {top: -150px;}
.header.show {background-color: var(--night);}
.header__content {max-width: 1400px; margin: 0 auto; padding: 2rem; display: flex; justify-content: space-between; align-items: center;}

.logo {width: 226px; z-index: 1;}

.header__menu > ul > li {display: inline-block; position: relative;}
.header__menu > ul > li > a {display: inline-block; position: relative; font-size: 1.6rem; font-weight: 400; color: var(--ghostWhite); padding: 1.5rem; transition: all .3s ease-in-out;}
.header__menu > ul > li > a:hover {color: var(--purplePyzzazz);}
.header__menu > ul > li > a.active {color: var(--purplePyzzazz);}

.header__burger {display: none;}

@media (max-width: 768px) {

    .logo {width: 158px;}
    
    .header__menu {position: absolute; width: 100%; height: 100vh; top: 0; right: 0; background-color: var(--night); overflow-y: auto; transform: translateY(-100%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease;}
    .open .header__menu {transform: translateY(0); opacity: 1;}
    .header__menu > ul {width: 100%; margin-top: 130px;}
    .header__menu > ul  > li {display: block;}
    .header__menu > ul  > li > a {font-size: 3rem; padding: 0 0 4rem 1.5rem;}

    .header__burger {display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: absolute; width: 40px; height: 40px; top: 1.5rem; right: 1rem; padding: 0.8rem 0; cursor: pointer;}
    .header__burger span {position: absolute; width: 30px; height: 2px; background-color: var(--ghostWhite); left: 50%; transform: translate(-50%);}
    .header__burger span:nth-child(1) {top: 10px;}
    .header__burger span:nth-child(2) {top: 50%; transform: translate(-50%, -50%);}
    .header__burger span:nth-child(3) {bottom: 10px;}

    .open .header__burger span:nth-child(1) {transform: translate(-50%, 0) rotate(45deg); top: 50%;}
    .open .header__burger span:nth-child(2) {opacity: 0;}
    .open .header__burger span:nth-child(3) {transform: translate(-50%, 0) rotate(-45deg); top: 50%;}

}

/* ! Hero */

.hero {width: 100%; height: 100vh; position: relative; background: var(--bgHero) no-repeat center center; background-size: cover; z-index: 1;}
.hero::before {content: ""; position: absolute; width: 100%; height: 100%; background: var(--night); mix-blend-mode: multiply; pointer-events: none; z-index: -1;}
.hero__img img {width: 60%; margin: 0 auto; border: solid 4px var(--ghostWhite);}

@media (max-width: 768px) {
    .hero__img {display: none;}
}

/* ! Servizi */

.servizi-card {min-height: 400px; padding: 6rem 2rem; background: var(--byzantineBlue); transition: .3s ease-in-out;}
.servizi-card:hover {margin-top: -1.5rem;}
#sviluppo-home {margin-top: 6rem;}
#sviluppo-home:hover {margin-top: 4.5rem;}

@media (max-width: 992px) {
    #sviluppo-home {margin-top: 0;}
}

.contatti-home {position: relative; width: 100%; background: url(../images/contattami-banner-background.webp) no-repeat center center; background-size: cover; z-index: 1;}
.contatti-home::before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; background: var(--night); mix-blend-mode: hard-light; pointer-events: none; z-index: -1;}

/* ! Footer */

/* ! Accessibilità per il copyright del footer */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.footer-sitemap > ul > li > a.active {color: var(--purplePyzzazz);}

@media (max-width: 992px) {
    .footer-info,
    .footer-sitemap {margin-bottom: 5rem;}
}

@media (max-width: 768px) {
    .footer-privacy {margin-bottom: 5rem;}
}

/* ! Cover */
.cover {position: relative; width: 100%; height: 600px; z-index: 1;}
.cover::before {content: ""; position: absolute; width: 100%; height: 100%; background: var(--night); opacity: 0.95; pointer-events: none; z-index: -1;}
.cover--paolo {background: var(--bgPaolo) no-repeat center top; background-size: cover;}
.cover--progettazione {background: var(--bgProgettazione) no-repeat center top; background-size: cover;}
.cover--sviluppo {background: var(--bgHero) no-repeat center center; background-size: cover;}
.cover--contatti {background: var(--bgContatti) no-repeat center center; background-size: cover;}

#wireframe,
#sviluppo {margin-top: 6rem;}

@media (max-width: 992px) {

    #wireframe,
    #sviluppo {margin-top: 0;}
}

.metodo {position: relative; width: 100%; background: var(--bgMetodo) no-repeat center center; background-size: cover; z-index: 1;}
.metodo::before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; background: var(--seaShell); opacity: 0.9; pointer-events: none; z-index: -1;}

@media (max-width: 992px) {
    .analisi,
    .progettazione {margin-bottom: 3rem;}
}

@media (max-width: 768px) {
    .sviluppo {margin-bottom: 3rem;}
}

.faq__title {position: sticky; top: 8rem;}
.faq__accordion-header {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.8rem; text-align: left;}
.faq__accordion-icon {width: 26px; height: 26px; position: relative; display: flex; justify-content: center; align-items: center;}
.faq__accordion-icon .line {position: absolute; width: 15px; height: 2px; background-color: var(--purplePyzzazz);}
.faq__accordion-icon .line-1 {transform: rotate(0deg); transition: .3s ease;}
.faq__accordion-icon .line-2 {transform: rotate(90deg); transition: .3s ease;}
.faq__accordion-item.faq__accordion-active .faq__accordion-icon .line-1 {transform: rotate(45deg);}
.faq__accordion-item.faq__accordion-active .faq__accordion-icon .line-2 {transform: rotate(-45deg);}
.faq__accordion-body {padding: 0 1.8rem 1.8rem 1.8rem; background-color: var(--white); display: none; transition: .3s ease;}
.faq__accordion-item.faq__accordion-active .faq__accordion-body {display: block;}

@media (max-width: 768px) {
    .faq__title {margin-bottom: 3rem;}
}

@media (max-width: 768px) {
  form .cta {width: 100%; font-size: 1.6rem; padding: 2rem;}
}
/*-------------------------- Helpers --------------------------------------------------------*/

/* ! Color */

.blue {color: var(--byzantineBlue);}
.purple {color: var(--purplePyzzazz);}
.orange {color: var(--sandyBrown);}
.black {color: var(--night);}
.white {color: var(--ghostWhite);}
.seashell {color: var(--seaShell);}
.success {color: var(--success);}
.error {color: var(--error);}

/* ! Background Color */
.bg-blue {background-color: var(--byzantineBlue);}
.bg-white {background-color: var(--ghostWhite);}
.bg-seashell {background-color: var(--seaShell);}

/* ! Border */
.border-success {border: solid 1px var(--success); padding: 12px;}
.border-error {border: solid 1px var(--error); padding: 12px;}

/* ! Font Weight */
.fw-regular {font-weight: 400;}
.fw-medium {font-weight: 500;}
.fw-semibold {font-weight: 600;}
.fw-bold {font-weight: 700;}

/* ! Text Align */
.text-center {text-align: center;}
.text-right {text-align: right;}

/* ! Text Decoration */
.tdu {text-decoration: underline;}
.hover-purple:hover {color: var(--purplePyzzazz);}
.hover-white:hover {color: var(--ghostWhite);}
.list-style-disc {list-style: disc;}

/* ! Text Transform */
.ttu {text-transform: uppercase;}

/* ! Layout */
.d-flex {display: flex;}
.wrap {flex-wrap: wrap;}
.align-items-center {align-items: center;}
.j-content-center {justify-content: center;}

.flow-column {flex-flow: column;}

.w-100 {width: 100%;}
.h-100 {height: 100%;}

@media (max-width: 768px) {
    .column-reverse {flex-direction: column-reverse;}
}

/* ! Margin e Padding */

.mt-5 {margin-top: 5px;}
.mt-8 {margin-top: 8px;}
.mt-10 {margin-top: 10px;}
.mt-12 {margin-top: 12px;}
.mt-16 {margin-top: 16px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}

.mb-8 {margin-bottom: 8px;}
.mb-10 {margin-bottom: 10px;}
.mb-12 {margin-bottom: 12px;}
.mb-16 {margin-bottom: 16px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-60 {margin-bottom: 60px;}

.ml-6 {margin-left: 6px;}
.ml-8 {margin-left: 8px;}

.mr-8 {margin-right: 8px;}

.m-auto {margin: 0 auto;}

.py-80 {padding: 8rem 0;}