*{margin:0;padding:0;box-sizing: border-box;}
*,
*::before,
*::after {
    box-sizing: inherit;
}

@font-face {
    font-family: 'Urbanist Black';
    src: url('../fonts/urbanist/urbanist-black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist ExtraBold';
    src: url('../fonts/urbanist/urbanist-extrablack.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist Bold';
    src: url('../fonts/urbanist/urbanist-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist SemiBold';
    src: url('../fonts/urbanist/urbanist-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist Medium';
    src: url('../fonts/urbanist/urbanist-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist Regular';
    src: url('../fonts/urbanist/urbanist-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist Light';
    src: url('../fonts/urbanist/urbanist-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'Urbanist ExtraLight';
    src: url('../fonts/urbanist/urbanist-extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist Thin';
    src: url('../fonts/urbanist/urbanist-thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
/* Disable blue effect on touch but retain focus styles for accessibility */
* {
    -webkit-tap-highlight-color: transparent;
}

button, a, input {
    outline: none; /* Removes default outline */
}
.list,ul{list-style:none}
a,.link{text-decoration:none}
.btn:focus,.textarea:focus,.input-field:focus,.select:focus{outline:none}
.body{font-family: 'Urbanist Regular', Arial, sans-serif;background:#fff;font-size:14px;line-height:1.4;color:#000;padding:0;margin:0;box-sizing: border-box;}
/*font family*/
.h1,.h2,.h3,.h4,.h5,.h6,.semi-family-font,.modal-header{font-family: 'Urbanist SemiBold', Arial, sans-serif !important; }
.welcome-text span,.license-content ul li span,.bold-family-font,.header-logo .brand-name .highlight,.cat-list li,.btn{font-family:'Urbanist Bold', Arial, sans-serif !important;}
.black-family-font,.license-section h3,.policy-section-content h3,.premium-section .font-bold{font-family:'Urbanist Black', Arial, sans-serif !important}
.regular-family-font,.form-group .input-field,.header-logo .brand-name,.contact-section .textarea,label.is-invalid,.premium-section h5,#response-message,.filter-keys span,.download-form p, textarea{font-family: 'Urbanist Regular', Arial, sans-serif !important;}
.medium-family-font,.form-group label,.filter-animation-content,.pricing-info-content .price .price-highlight,.filter-keys,.license-section h5,.grid-item a .name,.card-header{font-family: 'Urbanist Medium', Arial, sans-serif !important;}

/*font-size*/
.h1{font-size:28px;line-height:36px}
.h2,.big-text,.heading-text{font-size:24px;line-height:34px}
.h3{font-size:22px;line-height:30px}
.h4{font-size:20px;line-height:26px}
.h5,.small-text,.page-title{font-size:18px;line-height:24px}
.h6{font-size:16px;line-height:22px}

.container{width:calc(100% - 30px);margin:0 auto}
.sm-container{width:992px;margin:0 auto;}

.relative,.rel-btn{position:relative !important;}
.absolute{position:absolute !important;}

.uppercase{text-transform:uppercase !important;}

.hide,.sm-no-show,.md-no-show{display:none !important}
.show{display:block !important;}

.responsive{width:100%;height: auto;}
.flew-wrap{flex-wrap: wrap;}

/*flex and align*/
.inline-flex{display:inline-flex;}
.d-flex{display:flex !important;}
.flex-wrap{flex-wrap: wrap;}
.flex-1{flex:1}
.flex-2{flex:2}
.order1{order:1}
.order2{order:2}
.justify-content-between{justify-content: space-between !important;}
.justify-content-around{justify-content: space-around !important;}
.justify-content-evenly{justify-content: space-evenly !important;}
.justify-content-start{justify-content:start !important;}
.justify-content-end{justify-content:end !important;}
.align-items-start{align-items:flex-start !important;}
.align-items-end{align-items:flex-end !important;}
.align-items-center{align-items:center !important;}
.align-items-baseline{align-items:baseline !important;}
.align-items-stretch{align-items: stretch !important}
.align-content-center{text-align:center;}
.align-content-left{text-align:left;}
.align-content-right{text-align:right}

/*padding and margin*/
.mt40{margin-top:40px}
.mt30{margin-top:30px}
.mt20{margin-top:20px}
.mt15{margin-top:15px}
.mt10{margin-top:10px}
.mt5{margin-top:5px}

.mb40{margin-bottom:40px}
.mb30{margin-bottom:30px}
.mb20{margin-bottom:20px}
.mb15{margin-bottom:15px}
.mb10{margin-bottom:10px}
.mb5{margin-bottom:5px}


.mgl5{margin-left:5px}
.mgl10{margin-left:10px}
.mgl15{margin-left:15px}
.mgl20{margin-left:20px}
.mgl25{margin-left:25px}

.mgr5{margin-right:5px}
.mgr10{margin-right:10px}
.mgr15{margin-right:15px}
.mgr20{margin-right:20px}
.mgr25{margin-right:25px}

.no-l-mg{margin-left:0 !important}

/*padding*/
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}

.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb40{padding-bottom:40px}
.pb50{padding-bottom:50px}

.pad10{padding:10px 10px}

.radius5{border-radius:5px}
.radius10{border-radius:10px}
.radius25{border-radius:25px}

/*btn*/
.btn{cursor:pointer;font-size:15px;height:42px;min-width:180px;opacity:1;border-radius:25px;border:none;transition: opacity 0.3s ease;letter-spacing:1.3px}
.btn:hover{opacity:.9}
.primary-btn{background:#0076ff;color:#fff;}
.change-password-link {
    color: #0076ff; /* Matches button color */
    text-decoration: none;
}

.change-password-link:hover {
    text-decoration: underline; /* Underline on hover */
}
.link-btn{text-align: center;display:flex;align-items:center;justify-content:center;}
.text-cap{text-transform: capitalize;}


/*color*/
.black-font{color:#000}
.blue-bg{background:#0076ff;color:#fff}
.green-bg{background:#32864c;color:#fff}
.black-bg{background:#000000;color:#fff}
.green-text,.green{color:#32864c}
.blue,.blue-text{color: #0076ff}
.red,.red-text{color:#dc3545}


.error, .text-error,.alert-error{color:#dc3545 !important}
.success, .text-success,.alert-success{color:#28a745 !important}
.warning, .text-warning{color:#ffc107 !important}
.text-white{color:#FFFFFF !important}
.text-info{color:#17a2b8 !important}

.bg-danger,.bg-error{background:#dc3545 !important;color:#fff}
.bg-success{background:#28a745 !important;color:#fff}
.bg-warning{background:#ffc107 !important;color:#fff}
.bg-info{background-color:#17a2b8 !important;color: #fff}

.box-shadow{box-shadow: 0 1px 5px #c8c8c8 !important;}

.header-logo .logo-img img{width:40px;height:auto;}
.header-logo .brand-name{font-size:18px;color:#000}
.header-logo{padding:10px 0 5px}
.cursor{cursor:pointer;}
/*auth css*/
.auth-bg-image{position:fixed;top:0;left:0;width:100%;height:100%;background-repeat: no-repeat;background-position:center;background-size:cover;}
.auth-bg:after{content:'';position:absolute;background:rgba(0,0,0,.5);top:0;left:0;width:100%;height:100%;z-index:1}
.auth-sidebar{position:fixed;left:0;top:0;background:#fff;width:35%;height:100%;z-index:2;padding:15px 40px}
.auth-sidebar .welcome-text{font-size:32px;line-height:40px;margin:30px 0}
.auth-sidebar .welcome-text span{display:block;font-size:42px;line-height:50px}
.auth-sidebar .btn{margin-left:10px;min-width:auto;width:100%;background:transparent;border-radius:25px;color:#000;border:1px solid #dedede;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.auth-sidebar .btn:first-child{margin-left:0}
.auth-sidebar .pass-change-link{font-size:15px}
/*form-group*/
.form-group label{display:block;margin-bottom:5px;font-size:16px}
.form-group{margin-bottom:15px;display:block;} 
.form-group .input-field{border-radius:5px;width:100%;height:42px;padding:0 10px;border:1px solid #dedede;font-size:15px}
.header-center-content .form-group .input-field,.header-center-content .btn,.page-header .form-group .input-field,.page-header .btn{height:52px}

.input-wrapper {
    position: relative;
    align-items: center;
}

.input-field {
    width: 100%;
    padding-right: 30px; /* Ensure space for the eye icon */
}

.toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
    top:13px;
}

.toggle-password i {
    font-size: 18px;
    color: #555;
}

.policy-check label{position:absolute; top:12px}
.policy-check #agree{width:18px;height:18px}

/*Header nav*/
.header{width:100%;font-size:16px;}
.top-header-content,.page-header{padding:15px 0;background:transparent;transition: top 0.3s ease-in-out;}
.page-header{position:fixed;top:0;width:100%;background:#fff;z-index:100;border-bottom:1px solid #dedede;}
.page-header + .content{margin-top:83px}
.page-header + .content .page-title{margin-top:100px}
.sticky-header{position:fixed;width:100%;z-index:20;background:#fff;color:#000;border-bottom:1px solid #dedede;}
.sticky-header .header-logo .brand-name,.sticky-header .header-dropdown-btn,.sticky-header .header-dropdown-btn .name{color:#000 !important}
.sticky-header .header-dropdown-btn:hover,.sticky-header .header-dropdown-btn:hover .name,.page-header .header-dropdown-btn:hover,.page-header .header-dropdown-btn:hover .name{color:#fff !important}
.header-bg-content{position:relative;min-height:500px}
.header-bg{position:relative;background:url('../img/header-bg.jpg') no-repeat top center;background-size:cover;z-index:100;color:#fff}
.header-bg-content .header-logo .brand-name{color:#fff}
.header-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Adjust the opacity as needed */
    z-index: -1; /* Ensure the black overlay is below any content within .header-bg */
}

/*header-nav*/
.header-dropdown-btn{border-radius:25px;margin-left:10px;height:50px;padding:0 10px;display:flex;align-items: center;color:#fff;cursor:pointer;transition: opacity 0.3s ease;min-width:110px;justify-content: space-evenly;font-size:15px}
.header-dropdown-btn:hover,.header-dropdown-btn.active{background:rgba(0,0,0,.8);color:#fff !important;}
.page-header .header-dropdown-btn .name,.page-header .header-dropdown-btn{color:#000 !important}
.header-dropdown-btn.active,.sticky-header .header-dropdown-btn.active .name{color:#fff !important}
.page-header a.header-dropdown-btn.active{color:#fff !important;}
.header-dropdown-btn:hover,.header-dropdown-btn:active{background:rgba(0,0,0,.5);color:#fff}
.avtar{display:flex;align-items: center;justify-content:center;margin-right:3px}
.avtar img{width:32px;height:32px;border-radius:50%;vertical-align:middle;}
.header-dropdown-btn .name{display: flex;
    align-items: center;
    font-size: 15px;
    line-height:15px;
    font-weight: 500;
    color: #fff;}
.header-dropdown-btn .fa-icon {
    margin-left: 5px; /* Add some space between name and icon */
}
.header-dropdown-btn a{color:#fff}
.header-nav{position: relative;}
.header-nav .header-dropdown-content {
    display:none;
    position: absolute;
    top:100%;
    background-color: #f9f9f9;
    border-radius: 10px;
    min-width: 220px;
    z-index: 20;
    margin-top: 20px;
    right:0;
    transform: translateY(-10px);
    box-shadow: 0 1px 5px #c8c8c8;
}
/* Add the two arrow tooltip */
.header-nav .header-dropdown-content::after {
  content: '';
  position: absolute;
  top: -15px; /* Position above the dropdown */
  left: 80%;
  transform: translateX(-50%);
  border-style: solid;
  z-index: 21;
}

/* Inner arrow (actual visible tooltip arrow) */
.header-nav .header-dropdown-content::after {
  border-width: 8px;
  border-color: transparent transparent #f9f9f9 transparent;
}

/*.header-dropdown-content li {
    border-bottom: 1px solid #f0f0f0;
}

.header-dropdown-content li:last-child {
    border-bottom: none;
}*/

.header-dropdown-content li a {
    color: #333;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display:block;
    padding:10px 10px;
    font-size:15px;

}

.header-dropdown-content li:first-child a:hover{border-top-left-radius:10px;border-top-right-radius:10px}
.header-dropdown-content li:last-child a:hover{border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.header-dropdown-content li a:hover {
    color: #fff;
    background-color:#0076ff;
}

.header-center-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    height: 100px;
    width: 100%;
    top: 45%;
}
.header-center-content .header-search-bar,.page-header .header-search-bar{width:590px;margin:0 auto;}
.home-header-center-content h1{font-size:22px;line-height:32px;margin-bottom:15px;}
.home-header .header-center-content h1{font-size:22px !important;}
.header-no-form h1{width:auto;margin-left:none}
.header .form-group{margin-bottom:0}
.header .form .input-field{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:25px;border-bottom-left-radius:25px;}
.header .form .btn{border-top-left-radius:0;border-bottom-left-radius:0;min-width:120px;border-top-right-radius:25px;
    border-bottom-right-radius: 25px;}
.input-field-img {
    background: url(../img/loupe.png) no-repeat 15px 16px #f0f0f0;
    padding-left: 40px !important;
    background-size: 18px;
}

.header-search-bar{transition: all 0.3s ease-in-out;}
.search-bar-fixed {
    position: fixed;
    top: 0;
    
    width:590px;
    z-index:20;
  
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
   
}
.filter-animation-content{padding:20px 0;background:#fff;width:100%}
.filter-fix{position:fixed;width:100%;background:#fff;left:0;z-index:20;top:81px;padding-right:15px;padding-left:15px}
.filter-fix .filter-content{width:calc(100% - 30px);margin:0 auto;}
.filter-fix + .grid-container,.search-page-body .filter-fix + .grid-section{margin-top:75px}
.cat-content{display:flex;justify-content:center;margin-bottom:20px}
.cat-list{display:flex;gap:15px}
.cat-list li{padding:0 5px;cursor:pointer;transition: transform 0.4s ease-in-out, color 0.3s ease-in-out;border-bottom:1px solid transparent;}
.cat-list li a{color:#000;transition: color 0.3s ease-in-out;}
.cat-list li.active,.cat-list li:hover{color:#000;border-bottom:1px solid #000;transition: transform 0.4s ease-in-out, border-bottom 0.4s ease-in-out;}

.filter-tab-list li{border:1px solid #e2e2e2;border-radius:10px;cursor:pointer;margin-left:15px;white-space: nowrap;transition: transform 0.4s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;}
.filter-tab-list li a{color:#000;font-size:14px;padding:8px 18px;display:block;}
.filter-tab-list li.active a{color:#000;}
.filter-tab-list li:first-child{margin-left:0}
.filter-tab-scroll-wrapper {
    overflow-x: auto; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    position: relative; 
    padding: 0; 
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

/* Hides scrollbar in WebKit browsers */
.filter-tab-scroll-wrapper::-webkit-scrollbar {
    display: none; 
}

/* List that holds the tabs */
.filter-tab-list {
    display:flex;
    justify-content:center;
    flex-wrap: nowrap;
    margin-right: 35px;
    margin-left:35px;
    display: inline-flex; /* Keep list items in a single line */
    width: max-content; /* Makes the list width based on its content */
}

.filter-tab-list li.active,.filter-tab-list li:hover{background:#000;color:#fff;transition: transform 0.4s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;}
.filter-tab-list li.active a,.filter-tab-list li:hover a{color:#fff}
/* Scroll buttons */
.scroll-left, .scroll-right {
    background:rgba(255,255,255,1);
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
    color: #007bff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}

/*.grid-container {
    line-height: 0;
  -webkit-column-count: 4;
  -webkit-column-gap: 30px;
  -moz-column-count: 4;
  -moz-column-gap: 30px;
  column-count: 4;
  column-gap: 30px;
  margin-top:15px;
  margin-bottom:30px;
}*/

.grid-container{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:30px}
.grid-container .grid-column-container{flex:1} 
.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom:15px;
    transition: background-color 0.3s ease,
}
.grid-item a .name{position:absolute;bottom:25px;left:15px;z-index:10;color:#fff;opacity:0;font-size:15px}
.grid-item a:hover .name{opacity:1}

.grid-item a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 35%, transparent 65%, rgba(0, 0, 0, .45));
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease; /* Add transition for smooth effect */
}

.grid-item a:hover:before {
    opacity: 1;
}

/*.grid-item a:after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    height: 25%;
    width: 100%;
    z-index: 2; 
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease; 
}

.grid-item a:hover:after {
    opacity: 1;
}
*/

.grid-container .grid-column-container .grid-item:last-child{margin-bottom:0}
.grid-item .grid-item-img {
    width: 100%;
    height:100%;
    border-radius: 8px;
    transition: transform 0.4s ease-in-out;
}

.grid-item:hover .grid-item-img {
    transform: scale(1.05);
}

.grid-item:hover .grid-item-img{
    transform: scale(1);
}


.book-mark-btn{top: 15px;
    line-height: 20px;
    border: 1px solid transparent;
    padding: 6px 8px;
    position: absolute;
    z-index: 3;
    transition: opacity 0.8s ease;opacity:0;
    background:rgba(255,255,255,.3);
    cursor: pointer;
    left:15px;
    border-radius: 5px;font-size:15px}

.book-mark-btn.active{opacity:1;background:#0076ff;border:1px solid rgba(255,255,255,1)}
    
.book-mark-btn .fa-icon{color:#fff}
.grid-item:hover .book-mark-btn {opacity: 1;}
.book-mark-btn:hover{border: 1px solid rgba(255,255,255,1);}

/* Positioning for loader and image container */

.grid-item {
    position: relative;
    background-color: #dfdfdf; 
}
.grid-item a{display:block;line-height:0}

.grid-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%; /* Full width */
    height: 200%; /* Double the height */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5));
    animation: shine 2s infinite; /* Animation duration and loop */
}
.grid-item img{position:relative;z-index:2}

@keyframes shine {
    0% {
        transform: translateX(-100%); /* Start off-screen */
    }
    100% {
        transform: translateX(100%); /* Move to the right */
    }
}

/* Preview image container */
.primary-bg{background:rgba(211,211,211,.4);margin:-2px -15px 20px;padding:15px 0;}
.preview-image-thumb {
    width: 187.5px;
    min-width:187.5px;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 523px; 
    margin-right: 15px;
}
.preview-image-list {
    list-style: none; 
    padding: 0;
    margin: 0; 
}


.preview-image-list li {
    width: 100%;
    height: auto;
    margin-bottom: 6px; 
}


.preview-image-list li:last-child {
    margin-bottom: 0; 
}


.preview-image-list li a {
    display: block; 
    line-height: 0; 
    overflow: hidden; 
    display: flex;
    justify-content:center

}

.preview-image-list li img {
    max-width: 100%; 
    width:auto;
    height: auto; 
    display: block; 
    max-height:126.75px;
    object-fit:contain;
}


/* Thumbnail images */
.preview-image-thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.preview-image-thumb img:hover {
    opacity: 0.7;
}

/* Preview main image */
.preview-image {
    width:auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    min-height:auto;
    max-height:524px;
}

.preview-image .book-mark-btn{opacity:0}
.preview-image-list li img.active{border:2px solid #0076ff;border-radius:10px} 

.preview-image img {
    border-radius: 10px;
    object-fit: contain;
    visibility: hidden;
    width:100%;
    height:100%;
}

.preview-image img.loaded {
    visibility: visible; /* Make image visible once it's loaded */
    transition: opacity 0.3s ease;
    opacity: 1;
}

.preview-image img.loading {
    opacity: 0; /* Start with zero opacity until image is loaded */
}

.preview-image.d-flex{align-items:flex-start !important; }

/* Scrollbar for thumbnails */
.preview-image-thumb::-webkit-scrollbar {
    width: 2px;
    display: none;
}

.preview-image-thumb::-webkit-scrollbar-thumb {
    background-color: #0076ff;
    border-radius: 5px;
}


.media-preview.align-item{align-items: flex-start !important;}

.preview-section-flex .download-side-panel .download-item-box{
   overflow-y: scroll;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;}

.preview-section-flex .download-side-panel .download-item-box::-webkit-scrollbar{display:none}

.filter-keys-box{background: #fff;
    border-radius: 10px;
    padding: 15px 20px 5px;
    margin: 0 0 12px;
    max-height: 133px;
    overflow-y: scroll;
}

.filter-keys-box::-webkit-scrollbar{display:none;}

.download-item-box{background:#fff}
/* Side panel adjustments */
.side-panel {
    min-width: 350px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Download button */
.download-item-box{padding:10px 20px}
.download-item-box .btn {
    padding: 10px 15px;
    background: #0076ff;
    color: #fff;
    border-radius: 25px;
    min-width: 150px;
}

.download-item-box a.btn {
    text-align: center;
    /* line-height: 23px; */
    display: flex;
    width: 150px;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.none-disable{opacity:.5;pointer-events:none;}
.download-size{position: relative;}
.download-size .icon{position:absolute;color: #FFD700;top:2px;margin-left:5px;}
/* Dropdown for download */
.dropdown-download-item {
    padding: 0 50px 0 0;
    font-size: 15px;
}

.dropdown-download-item .downlaod-title{padding-left:25px;}

.dropdown-download-item .label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.dropdown-download-item .hidden-input {
    margin-right: 10px;
    opacity: 1;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Download text alignment */
/* .download-text {
    display: flex;
    justify-content: space-around;
    flex: 2;
    cursor: pointer;
} */

/* .download-text,.downlaod-title span:last-child{margin-right:40px;} */

.downlaod-title span{padding-right:8px;}
/* Disabled download button initially */
.download-btn {
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    font-size: 15px;
}

/* Enabled download button */
.download-btn.active {
    pointer-events: auto;
    opacity: 1;
}

.download-item-box .link {
    text-decoration: underline;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .preview-image {
        width: 100%;
        height:100%;
        max-width: 100%;
    }

    .side-panel {
        min-width: 100%;
        margin-top: 0;
        margin-left:0;
    }
    .download-form{margin-top:10px;}
    .download-item-box .btn{height:52px;}
    .download-item-box a.btn{height:52px;line-height:52px;width:100%;}
    .pricing .btn-list{display:block !important;}
    .pricing .btn-list .btn-list-btn{margin-bottom:15px;}
    .pricing .btn-list .btn-list-btn:last-child{margin-bottom:0;}
}

/*pricing-bg*/
.pricing-section-bg{background:#f0f0f0;padding:20px 15px;margin:0 -15px;}
.pricing-section-box{width:420px;margin:15px auto;padding:25px 25px;border-radius:20px;}
.pricing-advantages-section{padding:50px 0} 
.pricing .container,.pricing-advantages-section .container{width:calc(100% - 5%);margin:0 auto;}
.pricing-section-box .pricing-feature-list li{margin-bottom:20px;font-size:14px;}
.pricing-section-box .btn{width:140px;text-align:center;border:1px solid #dedede;margin:0 auto;line-height:42px;box-shadow: 0 1px 5px #c8c8c8 !important;}
.pricing-section-box .h3{margin-bottom:20px;font-size:28px;}
.pricing-section-box .h3 span{font-size:16px;}
.pricing-section-box .h4{font-size:15px;margin-bottom:5px;}


.table-content{margin-right:20px}
.table{box-shadow: 0 1px 5px #c8c8c8;
    border: 1px solid #dedede;
    border-radius: 6px;
    background-color: #fff;
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;font-size:16px;flex-wrap:wrap;}

.table thead {
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
}

.table td,.table th {
    padding: 10px 10px 10px 15px;
}
.table td:nth-child(2),.table td:nth-child(3) {
    text-align:center;
}
 
.shadow-box{border: 1px solid #dedede;
    box-shadow: 0 1px 5px #c8c8c8;
    border-radius: 6px;
    background: #fff;
    margin: 0 0 20px;
    cursor: pointer;padding:18px 15px}
.shadow-box:last-child{margin-bottom:0}
.pricing-section-box .ribbon {
    position: relative;
    display: inline-block;
    min-width: 160px;
    height: 24px;
    line-height: 24px;
    padding-left: 25px;
    background: #32864c;
    color: #fff;
    font-size:14px;margin-bottom:5px;margin-left:-25px;
}

.pricing-section-box .ribbon:after {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%) rotate(45deg);
    width: 24px;
    height: 24px;
    background: #f0f0f0;
    content: "";
}

.pricing-info-content .title{display:block;font-size:16px;margin-bottom:0;text-transform:uppercase;margin-bottom:5px}
.pricing-info-content .price{font-size:14px;line-height:20px;display:block;margin-bottom:3px}
.pricing-info-content .price .price-highlight{color:#3b9e62;font-size:24px;line-height:30px}
.pricing-info-content .info{color:#777}
.pricing-info-content .info .info-highlight{color:#000}
.pricing-info-content .vat{margin-top:6px;font-size:11px}
.pricing-sub-btn{font-size:16px;background:#44b678;color:#fff;min-width:140px;height:42px;border-radius:25px;line-height:42px;text-align:center;margin-left:40px;margin-top:20px;}
.pricing-sub-btn a{display:block;color:#fff;text-decoration:none;padding:0 5px;}
.pricing-advantages-section .advantage-item{width:25%;text-align:center;color:#000;font-size:14px;line-height:22px;padding:0 15px;}
.pricing-advantages-section .advantage-item h2{margin:15px 0 0;color:#000;font-size:16px;line-height:22px;}
.section-title{font-size:22px;line-height:28px;margin-bottom:20px;}
.faq-section .container{width:800px;margin:0 auto;}
.faq-item .faq-ques-item{border:1px solid #dedede;border-radius:10px;padding:15px 15px;margin-bottom:15px;cursor: pointer;}
.faq-item-content h6,.download-item-box h3{font-size:17px}
.faq-item-content h6{font-size:16px;}
.faq-item-content p{font-size:15px;color:#000;line-height:22px;margin:0 0 25px}
.faq-ans-item{display:none;}
.floating-action{ position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    text-align: center;}
.floating-btn {
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 60px; 
    height: 60px; 
    background-color: #fff; 
    border-radius: 50%; 
    position: fixed; 
    bottom: 15px; 
    right: 15px; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: pointer; 
}

.floating-btn {
    background-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    bottom: 15px; 
    right: 15px; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: pointer; 
}

.floating-btn img {
    width: 32px;
    height: 32px;
}

.valuation {
    position: fixed;
    bottom: -300px; /* Initially hidden offscreen */
    right: 20px;
    width: 400px;
    transition: bottom 0.5s ease;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.valuation.show {
    bottom: 80px; /* Adjust this value to match the height of the floating button */
}

.rating-value {
    cursor: pointer;
    padding: 10px;
    background-color: #f0f0f0;
    margin-right: 5px;
    border-radius: 5px;
    flex: 1;
    text-align: center;
}

.rating-value:hover {
    background-color: #007bff;
    color: #fff;
}
.rating-text {
    margin-top: 10px;
    font-size: 12px;
}
.valuation p{margin-bottom:10px}
.valuation-input-field .textarea{width:100%;padding:10px 10px;border-radius:5px;margin-bottom:5px}
.valuation-btn{width:100%;height:32px;border-radius:5px;background:#32864c;color:#fff}

.license-section h2{font-size:22px;line-height:28px;margin-bottom:5px}
.license-section h3,.policy-section-content h3{font-size:18px;line-height:24px;text-align:left;margin:20px 0 0}
.policy-section-content .small-text{font-size:15px;}
.license-section h5{font-size:15px;text-align:left;padding:10px 0 0;margin-bottom:5px;}
.license-section p{text-align:left;margin-bottom:10px}
.fiter-key-label{margin-top:5px}
.filter-keys span{
    margin-bottom:10px;
    border: 1px solid #dedede;
    padding: 4px 12px;
    border-radius: 25px;margin-left:10px;font-size:14px}
.filter-keys{margin-bottom:0 !important}
.filter-key-text{justify-content:flex-start !important}

.sidebar-ads{padding-top:50px}
.sidebar-ads img{border-radius:10px}

.sidebar-ads.ads-float{position:fixed;top:83px;width:auto;right:15px;z-index: 10;background:#fff}

.policy-section{margin-top:20px;margin-bottom:20px;text-align:left;font-size:14px}
.policy-section h4{font-size:16px;}
.subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
}


.policy-section h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #000;
}

.policy-section h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.policy-section ul,.list-section ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.policy-section ul ul,.list-section ul ul {
    margin-left: 20px;
}
.policy-section ul ul li,.list-section ul ul li {
    list-style:disc;margin-left:10px;
}
.policy-section ul li,.list-section ul li {
    margin-bottom: 10px;
}

.policy-section li b,.list-section li b {
    color: #333;
}

.license-section .small-text{font-size:16px}
#policyCheckbox + a{margin-left:3px}
.cursor{cursor:pointer;}

.footer-bg {
    font-size: 14px;
    background: #0076ff;
    color: #fff;
    padding: 5px 0;
    margin-top:30px;
    /* position: fixed;
    bottom:0;
    width:100%;
    z-index:100; */
}


.seperator-or{position:relative;text-align:center;z-index:1;margin:15px 0;font-size:16px}
.seperator-or span{background:#fff;padding:0 15px}
.seperator-or:after{content:'';position:absolute;top:0;left:0;width:100%;border-bottom:1px solid #dedede;margin:12px 0;z-index:-1}
.download-form p{font-size:14px}
.download-form p.desclaimer-text{font-size:13px;line-height:16px}
.download-form p.desclaimer-text span{font-weight:bold;}

.contact-section,.form-section{width:500px;margin:25px auto;text-align:left;}

.contact-section h2,.section h2{margin-bottom:20px;margin-top:30px;font-size:22px;}
.contact-section .textarea{width:100%;padding:10px 10px;border-radius:5px;min-height:120px;border:1px solid #dedede;font-size:15px}
.contact-section .btn,.re-form .btn{background: transparent;
    border-radius: 25px;
    color: #000;
    border: 1px solid #dedede;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.contact-section .btn:hover{opacity:.8}
.contact-section .form p{font-size:13px;margin:5px 0}


.premium-btn{height:50px;background: #000;color:#fff;border-radius:25px;min-width:110px;text-align:center;font-size:15px;}
.premium-btn a{display:block;color:#fff;line-height:50px;}
.premium-btn .icon{color:#FFD700;font-size:18px;}
#google-signup-btn a{color:#000;display:flex;justify-content: center;align-items: center;gap:5px}



.premium-section h2{margin-bottom:10px;text-align:center}
.premium-section h3{margin-bottom:5px;margin-top:25px;font-size:18px;}
.premium-section p{margin-bottom:25px;font-size:15px;margin-left:20px}
.premium-form{position: relative;}

.premium-form-link-btn .link-btn{background:transparent;border:none}

.header-dropdown-content .nav-premium-btn{display:none}

.premium-section .font-bold{font-size:16px;}

.nofiy-btn{background:#000;border-radius:25px !important;color:#FFD700;line-height:42px;width:180px;margin:0 auto;}
.user-form{height:calc(100% - 200px);overflow-y:scroll;}
.user-form::-webkit-scrollbar{display:none;}
.auth-form-group{display:none;}
.auth-form-group.active{display:block;}
.no-event-field{pointer-events:none;}
#response-message{font-size:14px;}


body.modal-open {
    overflow: hidden;
}

/* Modal Popup */
.modal-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5); /* Overlay layer */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* For smooth transition */
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

/* Modal Content */
.modal-content {
    background: #fff;
    border-radius: 5px;
    max-width: 400px;
    min-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.message-popup .modal-header {
    justify-content: space-between;
    align-items: center;
    text-align:center;
    font-size:50px;
    position: relative;
    background:#0076ff;
    min-height:120px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    border-radius:5px;
}
    

.modal-header .close {
    position: absolute;
    top:10px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
    color:white;
    width:26px;height:26px;border-radius:100%;
    border:1px solid #fff;line-height:26px;
    
}

/* Show the modal */
.modal-popup.active {
    visibility: visible;
    opacity: 1;
}
.modal-body{padding:15px 15px;}
.modal-body .small-font,.response-message.small-font{font-size:15px;padding:5px 0;line-height:26px;}
.modal-body .resend-btn,#userModal .primary-btn{padding:10px 20px;margin:10px auto;display:block;background: transparent;
    border-radius: 25px;
    color: #000;
    border: 1px solid #dedede;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.click-btn{cursor: pointer;color:#0076ff;}
.base-modal .modal-header{background:#0076ff;color:#fff;text-align:center;padding:15px 0;position: relative;border-top-left-radius:5px;border-top-right-radius:5px;}
.base-modal .form-group .btn{border-radius:25px;margin:15px auto 10px;background:#000;color:#FFD700;}
.base-modal .black-bg{background:#000;color:#FFD700;}
.base-modal .form-group:last-child{margin-bottom:0;}
.base-modal .modal-header .close{top:14px;}
#premium-modal .form-group .input-field::placeholder {
    text-align: center; 
 }
 
 /* or, for legacy browsers */
 
#premium-modal .form-group .input-field::-webkit-input-placeholder {
    text-align: center;
 }
 
 #premium-modal .form-group .input-field:-moz-placeholder { /* Firefox 18- */
    text-align: center;  
 }
 
 #premium-modal .form-group .input-field::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;  
 }
 
 #premium-modal .form-group .input-field:-ms-input-placeholder {  
    text-align: center; 
 }
 .line-text{text-decoration:underline;cursor: pointer;}
 .line-text:hover{color: #007bff;}
 .re-form .form-group label{width:300px;}

 @media screen and (min-width:1600px){
    .preview-image{width:768px;}
    }

 @media screen and (max-width: 1400px) {
    .search-bar-fixed{width:38%;margin:0 auto;}
    .media-preview{display:block !important;}
    .preview-image-thumb{min-width:100%;width:100%;overflow-x:scroll;}
    .preview-image-thumb ul{display:flex;margin-top:10px;justify-content:center;}
    .preview-image-thumb ul li{margin-right:10px;width:auto;}
    .preview-image-thumb ul li:last-child{margin-right:0;}
    .preview-image{width:650px;height:auto;margin:0 auto;}
 }

@media screen and (max-width: 1200px) {
    .search-bar-fixed{width:38%;margin:0 auto;}
    .preview-image,.preview-section-flex .download-side-panel .download-item-box{height:auto;}
    .auth-sidebar{padding:15px 15px}
    .filter-keys span{padding:4px 6px;}
}

@media screen and (max-width: 1024px) {
   .preview-image-thumb{min-width:120px}
   .media-preview{display:block !important;}
   .preview-image-thumb{margin-right:0;width:100%}
   .preview-image-list{display:flex;width:100%;margin:10px 0}
   .preview-image-list li{margin-left:10px}
   .preview-image-list li:first-child{margin-left:0}
   .dropdown-download-item .label{margin-bottom:22px}
   .preview-section-flex .download-side-panel .download-item-box{height:auto;}
   .contact-section,.sm-container,.form-section{width:calc(100% - 50px);}
   .download-form .no-sm-flex{display:block !important;}
   .download-form .no-sm-flex .btn{margin-bottom:10px;}
   .book-mark-btn{opacity:1;border: 1px solid rgba(255,255,255,1)}
   .grid-item a::before,.grid-item a .name {opacity: 1;}
    .preview-image{height:auto !important;max-height:100%;max-width:100%;width:100%;}
    .preview-image-list li img{max-height:100% !important;}
    .preview-image-list li:last-child{margin-bottom:6px;}
}

/* Responsive layout adjustments */
@media screen and (max-width: 992px) {
    .preview-image img{width:100% !important;height:100% !important;}
    .preview-image{width:100% !important;}
    .preview-image-thumb ul{justify-content:left;}
    .preview-image-thumb ul li{margin-right:0;}
   .page-header + .content .page-title{margin-top:170px;}
    .side-panel{width:auto;margin-bottom:0;margin-left:0;}
    .filter-keys-box{max-height:100%;}
    /* .preview-image{height:100%} */
    .search-bar-fixed,.page-header .header-search-bar{width:42%;margin:0 auto}
    .header-logo .logo-img img{width:30px}
    .header-bg-content .header-logo .brand-name,.header-logo .brand-name{font-size:18px}
    .header-dropdown-btn{min-width:auto}
    /*.grid-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }*/
    .filter-fix{top:81px}
    .pricing-advantages-section .per-row{flex: 0 0 48%}
    .pricing-advantages-section .advantage-item{width:250px;margin-bottom:15px}
    .re-form .form-group{display:block !important}
    .faq-section .container{width:100%;}
    .preview-section-flex{display:block !important;}
    .dropdown-download-item{padding:0 20px 0 0;}
    /*.grid-container {
        line-height: 0;
        -webkit-column-count: 3;
        -webkit-column-gap: 15px;
        -moz-column-count: 3;
        -moz-column-gap: 15px;
        column-count: 3;
        column-gap: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
    }*/
    
}

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

    .body {
        font-size: 14px; /* Increase font size for larger screens */
        line-height: 1.4;
    }
    .avtar{margin-right:5px;}
    .home-header-center-content h1{font-size:16px;width:auto;line-height:30px;width:100%;margin:0 auto 10px;}
    .related-section{margin-right:0}
    .auth-sidebar{width:100%}

    .sm-container,.license-section h5{width:100%;margin-left:auto;margin-right:auto;}
    .sm-container{width: calc(100% - 30px);}
    .grid-container .grid-column-container {
        flex: 1 1 calc(100%); /* 2 columns */
    }
    
    .premium-btn{display:none;}
    .header-dropdown-content .nav-premium-btn{display:block;background:#000;color:#fff;}
    .header-dropdown-content .nav-premium-btn a{color:#fff;}
    .header-dropdown-content .nav-premium-btn a .icon{color:#FFD700;}
    /*.grid-container {
        line-height: 0;
        -webkit-column-count: 2;
        -webkit-column-gap: 15px;
        -moz-column-count: 2;
        -moz-column-gap: 15px;
        column-count: 2;
        column-gap: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
    }*/
    .grid-item{margin-bottom:15px}
    .header-center-content .header-search-bar, .page-header .header-search-bar{width:auto;}
    .header-logo .brand-name{font-size:18px}
    .header-dropdown-btn{min-width:auto}
    .search-bar-fixed{width:100%;background:#fff;left:0;padding:15px 15px;top:81px}
    .page-header .header-search-bar{position:absolute;top:81px;background:#fff;padding:10px 15px;left:0;width:100%}
    .media-preview,.preview-section-flex{display:block !important;padding:1px 0}
    .page-header + .content{
        margin-top: 153px;
    }
    .filter-fix{top:153px}
    
    .filter-fix + .grid-container, .search-page-body .filter-fix + .grid-section{margin-top:80px}
    .page-body .filter-fix + .grid-container{margin-top:280px}
    .preview-image-list{display:flex;margin:15px 0 11px;align-items:center;}
    .preview-image-list li{min-width:140px;margin-left:10px}
    .preview-image-list li:first-child{margin-left:0}
    .preview-image-thumb{width:100%;overflow-x:scroll;margin-right:0}
    .related-section h3{margin-top:0}
    .sticky-header{z-index:999}
    #dropdown-download-button{display:none !important;width:100%;position:fixed;bottom:0;width:100%;border-radius:0;left:0;background:#0076ff;color:#fff;z-index:100}
/*    .download-item-box{position:fixed;bottom:0px;background:#fff;width:100%;left:0;border-radius:0;display:none}*/
    /*.download-item-box {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    }*/
    .download-item-box.show{max-height:500px;transition: max-height 0.3s ease-in;}
    .download-item-box .btn{width:100%;margin-bottom:10px}
    .no-sm-flex{display:block !important;}
    .pricing .container,.pricing-advantages-section .container,.faq-section .container{width:calc(100% - 30px);margin:0 auto;}
    .table-content{margin-right:0;margin-bottom:25px}
    .pricing-advantages-section .advantage-item{width:100%;text-align:center;}
    .pricing-info-content{min-width:auto}
    .faq-section{margin:0}
    .filter-tab-scroll-wrapper{justify-content:left;padding:0 35px}
    .dropdown-download-item .label{margin-bottom:15px}
    .filter-keys{margin-bottom:0}
    .sidebar-ads{margin-top:0}
    .filter-keys span{margin-top:0;margin-bottom:0;padding-left:10px;padding-right:10px;border:none;margin-right:0;margin-left:0;}
    .preview-section-flex .download-side-panel .download-item-box{height:auto;overflow:auto;}
    .filter-key-text{margin-bottom:15px}
    .contact-section,.form-section{width:100%}
    .premium-btn{min-width:75px;}
    .header-dropdown-btn{margin-left:5px;padding: 0 12px;}
    .contact-form .btn,.re-form .btn{width:100%;}
    .header-logo{line-height:16px;padding:4px 0 5px;}
    .header-bg-content .header-logo .brand-name,.header-logo .brand-name{font-size:18px}
    .filter-tab-list{margin-left:0;}
    .modal-content{max-width:calc(100% - 50px);}


    .modal-preview-img .carousel-item .grid-item-img{width:100%;height:auto;}
    .modal-preview-img .carousel-item{width:100%;height:100%;}
    .preview-image-modal .modal-content{height:auto !important;}
}




input.is-invalid {
    border: 1px solid red !important;
}
label.is-invalid{
    color: red;
    font-size:13px;
    margin:5px 0 0;
}
.invalid-feedback{color:red;font-size:13px;display:block;margin:5px 0 0}
.invalid-feedback strong{font-weight:400;}
#password_confirmation-error{
    display: none !important;
}
.textarea{
  height: 75px !important;
  width: 100%;
}
.card-header{margin-bottom:5px;font-size:16px}
.notifiy-field{padding:0 15px !important;}
/* 
#addTagModal{opacity:1;visibility:visible;} */
.base-modal ul{display:flex;align-items: center;justify-content: flex-start;flex-wrap:wrap;}
.base-modal ul li{border:1px solid #dedede;padding:5px 10px;margin-bottom:10px;border-radius:25px;margin-left:10px;}
.base-modal ul li:first-child{margin-left:0;}

.grid-tag-icon,.grid-delete-icon,.grid-preview-img-icon{position:absolute;top:15px;right:15px;z-index:10;background: rgba(0, 0,0, .5);padding:6px 10px;border-radius:5px;font-size:15px;color:#fff;border:transparent}
.grid-delete-icon{bottom:15px;right:15px;top:auto;}
.grid-preview-img-icon{right:60px}
.grid-tag-icon:hover,.grid-delete-icon:hover,.grid-preview-img-icon:hover{border: 1px solid rgba(255, 255, 255, 1);}


/*--carousel-container--*/
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 100%;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.grid-item-img {
    width: 100%;
    height: auto;
}

.carousel-prev, .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.carousel-item.active {
    display: block;
}
.tag-re-content{padding:15px 15px;}
.tag-modal-content .modal-body{padding:0;}

.modal-preview-img .carousel-item{height:auto;width:100%;position: relative;}
.modal-preview-img .grid-item-img{height:85vh;width:auto;}
.modal-preview-img .carousel-item .name{position:absolute;bottom:10px;z-index: 1;left:10px;}
.modal-preview-img .grid-delete-icon{background:#dedede;color:#000;}
.modal-preview-img .grid-delete-img,.grid-delete-img{right:60px;}


.preview-image-modal .modal-content{width:calc(100% - 30px);height:calc(100% - 30px);max-width:calc(100% - 30px);min-width:calc(100% - 30px);}

/* Container that holds the image */
.zoom-container {
    cursor: grab;
    touch-action: none; /* Disable default gestures for mobile */
    cursor: zoom-in;
}

/* The image that can be zoomed and dragged */
.zoom-image {
    width: 100%; /* Full width initially */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.25s ease; /* Smooth transition for zoom */
    transform-origin: center center; /* Set the origin point for zoom */
}

#userModal{z-index:99999;}

.pagination{background:rgba(255,255,255,.5);;position:fixed;right:10px;bottom:10px;z-index:10;display:flex;border-radius:5px;}
.pagination li a{color:#000;padding:6px 15px;border-right:1px solid #dedede;display:block}
.pagination li a.active{background:rgba(0,0,0,1);color: #fff;}
.pagination li span{color:#FFF;padding:6px 15px;border-right:1px solid #dedede;display:block}
.pagination li a.active,.pagination li.active{background:rgba(0,0,0,1);color: #fff;}

/* Main wrapper for the content and sidebar */
.ai-wrapper-content {
    margin: 0 auto;
    display: flex;
    gap: 20px;
}

/* Main content area, this will scroll */
.ai-generate-wrapper {
    flex: 3; /* This gives it more space than the sidebar */
    background-color: #f4f8fb;
    padding: 20px 20px 20px 15px;
    margin-left:-15px;
    border-right:1px solid #dedede;
    /* Make it scrollable */
}

/* Sidebar - fixed in place */
.ai-generate-sidebar {
    flex: 1;
    padding: 20px 0 20px 0;
    position: sticky;
    top: 20px; /* Adjust this based on how much space you want above the sidebar */
    height: fit-content; /* Ensures the sidebar only takes up the space it needs */
    align-self:flex-start
}


.ai-sidebar-section{border-bottom:1px solid #dedede;padding-bottom:10px;margin-bottom:10px;}
.ai-form-feature .ai-generate-feature-list{border-bottom:1px solid #dedede;padding-bottom:10px;}
.ai-sidebar-section:last-child{border-bottom:0;}
.ai-sidebar-tab-list{width:342px;flex-wrap:wrap;}
.last-ai-sidebar{border-bottom:0 !important;}
.ai-feature-list li{border:1px solid #dedede;padding:8px 10px;min-width:90px;flex-wrap: wrap;border-radius:5px;margin-right:10px;margin-bottom:10px;cursor: pointer;}
.ai-feature-list li.active,.ai-feature-list li:hover{border:1px solid #000}
.ai-feature-list li:first-child{margin-left:0;}
.ai-sidebar-section h3{margin-bottom:5px;font-size:15px;}
.ai-header-nav-list a{color: #000;margin-left:20px;align-items:center;vertical-align:middle;}
.ai-header-nav-list a .icon{margin-right:5px;}

.ai-generate-textarea{position: relative;width:100%;height:auto;border-radius:8px;border:1px solid #dedede;margin-bottom:15px;display:flex;}
.ai-generate-textarea .input-field{border:none;padding:10px 10px;background:transparent;flex:2;resize: none;overflow:hidden;}
.ai-generate-textarea .ai-generate-feature-list li{pointer-events:none;}
.ai-generate-textarea .ai-generate-feature-list li:hover{border:1px solid #dedede}
.ai-form-feature li{min-width:auto;margin-bottom:0;}
.ai-feature-list .icon{margin-right:3px}

.ai-generate-btn{pointer-events:none;min-width:142px;}
.ai-generate-btn.active{pointer-events:auto;background:#0076ff;color:#fff;}

.negative-prompt-form-field{pointer-events:none;opacity:.5;margin:10px 0 0;display:none !important}
.negative-prompt-form-field .input-field{border:1px solid #dedede;height:38px !important;border-radius:8px;background:transparent;padding:8px 20px;resize:none;overflow:hidden;line-height:20px;}
.negative-prompt-form-field.active{pointer-events:auto;opacity:1;display:flex !important;}

.ai-wrapper-header{border-bottom:1px solid #dedede;margin-bottom:15px;padding-bottom:15px;}
.ai-expert-image{padding-top:15px;border-top:1px solid #dedede;}
.ai-preview-image-section{margin-top:15px;margin-bottom:15px;}

.ai-header-tab-list .none{opacity:.5;pointer-events:none;}


.ai-flex-content {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to the next line */
    gap: 20px; /* Optional: Add space between items */
}
.ai-column-img {
    position: relative;
    flex: 0 0 calc(50% - 10px); /* Each item takes 50% width minus gap adjustment */
    box-sizing: border-box; /* Ensure padding/border don't affect width */
}

.ai-column-img .ai-image-name{position:absolute;bottom:10px;left:10px;display:none;}
.ai-column-img .ai-download-btn{position:absolute;top:10px;right:10px;background:#000;color:#000;padding:6px 6px;border:1px solid #dedede;border-radius:5px;cursor:pointer;display:flex;}
.ai-column-img .ai-download-btn img{width:18px;height:18px;}


.ai-img-zoom{width:220px}
.ai-img-zoom h3{font-size:16px;}
/* .ai-column-img::before{content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 35%, transparent 65%, rgba(0, 0, 0, .45));
    z-index: 3;
    opacity: 1;
    transition: opacity 0.3s ease;} */

.ai-column-img img{width:100%;height:100%;}

/* .ai-grid-item{display:grid;grid-column:4;gap:10;}
.ai-grid-item img{width:100%;height:100%;} */

.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  .ai-preview-image-list,.ai-preview-image{width:700px;height:auto;margin:0 auto;}
  .ai-preview-image .ai-preview-image-thumb-list{width:100%;margin-right:15px;display:flex;overflow-x:scroll;margin-top:10px;}
  .ai-preview-image .ai-preview-image-thumb-list::-webkit-scrollbar{display:none;}
  .ai-preview-image .ai-preview-image-thumb-list li{width:100%;display:flex;justify-content:center;margin-left:10px;}
  .ai-preview-image .ai-preview-image-thumb-list li:first-child{margin-left:0;}
  .ai-preview-image .ai-preview-image-thumb-list img{width:100%;height:auto;display:block;cursor:pointer;}
  .ai-single-previw-image{width:100%;height:auto;display:flex;justify-content:center;align-items: center;flex:2;overflow:hidden;}
  .ai-single-previw-image img{width:100%;height:100%;transition: transform 0.3s ease}
.ai-preview-image-thumb-list li.active img {
    border: 1px solid blue; /* Highlight active thumbnail */
}


.ai-preview-image #backButton{background: transparent;
    min-width: auto;
    z-index: 10;
    margin: 31px 0 0;
    height: auto;
    padding: 0;}
.ai-generate-sidebar .ai-sidebar-feature-list{display:none;}
.ai-generate-sidebar .ai-sidebar-feature-list.active{display:block;}
.ai-generate-textarea .ai-textarea{min-height:60px;
    height: 60px;
    max-height: 80px;
    line-height:20px;
    overflow-y: scroll;
}
.ai-generate-textarea .ai-textarea::-webkit-scrollbar{display:none;}
.ai-single-preview-img{width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;}

.ai-filter-item{border:1px solid #dedede;padding:10px 10px;border-radius:5px;margin-bottom:10px;margin-right:10px;cursor: pointer;}
.ai-filter-item.active,.ai-filter-item:hover{border:1px solid #000}
.ai-filter-item:last-child{margin-right:0;}

.ai-header-tab-list .ai-tab{cursor:pointer;border-bottom:1px solid #dedede;width:auto;text-align:center;padding:5px 0;min-width:90px;margin-bottom:10px;flex: 1;}
.ai-header-tab-list .ai-tab.active{border-bottom:1px solid #000}
.auth-sidebar #resetPassword .btn{margin-left:0;}


.header-search-bar .search-form .form-group{position:relative;}
.search-close.active{display:flex;}
/*#suggestions {
    position: absolute;
    background: #f0f0f0;
    width: calc(100% - 160px);
    max-height: 150px;
    overflow-y: auto;
    display: block;
    z-index: 1000;
    top:52px;color:#333;text-align: left;margin-left:40px;
}

.autocomplete-suggestion {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}
.autocomplete-suggestion:hover{background:rgba(0, 118, 255, 1.0) !important;color:#fff}

.autocomplete-suggestion:hover {
    background: #f0f0f0;
}*/

.search-close {
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
    color: #ff0000;
    position:absolute;right:100px;top:14px;right:135px;display:none;
}

.header-search-bar .ui-menu{max-height: 200px;
    overflow-y: auto;
    overflow-x:hidden;
    z-index: 1000;
    width: calc(100% - 160px) !important;
    left: 40px !important; white-space: nowrap;}


/*.header-search-bar .ui-menu::-webkit-scrollbar{display:none}*/
.header-search-bar .ui-menu .ui-menu-item{text-align:left;border-bottom:1px solid #dedede;font-size:14px}
.header-search-bar .ui-menu .ui-menu-item:last-child{border-bottom:none}
.header-search-bar .ui-menu .ui-menu-item-wrapper{padding:6px 1em 6px .4em !important}



.no-record-item{width:300px;text-align: center;margin:0 auto;height:calc(100vh - 220px);display:flex;flex-direction:column;justify-content: center;align-items: center;font-weight:500}
.no-record-item img{width:150px;height:auto;}
/* Ensure the page is scrollable on smaller screens */
@media screen and (max-width: 768px) {
    .ai-wrapper-content {
        flex-direction: column;
    }

    .ai-generate-wrapper,
    .ai-generate-sidebar {
        width: 100%;
        max-height: none; /* Remove max height for mobile view */
        overflow-y: visible; /* Let it scroll naturally on mobile */
    }
    .pricing-section-box,.pricing-section-box .btn,.faq-section .container{width:100%;}
}