html {font-family: 'Raleway', Arial, Helvetica, sans-serif;scroll-behavior:smooth; line-height: 1.3; color:rgb(var(--color-text))}
body {margin:0; padding:0; rgb(var(--color-text))}
h1 {font-size:16px; color:inherit; font-weight: 400;} 
h2 {font-size:22px; color:inherit} 
h3 {font-size:22px; color:inherit}
p {font-size:16px; color: inherit;}
footer {box-sizing:border-box; background-color:rgb(var(--color-menu-back));color:rgb(var(--color-text));font-size:12px;display:flex;justify-content:center;align-items:center;padding:10px 10px;}  
footer a{font-size:12px;color:rgb(var(--color-text));text-decoration:underline}  
footer span{margin:0px 5px}
li {margin:10px 0px}
details {background-color: #f8f8f8; border: 1px solid #d8d8d8; padding: 10px; margin-bottom: 5px;}
details li {font-size: 14px}
summary {font-weight:500;cursor: pointer;}

.cta-button {background-color:rgb(var(--color-cta-back-1)); color:rgb(var(--color-cta-text)); font-size:16px; font-weight:500; text-align:center; padding:10px 18px; border-radius:12px; display:inline-block; cursor:pointer; margin: 10px 0 0 0px; border:none; text-decoration:none;}
.cta-button:hover,.cta-button:focus,.cta-button:visited {color:rgb(var(--color-cta-text)); text-decoration: none;}
.text-highlight{color:rgb(var(--color-brand)); font-weight: bold}
.link-contacts {background-color:rgb(var(--color-cta-back-1)); color:rgb(var(--color-cta-text)); font-size:12px; font-weight:400; text-align:center; padding:5px 10px; border-radius:12px; display:inline-block; cursor:pointer; margin:0px; border:none; text-decoration:none;}
.link-contacts:hover,.link-contacts:focus,.link-contacts:visited {color:rgb(var(--color-cta-text)); text-decoration: none;}
.d-only {display: inline;}
.m-only {display: none;}
.form-contact{position:relative; border:solid 0px red; margin:0px 0px 0px 0px; padding: 60px 60px; background-color:rgb(var(--color-form-contact-back)); color:rgb(var(--color-form-contact-text))}
.FAQ{padding:60px 60px; background-color:(--color-psychology-main-back); color:rgb(var(--color-text))}
.FAQ-category{font-size:14px; font-weight:bold}

.about-hero-text{color:rgb(var(--color-text))}
.about-background-title {font-size:16px; margin: 20px 0px 5px 0px;}
.about-background-school {font-size:14px; margin: 0; color:rgb(var(--color-text-light))}
.about-logo {border:solid 0px red; width: 160px; height: 80px; background-size: contain; background-position: center; background-repeat: no-repeat;}

.services-card-private {background-color:rgb(var(--color-services-private-card-back)); color:rgb(var(--color-services-card-text)); font-size:14px; font-weight:400; text-align:center; padding:5px 15px; border-radius:10px; display:inline-block; cursor:default; margin: 60px 60px 0px 60px; border:none; text-decoration:none;}
.services-card-business {background-color:rgb(var(--color-services-business-card-back)); color:rgb(var(--color-services-card-text)); font-size:14px; font-weight:400; text-align:center; padding:5px 15px; border-radius:10px; display:inline-block; cursor:default; margin: 5px 60px; border:none; text-decoration:none;}
.service-box-private{display:flex} .service-box-business{display:flex}
.service{border:solid 0px rgb(var(--color-services-border)); border-radius:15px; display:flex; max-width:40%; margin:10px 60px 30px 60px; box-sizing:border-box}
.service-text{border: solid 0px green; width:60%; padding: 20px 20px; box-sizing:border-box; background-color:rgb(var(--color-services-desc-back)); border-radius:15px 0px 0px 15px}
.service-image{border: solid 0px blue; width:40%; min-height: 200px; box-sizing:border-box; border-radius:0 15px 15px 0;background-size:cover; background-repeat:no-repeat; background-position:bottom center}

.psychology-main {border:solid 0px green; display:flex; flex-direction:row; flex-wrap:wrap; align-items: stretch; margin:60px 0px; padding: 60px 30px; background-color:rgb(var(--color-psychology-main-back));}
.psychology-main-text{border:solid 0px red;width: 50%; color:rgb(var(--color-text)); box-sizing:border-box}
.psychology-main-image{border:solid 0px blue;width: 50%; min-height:500px; background-size:cover; background-repeat:no-repeat; background-position:center center;box-sizing:border-box}

.professionals-main {border:solid 0px green; display:flex; margin:60px 0px; padding: 60px 30px; background-color:rgb(var(--color-psychology-main-back));}
.professionals-main-text{border:solid 0px red;width: 50%; color:rgb(var(--color-text)); box-sizing:border-box}
.professionals-main-image{border:solid 0px blue;width: 50%; min-height:500px; background-size:cover; background-repeat:no-repeat; background-position:center center;box-sizing:border-box}

#about-hero-section {border:solid 0px blue; margin-top: 40px; height: 80vh; display: flex; flex-direction: row; flex-wrap:wrap; width=100%; background-color: rgb(var(--color-about-hero-background));}
#about-hero-image {border:solid 0px red; order:1; flex:1; background-size:cover; background-repeat:no-repeat; background-position:top center; background-image: var(--img-about-pietro-d)}
#about-hero-text {border:solid 0px red; order:2; flex:1; padding:30px 30px; display:flex; flex-direction: column; justify-content:center; align-items:center; text-align: center;}
#about-bio-story-hero p {font-size:16px}
#about-bio_collaborations {margin: 0px 60px; display:flex; flex-direction: row; justify-content:center; align-items:top;}
#about-bio-story {border:solid 0px red; padding: 30px 30px; order: 1; flex:1; background-color: rgb(var(--color-about-hero-background));}
#about-bio-uni   {border:solid 0px red; padding: 30px 30px; order: 2; flex:1;}
#about-bio-cer   {border:solid 0px red; padding: 30px 30px; order: 3; flex:1;}
#about-collaborations   {margin: 0px 0px; padding: 30px 30px; display:flex; flex-direction:column; justify-content: flex-start; text-align:center; order: 4; flex:1;}
#about-logolist {border: solid 0px blue; display:grid; grid-template-columns:repeat(3, 1fr); column-gap: 30px; row-gap: 10px; box-sizing:border-box; max-width:100%}
#about-cta{width: 100%; display:flex; justify-content:center}

#TEHA{background-image:var(--logo-TEHA)}
#SkillFactor{background-image:var(--logo-SkillFactor)}
#InnovationLab{background-image:var(--logo-InnovationLab)}
#Base9{background-image:var(--logo-Base9)}
#Sherpa42{background-image:var(--logo-Sherpa42)}
#Guzzetti{background-image:var(--logo-Guzzetti)}
#UniBS{background-image:var(--logo-UniBS)}
#UniBG{background-image:var(--logo-UniBG)}
#UniPD{background-image:var(--logo-UniPD)}

#service-main{background-color:rgb(var(--color-services-main-back))}
#services-intro{border:solid 0px red; margin:35px 0px 0px 0px; padding:50px 60px; text-align:center; color:rgb(var(--color-services-main-text)); background-color:rgb(var(--color-services-intro-back))}
#psychology-img{background-image: var(--img-psychology)}
#professionals-img{background-image: var(--img-professionals)}
#people-img{background-image: var(--img-people)}
#data-img{background-image: var(--img-data)}

#psychology-hero-section {border:solid 0px blue; margin-top:40px; height: 80vh; display: flex; width=100%; background-size:cover; background-repeat:no-repeat; background-position:top center; background-image: var(--img-psychology-hero-d); display:flex; justify-content:center; align-items:center; text-align:center;}
#psychology-hero-text {border:solid 0px blue; display:flex; justify-content:center; align-items:center; text-align:center; color:rgb(var(--color-psychology-hero-text)); font-weight:400; font-size: 30px}
#psychology-main-text-1 {padding:30px 90px 30px 30px}
#psychology-main-text-2 {padding:30px 30px 30px 30px}
#psychology-main-text-3 {padding:30px 90px 30px 30px;}
#psychology-main-image-1 {background-image:var(--img-psychology-1)}
#psychology-main-image-2 {background-image:var(--img-psychology-2)}
#psychology-main-image-3 {background-image:var(--img-psychology-3)}

#professionals-hero-section {border:solid 0px blue; margin-top: 40px; height: 80vh; display: flex; width=100%; background-size:cover; background-repeat:no-repeat; background-position:top center; background-image: var(--img-professionals-hero-d); display:flex; justify-content:center; align-items:center; text-align: center;}
#professionals-hero-text {display:flex; justify-content:center; align-items:center; text-align:center; color:rgb(var(--color-psychology-hero-text)); font-weight:400; font-size: 30px}
#professionals-main-text-1 {padding:30px 90px 30px 30px}
#professionals-main-text-2 {padding:30px 30px 30px 30px}
#professionals-main-text-3 {padding:30px 90px 30px 30px;}
#professionals-main-image-1 {background-image:var(--img-professionals-1)}
#professionals-main-image-2 {background-image:var(--img-professionals-2)}
#professionals-main-image-3 {background-image:var(--img-professionals-3)}

#contacts-main{padding: 60px 30px; display:flex; flex-direction: row; background-color:rgb(var(--color-form-contact-back))}
#contact-form{flex:1}
#location-container {border:solid 0px green; display:flex; flex:1; flex-direction:column; margin:60px 0px; padding: 0px 30px; background-color:rgb(var(--color-form-contact-back));}
#map {width:100%; height: 100%}
#map iframe {width:100%; height:100%; border:none}


.navbar{box-sizing:border-box;display:flex;justify-content:center;align-items:center;background-color:rgb(var(--color-menu-back));color:rgb(var(--color-text));height:60px;padding:5px 0; position:fixed;width:100%;top:0;z-index:1000}  
.logo{display:flex;flex:1;width:100px;height:40px;background-image:var(--logo);background-size:contain;background-position:center;background-repeat:no-repeat}  
.menu{display:flex;flex:9;justify-content:center;list-style:none;margin-left:-250px;gap:20px}  
.menu>li{position:relative}  
.menu>li>a, .submenu li a{color:rgb(var(--color-text));text-decoration:none;padding:5px 10px;display:block;text-align:center;border:1px solid rgb(var(--color-menu-back));border-radius:15px;background-color:rgb(var(--color-background));font-size:16px;font-weight:bold; white-space:nowrap}  
.menu>li>a:hover, .submenu li a:hover{background-color:rgb(var(--color-brand));color:rgb(var(--color-menu-back))}  
.menu>li:hover .submenu{display:flex}  
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}  
.hamburger div{width:25px;height:3px;background-color:rgb(var(--color-text))}  




@media (max-width: 768px) {

h1 {font-size:12px;}
h2 {font-size:20px; color:inherit; text-align: inherit}
h3 {font-size:18px; color:inherit;}
p {font-size:16px; color:inherit;}
details ul {font-size: 12px; margin-left:15px; padding-left:0}  

.cta-button {font-size:16px; font-weight:500; text-align:center; padding:8px 14px;} 
.d-only {display: none;}
.m-only {display: inline;}  
.form-contact{margin: 0px 0px; padding: 60px 30px; text-align:left}
.FAQ{padding:30px 30px;}
.FAQ-category{font-size:12px; font-weight:bold}  
  
.about-hero-text{color:white}
.about-background-title {font-size:16px;}
.about-background-school {font-size:14px;} 
.about-logo {width: 140px; height: 70px; border:solid 0px red} 

.services-card-private {margin: 60px 30px 0px 30px}
.services-card-business {margin: 0px 30px}  
.service-box-private{flex-direction:column; }
.service-box-business{flex-direction:column; padding: 0 0 30px 0}
.service{margin: 30px 30px; max-width:100%; flex-direction:column}
.service-text{width:100%;order:2; text-align:center; border-radius:0px 0px 15px 15px}
.service-image{width:100%; height: 270px; order:1; border-radius:15px 15px 0 0; background-position:bottom center}
.professionals-main{flex-direction:column;margin:0;padding:0}
.professionals-main-text{width:100%; padding: 30px 30px;}
.professionals-main-image{width:100%; height:400px;}
.psychology-main{flex-direction:column;margin:0;padding:0}
.psychology-main-text{width:100%; padding: 30px 30px;}
.psychology-main-image{width:100%; height:400px;}    
  
#about-hero-section {height: 70vh; display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;background-size:cover;background-position:top center;background-image:linear-gradient(to top,rgba(0,0,0,0.9) 10%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0) 50%),var(--img-about-pietro-m)}  
#about-hero-image {display:none}
#about-hero-text{display:flex; justify-content: flex-end;}
#about-bio_collaborations {flex-direction: column; margin: 0px 0px;}
#about-collaborations {order: 1; text-align:left;}
#about-logolist {grid-template-columns:repeat(2, 1fr); padding: 0px 0px; column-gap: 10px; row-gap: 20px;}

#services-intro{padding:50px 30px} 
#services{margin:30px 0px; padding:30px 60px}

#psychology-hero-section {height: 70vh; background-position:top center; background-image: var(--img-psychology-hero-m)}
#psychology-hero-text{font-size: 20px; margin-bottom:100px;}
#psychology-main-text-1 {padding:60px 30px}
#psychology-main-text-2 {padding:60px 30px}
#psychology-main-text-3 {padding:60px 30px} 
#psychology-main-image-2{order:2}
#psychology-main-text-2 {order:1;}
#psychology-main-text-2 ul {margin-left:15px; padding-left:0}
#psychology-main-text-2 li {margin-left:0px; padding-left:0}
 
#professionals-hero-section {height: 70vh; background-position:bottom center; background-image: var(--img-professionals-hero-m)}
#professionals-hero-text{font-size: 20px}
#professionals-main-text-1 {padding:60px 30px}
#professionals-main-text-2 {padding:60px 30px}
#professionals-main-text-3 {padding:60px 30px} 
#professionals-main-image-2{order:2}
#professionals-main-text-2 {order:1;}
#professionals-main-text-2 ul {margin-left:15px; padding-left:0}
#professionals-main-text-2 li {margin-left:0px; padding-left:0}
  
#contacts-main{padding:30px 0; flex-direction: column;}
#location-container {margin:0; padding: 30px 30px;}
#map iframe {width:100%; min-height:400px}  
  
.navbar{justify-content:flex-start;padding:5px 15px;width:100%} 
.menu{display: none; }
.logo{flex:unset}
.hamburger {display:flex;flex-direction:column;gap:5px;cursor:pointer; margin-left:auto;}  
.hamburger div{width:25px;height:3px;background-color:rgb(var(--color-text))}  
.menu-overlay{display:none;position:fixed;top:60px;left:0;width:100%;height:auto;background-color:rgb(var(--color-menu-back));z-index:999;flex-direction:column;align-items:center;justify-content:right;}  
.menu-overlay.open{display:flex}  
.menu-overlay a{font-size:16px;font-weight:bold;color:rgb(var(--color-text));text-decoration:none;padding:15px;width:100%;text-align:center;border-bottom:1px solid lightgray}  
.menu-overlay a:last-child{border-bottom:none}  
.menu-overlay a:hover{background-color:rgb(var(--color-brand));color:rgb(var(--color-menu-back))} 



}