

:root{
    --primary_Color:#0FC2C0;
    --secondary_Color:#023535;
    --text-color:#747474;
    --black-color:#000;
    --bg-light-grey:#D6D6D6 ;
    --white-color:#fff;
    --dark-color:#0A3031;
}
html {
    font-size: clamp(7px, calc(0.33rem + 0.15vw), 10px); /*1rem = 10px*/
}
body{
    background:#fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 1.6rem;
    font-family: 'jaf-bernina-sans', sans-serif;
}
.bg-grey{
    background: var(--bg-light-grey);
}
a{
    color: var(--secondary_Color);
}
a:hover, a:active, a:focus{
    color: var(--primary_Color);
    text-decoration: underline;
}
.text-white{
    color: var(--white-color);
}
.d-inlineBlock {
    display: inline-block;
}
.img-fluid{
    max-width: 100%;
}
@media  screen and (min-width:1200px) {
    .container{
        max-width: 1266px;
    }
}
@media screen and (min-width:1400px) {
    .container{
        max-width:100% ;
        padding-inline:3.8rem;
    }
}
/* -- Header --*/
header {
    padding:3rem 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
@media screen and (min-width:768px) {
    header {
        padding-inline: 3rem;
    }
}
.logo{
    max-width: 130px;
    opacity: 0.9;
    transition: all ease-in-out 200ms;
}
.logo:hover{
    opacity: 0.6;
}
.head-right-link{
    text-align: right;
}
.head-right-link{
    font-size: 4rem;
    transition: all ease-in-out 0.3s;
  
}
.head-right-link a svg{
    fill: var(--secondary_Color);
    animation: scale-arrow ease 1s infinite;
}
.head-right-link a:hover svg{
    fill: var(--primary_Color);
}
.main-section{
    margin-top: 5rem;
    min-height: calc(100vh - 285px);
  
}
@media screen and (min-width:768px) {
    .main-section{
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.main-content{
    width: 100%;
    overflow: hidden;
    animation: down-in-1 ease 1s backwards;
}
.main-content p{
    /* font-size: 58px; */
    font-size: 6.46vw;
    line-height:1.1;
    font-weight: 600;
    /* transition: 0.2s; */
    color: var(--secondary_Color);
	letter-spacing:-1px;
    margin-bottom: 0;
}
/* @media screen and (min-width:1400px) {
    .main-content p{
        font-size:85px; 
        font-size: 4.36vw;
    }
} */
.text-large{
    font-weight: bold;
}
.load-content-1{
    animation: drop-in 1s ease 200ms backwards;
    transition-delay: 1s;
    opacity: 1;
}
.load-content-2{
    animation: drop-in 1s ease 300ms backwards;
    transition-delay: 1s;
    opacity: 1;
}
.fade-in{
    animation: fade-in 1s ease 300ms backwards;
    transition-delay: 0.4s;
    opacity: 1;
}
.left-animation::before{
    content: '';
    width: 100%;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    animation: left-width 2s ease 0.5s forwards;
    transition-delay: 0.4s;
    opacity: 1;
    background: #fff;
}
/*.fadein-line span:first-child{
    animation: down-in 1s ease 0.1s forwards;
    opacity: 1;
    display: inline-block;
}
.fadein-line span:nth-child(2){
    animation:down-in-2 1s ease 0.5s forwards;
    opacity: 0;
    display: inline-block;
}
.fadein-line span:nth-child(3){
    animation:up-in 1s ease 0.5s forwards;
    opacity: 0;
    display: inline-block;
}*/
@keyframes fade-in {
    from {
     opacity: 0;
    }
    to {
     opacity: 1;
    }
}
@keyframes drop-in {
    from {
        opacity: 0;
     transform: translateY(100px);
    }
    to {
        
     opacity: 1;
     transform: translate(0px);
    }
}
@keyframes down-in-1 {
    from {
        opacity: 0;
     transform: translateY(-200%);
    }
    to {
        
     opacity: 1;
     transform: translate(0px);
    }
}
@keyframes down-in-2 {
    from {
        opacity: 0;
     transform: translateY(-50%);
    }
    to {
        
     opacity: 1;
     transform: translate(0px);
    }
}
@keyframes up-in {
    from {
        opacity: 0;
     transform: translateY(150%);
    }
    to {
        
     opacity: 1;
     transform: translate(0px);
    }
}
@keyframes left-width {
    from {
     
     width: 100%;
    }
    to {
     width:0;
    }
}
@keyframes scale-arrow {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.main-content p{
    margin-top: 0;
}
.main-content a{
    text-decoration: none;
    font-weight: bold;
	display:inline-block;
}
.main-content a:hover{
    text-decoration: none;
}
.text-pink,
a.text-pink:hover,
a.text-pink:focus,
.hover-pink:hover{
    color: #BA0B8C;
}
.text-green,
a.text-green:hover,
a.text-green:focus,
.hover-green:hover{
    color: #32792D;
}
.text-primary,
a.text-primary:hover,
a.text-primary:focus,
.hover-primary:hover {
    color:var(--primary_Color);
}
.block-content{
    margin-top: 1.3vw;
    /* font-size: 6rem; */
    /* font-weight: 400; */
}
.block-content p{
    font-weight: 400;
    font-size: 6.46vw;
    line-height:1.14;
	letter-spacing:1px;
    margin: 0;
}

.main-bottom ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	gap: 15px;
}
.main-bottom ul li{
    margin-right: 3rem;
}
.main-bottom ul li:hover span:not(.icon-down){
    text-decoration: underline;
}
.icon-down{
    margin-left: 5px;
}
.main-bottom ul li a{
    text-decoration: none;
}
.main-bottom ul li a svg{
    fill: var(--secondary_Color);
    animation: scale-arrow ease 1s infinite;
}
.main-bottom ul li a:hover svg{
    fill: var(--primary_Color);
}
.main-bottom{
    /* margin-top: 9rem; */
    margin-top: 3.65vw;
    font-size: 2.2rem;
    text-transform: uppercase;
}
.block-content + .main-bottom {
    margin-top: 5.7vw;
}
.main-bottom a{
    margin-right: 4.5rem;
    text-decoration: none;
}
.main-bottom a:hover{
    text-decoration: none;
}
.sidebar{
    width: 100%;
    padding: 2rem 0;
}
.sidebar h3{
    font-size: 2.5rem;
    letter-spacing: -0.54px;
    color: var(--black-color);
    margin-block: 0;
    animation: slideInnew  2.0s  forwards 2.0s;
}
.sidebar ul{
    padding: 0;
    margin: 0;
}
.sidebar ul li{
    list-style: none;
    font-size: 2.2rem;
    line-height: 1.8;
    opacity: 0;
    animation: slideInnew  1s  forwards 0.4s;
}
.sidebar ul li:nth-child(2){
    animation: slideInnew  1s  forwards 0.6s;
}
.sidebar ul li:nth-child(3){
    animation: slideInnew  1s  forwards 0.8s;
}

.sidebar ul li:nth-child(4){
    animation: slideInnew  1s  forwards 1s;
}

.sidebar ul li:nth-child(5){
    animation: slideInnew  1s  forwards 1.2s;
}

.sidebar ul li:nth-child(6){
    animation: slideInnew  1s  forwards 1.4s;
}

.sidebar ul li:nth-child(7){
    animation: slideInnew  0.4s  forwards 1.6s;
}

.sidebar ul li:nth-child(8){
    animation: slideInnew  0.4s  forwards 1.8s;
}
.sidebar ul li:nth-child(9){
    animation: slideInnew  0.4s  forwards 2s;
}
.sidebar ul li:nth-child(10){
    animation: slideInnew  0.4s  forwards 2.2s;
}
.sidebar ul li:nth-child(11){
    animation: slideInnew  0.4s  forwards 2.4s;
}
.sidebar ul li:nth-child(12){
    animation: slideInnew  0.4s  forwards 2.6s;
}
.sidebar ul li:nth-child(13){
    animation: slideInnew  0.4s  forwards 2.8s;
}


.sidebar ul li a{
    color: var(--text-color);
    letter-spacing: -0.54px;
}
.sidebar ul li a:hover{
    color: var(--primary_Color);
 
}
.sidebar ul li a span {
    position: relative;
    overflow: hidden;
    transition: 0.2s;
  }
  .sidebar ul lii a span .out {
    display: inline-flex;
  }
  .sidebar ul li a span .in {
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(100%);
  }
  .sidebar ul li a:hover span .out {
    opacity: 0;
    transform: translateX(-100%);
  }
  .sidebar ul li a:hover span .in {
    opacity: 1;
    transform: translateX(0);
  }
footer{
    padding: 4.5rem 0;
    font-size: 2.2rem;
    background: #fff;
  
}
@media screen and (min-width:768px) {
    footer {
        padding-inline: 3rem;
    }
}
footer h4, footer p{
    margin: 0;
    font-weight: 400;
}
.block-address{
    font-size: 2.2rem;
    letter-spacing: -0.54px;
    color: var(--black-color);
}
footer a{
    color: var(--text-color);
}
footer a:hover{
    text-decoration: none;
    color: var(--primary_Color);
}
.cursor {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 111;
    border: 1px solid  var(--primary_Color);
    transition: all 0.2s ease-out;
    animation: moveCursor1 .5s infinite alternate;
}

.expand {
    background: transparent;
    animation: moveCursor2 .5s forwards;
    border: 1px solid #000;
}

@keyframes moveCursor1 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(.8);
    }
}

@keyframes moveCursor2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes slideInnew {
    from{
        transform: translateY(20px);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}




 
.blinkHoverEffect span {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, left 0.2s, opacity 0.2s;
  }
  .blinkHoverEffect span .out {
    display: inline-flex;
  }
  .blinkHoverEffect span .in {
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(100%);
  }
  .blinkHoverEffect:hover span .out,
  .blinkHoverEffect:focus span .out {
    opacity: 0;
    transform: translateX(-100%);
  }
  .blinkHoverEffect:hover span .in,
  .blinkHoverEffect:focus span .in {
    opacity: 1;
    transform: translateX(0);
  }





/*--Responive--*/
@media screen and (min-width:768px) {
    .sidebar {
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .main-content p,
    .block-content p {
        font-size: 4.56vw;
	    letter-spacing: -1.38px;
    }    
}
@media screen and (min-width:992px) {
    .main-content p,
    .block-content p {
        letter-spacing: -3.36px;
    }
}
@media screen and (min-width:1200px) {
    .main-section{
        padding-bottom: 300px;
    }
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}
/* @media screen and (min-width:992px) {
    .sidebar{
        padding-inline:5rem;
    }
    
} */
/* @media screen and (max-width:1024px) {
    .main-content p{
        font-size: 45px;
    }
} */
@media screen and (max-width:992px) {
    header {
        padding-top:2rem;
        padding-bottom: 2rem;
    }
    
    /* .main-content p{
        font-size: 29px;
    } */
    .main-bottom ul li{
        margin-right: 0;
    }
}
@media screen and (max-width:768px) {
    
    /* .main-content p{
        font-size: 35px;
    } */
    .main-bottom {
        margin-top: 5rem;
        margin-bottom: 2rem;
    }

    .block-address{
        margin-bottom: 3rem;
    }
    /* .block-content{
        font-size: 4rem;
    } */
    
}
@media screen and (max-width:767.5px) {
    /* header,
    .main-section,
    footer {
        padding-left: 0;
        padding-right: 0;
    }  */
    .sidebar ul{
        column-count: 2;
    }
	.main-content p, .block-content p{
		letter-spacing: -1.38px;
	}
}
/* @media screen and (max-width:575px) {
    .main-content p{
        font-size: 24px;
    }
} */