header {

    text-align: left;

  

    padding: 10px 0;

        position: absolute;

    margin: 0 auto;

    width: 100%;

        z-index: 99;

        top: 0;

}

/* width */

::-webkit-scrollbar {

  width: 7px;

}



/* Track */

::-webkit-scrollbar-track {

  background: #fff; 

}

 

/* Handle */

::-webkit-scrollbar-thumb {

  background: #a5a5a5; 

}



/* Handle on hover */

/*::-webkit-scrollbar-thumb:hover {*/

/*  background-image: linear-gradient(89deg, #fecc00 4%, #db740c 107%); */

/*}*/

.wishes-page header .header-sec{

 border-bottom: none;

}

header img{

     width: 200px;

    height: auto;

}

.video-sec .col-md-12{

    padding: 0;

}

.wishes-page footer .container-fluid {

    padding: 0 50px;

}

body {

  /*  overflow: hidden;*/

    background: #000;

}

.mid-sec {

    text-align: center;

    color: #fff;

    padding: 117px 0 0;

}

.msg-sec{

    max-width: 600px;

    margin: 0 auto;

}

.video-sec {

    background: #000;

        position: relative;

}

.logo-menu ul{

    list-style: none;

    padding: 10px 0;

    margin: 0;

}

.logo-menu ul li{

    display: inline-block;

    padding: 0px 88px;

}

.logo-menu ul li:first-child{

    padding: 0 69px 0 0;

}

.logo-menu ul li:last-child{

    padding: 0 0px 0 78px;

}

@media only screen and (max-width: 1345px){
    .logo-menu ul li{

        padding: 0px 60px !important;

    }
    /*.logo-menu ul li:first-child{

        padding: 0 50px 0 0 !important;

    }

    .logo-menu ul li:last-child{

        padding: 0 0px 0 68px !important;

    }*/
    
}
@media only screen and (min-width: 1520px){
    .logo-menu ul li:first-child {
        padding: 0 120px 0 0 !important;
    }
    
    .logo-menu ul li {
    
        padding: 0px 100px !important;
    }
    .logo-menu ul li:last-child {
        padding: 0 0px 0 130px !important;
    }
}
@media only screen and (max-width: 1270px){
    .logo-menu ul li{

        padding: 0px 55px !important;

    }
    
    
}
@media only screen and (max-width: 1220px){
    .logo-menu ul li{

        padding: 0px 45px !important;

    }
    
    
}
@media only screen and (max-width: 1147px){
    .logo-menu ul li{

        padding: 0px 35px !important;

    }
    
    
}
@media only screen and (max-width: 1020px){
    .logo-menu ul li{

        padding: 0px 30px !important;

    }
    
    
}
@media only screen and (max-width: 992px){
    .logo-menu ul li{

        padding: 0px 25px !important;

    }
    
    
}
@media only screen and (max-width: 920px){
    .logo-menu ul li{

        padding: 0px 20px !important;

    }
    
    
}
@media only screen and (max-width: 870px){
    .logo-menu ul li{

        padding: 0px 10px !important;

    }
    
    
}
@media only screen and (min-width: 768px){
    .mobile-menu{
        display: none;
    }
}
@media only screen and (max-width: 767px){
    .desktop-menu{
        display: none;
    }
    .page-story.container-story {
        
        margin-top: 150px;
    }
    .header-sec{
        position: relative;
    }
    footer{
        z-index: 9999 ;
    }
}
.mobile-menu .btn-primary{
  background-color: #000000;
    border-color: #000000;
    font-size: 20px;
}
.mobile-menu .btn-primary:focus {
    
    background-color: #000000;
    border-color: #000000;
        box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 50%);
}

.mobile-menu .btn-primary:active{
    background-color: #000000;
    border-color: #000000;
}
.mobile-menu .btn-primary:hover{
    background-color: #000000;
    border-color: #000000;
}
.dropdown-menu .dropdown-item {
  
  display: block !important;
  color: #000;
  font-size: 18px;
  font-weight: 600;
}
.mobile-menu .dropup .dropdown-menu{
    z-index: 9999;
}
.stories-new .stories-body .btn{
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding-left: 0;
    margin-left: 0;
}
.box-inner a i{
    text-align: right;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    float: right;
    margin-top: 15px;
}
.logo-menu{

       position: absolute;

    z-index: 999;

    bottom: 0;

    left: 0;

    right: 0;
    background: #000;
    text-align: center;
}

.logo-menu ul li a{

 color: #fff;

 font-size: 17px;

 text-decoration: none;

 display: inline-block;

}

.header-sec {

    border-bottom: 1px solid #fff;

    padding-bottom: 0px;

}

.logo-menu ul li a::before{

    content: "";

    background: url('../img/fav-icon.png');

    background-position: center;

    background-size: 30px 30px;

    background-repeat: no-repeat;

    width: 30px;

    height: 30px;

    display:inline-block;

    margin-right: -8px;

    margin-top: -2px;

    vertical-align: middle;

}

.video-sec video {

    object-fit: cover;

    object-position: center;

    width: 100%;

   /* height: 95vh;*/

}

.read-btn a {

    background: #fecc00;

    text-decoration: none;

    color: #070707;

    padding: 10px 20px;

    text-transform: uppercase;

    border-radius: 10px;

}

.read-btn {

    margin-top: 50px;

}

.container-fluid {

    padding: 0 50px;

}

.details-beyond {

    padding-top: 70px;

}

.wishes-page .container-fluid{

   /* padding: 0;*/
   padding: 0 12px;

}

.wishes-page header .container-fluid{

    padding: 0 50px;

}

.col-md-6.right-logo {

    text-align: right;

}

#projectsShowcase .slick-custom-arrows .icon {

    width: 30px;

    height: 30px;

    border: 1px solid #FF4D00;

    border-radius: 3px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}

#projectsShowcase .slick-custom-arrows li:not(:last-child) {

    margin-right: 3px;

}

#projectsShowcase .slick-custom-arrows {

    margin-right: 7em;

    margin-top: 14px;

}

#projectsShowcase .slick-custom-arrows {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    list-style: none;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    margin-right: 6em;

}









     .celebration-sec .swiper {

        width: 100%;

        height: 100%;

      }



      .celebration-sec .swiper-slide {

        text-align: center;

        font-size: 18px;

        background: #fff;

        background-color: transparent;



        /* Center slide text vertically */

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: center;

      }



    .celebration-sec .swiper-slide{

        height: 300px;

            background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

      }

      .celebration-sec {

    position: absolute;

    left: 0;

    bottom: 100px;

    width: 100%;

    margin: 0 auto;
    top: 30%!important;

}

.celebration-sec .swiper-button-next, .swiper-rtl .swiper-button-prev{

        top: -50px;

        right: 47px;

            color: #fff;

            width: 150px;

}

.celebration-sec .swiper-button-prev, .swiper-rtl .swiper-button-next{

    top: -50px;

    left: 47px; 

        color: #fff;

        display: none;

}

.celebration-sec .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{

      background: url(../img/arrow.png);

    content: ""!important;

    width: 150px!important;

    height: 50px!important;

    display: block;

    background-size: 150px 50px!important;

    background-repeat: no-repeat;

    background-position: center;

}

.home-page .video-sec .container-fluid {

    padding: 0 0px;

}

.home-page .header-sec{

    border: none;

}

.story-sec .story-btn a {

    border: 1px solid #ddd;

    padding: 10px 15px;

    text-decoration: none;

    color: #fff;

    border-radius: 11px;

}

.story-btn {

    margin-top: 50px;

}

.heading-pink {

    background: #c0034b;

    padding: 10px 0 10px 97px;

        position: relative;

        margin-left: 20px;

}

.img-author img{

width: 100px;

height: 100px;

}

.img-author {

       position: absolute;

    top: -12px;

    z-index: 9999;

    left: 0;

}

.img-user {

    position: relative;

        margin-bottom: 30px;

}

.rgt-tab {

    background: #373535;

    color: #fff;

    border-radius: 15px;

        height:297px;

    overflow-y: scroll;

}

.rgt-tab p{

text-align: left;

font-size: 13px;

margin-bottom: 0!important;

padding: 0

}

.rgt-tab h6{

text-align: left;

  color: #ebcb20;

      margin: 0;

}

.rgt-tab .nav-pills .nav-link {

    color: #fff;

        text-align: left;

}

.rgt-tab .nav-pills .nav-link.active{

    background: gray;

}

/*tab css*/





/* Style the tab */

.tab {

  float: left;

  border: 1px solid #ccc;

  background-color: #f1f1f1;

  width: 30%;

  height: 300px;

}



/* Style the buttons inside the tab */

.tab button {

  display: block;

  background-color: inherit;

  color: black;

  padding: 22px 16px;

  width: 100%;

  border: none;

  outline: none;

  text-align: left;

  cursor: pointer;

  transition: 0.3s;

  font-size: 17px;

}



/* Change background color of buttons on hover */

.tab button:hover {

  background-color: #ddd;

}



/* Create an active/current "tab button" class */

.tab button.active {

  background-color: #ccc;

}



/* Style the tab content */

.tabcontent {

  float: left;

  padding: 0px 12px;

  border: 1px solid #ccc;

  width: 70%;

  border-left: none;

  height: 300px;

}

body.story-page {

    overflow: auto;

    display: block;

}

.otherstory{

       background-image: url(../img/other-story.png);

    height: 200px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.clear{

    clear: both;

}

.page-story {

    position: relative;

    z-index: 9999;

    bottom: 0;

}

.story-sec {

    padding-bottom: 50px;

    padding-top: 50px;

}









   .story-slider .swiper {

        width: 100%;

        height: 100%;

      }

     .story-slider .swiper-slide h4{

          font-size: 18px;

     }

      .story-slider .swiper-slide {

        text-align: left;

        font-size: 18px;

        background: transparent;



        /* Center slide text vertically */

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-block;

        display: block;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: left;

        justify-content: left;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: left;

        border: 1px solid #fff;

    padding: 20px;

    border-radius: 20px;

      }



      .story-slider .swiper-slide img {

        display: block;

      width: 95px;

    height: 75px;

        object-fit: cover;

        margin-bottom: 20px;

            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);



      }

        .story-slider .swiper-button-next,  .story-slider .swiper-button-prev{

            height: 25px;

            top:85%;

            background-image: linear-gradient(to bottom right, #e8d613, #e8d613, #e8d613);

             clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

             color: #000;

        }

      .story-slider .swiper-slide  a {

        color: #fdf10d;

    border-bottom: 2px solid;

    text-decoration: none;

    font-size: 14px;

}

.story-slider .swiper-button-next:after, .story-slider .swiper-rtl  .story-slide .swiper-button-prev:after{

        font-size: 15px;

    font-weight: 900;

}

.story-slider .swiper-button-prev:after, .swiper-rtl .story-slider .swiper-button-next:after{

     font-size: 15px;

    font-weight: 900;

}

.story-page header{

position: relative;

}

.story-page .logo-menu{

    position: relative;

}

.btn-check:focus+.btn, .btn:focus{

    box-shadow: none;

}

button.btn.story-butn {

    padding: 10px 15px;

    text-decoration: none;

    color: #000;

    border-radius: 11px;

    background: #e8d613;

}

.story-slider {

    padding: 70px 0 50px;

}

.story-slider .swiper-slide:after{

         content: "";

    display: block;

    font-family: math;

    font-size: 12px;

    top: -6px;

    right: -8px;

    position: absolute;

    background: url(../img/pencile-img.png);

    z-index: 999999;

    width: 50px;

    height: 50px;

    background-position: center;

    background-size: 40px 40px;

    background-repeat: no-repeat;

}



.hexagon {

    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

}

.shape-inner {

    height: calc(90px + 5vw);

    width: calc(90px + 5vw);

    background-size: cover;

    margin: auto;

}

.shape-outer {

    display: flex;

    flex-shrink: 0;

    height: calc(100px + 4vw);

    width: calc(100px + 4vw);

    margin: 25px;

    background-image: linear-gradient(to bottom right, #fff, #fff, #fff);

}

.story-sec .story-butn a {

       padding: 10px 15px;

    text-decoration: none;

    color: #000;

    border-radius: 11px;

    background: #e8d613;

}

.story-butn {

    margin-top: 30px;

}



.story-sec .form-control{

    margin-bottom: 10px;

}

.story-sec .modal-content{

background-color: #c0034b;

}

.story-sec form input[type="submit"] {

    background: #e8d613;

    border: none;

    padding: 8px 20px;

}

button.btn.story-btn {

    border: 1px solid #fff;

    color: #fff;

    border-radius: 10px;

    background: #202020;

        margin: 15px 0;

}

.story-sec button.close {

    background: #000;

    color: #fff;

}

.story-sec textarea{

    padding: 10px 15px;

    resize: none;

        width: 100%;

    border-radius: 10px;

}

.story-sec .rgt-tab img{

width: 50px;

    height: 40px;

    top: 85%;

    /* background-image: linear-gradient(to bottom right, #e8d613, #e8d613, #e8d613); */

    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

    color: #000;

}

.img-author img{

    width: 100px;

    height: 90px;

    top: 85%;

    /* background-image: linear-gradient(to bottom right, #e8d613, #e8d613, #e8d613); */

    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

}





/*Thankyou page*/



.thankyou {

    text-align: center;

    padding: 23px 0;

}

.thankyou-slider {

    text-align: center;

      padding-bottom: 80px;

}

.thankyou-slider h3{

    padding-bottom: 30px;

}

.swiper-button-next, .swiper-button-prev{

    color: #fff;

    font-size: 8px;

    top: 67%;

}





/*new story*/



.story-sec{

    text-align: center;

}

.story-page .logo-menu {

    position: absolute;

}

.story-butn {

    margin-top: 0;

}

.story-sec {

        text-align: center;

    /*position: fixed;

    bottom: 0;

    top: 50%;

    left: 35%;

    transform: translate(-50px, -35px);*/

}

button.btn.story-butn {

    padding: 15px 45px;

    text-decoration: none;

    color: #000;

    border-radius: 5px;

    object-fit: contain;

    background-image: linear-gradient(89deg, #fecc00 4%, #db740c 107%);

  margin-top: 150px;

  margin-right: 20px;

}

button.btn.story-btn {

    border: 1px solid #fff;

    color: #fff;

    border-radius: 5px;

    background: transparent;

    padding: 15px 35px;

    margin-top: 165px;



}
@media only screen and (max-width: 767px){
    button.btn.story-btn{
        margin-top: 80px;
    }
    button.btn.story-butn{
        margin-top: 70px;

        margin-right: 0;
    }
}
@media only screen and (max-width: 621px){
    button.btn.story-btn{
        margin-top: 40px;
    }
}
button.btn.story-btn img{

    width: 25px;

}

.story-sec .modal-content {

    background-color: #000;

    border: 1px solid;

    border-radius: 0;

    text-align: left;

}

.story-main .btn{

    text-decoration: none;

   font-weight: 600;

        border: 0;

    padding: 0;

   color: #ccc;

}

.story-main .btn:focus{

    box-shadow: none;

}

.story-main h6{

    text-decoration: none;

    color: #f8bb03;

}

.story-sec .modal-header{

    border: none;

}



.story-sec button.close {

    background: #f8bb03;

    color: #000;

    position: absolute;

        right: -22px;

    top: -22px;

   padding: 0px 12px 4px;

    margin: 0;

    /*border-radius: 50%;*/

    font-size: 22px;

    /*background: #f8bb03;*/

    /*color: #000;*/

    /*position: absolute;*/

    /*right: 0;*/

    /*top: 0;*/

    /*border-radius: 50%;*/

    /*z-index: 999;*/

    /*width: 40px;*/

    /*height: 40px;*/

    /*font-size: 30px;*/

    /*line-height: 40px;*/

}
.model-new-story input#continue_mobile, .story-sec input#new_mobile {
    margin-top: 28px;
}
.story-sec #myModal   button.close{

        right: -1px;

    top: -2px;

}

.story-sec #storyModal  button.close{

     right: -22px;

    top: -22px;

}



#readModal button.close{

        right: -1px;

    top: -2px;

}



#readModal .modal-dialog{

          transform: translate(0,-1px); !important;

}

.modal-body{

    padding: 0;

}

.main-box:hover .main-boxs{

    background: #f8bb03;

    color: #000;

}

.main-box {

    border-right: 1px solid #707070;

    margin-bottom: 30px;

}
.main-box.second-story{
     border-right: none;

}
.pagination-story .pagination{
    justify-content: center;
}
.pagination-story .pagination .page-item.active .page-link{
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}
.pagination-story .pagination .page-item .page-link{
    color: #000;
}
.pagination-story .pagination .page-item .page-link:focus{
    box-shadow:none
}
.box-inner {

    padding: 10px 20px;

    margin-bottom: 30px;

}

.box-inner:nth-child(even){

    padding: 0 0;

}

.main-box:hover h6{

    color: #000;

}

.story-main {

    color: #fff;

}

.main-box:hover button{

    color: #000;

}

.story-read h4{

color:#ffcc01 ;

font-size: 14px;

}

.story-read {

    color: #fff;

    width: 100%;

    padding: 0 0 0 30px;

}

.story-read h5{

color:#fff ;

font-size: 10px;

}

.story-read p{

color:#fff ;

font-size: 13px;

padding-bottom:30px;

}



.story-sec .modal-content{

        height: 650px;

    overflow-y: scroll;

        overflow-x: hidden;

}

#modal-sec .modal-content {

    height: auto;

    padding: 20px;

    overflow: hidden;

}

.story-read img {

    width: 25px;

    border-bottom: 1px solid #f8bb03;

    margin-bottom: 10px;

}

.title-heading h1 {

    color: #f8bb03;

    font-size: 22px;

    margin-bottom: 20px;

}

button.btn.story-butn img {

    width: 25px;

}

button.btn.story-btnn {

  /*margin-left: 30px;*/

    padding: 10px;

    background: #fecc00;

    color: #000;

        margin-bottom: 15px !important;

    margin-top: 15px;

}

button.btn.story-btnns {

  /*margin-left: 30px;*/

       padding:10px !important;

    background: #fecc00 !important;

    color: #000 !important;

       margin-bottom: 15px !important;

    margin-top: 15px;

}

button.btn.story-btnnn {

    /*margin-left: 30px;*/

    padding: 10px;

    background-image: linear-gradient(89deg, #fecc00 4%, #db740c 107%);

    color: #000;

       margin-bottom: 15px !important;

    margin-top: 15px;

}

button.btn.story-btnn img{

    width: 25px;

}

h4.modal-title {

    color: #f8bb03;

}

div#myModal {

    /*top: 15%;*/

}

.tab-form{

    display: none;

}



/* Mark input boxes that gets an error on validation: */

#regForm input.invalid {

  background-color: #ffdddd;

}



/* Hide all steps by default: */



#regForm button {

  background-color: #f8bb03;

  color: #000;

  border: none;

  padding: 10px 40px;

  font-size: 20px;

  font-family: Raleway;

  cursor: pointer;

  margin-top:20px;

}



#regForm button:hover {

  opacity: 0.8;

}



#regForm #prevBtn {

  background-color: #bbbbbb;

}



/* Make circles that indicate the steps of the form: */

#regForm .step {

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbbbbb;

  border: none;  

  border-radius: 50%;

  display: inline-block;

  opacity: 0.5;

}



#regForm .step.active {

  opacity: 1;

}



/* Mark the steps that are finished and valid: */

#regForm .step.finish {

  background-color: #04AA6D;

}







/* Mark input boxes that gets an error on validation: */

#regForms input.invalid {

  background-color: #ffdddd;

}



/* Hide all steps by default: */



#regForms button {

  background-color: #f8bb03;

  color: #000;

  border: none;

  padding: 10px 40px;

  font-size: 20px;

  font-family: Raleway;

  cursor: pointer;

  margin-top:20px;

}



#regForms button:hover {

  opacity: 0.8;

}



#regForms #prevBtn {

  background-color: #bbbbbb;

}



/* Make circles that indicate the steps of the form: */

#regForms .step {

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbbbbb;

  border: none;  

  border-radius: 50%;

  display: inline-block;

  opacity: 0.5;

}



#regForms .step.active {

  opacity: 1;

}



/* Mark the steps that are finished and valid: */

#regForms .step.finish {

  background-color: #04AA6D;

}

#regForms #prevBtn1 {

    background-color: #bbbbbb;

}

/*new css*/



@media (min-width: 576px){

    .story-sec #storyModal .modal-dialog, .story-sec #storyModalbtn .modal-dialog{

        max-width: 545px !important;

        

    }



}

.story-sec .modal-header{

    position: sticky;

    top: 0;

    background-color:#000;

    z-index: 1055; 

}
.container-story{
    /*width: 100% !important;
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;*/
}
.stories-new{
    background-color: #000;
    border: 1px solid;
    border-radius: 0;
    z-index: 1055;
    margin-bottom: 60px;

}
.stories-new .stories-header {
    
}
.stories-new h4.stories-title {
    color: #f8bb03;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.5rem;
}
.thankyou-slider .swiper-button-next, .thankyou-slider .swiper-button-prev{
    top: 65%;
}
@media only screen and (min-width: 1500px){
    .thankyou-slider{
        margin-top: 50px;
    }
    .thankyou-slider{
        margin-top: 50px;
    }
    .thankyou-slider h3 {
        padding-bottom: 50px;
    }
}

.model-new-story .modal{
    background: #000000e0;
}