@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

body{
    background-color:#ffffff;
    direction: ltr;
    font-family: 'PT Sans', sans-serif !important;
    font-size: 16px;
    margin: 0;
    padding: 0px;
    color: #060606;
    background: url(content/images/vaporLayer_CpqLx0.png) no-repeat;
    background-position: center;
    background-size: cover;
  }
  .button-1 {
  position: relative;
  text-align: center;
  font-family: poppins;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background-color: rgba(3, 3, 3, 0.5);
  border: none;
  padding:  9px 13px;
  transition: color 0.2s linear, box-shadow 0.3s linear,
    background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.button-1:focus,
.button-1:hover {
  box-shadow: 0 0 110px #fff;
  background-color: rgba(255, 255, 255, 0.4);
  color: #111;
  font-weight:  400;
}

.button-1:focus:before,
.button-1:hover:before,
.button-1:focus:after,
.button-1:hover:after {
  width: 100%;
  left: 0%;
}

.button-1:before,
.button-1:after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition: width, left, 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.button-1:before {
  top: -2px;
}

.button-1:after {
  bottom: -2px;
}

.button-2 {
  padding: 9px 18px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  border: none;
  border-radius: 0px;
  background: linear-gradient(
    145deg,
    #9c27b0,
    #f44336,
    #ff9800,
    #ffc107,
    #8bc34a,
    #4caf50,
    #2196f3,
    #03a9f4,
    #00bcd4,
    #009688
  );
  background-size: 200%;
  background-position: 0%;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25),
    inset 0px -1px 0px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out;
}

.button-2:hover {
  background-position: 100%;
  box-shadow: 0px 4px  7px rgba(0, 0, 0, 0.25),
    inset 0px -2px 0px rgba(255, 255, 255, 0.2);
}

.button-2:focus {
  outline: none;
}

.button-2:active {
  background-size: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25),
    inset 0px -1px 0px rgba(255, 255, 255, 0.2);
}

.button-3 {
  position: relative;
  padding: 10px  19px;
  color: #fff;
  font-size: 18px;
  font-weight:  400;
  letter-spacing: 2px;
  background-color: #212121;
  transition: all 0.5s;
  border: none;
}

.button-3::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 255, 86, 0.281);
  border-radius: 0px;
  transition: all 0.3s;
  z-index: 1;
}

.button-3:hover::before {
  opacity: 0;
  transform: scale(0.7, 0.7);
}

.button-3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  border: 1px solid rgba(29, 255, 86, 0.281);
  border-radius: 0px;
  transform: scale(1.5, 1.5);
  opacity: 0;
  z-index: 1;
}

.button-3:hover::after {
  opacity: 1;
  transform: scale(1, 1);
}

.button-4 {
  background-color: rgb(86, 190, 242);
  border: none;
  color: white;
  padding:  10px  19px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 0px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.button-4:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.button-4:hover:after {
  animation: ripple_401 1s ease-out;
}

@keyframes ripple_401 {
  0% {
    width: 5px;
    height: 5px;
    opacity: 1;
  }

  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

.button-5 {
  font-size: 16px;
  color: white;
  background-color: transparent;
  padding: 13px  18px;
  border: 2px solid;
  transition: 0.3s all;
  background-image: linear-gradient(45deg, purple, red, orange, red, purple);
  background-size: 500% 200%;
  background-position: 25% 50%;
  font-family: inherit;
  font-weight: 400;
}

.button-5:hover {
  box-shadow: none;
  background-color: rgb(92, 92, 92);
  animation: rainbow 1s 1;
  transform: scale(1.13);
  border-radius: 27px;
  background-position: 70% 50%;
}

.button-5:active {
  transform: scale(1.2);
}

  .section-page .container{
    background: #fff;
  }
  
.input-form__container__item{
  margin: 10px 0px;
  display: block;
  width: 100%;
  padding:9px 13px;
  font-size:  18px;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 2px dotted #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 7px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.textarea-form__container__item{
  border: 2px dotted #ced4da;
  border-radius: 7px;
  padding: 9px 13px;
  width: 100%;
  font-size: 18px;
}
  h1, h2, h3, h4, h5{
  margin: 0;
  padding: 0;
}

button{
  cursor: pointer;
}

a{
  text-decoration: none;
  color: inherit;
}

img{
  display: block;
  max-width: 100%;
}
*{
  box-sizing: border-box;
}


.section{
  padding: 68px 0;
}

.title{
  font-size: 25px;
  font-weight:900;
  margin-bottom: 24px;
  text-align: center;
  color: #060606;
}

.subtitle{
  font-size: 18px;
  text-align: center;
  font-weight: 400;
  margin-bottom: 24px;
  color: #060606;
}

.date{
  color: #666666;
  font-size: 13px;
}

.wrapper{
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

.pay-text{
  word-wrap: break-word;
}
.pay-text ul li,
.pay-text ol li {
  margin-bottom: 4px;
}
.pay-text ul,
.pay-text ol {
  margin-bottom: 12px;
  padding-left:  18px;
  list-style: inside;
}
.pay-text a,.pay-text table{
color: inherit;
}

.pay-text  h1{
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 24px;
}

.pay-text  h2{
    font-size: 27px;
    font-weight:400;
    margin-bottom: 24px;
}

.pay-text  h5,
.pay-text  h4,
.pay-text  h3{
  font-weight: 400;
  font-size: 27px;
  margin-bottom: 24px;
}

.pay-text p{
    margin-bottom: 9px;
    text-indent: 3ch;
}

.logo-section{
  background-color: #060606;
}

.header-logo{
  display: flex;
  flex-direction: row;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 25px 0;
}

.header-logo-img-box img{
  object-fit: contain;
  width: auto;
  height: 55px;
}

.header-logo-title{
  font-size: 34px;
  font-weight: 400;
  text-transform: uppercase;
  background: linear-gradient(#f3ec78, #af4261);
}

.gradient-text {
  background-color: #CA4246;
  background-image: linear-gradient(
        45deg,
        #CA4246 16.666%, 
        #E16541 16.666%, 
        #E16541 33.333%, 
        #F18F43 33.333%, 
        #F18F43 50%, 
        #8B9862 50%, 
        #8B9862 66.666%, 
        #476098 66.666%, 
        #476098 83.333%, 
        #A7489B 83.333%);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  animation: rainbow-text-simple-animation-rev 0.75s ease forwards;
  text-transform: uppercase;
}

.gradient-text:hover{
    animation: rainbow-text-simple-animation 0.5s ease-in forwards;
}


@keyframes rainbow-text-simple-animation-rev {
    0% {
        background-size: 650%;
    }
    40% {
        background-size: 650%;
    }
    100% {
        background-size: 100%;
    }
}


@keyframes rainbow-text-simple-animation {
    0% {
        background-size: 100%;
    }
    80% {
        background-size: 650%;
    }
    100% {
        background-size: 650%;
    }
}
  
.section-nav{
  background-color: #060606;
}

.nav-item{
  transition: 0.5s ease-out;
  text-transform: uppercase;
}

.nav-btn{
  background-color: transparent;
  border: none;
  text-transform: uppercase;
  color: #fff;
  transition: 0.5s ease-out;
}

.nav-item:hover,
.nav-item:focus,
.nav-btn:hover,
.nav-btn:focus{
  color: #E07250;
}

.navbar-toggler{
  width: auto;
  border: none;
  color: #818181;
}

.navbar-toggler:hover,
.navbar-toggler:focus,
.navbar-toggler:active{
  box-shadow: none;
}

.bi-list{
  transition: color 0.5 ease-out;
}

.bi-x-square:hover,
.bi-x-square:focus,
.bi-list:hover,
.bi-list:focus{
  color: #818181;
}

.ofc-btn-close{
  background: transparent;
  border: none;
}

.bi-x-square{
  color: #E07250;
    transition: color 0.5 ease-out;
}

.offcanvas-header {
  justify-content: end;
  align-items: baseline;
}

.offcanvas-body,
.offcanvas{
  display: flex;
  gap: 18px;
  color: #060606;
}

.offcanvas.offcanvas-start {
  height: 100vh;
}

.pages-link-list{
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
  flex: 1;
  padding: 0;
  margin: 0;
  align-items: end;
  justify-content: center;
}

.pages-link-list:nth-child(even){
  align-items: start;
  padding-block-start: 27px;
}


.pages-link-item,
.pages-nav-item{
  list-style: none;
  transition: 0.5s ease-out;
}

.pages-link-item:hover,
.pages-link-item:focus,
.pages-nav-item:hover,
.pgaes-nav-item:focus{
  transform: scale(1.1);
  color: #E07250;
}

.pages-nav-list{
  display: flex;
  flex-direction: column;
  gap: 19px;
  margin-bottom: 27px;
}

.navbar-nav{
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.slider-wrapper{
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
  position: relative;
  z-index: -2;
}

.slider-box{
  flex: 1;
  overflow: hidden;
}

.slider-it img{
  object-fit: cover;
  height: 307px;
  width: 100%;
}

.slider-description{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider-desc-box{
  display: flex;
  flex-direction: row;
  gap: 9px;
  align-items: center;
  color: #666666;
  font-size: 13px;
  text-align: center;
}

.slider-desc-title{
  font-weight: 400;
}

.slider-desc-box p{
  margin: 0;
}

.bi-dash{
  transform: rotate(90deg);
}

.main-container{
  padding-top: 19px;
  padding-bottom: 19px;
}

.main-list{
  display: flex;
  flex-direction: column-reverse;
  gap: 23px;
  padding: 0;
}
.flex-boxKF{
  display: flex;
  flex-direction:  column-reverse;
}
.gap-boxGHK{
  gap: 41px;
}

.main-list-second{
  flex-direction: column;
  display: flex;
  padding: 0;
  gap: 23px;
}

body > section.section.main > div > ul.main-list-second > li:nth-child(1){
  flex-direction: row-reverse;
}

.main-item{
  list-style: none;
  display: flex;
  border-radius:  0px;
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  position: relative;
}

.main-category{
  font-size:  13px;
  position: absolute;
  left: 0;
  top: 0;
  color: #E07250;
  padding: 0px 12px;
  background-color: #fff;
  border:  2px dotted #6666664d;
}

.main-img-box{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:  19px;
  flex: 0.5;
}

.main-img-box img{
  width: 100%;
  height: 238px;
  object-fit: contain;
}

.main-img{
  transition: 0.5s ease-out;
}

.main-img:hover,
.main-img:focus{
  opacity: 0.3;
  transform: scale(1.02);
}

.main-content-box{
  flex: 1;  
  padding:  19px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.main-title{
  font-size: 18px;
  font-weight: 400;
  color: #A7489B;
  transition: 0.5s ease-out;
  margin-bottom: 19px;
}

.main-title:hover,
.main-title:focus{
  color: #E07250;
  transform: scale(1.02);
}

.main-content{
  margin-bottom: 0;
}

.main-btn-more > div{
  color: #E07250;
  transition: 0.5s ease-out;
}

.main-btn-more > div:hover,
.main-btn-more > div:focus{
  transform: scale(1.02);
}

.subscribe-section{
  background-color: #fff;
  padding-bottom: 0;
}

.newsletter-form, 
.subscribe-box > div{
 flex: 1;
}

.newsletter-description{
  text-align: center;
}

.newsletter-form {
  text-align: center;
  margin-bottom: 0;
}

.subscribe-box{
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
  align-items: center;
}

.newsletter-input{
  box-shadow: 0 0 27px rgba(23,23,23,.06); 
  border-radius: 0px;
  width: 100%;
  border: none;
  outline: none;
  padding:  9px  18px;
  margin-bottom:  19px;
  flex: 1;
  text-align: center;
}

.newsletter-form > button{
  flex: 0.5;
}

.pop-wpaz{
  display: flex;
  flex-direction: column-reverse;
  gap:  19px;
}

.pop-wpaz > div{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pop-img{
  position: relative;
  overflow: hidden;
  height: 224px;
  width: 100%;
}

.pop-img img{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.pop-category{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  border-radius: 0;
  color: #E07250;
  background-color: #fff;
  font-size: 13px;
  font-weight: 400;
  display: inline-block;
  padding: 0 18px;
  border: 2px dotted #6666664d;
}

.pop-name-box{
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
}

.pop-name-box p{
  margin-bottom: 0;
  color: #666666;
  font-size: 13px;
}

.pop-desc{
  background-color: #ffffff8d;
  padding: 19px;
  flex: 1;
}

.footer{
  background-color: #fff;
  padding: 25px 0;
}

.footer-container{
  display: flex;
  flex-direction: column;
  gap:  19px;
}

.poliFoot-wr{
  display: flex;
  flex-direction: column-reverse;
  gap:  19px;
  margin-bottom: 10px;
  justify-content: center;
  align-items: center;
}

.poliFoot{
  transition: color 0.5s ease-out;
  color: #818181;
}

.poliFoot:hover,
.poliFoot:focus{
  color: #E07250;
}

.footer-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 10px;
  color: lightgrey;
}

.category-item{
  text-align: center;
}

.page-title{
  text-align: center;
  margin-bottom: 19px;
  color: #E07250;
}

.page-author{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 19px;
}

.page-img-box{
  display: flex;
  padding:  10px;
  justify-content: center;
  align-items: center;
  img{
    width: 100%;
    object-fit: contain;
    height:  402px;
  }
}

.content-box{
  padding:  19px;
}

.page-main-content{
  margin-bottom: 19px;
  text-align: start;
}
.page-main-content p{
margin-bottom:  9px;
text-indent: 3ch;
}
.page-main-content ul li,
.page-main-content ol li {
  margin-bottom: 4px;
}
.page-main-content ul,
.page-main-content ol {
  margin-bottom: 12px;
  padding-left:  18px;
  list-style: inside;
}

.price-box{
  padding: 10px;
  display: flex;
  justify-content:  start;
}

.price-box span{
  color: #E07250;
}

.page-form{
  text-align:  start;
}

.page-form-wr{
  display: flex;
  flex-direction:  column-reverse;
  gap: 19px;
}

.page-form-i{
  display: flex;
  flex-direction:  column-reverse;
  gap: 19px;
}

.page-form-item input,
.page-form-item textarea{
  width: 100%;
  background-color: #fff;
  padding: 9px  19px;
  border-radius:  1px;
  border:  2px dotted #7d7c7c;
  color: #E07250;
}

.page-form-item input:focus-visible,
.page-form-item textarea:focus-visible{
    border: 2px dotted #E07250;
    outline: none;
}
.page-form-item{
  height: 100%;
}

.page-form-checkbox{
  display: flex;
  gap: 9px;
  margin-top: 19px;
}

.related-list{
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
}

.related-item{
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  background-color: #fff;
  border-radius: 1px;
}

.related-item > div{
  flex: 1;
}

.page-related-img-box{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:  19px;
  flex: 1;
}

.page-related-img-box img{
 
  width: 100%;
  height: 224px;
  object-fit: contain;
}

.related-img{
  transition: 0.5s ease-out;
}

.related-img:hover,
.related-img:focus{
  opacity:0.3;
  transform: scale(1.02);
}

.related-descr-box{
  padding: 19px;
  text-align: center;
}

.related-title{
  color: #E07250;
  margin-bottom: 19px;
  transition: 0.5s ease-out;
  font-size: 18px;
  font-weight:400;
}

.related-title:hover,
.related-title:focus{
  transform: scale(1.03);
}

.comment-item{
  background-color: #fff;
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
}

.comment-desc{
  flex: 3;
}

.comment-img{
  flex: 1; 
  width: 224px;
  margin: 0 auto;

}

.comment-img img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.comment-desc{
  display: flex;
  flex-direction: column-reverse;
  padding: 19px;
  align-items: center;
  justify-content: center;
}

.comment-text{
  font-style: italic;
  margin-bottom: 19px;
  margin-top: 19px;
  text-align: center;
}

.comment-author{
  color: #E07250;
}

.comment-prof{
  color: #666;
  font-size: 13px;
}

.slick-list{
  height: fit-content;
}

.com-form-name-wr{
  display: flex;
  flex-direction: column-reverse;;
  gap: 19px;
  margin-bottom: 19px;
}

.com-form-box{
  flex: 1;
}

.com-form-box input,
.com-form-box textarea{
  width: 100%;
  padding: 9px 19px;
  border: none;
  outline: none;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  border-radius: 0px;
}

.contact-img-wr{
  display: flex;
  flex-direction: column-reverse;
  gap:  19px;
  margin-bottom: 24px;
}

.contact-img-wr > div{
  flex: 1;
}

.contact-img{
    display: flex;
  align-items: center;
  justify-content: center;
}


.contact{
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
  justify-content: center;
}


.contact-wr{
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
}

.contact-item{
  flex-wrap: wrap;
  padding: 19px;
  border-radius:  1px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  min-height: 119px;
}

.contact-name{
  flex: 0.5;
}

.contact-text{
  font-weight: 400;
  color: #E07250;
  flex: 1;
}

.contact-item svg{
  width: 36px;
  height: 36px;
}

.contact-img img{
    animation: contact-scale 10s ease-in infinite;
    position: relative;
    z-index: -1;
}

.map iframe{
  margin-bottom: 20px;
}


@keyframes contact-scale {
    0% {
       transform: scale(1);
    }
    25% {
       transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    75% {
          transform: scale(0.9);
    }
      100% {
          transform: scale(1);
    }
}

@media (min-width: 480px){
.contact-me-wr{
  flex-direction:  row;
}

.slider-item img{
    height: 224px;
}

}



@media (max-width: 575px){
button {
  width: auto !important;
}
.main-img-box img,.page-img-box img,.page-related-img-box img{
  width: 100% !important;
  height: auto !important;
}
}

@media (max-width: 767px){


.slider-date-box{
  display: none;
 }
 .main-item{
  flex-direction: column-reverse !important;
 }

.slick-prev,
.slick-next{
  display: none !important;
}

.pop-wpaz{
  gap: 19px !important;
}

.pop-item{
  flex-direction: column !important;
}

.pop-desc{
  padding: 19px !important;
}

.comment-img{
  height: 224px;
  padding: 19px;
}


}




@media (min-width: 768px){

.poliFoot-wr{
  flex-direction: row;
}

.footer-text{
  flex-direction: row;
  gap:9px;
}

.slider-wrapper{
  flex-direction: row;
}

.slider-it img{
  height: 500px;
}

.slider-box{
  flex: 2;
}

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

body > section.section.main > div > ul.main-list-second > li:nth-child(1){
  flex-direction: row-reverse;
}

body > section.section.main > div > ul.main-list-second > li:nth-child(2){
  flex-direction: row;
}

.main-list-second .main-img{
  width: 100%;
  height: 400px;
}

.main-item{
  flex-direction: row;
}

.page-form-wr{
  flex-direction: row;
}

.page-form-i,
.page-form-ta{
  flex: 1;
}

.page-form-ta textarea{
  height: 100%;
}

.related-list{
  flex-direction: row;
}

.subscribe-box{
  flex-direction:   column-reverse;
}

.newsletter-form {
  width: 100%;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border-radius: 0px;
  height: 51px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 0 : 24px rgba(23,23,23,.06);
}

.newsletter-input{
  box-shadow: none;
  margin-bottom: 0;
}

.pop-wpaz{
  flex-direction:  column;
}
.comment-item{
  flex-direction: row;
}

.com-form-name-wr{
  flex-direction: row;
}

.contact-img-wr{
  flex-direction: row;
}


}




@media (max-width: 991px){
  .nav-item{
  color: #060606;
}

 .offcanvas-top, 
 .catalog{
  display: none;
 }

 .offcanvas-body{
  flex-direction: column;
 }

 .contact-me-box{
  justify-content: center;
  padding-top:  19px;
  padding-bottom:  19px;
 }
}




@media (min-width: 992px){
    .nav-item{
  color: #fff;
}

.wrapper{
  flex-direction:  row;
}

.sidebar{
  flex: 1;
}

.content{
  flex: 3;
}

.gallery-wrapper{
  display: flex;
  flex-direction: row;
}

.pages-nav{
  display: none;
}

.header-logo{
  padding: 50px 0;
}

.header-logo-title{
  font-size: 36px;
}

.pages-link{
  background-color: #fff;
}


.navbar-nav{
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap:  68px;
  align-items: center;
}

.navbar-expand-lg .offcanvas .offcanvas-body {
  justify-content: space-between;
}



.navbar-expand-lg .offcanvas .offcanvas-body {
  flex-direction: row;
}
}


@media (min-width: 1200px){
.subscribe-box{
  flex-direction:  row;
}
}