@import url('global.css');

/*  hero start */
.hero-section { overflow: hidden; min-height: 500px; display: flex; align-items: center; justify-content: center; }
.hero-section .main-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } 
.hero-section-inner { width: 100%; max-width: 993px;} 
.hero-section-inner  h1 { max-width: 850px; margin: 0 auto; } 
.hero-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);  z-index: -1; } 
.hero-search .form-control { width: 100%; height: 65px; border-radius: 10px !important;     padding-left:60px; } 
.bottom-banner { background: linear-gradient(to right, #007cf0, #00dfd8); color: white; text-align: center; padding: 15px 20px; } 
.bottom-banner a.btn { margin-left: 10px; } 
.search-icon { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 9; } .search-icon  img { display: block; }
h2.h2-small {font-size: 32px;}

/* Placeholder  */
.placeholder-box {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #2a2a2a; /* Default dark tone */
}

.video-card-img.placeholder-box {
    background-color: #333;
}

.video-meta.placeholder-box {
    background-color: #3a3a3a;
}

.placeholder-box h5,
.placeholder-box h5.placeholder-box {
    background-color: #3a3a3a;
}

.placeholder-box p,
p.placeholder-box {
    background-color: #2e2e2e;
}

.placeholder-box.button {
    background-color: #444;
    border-radius: 40px;
}

.placeholder-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    0% {
        left: -150px;
    }
    100% {
        left: 100%;
    }
}

.not-found-text {
    padding: 40px 20px;
    text-align: center;
    display: block;
    width: 100%;
    background: #3a3a3a70;
    border-radius: 10px;
}

.inactive-account-msg {
    background: #ffc10782;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: start;
    justify-content: center;
    margin-top: 30px;
    color: #000;
    border: 1px solid #ffc107;
    gap: 10px;
}

.inactive-account-msg img {
    max-width: 25px;
}

.ds-success {
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    background-color: #28a7455e;
    color: #000;
    margin-bottom: 30px !important;
    border: 1px solid #28a745;
}

.ds-success img {
    max-width: 20px;
    margin-top: 2px;
}
.video-card .meta-row-inner {
    max-width: 85%;
}


/* --------------- Video Card ----------------------- */
.video-card {
    position: relative;
}

.downloaded-badge{
    position:absolute;
    top:10px;
    right:10px;

    display:flex;
    align-items:center;
    gap:6px;

    padding:6px 10px;
    border-radius:999px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    background:rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.15);

    color:#fff;
    font-size:12px;
    font-weight:500;

    z-index:10;
}

/* Text */
.badge-text{
    line-height:1;
}
.badge-icon{
    width:16px;
    height:16px;
    background:#2f6fff;
    border-radius:50%;
    
    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
    flex-shrink:0;
}

/* Tick */
.badge-icon::after{
    content:"";
    width:6px;
    height:9px;
    
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    
    transform:rotate(45deg);
    margin-top:-1px;
}
.downloaded-badge::after{
    content: attr(data-tooltip);

    position:absolute;
    top: calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);

    background:#fff;
    color:#111;

    padding:8px 12px;
    border-radius:6px;
    font-size:12px;
    font-weight:500;
    white-space:nowrap;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

    opacity:0;
    pointer-events:none;
    transition:.2s ease;
}

/* Tooltip arrow */
.downloaded-badge::before{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    
    border:6px solid transparent;
    border-bottom-color:#fff;

    opacity:0;
    transition:.2s ease;
}

.downloaded-badge:hover::after,
.downloaded-badge:hover::before{
    opacity:1;
}
/* --------------- Responsive ----------------------- */

@media screen and (max-width:1199px) { 
.recently-section {padding:80px 0;}
.hero-section-inner {   max-width: 850px;}
.hero-section {min-height:400px;}
}

@media screen and (max-width:991px) { 
.recently-section {padding:50px 0;}
.hero-search .form-control {height: 60px;}
.hero-section {min-height:340px;}
.hero-section-inner {max-width: 450px; max-width: 100%;  padding: 0 20px;   text-align: left;}

}

@media screen and (max-width:767px) { 

}

@media screen and (max-width:575px) { 

}

/*  hero end */


/* account section start */
.account-section { padding:18px 0;  text-align: center;  background: linear-gradient(to right,  #005ffe 0%,#01d6ff 100%);}
.account-section-inner { display: flex; justify-content: center;  align-items: center;  gap: 20px; font-weight: 500;  font-size: 19px;}
.account-section-inner .btn { padding:10px; border-radius:50px; width: 158px; font-size: 14px;  }
@media screen and (max-width:1199px) { 
.account-section {padding:15px 0;}
}
@media screen and (max-width:767px) { 
.account-section-inner {font-size:16px;}
.account-section {padding: 12px 0; }
}


/* account section end */

/* account section start */
.recently-section { padding: 100px 0;}
.recently-section .row { row-gap: 30px;}
.video-card p{ font-size: 14px;}
.video-card-img { width: 100%; margin-bottom:20px;}
.video-card-img img {
    width: 100%;
    height: 208px;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    visibility: visible;
}
.video-card-img img.hide {
    opacity: 0;
    visibility: hidden;
}
.video-card-link {
    max-height: 208px;
    overflow: hidden;
}
video.video-card-preview {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}
.video-meta { font-size:12px; color: #a0a0a0; } 
.video-title { font-size:18px; font-weight: 600; margin: 0.2rem 0 0.8rem; }
.download-icon { width:34px; height: 34px; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; border-radius: 50px;}
.download-icon img { margin-bottom: 2px; padding: 5px;}
.meta-row { display: flex; justify-content: space-between; align-items: center; }
.meta-row-inner a { color: #fff;}
.meta-row-inner h5 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

@media screen and (max-width:1199px) { 
.recently-section { padding:80px 0;}

}

@media screen and (max-width:991px) { 
.recently-section { padding:50px 0;}
.blog-info-subtitle { font-size: 12px;}
.blog-info-title {font-size: 13px;}
.blog-detail-main span {  font-size: 14px;}
.blog-detail-main h2 {  font-size: 23px;}

}

@media screen and (max-width:767px) { 

}

@media screen and (max-width:575px) { 
.recently-section { padding:30px 0;}

}
/* account section end */

/* award section start */
.award-section { padding-bottom: 100px;}
.award-section p {font-size: 14px; }
.play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: flex; justify-content: center; align-items: center; cursor: pointer;   }

@media screen and (max-width:1199px) { 
.award-section { padding-bottom:80px;}
}
@media screen and (max-width:991px) {
.award-section { padding-bottom:45px;} 

}
@media screen and (max-width:767px) {
.award-video { display: none;}
.award-section { padding-bottom:30px;} 
}
/* award section end */

/* featured section start */
.featured-section { padding-bottom: 100px;}
.featured-logo  { max-width: 900px;     margin: 20px 0 20px 0;}
.featured-logo li img{ max-width:150px;}
.featuredSlider .owl-stage {
    display: flex;
    align-items: center;
    justify-content: center;
}
.featured-img img {
    max-width: 150px;
    margin: 0 auto;
}

.featuredSlider {
    max-width: 900px;
    margin: 0 auto;
}


@media screen and (max-width:1199px) { 

.featured-section{ padding-bottom:80px;}
.featured-logo {max-width: 750px;     margin: 10px 0 10px 0;}
.featured-logo li img {  max-width: 120px;}

}
@media screen and (max-width:991px) { 
.featured-section{ padding-bottom:45px;}
}

@media screen and (max-width:767px) { 
.featured-logo {  display: flex;  flex-wrap: wrap;}
.featured-logo li {  width: 50%;   margin-bottom: 40px;}
.featured-logo li:nth-last-child(-n+2) { margin-bottom: 0;}

.featured-section { padding-bottom:30px;} 
}

/* featured section end */

/* services section start */
.services-section { padding-bottom: 100px;}
.services-info { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px;     width: 100%; }
.services-info h3 { font-size: 26px;}
.services-info a { display: flex; gap: 10px;     align-items: center;}

@media screen and (max-width:1199px) { 
.services-section { padding-bottom:80px;}
}
@media screen and (max-width:991px) { 
.services-section { padding-bottom:50px;}
}
@media screen and (max-width:767px) { 
.services-info {    padding: 10px;}
.services-info h3 { font-size: 19px;}
.services-section {        padding-bottom:20px;}

    .services-section  .owl-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        position: relative;
        top: -40px;
    }

.services-section  .owl-dots .owl-dot span {
    background: #FFFFFF;
    width: 10px;
    height: 10px;
    display: flex;
    border-radius: 10px;
}
.services-section .owl-theme .owl-dots .owl-dot { display: block;}
.services-section  .owl-dots .owl-dot.active span {     background: #04BEFF;}
}
/* services section end */
/**feature logo dots*/

.filmography-slider-section .owl-stage li {
    margin: 0 auto;
}
/** end feature logo dots*/

/* contact section start */
.contact-section { width: 100%;background: linear-gradient(to right,  #0094e5 0%,#00ea5f 100%);  padding:50px 0;}
.contact-section h2 { font-weight:500; margin-bottom: 50px; display: block;}
.contact-section a {     gap: 10px; }
.contact-section a i {  margin-top: -2px;}
@media screen and (max-width:1199px) { 
.contact-section {    padding: 30px 0;}
.contact-section h2 {    margin-bottom:30px;}

}
/* contact section end */

/* footer section start */
.footer { padding:50px 0;     position: relative; z-index: 1;}
.footer p { color: #636363; font-size: 14px;}
.footer ul li a { color: #636363; font-size: 14px;}
.footer-nav h5 { font-size: 14px; color: #fff; margin-bottom: 10px;text-transform: uppercase;}
.footer ul li a:hover { color: #fff;}
.footer-nav li { margin-bottom:5px;}
.footer-nav li:last-child { margin-bottom: 0;}
.footer-copyright .biopixel-inline-link {text-decoration: underline;}
.biopixel-inline-link {color: #01d6ff; text-decoration: none; }
.biopixel-inline-link:hover {color: #01d6ff; text-decoration: underline; }


.footer-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-social {     max-width: 420px;}

@media screen and (max-width:1199px) { 
.footer { padding:40px 0;}
}

@media screen and (max-width:767px) { 

.footer { padding:20px 0;}
.footer .row { row-gap: 30px;}
.comapny-list {  display: flex;  flex-wrap: wrap;}
.comapny-list li {  width: 44%;}
}
/* contact section end */


/* hero-inner section start */
.hero-inner { min-height: 320px;}
.hero-inner .hero-section-inner {max-width: 100%;}
.hero-inner .hero-section-inner { max-width: 1200px;   padding: 0 15px; text-align: left;}
.hero-search-inner { margin-top: -30px;}

@media screen and (max-width:1199px) { 
.hero-inner {min-height: 240px;}
}


@media screen and (max-width:991px) { 
.hero-inner {min-height: 180px;}
}
@media screen and (max-width:767px) { 
.footer-logo ul li a img {
    max-width: 35px;
}
}

/* hero-inner section end */

/* library section start */
.library-list-section  .row { row-gap: 30px;}
.library-list-section h4 span  {  color: #6E6E6E; font-weight:400;}
.filter-btn { padding: 10px 20px; display: flex; justify-content: space-between; min-width: 170px; border-radius: 30px; border: 1px solid #fff; color: #fff !important; }
.filter-btn:hover, .filter-btn.focus { color: #fff !important; } .filters-rt { gap: 20px;} 
.library-list-section .new-form-control {   min-width:200px; background-color: transparent; border: 1px solid #fff;    border-radius: 30px; color: #fff;} 
.library-list-section .select-btn { min-width: 154px; border-radius: 30px; height: 45px; display: flex; justify-content: center; align-items: center; } 
.filters-rt .btn-outline-light { background: transparent; color: #fff; outline: none; }
.new-form-control option { background-color: #fff; color: #000; } 
.results-header {word-break: break-word; max-width: 350px;}

@media screen and (max-width:991px) { 
.results-header {   padding-right: 10px; }
}

/* library section end */

/* library select section start */ 
.all-select .select-box { border: 1px solid #fff;  color: #fff;    padding: 10px 20px; border-radius:50px;     gap:15px;}
.all-select .select-box  a { color: #fff;} 
.checkbox-round-circle .round { position: relative; } 
.all-select ul { gap:20px;} .cancel-btn { width: 100%; background: #3C3D42; color: #fff; border-radius: 50px; padding: 12px 20px; min-width: 128px; }
.cancel-btn:hover, .cancel-btn:focus { color: #fff;} 
.download-video .btn-primary { display: flex; width: 270px; height: 47px; font-size: 16px; position: fixed; top: auto; bottom: 15px; margin: auto; left: 0; right: 0; padding: 0px 10px; justify-content: center; }
.video-card-img .checkbox-round-circle { position: absolute; top: 8px; left: 24px; z-index: 999;} 
.video-card-img .checkbox-round-circle .round label {height: 30px; width: 30px;}
.checkbox-round-circle .round label:after { left: 9px; top: 10px; }


.library-list-section { position: relative; } 
.filter-box .library-list-section .filter-dropdown { display: block; } 
.library-list-section .filter-dropdown { position: absolute; background: #fff; padding: 0px; left: 0; right: 0; top: 105px; box-shadow: 0px 0px 30px #ebebeb7a; border-radius: 5px; display: none; z-index: 99; } 
.filter-top { border-bottom: 1px solid #E2E2E2; padding: 25px 25px; display: flex; align-items: center; justify-content: space-between; } 
.filter-top h3 { color: #000; font-size: 25px; margin-bottom: 0px; width: 100%; } 
.filter-inner { padding: 30px; display: flex; justify-content: space-between;     flex-wrap: wrap; max-height: 60vh; overflow-y: scroll;}
.filter-inner form {  width: 100%;  display: flex;  justify-content: space-between;  flex-wrap: wrap;}
.filter-list h4 { margin-bottom: 20px; color: #000; } .filter-list li { display: flex; margin-bottom: 10px; }
.filter-list { width: 21%; margin-bottom: 30px; }
.filter-list:nth-last-child(-n+4) { margin-bottom: 0; } 
.table thead th:first-child {border-top-left-radius: 10px;} 
.table thead th:last-child {border-top-right-radius: 10px;} 
.table-bordered { border: 1px solid #656565; border-collapse: separate; border-spacing: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.submit_button { width: 100%; margin-top: 30px; display: flex ; justify-content: center; gap: 10px; }

.filter-top .submit_button { width: auto;  margin-top:0px;   margin-right:15px; }


@media screen and (max-width:991px) {
.library-list-section .select-btn { min-width: 114px;     font-size: 14px;}
.library-list-section .new-form-control {  min-width: 160px;     font-size: 14px;}
.filter-btn {    min-width: 140px;     font-size: 14px;}
.library-list-section-top {        flex-direction: column; gap:15px;  justify-content: center !important; }
.library-list-section .filter-dropdown {    top: 135px;}



}
@media screen and (max-width:767px) {
.filters-rt {   gap: 13px;  flex-wrap: wrap;}
.filter-top {padding: 15px;}
.filter-top h3 {font-size: 18px;}
.close-icon img { max-width: 14px;}
.filter-btn { padding: 10px 15px;}
.filter-inner {   padding: 15px;  height: 350px; overflow-y: auto; justify-content: flex-start;}
.filter-list { width: 33%; margin-bottom: 15px;   } 
.library-list-section .filter-dropdown { top: 112px;}

.filter-top .btn-primary {     padding: 0 14px;}


}
@media screen and (max-width:575px) {
    

.library-list-section .select-btn { min-width: 94px;}
.library-list-section .new-form-control { min-width: 130px; }
.filter-btn { min-width: 105px;}
.filters-rt { gap: 9px; }
.filter-list { width:50%;  margin-bottom: 14px;} 
.library-list-section .filter-dropdown {    top: 113px;}
 .filter-list:nth-last-child(-n+4) { margin-bottom:15px; } 
.filter-list:nth-last-child(-n+2) { margin-bottom: 0; }
.filter-list li { margin-right: 10px;}
.filter-list  .back-arrow-link { font-size: 14px;}
    }

@media screen and (max-width:440px) {
.filters-rt > li:first-child {
    width: 100%;
}
.filters-rt > li { width:48%;}

.all-select  ul {flex-wrap: wrap;     gap: 13px;}
.all-select ul li {
    width: 100%;
}
.filters-rt li {
    width: 100%;
}
.library-list-select {    flex-direction: column;}
}

/* library  select section end */

/* media section start */
.media-top {  justify-content: space-between; margin-bottom: 25px;}
.media-top h2{ max-width:890px; } .video-box { position: relative; } 
.video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; cursor: pointer; } 
.media-list-info { width: 100%;     display: flex; flex-wrap: wrap;} 
.media-list-info li { margin-bottom: 20px; width: 50%; }
.media-list-info li span { color: #6E6E6E; } 
.media-description p {    color: #6E6E6E;     font-size: 20px;}
.media-section-info { padding:50px 0; } 
.media-section-info h3 { margin-bottom: 30px;}
.media-section-info h5 { font-size:20px;} 
.tag-list li { width:47%; display: flex; margin-bottom: 10px;     flex-direction: column; }
.tag-list li span {    background: #3C3D42; padding: 10px;} 
.tag-list { display: flex; flex-wrap: wrap; justify-content: space-between;} 
.back-btn { color: #01D6FF; display: flex; align-items: center; gap:12px; margin-bottom: 15px; } 
.back-btn:hover {   color: #01D6FF;} .back-btn i { margin-top: -2px; }
.back-arrow-link .back-btn {  color: #01D6FF;}


@media screen and (max-width:1199px) { 
.media-description p {font-size: 16px;}
.tag-list li span {font-size: 14px;}
.media-list-info li span {font-size: 14px;}
.media-section-info h5 {font-size: 20px; margin-bottom: 10px !important;}
.media-section-info h3 {font-size: 22px;}
.media-section-info {  padding: 30px 0;}
.media-top h2 { max-width:650px; margin-bottom: 0;}
.tag-list li { width: 47%; display: flex; margin-bottom: 10px; margin-right: 10px; }
.video-play-button i img { max-width: 80px;}
}
@media screen and (max-width:991px) {
.media-top {    flex-wrap: wrap;}
.media-top h2 { margin-bottom: 10px; max-width: 100%;}
}
@media screen and (max-width:767px) {
.media-description {  margin-bottom: 20px;}
}

@media screen and (max-width:575px) { 
.media-section-info h3 {margin-bottom: 20px;}
.tag-list li {   width: 100%; }
.tag-list li span { width: 100%;}
.media-section-info h5 {  font-size: 16px;}
.media-section-info { padding:25px 0;}
.video-play-button i img { max-width: 50px;  }
}

/* media section end */


/* modal popup sign  start */
.modal-header {    position: absolute; right: 0;     z-index: 999;} 
.modal-lt-img img { border-bottom-left-radius: 10px; border-top-left-radius: 10px; } 
.modal-lt { width: 50%; position: relative; } 
.modal-rt { width: 50%; align-items: center; display: flex; padding: 25px 30px; position: relative; }
.modal-rt h3 { color: #000; margin-bottom:30px; } 
.modal-top .btn { height: 55px; font-size:18px; box-shadow: none;} 
.modal-bottom { color: #000; text-align: center; position: absolute; bottom: 20px; left: 0; right: 0; padding-top:40px; }
.modal-bottom a { color: #2F80ED; } 
.modal-heade .modal-rt-inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; gap: 45px; } 
.modal-header .btn-close { border: none; background: transparent; } 
.modal-rt-inner { width: 100%; display: flex; flex-direction: column; justify-content: space-between; } 
.sign-modal { max-width: 1000px; } 
#forgot-password-link {display: inline-block; margin-bottom: 20px; color: #2F80ED; }
.modal-info { position: absolute; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding:20px;     width: 100%; } 
.modal-info a { color: #fff; }
.modal-main { padding: 0px !important;}
.modal-lt-img {
    height: 100%;
}
.modal-lt-img img {height: 100%;}
@media screen and (max-width:991px) {
.sign-modal {
    max-width: 100%; padding: 25px 15px;
}
}

@media screen and (max-width:767px) {
    .sign-modal {
       max-width: 100%;
        padding: 0 15px;
    }
.modal-lt { display: none;}
.modal-rt {
    width: 100%; padding: 25px; }
    .modal-rt h3 { margin-bottom: 20px;}
    .modal-top .btn {
    height: 49px;
    font-size: 16px;}
    .modal-top {
    margin-bottom: 30px;
}
}
@media screen and (max-width:575px) {
    .sign-modal {
        max-width: 100%;
        padding: 0 5px;
    }
    .modal-rt {
        padding: 30px 15px;
    }
}
/* modal popup sign  end */


/* our-team section start */
.our-team-main .row { row-gap: 30px;}
.our-team-top p {  max-width: 660px; margin: 0 auto;}
.our-team-main .video-card p { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.our-team-detail-info { margin-top: 20px;}
.our-team-detail-info h3 { font-size: 26px;}
@media screen and (max-width:991px) {
}

@media screen and (max-width:767px) {
.our-team-detail-info h3 {   font-size: 18px;}
}
/* our-team section end */

/* blog section start */
.blog-top .new-form-control { width:200px; background-color: transparent; border: 1px solid #fff; border-radius: 30px; color: #fff; }
.blog-section   .row { row-gap: 30px;}
.blog-section .video-meta  { font-size: 14px;  color: #6E6E6E; }
.blog-section .meta-row-inner  h5 {  white-space: nowrap;overflow: hidden; text-overflow: ellipsis;   width:370px;}
.blog-section .video-card p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
@media screen and (max-width:1199px) {
.blog-section .meta-row-inner h5 {width: 300px;}
}
@media screen and (max-width:575px) {
.blog-top .new-form-control { width: 150px; font-size: 14px; height: 40px;}}
/* our-team section end */

/* blog-detail section start */
.blog-detail-img { margin-bottom:20px;}
.blog-detail-info a {  color: #01ccff; text-decoration: underline;}
.blog-detail-info a:hover { text-decoration: none;}
.blog-detail-img img { width: 100%;}
hr {border-top: 1px solid #373737;}
.blog-detail-messages p {  color: #000;}
.blog-detail-messages {  background: #fff url('/wp-content/themes/biopixel/images/quote-img.png') no-repeat  95% center; border-left: 11px solid #01ccff;  padding: 18px 12px;}

.recent-blog-list {display: flex; gap:15px; margin-bottom: 20px;}
.recent-blog-img img { border-radius: 5px;}
.recent-blog-img { width:65px;}
.blog-info-title { font-weight: 600;}
.blog-info-subtitle { font-size: 14px; color:#6E6E6E;}
.recent-box-top  h4, .recent-box-bottom h4 {  font-size: 20px;}
.social-link li {  margin-right: 15px;}
.social-link li:last-child { margin-right: 0;}
.recent-box-top { margin-bottom: 40px;}
.blog-detail-info p {  font-size: 14px;}

@media screen and (max-width:991px) {
.recent-blog-info { width: calc(100% - 45px);}
.recent-blog-img { width: 45px;}

}

@media screen and (max-width:575px) {
.blog-detail-top { flex-direction: column; align-items: flex-start !important;  gap: 10px;}
}

/* blog-detail section end */

/* accordion section start */
.accordion .card {   margin-bottom: 20px; background: #1F1F1F; border-radius: 10px !important;}
.card-header h2 .btn { font-weight: 500; font-size: 20px; color: #fff; padding:19px 43px 19px 20px; }
.card-header h2 .btn:hover, .card-header h2 .btn:focus { text-decoration: none;}
.accordion .card-body { padding:0 15px 15px 15px;}

.accordion .card { margin-bottom: 20px; background: #1F1F1F; border-radius: 10px !important; border: 1px solid #333333 !important; }
.accordion .card:last-child { margin-bottom: 0;}
@media screen and (max-width:991px) {
.card-header h2 .btn {    font-size: 16px;}
.accordion .card-body {    font-size: 14px;}
}
@media screen and (max-width:767px) {
.card-header h2 .btn { white-space:normal; overflow: hidden; text-overflow: ellipsis; max-width: 620px; }
}

/* accordion section end */

/* services section start */
.services-inner h2{ font-size: 35px; margin-bottom: 25px; }
.services-inner p{ margin-bottom:30px;}
.services-inner  .row { margin-bottom:80px;}
.services-inner  .row:last-child { margin-bottom: 0;}
.site-term li { position: relative; padding-left:35px; margin-bottom: 13px; font-weight: 500; } 
.site-term li:before { content: ""; display: block; width: 26px; height: 26px; position: absolute; left: 0; background: transparent url('/wp-content/uploads/2025/07/right-arrow-list.png') no-repeat  95% center; } 
.site-term { margin-bottom: 20px; }
.presenting-list .row { row-gap:50px;}
.presenting-list li { margin-bottom:25px;}
.presenting-list li:last-child { margin-bottom: 0;}
.presenting-list li span { color: #6E6E6E;}
.presenting-list li h4 {  line-height: 1.5;}

@media screen and (max-width:991px) {
.services-inner h2 { font-size: 28px; margin-bottom: 15px; } 
.services-inner .row { margin-bottom: 60px; } 
.services-inner h4 { font-size: 16px; }
}
@media screen and (max-width:767px) {
.services-img img { width: 100%; margin-bottom:20px;}
.services-inner .row { margin-bottom:30px; } 
.services-inner h2 { font-size: 22px;}
.presenting-list .row { row-gap:30px;}
}
/* services section end */

/* about section start */
.about-bg { background: #000 url('/wp-content/uploads/2025/07/about-img-1.jpg') no-repeat 83% 30%;}
.about-top { margin-bottom:150px;}
.about-inner .row { margin-bottom:120px; }
.about-img img{ width: 100%;}

@media screen and (max-width:1799px) {
    .about-bg { background-position: 88% 30%;}
}
@media screen and (max-width:1599px) {
.about-bg { background-position: 97% 30%;}
}

@media screen and (max-width:1399px) {
.about-bg { background-position: 100% 30%;}
}
@media screen and (max-width:1199px) {
   .about-bg {
        background-position: 116% 20%;
        background-size: 59%;
    }
}
@media screen and (max-width:991px) {
.about-top {  margin-bottom: 60px;}
.about-inner .row {  margin-bottom: 50px;}
 
}

@media screen and (max-width:767px) {

.about-bg {background-image: none;}

}
/* about section end */


/* contact section start */
.contact-form { background: #fff; border-radius: 20px;     display: flex; gap:0px;}
.contact-info-img img{ border-top-left-radius:20px; border-bottom-left-radius:20px; }
.contact-info-lt { position: relative; width: 40%;}
.contact-info-txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 35px 30px; }
.contact-info-txt p {font-size: 14px;}
.contact-info-txt h3 { font-size: 25px;margin-bottom:5px;}
.contact-info-list li i {min-width: 30px;    }
.contact-info-list li {display: flex;  gap: 15px; margin-bottom:45px;}
.contact-info-list li:last-child { margin-bottom: 0;}
.contact-info-list { margin-top:50px;}
.contact-form-rt form { width: 100%; padding: 20px; } 
.contact-form-rt { width: 60%; display: flex; align-items: center; } 
.contact-form-rt .btn { font-size: 16px;     width: 129px; }
.contact-info-img {  height: 100%;}
.contact-info-img img { height: 100%;}

@media screen and (max-width:991px) {
.contact-top p br{ display: none;}
.contact-info-txt {padding:25px 20px;}
.contact-info-list {margin-top: 30px;}

.contact-info-img {  height:350px;}
.contact-info-img img {  width: 100%; object-fit: cover; border-radius: 0px;}
.contact-info-list {    margin-top: 30px; }
.contact-info-list li { margin-bottom: 30px;}
.contact-form { flex-direction: column;}
.contact-info-lt, .contact-form-rt { width: 100%;}
.contact-info-list li:first-child { width: 63%;}
.contact-info-list li {width: 33%;}
.contact-info-list {display: flex;}
.contact-info-img {   height: 230px; }
}
@media screen and (max-width:767px) {
.contact-info-list { display: none;}
 .contact-info-img {  height: 110px; }
 .contact-info-txt { padding: 15px; }
}
@media screen and (max-width:575px) {

}

/* contact section end */




/* filmography section start */
.filmography-row { margin-bottom:100px;}
.filmography-carousel:before { width: 100vw; height: 100%; position: absolute; left: -100vw; background: #000000; content: ""; top: 0; z-index: 1; }
.filmography-carousel .owl-stage-outer { overflow: visible;}
.filmography-carousel-content span { color: #6E6E6E;}
.filmography-carousel-item li { margin-bottom: 40px;}
.filmography-row span { color: #6E6E6E;}

.filmography-row:last-of-type {
    margin-bottom: 0px;
}

.filmography-detail-info {
    max-width: 1000px;
    margin: 0 auto 90px;
}

@media screen and (max-width:1199px) {
.filmography-carousel .owl-stage-outer {  overflow: hidden;}
.filmography-row {  margin-bottom:80px;}
.filmography-detail-info {    margin: 0 auto 60px;}
}

@media screen and (max-width:991px) {
.filmography-row { margin-bottom: 20px;}
.filmography-carousel-item li {
    margin-bottom: 25px;
}
}

/* filmography section end */

/* dashboard section start */
.dashboard-main-inner {
    background: #1F1F1F;
    margin:15px 0;
    border-radius: 10px; display: flex; border: 1px solid #676767;
}

.dashboard-main-lt {
    width: 19%;
    border-right: 1px solid #656565;
    position: relative;
}
.profile-menu  {    margin-top: 20px;}
.profile-menu li {
    padding:5px 10px;
}
.profile-menu li a {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
        padding: 10px 15px;
    border-radius: 10px;
}
.profile-menu li a.active,.profile-menu li:hover a { background: #313131;}


.dashboard-main-Rt {
    width: 81%;
    padding: 20px;
}

.dashboard-main-Rt .form-row { row-gap: 20px;}

.dashboard-main-Rt label { color: #fff;}

.dashboard-list {
    border: 1px solid #dddddd;
    padding:10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;     height: 100%;
}


.dashboard-list-img {
    width: 54px;
    height: 54px;
    background: #00A9FF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;     margin-bottom: 15px;
}
.dashboard-list-Lt {
    text-align: center;
}
.remaining-box { font-size: 16px;  font-weight: 600;}
.remaining-total { font-size: 14px;  font-weight: 600;}
.remaining-total span {
    display: block; font-weight: 300;
}
.dashboard-list-Lt strong { font-size: 30px; font-weight: 600;}

.request-btn {
    background: #00a9ff;
    padding: 13px 10px;
    display: flex;
    width: 240px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.request-more {
    margin-top: 25px;
    margin-bottom: 35px;
}

.download-history-table  thead th { background: #313131; }

.table-bordered td, .table-bordered th { border: none;     border-bottom: 1px solid #656565;     padding: 15px 20px;}
.table thead th {  border: 1px solid #656565;     border-left: none; border-right: none;     font-size: 15px;}
.table-bordered tr:last-child td {  border-bottom: none;}

.save-btn { display: flex; width:219px;}


@media screen and (max-width:1199px) {
.dashboard-main-lt { width: 25%; }
.dashboard-main-Rt {   width: 75%; }
}
@media screen and (max-width:991px) {
    .dashboard-main-lt { width: 100%; border-bottom: 1px solid #676767;}
.dashboard-main-Rt  { width: 100%; }
.profile-menu li a {padding: 10px 11px; font-size: 13px;}
.dashboard-main-inner {flex-wrap: wrap;}
.profile-menu { margin:15px 0; }
    .dashboard-main-inner {
        margin: 0;
    }
}

@media screen and (max-width:575px) {
.download-history-table .table td, .download-history-table  .table th { overflow-y: auto;     white-space: nowrap;}
.download-history-table {
    overflow-y: auto;
}
.dashboard-main-Rt {padding: 10px;}
        
.pagination-list li a {    margin: 0 5px;}
.dashboard-main-Rt .row {
    gap: 20px;
}
    .dashboard-main-Rt {
        padding: 15px 10px;
    }
}
/* dashboard section end */


/* Optional: caret indicator for submenu */
.dropdown-submenu > .dropdown-toggle::after {
 box-sizing: border-box;
  height:10px;
  width: 10px;
  border-style: solid;
  border-color: rgb(0, 0, 0);
  border-width: 0px 2px 2px 0px;
  transform: rotate(315deg);
  transition: border-width 150ms ease-in-out;
      position: absolute;
    right: 12px;
    top: 20px;
}



.login-profile .menu-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.login-profile .menu.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.login-profile .menu {
    position: absolute;
    top: calc(100% + 14px);
    right: -12px;
    width: 300px;
    min-height: 100px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: 300ms;
    z-index: 5;
    border-radius: 10px;
}

.login-profile .menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);
    z-index: -1;
}

.login-profile .menu ul {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 10;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 8px 0;
}
.login-profile .menu ul li {
    list-style: none; margin: 0;
}

.login-profile .menu ul li a {
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 6px;
}


.login-profile .menu ul li:hover a { color: #00b4ff ; background-color: #f0f0f0; }
.menu-dropdown.login-profile {
    display: flex;
    align-items: center;
    /*margin-left: 20px;*/
}

@media screen and (max-width:991px) {
    .menu-dropdown.login-profile { margin-left: 20px; }
    body.nav-open {
        overflow: hidden;
    }
}


@media (max-width: 768px) {
    .container {
        max-width: 720px !important;
    }
}

@media only screen and (max-width: 575px) {
    h2, .h2-small {
        font-size: 20px !important;
    }
}

@media (max-width: 991px) {
    .presenting-top p br,
    .about-services p br,
    .about-top p br,
    .filmography-top p br {
        display: none;
    }
}

.wpcf7-form.invalid .wpcf7-response-output {
    color: red;
    display: none;
}
.wpcf7-form.sent .wpcf7-response-output {
    color: green;
}
.error {
    color: red !important;
}
.ds-error {
    color: red;
}
.recent-blog-info .blog-info-title a {
    color: white;
}
div#loading-spinner img, div#loading-spinner-signup img {
    max-width: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99;
}
/* 
.site-term ul, ol {
    list-style: none;
    margin: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.site-term li:before {
    content: "";
    width: 26px;
    height: 26px;
    position: absolute;
    left: 40px;
    background: transparent url('/wp-content/uploads/2025/07/right-arrow-list.png') no-repeat  90% center;
    margin-bottom: 20px;
    padding: 10px;
} */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.loader-container {
    position: relative;
    width: 100px;
    height: 100px;
}
.circle-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 8px solid transparent;
    border-top: 8px solid #ffffff;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
}
.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: var(--main-color-b);
    border-radius: 50%;
    /* background-image: url("your-logo.png"); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.privacy-policy {
    position: relative;
}
.privacy-policy:has(.ds-error) {
    margin-bottom: 50px;
}
#privacy_policy-error {
    position: absolute;
    top: 0;
    transform: translateY(100%);
}


a.pri-policy {
    color: #2f80ed;
}
.contact-form #message {
    resize: none;
    padding: 12px 15px;
    width: 100%;
}

.blog-detail .blog-title {
    font-size: 36px;
    max-width: 70%;
}
.our-team-detail-img figure {
    margin-bottom: 30px;
}
div#reset-error-message {
    margin-bottom: 10px;
}
#reset-password:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
#login-error-message div {
    color: #000;
    background: rgb(255 0 0 / 40%);
    padding: 8px 12px;
    border: 1px solid red;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.2em;
    margin-top: 20px;
}

/**---------------------------------------------video css */
.custom-video-player {
    position: relative;
    width: 100%;
    max-width: 100%;
}
.video-thumbnail {
    width: 100%;
    height: auto;
}
.play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 60px;
    height: 60px;
    z-index: 10;
    display: block; /* Ensure button is visible initially */
}
.play-pause-btn.playing {
    display: none; /* Hide when playing */
}
.video-controls {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.progress-bar {
    width: 200px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    margin-left: 10px;
}
#progress {
    height: 100%;
    background: white;
    width: 0%;
}


button#clear-filters {
    /* color: gray; */
    background: gray;
}

.library-list-select {
    display: flex;
    gap: 15px;
}
/***download css */
.download-spinner-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    display: none; /* Hidden by default */
    z-index: 9999; /* Ensure it appears above other elements */
    text-align: center;
}

.download-spinner-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the spinner */
    max-width: 50px; /* Maintain spinner size */
}

.library-list-section .filter-btn.has-count i {
    display: none;
}
.library-list-section .filter-btn.has-count #filter-count {
    font-size: 10px;
    line-height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background: linear-gradient(to right,  #0094e5 0%,#00ea5f 100%);
}
.download-progress-container {
    z-index: 1050; /* Ensure modal is above other content */
}
.modal-dialog.modal-sm {
    max-width: 350px; /* Compact modal size */
}
.progress {
    height: 25px; /* Match your existing height */
    border-radius: 5px; /* Consistent with Bootstrap */
}
.progress-bar {
    transition: width 0.3s ease; /* Smooth progress animation */
    font-size: 14px; /* Readable percentage text */
    height: 100%;
}
.progress-bar-download {
    padding: 3.5rem; /* Consistent padding */
}
.progress-bar-download p {
    margin-bottom: 1rem; /* Space below text */
    color: #333; /* Darker text for visibility (override text-white) */
}



/**my css*/
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    max-width: 2500px;
    margin: 0 auto;
    background-color: #000000;
    padding: 10px;
}
.grid-item {
    overflow: hidden;
}
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.grid-container p {
    color: white;
    text-align: center;
    margin-top: 10px;
    grid-column: 1 / span 2; /* Span across both columns */
}







.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  align-items: stretch;
}

/* Each box */
.service-item {
  background-color: #1e1f23;
  color: #ffffff;
  text-align: center;
  padding: 40px 20px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin: 0; 
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .service-item {
    padding: 24px 12px;
    min-height: 80px;
  }
}