/*======================================================
TO.P. TEK SRL
style.css
Versione 1.0
======================================================*/

/* RESET */

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#222;
    line-height:1.7;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

.container{

    width:90%;
    max-width:1280px;
    margin:auto;

}

/*======================================================
HEADER
======================================================*/

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(8px);

    box-shadow:0 2px 12px rgba(0,0,0,.08);

}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 155px;
    gap: 30px;
}

.logo {
    display: block;
    flex-shrink: 0;
    width: 430px;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    display: block;
    height: 140px;
    width: auto;
    max-width: 560px;
    object-fit: contain;
}

nav ul{

    display:flex;
    gap:35px;

}

nav ul li a{

    font-size:15px;
    font-weight:600;
    transition:.3s;

}

nav ul li a:hover{

    color:#9f1d22;

}

.hamburger{

    display:none;
    cursor:pointer;

}

.hamburger span{

    display:block;
    width:28px;
    height:3px;
    background:#222;
    margin:6px 0;

}

/*======================================================
HERO
======================================================*/

#hero{

    position:relative;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

}

.overlay{

    position:absolute;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.45);

}

.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

    max-width:900px;

    padding:20px;

}

.hero-content h1{

    font-size:62px;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-content span{

    color:#ffffff;

}

.hero-content p{

    font-size:22px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

.btn{

    background:#9f1d22;

    color:#fff;

    padding:16px 35px;

    border-radius:4px;

    transition:.3s;

}

.btn:hover{

    background:#7d161a;

}

.btn-outline{

    border:2px solid #fff;

    padding:16px 35px;

    color:#fff;

    transition:.3s;

}

.btn-outline:hover{

    background:#fff;

    color:#222;

}
/*======================================================
SEZIONI
======================================================*/

section{

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:#9f1d22;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

}

.section-title h2{

    margin-top:15px;

    font-size:42px;

    font-weight:700;

    color:#222;

}

/*======================================================
CHI SIAMO
======================================================*/

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-text p{

    margin-bottom:25px;

    font-size:18px;

    color:#555;

}

.about-image img{

    width:100%;

    border-radius:8px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}


/*======================================================
SERVIZI
======================================================*/

.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.service-card{

    background:#fff;

    padding:40px 30px;

    border-radius:8px;

    text-align:center;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card img{

    width:70px;

    margin:0 auto 25px;

}

.service-card h3{

    margin-bottom:20px;

    font-size:22px;

}

.service-card p{

    color:#666;

    font-size:16px;

}

/*======================================================
GALLERIA
======================================================*/

#galleria{
    background:#f8f8f8;
}

.gallery-scroll{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
}

.gallery-scroll img{
    flex:0 0 32%;
    height:240px;
    border-radius:8px;
    object-fit:cover;
    scroll-snap-align:start;
}

.gallery-scroll::-webkit-scrollbar{
    height:8px;
}

.gallery-scroll::-webkit-scrollbar-thumb{
    background:#9f1d22;
    border-radius:20px;
}

.gallery-note{
    text-align:center;
    color:#777;
    font-size:14px;
    margin-top:18px;
}

@media(max-width:768px){

    .gallery-scroll img{
        flex:0 0 85%;
        height:220px;
    }

}

/*======================================================
GRUPPO ITALIA POSE TECNICHE
======================================================*/

.group-box{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:60px;

    align-items:center;

    background:#fafafa;

    padding:60px;

    border-radius:10px;

}

.group-logo img{

    width:100%;

}

.group-text span{

    color:#9f1d22;

    font-weight:700;

    letter-spacing:2px;

}

.group-text h2{

    margin:20px 0;

    font-size:38px;

}

.group-text p{

    margin-bottom:22px;

    color:#555;

    font-size:18px;

}

/*======================================================*
* PULSANTE GRUPPO
*======================================================*/

.group-button {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 28px;
    background: #9f1d22;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
    transition: .3s;
}

.group-button:hover {
    background: #7d161a;
    transform: translateY(-2px);
}

/*======================================================
CONTATTI
======================================================*/

#contatti{

    background:#f4f4f4;

}

.contact-wrapper{

    display:flex;

    justify-content:center;

}

.contact-info{

    background:#fff;

    padding:60px;

    width:100%;

    max-width:800px;

    border-radius:8px;

    box-shadow:0 12px 35px rgba(0,0,0,.10);

}

.contact-info h3{

    font-size:34px;

    margin-bottom:20px;

}

.contact-info p{

    margin-bottom:35px;

    color:#555;

}

.contact-info ul li{

    margin-bottom:25px;

    font-size:17px;

}

.contact-info strong{

    color:#222;

}

.contact-info a{

    color:#9f1d22;

}

.whatsapp-btn{

    display:inline-block;

    margin-top:30px;

    background:#25D366;

    color:#fff;

    padding:16px 30px;

    border-radius:5px;

    font-weight:600;

    transition:.3s;

}

.whatsapp-btn:hover{

    background:#1ca851;

}
/*======================================================
FOOTER
======================================================*/

footer{

    background:#1d1d1d;
    color:#fff;
    padding:70px 0 25px;

}

.footer-grid{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:40px;

}

.footer-logo{

    width:180px;
    margin-bottom:20px;

}

.footer-column h3{

    margin-bottom:20px;
    font-size:18px;

}

.footer-column p{

    color:#cccccc;

}

.footer-column ul li{

    margin-bottom:12px;
    color:#cccccc;

}

.footer-column a{

    color:#cccccc;
    transition:.3s;

}

.footer-column a:hover{

    color:#ffffff;

}

.social-icons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.footer-bottom{

    margin-top:50px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    color:#bfbfbf;
    font-size:14px;

}

/*======================================================
WHATSAPP FLOATING
======================================================*/

.whatsapp-floating{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

    z-index:999;

    transition:.3s;

}

.whatsapp-floating:hover{

    transform:scale(1.08);

}

.whatsapp-floating img{

    width:34px;

}

/*======================================================
BACK TO TOP
======================================================*/

#backToTop{

    position:fixed;

    left:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#9f1d22;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:none;

    transition:.3s;

    z-index:999;

}

#backToTop:hover{

    background:#7b171b;

}

/*======================================================
TABLET
======================================================*/

@media(max-width:1024px){

    .hero-content h1{

        font-size:48px;

    }

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .group-box{

        grid-template-columns:1fr;
        text-align:center;

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*======================================================
SMARTPHONE
======================================================*/

@media(max-width:768px){

header .container {
    height: 80px;
    width: 92%;
}

.logo img {
    width: 230px;
    height: 60px;
}   

    nav{

        display:none;

    }

    .hamburger{

        display:block;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .section-title h2{

        font-size:30px;

    }

    .contact-info{

        padding:35px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:auto;
        margin-bottom:25px;

    }

    .social-icons{

        align-items:center;

    }

}

.footer-logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 20px;
}

.gallery-item-special img {
    object-fit: contain;
    background: #ffffff;
} 

/* ==========================================================
   GRUPPO ITALIA POSE TECNICHE - SFONDO NERO
========================================================== */

#gruppo {
    background: #111111 !important;
    color: #ffffff !important;
}

#gruppo .group-text span {
    color: #9f1d22;
}

#gruppo .group-text h2 {
    color: #ffffff !important;
}

#gruppo .group-text p {
    color: #dddddd !important;
}

/* ==========================================================
   GRUPPO ITALIA POSE TECNICHE
========================================================== */

#gruppo {
    background: #111111 !important;
}

#gruppo .group-box {
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#gruppo .group-text h2 {
    color: #ffffff !important;
}

#gruppo .group-text p {
    color: #dddddd !important;
}

#gruppo .group-text span {
    color: #9f1d22 !important;
}

#gruppo .group-logo {
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 6px;
}

/*======================================================*
 * COSA FACCIAMO
 *======================================================*/

#servizi.cosa-facciamo {
    background: #ffffff;
    padding: 110px 0 100px;
}


/* TITOLO */

.cosa-facciamo .section-title {
    text-align: center;
    margin-bottom: 55px;
}

.cosa-facciamo .section-title span {
    color: #9f1d22;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.cosa-facciamo .section-title h2 {
    margin: 15px auto 15px;
    font-size: 42px;
    line-height: 1.2;
    color: #222;
    max-width: 1000px;
}

.cosa-intro {
    max-width: 720px;
    margin: 0 auto;
    color: #555;
    font-size: 18px;
    line-height: 1.7;
}


/*======================================================*
 * GRIGLIA 8 AMBITI
 *======================================================*/

.ambiti-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin-bottom: 70px;
}


.ambito {
    text-align: center;
    padding: 35px 28px;
    border-right: 1px solid #e5e5e5;
}


.ambito:nth-child(4),
.ambito:nth-child(8) {
    border-right: none;
}


.ambito:nth-child(n+5) {
    border-top: 1px solid #e5e5e5;
}


.ambito-icon {
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}


.ambito-icon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}


.ambito h3 {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #111;
}


.ambito h3::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #9f1d22;
    margin: 12px auto 14px;
}


.ambito p {
    max-width: 250px;
    margin: 0 auto;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}


/*======================================================*
 * FACCIATE VENTILATE
 *======================================================*/

.facciate-box {
    display: grid;
    grid-template-columns: 40% 60%;
    min-height: 330px;
    overflow: hidden;
    border-radius: 10px;
    background: #171a1d;
}


.facciate-text {
    padding: 55px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.facciate-text > span {
    color: #d22a2a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}


.facciate-text h2 {
    color: #ffffff;
    font-size: 38px;
    line-height: 1.15;
    margin-bottom: 20px;
}


.facciate-text p {
    color: #dddddd;
    font-size: 16px;
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: 25px;
}


.facciate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    width: fit-content;
    padding: 14px 22px;
    background: #9f1d22;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
    transition: .3s;
}


.facciate-btn span {
    font-size: 22px;
    line-height: 1;
}


.facciate-btn:hover {
    background: #7d161a;
}


.facciate-image {
    min-height: 330px;
    overflow: hidden;
}


.facciate-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/*======================================================*
 * TABLET
 *======================================================*/

@media(max-width:1024px) {

    .ambiti-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ambito:nth-child(4) {
        border-right: 1px solid #e5e5e5;
    }

    .ambito:nth-child(2),
    .ambito:nth-child(4),
    .ambito:nth-child(6),
    .ambito:nth-child(8) {
        border-right: none;
    }

    .ambito:nth-child(n+3) {
        border-top: 1px solid #e5e5e5;
    }

    .facciate-box {
        grid-template-columns: 1fr 1fr;
    }

}


/*======================================================*
 * SMARTPHONE
 *======================================================*/

@media(max-width:768px) {

    #servizi.cosa-facciamo {
        padding: 80px 0;
    }

    .cosa-facciamo .section-title h2 {
        font-size: 30px;
    }

    .cosa-intro {
        font-size: 16px;
    }

    .ambiti-grid {
        grid-template-columns: 1fr;
    }

    .ambito,
    .ambito:nth-child(4),
    .ambito:nth-child(2),
    .ambito:nth-child(6),
    .ambito:nth-child(8) {
        border-right: none;
        border-top: 1px solid #e5e5e5;
    }

    .ambito:first-child {
        border-top: none;
    }

    .facciate-box {
        grid-template-columns: 1fr;
    }

    .facciate-text {
        padding: 40px 30px;
    }

    .facciate-text h2 {
        font-size: 32px;
    }

    .facciate-image {
        min-height: 260px;
    }

}

section {
    padding: 80px 0;
}

.container {
    width: 92%;
}

.hero-content {
    width: 100%;
    padding: 20px;
}

.hero-content h1 {
    font-size: 34px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 18px;
}

.hero-buttons {
    width: 100%;
}

.hero-buttons a {
    width: 100%;
    text-align: center;
}

.group-box {
    padding: 35px 25px;
}

.group-logo {
    width: 100%;
}

.contact-info {
    width: 100%;
}

.facciate-text {
    padding: 40px 25px;
}

.facciate-image {
    min-height: 260px;
}

.whatsapp-floating {
    width: 58px;
    height: 58px;
    right: 18px;
    bottom: 18px;
}

#backToTop {
    width: 50px;
    height: 50px;
    left: 18px;
    bottom: 18px;
}

/*======================================================
  GALLERIA - SLIDER FOTO
======================================================*/

.gallery-slider {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.gallery-window {
    width: 100%;
    overflow: hidden;
}

.gallery-track {
    display: flex;
    gap: 24px;
    transition: transform 0.5s ease;
    will-change: transform;
}

.gallery-item {
    flex: 0 0 calc((100% - 48px) / 3);
    height: 240px;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    display: block;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}


/* FRECCE */

.gallery-prev,
.gallery-next {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: #9f1d22;
    color: #ffffff;

    font-size: 34px;
    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.3s;

    z-index: 5;
}

.gallery-prev:hover,
.gallery-next:hover {
    background: #7d161a;
    transform: scale(1.05);
}


/*======================================================
  GALLERIA - TABLET
======================================================*/

@media (max-width: 1024px) {

    .gallery-item {
        flex: 0 0 calc((100% - 24px) / 2);
    }

}


/*======================================================
  GALLERIA - SMARTPHONE
======================================================*/

@media (max-width: 768px) {

    .gallery-slider {
        gap: 8px;
    }

    .gallery-item {
        flex: 0 0 100%;
        height: 240px;
    }

    .gallery-track {
        gap: 0;
    }

    .gallery-prev,
    .gallery-next {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        font-size: 28px;
    }

}

/*======================================================
  LOGO GRUPPO ITALIA POSE TECNICHE
======================================================*/

#gruppo .group-logo {
    background: #ffffff;
    padding: 20px 30px;
    border-radius: 6px;
}

#gruppo .group-logo img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}