:root {
    --yellow: #f5d300;
    --orange: #F2A007;
    --blue: #0474c4;
    --grey: #eae7dc;
    --darkgrey: #666666;
    --beige: #F5EEDE;
    --bordeaux: #92291F;
    --purple: #601d62;
    --black: #000000;
    --white: #ffffff;
    --red: #ff0000;
}

body {
    font-family: 'Lato', sans-serif !important;
    background-color: var(--white);
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Medium.ttf),
         url(../fonts/Lato-Regular.ttf),
         url(../fonts/Lato-Thin.ttf),
         url(../fonts/Lato-Light.ttf),
         url(../fonts/Lato-Bold.ttf);
}
@font-face {
    font-family: Nafta;
    src: url(../fonts/Nafta.ttf);
}
#menu-accessibilita {
    visibility: hidden;
    position: absolute;
    top: -20rem;
    left: -20rem;
}
.fancynavbar { position: fixed !important; background-color: var(--black); }
.fancynavbar-left .fancynavbar-collapse {
    left: 0 !important;
    right: auto !important;
}
@media (min-width: 992px) and (max-width: 1200px){
    .fancynavbar-left .fancynavbar-collapse { width: 70vw !important; }
}

/* Titoli, font e personalizzazioni testo */
h1, h2, h3, h4, h5, h6, .slideCol p {
    color: var(--black);
    font-family: 'Lato', serif !important;
    font-weight: 300;
    text-transform: uppercase;
}
.sviluppatore h1,
.inner-page-header h1 {
    width: 100%;
    font-size: 6rem !important;
    font-family: 'Nafta', serif !important;
    letter-spacing: 0.2em;
    line-height: 1.2em;
    transform: rotate(-8deg);
    color: var(--black);
    padding-top: 0.5rem;
    word-wrap: break-word;
}
.accentata { position: relative; }
.accento {
    position: absolute;
    rotate: 100deg;
    top: -3rem;
    right: 2rem;
}
@media (max-width: 1279px) {
    .inner-page-header h1 br { display: none; }
}
@media (max-width: 767px) {
    .accento { top: -2rem; }
}
h2 { font-size: 4.5rem; word-wrap: break-word; }
.pagine-esplicative h2 { font-size: 3.5rem !important; letter-spacing: 5px; margin-bottom: 1.5rem; } /* per tutte le pagine interne che prima erano in sidebar */

h3 { font-size: 3rem; }
h6 { font-size: 1rem; }
section p, section ul { font-size: 1.2rem; color: var(--black); line-height: 1.6em; }
section p a, section ul a { text-decoration: underline !important; color: var(--blue) !important; }

.gwd-btn {
  display: inline-block;
  padding: 1em;
  border-radius: 5px;
  text-decoration: none;
}
.btn-yellow {
    color: var(--black);
    background-color: var(--yellow);
    border: 1px solid var(--yellow);
}
.btn-yellow:hover {
    color: var(--yellow);;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--yellow);
}
.btn-black {
    font-size: 1.2em;
    color: var(--yellow);
    background-color: var(--black);
    border: 1px solid var(--black);
}
.btn-black:hover {
    color: var(--black);;
    background-color: var(--yellow);
    border: 1px solid var(--black);
}
.btn-white, .hs-button {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--white);
}
.btn-white:hover {
    color: var(--blue);
    border: 1px solid var(--white); 
}
.btn-blue {
    color: var(--white);;
    background-color: var(--blue);
    border: 2px solid var(--blue);
}
.btn-blue:hover {
    color: var(--blue);;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--blue);
}

p.lead { color: var(--black); }

/* Fine titoli, font e personalizzazioni testo */

/* Contenitori */
/*.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm { width: 99% !important; }*/



/*==============================================
============= HOME PAGE =================
==============================================*/

#bicycleHeader,
#portfolio-hp,
.inner-page-header { background-color: var(--yellow); }
#cosa-posso-fare,
#portfolioClients,
#contact-form-hp { background-color: var(--blue); }

.sviluppatore .col-lg-7 { width: 100% !important; }
/* Fine contenitori */

#bicycleHeader .bg-holder {
    width: 45%;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
}

.sviluppatore p,
.inner-page-header p {
    width: 56%;
    line-height: 1.3em;
    color: var(--black);
    background-color: var(--yellow);
    border: 3px solid var(--black);
    border-radius: 10px;
}
.sviluppatore .py-8 { padding-top: 0 !important; }
.home .container-fluid { max-width: 1600px; }
@media (max-width: 1399px) {
    .sviluppatore h1 { margin-top: 5rem; }
    .home #contact-form-hp textarea { margin-top: 1.8rem !important; }
}
@media (max-width: 1023px) {
    .inner-page-header p { width: 100%; }
}
@media (orientation: portrait) {
    .sviluppatore .container-sm, .container { width: calc(97% - 2rem) !important; padding-left: 0 !important; padding-right: 0 !important; }
    #bicycleHeader .bg-holder { width: 50% !important; }
    .sviluppatore h1 { padding: 0 0 0 2rem; }
    .sviluppatore .min-vh-100 { min-height: 80vh !important; }
    .sviluppatore .col-lg-7 { position: absolute; top: 9rem; left: 0; }
    .sviluppatore .fs-sm-5 { font-size: 6.5rem !important; }
    .sviluppatore .py-8 { padding: 1.5rem 1rem 0 !important; }
    .sviluppatore p { width: 53%; margin-top: 5rem; padding-left: 2rem; }
}
@media (max-width: 1023px) {
    .home .row { --sparrow-gutter-x: 0 !important; }
    .sviluppatore .min-vh-100 { min-height: 75vh !important; }
    .sviluppatore .container { width: calc(97% - 2rem) !important;}
    .sviluppatore .py-8 { padding-top: 5rem !important; }
}
@media (max-width: 979px) {
    .sviluppatore .min-vh-100 { min-height: 46vh !important; }
    section.sviluppatore.py-0 { padding-bottom: 7.5rem !important; }
    .sviluppatore .container { padding-left: 0 !important; }
    .sviluppatore .overflow-hidden:nth-child(2) { display: none; }
    .sviluppatore .fs-sm-5 { font-size: 5.5rem !important; margin-top: 1.5rem; }
}
@media (max-width: 767px) {
    .sviluppatore .container-sm, .sviluppatore .container { max-width: none !important; }
}
@media (max-width: 639px) {
    .sviluppatore .container { padding: 0 !important; }
    #bicycleHeader .bg-holder { width: 90%; }
    .sviluppatore .py-8 { padding: 0 !important; }
    .sviluppatore .col-lg-7 { width: 100% !important; }
    .sviluppatore .fs-sm-5, .inner-page-header .fs-sm-5 { font-size: 3.8rem !important; word-wrap: break-word; }
    .sviluppatore p { width: 100%; padding: 0 2rem; }
    #portfolio-hp .col-md-4 { width: 100% !important; }
}
@media (max-width: 479px) {
    #bicycleHeader .bg-holder { width: 80%; }
    .sviluppatore .col-lg-7 { top: 5rem !important; }
    .sviluppatore .fs-sm-5 { font-size: 2.8rem !important; }
    .sviluppatore p { font-size: 1.4rem !important; margin-top: 3.5rem; padding: 0 1rem; }
}

#gabdam {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.position-relative { position: relative; }

.cosa-posso {
    width: 33.333333333%;
    position: relative;
}

@media (max-width: 1279px) {
    #cosa-posso-fare { display: block; }
    #cosa-posso-fare img {
        max-width: 125px;
        display: inline-flex;
    }
    #cosa-posso-fare h3 {
        display: inline-flex;
        font-size: 3.5rem;
        text-align: center;
        vertical-align: middle;
        margin: 0 0 0 2rem;
    }
    .mt-md-0 {
        width: 100%; /* Make cards wider on smaller screens */
        max-width: 1023px; /* Limit maximum width */
        margin-top: 75px !important;
    }

}
@media (max-width: 979px) {
    #cosa-posso-fare img {
        max-width: 100px;
        display: inline-block;
    }
}
@media (max-width: 479px) {
    #cosa-posso-fare h2 { font-size: 3.3rem; }
    .mt-4 { margin-top: -7.5rem; }
}
@media (max-width: 379px) { /* NOTA: DEVI ULTIMARE QUESTA PARTE PER I TELEFONI CON RISOLUZIONE PIù BASSA. GLI SPAZI VERTICALI SONO TROPPI E GLI EFFETTI HOVER SI SOVRAPPONGONO */
    .mt-4 { margin-top: -7.5rem; } 
}

.btn-hp {
    font-size: 1.2em;
    position: relative;
    display: block;
    color: var(--black);
    margin: 0 0 30px;
    border: 2px solid var(--black);
    padding: 15px;
    text-transform: uppercase;
    overflow: hidden;
    transition: 1s all ease;
}
.btn-hp::before {
    background: var(--black);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    transition: all 0.6s ease;
}
.btn-effect::before { width: 0%; height: 100%; }
.btn-effect:hover::before { width: 100%; }
.btn-hp:hover { color: var(--white); text-decoration: none; }

/* Portfolio  e Cosa Posso Fare Section */

#cosa-posso-fare .bg-holder {
    padding: 1.5rem;
    border: 5px solid var(--white);
    border-radius: 15px;
}
.cosa-posso-container { max-height: 85vh;}
#cosa-posso-fare img { width: 60%; margin-top: 2rem; }
#portfolio-hp img { width: 100%; }
.portfolio-container { max-height: 75vh; }
.portfolio-text { background-color: rgba(0, 0, 0, 0.9); }
.portfolio-text,
.cosa-posso-text {
    transition: transform 0.8s ease, background-color 0.8s ease;
    transform: translate(0, 100%);
}
.portfolio-container:hover .portfolio-text,
.cosa-posso-container:hover .cosa-posso-text {
    transform: translate(0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}
.cosa-posso-container:hover .cosa-posso-text { background-color: var(--white); }
.cosa-posso-text p { margin-bottom: 0; }

@media (max-width:499px) {
    .portfolio-container { height: 288px; }
    .portfolio-text { height: 100%; }
    .portfolio-text.py-8 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    .portfolio-text h2 { font-size: 1.5rem !important; }
    .portfolio-text .btn-yellow { margin-left: 1rem; margin-right: 1rem; }
    #page-portfolio .webdesign h5 { font-size: 1.3rem !important; }
}
@media (min-width:500px) and (max-width:767px) {
  .cosa-posso-container { height: 250px; }
  .cosa-posso-text {
    height: 100%;
    padding-top: 3.5rem !important;
    padding-bottom: 1rem !important;
  }
}


@media (max-width:1279px) {
    .cosa-posso-text,
    .portfolio-text  {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        padding: 0 1rem !important;
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    #bicycleHeader .bg-holder { width: 38% !important; }
    .cosa-posso-container { height: 215px; }
    .portfolio-container { height: 450px; max-height: none; }
    #cosa-posso-fare .bg-holder {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #cosa-posso-fare h3 { order: 2; line-height: 2.8em; }
    #cosa-posso-fare img { order: 1; margin-top: 0; }
    #portfolio-hp .col-md-4,
    #cosa-posso-fare .col-md-4 {
        width: 90%;
        max-width: 90%;
        text-align: center;
        margin: 0 auto;
    }
    #cosa-posso-fare .col-md-4 { margin: 0; }
    #cosa-posso-fare .row.m-0 { justify-content: center; }
    .cosa-posso-text.py-7,
    .portfolio-text.py-8 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    #cosa-posso-fare .cosa-posso-text h3 { display: none; }
}
@media (min-width:1280px) and (max-width:1399px) {
    .cosa-posso-container .cosa-posso-text.px-5 { padding-right: 2rem !important; padding-left: 2rem !important; }
}
@media (max-width:767px) {
    #cosa-posso-fare .mt-md-0 { margin-top: 0 !important; }
    .cosa-posso-container { max-height: none; margin-bottom: 50px; }
    #cosa-posso-fare h3 { margin-left: 0; display: block; font-size: 2.8rem; }
    #cosa-posso-fare .cosa-posso-text h3 { display: none; }
    .cosa-posso-text.py-7,
    .portfolio-text.py-8 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .cosa-posso-text.px-5 { padding-right: 1rem !important; padding-left: 1rem !important; }
}

/* Fine del Portfolio Section */


/* Contact form HP */
#contact-form-hp h3 { font-weight: 400; word-wrap: break-word; }
#contact-form-hp label { display: flex; position: relative; }
#contact-form-hp textarea,
#contact-form-hp button {
    position: relative;
    width: 100%;
    font-size: 1.2rem;
    color: var(--blue);
}
#contact-form-hp button:hover {color: var(--white); background-color: var(--blue); }
#contact-form-hp textarea { height: 7.5rem; }
#contact-form-hp label p, #contact-form-hp label a { color: var(--white) !important; }
#contact-form-hp label p {
    margin-top: 0.7rem;
    font-size: 1.2rem;
    letter-spacing: normal;
}
#contact-form-hp label.privacy p {
    margin: -2px 0 0 10px;
    font-size: 1rem;
    text-align: left;
}
@media (max-width: 1023px) {
    #contact-form-hp { padding-left: 2rem; padding-right: 2rem; }
    #contact-form-hp h2 { font-size: 3rem; }
    #contact-form-hp .col-4 { width: 100%; }
    #contact-form-hp .col-4:nth-child(odd) { order: 2; }
    #contact-form-hp .col-4:nth-child(even) { order: 1; }
    #contact-form-hp input[type="checkbox"] { height: 1.6rem; }
}
/* Fine contact form HP */


/*==============================================
============= Footer =================
==============================================*/
.newsletter-title { font-size: 1rem !important; }
#mc_embed_signup form { margin: 0 !important; }
#mc_embed_signup input {
    border: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
#mc-embedded-subscribe { margin: 0 !important; }
.value-darkgrey { color: var(--darkgrey); }
#mc_embed_signup .mc-field-group.input-group ul li { line-height: 15px; }
#bicycleSignUp h4, #bicycleSignUp p, #bicycleSignUp ul, #bicycleSignUp a { color: var(--grey) !important; }
#mc_embed_signup .mc-field-group { padding-bottom: 0 !important; margin-bottom: 10px !important; }
#mc_embed_signup .foot { display: inline !important; }
#mc_embed_signup input.btn-white {
    color: var(--black);
    background-color: var(--white);
    width: 100% !important;
    border: 1px solid var(--white) !important;
    border-radius: 5px !important;
}
#mc_embed_signup input.btn-white:hover { color: var(--white); background-color: transparent !important; }
.img-fluid.logo-gwd-footer { max-width: 200px; }
.hbspt-form .hs-form__virality-link { display: none !important; }
#mc_embed_signup #mce-success-response { color: var(--white !important; )}


/*=============================================
============= Grazie =================
==============================================*/
#grazie, #grazie .bg-body,
#errore, #errore .bg-body { background-color: var(--yellow) !important; }
#grazie .swiper-slide,
#errore .swiper-slide { padding-bottom: 0 !important; }
#grazie .swiper-slide,
#errore .swiper-slide { position: relative; }
#grazie .swiper-slide img,
#errore .swiper-slide img { position: absolute; bottom: 0; left: 0; }
#grazie .align-items-center .fs-9,
#grazie .align-items-center .fs-9,
#errore .align-items-center .fs-9 { font-size: 1.2rem !important; }
#errore h6,
#grazie h6 { font-weight: 600;}

.error {
    background-color: var(--yellow);
    color: var(--red);
    padding: 8px 10px;
    margin: -10px 0 15px;
    font-weight: bold;
}

@media (max-width: 1023px) {
    #grazie .swiper-slide,
    #errore .swiper-slide { text-align: center; border-bottom: 1px solid var(--black); }
    #grazie .order-lg-2,
    #errore .order-lg-2 { display: none; }
    #grazie p.fs-9, #errore p.fs-9 { font-size: 1.5rem !important; }
    #grazie .align-items-center .fs-9,
    #errore .align-items-center .fs-9 { font-size: 2.5rem !important; }

}

/*==============================================
============= Contact page =================
==============================================*/
#form-contact-page input[type="phone"] { margin-bottom: 1.8rem; }
#form-contact-page label.privacy { position: relative; display: flex; }
#form-contact-page label.privacy input { margin: 0; }
#form-contact-page label.privacy p {
    margin: 1rem 0 0;
    padding-left: 0.7rem;
    font-size: 0.9rem
}
#form-contact-page label.privacy a { text-decoration: underline !important; color: var(--blue) !important; }

#page-contact .gab { position: relative; } 
#page-contact .gab img { position: absolute; bottom: 0; left: 20%; }

@media (max-width: 1023px) {
    #page-contact .gab { padding-top: 3rem; }
    #page-contact .gab img { position: sticky; width: 30%; left: 35%; }
}


/*==============================================
============= Chi sono page =================
==============================================*/
#chi-sono .bg-holder { background-image: url('../img/gabriele-web-designer-chi-sono.jpg'); background-position: top center; }

@media (max-width: 989px) {
    #chi-sono .sticky-top.py-9 { padding-top: 15rem !important; padding-bottom: 15rem !important; }
    #chi-sono .bg-holder { background-position: top; }
}


/*==============================================
============= 404 page =================
==============================================*/
#error-404 .bg-holder { background-image: url('../img/gabriele-web-designer-404.jpg'); background-position: bottom center; }
#error-404 .btn-black { color: var(--white); }
#error-404 .btn-black:hover { color: var(--black); background-color: var(--white); }

@media (max-width: 989px) {
    #error-404 .sticky-top.py-9 { padding-top: 15rem !important; padding-bottom: 15rem !important; }
}
@media (max-width: 1399px) {
    #error-404 .sticky-top.py-9 { padding-top: 30rem !important; padding-bottom: 30rem !important; }
}


/*==============================================
============= Portfolio page =================
==============================================*/
.isotope-item { visibility: visible !important; }
#page-portfolio h5 { font-size: 1.5rem !important; }
.isotope-nav { font-size: 1.2rem !important; font-weight: 500 !important; }

#page-casestudy .bg-holder { background-size: 100%; }

@media (min-width: 992px) {
    #page-casestudy .vh-lg-100 { height: auto !important; }
}
@media (max-width: 989px) {
    #page-casestudy .vh-50 { height: auto !important; padding-top: 50px; }
    #page-casestudy .pb-4 { padding-bottom: 13rem !important; }
    #page-casestudy .pt-8 { padding-top: 13rem !important; }
}
@media (max-width: 479px) {
    #page-casestudy h2 { font-size: 2.5rem; }
    #page-casestudy .pb-4 { padding-bottom: 6rem !important; }
    #page-casestudy .pt-8 { padding-top: 6rem !important; }
}


/*==============================================
============ Pagine interne design =============
==============================================*/
.inner-page-header .bg-holder {
    background-image: url("../img/headers/header-inner-page.png");
    background-size: auto;
    background-repeat: no-repeat;
    background-position: right bottom;
}
.pagine-esplicative section { padding: 2.5rem 0; }
.inner-page .col-lg-7 { width: 100% !important; }
.inner-page #contact-form-hp h3 { width: 75% !important; font-weight: 400; }
.inner-page .form-select { display: none !important; }

@media (max-width:1279px) {
    .inner-page-header .bg-holder { background-image: none; }
    .pagine-esplicative h2,
    #contact-form-hp h3 { font-size: 2.4rem !important; }
}
@media (max-width:1023px) { .inner-page #contact-form-hp h3 { width: 100% !important; } }

#defaultPricingPlan li { line-height: 1.3em; margin-bottom: 10px; }

#defaultPricingPlan { padding-bottom: 0 !important; }
#costi-sito-web { padding-top: 4.5rem !important; }
#defaultPricingPlan h2 { margin-bottom: 4.5rem !important; }
#defaultPricingPlan h4 { margin-bottom: 12px !important; }
.starting-price { padding-bottom: 12px; border-bottom: 1px solid var(--black); }