html, *, body {scroll-behavior: smooth}* {margin: 0;padding: 0;box-sizing: border-box;border: none}
@media screen and (min-width: 600px){* {scrollbar-width: thin;scrollbar-color: hsl(0 0% 40% / 1) transparent}*::-webkit-scrollbar {width: 8px}*::-webkit-scrollbar-track {background: hsl(0 0% 55% / 0.6)/*transparent*/; box-shadow: inset 0 0 4px hsl(0 0% 40% / 1);}*::-webkit-scrollbar-thumb {background-color: hsla(193, 55%, 62%, 0.9);border-radius: 30px;/*border: 2px solid rgba(60,60,59, 0.6)*/}*::-webkit-scrollbar-thumb:hover {background-color: #67BBD3;border-radius: 40px;/*border: 4px solid rgba(60,60,59, 1)*/}}
@media screen and (max-width: 600px){
	body::-webkit-scrollbar {display: none}
	body {-ms-overflow-style: none}
	html {scrollbar-width: none;}
/*	* {scrollbar-width: none;}*/
	*::-webkit-scrollbar {display: none}
	* {-ms-overflow-style: none}
}
	.scroll_html body::-webkit-scrollbar {display: none;transition: all 2s ease;}
	.scroll_html body{-ms-overflow-style: none;transition: all 2s ease;}
	.scroll_html{scrollbar-width: none;transition: all 2s ease;}



    :root {
        /* font-family: Inter, sans-serif; */
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
      }
      /* @supports (font-variation-settings: normal) {
        :root { font-family: InterVariable, sans-serif; }
      } */
/*
@media screen and (min-width: 600px){* {scrollbar-width: thin;scrollbar-color: rgba(229, 71, 25, 0.7) transparent}*::-webkit-scrollbar {width: 8px}*::-webkit-scrollbar-track {background: transparent}*::-webkit-scrollbar-thumb {background-color: rgba(229, 71, 25, 0.7);border-radius: 30px;border: 2px solid rgba(229, 71, 25, 0.6)}*::-webkit-scrollbar-thumb:hover {background-color: rgba(229, 71, 25, 1);border-radius: 30px;border: 4px solid rgba(229, 71, 25, 1)}}
@media screen and (max-width: 600px){body::-webkit-scrollbar {display: none}* {scrollbar-width: none;}body {-ms-overflow-style: none}*::-webkit-scrollbar {display: none}* {-ms-overflow-style: none}}
*/
.slick-slide {
    outline: none
}


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

.contact-info-item a {
    color: rgba(60, 60, 59, 1);
    white-space: nowrap;
}
a {
    outline-width: 0;
}
a {
    background-color: transparent;
    text-decoration: none;
    color: #fff;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }


@media screen and (min-width: 600px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: hsl(0 0% 40% / 1) transparent;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}
html, *, body {
    scroll-behavior: smooth;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    background-color: rgba(255, 255, 255, 1);
    overflow-x: hidden;
    overflow-y: auto;
    font-size: max(2.25vh, 1em);
    line-height: 1.5em;
    text-align: left;
    /* font-family: 'Nunito', sans-serif; */
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    font-style: normal;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.06em;
    min-height: 100vh;
}


a {
    background-color: transparent;
    text-decoration: none;
    /* color: #fff; */
    outline-width: 0;

}

#comming-soon, #contact-form, #contact-info{
    padding: 5vh 10vw;

    }
    #comming-soon, #contact-form, #contact-info{
        
        width: 100%;
        }
    #contact-info{
        width: 100vw;
        }

@media screen and (min-width: 768px) {
    #comming-soon, #contact-form, #contact-info{
        padding: 3vh 3vw 0;
        }
    .contact-cont{
        display:grid;
        /* grid-template-columns: repeat(2,auto); */
        /* grid-template-rows: repeat(2,auto); */
        grid-template-rows: repeat(2,auto);
        grid-template-columns:  auto max(40vw,480px);
        justify-items: center;
    align-items: center;
    justify-content: space-evenly;
    min-height: 100vh;
        }
        #comming-soon{
            grid-column: 1;
            grid-row: 1 ;
        }
        #contact-form{
            grid-column: 2;
            grid-row: 1 ;
        
        }
        #contact-info{
            grid-column: 1 / span 2;
            grid-row: 2;
        
        }
}




@media screen and (max-width: 768px) and (min-width: 480px) {
    .section-data, .attrib-data {
        padding: 0vh 0vw;
    }
}

.section-data {
    text-align: left;
}
@media screen and (max-width: 600px) {
    * {
        -ms-overflow-style: none;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}
html, *, body {
    scroll-behavior: smooth;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}




/* @media screen and (max-width: 600px) {
    .form-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(8, 1fr);
        justify-items: start;
    }
} */
.form-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, max(3em, 8vh) ) max(3em, 20vh) ;
    width: 100%;
    /* padding: 0vh 10% 2vw; */
    justify-items: center;
    align-items: center;
    justify-content: space-evenly;
    color: rgba(60, 60, 59, 1);
    grid-auto-flow: column;
}

.form-item {
    padding: 0.8vh 3vw;
    height: 100%;
    width: 100%;
}

.form-item input {
    height: 100%;
    width: 100%;
    border: 1.21px solid rgba(60, 60, 59, 0.4);
    background-color: transparent;
    padding: 3% 6%;
    /* font-family: 'Nunito', sans-serif; */
    font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    font-size: 1em;
    font-style: normal;
    color: rgba(60, 60, 59, 1);
}

.form-item textarea {
    height: 100%;
    width: 100%;
    border: 1.21px solid rgba(60, 60, 59, 0.4);
    background-color: transparent;
    /* font-family: 'Nunito', sans-serif; */
    font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    font-size: 1em;
    font-style: normal;
    color: rgba(60, 60, 59, 1);
    padding: 3% 6%;
}



/* .form-grid #form_msg {
    grid-row: 1 / span 4;
} */



/* @media screen and (max-width: 1920px) {


    .form-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(8, 1fr);
        justify-items: start;
    }

    .form-grid #form_msg {
        grid-row: 5 / span 4;
    }
} */

#contact_form button {
    padding: 1vh 2vw;
    margin: 1vh 2vw;
    font-size: 1em;
    font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
    font-weight: 700;
    background-color: #67BBD3;
    color: #fff;
}


.contact-info-item a {
    color: rgba(60, 60, 59, 1);
    white-space: nowrap;
}

@media screen and (max-width: 1000px) and (min-width: 450px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, auto);
        justify-items: start;
    }
}


.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: 100%;
    background-color: #fff;
    justify-items: center;
    align-items: center;
    justify-content:space-between;
    /* padding: 10vh 0vw; */
    color: rgba(60, 60, 59, 1);
    font-size: 0.8em;
}

@media screen and (max-width: 450px) {
    .contact-info-grid {
        grid-template-columns: repeat(1, auto);
        justify-items: start;
    }

    .contact-info-grid #contact-address {
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .contact-info-item:not(:first-child) {
        margin-top: 8vh;
    }
}



@media screen and (max-width: 1000px) and (min-width: 450px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, auto);
        justify-items: start;
    }

    .contact-info-grid #contact-address {
        grid-row-start: 1;
        grid-row-end: 3;
    }
}

.contact-info-grid .contact-info-item {
    position: relative;
    margin-left: 10vw;
}

.contact-info-grid .contact-info-item div {
    position: absolute;
    left: -8vw;
    width: max(5vw,5vh);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.contact-info-grid .contact-info-item div img {
    width: max(4vw,4vh);
}

.contact-info-grid .contact-info-item a{
    /* margin: 1vh 0vw; */
    /* display: block; */
    color: rgba(60, 60, 59, 1);
    white-space: nowrap;

}




@media screen and (max-width: 600px) {
    * {
        -ms-overflow-style: none;
    }

    
}


.main-title{
    text-align: center;
    margin-top: 0vh;
    margin-bottom: 2vh; 
    text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

.main-title h1{
    font-size: 2.5em !important;
    text-transform: uppercase;
    font-weight: 800;
    color: #555;
}

.main-title h2{
    font-size: 2em !important;
    font-weight: 300;
    text-transform: uppercase;
}


#companim{
    width: min(100%, 65vh);
}

.svg-img{
   display: block;
   margin: auto;
}

svg{
    display: block;
   margin: auto;
}

#clock{
    animation: clockHand 5s infinite linear;
    
    
    transform-box: fill-box;
    transform-origin: bottom;
}

#leftTree, #righTree{
    animation: tree 2s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#man{
    animation: manBody 1s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#pc-circle{
    fill: #6ace66;
    stroke-width: 4;
    animation: change-light 5s linear infinite alternate;
}
/* #pc-logo{
    fill: #6ace66;
    stroke-width: 4;
    animation: change-light 4s linear infinite alternate;
} */

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #f5f5f5;
    font-size: 1.3vw;
}

@keyframes clockHand{
    from{
        transform: rotateZ(0deg);
    }
    from{
        transform: rotateZ(-360deg);
    }
}

@keyframes manBody{
    from{
        transform: rotateX(0deg);
    }
    to{
        transform: rotateX(10deg);
    }
}

@keyframes tree{
    from{
        transform: rotateZ(10deg);
    }
    to{
        transform: rotateZ(-20deg);
    }
}

@keyframes change-light {
    0% {
        stroke: hwb(193 40% 17%);
      }
      25% {
        stroke: hwb(193 12% 8%);
      }
      75% {
        stroke: hwb(193 18% 49%);
      }
      100% {
        stroke: hwb(193 53% 25%);
      }
  }

  /*@keyframes change-fill-light {*/
  /*  0% {*/
  /*      fill: hwb(193 40% 17%);*/
  /*    }*/
  /*    25% {*/
  /*      fill: hwb(193 12% 8%);*/
  /*    }*/
  /*    75% {*/
  /*      fill: hwb(193 18% 49%);*/
  /*    }*/
  /*    100% {*/
  /*      fill: hwb(193 53% 25%);*/
  /*    }*/
  /*}*/

  /* Media Queries */

  @media (min-width: 640px){
    .main-title h1{
        font-size: 5vw;
        text-transform: uppercase;
        font-weight: 700;
        color: #555;
    }
    
    .main-title h2{
        font-size: 3vw;
        font-weight: 300;
        text-transform: uppercase;
    }
    
     
    }
     
    @media (min-width: 768px){
        .main-title h1{
            font-size: 6vw;
            text-transform: uppercase;
            font-weight: 800;
            color: #555;
        }
        
        .main-title h2{
            font-size: 4vw;
            font-weight: 300;
            text-transform: uppercase;
        }
    
     
    }
     
    @media (min-width: 1024px){
     
        .main-title h1{
            font-size: 7vw;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }
        
        .main-title h2{
            font-size: 5vw;
            font-weight: 300;
            text-transform: uppercase;
        }
     
    }
     
    @media (min-width: 1200px){
     
        .main-title h1{
            font-size: 8vw;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }
        
        .main-title h2{
            font-size: 5vw;
            font-weight: 300;
            text-transform: uppercase;
        }

        .main-title{
            text-align: center;
            /* margin-top: 4vw;
            margin-bottom: 4vw; */
        }
        
     
    }