@import "~@flaticon/flaticon-uicons/css/all/all";

@font-face {
  font-family: 'GilroyRegular';
  src: url('../fonts/GilroyRegular_0.eot');
  src: url('../fonts/GilroyRegular_0.eot') format('embedded-opentype'),
       url('../fonts/GilroyRegular_0.woff2') format('woff2'),
       url('../fonts/GilroyRegular_0.woff') format('woff'),
       url('../fonts/GilroyRegular_0.ttf') format('truetype'),
       url('../fonts/GilroyRegular_0.svg#GilroyRegular_0') format('svg');
}

@font-face {
  font-family: 'GilroyMedium';
  src: url('../fonts/GilroyMedium.eot');
  src: url('../fonts/GilroyMedium.eot') format('embedded-opentype'),
       url('../fonts/GilroyMedium.woff2') format('woff2'),
       url('../fonts/GilroyMedium.woff') format('woff'),
       url('../fonts/GilroyMedium.ttf') format('truetype'),
       url('../fonts/GilroyMedium.svg#GilroyMedium') format('svg');
}

@font-face {
  font-family: 'GilroyBold';
  src: url('../fonts/GilroyBold.eot');
  src: url('../fonts/GilroyBold.eot') format('embedded-opentype'),
       url('../fonts/GilroyBold.woff2') format('woff2'),
       url('../fonts/GilroyBold.woff') format('woff'),
       url('../fonts/GilroyBold.ttf') format('truetype'),
       url('../fonts/GilroyBold.svg#GilroyBold') format('svg');
}

@font-face {
  font-family: 'GilroySemiBold';
  src: url('../fonts/GilroySemiBold.eot');
  src: url('../fonts/GilroySemiBold.eot') format('embedded-opentype'),
       url('../fonts/GilroySemiBold.woff2') format('woff2'),
       url('../fonts/GilroySemiBold.woff') format('woff'),
       url('../fonts/GilroySemiBold.ttf') format('truetype'),
       url('../fonts/GilroySemiBold.svg#GilroySemiBold') format('svg');
}


/*--------------------------------------------------------------------------------------*/
/*General-Css-Here
/*--------------------------------------------------------------------------------------*/

:root {

  --regular: 'GilroyRegular';
  --medium: 'GilroyMedium';
  --bold: 'GilroyBold';
  --semiBold: 'GilroySemiBold';
  
  /* dark theme */
  --primary-gradient-dt: linear-gradient(to right, #1884F7, #8F76FC, #AE46B9,#F41B3B);
  --background-dt: #0A070B;
  --white-dt: #FFFFFF;
  --black-dt: #0A070B;

  --black-900-dt: #FFFFFF;
  --black-800-dt: rgba(255, 255, 255, 0.85);
  --black-700-dt: rgba(255, 255, 255, 0.75);
  --black-600-dt: rgba(255, 255, 255, 0.65);
  --black-500-dt: rgba(255, 255, 255, 0.55);
  --black-400-dt: rgba(255, 255, 255, 0.45);
  --black-300-dt: rgba(255, 255, 255, 0.35);
  --black-200-dt: rgba(255, 255, 255, 0.25);
  --black-100-dt: rgba(255, 255, 255, 0.15);
  --black-50-dt: rgba(255, 255, 255, 0.05);

  --yellow:#FFD020;


  /* light-theme */
  --primary-gradient-lt: linear-gradient(to right, #1884F7, #8F76FC, #AE46B9,#F41B3B);
  --background-lt: #ffffff;
  --white-lt: #FFFFFF;
  --black-lt: #0A070B;

  --black-900-lt: #222222;
  --black-800-lt: #555555;
  --black-700-lt: #6a6a6a;
  --black-600-lt: #808080;
  --black-500-lt: #939393;
  --black-400-lt: #a9a9a9;
  --black-300-lt: #bdbdbd;
  --black-200-lt: #d2d2d2;
  --black-100-lt: #eaeaea;
  --black-50-lt: #f6f6f6;


  /* common color */
  --primary: #f41b3b;
  --primary-800: #f6324f;
  --primary-700: #f64962;
  --primary-600: #f86076;
  --primary-500: #f87689;
  --primary-400: #fa8d9d;
  --primary-300: #fba4b1;
  --primary-200: #fcbbc5;
  --primary-100: #fdd1d8;
  --primary-50: #fee9ec;

  --active-100: #004fef;
  --active-50: #e9ecff;
  --failure-100: #d71106;
  --failure-50: #ffe3e4;
  --in-progress-100: #ef7108;
  --in-progress-50: #fff3e1;
  --success-100: #31a35f;
  --success-50: #edffef;

  /* main root */
  --primary-gradient: var(--primary-gradient-dt);
  --background: var(--background-dt);
  --white: var(--white-dt);
  --black: var(--black-dt);

  --black-900: var(--black-900-dt);
  --black-800: var(--black-800-dt);
  --black-700: var(--black-700-dt);
  --black-600: var(--black-600-dt);
  --black-500: var(--black-500-dt);
  --black-400: var(--black-400-dt);
  --black-300: var(--black-300-dt);
  --black-200: var(--black-200-dt);
  --black-100: var(--black-100-dt);
  --black-50:  var(--black-50-dt);



  --h1-headline: 56px;
  --h2-headline: 42px;
  --h3-headline: 36px;
  --h4-headline: 28px;
  --h5-headline: 24px;
  --h6-headline: 18px;
  --subtitle-1: 16px;
  --subtitle-2: 14px;
  --caption-text: 12px;
  --overline: 12px;
  --body-1: 16px;
  --body-2: 14px;
  --text-link: 16px;

}

.light-theme {
  --primary-gradient: var(--primary-gradient-lt);
  --background: var(--background-lt);
  --white: var(--white-lt);
  --black: var(--black-lt);
  --black-900: var(--black-900-lt);
  --black-800: var(--black-800-lt);
  --black-700: var(--black-700-lt);
  --black-600: var(--black-600-lt);
  --black-500: var(--black-500-lt);
  --black-400: var(--black-400-lt);
  --black-300: var(--black-300-lt);
  --black-200: var(--black-200-lt);
  --black-100: var(--black-100-lt);
  --black-50:  var(--black-50-lt);
}

*{margin: 0; padding: 0; box-sizing: border-box;}
body,html{font-size: 16px; font-family:var(--regular); font-weight: normal; font-style: normal; box-sizing: border-box; background: var(--background);}
html{scroll-padding-top: 10rem;}
a{text-decoration: none; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s;}
button{transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s;}
ul{margin: 0; padding: 0; list-style: none;}
img{max-width: 100%;}

.btn{display: flex; flex-direction: row; justify-content: center; align-items: center; padding:13px 15px; border-radius: 8px; gap: 10px; background: var(--primary-gradient); font-size: 16px; font-family: var(--semiBold); border: none; color: var(--white);}
.btn i{font-size: 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.btn:hover{color: var(--white);}

.btn-blur{background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px);}
.text-btn{display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 16px; font-family: var(--semiBold); color: var(--white); cursor: pointer;}
.text-btn i{width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 24px;  background: linear-gradient(90deg, #1884F7,#8F76FC,#AE46B9, #F41B3B); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.section-btn{background: var(--black-50);}
.section-btn:hover{background: var(--black-100);}

.outline-btn{background:transparent; border: solid 1px var(--black-200);}
.outline-btn:hover{background: var(--black-100);}
.sm-btn{padding: 7px 15px; font-size: 14px;}
.sm-btn i{font-size: 16px;}

h1 { font-size: var(--h1-headline); font-family: var(--bold); color: var(--black-900);}
h2 { font-size: var(--h2-headline); font-family: var(--bold); color: var(--black-900);}
h3 { font-size: var(--h3-headline); font-family: var(--bold); color: var(--black-900);}
h4 { font-size: var(--h4-headline); font-family: var(--bold); color: var(--black-900);}
h5{ font-size: var(--h5-headline); font-family: var(--bold); color: var(--black-900);}
h6{ font-size: var(--h6-headline); font-family: var(--bold); color: var(--black-900);}
.subtitle-1 { font-size: var(--subtitle-1); font-family: var(--semiBold);}
.subtitle-2 { font-size: var(--subtitle-2); font-family: var(--semiBold); }
.caption-text { font-size: var(--caption-text); font-family: var(--semiBold); }
.overline { font-size: var(--overline);  font-family: var(--regular); }
.body-1 { font-size: var(--body-1); font-family: var(--semiBold); }
.body-2 { font-size: var(--body-2);  font-family: var(--regular); color: var(--black-500);}
.text-link { font-size: var(--text-link); font-family: var(--semiBold); text-decoration: underline; color: var(--black-900);}
.p-lr-30{padding-left:30px; padding-right: 30px;}
.section-gap{padding-top:60px; padding-bottom: 60px;}
p{color: var(--black-500);}

/*Header css here*/

header{position: fixed; left: 0; top: 0; width: 100%; z-index: 99; padding: 15px 30px; background: var(--black-50); border-bottom: solid 1px var(--black-100);}
.navbar-expand-lg .navbar-nav .nav-link{color: var(--black-500); display: flex; align-items: center; gap:10px; font-family: var(--semiBold); font-size: 16px; border-radius: 8px;}
.navbar-expand-lg .navbar-nav .nav-link:hover{color: var(--white);}
.navbar-expand-lg .navbar-nav .nav-link i{width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 20px;}
.navbar.navbar-expand-lg{margin: 0; padding: 0; flex: 1;}
.navbar-expand-lg .navbar-nav .nav-link.live{background: var(--primary-gradient); color:var(--white); }
.navbar-expand-lg .navbar-nav .nav-link.active{color: var(--white);}
.login-btn .btn{border-radius: 4px; min-width: 100px; text-align: center;}
.search-box button{border: none; background: none; color: var(--white); font-size: 24px; margin-top: 6px;}
header.fixed{background: var(--background); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-bottom: solid 1px var(--black-100);}
header .search-box{position: relative;}
header .search-box .search-input-wrapper{position: absolute; top: 100%; right: 0; margin-top: 10px; z-index: 1000;}
.search-input-wrapper{background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(54.65px); border-radius: 8px;}
header .search-box .search-input{width: 300px; outline: none; transition: all 0.3s ease;}

.user-profile-box .dropdown-toggle{background: none; border: none; width: 50px; height: 50px; border-radius: 14px;}
.user-profile-box .dropdown-toggle img{width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px;}
.dropdown-toggle:after{width: 14px; height: 14px; background: url(/images/drop-arrow.svg) no-repeat; border: none; border-radius: 0; margin-left: 10px; top: 10px; position: relative;}
.user-profile-box .dropdown-menu{left: auto; right: 0; margin-top: 15px;}
.dropdown-menu{margin-top: 15px; background: var(--background); width: 257px; border-radius: 8px; padding: 0; overflow: hidden; border: none; box-shadow: none; padding: 15px; border: solid 1px var(--black-50);}
.dropdown-menu li a{padding: 13px; display: flex; align-items: center; gap: 15px; border-radius: 8px;}
.dropdown-menu li a:hover{background: var(--black-50);}
.dropdown-menu li a i{font-size: 20px; color: var(--black-900); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.dropdown-menu li a span{font-size: 16px; color: var(--black-900); font-family: var(--medium);}

.head-left{gap:15px;}
.toggle-btn{background: none; border: none; width: 50px; height: 50px; color:#fff; padding-top: 10px; display: none;}
.toggle-btn i{font-size: 30px;}


/*home-page-css-here*/

.banner-section{background:url(../images/banner.png) no-repeat; background-size: cover; padding-top: 155px; padding-bottom: 116px;}
.home-banner-content{max-width: 700px;}
.home-banner-content h5{font-family: var(--semiBold); color: var(--white); margin-bottom:20px;}
.home-banner-content h1{font-family: var(--bold); color: var(--white); margin-bottom:25px; line-height: 68px;}
.home-banner-content h6{font-family: var(--medium); color: var(--white); max-width: 495px; line-height: 30px;}
.banner-btn i{width: 38px; height: 38px; background: var(--primary-gradient); color: var(--white); border-radius: 50px;}
.model-list-head{margin-bottom: 15px; flex-wrap: wrap; gap: 10px;}
.model-list-head h5{color: var(--white); margin: 0; font-family: var(--semiBold);}
.model-list ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 0px; margin: 0; padding: 0; list-style: none; justify-content: center; margin-left: -15px; margin-right: -15px;}
.model-item-box a{padding: 15px; border-radius: 8px; display: block; position: relative;overflow: hidden;}
.model-item-box figure{position: relative; margin: 0;}
.model-item-box figure > img{aspect-ratio: 9 / 12; object-fit: cover; width: 100%;}
.model-item-box-overlay{opacity: 0; position: absolute; left: 0; bottom: 39px; width: 100%; background: linear-gradient(360deg, #0A070B 0%, rgba(10, 7, 11, 0) 100%); padding: 10px; transition: all 0.5s ease;}
.model-item-box-overlay .btn{width: 36px; height: 36px; padding: 0;}
.model-item-box figcaption{opacity: 0; transition: all 0.5s ease; position: absolute; bottom: 0; left: 0; width: 100%;padding: 15px;background: var(--black-800-lt); }
.model-list-caption h6{font-family: var(--semiBold); font-size: 16px; color: var(--white); margin: 0;} 
.model-list-btn{gap: 5px; color: var(--white); font-size: 14px; font-family: var(--medium);}
.model-list-btn i{width: 24px; height: 24px; font-size: 20px; display: flex; align-items: center; justify-content: center;}
.model-item-box a:hover{background: var(--black-800-lt); transform: scale(1.08); position: relative; z-index: 1;}
.model-item-box a:hover .model-item-box-overlay{opacity: 1;}
.model-item-box a:hover figcaption{opacity: 1;}

.nav.nav-pills{white-space: nowrap; overflow: auto; flex-wrap: nowrap;}



/*footer-css-here*/

footer{border-top: solid 2px var(--black-50); padding: 30px;}
.footer-logo{text-align: center;}
.footer-social-icon h6{color: var(--black-500); font-family: var(--semiBold); margin: 0;}
.footer-menu ul li a{font-family: var(--semiBold); color: var(--white); font-size: 16px;}
.footer-menu ul li a:hover{color: var(--black-500);}
.footer-social-icon ul li a img{height: 24px;}
.footer-social-icon ul li a:hover{opacity: 0.5;}
.bottom-top-btn{position: fixed; bottom: 30px; right: 30px; z-index: 999; opacity: 0; visibility: hidden; transition: all 0.5s ease;}
.bottom-top-btn.show{opacity: 1; visibility: visible;}
.bottom-top-btn .btn{width: 50px; height: 50px; border: none;  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s ease;}
.bottom-top-btn .btn:hover{transform: scale(1.1);}
.copyright-text p{font-family: var(--medium);}

/*form-page-css-here*/

.form-logo img{height: 55px;}
.form-control,.form-control:focus,.form-control:active,.otp-field{background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: none; height: 56px; font-size: 16px; font-family: var(--semiBold); color: var(--black-500); outline: none; box-shadow: none; color: var(--white);}
.form-control::placeholder {color: var(--black-500); font-family: var(--semiBold); transition: opacity 0.3s ease;}
.form-otp{margin-bottom: 15px;}
.otp-box{gap: 15px; width: 100%;}
.otp-box .otp-field{flex: 1;}
.error{font-size: 14px; color: var(--failure-100);}
textarea.form-control,textarea.form-control:focus{height: 140px; resize: none;}
.skip-btn button{background: none; border: none; color: var(--black-600);}





select.form-control{appearance: auto;}
select.form-control option{color: var(--black);}
.form-check-input{background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; border:solid 1px var(--black-200); outline: none; box-shadow: none;}
.form-check-input:checked{background-color: var(--primary) !important; border-color: var(--primary) !important;}
.form-bg{background: url(../images/banner.png) no-repeat; background-size: cover; width: 100%; height: 100vh; padding: 30px; overflow: auto;}
.form-content{width: 635px; margin:auto; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(54.65px); border-radius: 15px; padding: 40px;}
.form-group{margin-bottom: 15px; position: relative;}
.form-group label{color: var(--black-900); margin-bottom: 8px;}
.btn-show-pass{position: absolute; right: 15px; top:46px; background: none; border: none; color: var(--white); font-size: 24px;}
.with-icon .form-control{padding-right: 50px;}
.form-check label{font-size: 16px; font-family: var(--semiBold); color: var(--black-800);}
.form-submit-btn .btn{min-width: 194px; text-align: center;}
.signup-link{color: var(--white);}
.signup-link a{background: radial-gradient(674.74% 17226.82% at 109.4% 100%, #F41B3B 3.65%, #AE46B9 36.98%, #8F76FC 63.02%, #1884F7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.or-divider-line{display: flex; align-items: center; gap: 15px; margin: 30px 0; position: relative; color: var(--black-500); font-family: var(--semiBold); font-size: 16px;}
.or-divider-line::before{content: ''; width: 100%; height: 1px; background: var(--black-200); position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: -1;}  
.or-divider-text{color: var(--black-500); font-family: var(--semiBold); font-size: 16px; text-transform: uppercase; padding: 0px 15px;}
.social-login a{max-width: 45px;}
.form-head-des p{color: var(--black-500); font-family: var(--medium);}
.form-otp .form-control{text-align: center;}

/*dashboard-page-css-here*/

.page-warper-bg .section-gap{padding: 30px 0px;}
.sidebar{position: fixed; left: 0; top:81px; width:270px; background: var(--black-dt); border-right: solid 1px var(--black-dt); height:calc(100vh - 81px); z-index: 999; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px;}
.page-warper-bg{padding-left: 270px; padding-top: 81px;}
.sidebar-menu ul{display: flex; flex-direction: column; gap: 10px;}
.sidebar-menu ul li a{padding: 10px; border-radius: 8px; gap: 16px; display: flex; align-items: center; color: var(--black-900); font-family: var(--medium); font-size: 16px;}
.sidebar-menu ul li a i{font-size: 20px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.sidebar-menu ul li a:hover{background: var(--black-50);}
.sidebar-menu ul li.active a{background: var(--primary);}


.accordion{background: none; border-radius: 0;}
.accordion-item{background: none; border: none; border-radius: 0 !important; border-top: solid 1px var(--black-100) !important; border-radius: 0;}
.accordion-header{background: none; border: none; border-radius: 0;}
.accordion-button,.accordion-button:focus,.accordion-button:active{background: none; border: none; outline: none; box-shadow: none; padding: 0; font-size: 16px; color: var(--black-900); font-family: var(--bold); padding:13px 0px; border-radius: 0 !important;}
.accordion-button:not(.collapsed){background: none; border: none; outline: none; box-shadow: none; color: var(--black-900);}
.accordion-button:after{background-image: url("data:image/svg+xml,%3Csvg width='25' height='12' viewBox='0 0 25 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.50996 0.0790075C1.70694 0.0787434 1.90203 0.117488 2.08396 0.193007C2.26589 0.268526 2.43107 0.379324 2.56996 0.519007L10.243 8.191C10.4751 8.42321 10.7507 8.60742 11.0541 8.7331C11.3575 8.85878 11.6826 8.92346 12.011 8.92346C12.3393 8.92346 12.6645 8.85878 12.9678 8.7331C13.2712 8.60742 13.5468 8.42321 13.779 8.191L21.44 0.529007C21.5783 0.385742 21.7438 0.271468 21.9269 0.192855C22.1099 0.114242 22.3067 0.0728628 22.5059 0.0711321C22.705 0.0694014 22.9025 0.107354 23.0869 0.182775C23.2712 0.258196 23.4387 0.369576 23.5795 0.510414C23.7204 0.651253 23.8318 0.818731 23.9072 1.00308C23.9826 1.18742 24.0206 1.38494 24.0188 1.58411C24.0171 1.78328 23.9757 1.98011 23.8971 2.16311C23.8185 2.34612 23.7042 2.51163 23.561 2.65L15.9 10.312C14.8679 11.3422 13.4692 11.9207 12.011 11.9207C10.5527 11.9207 9.15405 11.3422 8.12196 10.312L0.448958 2.64C0.239042 2.43022 0.0960714 2.16289 0.0381373 1.87183C-0.0197968 1.58077 0.00990933 1.27906 0.123497 1.00489C0.237084 0.730716 0.429448 0.496399 0.676247 0.331586C0.923045 0.166773 1.21319 0.078873 1.50996 0.0790075Z' fill='white'/%3E%3C/svg%3E%0A"); position: relative; top: 5px;}
.accordion-button:not(.collapsed):after{background-image: url("data:image/svg+xml,%3Csvg width='24' height='12' viewBox='0 0 24 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5004 12C22.3033 11.9999 22.1082 11.9611 21.9261 11.8856C21.7441 11.8101 21.5787 11.6994 21.4394 11.56L13.7684 3.88899C13.5362 3.65678 13.2606 3.47257 12.9572 3.34689C12.6539 3.22122 12.3287 3.15653 12.0004 3.15653C11.672 3.15653 11.3469 3.22122 11.0435 3.34689C10.7402 3.47257 10.4645 3.65678 10.2324 3.88899L2.57039 11.551C2.28748 11.8242 1.90858 11.9754 1.51529 11.972C1.12199 11.9686 0.745772 11.8108 0.46766 11.5327C0.189548 11.2546 0.0317946 10.8784 0.028377 10.4851C0.0249594 10.0918 0.176151 9.71289 0.449388 9.42999L8.11139 1.768C9.14348 0.737825 10.5421 0.159241 12.0004 0.159241C13.4586 0.159241 14.8573 0.737825 15.8894 1.768L23.5614 9.43999C23.771 9.64982 23.9136 9.91707 23.9714 10.208C24.0291 10.4988 23.9993 10.8003 23.8858 11.0743C23.7722 11.3483 23.58 11.5824 23.3334 11.7472C23.0868 11.9119 22.797 11.9999 22.5004 12Z' fill='white'/%3E%3C/svg%3E "); transform: rotate(0deg);}
.accordion-body{padding: 0 0 15px 0;}
.category-list ul{display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none;}
.category-list ul li a{display: flex; align-items: center; gap: 16px; color: var(--black-900); font-size: 16px; justify-content: space-between;}
.category-list ul li a span.category-name{font-family: var(--medium);}
.category-list ul li.active a{color: var(--primary); }

.top-category-menu{background: var(--black-50); border-bottom: solid 1px var(--black-100); padding: 0px 30px;}
.top-category-menu ul{display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; white-space: nowrap; flex-wrap: nowrap; overflow: auto;}
.top-category-menu ul li a{padding: 18px 15px; font-size: 14px; font-family: var(--semiBold); display: flex; align-items: center; color: var(--black-600); border-bottom: solid 2px transparent;}
.top-category-menu ul li a svg{width: 24px; height: 24px;} 
.top-category-menu ul li.active a{color: var(--black-900); border-color: var(--primary);}
.top-category-menu ul li a.active{border-bottom: solid 2px var(--primary); color: var(--black-900);}
/*feed-page-css-here*/

.feed-list{display: flex; justify-content: center;}
.feed-list ul{display: flex; flex-direction: column; gap: 30px; margin: 0; padding: 0; list-style: none; width: 100%; max-width: 800px;}
.feed-item-box{background: var(--black-100); padding: 30px; border-radius: 8px; display: flex; flex-direction: column; gap: 25px;}
.user-box figure{margin: 0; width: 72px; flex:0 0 72px; height: 72px; border-radius: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--black-900); background: var(--black-100);}
.user-box figure i{width: 24px; height: 24px;}
.user-box figure img{aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24px; width: 100%;}
.user-box figcaption{display: flex; flex-direction: column; gap: 5px;}
.user-box figcaption h5{margin: 0;}
.user-box figcaption p{margin: 0; color: var(--black-400);}

.feed-item-body{display: flex;  flex-direction: column; gap: 20px;}
.feed-item-body figure{margin: 0; width: 100%; flex:0 0 100%;}
.feed-item-body figure img{width: 100%; aspect-ratio: 9 / 12; object-fit: cover; border-radius: 8px;}
.feed-item-body figcaption{display: flex; flex-direction: column; gap: 15px;}
.feed-item-body figcaption p{margin: 0; color: var(--black-900);}
.like-send-tip-box a{font-size: 16px; font-family: var(--medium); color: var(--black-900);}
.like-send-tip-box a i{width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 18px;}

/*Modal-css-here*/

.modal-content{background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(54.65px); border-radius: 15px; border: none;}
.btn-close{opacity: 1; outline: none; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.7068 0.293153C23.5193 0.105682 23.2649 0.000366211 22.9998 0.000366211C22.7346 0.000366211 22.4803 0.105682 22.2928 0.293153L11.9998 10.5862L1.70679 0.293153C1.51926 0.105682 1.26495 0.000366211 0.999786 0.000366211C0.734622 0.000366211 0.480314 0.105682 0.292786 0.293153C0.105315 0.48068 0 0.734988 0 1.00015C0 1.26532 0.105315 1.51963 0.292786 1.70715L10.5858 12.0002L0.292786 22.2932C0.105315 22.4807 0 22.735 0 23.0002C0 23.2653 0.105315 23.5196 0.292786 23.7072C0.480314 23.8946 0.734622 23.9999 0.999786 23.9999C1.26495 23.9999 1.51926 23.8946 1.70679 23.7072L11.9998 13.4142L22.2928 23.7072C22.4803 23.8946 22.7346 23.9999 22.9998 23.9999C23.2649 23.9999 23.5193 23.8946 23.7068 23.7072C23.8943 23.5196 23.9996 23.2653 23.9996 23.0002C23.9996 22.735 23.8943 22.4807 23.7068 22.2932L13.4138 12.0002L23.7068 1.70715C23.8943 1.51963 23.9996 1.26532 23.9996 1.00015C23.9996 0.734988 23.8943 0.48068 23.7068 0.293153Z' fill='white'/%3E%3C/svg%3E%0A");}
.modal-header{border-bottom: solid 1px var(--black-100);}
.page-top-head p{color: var(--black-500); margin: 0; max-width: 800px;}
.best-private-filter{flex-wrap: wrap;}
.best-private-filter .form-control{max-width: 215px;}

/*top-models-contest-page-css-here*/

.button-tab-head{gap: 15px;}
.button-tab-head li button{padding: 15px 20px; border-radius: 5px; background: var(--black-50); font-size: 14px; color: var(--black-900); font-family: var(--semiBold); color: var(--black-700); display: flex; align-items: center; gap: 10px;}
.button-tab-head li button i{width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 20px;}

.button-tab-head li button:hover{color: var(--black-900);}
.button-tab-head li button.active{background-color: var(--primary) !important;}
.country-tab-head{border-top: solid 1px var(--black-100); padding: 10px 0 15px 0px;}
.country-tab-head ul{gap: 15px; white-space:nowrap; flex-wrap: nowrap; overflow:auto;}
.country-tab-head ul li a{font-size: 14px; font-family: var(--semiBold); color: var(--black-700); padding: 15px 0px; border-radius: 5px; display: block;}
.country-tab-head ul li.active a{color: var(--primary);}

/*Message-modal-css-here*/

.right-modal-bg .modal-dialog{margin: 0 0 0 auto; height: 100vh;}
.right-modal-bg .modal-content{border-radius: 0; height: 100vh;}
.setting-btn{background: none; border: none; font-size: 22px; color: var(--black-900); width: 24px; height: 24px;}
.message-tab-head{padding: var(--bs-modal-padding);}
.user-list-box{border: solid 1px var(--black-100); border-radius: 15px;}
.user-list-box ul li{padding: 15px; border-bottom: solid 1px var(--black-100);}
.user-list-box ul li:last-child{border-bottom: none;}
.user-list-box .user-box figure{width: 65px; flex:0 0 65px; height: auto;}
.user-list-box .user-box figcaption h5{font-size: 20px;}
.user-list-box .user-box figcaption p{font-size: 14px;}
.no-chat-box{text-align: center; border: solid 1px var(--black-100); border-radius: 15px; padding: 30px;}
.no-chat-box figure{margin: auto; font-size: 55px; color: var(--black-900);}
.no-chat-box figcaption p{color: var(--black-400); margin: 0; font-family: var(--medium);}

/*notification-page-css-here*/

.notification-list{border: solid 1px var(--black-100); border-radius: 15px;}
.notification-list ul li{border-bottom: solid 1px var(--black-100); padding: 15px;}
.notification-list ul li .user-box{flex: 1;}
.notification-list ul li:last-child{border-bottom: none;}
.notification-list span{color: var(--black-400); font-family: var(--semiBold);}
.notification-list .user-box figcaption h5{font-size: 20px;}
.notification-list .user-box figcaption p{font-size: 14px;}

/*Profile-page-css-here*/

.page-detail-bg{padding-top: 81px;}
.profile-action li a{padding: 0 !important; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;}
.profile-action li a i{width: 24px; height: 24px; font-size: 20px;}
.profile-bg{padding: 30px;}
.profile-video img{width: 100%; aspect-ratio: 16 / 9; object-fit: cover;}
.profile-video-box{flex-direction: column; gap: 20px; display: flex;}
.profile-video-caption{padding: 15px; border-radius: 15px; background: var(--black-50);}
.like-private-tip-box ul li a .primary-color{color: var(--primary);}
.profile-message-box-inner{background: var(--black-50); border-radius: 15px; padding: 15px; display: flex; flex-direction: column; gap: 15px;}
.public-chat-list{height: 645px; overflow: auto;}
.public-chat-list ul{display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none;}
.public-chat-list ul li a{display: flex; align-items: center; gap: 15px;}
.public-chat-list ul li a figure{width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--black-100); margin: 0;}
.public-chat-list ul li a figcaption{flex: 1;}
.public-chat-list ul li a figcaption p{margin: 0; color: var(--black-400);}
.public-chat-list ul li a figcaption p span.high{color: var(--primary);}
.public-chat-list ul li a figcaption p span.medium{color: var(--primary-100);}
.message-send-box{position: relative;}
.message-send-box .form-control{padding-right: 50px;}
.message-send-box button{background: none; border: none; font-size: 24px; color: var(--black-900); position: absolute; right: 15px; top: 15px;}

.send-tip-tab-head{background: rgba(255, 255, 255, 0.05);}
.send-tip-tab-head ul li button{font-size: 14px; font-family: var(--semiBold); color: var(--black-400); padding: 15px 15px; border-bottom: solid 2px transparent;}  
.send-tip-tab-head ul li button.active{border-bottom: solid 2px var(--primary); color: var(--black-900);}
.send-tip-tab-head ul li button:hover{color: var(--black-900);}
.table{border:solid 1px var(--black-100);}
.table > :not(caption) > * > *{background: none; border-color:var(--black-100);}
.table tr th{font-size: 16px; font-family: var(--semiBold); font-weight: normal; color: var(--black-900); padding: 15px;}
.table tr td{font-size: 16px; font-family: var(--semiBold); color: var(--black-700); padding:12px 15px; vertical-align: middle;}
.table tr td span{color: var(--black-400); font-family: var(--medium);}
.table tr td a{font-size: 16px; font-family: var(--semiBold); color: var(--black-900); padding: 15px; display: flex; align-items: center; gap: 15px;}
.send-tip-table{max-height: 450px;}

/*Model-detail-page-css-here*/

.model-detail-content{gap: 30px;}
.model-detail-content figure{margin: 0; width: 387px; height: 387px; border-radius: 15px;}
.model-detail-content figure img{aspect-ratio: 1 / 1; object-fit: cover; width: 100%; border-radius: 15px;}
.box-bg{background: var(--black-50); flex: 1; padding: 30px; border-radius: 15px; display: flex; flex-direction: column; gap: 30px;}
.model-detail-info ul{flex-direction: column; gap: 10px; display: flex;}
.model-detail-info ul li{display: flex; gap: 30px;}
.model-detail-info ul li h6{font-size: 16px; font-family: var(--semiBold); color: var(--black-900); margin: 0; font-weight: normal; width: 252px; flex:0 0 252px;}
.model-detail-info ul li span{font-size: 16px; color: var(--black-400); margin: 0;}
.private-show-title p{color: var(--black-500); margin: 0;}
.rating-box{text-align: right;}
.rating-box p{font-size: 14px; color: var(--black-500);}
.total-rating-star span{font-size: 20px; color: var(--white); font-family: var(--bold);}
.rating-star{display: flex; align-items: center; gap: 4px; font-size: 22px; color: var(--yellow);}

.private-show-list{border: solid 1px var(--black-100); border-radius: 15px;}
.private-show-list ul{display: flex; flex-direction: column;}
.private-show-list ul li{display: flex; align-items: center; gap: 15px; margin: 0; padding: 15px; list-style: none; border-bottom: solid 1px var(--black-100);}
.private-show-list ul li:last-child{border-bottom: none;}
.private-show-list ul li a{display: flex; align-items: center; gap: 15px;}
.private-show-list ul li a figure{width: 72px; height: 72px; flex:0 0 72px; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: var(--black-100); margin: 0; color: var(--white);}
.private-show-list ul li a figure i{width: 30px; height: 30px; font-size: 24px; color: var(--white); text-align: center;}
.private-show-list ul li a figcaption{flex: 1;}
.private-show-list ul li a figcaption h6{margin-bottom: 5px;}
.private-show-list ul li a figcaption p{margin: 0; color: var(--black-400);}

.user-review-box h5{margin-bottom: 15px;}
.user-review-list{border: solid 1px var(--black-100); border-radius: 15px;}
.user-review-list ul{display: flex; flex-direction: column;}
.user-review-list ul li{display: flex; align-items: center; gap: 15px; margin: 0; padding: 15px; list-style: none; border-bottom: solid 1px var(--black-100);}
.user-review-list ul li:last-child{border-bottom: none;}
.user-review-item p{margin: 0; color: var(--black-400); font-size: 16px;}
.show-date{color: var(--black-400); font-size: 16px;}
.goal-progress-box{gap: 15px;}
.progress-bar-inner input{width: 100%;}
.contributors-box span{font-size: 16px; font-family: var(--semiBold); color: var(--white);}
.notify-live-box i{color: var(--black-900);}
.notify-live-box span{color: var(--white); font-size: 16px; color: var(--black-900); font-family: var(--medium);}
.form-check .form-check-input{ border: none; background-color: var(--black-100); box-shadow: none;}

.border-box ul{border: solid 1px var(--black-100); border-radius: 15px; display: flex; flex-direction: column;}
.border-box ul li{display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0; padding: 15px; list-style: none; border-bottom: solid 1px var(--black-100);}
.border-box ul li:last-child{border-bottom: none;}
.border-box ul li h6{margin: 0;}
.border-box ul li span{font-size: 16px; color: var(--black-400); font-family: var(--medium);}
.border-box ul li span span{color: var(--black-900);}
.p-tb-30{padding-top: 30px; padding-bottom: 30px;}
.my-profile-head-left p{color: var(--black-500); margin: 0;}

/*my-profile-page-css-here*/

.album-list-wrap{display: flex; flex-direction: column; gap: 30px;}
.album-list ul{display: flex; flex-wrap: wrap; align-items: center; gap: 30px;}
.album-list ul li{width: 280px; flex:0 0 280px; height: 280px; overflow: hidden; border-radius: 8px;}
.album-list ul li button{display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column; gap: 5px; width: 100%; background: none; border: dashed 1px var(--black-500); border-radius: 8px; color: var(--black-500); font-family: var(--semiBold); position: relative;}
.album-list ul li button input{position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10;}
.album-list ul li button i{font-size: 24px;}
.album-list ul li img{width: 100%; height: 100%; object-fit: cover; border-radius: 8px; aspect-ratio: 1 / 1;}
.photo-album-head h6{margin: 0;}
.photo-album-list{border-bottom: solid 1px var(--black-50); padding-bottom: 30px;}
.photo-album-list:last-child{border: none; padding-bottom: 0;}
.modal-header h5,.modal-header h6{margin: 0;}
.league-level-bg{display: flex; flex-direction: column; gap: 30px;}
.box-bg-border{border: solid 1px var(--black-100); border-radius: 15px; padding: 20px;}
.level-box-title figure{margin: 0; width: 45px; height: 45px; background: var(--black-100); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--black-900); font-family: var(--semiBold);}
.level-box-title figcaption{font-size: 22px; color: var(--black-900); font-family: var(--semiBold);}
.level-box-count p{margin: 0; color: var(--black-500);}
.league-system-tab-head ul{border-bottom: solid 1px var(--black-100); display: flex; gap: 15px; margin: 0; padding: 0; list-style: none; white-space: nowrap; flex-wrap: nowrap; overflow: auto;}
.league-system-tab-head ul li button{font-size: 14px; font-family: var(--semiBold); color: var(--black-700); padding: 15px 15px; border-bottom: solid 2px transparent;}
.league-system-tab-head ul li button.active{color: var(--black-900); border-bottom: solid 2px var(--primary);}
.league-system-tab-inner-head{border:solid 1px var(--black-50); border-radius: 15px; padding: 15px;}
.league-box-list ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(322px, 1fr)); gap: 30px;}
.league-box-list ul li{border: solid 1px var(--black-100); border-radius: 15px; display: flex; align-items: center; padding: 15px; gap: 15px;}
.league-box-list ul li figure{width: 58px; height: 58px; flex:0 0 58px; background: url(../images/number-box.svg) no-repeat; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--black-900); font-family: var(--semiBold); margin: 0;}
.league-box-list ul li figcaption{flex: 1;}
.subscribe-fan-clubs-head .form-control{width: 180px;}

/*My Profile - My Notifications-page-css-here*/

.notification-disabled-list ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(322px, 1fr)); gap: 30px;}
.notification-disabled-list ul li{border: solid 1px var(--black-100); border-radius: 15px; padding: 15px;}
.remove-btn{width: 50px;}
.save-btn{margin-top: 35px;}
.white{color: var(--black-900) !important;}
.green{color: var(--success-100) !important;}



/*become-model-page-css-here*/

.become-model-bg .send-tip-tab-head ul li button:focus{color: var(--white);}
.form-content.become-model-bg{max-width: 1000px; width: 100%;}
.model-step-head ul li{width: 100%;}
.model-step-head ul li button{width: 100%; text-align: center;}
.email-verification-content{background: rgba(255, 255, 255, 0.05); padding: 30px; border-radius: 16px;}
.email-text{color: var(--white);}


/*static-page-css-here*/
.static-page-des h1{font-size: 26px;}
.static-page-des h2{font-size: 20px;}
.static-page-des a{color: var(--primary);}


.feed-item-head{flex-wrap: wrap;}