@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

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

:root{

  --color1: #d7a449;
  --color2: #0e0707;
  --color3: #f1f1f1;
  --color4: #ACA22E;
  --color8: #E07250;
  --color10: #234848;
  --color11: #c1b7b7;

    --color-text:  #282828;
    --dark-clr: #111;

    --primary-color: rgba(13, 110, 139, 0.75);

    --color-limed-spruce:  #3f4f5b;
    --color-spicy-pink: #7c676d;
    --color-salt-box: #6d6168;
    --color-granny-smith: #7d9e9d;
    --color-santa-fe: #ae6b5a;
    --color-dark-bunker: #101115;
    --color-bright-gray: #383c4a;
    --transition-time: 0.5s;
}

body{
    font-family: 'Albert Sans', sans-serif !important;
    font-size: 17px;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    direction: ltr !important;
}

img{
    max-width: 100%;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

li, p{
  padding: 9px 0;
}

a {
    text-decoration: none;
}

.container{
  max-width: 1280px;
  margin: 0 auto;
}

nav{
  overflow: hidden;
  padding: 20px;
  background: var(--color-bright-gray);
}


nav {
  top: 0;
  width: 100%;
  padding: 13px 0;
  transition: background-color 0.5s, padding 1s;
  z-index: 9;
  position: sticky;
}

nav.sticky {
  padding: 13px 0;
}

.nav-wrapper{
  width: 80%;
  margin: 0 auto;
}

#menu a{
  font-size: clamp(18px,2.5vw,14px);
  text-decoration: none;
  color: #fff;
  padding: 10px 13px;
  transition: .5s ease-in-out;
}

#menu a:hover{
  background-color: #333;
  border-bottom: 3px solid rgb(87, 87, 87);
  transition: 0.2s;
}


.nav-wrapper{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav-wrapper ul{
  display: flex;
  flex-wrap: wrap;
}

.nav-wrapper-logo{
  display: flex;
}

.nav-wrapper-logo a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}


.nav-wrapper-logo a img{
  width: 45px;
  height: 45px;
}

.nav-wrapper-logo a h2{
  font-size: clamp(16px,2.5vw,18px);
  font-weight: 700;
  color: var(--color3);
}


.body__bg_gradient {
  background: var(--color-limed-spruce);
  background: linear-gradient(0deg, var(--color-salt-box) 0%, var(--color-limed-spruce) 100%);
}

.section__codepen {
  padding: 84px;
}


.hero {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.hero__image{
  flex: 1;
}

.hero__title{
  flex: 2;
}



.hero__title h1 {
  text-transform: uppercase;
  font-size: clamp(25px,5vw,35px);
  color: var(--color-dark-bunker);
  font-weight:700;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
}

.title__bg_grandient {
  color: var(--color-granny-smith);
  background: -webkit-linear-gradient(0deg, var(--color-granny-smith) 0%, var(--color-santa-fe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.span__before_dot::before {
  display: inline-block;
  content: ' ';
  width: 4ch;
  height: 70px;
  border-radius: 30px;
  margin-right: 15px;
  background: transparent;
  background-image: radial-gradient(white 25%, transparent 0), radial-gradient(white 25%, transparent 0);
  background-size: 7px 7px;
  background-position: 5px 11px;
  opacity: 0.3;
}

.span__after_dot{
  display: flex;
  justify-content: flex-end;
}

.span__after_dot::after {
  display: inline-block;
  content: ' ';
  width: 4ch;
  height: 70px;
  border-radius: 30px;
  margin-right: 15px;
  background: transparent;
  background-image: radial-gradient(white 25%, transparent 0), radial-gradient(white 25%, transparent 0);
  background-size: 7px 7px;
  background-position: 5px 11px;
  opacity: 0.3;
}


.hero__image_img {
  height: 467px;
  border-top-right-radius: 150px;
  overflow: hidden;
}
.hero__image_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(30%) sepia(20%);
}

.img__after_dot {
  width: 100%;
  height: 50px;
  background: transparent;
  background-image: radial-gradient(white 25%, transparent 0), radial-gradient(white 25%, transparent 0);
  background-size: 7px 7px;
  background-position: 5px 9px;
  opacity: 0.2;
}

.patNas{
  padding: 68px;
  background: var(--color-dark-bunker);
}

.patNas-main{
  width: 100%;
  display: flex;
  flex-direction: row;
}

.patNas-textBlock,.patNas-block{
  flex: 1;
  margin: 15px;
} 

.patNas-block{
  display: flex;
  align-items: center;
  justify-content: center;
}

.pic{
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
  width:319px;
  height:319px;
  position: relative;
  overflow: hidden;
  margin-top:100px;
  margin-left:135px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(360deg);
}

.pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}


.box1{
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
  width:122px;
  height:122px;
  position: relative;
  overflow: hidden;
  margin-top:-124px;
  margin-left:16px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(360deg);
}
.box1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.box2{
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
  position: relative;
  overflow: hidden;
  width:190px;
  height:122px;
  margin-top:14px;
  margin-left:78px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(360deg);
}
.box2 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}


.pic img:hover , .box1 img:hover , .box2 img:hover {
  filter: brightness(0.5);
  -webkit-filter: brightness(0.5);
}

.patNas-title{
  padding-bottom: 37px;
}

.patNas-textBlock{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.patNas-title div{
  font-size: clamp(19px,5vw,35px);
  font-weight: 700;
  color: var(--color-santa-fe);
}

.patNas-title div::before {
  content: "// ";
}

.patNas-text{
  font-size: clamp(18px,2.5vw,15px);
  font-weight: 600;
  color: var(--color3);
}

.img__after_dot_oNas {
  width: 100%;
  height: 50px;
  background: transparent;
  background-image: radial-gradient(var(--color-santa-fe) 25%, transparent 0), radial-gradient(var(--color-santa-fe) 25%, transparent 0);
  background-size: 7px 7px;
  background-position: 5px 9px;
  opacity: 0.5;
}


.link a {
  text-transform: uppercase;
  font-size: 17px;
  color: var(--color3);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
}

.link__arrow {
  background-color: var(--color-santa-fe);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  padding-left: 5px;
  font-weight: 700;
  width: 45px;
  height: 45px;
  border-radius: 100%;
  position: relative;
  transform: translate(0);
  transition: transform 0.3s ease;
}

.link__title {
  transition: all 0.3s ease;
}
.link:hover .link__arrow {
  transform: translate(10px);
}
.link:hover .link__title {
  letter-spacing: 4px;
}

.link__arrow::before, .link__arrow::after  {
  display: block;
  content: ' ';
  width: 45px;
  height: 45px;
  border-radius: 100%;
  border-right: 1px solid var(--color3);
  position: absolute;
  left: 4px;
  opacity: 0.2;
  transition: all 0.3s ease;
}

.link__arrow::after {
  left: 10px;
}

.link:hover .link__arrow::after, .link:hover .link__arrow::before {
  opacity: 0;
  left: 0px !important;
}

.patTranPak-wrapper{
	width: 100%;
  overflow: hidden;
  background: var(--color-santa-fe);
  padding: 20px;
}
.patTranPak {
	position: relative;
	height: 45px;
	display: flex;
	width: 100%;
}

.patTranPak img {
  margin: 0px 20px;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.patTranPak {
  animation: bannermove 15s linear infinite alternate-reverse;
}

@keyframes bannermove {
  from {
    left: 0px;
  }
  to {
    left: -2700px;
  }
}

.central-content{
  background-color: var(--color-dark-bunker);
  padding: 68px;
}


.central-content-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 37px;
}

.central-content-title h5{
  font-size: clamp(19px,5vw,35px);
  font-weight: 700;
  color: var(--color-santa-fe);
}

.central-content-title h5::before {
  content: "// ";
}

.central-content-main{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 33px;
}


.central-content-image{
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
}

.central-content-image img{
  width: 100%;
  object-fit: contain;
  transition: .5s;
  height: 467px;
}

.central-content-image img:hover {
  filter: brightness(0.5);
  -webkit-filter: brightness(0.5);
}

.central-content-block-content div{
  font-size: clamp(15px,2.5vw,18px) !important;
  color: var(--color3);
}

.central-content-block-content div ul{
  list-style: disc !important;
  margin: 13px;
  text-align: left !important;
}

.central-content .central-content-block-price div{
  color: var(--color3); 
  font-size: clamp(20px,5vw,25px);
  font-weight: 700;
  width: max-content;
  padding: 13px;
  animation: pulseColor 2s infinite;
}

@keyframes pulseColor {
  0% {
    color: var(--color3); 
  }
  50% {
    color: var(--color1); 
  }
  100% {
    color: var(--color3); 
  }
}

.solution {
  background-image: url(backgrounds/depictions_header_68248dc29a2f17.34732495.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
  padding: 68px;
}

.solution:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(21 19 19 / 88%);
}

.solution-title{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 37px;
}

.solution-title h5{
  font-size: clamp(19px,5vw,35px);
  font-weight: 700;
  color: var(--color-santa-fe);
}

.solution-title h5::before {
  content: "// ";
}

.solution-main{
  display: flex;
  flex-wrap: wrap;
}

.solution-block{
  width: 25%;
  display: flex;
}

.solution-inner {
  backdrop-filter: brightness(0.5);
  -webkit-backdrop-filter: brightness(0.5);
  margin: 20px 13px;
  text-align: center;
  border: 1px solid #ddd;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; 
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
  .solution-inner .solution-icon-box {
    position: relative;
    top: 50px;
    display: inline-block;
    margin-bottom: 37px;
    padding: 13px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; 
  }
  .solution-inner .solution-heading {
    position: relative;
    top: 26px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    color: var(--color3);
    font-weight: 600;
    font-size: clamp(16px,2.5vw,18px);
    padding: 0 13px;
  }

  .solution-inner .solution-heading:hover {
    color: var(--color-santa-fe);
  }

  .solution-inner .solution-description {
    width: 80%;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(0); 
    font-size: clamp(14px,2.5vw,15px);
    font-weight: 600;
    color: var(--color11);
  }
  .solution-inner .solution-icon-box > svg {
    fill: var(--color-santa-fe);
    width: 45px; 
    height: 45px;
    animation: pulseSolutionColor 2s infinite;
  }

  @keyframes pulseSolutionColor {
    0% {
      fill: var(--color-santa-fe);
    }
    50% {
      fill: var(--color3);
    }
    100% {
      fill: var(--color-santa-fe);
    }
  }

  .solution-inner:hover {
    border-color: var(--color-santa-fe); 
  }
  .solution-inner:hover .solution-icon-box {
    top: -30px; 
  }
  .solution-inner:hover .solution-heading {
    top: -30px; 
  }
  .solution-inner:hover .solution-description {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); 
  }


  .blog-post {
    background-image: url(backgrounds/depictions_header_68248dc29a2f17.34732495.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
    padding: 68px;
  }
  
  .blog-post:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(21 19 19 / 88%);
  }
  
  .blog-post-title{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 37px;
  }
  
  .blog-post-title h5{
    font-size: clamp(19px,5vw,35px);
    font-weight: 700;
    color: var(--color-santa-fe);
  }
  
  .blog-post-title h5::before {
    content: "// ";
  }
  
  .blog-post-main{
    display: flex;
    flex-wrap: wrap;
  }

  .blog-post-main {
    display: flex;
    justify-content: center;
  }

  .blog-post-block{
    width: 25%;
    display: flex;
  }
  
  .blog-post-card {
    height: auto;
    margin: 10px;
    padding: 15px;
    display: flex;
    box-shadow: 0 0 5em -1em black;
    transition: all, var(--transition-time);
    position: relative;
    overflow: hidden;
    border: 2px solid #ccc;
    text-decoration: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .blog-post-card img{
    width: 100%;
    height: 232px;
    object-fit: contain;
    float: left;
    padding: 13px;
    filter: drop-shadow(2px 4px 6px var(--color3));
    -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
    transition: .5s;
  }

  .blog-post-card:hover img{
    filter: brightness(0.5);
    -webkit-filter: brightness(0.5);
}

  .blog-post-card:hover {
    transform: rotate(0);
  }
  
  .blog-post-card h1 {
    margin: 0;
    font-weight: 600;
    font-size: clamp(16px,2.5vw,18px);
    color: var(--color3);
  }
  
  .blog-post-card p {
    font-size: clamp(14px,2.5vw,15px);
    font-weight: 300;
    color: var(--color11);
  }
  
  .blog-post-card .blog-post-tags {
    display: flex;
  }
  
  .blog-post-card .blog-post-tags .tag {
    color: var(--color-santa-fe);
    font-size: 12px;
    background: var(--color3);
    border-radius: 0px;
    padding: 10px 13px;
    margin-right: 13px;
    line-height: 13px;
    transition: all, var(--transition-time);
  }
  
  .blog-post-card:hover .blog-post-tags .tag {
    background: var(--color-santa-fe);
    color: white;
  }
  
  .blog-post-card .blog-post-date {
    position: absolute;
    right: 0;
    font-size: 12px;
    padding: 13px;
    line-height: 13px;
    opacity: .8;
    color: var(--color-santa-fe);
  }
  
  .blog-post-card:before, .blog-post-card:after {
    content: '';
    transform: scale(0);
    transform-origin: top left;
    border-radius: 50%;
    position: absolute;
    left: -50%;
    top: -50%;
    z-index: -5;
    transition: all, var(--transition-time);
    transition-timing-function: ease-in-out;
  }
  
  .blog-post-card:before {
    background: #ddd;
    width: 250%;
    height: 250%;
  }
  
  .blog-post-card:after {
    background: white;
    width: 200%;
    height: 200%;
  }
  
  .blog-post-card:hover {
    color: var(--color-santa-fe);
  }

  .blog-post-card:hover h1 {
    color: var(--color-santa-fe);
  }
  
  .blog-post-card:hover:before, .blog-post-card:hover:after {
    transform: scale(1);
  }
  
  .client-voice{
    background-color: var(--color-dark-bunker);
    padding: 68px;
  }

  .client-voice{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 37px;
  }
  
  .client-voice h5{
    font-size: clamp(19px,5vw,35px);
    font-weight: 700;
    color: var(--color-santa-fe);
  }
  
  .client-voice h5::before {
    content: "// ";
  }

  .client-voice-main{
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  .client-voice-inner{
    width: 65%;
    filter: drop-shadow(2px 4px 6px var(--color-santa-fe));
    -webkit-filter: drop-shadow(2px 4px 6px var(--color-santa-fe));
    background-color: var(--color-dark-bunker);
    padding: 68px;
  }

  .client-voice-video{
    width: 35%;
    display: flex;
  }

  .client-voice-inner, .client-voice-video{
    margin: 13px;
  }

  .client-voice-video video{
    width: 100%;
    object-fit: cover;
    height: 467px;
  }
 
  .client-voice-box {
    padding: 37px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .client-voice-box img {
    width: 62px;
    height: 62px;
    border-radius: 100%;
    margin: 0 15px;
    filter: grayscale(100%);
    transition: .3s;
    cursor: pointer;
    border: 2px solid var(--color-santa-fe);
  }
  
  .client-voice-box img:hover, .client-voice-box img.active {
    filter: none;
  }
  
  .client-voice-contents {
    margin: auto;
  }
  
  .client-voice-contents-inner {
    display: none;
  }
  
  .client-voice-contents-inner.active {
    display: block;
  }
  
  .client-voice-contents-inner p {
    color: var(--color11);
    font-size: clamp(15px,2.5vw,17px);
  }
  
  .client-voice-contents-inner .description {
    font-size: clamp(19px,2.5vw,20px);
    color: var(--color-santa-fe);
    font-style: italic;
  }
  

  .megoTar{
    background-color: var(--color-dark-bunker);
    padding: 68px;
  }

  .megoTar-title{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 37px;
  }
  
  .megoTar-title h5{
    font-size: clamp(19px,5vw,35px);
    font-weight:700;
    color: var(--color-santa-fe);
  }
  
  .megoTar-title h5::before {
    content: "// ";
  }

  .megoTar-main{
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .megoTar-block{
    flex: 1;
    display: flex;
  }

  .megoTar-inner {
      width: 100%;
      padding: 15px;
      position:relative;
      border-radius: 0px;
      background-image: linear-gradient(to top, var(--color-bright-gray) 0%, var(--color-bright-gray) 50%);
      overflow: hidden;
      backdrop-filter: blur(10px);
      background-color: rgb(255 255 255 / 70%);
    }

  .megoTar-content {
    position: relative;
    height:auto;
    z-index: 1;
    text-align: center;
}


.megoTar-content h3 {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: clamp(18px,5vw,25px);
  font-weight: 600;
  height: 40px;
  text-overflow: ellipsis;
  text-align: center;
  color: var(--color-santa-fe);
}


.megoTar-blog-post-tags span {
    display: inline-block;
    font-size: clamp(14px,2.5vw,15px);
    font-weight: 300;
    color: var(--color2);
    font-style: italic;
}

.megoTar-price {
  margin-bottom: 20px;
  font-size: clamp(19px,5vw,24px);
  font-weight: 700;
  text-align:center;
  animation: pulseColorPrice 2s infinite;
}

@keyframes pulseColorPrice {
  0% {
    color: var(--color-santa-fe); 
  }
  50% {
    color: var(--color-dark-bunker); 
  }
  100% {
    color: var(--color-santa-fe); 
  }
}

.wave {
  width: 200%;
  height: 200%;
  position: absolute;
  margin-left: -50%;
  margin-top: -130%;
  border-radius: 35%;
  background: rgba(255, 255, 255, 1);
  animation: wave 30s infinite linear;
  z-index:1;
}

.wave2 {
  width: 60%;
  height: 60%;
  position: absolute;
  margin-left: -500px;
  margin-top: -500px;
  border-radius: 35%;
  background: rgba(255, 255, 255, .75);
  animation: wave 29s infinite linear;
  z-index:1;
}
@keyframes wave {
  from { transform: rotate(0deg);}
  from { transform: rotate(360deg);}
}


@media only screen and (max-width: 991px) {
    .wave {
      width: 1000px;
      height: 1000px;
      position: absolute;
      margin-left: -50%;
      margin-top: -150%;
      border-radius: 35%;
      background: rgba(255, 255, 255, 1);
      animation: wave 30s infinite linear;
      z-index:1;
  }
}


@-webkit-keyframes btnWiggle {
    0% {-webkit-transform: rotate(0deg);}
    2% {-webkit-transform: rotate(-3deg);}
    3.5% {-webkit-transform: rotate(3deg);}
    5% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@-o-keyframes btnWiggle {
    0% {-webkit-transform: rotate(0deg);}
    2% {-webkit-transform: rotate(-3deg);}
    3.5% {-webkit-transform: rotate(3deg);}
    5% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@keyframes btnWiggle {
    0% {-webkit-transform: rotate(0deg);}
    2% {-webkit-transform: rotate(-3deg);}
    3.5% {-webkit-transform: rotate(3deg);}
    5% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}
  
.data-form {
  background-image: url(backgrounds/icons_header_68248dc29a30d9.07463790.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
  padding: 68px;
}

.data-form:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(21 19 19 / 88%);
}

.data-form-title{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 37px;
}

.data-form-title h5{
  font-size: clamp(19px,5vw,35px);
  font-weight: 700;
  color: var(--color-santa-fe);
}

.data-form-title h5::before {
  content: "// ";
}

.data-form-block{
  position: relative;
}

.data-form-block label{
  color: #fff;
}

.data-form-block form{
  width: 100%;
}

.data-form-block .field{
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 26px;
}

.data-form-block .input-field--area_control{
  border-radius: 0px;
  color: var(--color3);
  padding: 13px 22px;
  transition: all 0.3s ease 0s;
  background-color: var(--color-dark-bunker);
  outline: none;
  border-bottom: 2px solid var(--color-santa-fe);
}

.data-form-block .input-field--area_control::placeholder{
  color: var(--color3);
}

.data-form-block .textarea-field--area_control::placeholder{
  color: var(--color3);
}

.data-form-block .textarea-field--area_control{
  border-radius: 0px;
  box-shadow: none;
  color: var(--color3);
  padding: 13px 22px;
  height: 50px;
  background-color: var(--color-dark-bunker);
  outline: none;
  border-bottom: 2px solid var(--color-santa-fe);
}

.data-form-block .data-form-check{
  align-items: center;
  padding: 15px 0;
  display: flex;
  gap: 10px;
}

.data-form-block .data-form-check a{
  text-decoration: underline;
  color: #fff;
}

.data-form-btn{
  padding-top: 15px;
}

.bottombar{
  padding: 20px;
  background: var(--color-bright-gray);
}

.bottombar-adrs, .bottombar-poli, .bottombar-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottombar-adrs svg{
  fill: var(--color-santa-fe);
  width: 26px;
  height: 26px;
}

.bottombar-adrs span, .bottombar-adrs-twice a {
  font-size: clamp(15px,2.5vw,17px);
  font-weight: 600;
  color: var(--color3);
  transition: .5s;
}

.bottombar-adrs-inner{
  display: flex;
  align-items: center;
  gap: 20px;
}

.bottombar-adrs-inner-sec{
  display: flex;
  align-items: center;
  gap: 20px;
  padding:  13px 0;
}

.bottombar-adrs-twice a:hover {
  color: var(--color-santa-fe);
}

.bottombar-adrs-twice{
  display: flex;
  align-items: center;
  gap: 13px;
}
.bottombar-adrs-twice a {
  word-break: break-all;
}

.bottombar-poli-inner ul{
  display: flex;
  gap: 20px;
}

.bottombar-poli-inner ul li a{
  font-size: clamp(15px,2.5vw,17px);
  font-weight: 600;
  color: var(--color3);
  transition: .5s;
}

.bottombar-poli-inner ul li a:hover {
  color: var(--color-santa-fe);
}

.bottombar-title div{
  font-size: clamp(15px,2.5vw,17px);
  font-weight: 600;
  color: var(--color3);
}

.patNas-dop-page{
  padding: 68px;
  background: var(--color-dark-bunker);
}

.patNas-dop-page-title{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 37px;
}

.patNas-dop-page-title h5{
  font-size: clamp(19px,5vw,35px);
  font-weight:700;
  color: var(--color-santa-fe);
}

.patNas-dop-page-title h5::before {
  content: "// ";
}

.patNas-dop-page-block-txt {
  font-size: clamp(18px,2.5vw,15px);
  font-weight: 600;
  color: var(--color3);
}


.feature-page{
  padding: 68px;
  background: var(--color-dark-bunker);
}

.feature-page-title{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 37px;
}

.feature-page-title h5{
  font-size: clamp(19px,5vw,35px);
  font-weight: 700;
  color: var(--color-santa-fe);
}

.feature-page-title h5::before {
  content: "// ";
}

.feature-page-main{
  display: flex;
  gap: 9px;
  flex-direction: row-reverse;
}

.feature-page-image, .feature-page-content{
  flex: 1;
}

.feature-page h2{
  font-size: 17px;
}

.feature-page-content{
  padding: 13px;
  color: var(--color3);
  flex: 1;
  font-size: clamp(15px,2.5vw,18px) !important;
}

.feature-page ul li, .feature-page ol li{
  padding:9px 0;
}

.feature-page ul{
  list-style: disc !important;
  text-align: left !important;
}

.feature-page-image{
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
}

.feature-page-image img{
  width: 100%;
  height: 319px;
  object-fit: contain;
}

.feature-page-image img:hover {
  filter: brightness(0.5);
  -webkit-filter: brightness(0.5);
}

.feature-page-rla {
  background-image: url(backgrounds/icons_header_68248dc29a30d9.07463790.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
  padding: 68px;
}

.feature-page-rla:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(21 19 19 / 88%);
}

.feature-page-rla-main {
  display: flex;
  justify-content: center;
}

.feature-page-rla-block{
  width: 33.3%;
  display: flex;
}

.feature-page-rla-card {
  height: auto;
  margin: 10px;
  padding: 15px;
  display: flex;
  box-shadow: 0 0 5em -1em black;
  transition: all, var(--transition-time);
  position: relative;
  overflow: hidden;
  border: 2px solid #ccc;
  text-decoration: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.feature-page-rla-card img{
  width: 100%;
  height: 232px;
  object-fit: contain;
  float: left;
  padding: 13px;
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
  transition: .5s;
}

.feature-page-rla-card:hover img{
  filter: brightness(0.5);
  -webkit-filter: brightness(0.5);
}

.feature-page-rla-card:hover {
  transform: rotate(0);
}

.feature-page-rla-card h1 {
  padding-top: 15px;
  margin: 0;
  font-weight: 700;
  font-size: clamp(16px,2.5vw,18px);
  color: var(--color3);
}

.feature-page-rla-card p {
  font-size: clamp(14px,2.5vw,15px);
  font-weight: 400;
  color: var(--color11);
}

.feature-page-rla-card:before, .feature-page-rla-card:after {
  content: '';
  transform: scale(0);
  transform-origin: top left;
  border-radius: 50%;
  position: absolute;
  left: -50%;
  top: -50%;
  z-index: -5;
  transition: all, var(--transition-time);
  transition-timing-function: ease-in-out;
}

.feature-page-rla-card:before {
  background: #ddd;
  width: 250%;
  height: 250%;
}

.feature-page-rla-card:after {
  background: white;
  width: 200%;
  height: 200%;
}

.feature-page-rla-card:hover {
  color: var(--color-santa-fe);
}

.feature-page-rla-card:hover h1 {
  color: var(--color-santa-fe);
}

.feature-page-rla-card:hover:before, .feature-page-rla-card:hover:after {
  transform: scale(1);
}

.tagCont{
  padding: 68px;
  background: var(--color-dark-bunker);
}

.tagCont-title{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 37px;
}

.tagCont h5{
  font-size: clamp(19px,5vw,35px);
  font-weight: 800;
  color: var(--color-santa-fe);
}

.tagCont h5::before {
  content: "// ";
}

.tagCont-main{
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}


.tagCont-block, .tagCont-image{
  flex: 1;
  margin: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.tagCont-image img{
  width: 100%;
  object-fit: contain;
  transition: .5s;
  height: 467px;
  filter: drop-shadow(2px 4px 6px var(--color3));
  -webkit-filter: drop-shadow(2px 4px 6px var(--color3));
}

.tagCont-adrss{
  width: 100%;
  padding: 20px 13px;
  margin-top: 20px;
  background-color: rgb(63 79 91 / 20%);
  border: 2px solid var(--color3);
  display: flex;
}

.tagCont-block-box-form label{
  color: var(--color3);
}

.tagCont-block-box-form {
  width: 100%;
}

.tagCont-block-box-form .field{
  text-align: left;
  display: flex;
  flex-direction: column;
  gap:  15px;
  padding-top: 26px;
}

.tagCont-block-box-form input{
  border-radius: 0px;
  color: var(--color3);
  padding: 13px 22px;
  transition: all 0.3s ease 0s;
  background-color: var(--color-dark-bunker);
  outline: none;
  border-bottom: 2px solid var(--color-santa-fe);
}

.tagCont-block-box-form input::placeholder{
  color: var(--color3);
}

.tagCont-block-box-form textarea::placeholder{
  color: var(--color3);
}

.tagCont-block-box-form textarea{
  border-radius: 0px;
  box-shadow: none;
  color: var(--color3);
  padding: 13px 22px;
  height: 50px;
  background-color: var(--color-dark-bunker);
  outline: none;
  border-bottom: 2px solid var(--color-santa-fe);
}

.tagCont-block-box-form .tagCont-blockm-check{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

.tagCont-block-box-form .tagCont-blockm-check a{
  text-decoration: underline;
  color: var(--color-santa-fe);
}

.tagCont-knopka{
  padding-top: 20px;
}

.tagCont-adrss-inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 1;
}

.tagCont-adrss-cont{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tagCont-adrss-cont div, .tagCont-adrss-cont a{
  word-break: break-all;
  font-size: clamp(15px,2.5vw,18px);
  font-weight: 700;
  color: var(--color3);
  transition: .5s;
  word-break: break-all;
}

.tagCont-adrss-cont a:hover{
  color: var(--color-santa-fe);
}

.tagCont-adrss-box svg{
  width: 26px;
  height: 26px;
  color: var(--color-santa-fe);
}

.planMainDeskl{
    word-break: keep-all;
    padding: 82px 82px;
    color: var(--color3);
    overflow: hidden;
    background: var(--color-dark-bunker);
  }
  
  .planMainDeskl .planMainDeskl-container{
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: inherit !important;
  }
  
  .planMainDeskl h1.planMainDeskl-title{
      font-size: 24px;
      font-weight: 700;
      color: var(--color3);
  }
  
  .planMainDeskl h2,h3{
      font-size: 19px;
      font-weight: 700;
      color: var(--color3);
  }
  
  .planMainDeskl  a{
      text-decoration: underline;
      color: var(--color3);
  }
  
  .planMainDeskl ol li {
      color: var(--color3);
  }
  
  .planMainDeskl ul{
      list-style: disc !important;
      text-align: left;
      margin: 9px;
  }


  .button-1 {
    width: fit-content;
    padding: 20px 20px;
    border-radius: 40px;
    background-color: var(--color-santa-fe);
    font-weight: 500;
    cursor: pointer;
    display: block;
    color:#FFFFFF;
    text-align: center;
    transition: 1s;
  -webkit-animation: btnWiggle 10s infinite;
  animation: btnWiggle 10s infinite;
}
.button-1:hover {
    background-color: var(--color-santa-fe);
    text-decoration: none;
    color:white;
    transition: .5s;
}

.button-2 {
  text-align: center;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition:  0.5s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.button-2 {
  background: var(--color-santa-fe);
  border: none;
}
.button-2:hover {
  background: var(--color-spicy-pink);
  color:white;
}

.button-3 {
  text-align: center;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition:  0.5s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.button-3  {
  background: var(--color-santa-fe);
  border: none;
  
}
.button-3:before {
  height: 0%;
  width: 2px;
}
.button-3:hover {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

.button-4 {
  text-align: center;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition:  0.5s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.button-4 {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.button-4:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-santa-fe);
  transition: all 0.3s ease;
}
.button-4:hover {
  background: transparent;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;
}
.button-4:hover:after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

.button-5 {
  text-align: center;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition:  0.5s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.button-5 {
  background: var(--color-santa-fe);
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.button-5:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  -webkit-transform: scale(.1);
  transform: scale(.1);
}
.button-5:hover {
  color: #fff;
  border: none;
  background: transparent;
}
.button-5:hover:after {
  background: var(--color2);
  -webkit-transform: scale(1);
  transform: scale(1);
}




  @media(max-width: 1200px){
    .solution-block{
      width: 50%;
    }

    .blog-post-block{
      width: 50%;
    }
  }


  @media(max-width: 996px){
    .hero{
      gap: 13px;
    }
  }


@media(max-width: 992px){
    .hero{
      flex-direction: column;
    }

    .hero__image, .hero__title{
      width: 100% !important;
    }

    .patNas-main{
      flex-direction: column;
    }

    .patNas-block{
      margin: 0 auto;
    }

    .solution-inner .solution-icon-box {
      top: -30px;
  }

    .solution-inner .solution-heading {
      top: -30px;
  }

    .solution-inner .solution-description {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
  }

    .megoTar-main{
      flex-direction: column;
    }

    .megoTar-block{
      display: block;
      padding: 13px;
    }

    .megoTar-inner{
      background-image: none;
    }

    .client-voice-main{
      flex-direction: column;
    }

    .client-voice-inner{
      width: 100%;
    }

    .client-voice-video{
      width: 100%;
    }

    .client-voice-video video{
      height: 232px;
    }

    .feature-page-main{
      flex-direction: column;
    }

    .feature-page-rla-main{
      flex-direction: column;
    }

    .feature-page-rla-block{
      width: 100%;
    }

    .tagCont-adrss{
      flex-direction: column;
    }

    .tagCont-main{
      flex-direction: column;
    }

    .bottombar-adrs, .bottombar-poli, .bottombar-title{
      align-items: center;
    }

}

@media screen and (max-width: 992px){
  .nav-wrapper, ul{
    display: block;
  }

  .nav-wrapper{
    margin: 0 auto;
  }

  .nav-wrapper ul{
    padding: 0px 0;
  }

  nav{
    padding: 20px 0;
  }

  #menu a:hover{
    background-color: var(--color-dark-bunker);
    border-bottom: none;

  }

  #menu li{
    padding: 5px 0;
  }

  #menu li{
    border-bottom: 1px solid #333;
  }

  #burger-menu{
    height: 35px;
    position: relative;
    top: 5px;
    left: 100%;
    margin-top: -38px;
    margin-left: -60px;
    cursor: pointer;
  }
  
  .bars{
    background: var(--color3);
    width: 35px;
    height: 5px;
    display: block;
    margin-bottom: 4px;
  }

  ul#menu{
    display: none;
  }

  ul#menu.open-menu{
    display: block;
    text-align: center;
    padding-top: 20px;
  }

}


@media(max-width: 768px){
  .solution-block{
    width: 100%;
  }

  .blog-post-block{
    width: 100%;
  }

  .client-voice-box{
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .bottombar-poli-inner ul{
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .bottombar-adrs-inner-sec{
    flex-direction: column;
  }

  .bottombar-adrs-inner{
    text-align: center;
  }

  .bottombar-title div{
    text-align: center;
  }

  .tagCont-image img{
    height: auto;
  }

  .bottombar-adrs-inner{
    flex-direction: column;
  }

  .bottombar-adrs-twice{
    flex-direction: column;
    align-items: center;
  }
}


@media(max-width: 600px){
  
    .planMainDeskl{
        padding: 37px 37px;
    }
    
    .section__codepen, .patNas, .central-content, .solution, .megoTar, .blog-post, .client-voice, .data-form, .patNas-dop-page, .feature-page, .feature-page-rla, .tagCont {
      padding: 26px;
    }
 
    .pic{
      width: 190px;
      height: 190px;
    }

    .client-voice-inner{
      padding: 26px;
    }

}



@media (max-width: 575px){
    button{
        width: 100%;
    }

    .central-content-image img{
      height: auto;
    }

    .feature-page-image img{
      height: auto;
    }

}


@media(max-width: 375px){

    .patNas-block{
      margin: 0;
    }

    .pic{
      width: 150px;
      height: 150px;
    }

    .nav-wrapper-logo a img{
      width: 26px;
      height: 26px;
    }
}

