@font-face {
    font-family:Giloy-bold;
    src: url('../fonts/share_with_li/Gilroy-Bold.ttf') ;
  }
  @font-face {
    font-family:Giloy-medium;
    src: url('../fonts/share_with_li/Gilroy-Medium.ttf');
  }
  @font-face {
    font-family:philosopher-bold;
    src: url('../fonts/share_with_li/Philosopher-Bold.ttf');
    /* src: url({% static 'fonts/Philosopher-Bold.ttf' %}); */
  }
  body{
      margin:0px;
      padding: 0px;
  }
  .share-with-li-container h3{
    font-weight: 500 !important;
  }
  .back-image{
  width: 100%;
  height: 442px;
  background-color:#9e8eeb;
  background-size: cover;
  position: relative;  
  }
  
  .share-with-li-container{
    margin-top: -100px;
  }
  .detail-form{
      background-color: #fff;
      padding:30px 10px 30px 10px !important;
      height: auto;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      border-radius: 20px;
      position: relative;
      top:124px;
  }
  .detail-form .form-group{
    margin-bottom: 0px !important;
  }
  .detail-form .form-group label{
      font-family: Giloy-medium;
      font-size: 22px;
      color: #693807;
  }
  .detail-form .form-check label{
    font-family: Giloy-medium;
    font-size: 22px;
    color: #693807;
  }
   .detail-form .form-select {
    background: #f3f3f5 !important;
    appearance: auto;
    padding:7px;
    color: #693807  !important;
  } 
  .detail-form .form-group .form-select:focus{
    box-shadow:none !important;
  }
  .detail-form .form-group input{
      background: #f3f3f5;
      color:#693807;
      font-size: 18px;
      font-family: Giloy-medium;
  }
  .detail-form .form-group textarea{
    background: #f3f3f5;
    color:#693807;
    font-size: 18px;
    height: 100px;
    font-family: Giloy-medium;
  }
  .detail-form .form-group input:focus{
    box-shadow: none !important;
  }
  .detail-form .title{
      position: absolute;
      top:-20px;
      left: 36px;
      padding: 10px 30px 9px 30px;
      background:#f5BD60; 
      border-radius: 10px;  
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .detail-form .title h6{
    color:white;
    font-size: 24px;
    font-family: philosopher-bold;
  }
  .detail-form .form-group .submit{
      font-size: 24px;
      font-family: Giloy-medium;
      border: none;
      padding: 3px 20px 3px 20px;
      border-radius: 10px;
      color:#ffffff;
      text-transform: capitalize; 
      background:#f5BD60;
      border-radius: 20px;
  }
  .detail-form .form-group .submit:hover{
    background:#2ee8f0;
  }
  .title h6{
      color: white;
      font-size:16px;
      font-weight: 500;
      text-transform: capitalize;
  }
  .mark-image{
      padding-top: 127px;   
  }
  .share_with_li{
  padding-top: 15rem;  
  }
  .share_with_li h4{
      margin-left: -50px;
      color: white;
      font-size: 42px;
      font-family: philosopher-bold;  
  }
  .first-paragraph{
      padding-top: 10rem;
  }
  .first-paragraph h3{
    font-family: Giloy-bold;
    font-size: 30px !important;
    color: #693807;
    font-weight: 500;
  }
  .first-paragraph p{
    font-size: 22px;
    font-family: Giloy-medium;
    color: #693807;
    line-height:28px;
  }
  .bg-image1{
    /* background-image: url('/home/static/share-with-li/Untitled-4.png'); */
   height: 500px;
    background-repeat: no-repeat;
  }
  .bg-image2{
    background-image: url('blue\ bg.png');
    background-repeat: no-repeat;
    background-position: right bottom;
  }
  .blog-slider__item.swiper-slide{
    overflow: visible !important;
    height: unset !important;
  }
  .main{
    width: 100%;
    height:380px  !important;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: #fff; 
    border-radius: 10px;
  }
  .main img{
    border-radius: 10px;
  }
  .bg-image2 .overlay::before,.bg-image2 .overlay::after{
    background-color: unset !important;
  }
  .bg-image2 .overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100% !important;
    width: 100% !important;
    opacity: 0;
    transition: .5s ease;
    background-color: #f5BD60 !important;
  }
  .bg-image2 .hover-image{
    display: none;
  }
  .bg-image2 .hover-image{
    position: absolute !important;
    bottom: 0px !important;
    right: 0px;
  }
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
  }
  .text {
    display: none;
  }
  .text h3{
    font-family: Giloy-bold;
    font-size: 30px;
    color: #fff;
    margin-bottom: 0px !important;
  }
  .text p{
    font-family: Giloy-medium;
    font-size: 18px;
    color: #fff; 
  }
  .main:hover .overlay {
   opacity: 0.8;
   border-radius: 10px !important;
  }
  .main:hover .main{
    border-radius: 10px !important;
  }
  .main:hover .text{
    display: block !important;
  }
  .main:hover .hover-image{
    display: block;
  }
  .bg-slider{
    width: 100%;
    height: auto;
    background: #fDFBf3;
    margin-top: 3rem !important;
 
  }
  .blog-slider {
    width: 100%;
    position: relative;
    /* max-width: 800px; */
    margin-top: 3rem;
    margin-bottom: 3rem;
    background:#f5BD60;
    padding:0px;
    border-radius: 25px;
    height: 300px !important;
    transition: all 0.3s;
  }
  .view_all button{
    padding: 6px 25px;
    background-color: #f5BD60;
    border: 1px solid white;
    outline: none;
    border-radius: 50px;
    text-transform: capitalize;
   font-family: Giloy-medium;
   font-size: 24px;
   color: white;
  }
  .view_all button:hover{
    background: #2ee8f0;
  }
  @media screen and (max-width: 992px) {
    .blog-slider {
      max-width: 680px;
      height: 400px;
    }
  }
  @media screen and (max-height: 500px) and (min-width: 992px) {
    .blog-slider {
      height: 350px;
    }
  }
  .blog-slider__item {
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 768px) {
    .blog-slider__item {
      flex-direction: column;
    }
    .blog-slider{
      min-height: 470px !important;
    }
  }
   .blog-slider__item.swiper-slide-active .blog-slider__img img {
    opacity: 1;
    transition-delay: 0.3s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > * {
    opacity: 1;
    transform: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
    transition-delay: 0.3s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
    transition-delay: 0.4s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
    transition-delay: 0.5s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
    transition-delay: 0.6s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
    transition-delay: 0.7s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
    transition-delay: 0.8s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
    transition-delay: 0.9s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
    transition-delay: 1s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
    transition-delay: 1.1s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
    transition-delay: 1.2s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
    transition-delay: 1.3s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
    transition-delay: 1.4s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
    transition-delay: 1.5s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
    transition-delay: 1.6s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
    transition-delay: 1.7s;
  } 
  .blog-slider__img {
    width: 220px;
    flex-shrink: 0;
    height: 220px;
    border-radius: 20px;
    transform: translateX(-60px);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: #fff;
   
  }
  .blog-slider__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    border-radius: 20px;
    transition: all 0.3s;
  }
  .blog-slider__code{
    font-family: Giloy-medium;
    font-size: 18px;
    color: white;
  }
  .blog-slider__text p{
    color: white;
  }
  .blog-slider__text{
    font-family: Giloy-medium;
    font-size: 18px;
    color: white !important;
  }
  .blog-slider__title {
    font-size: 36px;
    font-family: Giloy-bold;
    color: #fff;
   }
   .blog-slider__button {
    display: inline-flex;
    background:#fff;
    padding: 6px 15px;
    font-size: 20px;
    font-family: Giloy-medium;
    border-radius: 50px;
    color: #693807;
    text-decoration: none;
    justify-content: center;
    text-transform: capitalize;
    text-align: center;
    letter-spacing: 1px;
    text-transform: capitalize !important;
  }
  .blog-slider__button:hover{
    background: #2ee8f0;
    text-decoration: none !important;
    color: white;
    /* border: 1px solid #2ee8f0; */
    transition: none !important;
  }
  @media screen and (max-width: 768px) {
    .blog-slider__img {
      transform: translateY(-50%);
      width: 90%;
    }
  }
  @media screen and (max-width: 576px) {
    .blog-slider__img {
      width: 95%;
    }
  }
  @media screen and (max-height: 500px) and (min-width: 992px) {
    .blog-slider__img {
      height: 270px;
    }
  }
  .blog-slider__content {
    padding-right: 25px;
    margin-left: -25px;
  }
  @media screen and (max-width: 768px) {
    .blog-slider__content {
      margin-top: -80px;
      text-align: center;
      padding: 0 30px;
    }
  }
  .blog-slider__content > * {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.4s;
  }
  .blog-slider__code {
    margin-bottom: 15px;
    display: block;
  }
  .blog-slider__text {
    margin-bottom: 30px;
    line-height: 1.5em;
  }
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 5px 5px !important;
  }
  .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
  }
  .blog-slider__pagination {
    position: absolute;
    z-index: 21;
    right: 20px;
    width: 11px !important;
    text-align: center;
    left: auto !important;
    top: 50% !important; 
    bottom: auto !important;
    transform: translateY(-50%);
  }
  @media screen and (max-width: 768px) {
    .blog-slider__pagination {
      transform: translateX(-50%);
      left: 47% !important;
      bottom: -200px !important;
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center; 
    }
    .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 5px 3px !important;
    }
  }
  @media screen and (max-width: 768px) {
    .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0px 5px;
    }
  }
  .blog-slider__pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 10px;
    background:rgb(255, 255, 255);
    opacity:1;
    margin: 10px;
    transition: all 0.3s;
  }
  .blog-slider__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background:rgb(85, 80, 80);
    height: 30px;
    box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
  }
  @media screen and (max-width: 768px) {
    .blog-slider__pagination .swiper-pagination-bullet-active {
      height: 11px;
      width: 30px;
    }
  }
  @media screen and (max-width:1200px) {
    .detail-form .title {
      left:63px;
    }
    .main{
      height: 243px !important;
    }
    .text h3{
      font-size: 22px;
    }
    .text p{
      font-size: 16px;
    }
    .detail-form .title h6{
      font-size: 24px;
    }
    .share_with_li h4 {
      font-size: 37px;
      padding-left: 0px;
  }
  .detail-form {
    top: 100px;
  }
  .share_with_li {
    padding-top: 10rem;
  }
  .detail-form .form-group label{
    font-size: 16px;
  }
  .detail-form .form-check label{
    font-size: 16px;
  }
  .detail-form .form-group input{
    font-size: 16px;
  }
  .mark-image{
    padding-top: 58px !important;
  }
  .first-paragraph h3 {
    font-size: 30px;
  }
  .first-paragraph p {
    font-size: 18px;
    line-height: 24px;
  }
  }
  @media screen and (max-width:1200px) {
    .detail-form .title{
      left: 60px;
    }
  }
  @media screen and (max-width:1920px) and (min-width:1575px) {
    .main{
      height:480px;
    }
    .detail-form{
     top:70px;
      border-radius: 32px;
      padding:20px; 
  }
  .blog-slider__code {
    
  margin-bottom: 10px !important;
}
  .bg-slider{
    margin-top: 7rem !important;
  }
  .bg-image1{
    height: auto;
    background-size: contain;
  }
  .first-paragraph p{
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 33px;
  }
    .main-container{
      max-width:1600px !important;
    }
    .left-box{
      max-width: 1600px !important;
    }
    .first-paragraph{
  padding-top: 15rem;
    }
    .detail-form .form-group label{
      font-size: 22px !important;
  }
  .detail-form .form-check label{
    font-size: 22px !important; 
  }
  .detail-form .form-group input{
    outline: none !important;
    box-shadow: none !important;
    padding: 15px !important;
    font-size: 20px !important;
    border-radius: 8px !important;
    border: none;
   
  }
  .detail-form .form-group input::placeholder{
    color: #ae957e !important;
  }
  .detail-form .form-group textarea::placeholder{
    color: #ae957e !important;
  }
  .detail-form .form-group .form-select{
    padding: 17px !important;
    border: none;
    border-radius: 8px;
    font-size: 20px !important;
    color:#693807 !important;
    background: #f3f3f5 !important;
    appearance: auto;
    color: #693807  !important;
  }
  .detail-form .form-group input:focus{
   outline: none !important;
  }
    .mark-image{
      padding-top:16px !important;
    }
    .detail-form .form-group input ,textarea{
      font-size: 20px !important;
      border: none !important;
      border-radius:8px !important;
    }
    .detail-form .form-group .form-select{
      font-size: 14px;
    }
    
  .detail-form .title{
    left:143px !important;
    padding: 15px 30px 15px 30px;
    top: -32px;
  }
  .blog-slider {
    height: 400px !important;
    }
    .blog-slider__img {
      height: 300px;
      width:300px;
      background-color: #fff;
    }
   
  }
  @media screen and (max-width:1574px) and (min-width:1320px) {
    .back-image{
      height: 310px !important;
    }
    .main-container{
      max-width: unset !important;
    }
    .left-box{
      max-width: unset !important;
    }
    .detail-form{
      top:70px;
       border-radius: 32px;
       padding:20px;
   }
    .share_with_li h4 {
      margin-left: -27px;
      font-size: 30px !important;
  }
  .detail-form .form-group .submit{
    padding: 3px 30px 3px 30px;
  }
  .detail-form{
    top: 74px;
  }
  .detail-form .form-group input::placeholder{
    color: #ae957e !important;
  }
  .detail-form .form-group textarea::placeholder{
    color: #ae957e !important;
  }
  .detail-form .form-group label{
    font-size: 18px;
  }
  .detail-form .form-group input{
    font-size: 14px !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 15px;
    border-radius: 8px !important;
    border: none;
  }
  .detail-form .form-group ,textarea{
    font-size: 14px !important;
  }
  .detail-form .form-group .form-select{
    font-size: 14px;
    padding: 14px !important;
    border: none;
    border-radius: 8px;
    font-size: 18px !important;
    color:#693807 !important;
    background: #f3f3f5 !important;
    appearance: auto;
  
    color: #693807  !important;
  }
  .detail-form .form-group .submit{
     font-size: 18px;
     padding: 3px 15px 0px 15px;
    
  }
  .first-paragraph h3{
    font-size:30px !important;
  }
  .first-paragraph p{
    font-size: 16px !important;
  }
  .detail-form .form-check label{
    font-size: 18px;
  }
  .detail-form .title h6 {
    font-size: 22px !important;
  }
  .detail-form .title {
    left: 110px !important;
  }
    .mark-image{
      padding-top: 10px !important;
    }
    .mark-image img{
      width: 100%;
      height: 300px !important;
    }
    .share_with_li {
      padding-top: 9rem;
  }
  .blog-slider__title {
    font-size: 26px;
  
  }
  .blog-slider__code{
    font-size: 16px;
    margin-bottom: 10px !important;
  }
  .blog-slider__text {
    font-size: 16px;
    line-height: 22px;
    padding-right: 33px;
  
  }
  .blog-slider__button {
    padding: 6px 15px;
    font-size: 16px;
  }
  .share-story h4 {
    font-size: 30px !important;
    text-transform: capitalize;
  }
  .main {
    height: 320px !important;
  }
  .text h3 { 
    font-size:26px;
  
  }
  .text p{
    font-size: 16px;
  }
  .bg-image2 {
    background-size: 73% 76%;
  }
  .view_all button {
    padding: 3px 15px 3px 15px !important;
    font-size: 18px !important;
  }
  } 
  @media screen  and (max-width:1320px) and (min-width:1200px){
    .back-image{
      height: 310px !important;
    }
    .share_with_li h4 {
      margin-left: -27px;
      font-size: 30px !important;
  }
  .detail-form .form-group label{
    font-size: 18px;
  }
  .detail-form .form-check label{
  font-size: 18px; 
  }
  .detail-form .form-group input{
  outline: none !important;
  box-shadow: none !important;
  padding: 8px;
  border-radius: 8px !important;
  border: none;
  }
  .detail-form .form-group input::placeholder{
  color: #ae957e !important;
  }
  .detail-form .form-group textarea::placeholder{
  color: #ae957e !important;
  }
  
  .detail-form .form-group .form-select{
  padding: 12px !important;
  border: none;
  border-radius: 8px;
  color:#693807 !important;
  
  background: #f3f3f5 !important;
  appearance: auto;
  color: #693807  !important;
  }
  .detail-form .form-group input:focus{
  outline: none !important;
  }
  .mark-image{
    padding-top:13px !important;
  }
  .detail-form .form-group input ,textarea{
    font-size: 16px !important;
    border: none !important;
    border-radius:8px !important;
  }
  .detail-form .form-group .form-select{
    font-size: 14px;
  }
  .detail-form .title{
  padding: 15px 30px 10px 30px;
  top: -32px;
  }
  .detail-form{
    top: 74px;
  }
  .detail-form .form-group .submit{
     font-size: 18px;
     padding: 3px 15px 0px 15px;
  }
  .first-paragraph h3{
    font-size:30px !important;
  }
  .first-paragraph p{
    font-size: 16px;
  }
  .detail-form .title h6 {
    font-size: 22px !important;
  }
  
  .detail-form .title {
    left: 60px;
  }
    .mark-image{
      padding-top: 7px;
    }
    .share_with_li {
      padding-top: 9rem;
  }
  .blog-slider__title {
    font-size: 26px;
  
  }
  .blog-slider__code{
    font-size: 16px;
    margin-bottom: 0px !important;
  }
  .blog-slider__text {
    font-size: 16px;
    line-height: 22px;
    padding-right: 33px;
  
  }
  .blog-slider__button {
    padding: 6px 15px;
    font-size: 16px;
  }
  .share-story h4 {
    font-size: 30px !important;
    text-transform: capitalize;
  }
  .main {
    height: 320px !important;
  }
  .text h3 { 
    font-size:26px;
  
  }
  .text p{
    font-size: 16px;
  }
  .bg-image2 {
    background-size: 73% 76%;
  }
  .view_all button {
    padding: 3px 15px 3px 15px !important;
    font-size: 18px !important;
  }
  }
  @media screen and (max-width:1200px) {
    .back-image{
      height: 310px !important;
    }
    .blog-slider__code {
      margin-bottom: 10px !important;
  }
  .detail-form .form-group{
    margin-bottom: 0px;
  }
      .bg-slider{
      margin-top: 13rem !important;
    }
    .detail-form .form-group .submit {
      font-size: 18px;
      padding: 3px 15px 0px 15px;
  }
  
  .detail-form .form-check label{
    font-size: 18px; 
    }
    .detail-form .form-group input{
    outline: none !important;
    box-shadow: none !important;
    padding: 8px;
    border-radius: 8px !important;
    border: none;
    }
    .detail-form .form-group input::placeholder{
    color: #ae957e !important;
    }
    .detail-form .form-group textarea::placeholder{
    color: #ae957e !important;
    }
    .detail-form .form-group .form-select{
    padding: 12px !important;
    border: none;
    border-radius: 8px;
    color:#693807 !important;
    
    background: #f3f3f5 !important;
    appearance: auto;
    color: #693807  !important;
    }
    .mark-image
    {
      padding-top:63px !important;
    }
    .share_with_li {
      padding-top: 11rem;
  }
  .detail-form .title h6 {
    font-size: 22px;
  }
  .blog-slider__title {
    font-size: 26px;
  }
  .blog-slider__text,.blog-slider__code {
    font-size: 16px;
  }
  .blog-slider__button {
    padding: 6px 15px;
    font-size: 16px;
  }
  .share-story h4 {
   
    font-size: 30px !important;
  }
  .detail-form .title {
    left: 27px !important;
  }
  
  .share_with_li h4 {
      font-size: 30px;
   
  }
  .bg-image1{
    height: 400px;
  }
  }
  @media screen and (max-width:992px) {
     .detail-form .form-group{
      margin-bottom: 0px !important;
     }
    .detail-form .title h6 {
      font-size: 20px;
  }
  .mark-image {
    padding-top: 95px !important;
  }
  .share_with_li h4 {
    font-size: 24px;
   margin-left: -47px;
  }
  .main-container{
    max-width: 850px !important;
  }
  .detail-form .title {
    left: 14px !important;
  } 
  }
  .share-story{
    margin-top: 3rem;
  }
  .share-story h4{
    font-family: philosopher-bold;
    font-size: 40px;
    color: #693807;
    text-transform: capitalize;
  }
  .view_all button{
    font-size: 18px;
    padding: 3px 15px 0px 15px;
   
  }
  @media screen and (max-width:859px) and (min-width:840px)  {
    .mark-image {
      padding-top: 96px !important;
  }
  .detail-form .form-check label{
    font-size: 18px; 
    }
    .detail-form .form-group input{
    outline: none !important;
    box-shadow: none !important;
    padding: 8px;
    border-radius: 8px !important;
    border: none;
    }
    .detail-form .form-group input::placeholder{
    color: #ae957e !important;
    }
    .detail-form .form-group textarea::placeholder{
    color: #ae957e !important;
    }
    .detail-form .form-group .form-select{
    padding: 12px !important;
    border: none;
    border-radius: 8px;
    color:#693807 !important;
    background: #f3f3f5 !important;
    appearance: auto;
    color: #693807  !important;
    }
  .detail-form .title {
    left: 50px;
  }
  .top-container{
    margin:0px !important;
  }
  }
  @media screen and (max-width:840px) and (min-width:824px) {
    .mark-image {
      padding-top: 96px !important;
  }
  .share_with_li {
    padding-top: 10rem;
  }
  .bg-slider{
    margin-top: 8rem;
  }
  .detail-form .title {
    left: 7px !important;
  }
  }
  @media screen and (max-width:823px) and (min-width:800px){
    .mark-image{
      padding-top: 102px !important;
    }
    .detail-form .form-check label{
      font-size: 18px; 
      }
    .detail-form .form-group input{
    outline: none !important;
    box-shadow: none !important;
    padding: 8px;
    border-radius: 8px !important;
    border: none;
    }
    .detail-form .form-group input::placeholder{
    color: #ae957e !important;
    }
    .detail-form .form-group textarea::placeholder{
    color: #ae957e !important;
    }
    .detail-form .form-group .form-select{
    padding: 12px !important;
    border: none;
    border-radius: 8px;
    color:#693807 !important;
    
    background: #f3f3f5 !important;
    appearance: auto;
    color: #693807  !important;
    }
  .detail-form .title {
    left: 20px !important;
    padding: 10px 10px 10px 10px;
  }
  }
  @media screen and (max-width:799px) and (min-width:768px){
    .detail-form .title{
      left: 30px;
      padding: 10px 20px 10px 20px !important;
    }
    .detail-form .title h6{ 
      font-size: 19px;
    }
    
    .mark-image{
      padding-top: 117px !important;
    }
    .detail-form .form-check label{
      font-size: 18px; 
      
      }
      .detail-form .form-group input{
      outline: none !important;
      box-shadow: none !important;
      padding: 8px;
      border-radius: 8px !important;
      border: none;
      
      }
      .detail-form .form-group input::placeholder{
      color: #ae957e !important;
      }
      .detail-form .form-group textarea::placeholder{
      color: #ae957e !important;
      }
      
      .detail-form .form-group .form-select{
      padding: 12px !important;
      border: none;
      border-radius: 8px;
      color:#693807 !important;
      
      background: #f3f3f5 !important;
      appearance: auto;
      color: #693807  !important;
      }
  }
  @media screen and (max-width:767px) {
    .detail-form .form-group label{
      font-size: 18px;
    }

   
  .left-container {
      margin-top: 36rem !important;
  }
    .detail-form .form-check label{
    font-size: 18px; 
    
    }
    .detail-form .form-group input{
    outline: none !important;
    box-shadow: none !important;
    padding: 8px;
    border-radius: 8px !important;
    border: none;
    
    }
    .detail-form .form-group input::placeholder{
    color: #ae957e !important;
    }
    .detail-form .form-group textarea::placeholder{
    color: #ae957e !important;
    }
    
    .detail-form .form-group .form-select{
    padding: 12px !important;
    border: none;
    border-radius: 8px;
    color:#693807 !important;
    background: #f3f3f5 !important;
    appearance: auto;
    color: #693807  !important;
    }
    .back-image {
      width: 100%;
      height: 550px !important;
  }
  .mark-image{
    padding-top: 0px !important;
  }
  .first-paragraph{
    text-align: center;
    margin-top: 50px !important;
  }
  .first-paragraph h3 {
    font-size: 26px;
  }
  .blog-slider__title {
    font-size: 26px !important;
  }
  .share-story h4 {
    font-size: 26px;
  }
  .view_all button{
    padding: 3px 20px 3px 20px;
    font-size: 17px;
  }
  .blog-slider__text {
  font-size: 16px;
  
  padding-left: 20px;
  }
  .blog-slider__code{
    font-size: 16px;
  }
  .blog-slider__button{
    padding: 6px 15px;
    font-size: 17px;
  }
  .first-paragraph p{
    font-size:18px;
  }
  .main-container{
    max-width:unset !important;
  }
    .bg-slider{
      margin-top: 15rem !important;
    }
    .back-image{
      height: auto !important;
    }
  .bg-slider {
    margin-top: 8rem !important;
  }
  .top-container{
    padding: 20px !important;
  }
    .detail-form{
      top: -21px !important;
    }
    .share_with_li{
      padding-top: 40px;
      padding-bottom: 10px;
    }
    .share_with_li h4{
      margin-left: 0px !important;
    }
    
    .detail-form .title {
        left: 211px !important;
    
  }
  .mark-image {
    padding-top: 0px;
    padding-bottom: 20px;
  }
  .mark-image img{
    width: 300px !important;
    height:260px !important;
  }
  .detail-form{
    margin: 0px !important;
    width:100%;
  }
  .detail-form .form-group .submit {
    font-size: 22px;
  }
  .back-image {
    height: 604px !important;
  }
  .main{
    height:300px !important;
  }
  }
  @media screen and (max-width:767px) and (min-width:550px) {
    .left-container{
      margin-top: 28rem !important;
    }
    
  }
  @media screen and (max-width:550px) and (min-width:320px) {
    .left-container{
      margin-top: 27rem !important;
    }
    
  }
  @media screen and (max-width:714px) and  (min-width:700px) {
    .detail-form .title {
      left: 175px !important;
  } 
  }
  @media screen and (max-width:700px) and (min-width:660px) {
    .detail-form .title {
      left: 170px !important;
  }
  }
  @media screen and (max-width:660px) and (min-width:615px) { 
    .detail-form .title{
      left: 145px !important;
    }
  }
  @media screen and (max-width:615px) and (min-width:600px) {
    .detail-form .title{
      left: 130px !important;
    }
  }
  @media screen and (max-width:600px) and (min-width:575px) {
    .detail-form .title{
      left: 126px !important;
    }
  }
  @media screen and (max-width:575px) and (min-width:550px) {
    .detail-form .title{
      left:110px !important;
    }
  }
  @media screen and (max-width:550px) and (min-width:520px) {
    .detail-form .title{
      left: 100px !important;
    }
    .detail-form .title{
      padding: 10px 20px 10px 20px !important;
    }
  
  }
  @media screen and (max-width:520px) and (min-width:505px) {
    .detail-form .title{
      left: 90px !important;
    }
  }
  @media screen and (max-width:505px) and (min-width:475px) {
    .detail-form .title{
      left: 70px !important;
    }
  }
  @media screen and (max-width:475px) and (min-width:455px) {
    .detail-form .title{
      left: 60px !important;
    }
   
  }
  @media screen and (max-width:455px) and (min-width:440px) {
    .detail-form .title{
      left: 50px !important;
    }
  }
  @media screen and (max-width:439px) and (min-width:430px) {
  .detail-form .title h6{
    font-size: 18px;
  }
  
  .detail-form .title {
   left:60px !important;
  }
  }
  @media screen and (max-width:429px) and (min-width:410px) {
    .detail-form .title h6{
      font-size: 18px;
    }
    .detail-form .title {
     left:50px !important;
    }
  
    }
  @media screen and (max-width:409px) and (min-width:399px) {
      .detail-form .title h6{
        font-size: 18px;
      }
      .detail-form .title {
       left: 43px !important;
      }
     
  }
  @media screen and (max-width:399px) and (min-width:375px) {
    .detail-form .title h6{
      font-size: 16px;
    }
    .detail-form .title {
     left: 52px !important;
    }
  }
  @media screen and (max-width:375px) and (min-width:365px) {
    .detail-form .title h6{
      font-size: 16px;
    }
    .detail-form{
      margin: 0px !important;
    }
    .detail-form .title {
     left: 38px !important;
    }
  }
  @media screen and (max-width:364px) and (min-width:356px) {
    .main-container{
      padding: 0px !important;
    }
    .detail-form .title h6{
      font-size: 16px;
  
    }
    .detail-form .title{
      left: 45px !important;
    }
    
  }
  @media screen and (max-width:355px) and (min-width:345px) {
    .main-container{
      padding: 0px !important;
    }
    .detail-form .title h6{
      font-size: 16px;
  
    }
    .detail-form .title{
      left: 37px !important;
    }
    
  }
  @media screen and (max-width:345px) and (min-width:330px) {
    .main-container{
      padding: 0px !important;
    }
    .detail-form .title h6{
      font-size: 16px;
    }
    .detail-form .title{
      left: 35px !important;
    } 
  }
  @media screen and (max-width:330px) and (min-width:320px) {
    .main-container{
      padding: 0px !important;
    }
    .detail-form .title h6{
      font-size: 16px;
  
    }
    .detail-form .title{
      left: 27px !important;
    }
    
  }
  @media screen and (max-width:538px) and (min-width:495px) {
   
    .mark-image{
      margin: auto;
    }
    .mark-image img{
      width: 200px !important;
      height: 200px !important;
    }
    .bg-slider {
      margin-top: 9rem !important;
  }
  }
  @media screen and (max-width:400px)  and (min-width:320px) {
    .blog-slider{
      min-height: 560px !important;
    }
    
  }
    @media screen and (max-width:500px) and (min-width:320px) {
     
  
      .blog-slider__title {
        font-size: 25px;
    }
    .blog-slider__text {
      margin-bottom: 26px;
  }
  .blog-slider__button{
    font-size: 17px !important;
  }
  .blog-slider__code{
    font-size: 14px;
  }
  .blog-slider__text {
    font-size: 14px;
  }
  .first-paragraph{
    text-align: center;
  }
  .first-paragraph h3{
    font-size: 26px;
  }
  .first-paragraph p{
    font-size: 14px;
  }
  .first-paragraph{
    margin-top: 35px !important;
  }
  .share-story h4{
    font-size: 26px;
  }
 .detail-form{
  padding: 30px 10px 30px 10px !important;
 }
 
  }
  .main-btn {
    font-size: 12px;
    line-height: 15px;
    color: #ffffff;
    font-weight: 700;
    overflow: hidden;
    background-color: #fc9a36;
    border-radius: 4px;
    padding: 15px 46px !important;
}
@media screen and (max-width: 1440px) and (min-width: 1025px){
	.share_with_li h4 {
		margin-top: 30px;
	}
}