/* Reset and Base */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  --silver: #c0c0c0;
  --silver-soft: #b3b3b3;
}
footer {
  text-align: center;
  padding: 2rem;
  background: #0d0d0d;
  font-size: 0.9rem;
  color: var(--silver-soft, #b3b3b3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #0d0d0d;
  color: #f2f2f2;
  scroll-behavior: smooth;
  line-height: 1.6;
  
  background-image: radial-gradient(ellipse closest-corner at 30% 40%, rgba(242, 0, 123, .07), transparent 80%), radial-gradient(ellipse closest-corner at 50% 60%, rgba(111, 41, 201, .1), transparent 80%), radial-gradient(ellipse closest-corner at 70% 50%, rgba(38, 160, 248, .09), transparent 80%);
}

img {
  max-width: 100%;
  display: block;
  border-radius: 8px;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Navbar */
nav.navbar {
  /*position: sticky;
  top: 0;
  background-color: #0d0d0d;*/
  position: fixed;
   top: 0;
   width: 100%;
  padding: 1rem 2rem;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/
  background: transparent;
  padding: 1rem;
	z-index: 999;
	transition: background-color 0.3s ease;
}

nav.scrolled {
			background-color: rgba(0, 0, 0, 0.85);
		}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-img {
  height: 40px;
  margin-right: 1rem;
}

.logo {
  font-weight: 700;
  font-size: 1.5rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.nav-links button {
  background: #fff;
  color: #000;
  padding: 0.4rem 0.8rem;
  margin-left: 0.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

/* Hero Section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*background: linear-gradient(to bottom, #1a1a1a 20%, #0d0d0d 80%),
    url("img/back-head1.jpg") center/cover no-repeat;*/
  /*height: 90vh;*/
background-image: url("img/back-head1.jpg");
background-size: cover;
background-position:bottom center;
background-repeat:no-repeat;
  height: 100vh;
  color: white;
  padding: 2rem;
  position: relative;
  box-shadow: inset 0 -100px 100px rgba(0, 0, 0, 0.5);
  position:relative;
}

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

.hero .container {z-index:2; margin-top: 2.4rem;}

.hero h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: #ccc;
}
.hero-logo {
  /*width: 80px;*/
  width:auto;
  height:40vh;
  margin: 0 auto 1rem auto;
  display: block;
}

/* Buttons */
.btn {
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  display: inline-block;
  transition: background 0.3s;
  font-size: 1rem;
}

.btn.primary {
  background-color: #4b39ef;
  color: #fff;
  border: none;
}

.btn.primary:hover {
  /*background-color: #00b34a;*/
  background-color: #6633ff;
}

.btn.secondary {
  background-color: transparent;
  border: 2px solid var(--silver, #c0c0c0);
  color: var(--silver, #c0c0c0);
}

.btn.secondary:hover {
  background-color: #2a2a2a;
  color: white;
  border-color: #d0d0d0;
}

.btn.small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Sections */
section {
  padding: 6rem 2rem;
}

.container {
  /*max-width: 1200px;*/
  max-width:75rem;
  margin: 0 auto;
}

/* Feature Section - Services Redesigned */
.features {
  background-color: #0d0d0d;
  color: #f2f2f2;
  /*padding-top: 4rem;*/
  border-top: 2px solid #4b39ef;
  border-bottom: 2px solid #4b39ef;
}

.feature-section h3 {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

.feature-section .intro {
  text-transform: uppercase;
  color: #4b39ef;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.feature-card .text {
  padding: 1.5rem;
}

.feature-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.feature-card p {
  font-size: 1rem;
  color: var(--silver-soft, #b3b3b3);
}

/* Steps Section */
/* Steps Section */
.steps .step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.step {
  /*background: #1a1a1a;*/
  background-color: #4b39ef;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.step:hover {
  transform: translateY(-6px);
}

.step-icon {
  /*background-color: #4b39ef;*/
  background-color: #fff;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.step p {
  font-size: 0.95rem;
  color: var(--silver-soft, #b3b3b3);
}

/* Language buttons */
.nav-links li:last-child {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

/* About Section Grid */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.section-intro {
  text-transform: uppercase;
  color: #4b39ef;
  font-weight: 600;
  margin-bottom: 1rem;
}

.about-text h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.about-body {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  border-left: 2px solid #4b39ef;
  padding-left: 1rem;
  color: var(--silver-soft, #b3b3b3);
}

.about-image img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Active link effect in navbar */
.nav-links .active-link {
 /*border-bottom: 2px solid var(--silver, #c0c0c0);*/
  /*color: var(--silver, #c0c0c0);*/
  color:#4b39ef;
  /*font-weight: 600;*/
  transition: color 0.3s ease;
}

/* Subscribe Form Section */
.subscribe {
  background: #1a1a1a;
  text-align: center;
  padding: 8rem 2rem;
  border-top: 2px solid #4b39ef;
  
background-image: url("img/back-survey1.jpg");
background-size: cover;
background-position:top center;
background-repeat:no-repeat;
background-attachment: fixed;
position:relative;
}

.subscribe::after {
background-color:rgba(0, 0, 0, 0.7);
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
content:" ";
z-index:1;
}

.subscribe .container {z-index: 2; position: relative;}

.subscribe .sub-logo {
  max-width: 100px;
  margin:
0 auto 20px;
}

.subscribe h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.subscribe p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: var(--silver-soft, #b3b3b3);
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  width: 100%;
}

.subscribe-form input {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 2px solid #333;
  background-color: #0d0d0d;
  color: #f2f2f2;
  width: 100%;
  max-width: 180px;
  transition: border 0.3s ease;
}

.subscribe-form input:focus {
  outline: none;
  border-color: #4b39ef;
}

.subscribe-form button {
  margin-top: 1rem;
  cursor: pointer;
}
.survey-link {
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
}

h1, h2, h3, h4, h5 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}

/* Torna in alto button */
        #back-to-top {
            position: fixed;
            bottom: 40px;
            right: 40px;
            background-color: #333;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 16px;
            display: none;
            cursor: pointer;
            z-index: 999;
        }
        #back-to-top:hover {
            background-color: #555;
        }
		
body #how-it-works .fas {font-size: 4rem; padding-top: 20px;}

body .about-grid.reversed {display: flex; flex-direction: row-reverse;}
body .about-grid.reversed .about-image, body .about-grid.reversed .about-text {flex-grow: 1; flex-basis: 0;}

body .interruption {
	max-width:20%; 
	min-width:40px;
	margin:0 auto;
	text-align:center;
	}

body .interruption hr {
	color:#4b39ef;
	border-color: #4b39ef;
    background-color: #4b39ef;
	}

.menu-toggle {
    display: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    nav ul.nav-links {
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        width: 100%;
        display: none;
        padding: 1rem 0;
    }

    nav ul.show {
        display: flex;
    }

    nav ul li {
        text-align: center;
        padding: 10px 0;
    }
	
	body .about-grid, body .about-grid.reversed {display:block;}
	body .about-grid .about-image {margin-bottom:20px;}
	body .subscribe {background-position: right;}
	/*body .hero {height:auto;}*/
}

@media screen and (max-height: 500px) {
	
	body .hero {height:auto;}
	
}