@import url("../css/yiv2npf.css");
:root {
  --text-color: #1a1a1a;
  --text-light: #858585;

  /*--accent-color: #1d1c84;*/
  --accent-color: #2a6670;

  --light-grey: #ebe9e6;
  --dark-bg:#1a1a1a;
  --color-2:#67c6ed;
  --color-3:#f4349c;

}
html {
  /*scroll-behavior: smooth;*/
}

body {
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: greyscale;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  font-family: open-sans, sans-serif;
  font-weight: 300;
  color: var(--text-color);
  background: white;
  font-size: 1.2rem;

}
section{
  /*padding: 70px 0;*/
}
h1{

}
h1, h2{
  font-family: louvette-banner, serif;
}
h1, h2, h3, h4, h5, h6{

}
h4, h5{
  font-weight: 700;
  letter-spacing: -1px;
}
h1.display-4{
  font-weight: 500;
}
a{
  color:var(--text-color);
  transition: .3s;
}
a:hover{
  color: var(--accent-color);
  text-decoration:none;
}
b, strong{
  font-weight: 700;
}
ul{
  padding-left: 25px;
}
.accent {
  color: var(--accent-color);
}
.bg-1{
  background: var(--accent-color);
}
.bg-2{
  background: var(--color-2);
}
.bg-3{
  background: var(--color-3);
  color:#fff;
}
.bg-grey{
  background: var(--light-grey);
}
.bg-dark{
  background: #1a1a1a !important;
  color: #fff;
}
.bg-light-yellow{
  background: var(--accent-color);
}

.btn{
  background: var(--accent-color);
  border-radius:0px;
  line-height: 1;
  padding: 15px 30px;
  color:white;
  border: 2px solid var(--accent-color);
}
.btn.btn-2{
  color: white;
  background: transparent;
  border: 2px solid;
}
.btn img{
  display: inline-block;
  width: 15px;
  margin: 0 0 0 15px;
}
.btn:hover{
  background: var(--color-2);
  border: 2px solid var(--color-2);
  color: white;
}
.btn.btn-2:hover{
  background: white;
  color:var(--accent-color);
  border: 2px solid white;
}
.title-bar{
  position: relative;
  padding-top: 30px;
  line-height: .9;
  font-weight: 500;
}
.title-bar:before{
  content: '';
  width: 30px;
  height: 3px;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--accent-color);
}
.navbar{
  padding: .7rem 0;
  background-color: transparent;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  transition: .3s;
  color:white;
}
.navbar.fixed-top{
  position: fixed;
  background:white;
}
.navbar-brand img{
  height: 30px;
}


.navbar li.nav-item{
  padding: 0 10px;
}
.navbar li a{
  color: var(--text-color);
  position: relative;
}

.navbar li a:hover{
  color:var(--accent-color);
}


.navbar .cart-badge{
  background: #cec7c1;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  border-radius: 20px;
  position: absolute;
  top: 0;
  right: -3px;
}
.navbar-toggler .icon-bar{
  background: var(--text-color);
  height: 3px;
  margin-top: 3px;
  border-radius: 1.5px;
  width: 80%;
  display: block;
  transition: .3s;
}
.top-bar {
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}
.middle-bar {
  opacity: 0;
}
.bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 5px 5px;
}
.collapsed .top-bar,
.collapsed .middle-bar,
.collapsed .bottom-bar{
  transform: rotate(0);
  opacity: 1;
}
.hero {
  color: var(--text-color);
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero .container,
.hero .row{
  /*min-height: 50vh;*/
  min-height: 30vh;
}

.hero .text-uppercase{
  position: relative;
  z-index: 2;
}
.hero h1{
  font-size: 5vw;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#about{
  padding: 7vw 0;
}
.bg-about{
  background: var(--accent-color);
}
.bg-about img{
  position: relative;
  right: -20%;

}
#about .rounded-circle{
  height: 80px;
  width: 80px;
  text-align: center;
  line-height: 80px;
  color: #fff;
}

#about  .rounded-circle img{
  height: 40px;
}


#services{
  overflow: hidden;
}
.scale{
  transform: scale(1.3);
}
.card{
  padding: 0;
  border: none;
  margin-bottom: 2rem;
  background: none;
}
.card-icon{
  width: 60px;
  height: auto;
  transition: .3s ease-in-out;
}

#services .item img{
  width: 60px;
}
#team{
  margin-bottom: 40vh;
}
#team img{
  min-width: 100%;
  width: auto;
  height: 150%;
  object-fit: cover;
  object-position: bottom center;
}

#contact{
  position: relative;
}

.blobs{
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.blobs *{
  position: absolute;
}
.blob-1{
  height: 60vw;
  width: 60vw;
  max-width: 900px;
  max-height: 900px;
  top:-60%;
  left:-50%;
  background: transparent;
  border:70px solid #cde6ea4d;
  animation: morph-3 30s ease-in-out infinite both alternate, float-2 4s infinite ease-in-out
}
.blob-2{
  height: 80vw;
  width: 80vw;
  max-width: 1200px;
  max-height: 1200px;
  right: -80%;
  top:20%;
  background: transparent;
  border:70px solid #cde6ea4d;
  animation: morph 3s ease-in-out infinite both alternate, float-1 40s infinite linear;
}

@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1200px) {


}
@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 991px) {
  .navbar-nav{
    text-align: right;
    padding-right: 1rem;
    padding-bottom: .5rem;
  }
  button:focus{
    outline: none;
  }
  .fixed-top .navbar-nav{
    padding-bottom: 0;
    background: transparent;
  }
  .hero h1{
    font-size: 5rem;
  }

  .blob-1 {
    height: 600px;
    width: 600px;
    top: -370px;
    left: -250px;
  }
  #services .overflow-hidden{
    height: 40vh;
  }

}

@media screen and (max-width: 767px) {
  body{
    font-size: 14px;
  }
  #about .position-absolute{
    position: relative !important;
    margin-top: 40%;
  }
}

@media screen and (max-width: 575px) {
  .hero h1,
  h1.display-3{
    font-size: 4rem;
  }
  h1.display-4{
    font-size: 2.5rem;
  }
  #team{
    margin-bottom: 10rem;
  }
  #team .bg-1{
    transform: translateY(150px) !important;
    /*margin-right: 3rem;*/
  }
  #team img{
    height: 120%;
  }
  #team h1.display-4{
    font-size: 2rem;
  }

}

@media screen and (max-width: 320px) {

}


@keyframes float-1 {
  0% {
    transform:translateY(-100%);
  }
  100% {
    transform:translateY(100%);
  }
}
@keyframes float-2 {
  0% {
    transform:translate3d(0, 0, 0);
  }
  50%{
    transform:translate3d(0, 15px, 0);
  }
  100% {
    transform:translate3d(0, 0, 0);
  }
}
@keyframes morph {
  0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;}
  100% {border-radius: 40% 60%;}
}
@keyframes morph-3 {
  0%,
  100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; }
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}


.address{
  margin: 0 0 15px 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #000;

}

.address .small{
  font-size: 16px;
	
	font-stretch: condensed;
}

.scale{
  max-height: 550px;
}




@media screen and (max-width: 450px){
  /*img{
    transition: all .5s ease;
  }*/

  .img-transition{
    transition: all .5s ease;
  }
}