/*
Theme Name: Svilupp App 2026 (v3) by Diapason Digital
Theme URI: https://sviluppoappmilano.it
Description: Sub theme of Pitch by Diapason Digital
Author: Milo Neri
Version: 3.0
License: Copyright — Do not use, copy or reproduce this theme.
*/

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */


/* Inter, subsetting: Latin Extended + some special chars */

@font-face {font-family:'Inter';src:local('Inter Italic'), local('Inter-Italic'), url('fonts/inter_v4/subset-Inter-Italic.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-Italic.ttf') format('truetype');font-weight:normal;font-style:italic;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter Bold Italic'), local('Inter-BoldItalic'), url('fonts/inter_v4/subset-Inter-BoldItalic.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-BoldItalic.ttf') format('truetype');font-weight:bold;font-style:italic;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter Bold'), local('Inter-Bold'), url('fonts/inter_v4/subset-Inter-Bold.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-Bold.ttf') format('truetype');font-weight:bold;font-style:normal;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter Light Italic'), local('Inter-LightItalic'), url('fonts/inter_v4/subset-Inter-LightItalic.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter Light'), local('Inter-Light'), url('fonts/inter_v4/subset-Inter-Light.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter SemiBold'), local('Inter-SemiBold'), url('fonts/inter_v4/subset-Inter-SemiBold.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter Medium'), local('Inter-Medium'), url('fonts/inter_v4/subset-Inter-Medium.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter Regular'), local('Inter-Regular'), url('fonts/inter_v4/subset-Inter-Regular.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-Regular.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter SemiBold Italic'), local('Inter-SemiBoldItalic'), url('fonts/inter_v4/subset-Inter-SemiBoldItalic.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-SemiBoldItalic.ttf') format('truetype');font-weight:600;font-style:italic;font-display:swap}
@font-face {font-family:'Inter';src:local('Inter Medium Italic'), local('Inter-MediumItalic'), url('fonts/inter_v4/subset-Inter-MediumItalic.woff2') format('woff2'), url('fonts/inter_v4/subset-Inter-MediumItalic.ttf') format('truetype');font-weight:500;font-style:italic;font-display:swap}




/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* typography */



:root {
	
	--sans-serif: 'Inter',"Helvetica Neue",'Arial',sans-serif;
	
	--s-label:10px;
	--m-label:11px;
	--l-label:12px;
	
	--s-copy:12px;
	--m-copy:12px;
	--l-copy:15px;
	
	--s-title:18px;
	--m-title:24px;
	--l-title:27px;
	
	--s-display:36px;
	--m-display:48px;
	--l-display:60px;
}


.s-label {--font-size:10px; font-size:var(--s-label);line-height:normal;letter-spacing:.066em}
.m-label {--font-size:11px; font-size:var(--m-label);line-height:normal;letter-spacing:.033em}
.l-label {--font-size:12px; font-size:var(--l-label);line-height:normal;letter-spacing:.012em}

.s-copy  {--font-size:12px; font-size:var(--s-copy);line-height:1.5;letter-spacing:normal}
.m-copy  {--font-size:12px; font-size:var(--m-copy);line-height:1.5;letter-spacing:normal}
.l-copy  {--font-size:15px; font-size:var(--l-copy);line-height:1.5;letter-spacing:normal}

h6, .s-title   {--font-size:18px; margin:0;letter-spacing:-.015em;font-weight:bold;font-size:var(--s-title);line-height:1.3333333}
h5, .m-title   {--font-size:24px; margin:0;letter-spacing:-.015em;font-weight:bold;font-size:var(--m-title);line-height:1.3333333}
h4, .l-title   {--font-size:27px; margin:0;letter-spacing:-.015em;font-weight:bold;font-size:var(--l-title);line-height:1.3333333}

h3, .s-display {--font-size:36px; margin:0;letter-spacing:-.015em;font-weight:bold;font-size:var(--s-display);line-height:1.3333333}
h2, .m-display {--font-size:48px; margin:0;letter-spacing:-.015em;font-weight:bold;font-size:var(--m-display);line-height:1.3333333}
h1, .l-display {--font-size:60px; margin:0;letter-spacing:-.015em;font-weight:bold;font-size:var(--l-display);line-height:1.3333333}

@media (min-width:1016px) {


	:root {

		--s-copy:12px;
		--m-copy:15px;
		--l-copy:18px;

		--s-title:24px;
		--m-title:32px;
		--l-title:40px;

		--s-display:48px;
		--m-display:56px;
		--l-display:64px;
	}

	
	.s-copy  {--font-size:12px}
	.m-copy  {--font-size:15px}
	.l-copy  {--font-size:18px}

	h6, .s-title   {--font-size:24px}
	h5, .m-title   {--font-size:32px}
	h4, .l-title   {--font-size:40px}

	h3, .s-display {--font-size:48px}
	h2, .m-display {--font-size:56px}
	h1, .l-display {--font-size:64px}

}




/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* Colors */

:root {
	--offwhite: #FAFAF9;
	--paper:    #F0EEED;
	
	--offblack: #101226;
	--night:    #2A2C3F;
	
	--base-color:    light-dark(var(--offblack),var(--offwhite));
	--base-bg:       light-dark(var(--offwhite),var(--offblack));
	--shaded-bg:     light-dark(var(--paper),var(--night));
	
	
	--accent:        light-dark(  var(--dd-violet)   ,   var(--dd-light-blue)  );
	--accent-hover:  color-mix(in srgb, var(--accent), var(--base-bg) 12%);
	--on-accent:     light-dark(#fff,#000);
	
	--dd-gradient:   linear-gradient(to right bottom,var(--dd-cyan),var(--dd-violet));
}

.shaded-bg {background-color:var(--shaded-bg)}
.bg-dd-gradient {background-image:var(--dd-gradient)}


/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */
/* Layout */

:root {
	

	--container: 952px;
	--container-padding: 36px;
}

.gap {gap:8px}

@media (max-width:1015px) {
	
	.site-container.in-container {box-sizing:border-box!important}
}
@media (min-width:1016px) {
	
	.site-container.in-container {box-sizing:content-box!important}
}

.main-section {overflow-x:hidden;margin:0 auto}


/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */


/* General elements */

html,body {font-family:'Inter',sans-serif;overflow-x:hidden}

body:is(.color-scheme-dark,.color-scheme-light) {background:var(--base-bg)}

svg[viewBox="0 0 60 60"] {width:60px;height:60px}



.color-scheme-dark :is(html,body) {font-weight:300}

.color-scheme-dark .light   {font-weight:200}
.color-scheme-dark .regular {font-weight:300}
.color-scheme-dark .medium  {font-weight:400}
.color-scheme-dark .demi    {font-weight:500}
.color-scheme-dark :is(.bold,.strong)    {font-weight:600}

.color-scheme-dark .color-scheme-light .light   {font-weight:300}
.color-scheme-dark .color-scheme-light .regular {font-weight:400}
.color-scheme-dark .color-scheme-light .medium  {font-weight:500}
.color-scheme-dark .color-scheme-light .demi    {font-weight:600}
.color-scheme-dark .color-scheme-light :is(.bold,.strong)    {font-weight:700}



body.color-scheme-light .color-scheme-toggle svg.sun {display:none}
body.color-scheme-dark .color-scheme-toggle svg.moon {display:none}


.elevated {box-shadow:0 6px 12px 0 rgba(0,0,0,.08)}
.border-radius, figure {border-radius:24px!important;overflow:hidden}

.btn.white-btn {background-color:#fff;border-color:#fff}
.btn.white-btn:is(:hover,:focus-visible) {box-shadow: 0 6px 15px 0 rgba(0,0,0,.12)}


.btn.l-btn {max-height:40px}
@media(min-width:960px) {
	.btn.l-btn {max-height:48px}
}

.section-inner {padding-block:3em}
@media(min-width:960px) {
	.section-inner {padding-block:4em}
}



.section-header {max-width:792px;margin-inline:auto}
.section-header .m-copy + .section-title {margin-top:.3333333em}
.section-header .section-title + .l-copy {margin-top:1.3333333em}
.section-header .l-copy:not(:last-child) {margin-bottom:2em}


/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */



#site-header {position:fixed;top:unset;bottom:36px;left:0;right:0;padding-inline:34px;z-index:999999;background:transparent;pointer-events:none}
.navbar {min-height:48px;width:100%;border-radius:24px;max-width:472px;margin-inline:auto;padding:6px 24px 6px 24px;box-sizing:border-box;background:#fff;pointer-events:auto}
.navbar-item {line-height:0;display:flex;align-items:center;justify-content:center}

#site-header .navbar .navbar-item a:hover {color:var(--base-color)}

.navbar .navbar-item .btn.icon svg.svg-icon#dd_logo {width:32px;height:32px}
.navbar .navbar-item .btn.ghost:has(svg.svg-icon#dd_logo):is(:hover,:focus-visible) {background:transparent}

@media (min-width:960px) {
	.navbar {border-radius:30px}
	.navbar .navbar-item .btn.icon.icon-only:has(svg.svg-icon#dd_logo) {width:48px;height:48px}
	.navbar .navbar-item .btn.icon svg.svg-icon#dd_logo {width:48px;height:48px}
}



/* popover menu */
#popover-menu {max-width:360px}
#popover-menu .panel-header {padding:1.5em .75em 1.5em 1.5em;background:var(--surface10)}
#popover-menu .panel-header .col {gap:.3333333em}
#popover-menu .panel-body {padding:2em 1.5em}
#popover-menu .panel-body .in-page-menu .menu-item {padding:0}


/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */


/* Page sections */


/* Hero */
#page-hero {max-width:1440px;margin-inline:auto}

#page-hero .post-thumbnail-container {height:520px;display:flex;justify-content:center;align-items:center;border-radius:0!important}
#page-hero .post-thumbnail-container img {object-position:center top;max-width:calc(48px + var(--container))}
#page-hero .post-thumbnail-container::before,
#page-hero .post-thumbnail-container::after {content:'';position:absolute;display:block;top:0;left:50%;bottom:0;height:100%;width:100%;max-width:calc(48px + var(--container));transform:translateX(-50%);overflow:hidden;z-index:2}
#page-hero .post-thumbnail-container::before {background-image:linear-gradient(to left bottom,transparent 50%,var(--base-bg));opacity:.5}
#page-hero .post-thumbnail-container::after {background-image:linear-gradient(transparent 50%,var(--base-bg))}


@media (min-width:960px) {

	#page-hero .post-thumbnail-container {border-radius:24px!important;margin:24px;background-image:linear-gradient(to right bottom,#1F364E,#262532)}
	#page-hero .post-thumbnail-container img {border-radius:24px}
	#page-hero .post-thumbnail-container::before,
	#page-hero .post-thumbnail-container::after {border-radius:24px;opacity:.3}

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

	#page-hero .post-thumbnail-container {margin-bottom:-10em;z-index:-1}
	#page-hero .hero-text {text-align:left;max-width:375px}


}




/* Intro */
#intro figure.colspan-5 {margin-right:56px;margin-left:-24px}

#intro #tech-icons {margin:3em -18px}
#intro #tech-icons svg.svg-icon {height:20px;width:auto}
@media (min-width:960px) {
	#intro #tech-icons {margin-inline:-24px}
	#intro #tech-icons svg.svg-icon {height:28px;width:auto}
}



/* Tipi di App */

#tipi-di-app .section-header {margin-bottom:48px}
#tipi-di-app .section-header + .m-copy {margin-bottom:18px}

#tipi-di-app .tipi-list-wrap .list {padding:12px;display:flex;flex-direction:column;gap:2px}
#tipi-di-app .tipi-list-wrap .list-item {border-radius:12px}
#tipi-di-app .tipi-list-wrap .list-item:is(:hover,:focus-visible,[open]) {background-color:light-dark(color-mix(in srgb,var(--base-bg),transparent 50%),color-mix(in srgb,var(--base-color),transparent 90%));box-shadow:0 3px 6px rgba(0,0,0,.03)}
#tipi-di-app .tipi-list-wrap .list-item summary {padding:12px}
#tipi-di-app .tipi-list-wrap .list-item .details-content {padding:0 16px 18px 16px}

#tipi-di-app .tipi-list-wrap .list-item .icon {display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--base-bg)}
#tipi-di-app .tipi-list-wrap .list-item .icon svg {width:40px;height:40px}

#tipi-di-app .tipi-list-wrap .list-item[open] summary .chevron-down {transform:rotate(180deg)}

#tipi-di-app .app-custom picture {border-radius:24px;position:relative}
#tipi-di-app .app-custom picture img {position:relative}
#tipi-di-app .app-custom picture::before {content:'';position:absolute;display:block;inset:0;background:linear-gradient(transparent,var(--base-bg));opacity:.33}
#tipi-di-app .app-custom .col {padding:24px 18px 48px 18px;text-align:center}


@media (max-width:959px) {
	#tipi-di-app .tipi-list-wrap {gap:unset;margin-inline:-18px}
	#tipi-di-app .tipi-list-wrap .list:first-of-type {border-bottom-right-radius:0!important;border-bottom-left-radius:0!important;padding-bottom:2px}
	#tipi-di-app .tipi-list-wrap .list:last-of-type {border-top-right-radius:0!important;border-top-left-radius:0!important;padding-top:0}
	
	#tipi-di-app .tipi-list-wrap .list-item .icon {width:60px;height:60px}
	#tipi-di-app .tipi-list-wrap .list-item .icon svg {width:40px;height:40px}
	
	#tipi-di-app .app-custom {margin-inline:-18px}
}
@media (min-width:960px) {
	#tipi-di-app .section-header {margin-bottom:56px}
	#tipi-di-app .section-header + .m-copy {margin-bottom:36px}
	
	#tipi-di-app .app-custom .col {padding:0 56px 0 32px;text-align:left}

}



/* Portfolio */
#portfolio .section-header {margin-bottom:24px}

#portfolio .portfolio-button {padding:16px 16px 36px 16px;border-width:0}
#portfolio .portfolio-button img {margin-bottom:-4px}
#portfolio .portfolio-button .subtitle {margin-bottom:24px}

#portfolio .panel {padding:0;border-radius:36px}
#portfolio .panel .close-btn {position:absolute;top:12px;right:12px;z-index:999}
#portfolio .panel .portfolio-item-inner {padding:18px}

#portfolio .gallery {height:100%;width:100%;background-color:var(--shaded-bg);border-radius:12px}
#portfolio .gallery .swiper-slide {position:relative}
#portfolio .gallery .swiper-slide figure {width:100%;height:100%;padding:36px 48px 60px 48px;box-sizing:border-box;position:absolute;top:0;left:0;border-radius:unset!important;overflow:visible;justify-content:center;align-items:center}
#portfolio .gallery .swiper-slide figure img {border-radius:6px;box-shadow:0 5px 12px rgba(0,0,0,.2);width:auto;height:auto;max-width:100%;max-height:100%}
#portfolio .gallery .swiper-slide figure figcaption {line-height:normal;padding:4px 18px}

#portfolio .panel .content .title {margin-top:1em}
#portfolio .panel .content .text {margin-bottom:2em}

#portfolio .cta-container {margin-top:3em;margin-bottom:4em}

@media (max-width:959px) {
	#portfolio .card-wrap {margin-inline:-18px}
	
	#portfolio .panel {border-radius:24px;overflow-y:clip;max-height:calc(100% - (2 * var(--floating-gap)))}
	#portfolio .panel:popover-open {display:flex;flex-direction:column}
	body:has( #portfolio .panel:popover-open) {overflow:hidden}
	
	#portfolio .panel .portfolio-item-inner {flex: 1 1 auto;overflow:hidden auto;height:100%;padding-bottom:48px;box-sizing:border-box;-webkit-overflow-scrolling: touch;}
	
	#portfolio .panel::before,
	#portfolio .panel::after {content:'';position:absolute;display:block;width:100%;left:0;right:0;z-index:99}
	#portfolio .panel::before {height:36px;top:0;background:linear-gradient(var(--base-bg),transparent)}
	#portfolio .panel::after {height:54px;bottom:0;background:linear-gradient(transparent,var(--base-bg))}
	
	
	#portfolio .gallery {min-height:75vh}
	
}
@media (min-width:960px) {
	
	#portfolio .section-header {margin-bottom:48px}

	#portfolio .panel {max-width:calc(var(--container) + 48px);width:100%;padding:24px}
	#portfolio .panel .close-btn {top:24px;right:24px}
	#portfolio .panel .portfolio-item-inner {height:100%;display:flex}
	#portfolio .panel .content {padding: 24px}
}



/* Features */

#app-features .section-header {margin-bottom:24px}

.feature-item {padding:18px;position:relative;margin-inline:-18px}

@media (min-width:960px) {
	
	#app-features {overflow-x:hidden}
	#app-features .section-inner {overflow-x:visible}
	
	.feature-item {margin-inline:unset;padding:24px;overflow:visible}
	.feature-item:not(:nth-child(2))::before,.feature-item:not(:nth-child(2))::after {content:'';position:absolute;display:block;width:100%;height:100%;border-radius:24px;background:var(--shaded-bg);inset:0;z-index:-1}
	.feature-item::before {opacity:.6;transform:translateX(calc(100% + 8px))}
	.feature-item::after {opacity:.35;transform:translateX(calc(200% + 16px))}
	.feature-item:is(:nth-child(1),:nth-child(4),:nth-child(6))::before {transform:translateX(calc(-100% - 8px))}
	.feature-item:is(:nth-child(1),:nth-child(4),:nth-child(6))::after {transform:translateX(calc(-200% - 16px))}
	
	.feature-item:last-child > p:last-child::before {content:'';position:absolute;display:block;width:100%;height:100%;border-radius:24px;background:var(--shaded-bg);inset:0;z-index:-1;opacity:.6;transform:translateX(calc(100% + 8px))}
	.feature-item:last-child > p:last-child::after {content:'';position:absolute;display:block;width:100%;height:100%;border-radius:24px;background:var(--shaded-bg);inset:0;z-index:-1;opacity:.35;transform:translateX(calc(200% + 16px))}
}
@media (min-width:960px) {

	#app-features .section-header {margin-bottom:48px}
	
	#app-features {position:relative;max-width:1600px;margin-inline:auto}
	#app-features::before {content:'';display:block;position:absolute;width:calc((100% - var(--container)) / 2);top:0;left:0;bottom:0;background:linear-gradient(to right,var(--base-bg),transparent)}
	#app-features::after {content:'';display:block;position:absolute;width:calc((100% - var(--container)) / 2);top:0;right:0;bottom:0;background:linear-gradient(to left,var(--base-bg),transparent)}

}



/* Contatti */
#contatti {max-width:1440px;margin-inline:auto}
#contatti .section-background {border-radius:24px;position:relative;padding:72px 0 144px 0}
#contatti .section-background::before {content:'';position:absolute;display:block;inset:0;background:linear-gradient(transparent,var(--base-bg));opacity:.5}

body.color-scheme-dark #contatti .section-background::before {opacity:.85}
#contatti .section-background .section-inner {position:relative;z-index:9}

#contatti form {padding:36px 28px 48px 28px}
#contatti form .the-label sup {color:red;font-weight:900;font-size:1em;line-height:0}
#contatti form .wpcf7-spinner {display:none}
#contatti form input:not([type="submit"], [type="button"]),
#contatti form textarea {max-width:100%}

#contatti .phone-card {padding:16px}
#contatti .phone-card .phone-icon .phone-circle {width:40px;height:40px;border: solid currentcolor 2px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#contatti .phone-card .phone-icon .phone-circle svg {width:32px;height:32px}

@media (min-width:420px) {
	#contatti .phone-card {gap:24px}
}
@media (max-width:959px) {
	#contatti .site-container {padding-inline:18px}
	#contatti .section-header {padding-inline:18px;margin-bottom:32px}
}
@media (min-width:960px) {

	#contatti .section-background {margin:24px;padding-bottom:108px}
	#contatti .section-background::after {content:'';position:absolute;display:block;inset:0;background:url('img/bg_servizi_wh.svg');background-size:1920px auto;background-position:center;mix-blend-mode:overlay}
	
	#contatti .phone-card {padding:18px 24px}
	#contatti .phone-card .phone-icon .phone-circle {width:72px;height:72px;border-width:4px}
	#contatti .phone-card .phone-icon .phone-circle svg {width:60px;height:60px}

}



/* Scegliere diapason */

#scegliere-diapason {margin-top:4em;margin-bottom:2em}
#scegliere-diapason .numbers-grid {row-gap:1em; margin-block:2em}
#scegliere-diapason .number-item {padding-bottom:2em}
#scegliere-diapason .number {position:relative;top:-.25em;width:48px;margin-left:auto;text-align:center}

@media (max-width:959px) {

	#scegliere-diapason .number-item {display:flex}
}
@media (min-width:960px) {
	#scegliere-diapason .section-header {margin-bottom:48px}
}
/* Sviluppa a Modena */
#sviluppa-a-modena {overflow:visible}
#sviluppa-a-modena picture {margin-inline:-18px;position:relative;overflow:visible}
#sviluppa-a-modena picture::before,
#sviluppa-a-modena picture::after {content:'';position:absolute;display:block;aspect-ratio:1/1;z-index:-1;opacity:.5}
#sviluppa-a-modena picture::before {max-width:514px;width:156%;top:-40%;left:-40%;background:radial-gradient(var(--accent),transparent 70%)}
#sviluppa-a-modena picture::after  {max-width:432px;width:116%;left:20%;top:-4%;background:radial-gradient(light-dark(var(--dd-light-blue),var(--dd-violet)),transparent 70%)}
.color-scheme-light #sviluppa-a-modena picture::before,
.color-scheme-light #sviluppa-a-modena picture::after {opacity:.25}
@media (min-width:960px) {
	#sviluppa-a-modena picture {margin-left:-24px;margin-right:40px}
}



/* About */

#about {padding-block:5em}

#about #dd_logo {width:90px;height:90px;margin:1.5em auto}

#about p.l-copy {max-width:632px;margin:1.5em auto}
#about a.btn {margin-top:1.5em}

	body {overflow-x:hidden;position:relative}
	body::before {z-index:-9;content:'';position:absolute;display:block;width:100%;min-width:960px;max-width:1920px;height:auto;aspect-ratio:16/9;bottom:864px;left:50%;transform:translateX(-50%) scale(-1, 1);background:url('img/bg_about.webp');background-repeat:no-repeat;background-position:center;background-size:100% auto}
	body::after  {z-index:-9;content:'';position:absolute;display:block;width:100%;min-width:960px;max-width:1920px;height:auto;aspect-ratio:16/9;bottom:864px;left:50%;transform:translateX(-50%);background:linear-gradient(to right,var(--base-bg),transparent,transparent,var(--base-bg))}



@media (min-width:960px) {
	
	body::before {bottom:72px}
	body::after  {bottom:72px}
	
	#about #dd_logo {width:180px;height:180px}
}





/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */





/* Footer */

#site-footer {max-width:1440px;margin-inline:auto;z-index:1;position:relative}
#site-footer .footer-bg {background:light-dark(color-mix(#ADA29C,transparent 90%),color-mix(#F6F6F5, transparent 90%));backdrop-filter:blur(20px);padding-block:48px 108px;position:relative}

#site-footer ul.list-style-type-none {padding:0}

#site-footer .diapason-digital_logo_hr_nomargin {margin-bottom:.75em}
#site-footer .copyright {margin-top:4em}
#site-footer .gdpr {margin-top:1em}

@media (max-width:959px) {
	
	#site-footer .footer-bg {padding-top:60px}
	#site-footer .footer-bg::before {content:'';position:absolute;display:block;top:-24px;height:48px;border-radius:24px;left:0;right:0;background:var(--base-bg)}

}
@media (min-width:960px) {

	#site-footer .footer-bg {border-radius:24px; margin:24px}

}





/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */





/* Plugins etc */

[data-cf7apps-honeypot] {display:none!important}
.wpcf7-form .hidden-fields-container {display:none}
.wpcf7 .screen-reader-response {display:none}

.wpcf7-form .wpcf7-form-control-wrap {display:flex;flex-direction:column;gap:.5em}


/* errors */
.wpcf7-form .form-row:has( .wpcf7-not-valid-tip ) {color:var(--color-gonebad)}
.wpcf7-form .form-row:has( .wpcf7-not-valid-tip )::before {content:'';position:absolute;display:block;top:.3em;bottom:0;width:2px;left:-10px;background-color:var(--gonebad)}
.wpcf7-form .form-row:has( .wpcf7-not-valid-tip ) :is(input,select,textarea) {border-color:var(--color-gonebad)}
.wpcf7-form .form-row:has( .wpcf7-not-valid-tip ) :focus-visible {outline-color:var(--color-gonebad)}

.wpcf7-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {order:0;display:block;font-size:var(--s-copy);transition:display 1s 2s allow-discrete;transition-delay:2s}
.wpcf7-form .wpcf7-form-control-wrap :is(input,select,textarea):has( + .wpcf7-not-valid-tip ) {order:2}



/* swiper */

.swiper-pagination {display:flex;gap:12px;align-items:center;justify-content:center}
.swiper-pagination .swiper-pagination-bullet {width:6px;height:6px;background-color:var(--base-color);opacity:.5;margin:0!important}
.swiper-pagination .swiper-pagination-bullet-active {width:10px;height:10px;background-color:var(--base-color);opacity:1}