/* --------------------------------------------------------------------
* Defatul Stylesheet
* Author:		Mirko Cogo
* URL:			https://www.yumestudio.it/
-------------------------------------------------------------------- */
/*
* Normalize v8.0.1 / github.com/necolas/normalize.css
* General
* Smooth Scrollbar
* Remodal
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

:root {
  --col1: #0019b8;
  --col2: #2053a0;
  --col3: #6b7c84;
  --col4: #f5f8fa;
  --col5: #3979fd;
}

@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Thin.ttf) format("truetype");font-style:normal;font-weight:100}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-ThinItalic.ttf) format("truetype");font-style:italic;font-weight:100}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-ExtraLight.ttf) format("truetype");font-style:normal;font-weight:200}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-ExtraLightItalic.ttf) format("truetype");font-style:italic;font-weight:200}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Light.ttf) format("truetype");font-style:normal;font-weight:300}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-LightItalic.ttf) format("truetype");font-style:italic;font-weight:300}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Regular.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Italic.ttf) format("truetype");font-style:italic;font-weight:400}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Medium.ttf) format("truetype");font-style:normal;font-weight:500}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-MediumItalic.ttf) format("truetype");font-style:italic;font-weight:500}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-SemiBold.ttf) format("truetype");font-style:normal;font-weight:600}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-SemiBoldItalic.ttf) format("truetype");font-style:italic;font-weight:600}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Bold.ttf) format("truetype");font-style:normal;font-weight:700}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-BoldItalic.ttf) format("truetype");font-style:italic;font-weight:700}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-ExtraBold.ttf) format("truetype");font-style:normal;font-weight:800}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-ExtraBoldItalic.ttf) format("truetype");font-style:italic;font-weight:800}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Black.ttf) format("truetype");font-style:normal;font-weight:900}@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-BlackItalic.ttf) format("truetype");font-style:italic;font-weight:900}


/* ==============================================================*/
/* # GENERAL */
/* ==============================================================*/
html {
  scroll-behavior: smooth;
  overflow-x: hidden; 
}
html, body { font-family: 'Montserrat', Arial, Helvetica, sans-serif; color:var(--col5); font-size:22px; line-height: 35px; overflow-x: hidden; color:var(--col3);}
body { background: var(--col4) url('../img/bg.svg') top center / cover no-repeat;  padding-top:112px; }
.overflowhide {
  overflow: hidden !important;
}
img { max-width:100%;}

/* text selection */
::-moz-selection {
  background: var(--col5);
  color: #fff;
}

::selection {
  background: var(--col5);
  color: #fff;
}

::-moz-selection {
  background: var(--col5);
  color: #fff;
}

::-webkit-selection {
  background: var(--col5);
  color: #fff;
}

/* SCROLL */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--col2);
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--col3);
}
.error {
  background: #ed5050;
  color: #fff;
  padding: 5px;
}
.sent {
  background: #baf17a;
  color: #000;
  padding: 5px;
}



a:not([href])[name] {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

/* ==============================================================*/
/* # TESTI */
/* ==============================================================*/
.altf { font-family:  Arial, Helvetica, sans-serif; }
/* RESPONSIVE FONT SIZE */
p,
h1,
h1.maintitle span,
h2,
h3,
h3.maintitle span,
h4,
h5,
h6 {
    --min_breakpoint: 420;
    --max_breakpoint: 1440;
    --responsive: (var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - (var(--min_breakpoint) * 1px)) / (var(--max_breakpoint) - var(--min_breakpoint)));
    /* FOR BETTER UNDERSTANDING   --responsive: (var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1440 - 420)); */

    --fontsize: clamp(var(--min-font) * 1px, var(--responsive), var(--max-font) * 1px);
    /* clamp min value - optimal responsive value - max value, basic example font-size: clamp(35px, 4.5vw, 53px); */
    font-size: var(--fontsize);
}

h1 {
    --min-font: 35;
    --max-font: 53;
}

h2 {
    --min-font: 30;
    --max-font: 45;
}

h3 {
    --min-font: 25;
    --max-font: 40;
}

p {
    --min-font: 22;
    --max-font: 25;
}

h1.maintitle {
    font-weight: 900;
    line-height: 44px;
}

h1.maintitle span {
    font-weight: 400;
    --min-font: 18;
    --max-font: 22;
    line-height: 22px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}
h3.maintitle {
    font-weight: 900;
    line-height: 44px;
}

h3.maintitle span {
    font-weight: 400;
    --min-font: 18;
    --max-font: 22;
    line-height: 22px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}
/*
h1.maintitle span {
    font-weight: 400;
    --min-font: 16;
    --max-font: 18;
    display: inline-block;
    color: var(--col1);
    position: relative;
    margin-bottom: 20px;
    margin-bottom: 5px;
}
h1.maintitle span:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 1px;
    background-color: var(--col1);
    right: -43px;
    top: 50%;
    transform: translateY(-1px);
}
*/
.big, .big p {
    font-size: 120%;
}
.medium,
.medium p {
    font-size: 110%;
}

a { text-decoration: none; color:var(--col1);}
a:hover {
    color: var(--col3);
}
/* ==============================================================*/
/* # HEADER */
/* ==============================================================*/
header {
    top: 0;
    position: fixed;
    padding: 15px 0;
    z-index: 9;
    width: 100%;
    background: var(--col1);
    color: #fff;
    transition: 1s;
}
header>div { 
    display: flex;
    justify-content: space-between;
}
#logo { width:100%; color: #fff; max-width: 250px}

/* ==============================================================*/
/* # MENU */
/* ==============================================================*/
.menu { 
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.menu li.active a {
   /* border: 1px solid rgb(255 255 255 / 30%);*/
}
.menu li { 
    
}
.menu li a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: #fff;
    font-weight: normal;
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    transition: opacity 1s;
}
.menu li:hover a {
    /*color: var(--col1);*/
    opacity: 1;
}


.menu:hover a {
    /*color: var(--col1);*/
    opacity: 0.3;
}

.menu>li>a:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 2px;
    bottom: 1px;
    top: 33px;
    left: calc(50% - 15px);
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-color: #3979fd;
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.menu>li:hover>a:before, .menu>li.active>a:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
}


.menu>li>a:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1px;
    height: 20px;
    top: 12px;
    right: 0;
    background: #fff;
}
.menu>li:last-child>a:after {
    display: none;
}
.submenu { 
    position: absolute;
    z-index: 1;
    background: #fff;
    padding: 40px 20px 20px;
    border-radius: 0 0 2px 2px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    list-style: none;
    line-height: 40px;
    transition: .15s ease-in-out;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    /*top:110px;*/
    transform-origin: top;
    transform: perspective(1000px) rotateX(-90deg);
    transition: transform 0.3s ease-in-out;
}
.menu .submenu li a {
    padding:0;
}
.menu .submenu li:hover a {
   color:var(--col1);
}
.menu li:hover .submenu {
    visibility: visible;
    overflow: visible;
    opacity: 1;
    transition: 0.5s ease-in-out;
   /* top: 87px;*/
    transform: perspective(1000px) rotateX(0);
}


.button_container {
    display:none;
    position: fixed;
    margin-top: 11px;
    right: 15px;
    height: 47px;
    width: 50px;
    cursor: pointer;
    z-index: 100;
    text-align: center;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    top: 5px;
}

.button_container span {
    background: #fff;
    border: none;
    height: 2px;
    width: 70%;
    position: absolute;
    top: 17px;
    left: 8px;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}

.button_container span:nth-of-type(2) {
    top: 24px;
}

.button_container span:nth-of-type(3) {
    top: 32px;
}

.button_container.active .top {
    -webkit-transform: translateY(5px) translateX(0) rotate(45deg);
    transform: translateY(5px) translateX(0) rotate(45deg);
}

.button_container.active .middle {
    opacity: 0;
}

.button_container.active .bottom {
    -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
    transform: translateY(-11px) translateX(0) rotate(-45deg);
}

.button_container.active {
    right: 15px;
    pointer-events: auto;
}
.navbox { 
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: flex-end;
}

.lingueh { display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
}
.lingueh:hover a { opacity:0.5; }
.lingueh span { color:#3979fd; display: block;
    padding: 5px 10px;  }
.lingueh a {
    color: #fff;
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: #fff;
    position: relative;
    transition: opacity 1s;
}
.lingueh a:hover {
    opacity: 1;
}

/* ==============================================================*/
/* # HOMEPAGE */
/* ==============================================================*/
.homecover {
    height: calc(100vh - 114px);
    background-size: cover !important;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* ==============================================================*/
/* # BUTTONS */
/* ==============================================================*/
.btn-outline-1 { border: 1px solid rgb(255 255 255 / 70%);
    padding: 0;
    display: inline-block;
    text-decoration: none;
    margin-top: 30px;
    color: #fff;
    transition: color .6s ease-in;
    background: var(--col1);
    border-radius: 20px; 
}
.btn-outline-1>.testo{
    padding: 10px 20px;
    display: inline-block;
    border-right: 1px solid rgb(255 255 255 / 30%);
    font-weight: bold;
}
.btn-outline-1>.arrowbox {
    padding: 10px 15px; 
    color: #fff;
}
.btn-outline-1 .arrow{
    fill: currentColor;
}
.btn-outline-1:hover { color:var(--col2); }
.btn-outline-1 .arrow path:nth-of-type(1) {
    transform: translateX(0px);
    transition: transform .3s ease-in;
}
.btn-outline-1:hover .arrow path:nth-of-type(1) {
    transform: translateX(22px);
}
.btn-outline-1 .arrow path:nth-of-type(2) {
    transform: translateX(-22px);
    transition: transform .3s ease-in;
}
.btn-outline-1:hover .arrow path:nth-of-type(2) {
    transform: translateX(0px);
}

.btn-w { 
    background: #fff;
    border-radius: 0;
    color: var(--col1);
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #fff;
}
.btn-w:hover { 
    background: var(--col1);
    color: #ffffff;
    border: 1px solid #fff;
}

.btn-round-1 { background: var(--col2);
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    color: #fff;
    border: 1px solid var(--col2);
    transition: 1s;
}
/*
.btn-round-1:hover {
    color: var(--col1);
    border: 1px solid var(--col1);
}*/
.btn-round-1:hover {
    color: #fff;
    background: #000;
    border: 1px solid #000;
}
/* ==============================================================*/
/* # animazioni */
/* ==============================================================*/

 

  .reveal {
      visibility: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
  .reveal2 {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;

      transition: clip-path 1s;
  }
  .reveal2 img {
      -o-object-fit: cover;
      object-fit: cover;
      transform: scale(0.8);
      width: 100%;
      /*object-position: 50% 50%;*/
  }

/* ==============================================================*/
/* # Helpers */
/* ==============================================================*/
.relative { position: relative;}
.tj { text-align: justify; }
.bgcol1 { background: var(--col1); color: #fff; }
.bgcol2 { background: var(--col2); color:#fff; }
.bgcol5 {
    background: var(--col5);
    color: #fff;
}
.col1 { color: var(--col1); }
.bgcolw {
    background:#fff;
}

.socialico { padding:5px; }
.parallelogram {
    display:block;
    width: 150px;
    height: 200px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: var(--col1);
}
.white { background: #fff;}
.fw-5 {    font-weight: 500; }

.left-full {position: relative;}
.left-full:before { content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 100%;
    background: var(--col5);
    top: 0;
    right: 0;
    z-index: -1;
}

.left-full:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 80%, var(--col5) 100%);
    top: 0;
    right: 0;
   
}

/* ==============================================================*/
/* # FOOTER */
/* ==============================================================*/
footer { 
    position:relative;
    background: var(--col1);
    color:#fff;
    font-size: 14px;  
}
footer a { color:#fff; }
.logo-footer { padding:20px 10px 8px; max-height:130px; }
.fpriv { font-size: 12px;}
footer .menu { margin-top:20px;}
/* ==============================================================*/
/* # FORM */
/* ==============================================================*/
input, textarea {
        background: transparent;
            border: 1px solid rgb(255 255 255 / 50%);
        width: 100%;
            padding: 10px;
                margin: 5px 0;
        color:currentColor;
        transition: border 1s;
}
input::placeholder, textarea::placeholder {
    color: currentColor;
    opacity: 0.7;
}
input:focus-visible,textarea:focus-visible { outline: 0; border:1px solid #fff; }
input[type="checkbox"] { width:auto; }
.checkbox-label { line-height: 16px;}




/* input form textarea */

.fancy-form-label {
    color:var(--col3);
    font-size: 12px;
    text-transform: uppercase;
    position: absolute;
    top: 6px;
    left: 16px;
    cursor: text;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.fancy-form-label .fa-asterisk {
    font-size: 6px;
    vertical-align: text-top;
}


.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.fancy-form-label span {
    font-size: 14px;
    line-height: 10px;
}

.fancy-form .form-control {
    padding: 26px 16px 6px 16px;
    height: auto;
}

.fw-input {
    width: 100%;
}

.fancy-form {
    position: relative;
}

.form-control:focus {
    border-color: rgba(0, 0, 0, 0.26);
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
}

.fancy-form-input:focus+.fancy-form-label,
.fancy-form-textarea:focus+.fancy-form-label {
    color: #c0c0c0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

.form-control {
    background: transparent;
    color: #0e1219;
    border: 1px solid var(--col6);
    box-shadow: 0;
    -webkit-box-shadow: 0;
    border-radius: 0px;
}

.form-control:hover {
    border-bottom: 1px solid #00a2dd;
}

.form-control:focus {
    border: 1px solid #00a2dd;
}

.fancy-form select {
    margin: 0 !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.checkbox-label {
    color: #828282 !important;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.checkbox-label>input {
    margin-right: 10px;
}

.contmsg {
    padding: 15px;
    margin: 10px 0;
    text-align: center;
}

.form-group i.fa {
    font-size: 6px;
}

.btn1 {
    background: rgb(48, 53, 93);
    background-image: linear-gradient(to right, rgba(48, 53, 93, 1) 0%, rgba(19, 120, 166, 1) 50%, rgba(48, 53, 93, 1) 100%);
    padding: 10px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-background-size: 200% auto;
    background-size: 200% auto;
}

.btn1:hover {
    background-position: right center;
    color: #fff;
}


.btn2 {
    background: rgb(138, 144, 194);
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    border-radius: 0;
}

.btn2:hover {
    background: transparent;
    border: 1px solid rgb(138, 144, 194);
    color: rgb(138, 144, 194);
}


/* ==============================================================*/
/* # CONTATTI */
/* ==============================================================*/
.logo-contatti { width: 300px; display: inline-block; }

/* ==============================================================*/
/* # GMAPS */
/* ==============================================================*/
#google-map,
.google-map iframe {
    height: 500px;
    position: relative;
    background-color: #eee !important;
    z-index: 1;

}

.google-map iframe {
    display: block;
    width: 100%;
}

#google-map.contact-form-with-catcha {
    height: 500px;
}

.google-map-container {
    text-align: center;
    padding-top: 45px;
}


/* ==============================================================*/
/* # NEWS */
/* ==============================================================*/
.widget {
    margin-bottom: 60px;
}
.clearlist,
.clearlist li {
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.widget-posts-img {
    float: left;
    margin: 0 15px 0 0;
}
.widget-posts li {
    font-size: 13px;
    margin-bottom: 20px;
}
.widget-posts-descr {
    padding-left: 90px;
}
.blog-page-title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}


/* ==============================================================*/
/* # BRANDS
/* ==============================================================*/

.brands {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.brandsimg {
    width:100%;
    aspect-ratio: 3/1;
    object-fit: contain; 
    max-width: 130px;
    margin: 20px;
}

/* ==============================================================*/
/* # ANIMAZIONI CSS */
/* ==============================================================*/
.anim-fl,
.anim-fr {
    transition: left 1.2s cubic-bezier(0.38, -0.01, 0.35, 0.99), right 1.2s cubic-bezier(0.38, -0.01, 0.35, 0.99), opacity 1.2s cubic-bezier(0.38, -0.01, 0.35, 0.99);
    position: relative
}

.anim-fromcss.anim-fl {
    left: -50%;
    opacity: 0
}

.anim-fromcss.anim-fr {
    right: -50%;
    opacity: 0
}

.anim-fromcss.anim-fl.animate {
    left: 0%;
    opacity: 1
}

.anim-fromcss.anim-fr.animate {
    right: 0%;
    opacity: 1
}

.borbot {
    position: relative;
    padding: 0px 30px 10px 0;
    margin-right: 89px;
}

.borbot::before {
    content: "";
    display: block;
    width: 0%;
    height: 1px;
    background: var(--col1);
    position: absolute;
    bottom: 0;
    transition: width 0.5s;
    transition-delay: 0.5s;
}

.borbot::after {
    content: "";
    display: block;
    width: 1px;
    height: 0;
    background: var(--col1);
    position: absolute;
    right: 0;
    bottom: 0;
    transition: height 0.5s;
    transition-delay: 1s;
}

.animate .borbot::before {
    width: 100%;
}

.animate .borbot::after {
    height: calc(100% - 80px);
}


.btn-arw {
    background: var(--col1);
    color: #fff;
    display: inline-block;
    margin-top: 8px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: auto;
    opacity: 0;
    transition: opacity 1s;
    transition-delay: 1.5s;
}

.btn-arw::before {
    content: "";
    background: #fff;
    display: inline-block;
    height: 2px;
    width: 100%;
    position: absolute;
    top: -10px;
    transition: 1.5s;
}

.btn-arw svg {
    width: 60px;
    display: inline-block;
    padding: 18px 0px;
    position: absolute;
    transition: 0.5s;

}

.btn-arw>div {
    margin: 0px 15px;
    overflow: hidden;
    width: 60px;
    height: 50px;
    position: relative;
}

.animate .btn-arw {
    opacity: 1;
}

#ar0 {
    left: -100%;
}

.btn-arw:hover {
    color: #fff;
}

.btn-arw:hover svg {
    transform: translateX(100%);
}

.btn-arw:hover::before {
    background: var(--col1);
}


.bortop {
    position: relative;
    padding: 0px 30px 10px 0;
    min-height: 65px;
    margin-bottom: 75px;
}

.bortop::before {
    content: "";
    display: block;
    width: 0%;
    height: 1px;
    background: var(--col1);
    position: absolute;
    top: 0;
    right: 0;
    transition: width 0.5s;
    transition-delay: 0.5s;
}

.bortop::after {
    content: "";
    display: block;
    width: 1px;
    height: 0%;
    background: var(--col1);
    position: absolute;
    left: 0;
    top: 0;
    transition: height 0.5s;
    transition-delay: 1s;
}


.animate .bortop::before {
    width: 100%;
}

.animate .bortop::after {
    height: 100%;
}

.btn-arw2 {
    left: 0;
    right: auto;
    top: 80px;
}


/* ==============================================================*/
/* # RESPONSIVE */
/* ==============================================================*/
@media (max-width: 1199.98px) {
    #logo {max-width: 200px; }
        body {
            padding-top: 95px;
        }
}
@media (max-width: 991.98px) {
    header div {
        flex-direction: column;
    }

        .navbox {
        margin-top: 0px;
        
    }
 body {
     padding-top: 170px;
 }
 .navbox {

        align-items: center;
      

 }
 #logo {
     max-width: 150px;
 }
 .slogan { font-size: 11px !important;
    letter-spacing: 1px;
}
}      

@media (max-width: 767.98px) {
   
    
    header {
        height: 80px;
        transition: 0.5s;
    }
    header.open {
        overflow-y: auto;
        height: 100vh;
    }

    .button_container {
        display: block;
    }
    .menu {
        flex-direction: column;
        align-items: center;
        visibility: hidden;
        overflow: hidden;
        opacity: 0;
        height:0;
        transition: opacity 1s, height 0s;
    }

    header.open .menu{
          visibility: visible;
          overflow: visible;
          opacity: 1;
        height: 100%;
    }

    .menut { display: none; }

    #logo { max-height: 55px; }
    .slogan { margin: 20px auto 30px; display:none; letter-spacing: 1px; font-size:1.25rem !important }
    .open .slogan { display: block;}
        .menu>li>a:after { display:none; }
    .submenu {
        visibility: visible;
        overflow: visible;
        opacity: 1;
        padding: 0;
        padding-top: 5px;
        position: relative;
        background: none;
        text-align: center;
        top: 0;
        transform-origin: top;
        transform: none;
        transition: transform 0.3s ease-in-out;
        background: rgb(255 255 255 / 60%);
    }


    .menu li {
        width: 100%;
    }

    .menu li a {
        text-align: center;
    }

    .menu li:hover a {
        border-color: transparent;
        background: none;

    }

    .menu li:hover>a {
       /* color: var(--col3);*/
    }

    .menu>li:hover>a:before,
    .menu>li.active>a:before {
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
    }

    .menu li a.dropd {
        border-bottom: 1px solid rgb(51 51 51 / 25%);
        padding-bottom: 10px;

    }

    .lingueh { display: none;}
    .open  .lingueh {
                display: flex; margin-bottom: 20px;
         }

body {
    padding-top: 80px;
}
}

@media (max-width: 575.98px) {
    .borbot {margin-right: 0; }
    .borbot::after { width:0; }
    .btn-arw { position: relative; top: -1px;}
    .bortop {
        position: relative;
        padding: 0px;
        min-height: 0px;
        margin-bottom: 0;
    }
    .bortop:before { right: auto; left:0; }
    .btn-arw2 {
        top: 0px;
    }
}
@media (max-width: 349.98px) {

}


.icon svg { width:30px; }
a.icon {
    color: var(--col3); display:block;
}
a.icon:hover { color: var(--col1);}

.privacytext p { font-size: 14px; line-height: 18px;}