:root {
  --font-para: 'Dancing Script', cursive;
  --font-heading: 'Lora', serif;
}

.promo_label_body{min-height:100vh;background-color: #142526; margin: 0px;}
.bg-star-div{display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}
.blue-star-div{opacity: 0.1;}
.yellow-star-div{opacity: 0.1;}
.orange-star-div{opacity: 0.1;margin-top:-60px}
.bg-star-main-container{height:auto;width:100%;position:absolute;}


.promo-label-main-bg-container{width: 100%;min-height: 100vh;padding: 40px 50px;padding-bottom: 0px;}
.promo-label-left-bg-container{width: 100%;height: 92vh;overflow: auto;}
.promo-label-left-bg-container::-webkit-scrollbar{display: none;}
.promo-label-img-div{width: 100%;height: auto;}
.promo-label-img{height: auto;width: 100%;border-radius: 13px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
/* .promo-label-img:hover{transform: scale(1.02);box-shadow: 0 4px 16px -7px rgba(0, 0, 0, 0.3);} */
.promo-label-movie-details-div{width: 100%;height: auto;border-radius: 10px;background: #142731;padding: 10px 10px;margin-bottom: 15px;}
.promo-label-movie-name{color: var(--ff-5-e-3-a, #FF5E3A);font-family: 'Pacifico';font-size: 38px;font-style: normal;font-weight: 600;line-height: normal;letter-spacing: 2.2px;margin-bottom: 0px;}
.promo-label-line{width: 95px;height: 11px;flex-shrink: 0;background: var(--ff-5-e-3-a, #FF5E3A);}
.promo-label-genre-lan-div{display: flex;justify-content: space-between;align-items: center;padding: 0px 15px;padding-top: 12px;}
.promo-label-movie-language{color: #FFF;font-family: var(--font-para);font-size: 1.2rem;font-style: normal;font-weight: 400;line-height: 145%;}
.promo-label-movie-genre{color: #6EAB7D;font-family: var(--font-para);font-size: 1.2rem;font-style: normal;font-weight: 700;line-height: 145%;}
.promo-label-details-heading-bg-div{width: 100%;height: auto;margin-bottom: 40px;}
.promo-label-details-heading-hr{border: 1px solid #888;margin: 0px;margin-bottom: 20px;}
.promo-label-details-heading-div{display: flex;justify-content: space-between;align-items: center;}
.promo-label-details-heading{color: #6EAB7D;font-family: var(--font-heading);font-size: 1.3rem;font-style: normal;font-weight: 700;line-height: 1.3;letter-spacing: 1px;}
.promo-label-release-date{font-family: var(--font-para); border-radius: 40px;background: #6EAB7D;font-size: 0.9rem;color: #fff;padding: 7px 20px;width: auto;height: auto;font-weight: 500;border-width: 0px;}
.promo-label-details-text{color: #FFF;font-family: var(--font-para);font-size: 1rem;font-style: normal;font-weight: 400;line-height: 1.5;letter-spacing:1px;}
.promo-label-details-read-more{color: var(--ff-5-e-3-a, #FF5E3A);font-family: var(--font-para);font-size: 16px;font-style: normal;font-weight: 600;line-height: 155%;}
.promo-label-details-btn{border-width:0px;background-color:transparent;color:#FF5E3A}
.promo-label-movie-name-div{width: 100%;margin-bottom: 20px;height: auto;display: flex;align-items: center;justify-content: space-between;}

.promo-label-right-bg-container{width: 100%;height:auto;}
.promo-label-snippets-bg-container{width: 100%;height: 100vh;margin-bottom: 10px;overflow:auto}
.promo-label-snippets-div{display: flex;align-items: flex-start; margin-bottom: 30px;}
.promo-label-snippets-img-div{width: 90px;height: auto;flex-shrink: 0;margin-right: 15px;}
.promo-label-snippets-img{height: auto;width: 100%;border-radius: 10px;box-shadow: 1px 1px 5px 1px #124f59;transition: all 400ms ease;}
.promo-label-snippets-img:hover{transform: scale(1.02);box-shadow: 0 4px 16px -7px rgba(0, 0, 0, 0.3);}
.promo-label-snippets-img-text{color: rgba(245, 246, 248, 0.52);font-family: var(--font-para);font-size: 0.9rem;font-style: normal;font-weight: 500;}
.promo-label-snippets-bg-container::-webkit-scrollbar {display: none;}
.read-more-btn{color: #FF5E3A;cursor: pointer;text-decoration: none;}
.read-more-btn:hover{text-decoration: none;}

.details-head{color: #888;font-family: var(--font-para);}
.details-dots{color: #888;padding: 0px 5px;}
.details-text{color: #FFF;font-family: var(--font-para);}
.promo-label-right-padding{border-top-left-radius: 0px;border-top-right-radius: 0px;}

.slider {position: relative;width: 100%;max-width: 1200px;overflow: hidden;}
.slides {display: flex;transition: transform 0.5s ease-in-out;}
.slide {flex: 0 0 25%;padding: 5px;}
.slide img {width: 100%;height: auto;object-fit: contain;border-radius: 10px;cursor: pointer;}
.prev, .next {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px 15px;cursor: pointer;border-radius: 50%;font-size: 18px;}
.prev { left: 10px; }
.next { right: 10px; }
.prev:hover, .next:hover {background-color: rgb(255 94 58);}

.movie-cast-crew-bg-container {width: 100%;overflow-x: hidden;position: relative;}
.slider-wrapper {display: flex;gap: 20px;transition: transform 0.3s ease-in-out;padding: 0 10px;}
.movie-love-cast-div {display: flex;flex-direction: column;align-items: center;width: 150px;flex-shrink: 0;}
.movie-love-cast-img {width: 100px;height: 100px;border-radius: 50%;margin-bottom: 10px;object-fit: cover;border: 3px solid white;}
.movie-love-cast-name {font-family: var(--font-para);font-size: 1rem;font-weight: 500;color: #fff;text-align: center;margin-bottom: 4px;}
.movie-cast-designation {font-family: var(--font-para);font-size: 1rem;color: #aaa;text-align: center;margin-bottom: 0px;}
.arrow-btn {position: absolute;top: 50%;transform: translateY(-50%);background-color: #fff;border: none;border-radius: 50%;width: 35px;height: 35px;display: none;justify-content: center;align-items: center;cursor: pointer;z-index: 2;box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.arrow-btn.left {left: 10px;}
.arrow-btn.right {right: 10px;}
.arrow-btn:hover{background-color: rgb(255 94 58);color: #FFF;}



/* each post */
.each-post-bg-container{padding-bottom: 20px;display: flex;align-items: center;}
.promo-bg-container{width: 100%;min-height: 90vh;display: flex;flex-direction: column;justify-content: center;}
.promo-text-bg-container{height: auto;width: 100%;padding: 30px 25px;box-shadow: 1px 1px 10px 1px #dee2e6;border-radius: 10px;padding-bottom: 46px;}
.promo-movie-genre{font-family: var(--font-heading); color: #6EAB7D;font-size: 1.3rem;font-weight: 700;letter-spacing: .1rem;text-transform: uppercase;margin: 30px 0px;}
.promo-movie-release-date{font-family: var(--font-para);color: #fff;font-size: 0.9rem;font-weight: 300;}
.promo-movie-likes-main-bg-container{width: 100%;height: auto;padding: 12px 15px;padding-bottom: 30px;}
.promo-movie-likes-bg-container{width: 100%;display: flex;align-items: center;justify-content: space-around;background-color: #142526;padding: 10px 0px;border: 1px solid #888;border-radius: 30px;}
.each-post-lan-size{font-size: 0.9rem;}
.promo-icons-div{font-family: var(--font-para);letter-spacing: 0.5px;font-size: 0.9rem;font-weight: 400;}
.promo-icons-div svg{width: 25px;height: 25px;}

.promo-icons-div {position: relative;display: inline-flex;align-items: center;gap: 6px;cursor: pointer;}
.promo-icons-div svg {width: 25px;height: 25px;transition: opacity 0.2s ease;position: absolute;left: 0;fill: #FF5E3A;}
.promo-icons-div .bi-heart-fill,
.promo-icons-div .bi-chat-heart-fill,
.promo-icons-div .bi-share-fill {
    opacity: 0; /* hidden by default */
}

.promo-icons-div:hover .bi-heart,
.promo-icons-div:hover .bi-chat-heart,
.promo-icons-div:hover .bi-share {
    opacity: 0; /* hide outline icon */
}

.promo-icons-div:hover .bi-heart-fill,
.promo-icons-div:hover .bi-chat-heart-fill,
.promo-icons-div:hover .bi-share-fill {
    opacity: 1; /* show filled icon */
}
.promo-icons-div-span {margin-left: 30px; font-size: 0.9rem;color: #FFF;font-family: var(--font-para);}
.promo-img-bg-container{width: 100%;height: 100%;padding: 0px 30px;}
.promo-post-img{width: 100%;height: auto;border-radius: 10px;}
.promo-video-bg-container{width: 100%;height: auto;padding: 0px 10px;}
.promo-post-video{width: 100%;min-height: 200px;border-radius: 5px;object-fit: cover;}

/* login modal  */
.modal { display: none; position: fixed;left: 50px; top: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-self: center; justify-content: center; align-items: center; padding-top: 10%; padding-left: 30%;}
.content-data { display: flex; flex-direction: column; align-items: center;margin-top: 20px;}
.modal-content { background-color: #985656; padding: 20px; border: 1px solid #888; width: 60%;  max-width: 600px;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); border-radius: 10px;  overflow: hidden; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold;}
.close:hover, .close:focus { color: #fff; text-decoration: none; cursor: pointer;}
.comment-btn { width: 150px; height: 40px; border-radius: 10px; background-color: #2c0202; color: #fff; display: flex; justify-content: center; align-items: center;}
.btn1 { margin-left: 50px;}
.text1 { font-size: 14px;}
.poplogin { margin-top: 5px;}
.emailfield {color: #000;background-color: transparent;width: 100%;height: 40px;border: 0.1px solid gray;border-radius: 5px;margin-bottom: 15px;padding: 1px 10px;}
.otpfield {color: #000;background-color: transparent; width: 60%;height: 40px;border: 0.1px solid gray;border-radius: 5px;margin-bottom: 15px;padding: 1px 10px; margin-left: 20%;}
.otp-text {  color: #000;  font-size: 15px;  text-align: center;  margin-left: 25px;}
.errormessage{width: 70%; height: auto; justify-content: center; margin-left: 15%;} 
.errortext{text-align: center;}
.btn2 { margin-left: 35%;}
.promo-pop-container{display: flex; align-items: center; justify-content: center; flex-direction: column; padding-bottom: 20px;}
.promo-footer-btn{color: #1e602e; font-size: 22px; font-weight: 700; }
.line-with-or { display: flex; align-items: center; text-align: center; color: #555; font-size: 18px;  } 
.line-with-or::before, .line-with-or::after {  content: "";  flex: 1;  border-bottom: 1px solid #ccc;  margin: 0 10px;}
#popup-body{width: 50%;}


/* comment modal */
.commentmodal {  display: none;  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.6);  justify-content: center;  align-items: center;  z-index: 1000;}
.commentmodal-content { display: flex; position: absolute; background-color: #fff; width: 50%; height: 80%; max-width: 900px; border-radius: 10px; overflow: hidden;}
.post-section {  width: 50%;  padding: 20px;  border-right: 1px solid #ddd;}
.popupprofile{padding: 0px 0px;   margin-top: 0;}
.ciny-feed-each-profile-location{margin-top: -35px;}
.poster-image{height:60vh}
.post-image {  width: 100%;  height: 100%;  border-radius: 10px;}
.video-container video{width: 100%; height: 200px;}
.post-description {  margin-top: 10px;  color: #666;}
.hr_line{margin:0; margin-bottom: 15px;}
.hr_line1{margin:0; margin-top: 15px;}
.comments-section { width: 50%; padding: 20px; padding-top: 30px; overflow-y: auto; display: flex; flex-direction: column;}
.comments-section h3 {  margin-top: 0;  font-size: 18px;}
.comment-input {  margin-top: 15px; padding: 10px; background: transparent; width: 100%; border: none; color: #000; border-bottom:1px solid #000; font-size: 15px;font-weight: 400;font-family: var(--font-para);}
.comment-input:focus{outline: none;}
.commentclose { position: relative;   right: 10px;   font-size: 25px;   cursor: pointer;   z-index: 1001;}
.comment {display: flex;margin-bottom: 10px; padding: 15px; margin: 5px; border-radius: 10px; max-width: 800px;background-color:#f8f9fa; }
.profile-pic {width: 30px;height: 30px;border-radius: 100%;margin-right: 5px;}
.comment-content { flex: 1; word-break: break-word;}
.comment-info { margin-bottom: 0px;font-size: 11px;}
.username {font-weight: bold;margin-right: 5px;}
.comment-time {color: #888;}
.comment-text { margin-bottom: 10px;font-size: 13px; font-family: var(--font-para);}
.comment-actions {display: flex;align-items: center;margin-top: 10px;font-size: 1.2em;}
.like-icon {font-size: 16px;color: #000;cursor: pointer;margin-right: 10px;font-style: normal;font-family: var(--font-para);}
.dislike-icon {font-size: 16px;color: #000;cursor: pointer;margin-right: 20px;font-style: normal;font-family: var(--font-para);}
.comment_list{overflow-y: auto; background-color:#f8f9fa; height: 55vh;}
.comment_list::-webkit-scrollbar {display: none;}
.comment_list {-ms-overflow-style: none;  scrollbar-width: none;}
/* .liked {color: blue;}
.disliked {color: blue;} */
.like-count{color: #000;  font-size: 15px;  margin-left: 5px;}
.dislike-count{color:#000;   font-size: 15px;  margin-left: 5px;}
.comment-message{display: flex;align-items: center;justify-content: center;padding-top: 40%;font-size: larger;font-weight: 600;}
.comment-error{display: flex;align-items: center;justify-content: center;padding-top: 40%;font-size: larger;font-weight: 600;}
.comment-input-div{display: flex; flex-direction: row;align-items: center;}
.comment-send-btn{border: none; background-color: transparent; margin-top: 10px; margin-left: -20px;}
.comment-send-btn:hover{color: #E64A19;}

.ciny-label-banner-div{width: 50%;height: 80vh;display: flex;justify-content: center;flex-direction: column;padding-left: 10%;}
.ciny-label-movie-name{font-family: var(--heading);font-size: 3rem;font-weight: 600;color: #0b9896;letter-spacing: 0.4px;line-height: 0.9;margin-bottom: 2px;margin-left: -4px;}
.ciny-label-movie-name-p{font-family: var(--font-para);color: #FFF;font-size: 0.8rem;margin-bottom: 1px;letter-spacing: 0.4px;font-weight: 400;}
.ciny-label-movie-genre{font-family: var(--font-para); color: #e25c1c; margin: 30px 0px; font-weight: 500; font-size: 1.2rem; letter-spacing: 1.2px; text-transform: uppercase;}
.read-more-btn{color: #e16326;cursor: pointer;text-decoration: none;}
.read-more-btn:hover{color: #0b9896;text-decoration: none;}
.likes-icons{display: flex;align-items: center;}
.recent-post-videos{width: 40%;border-radius: 10px;}



/* share panel css */
.share-panel {   display: none;    position: fixed;    top: 50%;   left: 50%;   transform: translate(-50%, -50%);    background-color: #f8f9fa;  padding: 40px 20px;   border-radius: 8px;   box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.5);   z-index: 9999;    width: 500px;    text-align: center;}
.share-option{padding: 10px;cursor: pointer;}
.panel-icons{-webkit-transition: all 0.2s ease-out; }
.panel-icons:hover{  -webkit-transform: scale(1.3);}
.icon-panel-border{ width: 50px;  height: 50px;  display: flex; align-items: center; justify-content: center; border-radius: 100%;}
.icon-name{font-size: 12px; font-family: var(--font-para);}
.share-icons-container { display: flex; flex-wrap: wrap; margin-bottom: 10px; align-items: center; width: 98%; justify-content: space-around;}
.feed-share-head{position: absolute;top: 15px;left: 15px;background: none;border: none;font-size: 18px;}
.share-url-container {display: flex; margin-top: 10px; width: 100%; padding: 5px 10px; border: 1px solid #888 ; border-radius:12px; justify-content: space-between; }
.input-url{    padding: 5px; width: 80%; border-width: 0px; background-color: transparent; font-size: 16px; font-family: var(--font-para);  color: darkslategray;}
.input-url:focus {   outline: none;}
.copy-button { border: none; border-radius: 42px; width: 17%; background-color: #E64A19; color: white; font-size: 15px; font-family: var(--font-para); -webkit-transition: all 0.2s ease-out;}
.copy-button:hover{  -webkit-transform: scale(1.1);}
.close-button { position: absolute; top: 6px; right: 10px; background: none; border: none; font-size: 25px; cursor: pointer; -webkit-transition: all 0.2s ease-out;}
.close-button:hover{  -webkit-transform: scale(1.5);}

@media(max-width:1024px){
    .promo-label-main-bg-container{min-height: auto;}
    .promo-bg-container {min-height: auto;}
}

@media (max-width:992px){
    .promo-post-video{min-height: 300px;}
    .promo-label-main-bg-container{padding: 40px 20px;}
    .promo-label-left-bg-container{height: auto;}

    .promo-img-bg-container{padding: 0px;margin-bottom: 40px;}
    .promo-video-bg-container {margin-bottom: 40px;}
}

@media (max-width: 767px) {
    .promo-label-main-bg-container {padding: 15px 5px;}
    .promo-label-genre-lan-div{justify-content: flex-start;flex-direction: column;align-items: flex-start;padding: 0px 5px;}
    .promo-movie-likes-main-bg-container{padding: 10px 6px;padding-bottom: 19px;}
    .promo-post-video {min-height: 200px;}
    .promo-label-movie-name-div{flex-direction: column;align-items: flex-start;justify-content: flex-start;}
    .promo-label-line{margin-bottom: 20px;}

    
}