*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
@font-face {
  font-family: "Butler Bold";
  src: url(/assets-mbn/fonts/butler/Butler_Bold.woff);
}
@font-face {
  font-family: "Butler Black";
  src: url(/assets-mbn/fonts/butler/Butler_Black.woff);
}
@font-face {
  font-family: "Butler_ExtraBold";
  src: url(/assets-mbn/fonts/butler/Butler_ExtraBold.woff);
}
@font-face {
  font-family: "Butler Light";
  src: url(/assets-mbn/fonts/butler/Butler_Light.woff);
}
@font-face {
  font-family: "Butler_Medium";
  src: url(/assets-mbn/fonts/butler/Butler_Medium.woff);
}
@font-face {
  font-family: "Butler Regular";
  src: url(/assets-mbn/fonts/butler/Butler_Regular.woff);
}
@font-face {
  font-family: "Butler Ultra Light";
  src: url(/assets-mbn/fonts/butler/Butler_Light.woff);
}
@font-face {
  font-family: "Sohne-regular";
  src: url(/assets-mbn/fonts/sohne/TestSohne-Buch-BF663d89cd32e6a.otf);
}
.container{
    width: 100%;
    max-width: 1140px;
    margin: auto;
}
.parastyle p {

    font-family: "Sohne-regular";

    font-weight: 400;

    font-size: 32px;

    line-height: 42px;

    margin-bottom: 20px;

    color: #000;

}
 

.col-1 {
    flex: 8.33%;
    width: 100%;
    max-width: 8.33%;
  }
  .col-2 {
    flex: 16.66%;
    width: 100%;
    max-width: 16.66%;
  }
  .col-3 {
    flex: 25%;
    width: 100%;
    max-width: 25%;
  }
  .col-4 {
    flex: 33.3%;
    width: 100%;
    max-width: 33.3%;
  }
  .col-5 {
    flex: 41.66%;
    width: 100%;
    max-width: 41.66%;
  }
  .col-6 {
    flex: 50%;
    width: 100%;
    max-width: 50%;
  }
  .col-7 {
    flex: 58.33%;
    width: 100%;
    max-width: 58.33%;
  }
  .col-8 {
    flex: 66.66%;
    width: 100%;
    max-width: 66.66%;
  }
  .col-9 {
    flex: 75%;
    width: 100%;
    max-width: 75%;
  }
  .col-10 {
    flex: 83.33%;
    width: 100%;
    max-width: 83.33%;
  }
  .col-11 {
    flex: 91.66%;
    width: 100%;
    max-width: 91.66%;
  }
  .col-12 {
    flex: 100%;
    width: 100%;
    max-width: 100%;
  }
  .row {
    display: flex;
  }
  .dsply-blk{
      display: block;
  }
  .alin-cntr{
    align-items: center;
  }
  /* margin css */
  .mb-30{
    margin-bottom: 20px !important;
  }
  .mb-0{
margin-bottom: 0px !important;
  }
header {
    background-image: url(/assets-mbn/images/hdr-bg.avif);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1rem 0rem 10rem;
    background-position: bottom;
}
  .vector-img{
    width: 100%;
    max-width: 600px;
    display: block;
    margin: auto;
  }
 header h4 {
    font-family: "Butler Bold";
    font-weight: 600;
    font-size: 45px;
    text-align: center;
    margin-bottom: 18px;
    color: #fff;
}
header h2 {
    font-family: "Butler Regular";
    font-weight: 700;
    font-size: 68px;
    text-align: center;
    background: radial-gradient(23.4% 193.88% at 50% 50%, #FFB936 0%, #946100 100%);
    width: fit-content;
    margin: auto;
    padding: 10px 120px;
    color: #fff;
    margin-bottom: 20px;
}
header h6 {
    font-family: "Sohne-regular";
    font-weight: 400;
    font-size: 32px;
    line-height: 43px;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
}
  .brwn-txt{
    color:#946100 !important ;
  }
  .sec-1{
    padding-bottom: 80px;
  }
  .form-box{
    border: 1px solid #C29F5D;
    background-color:#F9F5E9 ;
    border-radius: 20px;
    padding: 30px 40px 24px;
  }
   .form-box h2{
    font-family: "Butler_Medium";
font-weight: 500;
font-size: 60px;
line-height: 75px;
text-align: center;
color:  #fff;
background-color:#A17E3E ;
border-radius: 20px;
width: 100%;
margin: auto;
padding: 20px 20px;
position: relative;
margin-bottom: 30px;
   }
 .form-box h2::before {
    content: "";
    background-image: url(/assets-mbn/images/star.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    height: 70px;
    width: 70px;
    left: 66px;
    top: 50px;
}
 .form-box h2::after{
    content: "";
    background-image: url(/assets-mbn/images/star.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    height: 70px;
    width: 70px;
    right: 66px;
    top: 50px;
}
.audiobook-img{
    width: 100%;
    max-width: 500px;
}
.labels{
font-family: "Sohne-regular";
font-weight: 500;
font-size: 28px;
color: #000;
margin-bottom: 15px;
}
.col-6 input {
    border: 1px solid #C29F5D;
    background-color: #fff;
    padding: 22px 15px 17px;
    border-radius: 10px;
    width: 100%;
    max-width: 900px;
    margin-bottom: 20px;
    font-size: 25px;
} 
.col-6 input::placeholder{
   font-family: "Sohne-regular";
font-weight: 400;
font-size: 24px;
color: #767676;
}
.btn {
    width: fit-content;
    margin: 30px 0px;
    display: block;
    padding: 13px 109px;
    background: linear-gradient(90deg, #F1A52E 0%, #F9F079 50%, #F1A52E 100%);
    box-shadow: 0px 4px 20px 0px #F2A932;
    border: 2px solid #FFFFFF;
    font-family: "Sohne-regular";
    font-weight: 700;
    font-size: 38px;
    text-align: center;
    color: #482F00;
    text-decoration: none;
    border-radius: 15px;
}
.form-box h6{
      font-family: "Sohne-regular";
font-weight: 400;
font-size: 20px;
line-height: 30px;
text-align: center;
color: #727272;
}
.ftr {
    background: radial-gradient(
    50% 64.53% at 50% 35.47%,
    #ffb936 0%,
    #946100 100%
  );
    text-align: center;
    padding: 30px 0px;
}
.rosegrail-wytlogo {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: auto;
  margin-bottom: 20px;
}
.ftr-lnk {
  color: #ffffff;
     font-family: "Sohne-regular";
  font-weight: 500;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 20px;
}
.ftr p {
     font-family: "Sohne-regular";
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
  margin: 15px;
  line-height: 29px;
}
.ftr-brdr {
  border-bottom: 1px solid white;
  border-top: 1px solid white;
}
.ftr-brdr-ryt {
  border-right: 1px solid white;
}
.fnt16 {
    font-size: 14px !important;
}
.ylw-txt {
  color: #ffd200 !important;
}
.fntweit600 {
  font-weight: 600 !important ;
}
.mb-30{
    margin-bottom: 30px !important;
}

@media(max-width: 1440px){
    header {
    padding: 1rem 0rem 8rem;
}
}

@media(max-width:1256px){
.parastyle p {
    font-family: "Sohne-regular";
    font-weight: 400;
    font-size: 31px;
    line-height: 43px;
    margin-bottom: 46px;
    color: #000;
}
.form-box h2 {
    font-size: 53px;
    line-height: 69px;
    padding: 20px 20px;
    margin-bottom: 30px;
}
.form-box h2::after {
    height: 70px;
    width: 70px;
    right: 77px;
    top: 50px;
}
.form-box h2::before {
    height: 70px;
    width: 70px;
   left: 77px;
    top: 50px;
}
}
@media(max-width:1140px){
.container{
   padding: 0px 20px;
}
header {
    padding: 1rem 0rem 6.5rem;
}
header h4 {
    font-size: 40px;
    margin-bottom: 18px;
}
header h2 {
    font-size: 54px;
    padding: 10px 120px;
    margin-bottom: 16px;
}
.btn {
    margin: 30px 0px;
    padding: 13px 99px;
    font-size: 36px;
}
header h6 {
    font-size: 27px;
    line-height: 39px;
    margin-bottom: 23px;
}

.audiobook-img {
    width: 100%;
    max-width: 430px;
}
.parastyle p {
    font-family: "Sohne-regular";
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 33px;
    color: #000;
}
.form-box h2 {
    font-size: 47px;
    line-height: 62px;
    padding: 10px 20px;
    margin-bottom: 30px;
}
}
@media(max-width:1024px){
    header h2 {
    font-size: 63px;
    padding: 10px 120px;
    margin-bottom: 25px;
}
header h4 {
    font-size: 44px;
    margin-bottom: 20px;
}
header h6 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 27px;
}

.parastyle p {
    font-size: 27px;
    line-height: 41px;
    margin-bottom: 39px;
}
.btn {
    margin: 30px 0px;
    padding: 13px 85px;
    font-size: 34px;
}
.col-6 input {
    padding: 16px 13px 16px;
    max-width: 900px;
    margin-bottom: 20px;
    font-size: 22px;
}
.audiobook-img {
    width: 100%;
    max-width: 410px;
}
.form-box h2::after {
    height: 60px;
    width: 60px;
    right: 27px;
    top: 50px;
}
.form-box h2::before{
    height: 60px;
    width: 60px;
    left: 27px;
    top: 50px;
}
.labels {
    font-size: 25px;
    margin-bottom: 15px;
}
.rosegrail-wytlogo {
    max-width: 265px;
    margin-bottom: 20px;
}
}
@media(max-width:991px){
    .btn {
    margin: 30px 0px;
    padding: 13px 84px;
    font-size: 32px;
}
}
@media(max-width:768px){
header {
    padding: 1rem 0rem 5rem;
    background-position: center;
} 
.vector-img {
    max-width: 484px;
}
.mb-30 {
    margin-bottom: 25px !important;
}
header h4 {
    font-size: 38px;
    margin-bottom: 20px;
}
header h2 {
    font-size: 50px;
    padding: 10px 90px;
    margin-bottom: 23px;
}
header h6 {
    font-size: 23px;
    line-height: 38px;
    margin-bottom: 27px;
}
.parastyle p {
    font-size: 22px;
    line-height: 35px;
    margin-bottom: 39px;
}
.form-box h2 {
    font-size: 34px;
    line-height: 46px;
    padding: 20px 20px;
    margin-bottom: 30px;
}
.form-box h2::after {
    height: 44px;
    width: 44px;
    right: 28px;
    top: 38px;
}
.form-box h2::before {
    height: 44px;
    width: 44px;
    left:  28px;
    top: 38px;
}
.col-6{
    flex: 100%;
    max-width: 100%;

}
.row{
    flex-wrap: wrap;
}
.audiobook-img {
    max-width: 335px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
}
.btn {
    margin: 30px auto;
    padding: 13px 84px;
    font-size: 32px;
}
.ftr-brdr-ryt {
    border-right: none;
}
}
@media(max-width:560px){
    header h2 {
    font-size: 37px;
    padding: 10px 74px;
    margin-bottom: 23px;
}
.vector-img {
    max-width: 370px;
}
header h6 {
    font-size: 17px;
    line-height: 32px;
    margin-bottom: 25px;
}
header h4 {
    font-size: 32px;
    margin-bottom: 19px;
}

.form-box br{
    display: contents;
}
.form-box h2 {
    font-size: 23px;
    line-height: 33px;
    padding: 13px 14px;
    margin-bottom: 30px;
}
.form-box h2::after {
    height: 25px;
    width: 25px;
    right: 5px;
    top: 32px;
}
.form-box h2::before {
    height: 25px;
    width: 25px;
    left: 5px;
    top: 32px;
}
.audiobook-img {
    max-width: 277px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
}
.ftr p {
    font-size: 15px;
    margin: 15px;
    line-height: 27px;
}
.fnt16 {
    font-size: 13px !important;
}
.rosegrail-wytlogo {
    max-width: 200px;
    margin-bottom: 10px;
}
.ftr {
    padding: 60px 0px;
}
.btn {
    margin: 22px auto;
    padding: 13px 63px;
    font-size: 29px;
}
.form-box h6 {
    font-size: 16px;
    line-height: 28px;
}
.labels {
    font-size: 22px;
    margin-bottom: 13px;
}
.col-6 input {
    padding: 16px 13px 16px;
    max-width: 900px;
    margin-bottom: 20px;
    font-size: 20px;
}
.col-6 input::placeholder{
font-size: 20px;
}
header h6 br{
    display: contents;
}
}
@media(max-width:430px){
    .vector-img {
    max-width: 270px;
}
header h4 {
    font-size: 22px;
    margin-bottom: 18px;
}
header h2 {
    font-size: 25px;
    padding: 10px 55px;
    margin-bottom: 18px;
}
header h6 {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 21px;
}
.parastyle p {
    font-size: 19px;
    line-height: 31px;
    margin-bottom: 28px;
}
.form-box h2 {
    font-size: 24px;
    line-height: 28px;
    padding: 12px 8px;
    margin-bottom: 30px;
}
.btn {
    margin: 22px auto;
    padding: 13px 38px;
    font-size: 24px;
}
.form-box {
    padding: 30px 20px 10px;
}
.ftr-lnk {
    font-size: 16px;
    line-height: 36px;
    margin-bottom: 20px;
}
header {
    padding: 1rem 0rem 4rem;
    background-position: center;
}
}
@media(max-width:375px){
    .form-box h2 {
    font-size: 22px;
    line-height: 28px;
    padding: 12px 8px;
    margin-bottom: 30px;
}
header h6 {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 21px;
}

}
@media(max-width:360px){
    .btn {
    margin: 22px auto;
    padding: 13px 36px;
    font-size: 21px;
}
.form-box {
    padding: 30px 15px 10px;
}
.ftr p {
    font-size: 15px;
    margin: 15px;
    line-height: 22px;
}
.col-6 input {
    padding: 13px 13px 13px;
    max-width: 900px;
    margin-bottom: 20px;
    font-size: 17px;
}
.col-6 input::placeholder{
font-size: 18px;
}
.form-box h2 {
    font-size: 21px;
    line-height: 28px;
    padding: 12px 25px;
    margin-bottom: 30px;
}
}
@media(max-width:320px){
    header h2 {
    font-size: 22px;
    padding: 10px 47px;
    margin-bottom: 18px;
}
header h6 {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 21px;
}
.form-box h2 {
    font-size: 18px;
    line-height: 25px;
    padding: 12px 23px;
    margin-bottom: 30px;
}
.form-box h6 {
    font-size: 15px;
    line-height: 23px;
}
.parastyle p {
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 30px;
}
}