@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
body {    font-family: 'Montserrat', sans-serif;font-size: 0.95em ;color: rgb(102, 98, 118);background: white !important;}
.container {height: auto !important;}
.callout p{    font-size: 16px !important;
    line-height: 1.67 !important;}
    p {
        margin-bottom: 0.4em !important;
        font-size: 0.875rem  !important;
        color: rgb(102, 98, 118) !important;
    }
.row{margin: 0 !important;}
.card{border: 0px solid #ccc  !important;
    border-radius: 0.5em  !important;
    box-shadow: 0px 1px 15px #f4f4f4  !important;
    background-color: white  !important;
    transition: 1s  !important;
    cursor:pointer  !important;
    width: auto  !important;
    height: auto  !important;
    }

    .navbar-brand img{width:10em}

    .form-group {padding: 7.5px !important;}

.caps .card:hover{transform: scale(1.01)  !important;box-shadow: 0px 1px 15px #dbdbdb  !important;}
.h6{font-weight: 600 !important;}
/*** T H E - M A G I C - O F - O B J E C T - F I T ***/
/*****************************************************/
.video-container {
  height: 80vh !important;
  position: relative !important;
  overflow: hidden !important;
}
@media (min-width: 600px) {
  .video-container {
    height: 90vh !important;
  }
}

video {
  -o-object-fit: cover !important;
     object-fit: cover !important;
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/*** A E S T H E T I C S ***/
/***************************/
* {
  box-sizing: border-box !important;
}

.video-container:after {
  content: "" !important;
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background: rgba(0, 0, 0, 0.678) !important;
  z-index: 1 !important;
}

h1 {
  text-transform: uppercase !important;
  font-weight: 900 !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 2.5vw  !important;
}
@media (max-width: 400px) {
  h1 {
    font-size: 28px !important;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5em !important;
  }
}

.callout {
  position: relative !important;
  color: white !important;
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  z-index: 10 !important;
}

.support {
  position: fixed !important;
  bottom: 60px !important;
  right: 20px !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-align: right !important;
  position: relative !important;
  z-index: 10 !important;
}
.support a {
  color: white !important;
  text-decoration: none !important;
  position: relative !important;
  display: inline-block !important;
  margin-top: 10px !important;
}
.support a:before {
  display: block !important;
  position: absolute !important;
  content: "" !important;
  bottom: -2px !important;
  width: 0 !important;
  height: 1px !important;
  background-color: rgba(0, 0, 0, 0.678) !important;
  transition: 0.3s !important;
}
.support a:hover:before {width: 100% !important;}

@media (min-width: 1200px)
{
.container {
    max-width: 1240px !important;
}
}



figure {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 475px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  overflow: hidden !important;
}
figure:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
}
figure:hover img {
  transform: scale(1.25) !important;
}
figure:hover figcaption {
  bottom: 0 !important;
}
figure h1 {
  position: absolute !important;
  top: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: white !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  text-align: center !important;
  line-height: 1 !important;
}
figure img {
    height: auto !important;
    width: 100% !important;
  transition: 0.25s !important;
}
figure figcaption {
  position: absolute !important;
  bottom: -85% !important;
  left: 0 !important;
  width: 100% !important;
  height: 475px !important;
  margin: 0 !important;
  padding: 30px !important;
  background-color: #1B1A17 !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important;
  color: white !important;
  line-height: 1 !important;
  transition: 0.25s !important;
  background: linear-gradient(to bottom, #75c7fb, #000);
}
figure figcaption h3 {
  margin: 0 0 20px !important;
  padding: 0 !important;
}
figure figcaption p {
  font-size: 14px !important;
  line-height: 1.75 !important;
}
figure figcaption button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px 0 0 !important;
  padding: 10px 30px !important;
  background-color: #1abc9c !important;
  border: none !important;
  border-radius: 5px !important;
  color: white !important;
  font-size: 14px !important;
}



.container .post {
  height: 250px !important;
  display: flex !important;
  overflow: hidden !important;
  flex-direction: column !important;
  position: relative !important;
  border-radius: 0.5em !important;
    box-shadow: 0px 1px 15px #ffe4e4
}
.container .post:hover .header_post {
  margin-top: -20px !important;
}

.container .post:hover img {
  transform: translatey(-10px) translatex(-5px) scale(1.05) !important;
}
.container .post .header_post {
  width: 100% !important;
  height: 40% !important;
  background: #ddd !important;
  position: absolute !important;
  top: 0 !important;
  -webkit-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -moz-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -ms-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -o-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
}
.container .post .header_post img {
  max-width: 100% !important;
  height: auto !important;
  transition: ease-in-out 600ms !important;
}
.container .post .body_post {
  width: 100% !important;
  height: 30% !important;
  background: #fff !important;
  position: absolute !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  -webkit-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -moz-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -ms-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -o-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  cursor: pointer !important;
}
.container .post .body_post .post_content {
  width: 80% !important;
  height: 80% !important;
  background: #fff !important;
  position: relative !important;
  text-align: center !important;
  padding: 1em !important;
}
.container .post .body_post .post_content h1 {
  font-size: 1em !important;
  font-weight: bold !important;
}
.container .post .body_post .post_content p {
  font-size: 14px !important;
  font-weight: normal !important;
}
.container .post .body_post .post_content .container_infos {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  position: absolute !important;
  bottom: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
  padding-top: 25px !important;
}
.container .post .body_post .post_content .container_infos .postedBy {
  display: flex !important;
  flex-direction: column !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}
.container .post .body_post .post_content .container_infos .postedBy span {
  font-size: 12px !important;
  text-transform: uppercase !important;
  opacity: 0.5 !important;
  letter-spacing: 1px !important;
  font-weight: bold !important;
}
.container .post .body_post .post_content .container_infos .container_tags {
  display: flex !important;
  flex-direction: column !important;
}
.container .post .body_post .post_content .container_infos .container_tags span {
  font-size: 12px !important;
  text-transform: uppercase !important;
  opacity: 0.5 !important;
  letter-spacing: 1px !important;
  font-weight: bold !important;
}
.container .post .body_post .post_content .container_infos .container_tags .tags ul {
  display: flex !important;
}
.container .post .body_post .post_content .container_infos .container_tags .tags ul li {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  list-style: none !important;
  margin-left: 8px !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.container .post .body_post .post_content .container_infos .container_tags .tags ul li:first-child {
  margin-left: 0px !important;
}
.container .post .body_post .post_content .container_infos .container_tags .tags ul li:before {
  content: "" !important;
  text-align: center !important;
  width: 100% !important;
  height: 5px !important;
  background: #FC6042 !important;
  opacity: 0.5 !important;
  position: absolute !important;
  bottom: 0 !important;
  z-index: -1 !important;
  padding: 0px 1px !important;
  -webkit-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -moz-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -ms-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  -o-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms !important;
}
.container .post .body_post .post_content .container_infos .container_tags .tags ul li:hover:before {
  height: 18px !important;
}



@keyframes top {
  0% {
    opacity: 0 !important;
    bottom: -80px !important;
  }
  100% {
    opacity: 1 !important;
    bottom: 0px !important;
  }
}
@keyframes icon {
  0% {
    opacity: 0 !important;
    transform: scale(0) !important;
  }
  50% {
    opacity: 1 !important;
    transform: scale(1.3) rotate(-2deg) !important;
  }
  100% {
    opacity: 1 !important;
    bottom: 0px !important;
  }
}

.service-card {
    float: left !important;
    padding: 1.2em  !important;
    width: 100%  !important;
}
.service-card:hover{
     transform: scale(1.05)  !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06)  !important;
}



.service-card-1 {
    background-image: url(caps/doughnut.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 15em  !important;
}

.service-card-2 {
    background-image: url(caps/brand.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 15em  !important;
}

.service-card-3 {
    background-image: url(caps/branding.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 15em  !important;
}

.service-card-4 {
    background-image: url(caps/interactivity.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 15em  !important;
}



.service-card-5 {
    background-image: url(caps/content-management.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 90px  !important;
    background-position-x: 15em  !important;
}


.service-card-6 {
    background-image: url(caps/creative.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 15em  !important;
}


.service-card-7 {
    background-image: url(caps/user-interface.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 15em  !important;
}

.service-card-8 {
    background-image: url(caps/database.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 15em  !important;
}

.service-card-9 {
    background-image: url(caps/employee.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 14em  !important;
}


.service-card-10 {
    background-image: url(caps/social-media.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 14em  !important;
}

.service-card-11 {
    background-image: url(caps/speech-bubble.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 14em  !important;
}

.service-card-12 {
    background-image: url(caps/research.png)  !important;
    background-repeat: no-repeat  !important;
    background-position: right  !important;
    background-size: 80px  !important;
    background-position-x: 14em  !important;
}
.service-card {
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05) !important;
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12) !important;
    padding: 14px 80px 18px 36px !important;
    cursor: pointer !important;
    text-align: left !important;
}

.bb{border-bottom: 1px solid #ccc !important;padding-bottom: 1em !important;}

.modal-backdrop {background-color:black;opacity: 1;}
.modal-content {border: 0 !important;border-radius: 0.5em !important;}
.modal-header {background: #313131 !important;}
.modal-title{color:#fff !important}
.modal-header .close {padding: 1.18rem 1rem !important;margin: -1rem -1rem -1rem auto !important;}
button.close{color: white !important;background: #1e1e1e !important;}
.modal.show  {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-content:center !important;
  align-items: flex-start !important;
}

.switch-icon {font-size: 28px !important;color:#1B1A17 !important;margin-bottom: 0.5em}
.caps .card:hover .switch-icon {font-size: 28px !important;color:white !important;margin-bottom: 0.5em}
.form-control {border-radius: 0 !important;border: 2px solid #e3e3e3 !important;}
.get-in{border-radius: 0 !important;color: #fff  !important;border:1.8px solid #fff !important;font-weight: 500 !important;border-radius: 0.5em !important;background: transparent !important;}
.get-in:hover{background: white !important;color:#1B1A17  !important;}
.rounded{font-size: 1.5em !important;padding: 0.5em !important;border-top-right-radius: 0  !important;border-bottom-right-radius: 0  !important;background: #e4e4e4 !important;width: 2em !important;
    text-align: center !important;    margin-right: 1em !important;}
.navbar {position: fixed !important;width: 100% !important;z-index: 9999 !important;background-color: #1B1A17  !important;color: white !important;padding: 0vw 2vw !important;}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-text {color: white !important;text-transform: capitalize !important;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color:rgb(255 239 239 / 70%)}
.dominet-card{background: white !important;border-radius: 0.8em !important;box-shadow: 0px 1px 15px #ffe4e4 !important;font-weight: 700 !important;color:#1B1A17}
.hover-shadow-3d:hover {
    box-shadow: 0.5rem 0.5rem 0 rgb(233 236 239 / 50%) !important;
    transform: translate3d(-4px,-4px,0) rotateZ(
-1deg
) !important;
}

.icon-round.bg-primary {
    background: rgba(255,98,63,.1) !important;
}
.icon-round {
    flex-shrink: 0 !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bg-primary-2 {
    background-color: #225560 !important;
}
.bg-primary-3 {
    background-color: #171219 !important;
}

.text-light-shadow {
    text-shadow: 0.03em 0.03em 0 #a0a0a0 !important;
}
.text-light-stroke {
    color: transparent  !important;
    -webkit-text-stroke-width: 1px !important;
    -webkit-text-stroke-color: #a0a0a0 !important;
    -webkit-transition: all 0.3s ease-in-out !important;
    transition: all 0.3s ease-in-out !important;
}

.mt-lg-n3 {
    margin-top: -1rem  !important;
}
.me-3 {
    margin-right: 1rem  !important;
}

.pattern-overlay-7::after {
    content: "";
    background: url(https://folio.webestica.com/assets/images/bg/pattern/07.png);
    background-position: center center ;
    background-repeat: repeat ;
    position: absolute ;
    top: 0 ;
    right: 0 ;
    left: 0 ;
    bottom: 0 ;
    z-index: -1 ;
}

.curve-bg{background: linear-gradient( 180deg, #dbefff 0%, rgba(255, 255, 255, 0) 102.23%), #F4F4F5}

.bg-shape {
        position: relative !important;
        padding-bottom: 6em
    }
    .bg-shape:after {
        position: absolute !important;
        background: url(https://codescandy.com/coach/assets/images/curve-shape.svg) !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        bottom: -15px !important;
        height: 62px !important;
        width: 100% !important;
        content: "" !important;
        background-position-x: center !important;
    }

    .fs-sm {
        font-size: 0.875rem  !important;
        color: rgb(102, 98, 118) !important;
    }
    .badge {
        border-radius: .375rem !important;
        color: #fff !important;
        display: inline-block !important;
        font-size: .75em !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        padding: .25rem .75rem !important;
        text-align: center !important;
        vertical-align: baseline !important;
        white-space: nowrap !important;
    }
    .badge.bg-success-soft {
        background-color: #1B1A170f !important;
        color: #1B1A17 !important;
    }
    .badge-rounded-circle {
        border-radius: 50rem !important;
        height: 2rem !important;
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }

    .text-danger {
        margin-left: 0.5em !important;
        margin-top: 0.5em !important;
        color: #1B1A17 !important;
    }

    .snakepit__content {border-radius: 11em !important;}

    .snakepit__item:nth-child(odd) {padding-right: 0px !important;}
    .snakepit__item:nth-child(2n) {padding-right: 0px !important;}
    .snakepit__item:nth-child(odd) {padding-left: 0px !important;}



















    .snakepit__content {width: 100%;min-height: auto !important;padding: 0.5em 1em !important;border: 1px solid #b6fab3 !important;}
    .snakepit__heading {font-size: 1.15em !important;font-weight: 300 !important;}
    .snakepit__item {height: 3.5em; text-align: center;margin-top: 1em;margin-right: 0.8em;}
    .snakepit__item:hover .snakepit__heading {color:  #1B1A17 !important;}
    .snakepit__rectangle--right:before {display: none !important;}
    .snakepit__rectangle--left:before {display: none !important;}
    .snakepit .js-active .snakepit__content {background: #1B1A170f !important;color: #1B1A17 !important;}
    .snakepit .js-active .snakepit__heading {color: #1B1A17 !important;}