.modal-body { 
    h1 { 
      font-weight:900; 
      font-size:2.3em;
      text-transform:uppercase;
    }
    
    a.pre-order-btn { 
      color:#000;
      background-color:gold;
      border-radius:1em;
      padding:1em;
      display: block;
      margin: 2em auto;
      width:50%;
      font-size:1.25em;
      font-weight:6600;
      &:hover { 
      background-color:#000;
        text-decoration:none;
        color:gold;
      }
    }
    
    
  }
  

  /* carosel slider */
  .btn{
    background-color: transparent;
    border: 1px solid #dc3545;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    font-size: 16px;
    margin: 20px 0;
  }
  
  .btn:hover{
    /* background-color: #dc3545; */
    color: white;
    transition: 0.5s;
  }
  .btn1{
    background-color: transparent;
    border: 1px solid #dc3545;
    /* color: white; */
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    font-size: 16px;
    margin: 20px 0;
  }
  .btn1:hover{
    background-color: #dc3545;
    color: #168dc5;
    transition: 0.5s;
  }
  
  /* Slider */
  
  .slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    height: 675px;
    margin: auto;
  }
  
  .slide {
      display: flex;
      flex: 0 0 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; 
      transition: transform 1s ease-in-out;
      transform: translateX(100%);
    }
  
  .slide.active {
    transform: translateX(0);
  }
  
  .text-box {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* color: #dc3545f; */
    padding: 4em;
    box-sizing: border-box;
    width: 30%;
  }
  
  img {
    object-fit: cover;
    flex: 7;
    /* width: 70px; */
    height: auto;
    box-sizing: border-box;
  }
  
  /* .arrow {
    position: absolute;
    top: 50%;
    font-size: 24px;
    color: #dc3545;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
  } */
  
  /* #prevBtn {
    left: 10px;
  }
  
  #nextBtn {
    right: 10px;
  } */
  
  /* Background colors for each slide*/
  #slide1 { background-color: #0fb1ee; }
  #slide2 { background-color: #4b59eb; }
  #slide3 { background-color: #d89069; }
  
  
  
  /* Tablet */
  @media screen and (max-width: 768px) {
    .slide {
      flex-direction: column;
    }
  
    .text-box {
      order: 2;
      width: 100%;
      padding: 2em;
    }
  
    img {
      /* width: 100%; */
    }
  }
  
  /* Mobile */
  @media screen and (max-width: 480px) {
    .slide {
      flex-direction: column;
    }
  
    .text-box {
      order: 2;
      width: 100%;
      padding: 1em;
    }
  
    img {
      /* width: 100%; */
    }
  }
  
  

  /* BG */
  .shaper {
    background: gray url(https://image.ibb.co/ky3Y0S/teee.png) repeat 0 0;
    width: 100%;
    margin: 0;
    text-align: center;
    /* height: 450px; */
    /* padding-top: 120px; */
    box-sizing: border-box;
    -webkit-animation: slide 30s linear infinite;
  }
  
  /* .shaper h1 {
    font-family: sans-serif;
    font-size: 80px;
    color: white;
  }
  
  .shaper h2 {
    font-family: sans-serif;
    font-size: 40px;
    color: white;
  } */
  
  @-webkit-keyframes slide {
      from { background-position: 0 0; }
      to { background-position: -512px -512px; }
  }

  /* bghovernew */
  .wrapper {
    position: relative;
    width: 100%;
    height: 421px;
    overflow: hidden;
    background: #0c65eb; 
    background: -webkit-linear-gradient(to bottom, #120746, #4129cc);  
    background: linear-gradient(to bottom, #120746, #4129cc); 
  }
  
  .box div {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 6px solid rgba(255,255,255,0.8);
  }
  
  .box div:nth-child(1) {
    top: 12%;
    left: 42%;
    animation: animate 10s linear infinite;
  }
  
  .box div:nth-child(2) {
    top: 70%;
    left: 50%;
    animation: animate 7s linear infinite;
  }
  .box div:nth-child(3) {
    top: 17%;
    left: 6%;
    animation: animate 9s linear infinite;
  }
  
  .box div:nth-child(4) {
    top: 20%;
    left: 60%;
    animation: animate 10s linear infinite;
  }
  
  .box div:nth-child(5) {
    top: 67%;
    left: 10%;
    animation: animate 6s linear infinite;
  }
  
  .box div:nth-child(6) {
    top: 80%;
    left: 70%;
    animation: animate 12s linear infinite;
  }
  
  .box div:nth-child(7) {
    top: 60%;
    left: 80%;
    animation: animate 15s linear infinite;
  }
  
  .box div:nth-child(8) {
    top: 32%;
    left: 25%;
    animation: animate 16s linear infinite;
  }
  
  .box div:nth-child(9) {
    top: 90%;
    left: 25%;
    animation: animate 9s linear infinite;
  }
  
  .box div:nth-child(10) {
    top: 20%;
    left: 80%;
    animation: animate 5s linear infinite;
  }
  
  @keyframes animate {
    0% {
      transform: scale(0) translateY(-90px) rotate(360deg);
      opacity: 1;
    }
    
    100% {
      transform: scale(1.3) translateY(-90px) rotate(-180deg);
      border-radius: 50%;
      opacity: 0;
    }
  }

  /* bg director section */
  .example-box {
    background-image: linear-gradient(to bottom right, #120746, #4129cc);
    width: 100%;
    height: 449px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    color: white;
    font-family: sans-serif;
    font-weight: 200;
    z-index: 1;
  }
  
  .example-box * {
    z-index: 2;
  }
  
  h1 {
    font-family: Montserrat, sans-serif;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  
  .background-shapes {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 5076px;
    background-size: 100%;
    animation: 120s infiniteScroll linear infinite;
    background-repeat-x: repeat;
    background-image: url(https://cdn2.hubspot.net/hubfs/53/Pricing%202017%20Assets/marketing/Header_Circles-1.svg);
  }
  
  @-webkit-keyframes infiniteScroll {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    100% {
      -webkit-transform: translate3d(0, -1692px, 0);
      transform: translate3d(0, -1692px, 0);
    }
  }
  
  @keyframes infiniteScroll {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    100% {
      -webkit-transform: translate3d(0, -1692px, 0);
      transform: translate3d(0, -1692px, 0);
    }
  }
  

  /* buttons */
  /* Fonts imported form Goggle Fonts */

/* .btn {
 font-family: "Comfortaa", cursive;
 font-size: 1rem;
 padding: 0.85em 1.345em;
 font-weight: bold;
 border-radius: 0.5em;
 margin: auto;
 letter-spacing: 2px;
 cursor: pointer;
 max-width: 10rem;
} */
/* Button 1 */
.white-stripes {
 background: transparent;
 border-top: 4px solid white;
 border-bottom: 4px solid white;
 border-left: none;
 border-right: none;
 border-radius: 0px;
 transition: all 0.5s ease-in-out;
}
.white-stripes:hover {
 background: white;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
 color: black;
 transform: translate(0px, -5px);
}

/* Button 2 */
.darkblue-purpule {
 background: linear-gradient(to right, #1f6ce0, #3e24e7);
 border: none;
 transition: all 0.5s ease-in-out;
}

.darkblue-purpule:hover {
 transform: translate(0, -5px);
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.darkblue-purpule1 {
  background: linear-gradient(to right, #597df3, #7f5ef5);
  border: none;
  transition: all 0.5s ease-in-out;
 }
 
 .darkblue-purpule1:hover {
  transform: translate(0, -5px);
 box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
 }

/* Button 3 */
.blue-white {
 background-image: linear-gradient(to right, #007bff, #00264d);
 border: 3px solid white;
}
.blue-white:hover {
 animation-name: blueLight;
 animation-duration: 650ms;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-timing-function: ease-in-out;
}
@keyframes blueLight {
 0% {
   background-image: linear-gradient(to right, #007bff, #00264d);
 }
 20% {
   background-image: linear-gradient(to right, #0069d8, #00336a);
 }
 40% {
   background-image: linear-gradient(to right, #0057b3, #004186);
 }
 60% {
   background-image: linear-gradient(to right, #003e81, #0056acc3);
 }
 80% {
   background-image: linear-gradient(to right, #003e81, #0065c9c3);
 }
 100% {
   background-image: linear-gradient(to right, #00264d, #007bff);
 }
}

/* Button 4 */
.rainbow {
 border: 3px solid;
 background: white;
 border-image-slice: 10%;
 border-image-width: 0.275em;
 border-image-repeat: stretch;   
 border-image-source: linear-gradient(
   to left,
   violet,
   indigo,
   blue,
   green,
   yellow,
   orange,
   red
 );
 color: black;
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.rainbow:hover {
 animation: rainbow 0.55s infinite ease-in-out;
}

@keyframes rainbow {
 0% {
   border-image-source: linear-gradient(
     to left,
     violet,
     indigo,
     blue,
     green,
     yellow,
     orange,
     red
   );
 }
 14% {
   border-image-source: linear-gradient(
     to left,
     red,
     violet,
     indigo,
     blue,
     green,
     yellow,
     orange
   );
 }
 28% {
   border-image-source: linear-gradient(
     to left,
     orange,
     red,
     violet,
     indigo,
     blue,
     green,
     yellow
   );
 }
 42% {
   border-image-source: linear-gradient(
     to left,
     yellow,
     orange,
     red,
     violet,
     indigo,
     blue,
     green
   );
 }
 57% {
   border-image-source: linear-gradient(
     to left,
     green,
     yellow,
     orange,
     red,
     violet,
     indigo,
     blue
   );
 }
 71% {
   border-image-source: linear-gradient(
     to left,
     blue,
     green,
     yellow,
     orange,
     red,
     violet,
     indigo
   );
 }
 85% {
   border-image-source: linear-gradient(
     to left,
     indigo,
     blue,
     green,
     yellow,
     orange,
     red,
     violet
   );
 }
 100% {
   border-image-source: linear-gradient(
     to left,
     violet,
     indigo,
     blue,
     green,
     yellow,
     orange,
     red
   );
 }
}

/* Button 5 */
.classy {
 display: inline-block;
 padding: 10px 20px;
 background-color: #000;
 color: #fff;
 font-size: 16px;
 border: none;
 cursor: pointer;
 transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.classy:hover {
 background-color: #fff;
 color: #000;
}

.classy:active {
 transform: scale(0.9);
}

.classy:animated {
 animation: button-grow 0.5s ease-in-out;
}

@keyframes button-grow {
 0% {
   transform: scale(0);
 }

 100% {
   transform: scale(1);
 }
}


/* Button 6 */
.top-fill {
 position: relative;
 color: var(--clr-blue);
 border: 3px solid var(--clr-blue);
 background: transparent;
 overflow: hidden;
 transition: color 0.5s ease-in, transform 0.5s ease-in-out;
 
}
.top-fill::before {
 content: "";
 position: absolute;
 height: 70px;
 width: 150px;
 background: var(--clr-blue);
 transform: translate(-25px, 33px);
 transition: transform 0.45s ease-in;
}
.top-fill:hover::before {
 content: "";
 transform: translate(-25px, -30px);
 z-index: -1;
}
.top-fill:hover {
 color: white;
}
.top-fill:active{
transform: scale(0.9);
}


/* Button 7 */
.pop-underline{
 position: relative;
 background: none;
 border:none;
 overflow:hidden;
 color: var(--lexicon);
 transition: color 600ms ease-in-out;
 }
.pop-underline::after{
 content:"";
 display:block;
 position:relative;
 margin-top:0.25em;
 border-bottom:0.25em solid blue;
 opacity: 0;
 transition: all 450ms ease-in-out;
 width: 1%;

}
.pop-underline:hover::after{
 opacity: 1;
 width:100%; 
}
.pop-underline:hover{
 color: white;
}

/* new button style */
.btn-conteiner {
  display: flex;
  justify-content: center;
  --color-text: #ffffff;
  --color-background: #ff135a;
  --color-outline: #ff145b80;
  /* --color-shadow: #00000080; */
}

.btn-content {
  display: flex;
  align-items: center;
  /* padding: 5px 30px; */
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--color-text);
  background: var(--color-background);
  transition: 1s;
  border-radius: 100px;
  box-shadow: 0 0 0.2em 0 var(--color-background);
}


.btn-content .icon-arrow {
  transition: 0.5s;
  margin-right: 0px;
  transform: scale(0.6);
}

.btn-content:hover .icon-arrow {
  transition: 0.5s;
  /* margin-right: 25px; */
}

.icon-arrow {
  width: 20px;
  margin-left: 15px;
  position: relative;
  /* top: 6%; */
}
  
/* SVG */
#arrow-icon-one {
  transition: 0.4s;
  transform: translateX(-60%);
}

#arrow-icon-two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.btn-content:hover #arrow-icon-three {
  animation: color_anim 1s infinite 0.2s;
}

.btn-content:hover #arrow-icon-one {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.6s;
}

.btn-content:hover #arrow-icon-two {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */
@keyframes color_anim {
  0% {
    fill: white;
  }

  50% {
    fill: var(--color-background);
  }

  100% {
    fill: white;
  }
}

/* Button animations */
/* @-webkit-keyframes btn-content {
  0% {
    outline: 0.2em solid var(--color-background);
    outline-offset: 0;
  }
}

@keyframes btn-content {
  0% {
    outline: 0.2em solid var(--color-background);
    outline-offset: 0;
  }
} */

/* sectiontitile */
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f3f5fa;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  /* color: #37517e; */
}

.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #47b2e4;
  bottom: 0;
  left: calc(50% - 20px);
}

.ccolor{
  color: #aa1d1d;
}



.fables-nav .nav-color{
  color: red;
}



.close {
  font-size: 1.5rem;
}


@media (max-width: 576px){
.fabless-after-overlay::after {
    border-radius: 0;
}
}


.two {
  border-style: solid;
  border-color: green;
}