/*
Theme Name: ccwebdesign
Theme URI: 
Author: Carlo Campinoti
Author URI: 
Description: Our fantastic base theme
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cwd
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* ! Reset */
body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{padding-left: 20px;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #000}

body.admin-bar .header { position: fixed; top: 32px; z-index: 1000;}

.img-hero{
  background: url(custom/asset/images/hero.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.img-hero:after{
  content:' '; display: block;
  position: absolute;top: 0;left: 0;
  width: 100%;height: 100%;
  background: linear-gradient(180deg, rgba(0,17,27,0.7) 0%, rgba(0,17,27,0.5) 100%);
}
.img-contact{
  background: url(custom/asset/images/norway.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.img-contact:after{
  content:' '; display: block;
  position: absolute;top: 0;left: 0;
  width: 100%;height: 100%;
  background: linear-gradient(180deg, rgba(0,17,27,0.7) 0%, rgba(0,17,27,0) 100%);
}
.h-100{height: 100vh;}

/* ------------------------------------------------------------------------- *
/* 1 Base */
/* ------------------------------------------------------------------------- */

/* Typography */
body{font-size: 16px; background-color: var(--site-bg); color: var(--site-text-color); 
  font-family: 'Barlow'; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;}
body.custom-background.dark{background-color: var(--site-bg);}

/* ! Title System */
h1, h2, h3, h4, h5, h6, p, ol, ul{margin-bottom: 1rem;line-height: 1.2}

.text-0{font-size: 5rem; line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;line-height: 1.5rem}

.evi a{color:#fff!important; background-color: var(--link-color);border-radius: 100px;padding-left: 20px!important; padding-right: 20px!important;}

.yellow em{color:var(--link-color); font-style: normal;}
.yellow strong{color: var(--site-text-color); }

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
  h1, .text-1{font-size: 3rem;}
}

/* Link color */
a { color: var(--link-color); }
a:focus, a:hover { color: var(--link-color-hover); text-decoration: none; }

/* Button Link */
.wp-block-button__link{text-decoration: none!important;color:#fff}
.wp-block-button__link:hover{text-decoration: none!important;color:#fff}


/* ------------------------------------------------------------------------- *
/* 2 Layout */
/* ------------------------------------------------------------------------- */

.wrapper{width: 100%;padding: 0 3%;}

/* main{border: 1px solid red;padding:3% 0;}
article{border: 1px solid text-contrast;padding:3% 0;;}
footer{border: 1px solid green;padding:3% 0;} */

	
/* ------------------------------------------------------------------------- *
/* 2.1 Menu */
/* ------------------------------------------------------------------------- */

.spacer{height: 50px;}

.header{ background-color: var(--site-bg); position: fixed; top:0;  left:0; z-index: 9999; width: 100%;padding: 0px 4%;}
.header__content{width: 100%;margin: 0 auto; display: flex;justify-content: space-between; padding:10px 0;border-bottom: 1px solid #222}

.header__logo,
.header__quick{display: flex; align-items: center;color:var(--site-text-color);font-weight: bold;}
.header__quick a{color:var(--site-text-color);}

.header__logo-img{width: 180px;height: auto;}
.header__quick ul{list-style-type: none;margin-bottom: 0;}
.header__quick ul li{display: inline-block;}
.header__quick ul li a{padding: 10px 5px;}

.menu,
.menu ul{margin: 0;position: relative;}
.menu li{display: inline-block;position: relative}
.menu li a{color: var(--site-bg);display: block;padding: 16px;font-size: 15px;font-weight: bold;}

.icon-hamburger{display: none;}


@media (max-width: 1024px) {

  .header__logo-img{width: 140px;height: auto;}

  .menu{   
    position: absolute; top:60px; left:0; background-color: var(--site-bg); width: 100%; height: 100vh;  
    height: 0vh; overflow: hidden;transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .menu li{width: 100%;border-bottom: 1px solid #000}
  .menu li a {color: var(--site-text-color);}
  .menu-open .menu{height: 100vh;padding: 3%;}

  .icon-hamburger{height: 50px;width: 40px;margin-left: 20px;position:absolute; top: 10px; right:15px; display: block;border:none; background: transparent;}
  .icon-hamburger strong{height: 1px;margin-top:-1px; overflow: hidden;width: 1px;display: block;margin: 0;padding: 0;}
  .icon-hamburger span{height: 2px; width: 30px;background: var(--site-bg);position: relative;display: block;margin-bottom: 11px;transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}
  .scroll-down .icon-hamburger span{background: var(--site-text-color);}
  
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(3){transform: rotate(-45deg) translateY(-9px);}
  .header__content{padding-right: 50px;height: 60px;}
  .header__quick{display: flex; justify-content: flex-end;}
  .header__quick ul{padding-left: 0;}

}

@media (max-width: 400px) {
  .header__quick{display: none;}
} 


/* Menu transparent */
@media (min-width: 1024px) {
  .page-template-menu-trasparent .spacer{display: none;}
  .page-template-menu-trasparent .header{background: transparent;transition: all 1s cubic-bezier(.215, .61, .355, 1);}
  .page-template-menu-trasparent .header__content{border:none}
  .page-template-menu-trasparent .header__logo-img,
  .page-template-menu-trasparent .header [class^='icon-']{filter: brightness(0) invert(1);}
  .page-template-menu-trasparent .header__logo{color:#fff}

  .page-template-menu-trasparent .menu li a,
  .page-template-menu-trasparent .header__quick ul li a {color:#fff}

  .page-template-menu-trasparent.scroll-down .header{background: #222;}
}

@media (max-width: 1023px) {
  .page-template-menu-trasparent .spacer{height:44px}
  .page-template-menu-trasparent .header__content{border:none}
}

/* Menu black */
@media (min-width: 1024px) {
  .page-template-menu-black .spacer{display: none;}
  .page-template-menu-black .header{background: transparent;transition: all 1s cubic-bezier(.215, .61, .355, 1);}
  .page-template-menu-black .header__content{border:none}
 
  .page-template-menu-black.scroll-down .header{background-color: var(--site-bg)}
}

@media (max-width: 1024px) {
  .page-template-menu-black .spacer{height:44px}
  .page-template-menu-black .header__content{border:none}
} 


/* Menu Dropdown */
.menu li ul{background: #eee;visibility: hidden; opacity: 0; min-width: 200px; position: absolute; transition: all 0.5s ease; margin-top: 0px;left: 0; display: none;padding: 0;}
.menu li ul > li > a,
.page-template-menu-trasparent .menu li ul > li > a{color:#000}
.menu li ul > li > a:hover {background: #ccc;color:#000}


/* Open Dropdown */
@media (min-width: 1024px) {
  .menu li:hover > ul,
  .menu li ul:hover { visibility: visible; opacity: 1; display: block; }
}
.menu li.open-dropdown ul{visibility: visible; opacity: 1; display: block; }

.menu li ul li { clear: both; width: 100%; }
.menu > li.menu-item-has-children > a{position: relative;padding-right: 30px;}

.menu > li.menu-item-has-children > a::after{
  content:" ";width: 30px;height: 30px; background-size:30px;position: absolute;
  top:50%; right: 0; transform: rotate(90deg);margin-top: -15px;
  background-size:100%;
  background-image: url('data:image/svg+xml;utf8,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
}

@media (min-width: 1024px) {
  .page-template-menu-trasparent .menu > li.menu-item-has-children > a::after{
    background-image: url('data:image/svg+xml;utf8,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
    filter: invert(1);
  }
}


@media (max-width: 1024px) {

  .menu li ul{position: relative;background: none;}
  .menu li ul li{border:none}
  .menu li ul li a{padding-left: 30px;}
}


/* ------------------------------------------------------------------------- *
/* 2.2 Home */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- *
/* 2.3 Index */
/* ------------------------------------------------------------------------- */

	/* Single, Post & Page */
@media (max-width: 768px) {
  h1 span{display: block;}
}
 

/* ------------------------------------------------------------------------- *
/* 2.4 Sections */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- *
/* 2.6 Footer */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- *
/* 3 Modules */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- *
/* 4 WordPress Default Element */
/* ------------------------------------------------------------------------- */


/* Pagination */
.pagination { float: left; margin: 40px 0 40px 0; padding: 0; width: 100%; }
.pagination span,
.pagination a { float: left; margin: 0 10px 10px 0; padding: 14px 19px; border: 1px solid #222; }


/* Image */
.alignleft { float: left; margin-right: 20px; margin-bottom: 10px; max-width: 97%; height: auto; }
.alignright { float: right; margin-bottom: 10px; margin-left: 20px; max-width: 97%; height: auto; }
.aligncenter { display: block; margin: 0 auto; max-width: 97%; height: auto; }
.alignnone { max-width: 97%; height: auto; }

.text-center{text-align: center;}
@media (max-width: 768px) {
  .sma-text-center{float:none; text-align: center;}
}



body .alignfull {
  margin-left: -20px;
  margin-right: -20px;
}

@media only screen and (min-width: 960px) {
  body .alignfull {
    width: auto;
    max-width: 1000%;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
  body .alignwide {
    width: auto;
    max-width: 1000%;
    margin-right: calc(25% - 25vw);
    margin-left: calc(25% - 25vw);
  }
  .alignwide img,
  .alignfull img {
    display: block;
    margin: 0 auto;
  }
}

/* Image Caption */
.wp-caption { margin-bottom: 20px; padding: 10px; max-width: 97%; border: 1px solid #eee; text-align: center; }
.wp-caption img { margin: 0; padding: 0; width: 100%!important; height: auto; border: 0 none; }
.wp-caption p.wp-caption-text { margin: 0; padding: 8px; font-size: 1em; line-height: 17px; }

.gallery-caption{font-size: 20px;}

/* Stiky */
.sticky { border-right: 3px solid #eee; border-bottom: 3px solid #eee; }

/* Blockquote */
blockquote {font-weight: 200;  font-style: italic; margin: 0.25em 0; padding: 0px 30px; line-height: 1.45; position: relative;  border-left: 5px solid #222; }

/* Search */
.form-search{width: 100%;border-radius: 100px; border: 1px solid #e4e4e4; padding-left: 15px;position: relative;background:#fff;margin-bottom: 30px;padding: 5px;}
.form-search input[type=text]{width: 100%; border:none;background: transparent!important;font-size: 18px;}
.form-search button[type=submit]{padding: 0; border: none;background: transparent;color:#000;padding: 0px;border-radius:20px; position:absolute; top: 8px; right:20px;}
.form-search button[type=submit] svg{width: 30px; height:30px}

/* Comments */
.comment-form-author,
.comment-form-email,
.comment-form-url { float: left; margin-top: 20px; margin-right: 3%; width: 30.3333333%; }
.comment-form-author input,
.comment-form-email input,
.comment-form-url input { width: 100%; }

ol.commentlist { margin: 0 0 1em; padding: 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment { padding: 1em;}
ol.commentlist li.comment div.vcard cite.fn { text-transform: uppercase; font-size: 14px; }
ol.commentlist li.comment div.vcard img.avatar { float: left; margin: 6px 1em 1em 0; border-radius: 50px; }
ol.commentlist li.comment div.comment-meta { font-size: 12px; }
ol.commentlist li.comment ul { margin: 0 0 1em 2em; }
ol.commentlist li.comment div.reply { margin-left: 80px; font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { margin: 1em 0 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment ul.children li.depth-2 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.comment ul.children li.depth-3 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.comment ul.children li.depth-4 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.bypostauthor .fn { font-weight: bold; }
ol.commentlist li img{max-width: 97%;}

input[type=text],
input[type=number],
input[type=tel],
input[type=password],
input[type=email],
input[type=url]{ width: 100%; padding: 10px; border: 1px solid #949494; background: #fff; -webkit-appearance: none;border-radius: 0;margin-top:5px}
textarea { padding: 10px; width: 100%; border: 1px solid #949494; background: #fff; -webkit-appearance: none;border-radius: 0;margin-top:5px}
input[type=submit],
button[type=submit] { margin-top: 10px; padding: 15px 20px; color: #fff; text-transform: uppercase; background: #222; border:none;margin-top:5px;display: block;font-weight: bold;width: auto;}
#comments { width: 100%; }


/* ------------------------------------------------------------------------- *
/* 5 Helpers  */
/* ------------------------------------------------------------------------- */

figure{width: 100%; height: 100%;}
figure img,
figure a,
figure a img{width: 100%;height: 100%!important;object-fit: cover;}
/* ! Grid System */
.grid { margin: 0 auto;display: flex; flex-flow: row; flex-wrap: wrap;width: 100%;max-width: 1600px;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 1%;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-10{ width: 10%;}
.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-40{ width: 40%; }
.col-50{ width: 50%; }
.col-60{ width: 60%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-90{ width: 90%; }
.col-100{ width: 100%; }


/* Margin-bottom positivi con clamp */
.mb-0{margin-bottom: 0 !important;}
.mb-1  { margin-bottom: clamp(0.5rem, 1vw, 1rem) !important; }
.mb-2  { margin-bottom: clamp(1rem, 2vw, 2rem) !important; }
.mb-3  { margin-bottom: clamp(1.5rem, 3vw, 3rem) !important; }
.mb-4  { margin-bottom: clamp(2rem, 4vw, 4rem) !important; }
.mb-5  { margin-bottom: clamp(2.5rem, 5vw, 5rem) !important; }
.mb-6  { margin-bottom: clamp(3rem, 6vw, 6rem) !important; }
.mb-7  { margin-bottom: clamp(3.5rem, 7vw, 7rem) !important; }
.mb-8  { margin-bottom: clamp(4rem, 8vw, 8rem) !important; }
.mb-9  { margin-bottom: clamp(4.5rem, 9vw, 9rem) !important; }
.mb-10 { margin-bottom: clamp(5rem, 10vw, 10rem) !important; }
.mb-11 { margin-bottom: clamp(5.5rem, 11vw, 11rem) !important; }
.mb-12 { margin-bottom: clamp(6rem, 12vw, 12rem) !important; }
.mb-13 { margin-bottom: clamp(6.5rem, 13vw, 13rem) !important; }
.mb-14 { margin-bottom: clamp(7rem, 14vw, 14rem) !important; }
.mb-15 { margin-bottom: clamp(7.5rem, 15vw, 15rem) !important; }

/* Margin-bottom negativi con clamp */
.mb--1  { margin-bottom: clamp(-1rem, -1vw, -0.5rem) !important; }
.mb--2  { margin-bottom: clamp(-2rem, -2vw, -1rem) !important; }
.mb--3  { margin-bottom: clamp(-3rem, -3vw, -1.5rem) !important; }
.mb--4  { margin-bottom: clamp(-4rem, -4vw, -2rem) !important; }
.mb--5  { margin-bottom: clamp(-5rem, -5vw, -2.5rem) !important; }
.mb--6  { margin-bottom: clamp(-6rem, -6vw, -3rem) !important; }
.mb--7  { margin-bottom: clamp(-7rem, -7vw, -3.5rem) !important; }
.mb--8  { margin-bottom: clamp(-8rem, -8vw, -4rem) !important; }
.mb--9  { margin-bottom: clamp(-9rem, -9vw, -4.5rem) !important; }
.mb--10 { margin-bottom: clamp(-10rem, -10vw, -5rem) !important; }
.mb--11 { margin-bottom: clamp(-11rem, -11vw, -5.5rem) !important; }
.mb--12 { margin-bottom: clamp(-12rem, -12vw, -6rem) !important; }
.mb--13 { margin-bottom: clamp(-13rem, -13vw, -6.5rem) !important; }
.mb--14 { margin-bottom: clamp(-14rem, -14vw, -7rem) !important; }
.mb--15 { margin-bottom: clamp(-15rem, -15vw, -7.5rem) !important; }
.mb--16 { margin-bottom: clamp(-16rem, -16vw, -8rem) !important; }

/* === Responsive Margin Right === */
.mr-1  { margin-right: clamp(0.5rem, 1vw, 1rem) !important; }
.mr-2  { margin-right: clamp(1rem, 2vw, 2rem) !important; }
.mr-3  { margin-right: clamp(1.5rem, 3vw, 3rem) !important; }
.mr-4  { margin-right: clamp(2rem, 4vw, 4rem) !important; }
.mr-5  { margin-right: clamp(2.5rem, 5vw, 5rem) !important; }
.mr-6  { margin-right: clamp(3rem, 6vw, 6rem) !important; }
.mr-7  { margin-right: clamp(3.5rem, 7vw, 7rem) !important; }
.mr-8  { margin-right: clamp(4rem, 8vw, 8rem) !important; }
.mr-9  { margin-right: clamp(4.5rem, 9vw, 9rem) !important; }
.mr-10 { margin-right: clamp(5rem, 10vw, 10rem) !important; }
.mr-11 { margin-right: clamp(5.5rem, 11vw, 11rem) !important; }
.mr-12 { margin-right: clamp(6rem, 12vw, 12rem) !important; }
.mr-13 { margin-right: clamp(6.5rem, 13vw, 13rem) !important; }
.mr-14 { margin-right: clamp(7rem, 14vw, 14rem) !important; }
.mr-15 { margin-right: clamp(7.5rem, 15vw, 15rem) !important; }

/* === Responsive Margin Right Negative === */
.mr--1  { margin-right: clamp(-1rem, -1vw, -0.5rem) !important; }
.mr--2  { margin-right: clamp(-2rem, -2vw, -1rem) !important; }
.mr--3  { margin-right: clamp(-3rem, -3vw, -1.5rem) !important; }
.mr--4  { margin-right: clamp(-4rem, -4vw, -2rem) !important; }
.mr--5  { margin-right: clamp(-5rem, -5vw, -2.5rem) !important; }
.mr--6  { margin-right: clamp(-6rem, -6vw, -3rem) !important; }
.mr--7  { margin-right: clamp(-7rem, -7vw, -3.5rem) !important; }
.mr--8  { margin-right: clamp(-8rem, -8vw, -4rem) !important; }
.mr--9  { margin-right: clamp(-9rem, -9vw, -4.5rem) !important; }
.mr--10 { margin-right: clamp(-10rem, -10vw, -5rem) !important; }
.mr--11 { margin-right: clamp(-11rem, -11vw, -5.5rem) !important; }
.mr--12 { margin-right: clamp(-12rem, -12vw, -6rem) !important; }
.mr--13 { margin-right: clamp(-13rem, -13vw, -6.5rem) !important; }
.mr--14 { margin-right: clamp(-14rem, -14vw, -7rem) !important; }
.mr--15 { margin-right: clamp(-15rem, -15vw, -7.5rem) !important; }
.mr--16 { margin-right: clamp(-16rem, -16vw, -8rem) !important; }

/* === Responsive Margin (All sides) === */
.m-0{margin:0px !important;}
.m-1  { margin: clamp(0.5rem, 1vw, 1rem) !important; }
.m-2  { margin: clamp(1rem, 2vw, 2rem) !important; }
.m-3  { margin: clamp(1.5rem, 3vw, 3rem) !important; }
.m-4  { margin: clamp(2rem, 4vw, 4rem) !important; }
.m-5  { margin: clamp(2.5rem, 5vw, 5rem) !important; }
.m-6  { margin: clamp(3rem, 6vw, 6rem) !important; }
.m-7  { margin: clamp(3.5rem, 7vw, 7rem) !important; }
.m-8  { margin: clamp(4rem, 8vw, 8rem) !important; }
.m-9  { margin: clamp(4.5rem, 9vw, 9rem) !important; }
.m-10 { margin: clamp(5rem, 10vw, 10rem) !important; }
.m-11 { margin: clamp(5.5rem, 11vw, 11rem) !important; }
.m-12 { margin: clamp(6rem, 12vw, 12rem) !important; }
.m-13 { margin: clamp(6.5rem, 13vw, 13rem) !important; }
.m-14 { margin: clamp(7rem, 14vw, 14rem) !important; }
.m-15 { margin: clamp(7.5rem, 15vw, 15rem) !important; }

/* === Responsive Margin Negative (All sides) === */
.m--1  { margin: clamp(-1rem, -1vw, -0.5rem) !important; }
.m--2  { margin: clamp(-2rem, -2vw, -1rem) !important; }
.m--3  { margin: clamp(-3rem, -3vw, -1.5rem) !important; }
.m--4  { margin: clamp(-4rem, -4vw, -2rem) !important; }
.m--5  { margin: clamp(-5rem, -5vw, -2.5rem) !important; }
.m--6  { margin: clamp(-6rem, -6vw, -3rem) !important; }
.m--7  { margin: clamp(-7rem, -7vw, -3.5rem) !important; }
.m--8  { margin: clamp(-8rem, -8vw, -4rem) !important; }
.m--9  { margin: clamp(-9rem, -9vw, -4.5rem) !important; }
.m--10 { margin: clamp(-10rem, -10vw, -5rem) !important; }
.m--11 { margin: clamp(-11rem, -11vw, -5.5rem) !important; }
.m--12 { margin: clamp(-12rem, -12vw, -6rem) !important; }
.m--13 { margin: clamp(-13rem, -13vw, -6.5rem) !important; }
.m--14 { margin: clamp(-14rem, -14vw, -7rem) !important; }
.m--15 { margin: clamp(-15rem, -15vw, -7.5rem) !important; }
.m--16 { margin: clamp(-16rem, -16vw, -8rem) !important; }
.m-auto { margin: 0 auto !important; }

.mx-auto{margin-left:auto ;margin-right: auto;}

/* === Responsive Margin Left === */
.ml-10px{margin-left: 10px;}
.ml-0{margin-left: 0px !important;}
.ml-1  { margin-left: clamp(0.5rem, 1vw, 1rem) !important; }
.ml-2  { margin-left: clamp(1rem, 2vw, 2rem) !important; }
.ml-3  { margin-left: clamp(1.5rem, 3vw, 3rem) !important; }
.ml-4  { margin-left: clamp(2rem, 4vw, 4rem) !important; }
.ml-5  { margin-left: clamp(2.5rem, 5vw, 5rem) !important; }
.ml-6  { margin-left: clamp(3rem, 6vw, 6rem) !important; }
.ml-7  { margin-left: clamp(3.5rem, 7vw, 7rem) !important; }
.ml-8  { margin-left: clamp(4rem, 8vw, 8rem) !important; }
.ml-9  { margin-left: clamp(4.5rem, 9vw, 9rem) !important; }
.ml-10 { margin-left: clamp(5rem, 10vw, 10rem) !important; }
.ml-11 { margin-left: clamp(5.5rem, 11vw, 11rem) !important; }
.ml-12 { margin-left: clamp(6rem, 12vw, 12rem) !important; }
.ml-13 { margin-left: clamp(6.5rem, 13vw, 13rem) !important; }
.ml-14 { margin-left: clamp(7rem, 14vw, 14rem) !important; }
.ml-15 { margin-left: clamp(7.5rem, 15vw, 15rem) !important; }

/* === Responsive Margin Left Negative === */
.ml--1  { margin-left: clamp(-1rem, -1vw, -0.5rem) !important; }
.ml--2  { margin-left: clamp(-2rem, -2vw, -1rem) !important; }
.ml--3  { margin-left: clamp(-3rem, -3vw, -1.5rem) !important; }
.ml--4  { margin-left: clamp(-4rem, -4vw, -2rem) !important; }
.ml--5  { margin-left: clamp(-5rem, -5vw, -2.5rem) !important; }
.ml--6  { margin-left: clamp(-6rem, -6vw, -3rem) !important; }
.ml--7  { margin-left: clamp(-7rem, -7vw, -3.5rem) !important; }
.ml--8  { margin-left: clamp(-8rem, -8vw, -4rem) !important; }
.ml--9  { margin-left: clamp(-9rem, -9vw, -4.5rem) !important; }
.ml--10 { margin-left: clamp(-10rem, -10vw, -5rem) !important; }
.ml--11 { margin-left: clamp(-11rem, -11vw, -5.5rem) !important; }
.ml--12 { margin-left: clamp(-12rem, -12vw, -6rem) !important; }
.ml--13 { margin-left: clamp(-13rem, -13vw, -6.5rem) !important; }
.ml--14 { margin-left: clamp(-14rem, -14vw, -7rem) !important; }
.ml--15 { margin-left: clamp(-15rem, -15vw, -7.5rem) !important; }
.ml--16 { margin-left: clamp(-16rem, -16vw, -8rem) !important; }

/* === Responsive Margin Top === */
.mt-0 {margin-top:0 !important;}
.mt-1  { margin-top: clamp(0.5rem, 1vw, 1rem) !important; }
.mt-2  { margin-top: clamp(1rem, 2vw, 2rem) !important; }
.mt-3  { margin-top: clamp(1.5rem, 3vw, 3rem) !important; }
.mt-4  { margin-top: clamp(2rem, 4vw, 4rem) !important; }
.mt-5  { margin-top: clamp(2.5rem, 5vw, 5rem) !important; }
.mt-6  { margin-top: clamp(3rem, 6vw, 6rem) !important; }
.mt-7  { margin-top: clamp(3.5rem, 7vw, 7rem) !important; }
.mt-8  { margin-top: clamp(4rem, 8vw, 8rem) !important; }
.mt-9  { margin-top: clamp(4.5rem, 9vw, 9rem) !important; }
.mt-10 { margin-top: clamp(5rem, 10vw, 10rem) !important; }
.mt-11 { margin-top: clamp(5.5rem, 11vw, 11rem) !important; }
.mt-12 { margin-top: clamp(6rem, 12vw, 12rem) !important; }
.mt-13 { margin-top: clamp(6.5rem, 13vw, 13rem) !important; }
.mt-14 { margin-top: clamp(7rem, 14vw, 14rem) !important; }
.mt-15 { margin-top: clamp(7.5rem, 15vw, 15rem) !important; }

/* === Responsive Margin Top Negative === */
.mt--1  { margin-top: clamp(-1rem, -1vw, -0.5rem) !important; }
.mt--2  { margin-top: clamp(-2rem, -2vw, -1rem) !important; }
.mt--3  { margin-top: clamp(-3rem, -3vw, -1.5rem) !important; }
.mt--4  { margin-top: clamp(-4rem, -4vw, -2rem) !important; }
.mt--5  { margin-top: clamp(-5rem, -5vw, -2.5rem) !important; }
.mt--6  { margin-top: clamp(-6rem, -6vw, -3rem) !important; }
.mt--7  { margin-top: clamp(-7rem, -7vw, -3.5rem) !important; }
.mt--8  { margin-top: clamp(-8rem, -8vw, -4rem) !important; }
.mt--9  { margin-top: clamp(-9rem, -9vw, -4.5rem) !important; }
.mt--10 { margin-top: clamp(-10rem, -10vw, -5rem) !important; }
.mt--11 { margin-top: clamp(-11rem, -11vw, -5.5rem) !important; }
.mt--12 { margin-top: clamp(-12rem, -12vw, -6rem) !important; }
.mt--13 { margin-top: clamp(-13rem, -13vw, -6.5rem) !important; }
.mt--14 { margin-top: clamp(-14rem, -14vw, -7rem) !important; }
.mt--15 { margin-top: clamp(-15rem, -15vw, -7.5rem) !important; }
.mt--16 { margin-top: clamp(-16rem, -16vw, -8rem) !important; }

/* === Responsive Padding Top === */
.pt-0{padding-top: 0 !important;}
.pt-1  { padding-top: clamp(0.5rem, 1vw, 1rem) !important; }
.pt-2  { padding-top: clamp(1rem, 2vw, 2rem) !important; }
.pt-3  { padding-top: clamp(1.5rem, 3vw, 3rem) !important; }
.pt-4  { padding-top: clamp(2rem, 4vw, 4rem) !important; }
.pt-5  { padding-top: clamp(2.5rem, 5vw, 5rem) !important; }
.pt-6  { padding-top: clamp(3rem, 6vw, 6rem) !important; }
.pt-7  { padding-top: clamp(3.5rem, 7vw, 7rem) !important; }
.pt-8  { padding-top: clamp(4rem, 8vw, 8rem) !important; }
.pt-9  { padding-top: clamp(4.5rem, 9vw, 9rem) !important; }
.pt-10 { padding-top: clamp(5rem, 10vw, 10rem) !important; }
.pt-11 { padding-top: clamp(5.5rem, 11vw, 11rem) !important; }
.pt-12 { padding-top: clamp(6rem, 12vw, 12rem) !important; }
.pt-13 { padding-top: clamp(6.5rem, 13vw, 13rem) !important; }
.pt-14 { padding-top: clamp(7rem, 14vw, 14rem) !important; }
.pt-15 { padding-top: clamp(7.5rem, 15vw, 15rem) !important; }

/* === Responsive Padding Bottom === */
.pb-0{padding-bottom: 0 !important;}
.pb-1  { padding-bottom: clamp(0.5rem, 1vw, 1rem) !important; }
.pb-2  { padding-bottom: clamp(1rem, 2vw, 2rem) !important; }
.pb-3  { padding-bottom: clamp(1.5rem, 3vw, 3rem) !important; }
.pb-4  { padding-bottom: clamp(2rem, 4vw, 4rem) !important; }
.pb-5  { padding-bottom: clamp(2.5rem, 5vw, 5rem) !important; }
.pb-6  { padding-bottom: clamp(3rem, 6vw, 6rem) !important; }
.pb-7  { padding-bottom: clamp(3.5rem, 7vw, 7rem) !important; }
.pb-8  { padding-bottom: clamp(4rem, 8vw, 8rem) !important; }
.pb-9  { padding-bottom: clamp(4.5rem, 9vw, 9rem) !important; }
.pb-10 { padding-bottom: clamp(5rem, 10vw, 10rem) !important; }
.pb-11 { padding-bottom: clamp(5.5rem, 11vw, 11rem) !important; }
.pb-12 { padding-bottom: clamp(6rem, 12vw, 12rem) !important; }
.pb-13 { padding-bottom: clamp(6.5rem, 13vw, 13rem) !important; }
.pb-14 { padding-bottom: clamp(7rem, 14vw, 14rem) !important; }
.pb-15 { padding-bottom: clamp(7.5rem, 15vw, 15rem) !important; }
.pb-16 { padding-bottom: clamp(8rem, 16vw, 16rem) !important; }
.pb-17 { padding-bottom: clamp(8.5rem, 17vw, 17rem) !important; }
.pb-18 { padding-bottom: clamp(9rem, 18vw, 18rem) !important; }
.pb-19 { padding-bottom: clamp(9.5rem, 19vw, 19rem) !important; }
.pb-20 { padding-bottom: clamp(10rem, 20vw, 20rem) !important; }


/* === Responsive Padding Left === */
.pl-0 { padding-left: 0 !important; }
.pl-1  { padding-left: clamp(0.5rem, 1vw, 1rem) !important; }
.pl-2  { padding-left: clamp(1rem, 2vw, 2rem) !important; }
.pl-3  { padding-left: clamp(1.5rem, 3vw, 3rem) !important; }
.pl-4  { padding-left: clamp(2rem, 4vw, 4rem) !important; }
.pl-5  { padding-left: clamp(2.5rem, 5vw, 5rem) !important; }
.pl-6  { padding-left: clamp(3rem, 6vw, 6rem) !important; }
.pl-7  { padding-left: clamp(3.5rem, 7vw, 7rem) !important; }
.pl-8  { padding-left: clamp(4rem, 8vw, 8rem) !important; }
.pl-9  { padding-left: clamp(4.5rem, 9vw, 9rem) !important; }
.pl-10 { padding-left: clamp(5rem, 10vw, 10rem) !important; }
.pl-11 { padding-left: clamp(5.5rem, 11vw, 11rem) !important; }
.pl-12 { padding-left: clamp(6rem, 12vw, 12rem) !important; }
.pl-13 { padding-left: clamp(6.5rem, 13vw, 13rem) !important; }
.pl-14 { padding-left: clamp(7rem, 14vw, 14rem) !important; }
.pl-15 { padding-left: clamp(7.5rem, 15vw, 15rem) !important; }

/* === Responsive Padding Right === */
.pr-0 { padding-right: 0 !important; }
.pr-1  { padding-right: clamp(0.5rem, 1vw, 1rem) !important; }
.pr-2  { padding-right: clamp(1rem, 2vw, 2rem) !important; }
.pr-3  { padding-right: clamp(1.5rem, 3vw, 3rem) !important; }
.pr-4  { padding-right: clamp(2rem, 4vw, 4rem) !important; }
.pr-5  { padding-right: clamp(2.5rem, 5vw, 5rem) !important; }
.pr-6  { padding-right: clamp(3rem, 6vw, 6rem) !important; }
.pr-7  { padding-right: clamp(3.5rem, 7vw, 7rem) !important; }
.pr-8  { padding-right: clamp(4rem, 8vw, 8rem) !important; }
.pr-9  { padding-right: clamp(4.5rem, 9vw, 9rem) !important; }
.pr-10 { padding-right: clamp(5rem, 10vw, 10rem) !important; }
.pr-11 { padding-right: clamp(5.5rem, 11vw, 11rem) !important; }
.pr-12 { padding-right: clamp(6rem, 12vw, 12rem) !important; }
.pr-13 { padding-right: clamp(6.5rem, 13vw, 13rem) !important; }
.pr-14 { padding-right: clamp(7rem, 14vw, 14rem) !important; }
.pr-15 { padding-right: clamp(7.5rem, 15vw, 15rem) !important; }

/* === Responsive Padding (All sides) === */
.pt-15px{padding-top: 15px;}
.pt-3px{padding-top: 3px;}
@media (min-width: 1280px) {
  .pr-50px {
    padding-right: 100px !important;
  }
}

.pb-2rem{padding-bottom:25px ;}
.pl-2rem{padding-left: 30px;}
.p-0  {padding: 0 !important;}
.p-1  { padding: clamp(0.5rem, 1vw, 1rem) !important; }
.p-2  { padding: clamp(1rem, 2vw, 2rem) !important; }
.p-3  { padding: clamp(1.5rem, 3vw, 3rem) !important; }
.p-4  { padding: clamp(2rem, 4vw, 4rem) !important; }
.p-5  { padding: clamp(2.5rem, 5vw, 5rem) !important; }
.p-6  { padding: clamp(3rem, 6vw, 6rem) !important; }
.p-7  { padding: clamp(3.5rem, 7vw, 7rem) !important; }
.p-8  { padding: clamp(4rem, 8vw, 8rem) !important; }
.p-9  { padding: clamp(4.5rem, 9vw, 9rem) !important; }
.p-10 { padding: clamp(5rem, 10vw, 10rem) !important; }
.p-11 { padding: clamp(5.5rem, 11vw, 11rem) !important; }
.p-12 { padding: clamp(6rem, 12vw, 12rem) !important; }
.p-13 { padding: clamp(6.5rem, 13vw, 13rem) !important; }
.p-14 { padding: clamp(7rem, 14vw, 14rem) !important; }
.p-15 { padding: clamp(7.5rem, 15vw, 15rem) !important; }


/* Utility - Layout */
.none { display: none !important; }
@media (max-width: 768px) { .sma-none { display: none !important; } }
.desktop-none { display: none !important;}

@media (max-width: 768px) {
  .desktop-none {
    display: block !important;
  }
}
.img-res { width: 100%; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.aspect-ratio { aspect-ratio: 16/9; }
.aspect-ratio-1-1 { aspect-ratio: 1/1; }
.aspect-ratio-3-4 { aspect-ratio: 3/4; }
.aspect-ratio-9-16 { aspect-ratio: 9/16; }
.aspect-ratio-4-3 { aspect-ratio: 4/3; }
.overflow{overflow: hidden;}
.overflow-visible{overflow: visible !important;}
.overflow-scroll{
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}
.object-top      { object-position: top; }
.object-bottom   { object-position: bottom; }
.object-left     { object-position: left; }
.object-right    { object-position: right; }
.object-center   { object-position: center; }

.object-top-left     { object-position: top left; }
.object-top-right    { object-position: top right; }
.object-bottom-left  { object-position: bottom left; }
.object-bottom-right { object-position: bottom right; }


/* Utility - Styling */
.shadow { box-shadow: 0 0 30px var(--shadow-color); }
.text_color em { font-style: normal; color: var(--link-color); font-weight: normal; }
.contrast { color: var(--contrast); }
.contrast p { color: var(--site-text-color); }
.contrast li { color: var(--site-text-color); }
.text-site-bg { color: var(--site-bg) !important; }
.text-black { color: var(--site-text-color); }
.text-white { color: var(--site-bg); }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }



/* Utility - Background */
.bg-sito { background: var(--site-bg); }
.bg-contrast { background: var(--link-color); }
.bg-contrast-lite{background: var(--text-contrast-lite);}

.cover:after{
    content:' ';
    position:absolute;top:0;left:0;
    background:rgba(46,51,55,0.8);
    width:100%;height:100%;
}

.contain img{object-fit:contain !important;}

.btn-with-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.btn-with-svg:hover{gap: 8px;}


.btn-with-svg::after {
  content: '';
  display: inline-block;
  width: 0px;
  height: 20px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s cubic-bezier(.215, .61, .355, 1);
  background-image: url("data:image/svg+xml;utf8,<svg width='26' height='21' viewBox='0 0 26 21' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M24.375 17.0435C24.375 17.2084 24.3433 17.3644 24.2978 17.5131L17.0625 9.73096L24.375 4.04346V17.0435ZM2.88925 18.6246L10.2212 10.8116L13 12.9119L15.6585 10.7986L23.1108 18.6246C22.9946 18.6514 3.00544 18.6514 2.88925 18.6246ZM1.625 17.0435V4.04346L8.9375 9.73096L1.70219 17.5131C1.65669 17.3644 1.625 17.2084 1.625 17.0435ZM23.5625 2.41846L13 10.5435L2.4375 2.41846H23.5625ZM22.75 0.793457H3.25C1.45519 0.793457 0 2.24864 0 4.04346V17.0435C0 18.8383 1.45519 20.2935 3.25 20.2935H22.75C24.5448 20.2935 26 18.8383 26 17.0435V4.04346C26 2.24864 24.5448 0.793457 22.75 0.793457Z' fill='%23282525'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

.btn-with-svg:hover::after {
  opacity: 1;height: clamp(1.1rem, 2vw, 1.15rem);width: 24px;
  margin-left: 8px;
  transform: translateX(0);
  filter: invert(1);
  margin-top: 0px;
}

/* Utility - Typography */
.text-bold { font-weight: 700; }
.text-bold p { font-weight: 700; margin-bottom: 0px; }

/* Utility - Border Radius */
.radius { border-radius: var(--radius); }
.radius-top { border-radius: var(--radius) var(--radius) 0 0; }
.radius-bottom { border-radius: 0 0 var(--radius) var(--radius); }
.radius-left { border-radius: var(--radius) 0 0 var(--radius); }
.radius-right { border-radius: 0 var(--radius) var(--radius) 0; }
.radius-sm { border-radius: calc(var(--radius) / 2); }
.radius-lg { border-radius: calc(var(--radius) * 1.5); }

.border{border: 1px solid var(--site-text-color);}
.border-bottom{border-bottom: 1px solid var(--site-text-color);}

/* Utility - Width & Height */

/* === Responsive Width === */
.w-6  { width: clamp(5%, 6vw, 7%) !important; }
.w-7  { width: clamp(6%, 7vw, 8%) !important; }
.w-8  { width: clamp(7%, 8vw, 9%) !important; }
.w-9  { width: clamp(8%, 9vw, 10%) !important; }
.w-15  { width: clamp(14%, 15vw, 16%) !important; }
.w-10  { width: clamp(9%, 10vw, 11%) !important; }
.w-5   { width: clamp(4%, 5vw, 6%) !important; }
.w-0   { width: clamp(0%, 0vw, 0%) !important; }
.w-20  { width: clamp(19%, 20vw, 21%) !important; }
.w-25  { width: clamp(24%, 25vw, 26%) !important; }
.w-30  { width: clamp(29%, 30vw, 31%) !important; }
.w-35  { width: clamp(34%, 35vw, 36%) !important; }
.w-40  { width: clamp(39%, 40vw, 41%) !important; }
.w-45  { width: clamp(44%, 45vw, 46%) !important; }
.w-50  { width: clamp(49%, 50vw, 51%) !important; }
.w-55  { width: clamp(54%, 55vw, 56%) !important; }
.w-60  { width: clamp(59%, 60vw, 61%) !important; }
.w-65  { width: clamp(64%, 65vw, 66%) !important; }
.w-70  { width: clamp(69%, 70vw, 71%) !important; }
.w-75  { width: clamp(74%, 75vw, 76%) !important; }
.w-80  { width: clamp(79%, 80vw, 81%) !important; }
.w-85  { width: clamp(84%, 85vw, 86%) !important; }
.w-90  { width: clamp(89%, 90vw, 91%) !important; }
.w-95  { width: clamp(94%, 95vw, 96%) !important; }
.w-100 { width: clamp(99%, 100vw, 100%) !important; }


.w-auto { width: auto; }
.w-full{width: 100% !important;}
.w-fit{width: fit-content;}

.max-w{max-width: 100vw;}
.max-w-1120{max-width: 1200px; margin: 0 auto;padding: 0 2%;}

.wide-w{
  max-width: 90vw;margin:0 auto ;width: 90vw;
  @media (width > 1500px){max-width: 1600px;}
}

/* ===  Height === */
.h-5  { height: clamp(3rem, 5vh, 5rem) !important; }
.h-10 { height: clamp(6rem, 10vh, 10rem) !important; }
.h-15 { height: clamp(9rem, 15vh, 15rem) !important; }
.h-20  { height: clamp(12.5rem, 20vh, 15.5rem) !important; }
.h-25  { height: clamp(15.5rem, 25vh, 18.5rem) !important; }
.h-30  { height: clamp(18.5rem, 30vh, 21.5rem) !important; }
.h-35  { height: clamp(21.5rem, 35vh, 24.5rem) !important; }
.h-40  { height: clamp(24.5rem, 40vh, 27.5rem) !important; }
.h-45  { height: clamp(27.5rem, 45vh, 30.5rem) !important; }
.h-50  { height: clamp(30.5rem, 50vh, 33.5rem) !important; }
.h-55  { height: clamp(33.5rem, 55vh, 36.5rem) !important; }
.h-60  { height: clamp(36.5rem, 60vh, 39.5rem) !important; }
.h-65  { height: clamp(39.5rem, 65vh, 42.5rem) !important; }
.h-70  { height: clamp(42.5rem, 70vh, 45.5rem) !important; }
.h-75  { height: clamp(45.5rem, 75vh, 48.5rem) !important; }
.h-80  { height: clamp(48.5rem, 80vh, 51.5rem) !important; }
.h-85  { height: clamp(51.5rem, 85vh, 54.5rem) !important; }
.h-90  { height: clamp(54.5rem, 90vh, 57.5rem) !important; }
.h-95  { height: clamp(57.5rem, 95vh, 60.5rem) !important; }
.h-100 { height: clamp(60.5rem, 100vh, 63.5rem) !important; }

.h-auto { height: auto; }
.h-full{height: 100% !important;}
.h-fit{height: fit-content !important;}

.max-h-55{max-height: 55vh;
@media(width < 1150px){
  max-height: 55vh;
}
}

/* Utility - Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.index-1{z-index:1;}
.index-10{z-index:10;}
.index-100{z-index:100;}
.index-10000{z-index:10000;}


/* === Responsive Top === */
.top-0  { top: 0% !important; }
.top-5  { top: 5% !important; }
.top-10 { top: 10% !important; }
.top-15 { top: 15% !important; }
.top-20 { top: 20% !important; }
.top-25 { top: 25% !important; }
.top-30 { top: 30% !important; }
.top-35 { top: 35% !important; }
.top-40 { top: 40% !important; }
.top-45 { top: 45% !important; }
.top-50 { top: 50% !important; transform: translateY(-50%);}
.top-60 { top: 60% !important; }
.top-70 { top: 70% !important; }
.top-80 { top: 80% !important; }
.top-90 { top: 90% !important; }
.top-100 { top: 100% !important; }

.top--5  { top: -5% !important; }
.top--10 { top: -10% !important; }
.top--15 { top: -15% !important; }
.top--20 { top: -20% !important; }
.top--25 { top: -25% !important; }
.top--30 { top: -30% !important; }
.top--35 { top: -35% !important; }
.top--40 { top: -40% !important; }
.top--45 { top: -45% !important; }
.top--50 { top: -50% !important; }
.top--60 { top: -60% !important; }
.top--70 { top: -70% !important; }
.top--80 { top: -80% !important; }
.top--90 { top: -90% !important; }
.top--100{ top: -100% !important; }

/* === Responsive Left === */
.left-0  { left: 0% !important; }
.left-5  { left: 5% !important; }
.left-10 { left: 10% !important; }
.left-15 { left: 15% !important; }
.left-20 { left: 20% !important; }
.left-25 { left: 25% !important; }
.left-30 { left: 30% !important; }
.left-35 { left: 35% !important; }
.left-40 { left: 40% !important; }
.left-45 { left: 45% !important; }
.left-50 { left: 50% !important; transform: translateX(-50%); }
.left-60 { left: 60% !important; }
.left-70 { left: 70% !important; }
.left-80 { left: 80% !important; }
.left-90 { left: 90% !important; }
.left-100{ left: 100% !important; }

.left--5  { left: -5% !important; }
.left--10 { left: -10% !important; }
.left--15 { left: -15% !important; }
.left--20 { left: -20% !important; }
.left--25 { left: -25% !important; }
.left--30 { left: -30% !important; }
.left--35 { left: -35% !important; }
.left--40 { left: -40% !important; }
.left--45 { left: -45% !important; }
.left--50 { left: -50% !important; }
.left--60 { left: -60% !important; }
.left--70 { left: -70% !important; }
.left--80 { left: -80% !important; }
.left--90 { left: -90% !important; }
.left--100{ left: -100% !important; }

/* === Responsive Right === */
.right-0  { right: 0% !important; }
.right-5  { right: 5% !important; }
.right-10 { right: 10% !important; }
.right-15 { right: 15% !important; }
.right-20 { right: 20% !important; }
.right-25 { right: 25% !important; }
.right-30 { right: 30% !important; }
.right-35 { right: 35% !important; }
.right-40 { right: 40% !important; }
.right-45 { right: 45% !important; }
.right-50 { right: 50% !important; }
.right-60 { right: 60% !important; }
.right-70 { right: 70% !important; }
.right-80 { right: 80% !important; }
.right-90 { right: 90% !important; }
.right-100{ right: 100% !important; }

.right--5  { right: -5% !important; }
.right--10 { right: -10% !important; }
.right--15 { right: -15% !important; }
.right--20 { right: -20% !important; }
.right--25 { right: -25% !important; }
.right--30 { right: -30% !important; }
.right--35 { right: -35% !important; }
.right--40 { right: -40% !important; }
.right--45 { right: -45% !important; }
.right--50 { right: -50% !important; }
.right--60 { right: -60% !important; }
.right--70 { right: -70% !important; }
.right--80 { right: -80% !important; }
.right--90 { right: -90% !important; }
.right--100{ right: -100% !important; }

/* === Responsive Bottom === */
.bottom-0  { bottom: 0% !important; }
.bottom-5  { bottom: 5% !important; }
.bottom-10 { bottom: 10% !important; }
.bottom-15 { bottom: 15% !important; }
.bottom-20 { bottom: 20% !important; }
.bottom-25 { bottom: 25% !important; }
.bottom-30 { bottom: 30% !important; }
.bottom-35 { bottom: 35% !important; }
.bottom-40 { bottom: 40% !important; }
.bottom-45 { bottom: 45% !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-60 { bottom: 60% !important; }
.bottom-70 { bottom: 70% !important; }
.bottom-80 { bottom: 80% !important; }
.bottom-90 { bottom: 90% !important; }
.bottom-100{ bottom: 100% !important; }

.bottom--5  { bottom: -5% !important; }
.bottom--10 { bottom: -10% !important; }
.bottom--15 { bottom: -15% !important; }
.bottom--20 { bottom: -20% !important; }
.bottom--25 { bottom: -25% !important; }
.bottom--30 { bottom: -30% !important; }
.bottom--35 { bottom: -35% !important; }
.bottom--40 { bottom: -40% !important; }
.bottom--45 { bottom: -45% !important; }
.bottom--50 { bottom: -50% !important; }
.bottom--60 { bottom: -60% !important; }
.bottom--70 { bottom: -70% !important; }
.bottom--80 { bottom: -80% !important; }
.bottom--90 { bottom: -90% !important; }
.bottom--100{ bottom: -100% !important; }

.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }



.flex {display: flex !important; }
.inline-flex {display: inline-flex;}

/* Direzione */

.flex-row {flex-direction: row;}
.flex-row-reverse {flex-direction: row-reverse;}
.flex-col { flex-direction: column;}
.flex-col-reverse {flex-direction: column-reverse;}
.flex-wrap{flex-wrap: wrap;}

/* Grid Container */
.grid {display: grid !important;}

/* Column count */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid [class*='grid-cols'] figure,
.grid [class*='grid-cols'] figure img{height: auto !important;}

.grid-cols-auto-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 4vw, 40px);
}
.grid-cols-auto-progetti-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: clamp(24px, 4vw, 40px);
}

/* card servizi */
.grid-cols-auto-servizi {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  width: 100%;
  max-width: 1120px; /* 3 × 350px + 2 × 2rem (gap) */
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(345px, 1fr));
}



.grid-cols-auto-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: clamp(30px, 5vw, 50px);
  align-items: center;
  @media(width < 768px){
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  }
}

.reverse-cols .text-col {
  order: 2;
}

.reverse-cols .img-col {
  order: 1;
  @media(width < 1036px ){
    order:2;
  }
}


.grid-cols-info-progetto {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  @media (max-width: 1300px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}



/* Row count */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }



/* === Responsive Gap === */
.gap-0   { gap: clamp(0px, 0vw, 0px) !important; }
.gap-5   { gap: clamp(3px, 0.5vw, 5px) !important; }
.gap-10  { gap: clamp(6px, 1vw, 10px) !important; }
.gap-15  { gap: clamp(9px, 1.5vw, 15px) !important; }
.gap-20  { gap: clamp(12px, 2vw, 20px) !important; }
.gap-25  { gap: clamp(15px, 2.5vw, 25px) !important; }
.gap-30  { gap: clamp(18px, 3vw, 30px) !important; }
.gap-35  { gap: clamp(21px, 3.5vw, 35px) !important; }
.gap-40  { gap: clamp(24px, 4vw, 40px) !important; }
.gap-45  { gap: clamp(27px, 4.5vw, 45px) !important; }
.gap-50  { gap: clamp(30px, 5vw, 50px) !important; }
.gap-60  { gap: clamp(36px, 6vw, 60px) !important; }
.gap-65  { gap: clamp(39px, 6.5vw, 65px) !important; }
.gap-70  { gap: clamp(42px, 7vw, 70px) !important; }
.gap-80  { gap: clamp(48px, 8vw, 80px) !important; }
.gap-90  { gap: clamp(54px, 9vw, 90px) !important; }
.gap-100 { gap: clamp(60px, 10vw, 100px) !important; }


@media (max-width: 1024px) {
  .tablet\:max-w{max-width: 100%;}
  .tablet\:flex-row         { flex-direction: row !important; }
  .tablet\:flex-row-reverse { flex-direction: row-reverse !important; }
  .tablet\:flex-col{ flex-direction: column !important; }
  .tablet\:flex-col-reverse { flex-direction: column-reverse !important; }
  .tablet\:flex-wrap        { flex-wrap: wrap !important; }
  /* === tablet Grid Columns === */
  .tablet\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .tablet\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tablet\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tablet\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .tablet\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .tablet\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

  /* === tablet Grid Rows === */
  .tablet\:grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
  .tablet\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
  .tablet\:grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
  .tablet\:grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }

  /* === tablet Width === */
  .tablet\:w-20  { width: clamp(19%, 20vw, 21%) !important; }
  .tablet\:w-25  { width: clamp(24%, 25vw, 26%) !important; }
  .tablet\:w-30  { width: clamp(29%, 30vw, 31%) !important; }
  .tablet\:w-35  { width: clamp(34%, 35vw, 36%) !important; }
  .tablet\:w-40  { width: clamp(39%, 40vw, 41%) !important; }
  .tablet\:w-45  { width: clamp(44%, 45vw, 46%) !important; }
  .tablet\:w-50  { width: clamp(49%, 50vw, 51%) !important; }
  .tablet\:w-55  { width: clamp(54%, 55vw, 56%) !important; }
  .tablet\:w-60  { width: clamp(59%, 60vw, 61%) !important; }
  .tablet\:w-65  { width: clamp(64%, 65vw, 66%) !important; }
  .tablet\:w-70  { width: clamp(69%, 70vw, 71%) !important; }
  .tablet\:w-75  { width: clamp(74%, 75vw, 76%) !important; }
  .tablet\:w-80  { width: clamp(79%, 80vw, 81%) !important; }
  .tablet\:w-85  { width: clamp(84%, 85vw, 86%) !important; }
  .tablet\:w-90  { width: clamp(89%, 90vw, 91%) !important; }
  .tablet\:w-95  { width: clamp(94%, 95vw, 96%) !important; }
  .tablet\:w-100 { width: clamp(99%, 100vw, 100%) !important; }
  .tablet\:w-full{width: 100% !important;}
  .tablet\:w-auto{width: auto !important;}

  /* === tablet Height === */
  .tablet\:h-20  { height: clamp(12.5rem, 20vh, 15.5rem) !important; }
  .tablet\:h-25  { height: clamp(15.5rem, 25vh, 18.5rem) !important; }
  .tablet\:h-30  { height: clamp(18.5rem, 30vh, 21.5rem) !important; }
  .tablet\:h-35  { height: clamp(21.5rem, 35vh, 24.5rem) !important; }
  .tablet\:h-40  { height: clamp(24.5rem, 40vh, 27.5rem) !important; }
  .tablet\:h-45  { height: clamp(27.5rem, 45vh, 30.5rem) !important; }
  .tablet\:h-50  { height: clamp(30.5rem, 50vh, 33.5rem) !important; }
  .tablet\:h-55  { height: clamp(33.5rem, 55vh, 36.5rem) !important; }
  .tablet\:h-60  { height: clamp(36.5rem, 60vh, 39.5rem) !important; }
  .tablet\:h-65  { height: clamp(39.5rem, 65vh, 42.5rem) !important; }
  .tablet\:h-70  { height: clamp(42.5rem, 70vh, 45.5rem) !important; }
  .tablet\:h-75  { height: clamp(45.5rem, 75vh, 48.5rem) !important; }
  .tablet\:h-80  { height: clamp(48.5rem, 80vh, 51.5rem) !important; }
  .tablet\:h-85  { height: clamp(51.5rem, 85vh, 54.5rem) !important; }
  .tablet\:h-90  { height: clamp(54.5rem, 90vh, 57.5rem) !important; }
  .tablet\:h-95  { height: clamp(57.5rem, 95vh, 60.5rem) !important; }
  .tablet\:h-100 { height: clamp(60.5rem, 100vh, 63.5rem) !important; }
  .tablet\:h-full{height: 100% !important;}
  .tablet\:h-auto{height: auto !important;}

  /* Margin-bottom positivi con clamp */
  .tablet\:mb-1  { margin-bottom: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:mb-2  { margin-bottom: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:mb-3  { margin-bottom: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:mb-4  { margin-bottom: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:mb-5  { margin-bottom: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:mb-6  { margin-bottom: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:mb-7  { margin-bottom: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:mb-8  { margin-bottom: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:mb-9  { margin-bottom: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:mb-10 { margin-bottom: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:mb-11 { margin-bottom: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:mb-12 { margin-bottom: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:mb-13 { margin-bottom: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:mb-14 { margin-bottom: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:mb-15 { margin-bottom: clamp(7.5rem, 15vw, 15rem) !important; }

  /* Margin-bottom negativi con clamp */
  .tablet\:mb-0  { margin-bottom: 0 !important; }
  .tablet\:mb--1  { margin-bottom: clamp(-1rem, -1vw, -0.5rem) !important; }
  .tablet\:mb--2  { margin-bottom: clamp(-2rem, -2vw, -1rem) !important; }
  .tablet\:mb--3  { margin-bottom: clamp(-3rem, -3vw, -1.5rem) !important; }
  .tablet\:mb--4  { margin-bottom: clamp(-4rem, -4vw, -2rem) !important; }
  .tablet\:mb--5  { margin-bottom: clamp(-5rem, -5vw, -2.5rem) !important; }
  .tablet\:mb--6  { margin-bottom: clamp(-6rem, -6vw, -3rem) !important; }
  .tablet\:mb--7  { margin-bottom: clamp(-7rem, -7vw, -3.5rem) !important; }
  .tablet\:mb--8  { margin-bottom: clamp(-8rem, -8vw, -4rem) !important; }
  .tablet\:mb--9  { margin-bottom: clamp(-9rem, -9vw, -4.5rem) !important; }
  .tablet\:mb--10 { margin-bottom: clamp(-10rem, -10vw, -5rem) !important; }
  .tablet\:mb--11 { margin-bottom: clamp(-11rem, -11vw, -5.5rem) !important; }
  .tablet\:mb--12 { margin-bottom: clamp(-12rem, -12vw, -6rem) !important; }
  .tablet\:mb--13 { margin-bottom: clamp(-13rem, -13vw, -6.5rem) !important; }
  .tablet\:mb--14 { margin-bottom: clamp(-14rem, -14vw, -7rem) !important; }
  .tablet\:mb--15 { margin-bottom: clamp(-15rem, -15vw, -7.5rem) !important; }
  .tablet\:mb--16 { margin-bottom: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Margin Right === */
  .tablet\:mr-0  { margin-right: 0 !important; }
  .tablet\:mr-1  { margin-right: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:mr-2  { margin-right: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:mr-3  { margin-right: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:mr-4  { margin-right: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:mr-5  { margin-right: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:mr-6  { margin-right: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:mr-7  { margin-right: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:mr-8  { margin-right: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:mr-9  { margin-right: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:mr-10 { margin-right: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:mr-11 { margin-right: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:mr-12 { margin-right: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:mr-13 { margin-right: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:mr-14 { margin-right: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:mr-15 { margin-right: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Right Negative === */
  .tablet\:mr--1  { margin-right: clamp(-1rem, -1vw, -0.5rem) !important; }
  .tablet\:mr--2  { margin-right: clamp(-2rem, -2vw, -1rem) !important; }
  .tablet\:mr--3  { margin-right: clamp(-3rem, -3vw, -1.5rem) !important; }
  .tablet\:mr--4  { margin-right: clamp(-4rem, -4vw, -2rem) !important; }
  .tablet\:mr--5  { margin-right: clamp(-5rem, -5vw, -2.5rem) !important; }
  .tablet\:mr--6  { margin-right: clamp(-6rem, -6vw, -3rem) !important; }
  .tablet\:mr--7  { margin-right: clamp(-7rem, -7vw, -3.5rem) !important; }
  .tablet\:mr--8  { margin-right: clamp(-8rem, -8vw, -4rem) !important; }
  .tablet\:mr--9  { margin-right: clamp(-9rem, -9vw, -4.5rem) !important; }
  .tablet\:mr--10 { margin-right: clamp(-10rem, -10vw, -5rem) !important; }
  .tablet\:mr--11 { margin-right: clamp(-11rem, -11vw, -5.5rem) !important; }
  .tablet\:mr--12 { margin-right: clamp(-12rem, -12vw, -6rem) !important; }
  .tablet\:mr--13 { margin-right: clamp(-13rem, -13vw, -6.5rem) !important; }
  .tablet\:mr--14 { margin-right: clamp(-14rem, -14vw, -7rem) !important; }
  .tablet\:mr--15 { margin-right: clamp(-15rem, -15vw, -7.5rem) !important; }
  .tablet\:mr--16 { margin-right: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Margin (All sides) === */
  .tablet\:m-0  { margin: 0 !important; }
  .tablet\:m-1  { margin: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:m-2  { margin: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:m-3  { margin: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:m-4  { margin: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:m-5  { margin: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:m-6  { margin: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:m-7  { margin: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:m-8  { margin: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:m-9  { margin: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:m-10 { margin: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:m-11 { margin: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:m-12 { margin: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:m-13 { margin: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:m-14 { margin: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:m-15 { margin: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Negative (All sides) === */
  .tablet\:m--1  { margin: clamp(-1rem, -1vw, -0.5rem) !important; }
  .tablet\:m--2  { margin: clamp(-2rem, -2vw, -1rem) !important; }
  .tablet\:m--3  { margin: clamp(-3rem, -3vw, -1.5rem) !important; }
  .tablet\:m--4  { margin: clamp(-4rem, -4vw, -2rem) !important; }
  .tablet\:m--5  { margin: clamp(-5rem, -5vw, -2.5rem) !important; }
  .tablet\:m--6  { margin: clamp(-6rem, -6vw, -3rem) !important; }
  .tablet\:m--7  { margin: clamp(-7rem, -7vw, -3.5rem) !important; }
  .tablet\:m--8  { margin: clamp(-8rem, -8vw, -4rem) !important; }
  .tablet\:m--9  { margin: clamp(-9rem, -9vw, -4.5rem) !important; }
  .tablet\:m--10 { margin: clamp(-10rem, -10vw, -5rem) !important; }
  .tablet\:m--11 { margin: clamp(-11rem, -11vw, -5.5rem) !important; }
  .tablet\:m--12 { margin: clamp(-12rem, -12vw, -6rem) !important; }
  .tablet\:m--13 { margin: clamp(-13rem, -13vw, -6.5rem) !important; }
  .tablet\:m--14 { margin: clamp(-14rem, -14vw, -7rem) !important; }
  .tablet\:m--15 { margin: clamp(-15rem, -15vw, -7.5rem) !important; }
  .tablet\:m--16 { margin: clamp(-16rem, -16vw, -8rem) !important; }
  .tablet\:m-auto { margin: 0 auto !important; }
  .tablet\:mx-auto{margin-left:auto ;margin-right: auto;}

  /* === Responsive Margin Left === */
  .tablet\:ml-0  { margin-left: 0 !important; }
  .tablet\:ml-1  { margin-left: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:ml-2  { margin-left: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:ml-3  { margin-left: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:ml-4  { margin-left: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:ml-5  { margin-left: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:ml-6  { margin-left: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:ml-7  { margin-left: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:ml-8  { margin-left: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:ml-9  { margin-left: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:ml-10 { margin-left: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:ml-11 { margin-left: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:ml-12 { margin-left: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:ml-13 { margin-left: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:ml-14 { margin-left: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:ml-15 { margin-left: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Left Negative === */
  .tablet\:ml--1  { margin-left: clamp(-1rem, -1vw, -0.5rem) !important; }
  .tablet\:ml--2  { margin-left: clamp(-2rem, -2vw, -1rem) !important; }
  .tablet\:ml--3  { margin-left: clamp(-3rem, -3vw, -1.5rem) !important; }
  .tablet\:ml--4  { margin-left: clamp(-4rem, -4vw, -2rem) !important; }
  .tablet\:ml--5  { margin-left: clamp(-5rem, -5vw, -2.5rem) !important; }
  .tablet\:ml--6  { margin-left: clamp(-6rem, -6vw, -3rem) !important; }
  .tablet\:ml--7  { margin-left: clamp(-7rem, -7vw, -3.5rem) !important; }
  .tablet\:ml--8  { margin-left: clamp(-8rem, -8vw, -4rem) !important; }
  .tablet\:ml--9  { margin-left: clamp(-9rem, -9vw, -4.5rem) !important; }
  .tablet\:ml--10 { margin-left: clamp(-10rem, -10vw, -5rem) !important; }
  .tablet\:ml--11 { margin-left: clamp(-11rem, -11vw, -5.5rem) !important; }
  .tablet\:ml--12 { margin-left: clamp(-12rem, -12vw, -6rem) !important; }
  .tablet\:ml--13 { margin-left: clamp(-13rem, -13vw, -6.5rem) !important; }
  .tablet\:ml--14 { margin-left: clamp(-14rem, -14vw, -7rem) !important; }
  .tablet\:ml--15 { margin-left: clamp(-15rem, -15vw, -7.5rem) !important; }
  .tablet\:ml--16 { margin-left: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Margin Top === */
  .tablet\:mt-0  { margin-top: 0 !important; }
  .tablet\:mt-1  { margin-top: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:mt-2  { margin-top: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:mt-3  { margin-top: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:mt-4  { margin-top: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:mt-5  { margin-top: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:mt-6  { margin-top: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:mt-7  { margin-top: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:mt-8  { margin-top: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:mt-9  { margin-top: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:mt-10 { margin-top: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:mt-11 { margin-top: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:mt-12 { margin-top: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:mt-13 { margin-top: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:mt-14 { margin-top: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:mt-15 { margin-top: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Top Negative === */
  .tablet\:mt--1  { margin-top: clamp(-1rem, -1vw, -0.5rem) !important; }
  .tablet\:mt--2  { margin-top: clamp(-2rem, -2vw, -1rem) !important; }
  .tablet\:mt--3  { margin-top: clamp(-3rem, -3vw, -1.5rem) !important; }
  .tablet\:mt--4  { margin-top: clamp(-4rem, -4vw, -2rem) !important; }
  .tablet\:mt--5  { margin-top: clamp(-5rem, -5vw, -2.5rem) !important; }
  .tablet\:mt--6  { margin-top: clamp(-6rem, -6vw, -3rem) !important; }
  .tablet\:mt--7  { margin-top: clamp(-7rem, -7vw, -3.5rem) !important; }
  .tablet\:mt--8  { margin-top: clamp(-8rem, -8vw, -4rem) !important; }
  .tablet\:mt--9  { margin-top: clamp(-9rem, -9vw, -4.5rem) !important; }
  .tablet\:mt--10 { margin-top: clamp(-10rem, -10vw, -5rem) !important; }
  .tablet\:mt--11 { margin-top: clamp(-11rem, -11vw, -5.5rem) !important; }
  .tablet\:mt--12 { margin-top: clamp(-12rem, -12vw, -6rem) !important; }
  .tablet\:mt--13 { margin-top: clamp(-13rem, -13vw, -6.5rem) !important; }
  .tablet\:mt--14 { margin-top: clamp(-14rem, -14vw, -7rem) !important; }
  .tablet\:mt--15 { margin-top: clamp(-15rem, -15vw, -7.5rem) !important; }
  .tablet\:mt--16 { margin-top: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Padding Top === */
  .tablet\:pt-0{padding-top: 0 !important;}
  .tablet\:pt-1  { padding-top: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:pt-2  { padding-top: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:pt-3  { padding-top: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:pt-4  { padding-top: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:pt-5  { padding-top: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:pt-6  { padding-top: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:pt-7  { padding-top: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:pt-8  { padding-top: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:pt-9  { padding-top: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:pt-10 { padding-top: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:pt-11 { padding-top: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:pt-12 { padding-top: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:pt-13 { padding-top: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:pt-14 { padding-top: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:pt-15 { padding-top: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding Bottom === */
  .tablet\:pb-0{padding-bottom: 0 !important;}
  .tablet\:pb-1  { padding-bottom: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:pb-2  { padding-bottom: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:pb-3  { padding-bottom: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:pb-4  { padding-bottom: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:pb-5  { padding-bottom: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:pb-6  { padding-bottom: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:pb-7  { padding-bottom: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:pb-8  { padding-bottom: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:pb-9  { padding-bottom: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:pb-10 { padding-bottom: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:pb-11 { padding-bottom: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:pb-12 { padding-bottom: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:pb-13 { padding-bottom: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:pb-14 { padding-bottom: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:pb-15 { padding-bottom: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding Left === */
  .tablet\:pl-0 { padding-left: 0 !important; }
  .tablet\:pl-1  { padding-left: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:pl-2  { padding-left: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:pl-3  { padding-left: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:pl-4  { padding-left: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:pl-5  { padding-left: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:pl-6  { padding-left: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:pl-7  { padding-left: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:pl-8  { padding-left: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:pl-9  { padding-left: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:pl-10 { padding-left: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:pl-11 { padding-left: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:pl-12 { padding-left: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:pl-13 { padding-left: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:pl-14 { padding-left: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:pl-15 { padding-left: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding Right === */
  .tablet\:pr-0 { padding-right: 0 !important; }
  .tablet\:pr-1  { padding-right: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:pr-2  { padding-right: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:pr-3  { padding-right: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:pr-4  { padding-right: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:pr-5  { padding-right: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:pr-6  { padding-right: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:pr-7  { padding-right: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:pr-8  { padding-right: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:pr-9  { padding-right: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:pr-10 { padding-right: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:pr-11 { padding-right: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:pr-12 { padding-right: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:pr-13 { padding-right: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:pr-14 { padding-right: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:pr-15 { padding-right: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding (All sides) === */
  .tablet\:p-0  {padding: 0 !important;}
  .tablet\:p-1  { padding: clamp(0.5rem, 1vw, 1rem) !important; }
  .tablet\:p-2  { padding: clamp(1rem, 2vw, 2rem) !important; }
  .tablet\:p-3  { padding: clamp(1.5rem, 3vw, 3rem) !important; }
  .tablet\:p-4  { padding: clamp(2rem, 4vw, 4rem) !important; }
  .tablet\:p-5  { padding: clamp(2.5rem, 5vw, 5rem) !important; }
  .tablet\:p-6  { padding: clamp(3rem, 6vw, 6rem) !important; }
  .tablet\:p-7  { padding: clamp(3.5rem, 7vw, 7rem) !important; }
  .tablet\:p-8  { padding: clamp(4rem, 8vw, 8rem) !important; }
  .tablet\:p-9  { padding: clamp(4.5rem, 9vw, 9rem) !important; }
  .tablet\:p-10 { padding: clamp(5rem, 10vw, 10rem) !important; }
  .tablet\:p-11 { padding: clamp(5.5rem, 11vw, 11rem) !important; }
  .tablet\:p-12 { padding: clamp(6rem, 12vw, 12rem) !important; }
  .tablet\:p-13 { padding: clamp(6.5rem, 13vw, 13rem) !important; }
  .tablet\:p-14 { padding: clamp(7rem, 14vw, 14rem) !important; }
  .tablet\:p-15 { padding: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Top === */
  .tablet\:top-0  { top: 0% !important; }
  .tablet\:top-5  { top: 5% !important; }
  .tablet\:top-10 { top: 10% !important; }
  .tablet\:top-15 { top: 15% !important; }
  .tablet\:top-20 { top: 20% !important; }
  .tablet\:top-25 { top: 25% !important; }
  .tablet\:top-30 { top: 30% !important; }
  .tablet\:top-35 { top: 35% !important; }
  .tablet\:top-40 { top: 40% !important; }
  .tablet\:top-45 { top: 45% !important; }
  .tablet\:top-50 { top: 50% !important; transform: translateY(-50%);}
  .tablet\:top-60 { top: 60% !important; }      
  .tablet\:top-70 { top: 70% !important; }
  .tablet\:top-80 { top: 80% !important; }
  .tablet\:top-90 { top: 90% !important; }
  .tablet\:top-100 { top: 100% !important; }

  .tablet\:top--5  { top: -5% !important; }
  .tablet\:top--10 { top: -10% !important; }
  .tablet\:top--15 { top: -15% !important; }
  .tablet\:top--20 { top: -20% !important; }
  .tablet\:top--25 { top: -25% !important; }
  .tablet\:top--30 { top: -30% !important; }
  .tablet\:top--35 { top: -35% !important; }
  .tablet\:top--40 { top: -40% !important; }
  .tablet\:top--45 { top: -45% !important; }
  .tablet\:top--50 { top: -50% !important; }
  .tablet\:top--60 { top: -60% !important; }
  .tablet\:top--70 { top: -70% !important; }
  .tablet\:top--80 { top: -80% !important; }
  .tablet\:top--90 { top: -90% !important; }
  .tablet\:top--100{ top: -100% !important; }

  /* === Responsive Left === */
  .tablet\:left-0  { left: 0% !important; }
  .tablet\:left-5  { left: 5% !important; }
  .tablet\:left-10 { left: 10% !important; }
  .tablet\:left-15 { left: 15% !important; }
  .tablet\:left-20 { left: 20% !important; }
  .tablet\:left-25 { left: 25% !important; }
  .tablet\:left-30 { left: 30% !important; }
  .tablet\:left-35 { left: 35% !important; }
  .tablet\:left-40 { left: 40% !important; }
  .tablet\:left-45 { left: 45% !important; }
  .tablet\:left-50 { left: 50% !important; transform: translateX(-50%); }
  .tablet\:left-60 { left: 60% !important; }
  .tablet\:left-70 { left: 70% !important; }
  .tablet\:left-80 { left: 80% !important; }
  .tablet\:left-90 { left: 90% !important; }
  .tablet\:left-100{ left: 100% !important; }

  .tablet\:left--5  { left: -5% !important; }
  .tablet\:left--10 { left: -10% !important; }
  .tablet\:left--15 { left: -15% !important; }
  .tablet\:left--20 { left: -20% !important; }
  .tablet\:left--25 { left: -25% !important; }
  .tablet\:left--30 { left: -30% !important; }
  .tablet\:left--35 { left: -35% !important; }
  .tablet\:left--40 { left: -40% !important; }
  .tablet\:left--45 { left: -45% !important; }
  .tablet\:left--50 { left: -50% !important; transform: translateX(50%);}
  .tablet\:left--60 { left: -60% !important; }
  .tablet\:left--70 { left: -70% !important; }
  .tablet\:left--80 { left: -80% !important; }
  .tablet\:left--90 { left: -90% !important; }
  .tablet\:left--100{ left: -100% !important; }

  /* === Responsive Right === */
  .tablet\:right-0  { right: 0% !important; }
  .tablet\:right-5  { right: 5% !important; }
  .tablet\:right-10 { right: 10% !important; }
  .tablet\:right-15 { right: 15% !important; }
  .tablet\:right-20 { right: 20% !important; }
  .tablet\:right-25 { right: 25% !important; }
  .tablet\:right-30 { right: 30% !important; }
  .tablet\:right-35 { right: 35% !important; }
  .tablet\:right-40 { right: 40% !important; }
  .tablet\:right-45 { right: 45% !important; }
  .tablet\:right-50 { right: 50% !important; transform: translateX(50%); }
  .tablet\:right-60 { right: 60% !important; }
  .tablet\:right-70 { right: 70% !important; }
  .tablet\:right-80 { right: 80% !important; }
  .tablet\:right-90 { right: 90% !important; }
  .tablet\:right-100{ right: 100% !important; }

  .tablet\:right--5  { right: -5% !important; }
  .tablet\:right--10 { right: -10% !important; }
  .tablet\:right--15 { right: -15% !important; }
  .tablet\:right--20 { right: -20% !important; }
  .tablet\:right--25 { right: -25% !important; }
  .tablet\:right--30 { right: -30% !important; }
  .tablet\:right--35 { right: -35% !important; }
  .tablet\:right--40 { right: -40% !important; }
  .tablet\:right--45 { right: -45% !important; }
  .tablet\:right--50 { right: -50% !important; transform: translateX(-50%); }
  .tablet\:right--60 { right: -60% !important; }
  .tablet\:right--70 { right: -70% !important; }
  .tablet\:right--80 { right: -80% !important; }
  .tablet\:right--90 { right: -90% !important; }
  .tablet\:right--100{ right: -100% !important; }

  /* === Responsive Bottom === */
  .tablet\:bottom-0  { bottom: 0% !important; }
  .tablet\:bottom-5  { bottom: 5% !important; }
  .tablet\:bottom-10 { bottom: 10% !important; }
  .tablet\:bottom-15 { bottom: 15% !important; }
  .tablet\:bottom-20 { bottom: 20% !important; }
  .tablet\:bottom-25 { bottom: 25% !important; }
  .tablet\:bottom-30 { bottom: 30% !important; }
  .tablet\:bottom-35 { bottom: 35% !important; }
  .tablet\:bottom-40 { bottom: 40% !important; }
  .tablet\:bottom-45 { bottom: 45% !important; }
  .tablet\:bottom-50 { bottom: 50% !important; }
  .tablet\:bottom-60 { bottom: 60% !important; }
  .tablet\:bottom-70 { bottom: 70% !important; }
  .tablet\:bottom-80 { bottom: 80% !important; }
  .tablet\:bottom-90 { bottom: 90% !important; }
  .tablet\:bottom-100{ bottom: 100% !important; }

  .tablet\:bottom--5  { bottom: -5% !important; }
  .tablet\:bottom--10 { bottom: -10% !important; }
  .tablet\:bottom--15 { bottom: -15% !important; }
  .tablet\:bottom--20 { bottom: -20% !important; }
  .tablet\:bottom--25 { bottom: -25% !important; }
  .tablet\:bottom--30 { bottom: -30% !important; }
  .tablet\:bottom--35 { bottom: -35% !important; }
  .tablet\:bottom--40 { bottom: -40% !important; }
  .tablet\:bottom--45 { bottom: -45% !important; }
  .tablet\:bottom--50 { bottom: -50% !important; }
  .tablet\:bottom--60 { bottom: -60% !important; }
  .tablet\:bottom--70 { bottom: -70% !important; }
  .tablet\:bottom--80 { bottom: -80% !important; }
  .tablet\:bottom--90 { bottom: -90% !important; }
  .tablet\:bottom--100{ bottom: -100% !important; }

  .tablet\:relative{position: relative !important;}
  .tablet\:absolute{position: absolute !important;}

  /* Allineamento lungo l'asse principale */

  .tablet\:justify-start {justify-content: flex-start !important;}
  .tablet\:justify-end {justify-content: flex-end !important;}
  .tablet\:justify-center { justify-content: center !important;}
  .tablet\:justify-between {justify-content: space-between !important;}
  .tablet\:justify-around {justify-content: space-around !important;}
  .tablet\:justify-evenly {justify-content: space-evenly !important;}

  /* Allineamento trasversale */

  .tablet\:items-start {align-items: flex-start !important;}
  .tablet\:items-end {align-items: flex-end !important;}
  .tablet\:items-center {align-items: center !important;}
  .tablet\:items-baseline {align-items: baseline !important;}
  .tablet\:items-stretch {align-items: stretch !important;}

}

@media (max-width: 768px) {
  .mobile\:max-w{max-width: 100%;}
  .mobile\:flex-row         { flex-direction: row !important; }
  .mobile\:flex-row-reverse { flex-direction: row-reverse !important; }
  .mobile\:flex-col{ flex-direction: column !important; }
  .mobile\:flex-col-reverse { flex-direction: column-reverse !important; }
  .mobile\:flex-wrap        { flex-wrap: wrap !important; }
  /* === Mobile Grid Columns === */
  .mobile\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .mobile\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mobile\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mobile\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .mobile\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mobile\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

  /* === Mobile Grid Rows === */
  .mobile\:grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
  .mobile\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
  .mobile\:grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
  .mobile\:grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }

  /* === Mobile Width === */
  .mobile\:w-7  { width: clamp(6%, 7vw, 8%) !important; }
  .mobile\:w-6  { width: clamp(5%, 6vw, 7%) !important; }
  .mobile\:w-8  { width: clamp(7%, 8vw, 9%) !important; }
  .mobile\:w-9  { width: clamp(8%, 9vw, 10%) !important; }
  .mobile\:w-15  { width: clamp(14%, 15vw, 16%) !important; }
  .mobile\:w-10  { width: clamp(9%, 10vw, 11%) !important; }
  .mobile\:w-20  { width: clamp(19%, 20vw, 21%) !important; }
  .mobile\:w-25  { width: clamp(24%, 25vw, 26%) !important; }
  .mobile\:w-30  { width: clamp(29%, 30vw, 31%) !important; }
  .mobile\:w-35  { width: clamp(34%, 35vw, 36%) !important; }
  .mobile\:w-40  { width: clamp(39%, 40vw, 41%) !important; }
  .mobile\:w-45  { width: clamp(44%, 45vw, 46%) !important; }
  .mobile\:w-50  { width: clamp(49%, 50vw, 51%) !important; }
  .mobile\:w-55  { width: clamp(54%, 55vw, 56%) !important; }
  .mobile\:w-60  { width: clamp(59%, 60vw, 61%) !important; }
  .mobile\:w-65  { width: clamp(64%, 65vw, 66%) !important; }
  .mobile\:w-70  { width: clamp(69%, 70vw, 71%) !important; }
  .mobile\:w-75  { width: clamp(74%, 75vw, 76%) !important; }
  .mobile\:w-80  { width: clamp(79%, 80vw, 81%) !important; }
  .mobile\:w-85  { width: clamp(84%, 85vw, 86%) !important; }
  .mobile\:w-90  { width: clamp(89%, 90vw, 91%) !important; }
  .mobile\:w-95  { width: clamp(94%, 95vw, 96%) !important; }
  .mobile\:w-100 { width: clamp(99%, 100vw, 100%) !important; }
  .mobile\:w-full{width: 100% !important;}
  .mobile\:w-auto{width: auto !important;}

  /* === Mobile Height === */
  .mobile\:h-20  { height: clamp(12.5rem, 20vh, 15.5rem) !important; }
  .mobile\:h-25  { height: clamp(15.5rem, 25vh, 18.5rem) !important; }
  .mobile\:h-30  { height: clamp(18.5rem, 30vh, 21.5rem) !important; }
  .mobile\:h-35  { height: clamp(21.5rem, 35vh, 24.5rem) !important; }
  .mobile\:h-40  { height: clamp(24.5rem, 40vh, 27.5rem) !important; }
  .mobile\:h-45  { height: clamp(27.5rem, 45vh, 30.5rem) !important; }
  .mobile\:h-50  { height: clamp(30.5rem, 50vh, 33.5rem) !important; }
  .mobile\:h-55  { height: clamp(33.5rem, 55vh, 36.5rem) !important; }
  .mobile\:h-60  { height: clamp(36.5rem, 60vh, 39.5rem) !important; }
  .mobile\:h-65  { height: clamp(39.5rem, 65vh, 42.5rem) !important; }
  .mobile\:h-70  { height: clamp(42.5rem, 70vh, 45.5rem) !important; }
  .mobile\:h-75  { height: clamp(45.5rem, 75vh, 48.5rem) !important; }
  .mobile\:h-80  { height: clamp(48.5rem, 80vh, 51.5rem) !important; }
  .mobile\:h-85  { height: clamp(51.5rem, 85vh, 54.5rem) !important; }
  .mobile\:h-90  { height: clamp(54.5rem, 90vh, 57.5rem) !important; }
  .mobile\:h-95  { height: clamp(57.5rem, 95vh, 60.5rem) !important; }
  .mobile\:h-100 { height: clamp(60.5rem, 100vh, 63.5rem) !important; }
  .mobile\:h-full{height: 100% !important;}
  .mobile\:h-auto{height: auto !important;}

  /* Margin-bottom positivi con clamp */
  .mobile\:mb-1  { margin-bottom: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:mb-2  { margin-bottom: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:mb-3  { margin-bottom: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:mb-4  { margin-bottom: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:mb-5  { margin-bottom: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:mb-6  { margin-bottom: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:mb-7  { margin-bottom: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:mb-8  { margin-bottom: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:mb-9  { margin-bottom: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:mb-10 { margin-bottom: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:mb-11 { margin-bottom: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:mb-12 { margin-bottom: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:mb-13 { margin-bottom: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:mb-14 { margin-bottom: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:mb-15 { margin-bottom: clamp(7.5rem, 15vw, 15rem) !important; }

  /* Margin-bottom negativi con clamp */
  .mobile\:mb-0  { margin-bottom: 0 !important; }
  .mobile\:mb--1  { margin-bottom: clamp(-1rem, -1vw, -0.5rem) !important; }
  .mobile\:mb--2  { margin-bottom: clamp(-2rem, -2vw, -1rem) !important; }
  .mobile\:mb--3  { margin-bottom: clamp(-3rem, -3vw, -1.5rem) !important; }
  .mobile\:mb--4  { margin-bottom: clamp(-4rem, -4vw, -2rem) !important; }
  .mobile\:mb--5  { margin-bottom: clamp(-5rem, -5vw, -2.5rem) !important; }
  .mobile\:mb--6  { margin-bottom: clamp(-6rem, -6vw, -3rem) !important; }
  .mobile\:mb--7  { margin-bottom: clamp(-7rem, -7vw, -3.5rem) !important; }
  .mobile\:mb--8  { margin-bottom: clamp(-8rem, -8vw, -4rem) !important; }
  .mobile\:mb--9  { margin-bottom: clamp(-9rem, -9vw, -4.5rem) !important; }
  .mobile\:mb--10 { margin-bottom: clamp(-10rem, -10vw, -5rem) !important; }
  .mobile\:mb--11 { margin-bottom: clamp(-11rem, -11vw, -5.5rem) !important; }
  .mobile\:mb--12 { margin-bottom: clamp(-12rem, -12vw, -6rem) !important; }
  .mobile\:mb--13 { margin-bottom: clamp(-13rem, -13vw, -6.5rem) !important; }
  .mobile\:mb--14 { margin-bottom: clamp(-14rem, -14vw, -7rem) !important; }
  .mobile\:mb--15 { margin-bottom: clamp(-15rem, -15vw, -7.5rem) !important; }
  .mobile\:mb--16 { margin-bottom: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Margin Right === */
  .mobile\:mr-0  { margin-right: 0 !important; }
  .mobile\:mr-1  { margin-right: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:mr-2  { margin-right: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:mr-3  { margin-right: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:mr-4  { margin-right: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:mr-5  { margin-right: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:mr-6  { margin-right: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:mr-7  { margin-right: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:mr-8  { margin-right: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:mr-9  { margin-right: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:mr-10 { margin-right: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:mr-11 { margin-right: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:mr-12 { margin-right: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:mr-13 { margin-right: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:mr-14 { margin-right: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:mr-15 { margin-right: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Right Negative === */
  .mobile\:mr--1  { margin-right: clamp(-1rem, -1vw, -0.5rem) !important; }
  .mobile\:mr--2  { margin-right: clamp(-2rem, -2vw, -1rem) !important; }
  .mobile\:mr--3  { margin-right: clamp(-3rem, -3vw, -1.5rem) !important; }
  .mobile\:mr--4  { margin-right: clamp(-4rem, -4vw, -2rem) !important; }
  .mobile\:mr--5  { margin-right: clamp(-5rem, -5vw, -2.5rem) !important; }
  .mobile\:mr--6  { margin-right: clamp(-6rem, -6vw, -3rem) !important; }
  .mobile\:mr--7  { margin-right: clamp(-7rem, -7vw, -3.5rem) !important; }
  .mobile\:mr--8  { margin-right: clamp(-8rem, -8vw, -4rem) !important; }
  .mobile\:mr--9  { margin-right: clamp(-9rem, -9vw, -4.5rem) !important; }
  .mobile\:mr--10 { margin-right: clamp(-10rem, -10vw, -5rem) !important; }
  .mobile\:mr--11 { margin-right: clamp(-11rem, -11vw, -5.5rem) !important; }
  .mobile\:mr--12 { margin-right: clamp(-12rem, -12vw, -6rem) !important; }
  .mobile\:mr--13 { margin-right: clamp(-13rem, -13vw, -6.5rem) !important; }
  .mobile\:mr--14 { margin-right: clamp(-14rem, -14vw, -7rem) !important; }
  .mobile\:mr--15 { margin-right: clamp(-15rem, -15vw, -7.5rem) !important; }
  .mobile\:mr--16 { margin-right: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Margin (All sides) === */
  .mobile\:m-0  { margin: 0 !important; }
  .mobile\:m-1  { margin: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:m-2  { margin: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:m-3  { margin: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:m-4  { margin: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:m-5  { margin: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:m-6  { margin: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:m-7  { margin: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:m-8  { margin: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:m-9  { margin: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:m-10 { margin: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:m-11 { margin: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:m-12 { margin: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:m-13 { margin: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:m-14 { margin: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:m-15 { margin: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Negative (All sides) === */
  .mobile\:m--1  { margin: clamp(-1rem, -1vw, -0.5rem) !important; }
  .mobile\:m--2  { margin: clamp(-2rem, -2vw, -1rem) !important; }
  .mobile\:m--3  { margin: clamp(-3rem, -3vw, -1.5rem) !important; }
  .mobile\:m--4  { margin: clamp(-4rem, -4vw, -2rem) !important; }
  .mobile\:m--5  { margin: clamp(-5rem, -5vw, -2.5rem) !important; }
  .mobile\:m--6  { margin: clamp(-6rem, -6vw, -3rem) !important; }
  .mobile\:m--7  { margin: clamp(-7rem, -7vw, -3.5rem) !important; }
  .mobile\:m--8  { margin: clamp(-8rem, -8vw, -4rem) !important; }
  .mobile\:m--9  { margin: clamp(-9rem, -9vw, -4.5rem) !important; }
  .mobile\:m--10 { margin: clamp(-10rem, -10vw, -5rem) !important; }
  .mobile\:m--11 { margin: clamp(-11rem, -11vw, -5.5rem) !important; }
  .mobile\:m--12 { margin: clamp(-12rem, -12vw, -6rem) !important; }
  .mobile\:m--13 { margin: clamp(-13rem, -13vw, -6.5rem) !important; }
  .mobile\:m--14 { margin: clamp(-14rem, -14vw, -7rem) !important; }
  .mobile\:m--15 { margin: clamp(-15rem, -15vw, -7.5rem) !important; }
  .mobile\:m--16 { margin: clamp(-16rem, -16vw, -8rem) !important; }
  .mobile\:m-auto { margin: 0 auto !important; }
  .mobile\:mx-auto{margin-left:auto ;margin-right: auto;}

  /* === Responsive Margin Left === */
  .mobile\:ml-0  { margin-left: 0 !important; }
  .mobile\:ml-1  { margin-left: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:ml-2  { margin-left: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:ml-3  { margin-left: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:ml-4  { margin-left: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:ml-5  { margin-left: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:ml-6  { margin-left: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:ml-7  { margin-left: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:ml-8  { margin-left: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:ml-9  { margin-left: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:ml-10 { margin-left: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:ml-11 { margin-left: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:ml-12 { margin-left: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:ml-13 { margin-left: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:ml-14 { margin-left: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:ml-15 { margin-left: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Left Negative === */
  .mobile\:ml--1  { margin-left: clamp(-1rem, -1vw, -0.5rem) !important; }
  .mobile\:ml--2  { margin-left: clamp(-2rem, -2vw, -1rem) !important; }
  .mobile\:ml--3  { margin-left: clamp(-3rem, -3vw, -1.5rem) !important; }
  .mobile\:ml--4  { margin-left: clamp(-4rem, -4vw, -2rem) !important; }
  .mobile\:ml--5  { margin-left: clamp(-5rem, -5vw, -2.5rem) !important; }
  .mobile\:ml--6  { margin-left: clamp(-6rem, -6vw, -3rem) !important; }
  .mobile\:ml--7  { margin-left: clamp(-7rem, -7vw, -3.5rem) !important; }
  .mobile\:ml--8  { margin-left: clamp(-8rem, -8vw, -4rem) !important; }
  .mobile\:ml--9  { margin-left: clamp(-9rem, -9vw, -4.5rem) !important; }
  .mobile\:ml--10 { margin-left: clamp(-10rem, -10vw, -5rem) !important; }
  .mobile\:ml--11 { margin-left: clamp(-11rem, -11vw, -5.5rem) !important; }
  .mobile\:ml--12 { margin-left: clamp(-12rem, -12vw, -6rem) !important; }
  .mobile\:ml--13 { margin-left: clamp(-13rem, -13vw, -6.5rem) !important; }
  .mobile\:ml--14 { margin-left: clamp(-14rem, -14vw, -7rem) !important; }
  .mobile\:ml--15 { margin-left: clamp(-15rem, -15vw, -7.5rem) !important; }
  .mobile\:ml--16 { margin-left: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Margin Top === */
  .mobile\:mt-0  { margin-top: 0 !important; }
  .mobile\:mt-1  { margin-top: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:mt-2  { margin-top: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:mt-3  { margin-top: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:mt-4  { margin-top: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:mt-5  { margin-top: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:mt-6  { margin-top: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:mt-7  { margin-top: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:mt-8  { margin-top: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:mt-9  { margin-top: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:mt-10 { margin-top: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:mt-11 { margin-top: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:mt-12 { margin-top: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:mt-13 { margin-top: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:mt-14 { margin-top: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:mt-15 { margin-top: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Margin Top Negative === */
  .mobile\:mt--1  { margin-top: clamp(-1rem, -1vw, -0.5rem) !important; }
  .mobile\:mt--2  { margin-top: clamp(-2rem, -2vw, -1rem) !important; }
  .mobile\:mt--3  { margin-top: clamp(-3rem, -3vw, -1.5rem) !important; }
  .mobile\:mt--4  { margin-top: clamp(-4rem, -4vw, -2rem) !important; }
  .mobile\:mt--5  { margin-top: clamp(-5rem, -5vw, -2.5rem) !important; }
  .mobile\:mt--6  { margin-top: clamp(-6rem, -6vw, -3rem) !important; }
  .mobile\:mt--7  { margin-top: clamp(-7rem, -7vw, -3.5rem) !important; }
  .mobile\:mt--8  { margin-top: clamp(-8rem, -8vw, -4rem) !important; }
  .mobile\:mt--9  { margin-top: clamp(-9rem, -9vw, -4.5rem) !important; }
  .mobile\:mt--10 { margin-top: clamp(-10rem, -10vw, -5rem) !important; }
  .mobile\:mt--11 { margin-top: clamp(-11rem, -11vw, -5.5rem) !important; }
  .mobile\:mt--12 { margin-top: clamp(-12rem, -12vw, -6rem) !important; }
  .mobile\:mt--13 { margin-top: clamp(-13rem, -13vw, -6.5rem) !important; }
  .mobile\:mt--14 { margin-top: clamp(-14rem, -14vw, -7rem) !important; }
  .mobile\:mt--15 { margin-top: clamp(-15rem, -15vw, -7.5rem) !important; }
  .mobile\:mt--16 { margin-top: clamp(-16rem, -16vw, -8rem) !important; }

  /* === Responsive Padding Top === */
  .mobile\:pt-0{padding-top: 0 !important;}
  .mobile\:pt-1  { padding-top: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:pt-2  { padding-top: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:pt-3  { padding-top: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:pt-4  { padding-top: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:pt-5  { padding-top: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:pt-6  { padding-top: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:pt-7  { padding-top: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:pt-8  { padding-top: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:pt-9  { padding-top: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:pt-10 { padding-top: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:pt-11 { padding-top: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:pt-12 { padding-top: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:pt-13 { padding-top: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:pt-14 { padding-top: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:pt-15 { padding-top: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding Bottom === */
  .mobile\:pb-0{padding-bottom: 0 !important;}
  .mobile\:pb-1  { padding-bottom: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:pb-2  { padding-bottom: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:pb-3  { padding-bottom: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:pb-4  { padding-bottom: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:pb-5  { padding-bottom: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:pb-6  { padding-bottom: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:pb-7  { padding-bottom: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:pb-8  { padding-bottom: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:pb-9  { padding-bottom: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:pb-10 { padding-bottom: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:pb-11 { padding-bottom: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:pb-12 { padding-bottom: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:pb-13 { padding-bottom: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:pb-14 { padding-bottom: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:pb-15 { padding-bottom: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding Left === */
  .mobile\:pl-0 { padding-left: 0 !important; }
  .mobile\:pl-1  { padding-left: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:pl-2  { padding-left: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:pl-3  { padding-left: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:pl-4  { padding-left: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:pl-5  { padding-left: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:pl-6  { padding-left: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:pl-7  { padding-left: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:pl-8  { padding-left: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:pl-9  { padding-left: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:pl-10 { padding-left: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:pl-11 { padding-left: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:pl-12 { padding-left: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:pl-13 { padding-left: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:pl-14 { padding-left: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:pl-15 { padding-left: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding Right === */
  .mobile\:pr-0 { padding-right: 0 !important; }
  .mobile\:pr-1  { padding-right: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:pr-2  { padding-right: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:pr-3  { padding-right: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:pr-4  { padding-right: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:pr-5  { padding-right: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:pr-6  { padding-right: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:pr-7  { padding-right: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:pr-8  { padding-right: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:pr-9  { padding-right: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:pr-10 { padding-right: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:pr-11 { padding-right: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:pr-12 { padding-right: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:pr-13 { padding-right: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:pr-14 { padding-right: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:pr-15 { padding-right: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Padding (All sides) === */
  .mobile\:p-0  {padding: 0 !important;}
  .mobile\:p-1  { padding: clamp(0.5rem, 1vw, 1rem) !important; }
  .mobile\:p-2  { padding: clamp(1rem, 2vw, 2rem) !important; }
  .mobile\:p-3  { padding: clamp(1.5rem, 3vw, 3rem) !important; }
  .mobile\:p-4  { padding: clamp(2rem, 4vw, 4rem) !important; }
  .mobile\:p-5  { padding: clamp(2.5rem, 5vw, 5rem) !important; }
  .mobile\:p-6  { padding: clamp(3rem, 6vw, 6rem) !important; }
  .mobile\:p-7  { padding: clamp(3.5rem, 7vw, 7rem) !important; }
  .mobile\:p-8  { padding: clamp(4rem, 8vw, 8rem) !important; }
  .mobile\:p-9  { padding: clamp(4.5rem, 9vw, 9rem) !important; }
  .mobile\:p-10 { padding: clamp(5rem, 10vw, 10rem) !important; }
  .mobile\:p-11 { padding: clamp(5.5rem, 11vw, 11rem) !important; }
  .mobile\:p-12 { padding: clamp(6rem, 12vw, 12rem) !important; }
  .mobile\:p-13 { padding: clamp(6.5rem, 13vw, 13rem) !important; }
  .mobile\:p-14 { padding: clamp(7rem, 14vw, 14rem) !important; }
  .mobile\:p-15 { padding: clamp(7.5rem, 15vw, 15rem) !important; }

  /* === Responsive Top === */
  .mobile\:top-0  { top: 0% !important; }
  .mobile\:top-5  { top: 5% !important; }
  .mobile\:top-10 { top: 10% !important; }
  .mobile\:top-15 { top: 15% !important; }
  .mobile\:top-20 { top: 20% !important; }
  .mobile\:top-25 { top: 25% !important; }
  .mobile\:top-30 { top: 30% !important; }
  .mobile\:top-35 { top: 35% !important; }
  .mobile\:top-40 { top: 40% !important; }
  .mobile\:top-45 { top: 45% !important; }
  .mobile\:top-50 { top: 50% !important; transform: translateY(-50%);}
  .mobile\:top-60 { top: 60% !important; }      
  .mobile\:top-70 { top: 70% !important; }
  .mobile\:top-80 { top: 80% !important; }
  .mobile\:top-90 { top: 90% !important; }
  .mobile\:top-100 { top: 100% !important; }

  .mobile\:top--5  { top: -5% !important; }
  .mobile\:top--10 { top: -10% !important; }
  .mobile\:top--15 { top: -15% !important; }
  .mobile\:top--20 { top: -20% !important; }
  .mobile\:top--25 { top: -25% !important; }
  .mobile\:top--30 { top: -30% !important; }
  .mobile\:top--35 { top: -35% !important; }
  .mobile\:top--40 { top: -40% !important; }
  .mobile\:top--45 { top: -45% !important; }
  .mobile\:top--50 { top: -50% !important; }
  .mobile\:top--60 { top: -60% !important; }
  .mobile\:top--70 { top: -70% !important; }
  .mobile\:top--80 { top: -80% !important; }
  .mobile\:top--90 { top: -90% !important; }
  .mobile\:top--100{ top: -100% !important; }

  /* === Responsive Left === */
  .mobile\:left-0  { left: 0% !important; }
  .mobile\:left-5  { left: 5% !important; }
  .mobile\:left-10 { left: 10% !important; }
  .mobile\:left-15 { left: 15% !important; }
  .mobile\:left-20 { left: 20% !important; }
  .mobile\:left-25 { left: 25% !important; }
  .mobile\:left-30 { left: 30% !important; }
  .mobile\:left-35 { left: 35% !important; }
  .mobile\:left-40 { left: 40% !important; }
  .mobile\:left-45 { left: 45% !important; }
  .mobile\:left-50 { left: 50% !important; transform: translateX(-50%); }
  .mobile\:left-60 { left: 60% !important; }
  .mobile\:left-70 { left: 70% !important; }
  .mobile\:left-80 { left: 80% !important; }
  .mobile\:left-90 { left: 90% !important; }
  .mobile\:left-100{ left: 100% !important; }
  .mobile\:left-unset{left: unset !important; transform: translateX(0%);}

  .mobile\:left--5  { left: -5% !important; }
  .mobile\:left--10 { left: -10% !important; }
  .mobile\:left--15 { left: -15% !important; }
  .mobile\:left--20 { left: -20% !important; }
  .mobile\:left--25 { left: -25% !important; }
  .mobile\:left--30 { left: -30% !important; }
  .mobile\:left--35 { left: -35% !important; }
  .mobile\:left--40 { left: -40% !important; }
  .mobile\:left--45 { left: -45% !important; }
  .mobile\:left--50 { left: -50% !important; transform: translateX(50%);}
  .mobile\:left--60 { left: -60% !important; }
  .mobile\:left--70 { left: -70% !important; }
  .mobile\:left--80 { left: -80% !important; }
  .mobile\:left--90 { left: -90% !important; }
  .mobile\:left--100{ left: -100% !important; }

  /* === Responsive Right === */
  .mobile\:right-0  { right: 0% !important; }
  .mobile\:right-5  { right: 5% !important; }
  .mobile\:right-10 { right: 10% !important; }
  .mobile\:right-15 { right: 15% !important; }
  .mobile\:right-20 { right: 20% !important; }
  .mobile\:right-25 { right: 25% !important; }
  .mobile\:right-30 { right: 30% !important; }
  .mobile\:right-35 { right: 35% !important; }
  .mobile\:right-40 { right: 40% !important; }
  .mobile\:right-45 { right: 45% !important; }
  .mobile\:right-50 { right: 50% !important; transform: translateX(50%); }
  .mobile\:right-60 { right: 60% !important; }
  .mobile\:right-70 { right: 70% !important; }
  .mobile\:right-80 { right: 80% !important; }
  .mobile\:right-90 { right: 90% !important; }
  .mobile\:right-100{ right: 100% !important; }

  .mobile\:right--5  { right: -5% !important; }
  .mobile\:right--10 { right: -10% !important; }
  .mobile\:right--15 { right: -15% !important; }
  .mobile\:right--20 { right: -20% !important; }
  .mobile\:right--25 { right: -25% !important; }
  .mobile\:right--30 { right: -30% !important; }
  .mobile\:right--35 { right: -35% !important; }
  .mobile\:right--40 { right: -40% !important; }
  .mobile\:right--45 { right: -45% !important; }
  .mobile\:right--50 { right: -50% !important; transform: translateX(-50%); }
  .mobile\:right--60 { right: -60% !important; }
  .mobile\:right--70 { right: -70% !important; }
  .mobile\:right--80 { right: -80% !important; }
  .mobile\:right--90 { right: -90% !important; }
  .mobile\:right--100{ right: -100% !important; }

  /* === Responsive Bottom === */
  .mobile\:bottom-0  { bottom: 0% !important; }
  .mobile\:bottom-5  { bottom: 5% !important; }
  .mobile\:bottom-10 { bottom: 10% !important; }
  .mobile\:bottom-15 { bottom: 15% !important; }
  .mobile\:bottom-20 { bottom: 20% !important; }
  .mobile\:bottom-25 { bottom: 25% !important; }
  .mobile\:bottom-30 { bottom: 30% !important; }
  .mobile\:bottom-35 { bottom: 35% !important; }
  .mobile\:bottom-40 { bottom: 40% !important; }
  .mobile\:bottom-45 { bottom: 45% !important; }
  .mobile\:bottom-50 { bottom: 50% !important; }
  .mobile\:bottom-60 { bottom: 60% !important; }
  .mobile\:bottom-70 { bottom: 70% !important; }
  .mobile\:bottom-80 { bottom: 80% !important; }
  .mobile\:bottom-90 { bottom: 90% !important; }
  .mobile\:bottom-100{ bottom: 100% !important; }

  .mobile\:bottom--5  { bottom: -5% !important; }
  .mobile\:bottom--10 { bottom: -10% !important; }
  .mobile\:bottom--15 { bottom: -15% !important; }
  .mobile\:bottom--20 { bottom: -20% !important; }
  .mobile\:bottom--25 { bottom: -25% !important; }
  .mobile\:bottom--30 { bottom: -30% !important; }
  .mobile\:bottom--35 { bottom: -35% !important; }
  .mobile\:bottom--40 { bottom: -40% !important; }
  .mobile\:bottom--45 { bottom: -45% !important; }
  .mobile\:bottom--50 { bottom: -50% !important; }
  .mobile\:bottom--60 { bottom: -60% !important; }
  .mobile\:bottom--70 { bottom: -70% !important; }
  .mobile\:bottom--80 { bottom: -80% !important; }
  .mobile\:bottom--90 { bottom: -90% !important; }
  .mobile\:bottom--100{ bottom: -100% !important; }

  .mobile\:relative{position: relative !important;}
  .mobile\:absolute{position: absolute !important;}

  /* Allineamento lungo l'asse principale */

  .mobile\:justify-start {justify-content: flex-start !important;}
  .mobile\:justify-end {justify-content: flex-end !important;}
  .mobile\:justify-center { justify-content: center !important;}
  .mobile\:justify-between {justify-content: space-between !important;}
  .mobile\:justify-around {justify-content: space-around !important;}
  .mobile\:justify-evenly {justify-content: space-evenly !important;}

  /* Allineamento trasversale */

  .mobile\:items-start {align-items: flex-start !important;}
  .mobile\:items-end {align-items: flex-end !important;}
  .mobile\:items-center {align-items: center !important;}
  .mobile\:items-baseline {align-items: baseline !important;}
  .mobile\:items-stretch {align-items: stretch !important;}

  
  /* === Responsive Gap === */
  .mobile\:gap-5   { gap: clamp(3px, 0.5vw, 5px) !important; }
  .mobile\:gap-10  { gap: clamp(6px, 1vw, 10px) !important; }
  .mobile\:gap-15  { gap: clamp(9px, 1.5vw, 15px) !important; }
  .mobile\:gap-20  { gap: clamp(12px, 2vw, 20px) !important; }
  .mobile\:gap-0   { gap: clamp(0px, 0vw, 0px) !important; }
  .mobile\:gap-25  { gap: clamp(15px, 2.5vw, 25px) !important; }
  .mobile\:gap-30  { gap: clamp(18px, 3vw, 30px) !important; }
  .mobile\:gap-35  { gap: clamp(21px, 3.5vw, 35px) !important; }
  .mobile\:gap-40  { gap: clamp(24px, 4vw, 40px) !important; }
  .mobile\:gap-45  { gap: clamp(27px, 4.5vw, 45px) !important; }
  .mobile\:gap-50  { gap: clamp(30px, 5vw, 50px) !important; }
  .mobile\:gap-60  { gap: clamp(36px, 6vw, 60px) !important; }
  .mobile\:gap-65  { gap: clamp(39px, 6.5vw, 65px) !important; }
  .mobile\:gap-70  { gap: clamp(42px, 7vw, 70px) !important; }
  .mobile\:gap-80  { gap: clamp(48px, 8vw, 80px) !important; }
  .mobile\:gap-90  { gap: clamp(54px, 9vw, 90px) !important; }
  .mobile\:gap-100 { gap: clamp(60px, 10vw, 100px) !important; }

}









/* Allineamento lungo l'asse principale */

.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.justify-center { justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
.justify-evenly {justify-content: space-evenly;}

/* Allineamento trasversale */

.items-start {align-items: flex-start;}
.items-end {align-items: flex-end;}
.items-center {align-items: center;}
.items-baseline {align-items: baseline;}
.items-stretch {align-items: stretch;}



/* === Responsive Row Gap === */
.row-gap-0   { row-gap: clamp(0px, 0vw, 0px) !important; }
.row-gap-5   { row-gap: clamp(3px, 0.5vw, 5px) !important; }
.row-gap-10  { row-gap: clamp(6px, 1vw, 10px) !important; }
.row-gap-15  { row-gap: clamp(9px, 1.5vw, 15px) !important; }
.row-gap-20  { row-gap: clamp(12px, 2vw, 20px) !important; }
.row-gap-25  { row-gap: clamp(15px, 2.5vw, 25px) !important; }
.row-gap-30  { row-gap: clamp(18px, 3vw, 30px) !important; }
.row-gap-35  { row-gap: clamp(21px, 3.5vw, 35px) !important; }
.row-gap-40  { row-gap: clamp(24px, 4vw, 40px) !important; }
.row-gap-45  { row-gap: clamp(27px, 4.5vw, 45px) !important; }
.row-gap-50  { row-gap: clamp(30px, 5vw, 50px) !important; }
.row-gap-60  { row-gap: clamp(36px, 6vw, 60px) !important; }
.row-gap-65  { row-gap: clamp(39px, 6.5vw, 65px) !important; }
.row-gap-70  { row-gap: clamp(42px, 7vw, 70px) !important; }
.row-gap-80  { row-gap: clamp(48px, 8vw, 80px) !important; }
.row-gap-90  { row-gap: clamp(54px, 9vw, 90px) !important; }
.row-gap-100 { row-gap: clamp(60px, 10vw, 100px) !important; }

/* === Responsive Column Gap === */
.column-gap-0   { column-gap: clamp(0px, 0vw, 0px) !important; }
.column-gap-5   { column-gap: clamp(3px, 0.5vw, 5px) !important; }
.column-gap-10  { column-gap: clamp(6px, 1vw, 10px) !important; }
.column-gap-15  { column-gap: clamp(9px, 1.5vw, 15px) !important; }
.column-gap-20  { column-gap: clamp(12px, 2vw, 20px) !important; }
.column-gap-25  { column-gap: clamp(15px, 2.5vw, 25px) !important; }
.column-gap-30  { column-gap: clamp(18px, 3vw, 30px) !important; }
.column-gap-35  { column-gap: clamp(21px, 3.5vw, 35px) !important; }
.column-gap-40  { column-gap: clamp(24px, 4vw, 40px) !important; }
.column-gap-45  { column-gap: clamp(27px, 4.5vw, 45px) !important; }
.column-gap-50  { column-gap: clamp(30px, 5vw, 50px) !important; }
.column-gap-60  { column-gap: clamp(36px, 6vw, 60px) !important; }
.column-gap-65  { column-gap: clamp(39px, 6.5vw, 65px) !important; }
.column-gap-70  { column-gap: clamp(42px, 7vw, 70px) !important; }
.column-gap-80  { column-gap: clamp(48px, 8vw, 80px) !important; }
.column-gap-90  { column-gap: clamp(54px, 9vw, 90px) !important; }
.column-gap-100 { column-gap: clamp(60px, 10vw, 100px) !important; }



/* Utility - Copertina */

.cover-bg {
  position: relative;
  background-image: var(--cover-bg-default); /* Usa solo per background-image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
  
.cover-bg-before::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
}

/* altro */

.full-w-dx{max-width: 100vw; margin:0 auto 0 5vw ;}
.full-w-sx{max-width: 100vw; margin:0 5vw 0 auto;}
.blue{color: var(--blue);}
.blue p{color: var(--site-text-color);}
.blue li{color: var(--site-text-color);}

.max-fit{max-width: fit-content !important;}

.list-clear{list-style-type: none;}

.text-site-bg{color: var(--site-bg) !important;}
.text-blue{color: var(--blue);}
.text-black{color: var(--site-text-color);}
.bg-blue{background: var(--blue);}

.grayscale {filter: grayscale(100%);}

.wp-block-cover{min-height: inherit !important;}


.btn-with-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.btn-with-svg:hover{gap: 8px;}

.btn-with-svg::after {
  content: '';
  display: inline-block;
  width: 0px;
  height: 20px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s cubic-bezier(.215, .61, .355, 1);
  background-image: url("data:image/svg+xml;utf8,<svg width='26' height='21' viewBox='0 0 26 21' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M24.375 17.0435C24.375 17.2084 24.3433 17.3644 24.2978 17.5131L17.0625 9.73096L24.375 4.04346V17.0435ZM2.88925 18.6246L10.2212 10.8116L13 12.9119L15.6585 10.7986L23.1108 18.6246C22.9946 18.6514 3.00544 18.6514 2.88925 18.6246ZM1.625 17.0435V4.04346L8.9375 9.73096L1.70219 17.5131C1.65669 17.3644 1.625 17.2084 1.625 17.0435ZM23.5625 2.41846L13 10.5435L2.4375 2.41846H23.5625ZM22.75 0.793457H3.25C1.45519 0.793457 0 2.24864 0 4.04346V17.0435C0 18.8383 1.45519 20.2935 3.25 20.2935H22.75C24.5448 20.2935 26 18.8383 26 17.0435V4.04346C26 2.24864 24.5448 0.793457 22.75 0.793457Z' fill='%23282525'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

.btn-with-svg:hover::after {
  opacity: 1;height: clamp(1.1rem, 2vw, 1.15rem);width: 27px;
  margin-left: 8px;
  transform: translateX(0);
  filter: invert(1);
  margin-top: 0px;
}



/* Utility - State */
.active { background: var(--site-text-color); color: var(--site-bg) ; }


input,textarea{border-radius: 10px !important;}
input[type=submit]{width: 100%;color: var(--contrast);}

/* Accessibility */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* underline for accesibility */
.text-content a,
.comment-content a{text-decoration: underline;}

/* ! Icon System - https://ionicframework.com/docs/v3/ionicons/ */

.icon-1{width: 40px;height: 40px;}
.icon-2{width: 70px;padding: 8px;}
.icon-3{width: 100px;padding: 8px;}

.icon-invert{filter: invert(1);}

/* Animation on scroll */
.fade {  opacity: 0; transform: translateY(40px); transition: 1s ease-in-out; will-change: transform, opacity;}
.fadeIn { opacity: 1;transform: translateY(0px)}


/* Animation System on scroll v2 
--------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .8s cubic-bezier(.2,.7,.25,1), filter .8s cubic-bezier(.2,.7,.25,1); will-change: opacity, transform, filter; }

/* Directional variants */
.reveal.reveal-up { transform: translateY(30px); }
.reveal.reveal-down { transform: translateY(-30px); }
.reveal.reveal-left { transform: translateX(30px); }
.reveal.reveal-right { transform: translateX(-30px); }
.reveal.reveal-zoom { transform: scale(.95); }
.reveal.reveal-skew { transform: translateY(20px) skewY(5deg); }
.reveal.reveal-blur { filter: blur(6px); }

/* Active state on scroll */
.reveal.is-inview { opacity: 1; transform: none; filter: none; }

/* Clip-path effect */
.reveal.reveal-clip { display: inline-block; position: relative; overflow: hidden; /* create mask */ clip-path: inset(0 0 100% 0); /* hidden from bottom */ transform: translateY(20px); /* placed below */ }

/* Clip-path active state */
.reveal.reveal-clip.is-inview { animation: clip 0.9s cubic-bezier(.2,.7,.25,1) forwards; }

/* Keyframes for clip-path reveal */
@keyframes clip {
  0% { clip-path: inset(0% 0 100% 0); /* masked at bottom */ transform: translateY(0px); /* pushed down */ }
  100% { clip-path: inset(0 0 0 0); /* fully visible */ transform: translateY(0); /* normal position */ }
}

/* Accessibility: disable animations */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* Delay utilities */
.delay-01 { transition-delay: .1s; }
.delay-02 { transition-delay: .2s; }
.delay-03 { transition-delay: .3s; }
.delay-04 { transition-delay: .4s; }
.delay-05 { transition-delay: .5s; }
.delay-06 { transition-delay: .6s; }
.delay-07 { transition-delay: .7s; }
.delay-08 { transition-delay: .8s; }
.delay-09 { transition-delay: .9s; }
.delay-10 { transition-delay: 1s; }

/* Animation System v2 End */

/* Animation on load 
--------------------------------------------------------- */

@keyframes fade-load {
  from {opacity: 0; top:20px}
  to {opacity: 1; top:0;}
}
.load { 
  opacity: 0; 
  animation: fade-load cubic-bezier(0.385, 0.135, 0.15, 0.86) 0.5s forwards; 
}


/* Woo Commerce
------------------------------------------------------------------------ */
.menu-item-type-woocommerce-cart{position: relative;width: 30px;height: 18px;}
.menu-cart-total{position: relative;position: absolute;top:-10px; left:0;}
.menu-cart-total svg{height: 24px;width: 24px;}
.menu-cart-total span{position: absolute;bottom:10px; right:-2pxpx;font-size: 11px;}

/* button */
.woocommerce .button{background:#222!important; color:#fff!important; text-transform: uppercase;font-family: inherit!important;}

/* columns fix */
.woocommerce-content [class*='col-'],
.woocommerce-checkout [class*='col-'] {padding: 0;}

/* select */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 36px;}
.woocommerce-input-wrapper input{border-radius: 4px}

/* coupon */
.woocommerce #coupon_code{height: 36px;}

/* table */
#add_payment_method .cart-collaterals .cart_totals tr td, 
#add_payment_method .cart-collaterals .cart_totals tr th, 
.woocommerce-cart .cart-collaterals .cart_totals tr td, 
.woocommerce-cart .cart-collaterals .cart_totals tr th, 
.woocommerce-checkout .cart-collaterals .cart_totals tr td, 
.woocommerce-checkout .cart-collaterals .cart_totals tr th{border-top: 1px solid #ccc}

/* quantity single products */
.woocommerce .quantity input{margin-top: 0;border-radius: 4px;padding: 9.5px;}

/* price */
.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price{color:#000}

/* variations */
.woocommerce div.product form.cart .variations{padding: 10px;border-bottom: 1px solid #222;}
.woocommerce div.product form.cart .variations td, 
.woocommerce div.product form.cart .variations th{padding-bottom: 10px;}

.woocommerce select {
  /* Reset */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #666;
  outline: 0;
  font: inherit;
  /* Personalize */
  width: 20em;
  height: 40px;
  padding: 0 4em 0 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E") no-repeat right 0.8em center/1.4em;
  color: #222;
  border-radius: 0.25em;
  cursor: pointer;
}
.woocommerce select option {
  color: inherit;
  background-color: #320a28;
}
.woocommerce select:focus {
  outline: none;
}
.woocommerce select::-ms-expand {
  display: none;
}

.woocommerce .woocommerce-ordering select {border:none; width:200px}

@media (max-width: 768px) {
  .woocommerce-result-count{font-size: 12px;}
  .woocommerce .woocommerce-ordering select {font-size: 12px;margin-top:-10px; width:140px}
}

/* tabs */
.woocommerce div.product .woocommerce-tabs h2{display: none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 0; margin-bottom: 0px;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #222; color: #fff}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:#222}
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; } 
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }

/* messages */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  padding: 1em 2em 1em 3.5em;
  margin: 0 0 2em;
  border-radius: 4px;
  position: relative;
  background-color: #f7f6f7;
  color: #111;
  border-top: none;
  list-style: none outside;
  line-height: 32px;
  width: auto;
  word-wrap: break-word;
}

.woocommerce .woocommerce-message a.button{background: #4CAF50!important;}
.woocommerce-message::before{color: #4CAF50;}
.woocommerce .woocommerce-message {background: #e5fce5}

.woocommerce .woocommerce-error a.button{background: #F44336!important;}
.woocommerce-error::before{color: #F44336;}
.woocommerce .woocommerce-error {background: #FEECEB; color:#D91811}

.woocommerce .woocommerce-info a.button{background: #2296F2!important;}
.woocommerce .woocommerce-info a{color:#1478C8}
.woocommerce-info::before{color: #2296F2;}
.woocommerce .woocommerce-info {background: #E9F5FE;}

/* general fix */
.woocommerce a.added_to_cart{padding-left: 10px;}
.woocommerce-page #content .text-content a{text-decoration: none;}

.woocommerce span.onsale {background-color: #444;}
.woocommerce div.product .product_meta {font-size: 14px;}

/* hide title and button in shop list */
.woocommerce ul.products li.product .button {display: none;}
.woocommerce-shop h1{display: none;}


/* Woo Pagination */
.woocommerce nav.woocommerce-pagination ul {text-align: left;width: 100%;border:none}
.woocommerce nav.woocommerce-pagination ul li {border: 1px solid #222;margin-right: 10px;}
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a { float: left; padding: 14px 19px; }


/* End Woo Commerce
------------------------------------------------------------------------ */

/* clearfix for post float images */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
* html .clearfix            { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */