/* ------------------------------------------------
  Project:   Leod - Creative Portfolio Bootstrap5 Template
  Author:    ThemeHt
------------------------------------------------ */

/* ------------------------
    Table of Contents

  1. General
  2. Typography
  3. Text color
  4. Background color
  5. Contact Form
  6. Extra
  7. Responsive Css
------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --themeht-primary-color: #ffd000;
    --themeht-text-color: #0e1101;
    --themeht-body-color: #C1B9B9;
    --themeht-white-color: #ffffff;
    --themeht-rgba-color-color: #ffffff;
    --themeht-rgba-color-alpha: 0.7;
    --themeht-bg-dark-color: #0A0D00;
    --themeht-bg-light-color: #0f1203;
    --themeht-border-light-color: #252621;
    --themeht-typography-body-font-family: 'Hanken Grotesk', sans-serif;
    --themeht-typography-secondary-font-family: 'Darker Grotesque', sans-serif;
    --themeht-typography-h1-font-family: 'Darker Grotesque', sans-serif;
    --themeht-typography-h2-font-family: 'Darker Grotesque', sans-serif;
    --themeht-typography-h3-font-family: 'Darker Grotesque', sans-serif;
    --themeht-typography-h4-font-family: 'Darker Grotesque', sans-serif;
    --themeht-typography-h5-font-family: 'Darker Grotesque', sans-serif;
    --themeht-typography-h6-font-family: 'Darker Grotesque', sans-serif;
    --logo-desktop-height: 70px;
    --logo-tablet-height: 60px;
    --logo-mobile-height: 50px;
}
/* ------------------------
    General
------------------------*/

body {background: var(--themeht-bg-dark-color); scroll-behavior: smooth; font-family: var(--themeht-typography-body-font-family); font-weight: normal; font-style: normal; font-size: 16px; line-height: 26px; color: var(--themeht-body-color); overflow-x: hidden;}
.page-wrapper{overflow-x: hidden;}

/* ------------------------
    Typography
------------------------*/
h1, h2, h3, h4, h5, h6 {font-weight: normal; margin-top: 0px; margin-bottom: 20px; color: var(--themeht-white-color); font-family: var(--themeht-typography-secondary-font-family); letter-spacing: 1px;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 { font-size: 80px; font-style: normal; line-height: 80px; font-weight: 700; }
h2 { font-size: 60px; font-style: normal; line-height: 60px; font-weight: 600; position: relative; }
h3 { font-size: 30px; font-style: normal; line-height: 30px; font-weight: 600; }
h4 { font-size: 26px; font-style: normal; line-height: 26px; font-weight: 600;  }
h5 { font-size: 22px; font-style: normal; line-height: 22px; font-weight: 600; }
h6 { font-size: 20px; font-style: normal; line-height: 20px; font-weight: 600; }
ul { margin-left: 0; }

@media (min-width:1200px) {
  .elementor-section.elementor-section-boxed>.elementor-container { max-width: 1320px !important; }
}
.custom-sec-padding{padding-top: 120px; padding-bottom: 120px;}


/* ------------------------
    Cursor
------------------------*/
#magic-cursor { position: absolute; display: none; pointer-events: none; z-index: 99999; opacity: 0; }
body.tt-magic-cursor #magic-cursor { display: block }
#ball { position: fixed; display: flex; justify-content: center; align-items: center; color: var(--themeht-text-color); pointer-events: none; border-style: solid; border-radius: 50%; border-color: var(--themeht-white-color); background: var(--themeht-bg-dark-color); }
#ball.ball-view { background-color: var(--themeht-primary-color); font-size: 24px; font-weight: 700; color: var(--themeht-text-color); line-height: 30px; text-align: center; width: 150px !important; height: 150px !important; }
#ball .ball-view-inner { padding: 0 0; opacity: 0; visibility: hidden; transform: scale(0); }
#ball.ball-drag-slider { background-color: var(--themeht-bg-dark-color); font-size: 18px; color: var(--themeht-white-color); line-height: 1; width: 70px !important; height: 70px !important; }
#ball.ball-drag-slider::before { content: "\F284"; position: absolute; top: 50%; left: 15px; font-family: bootstrap-icons !important; display: inline-block; transform: translateY(-50%); }
#ball.ball-drag-slider::after { content: "\F285"; position: absolute; top: 50%; right: 15px; font-family: bootstrap-icons !important; display: inline-block; transform: translateY(-50%); }
#ball.ball-close-enabled { opacity: 1 !important }
#ball .ball-close { position: absolute; padding: 0 0; font-size: 14px; font-weight: 600; color: var(--themeht-white-color); line-height: 1; text-align: center }
#ball.magnetic-active { opacity: 0; }
.magnetic-wrap { display: inline-block; }


/* ------------------------
Extra
------------------------*/

.video-sec { margin-top: 100px }
a.text-btn-icon { font-size: 60px; background: var(--themeht-primary-color); color: var(--themeht-text-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
a.text-btn-icon:hover { font-size: 50px; }
.page-link { color: var(--themeht-white-color); background-color: transparent; border: 1px solid var(--themeht-border-light-color); border-radius: 0 !important; }
.page-link:hover, .page-link:focus { border-color: var(--themeht-primary-color); background-color: var(--themeht-primary-color); color: var(--themeht-text-color); box-shadow: none }
.slider-padding { padding-top: 100px }
.section-py { padding-top: 120px; padding-bottom: 120px }
.mb-10 { margin-bottom: 100px }
.contact-page .elementor-widget .elementor-icon-list-item{margin-bottom: 30px !important;}
.contact-page .elementor-widget .elementor-icon-list-icon i{ font-size: 24px !important; color: var(--themeht-primary-color) !important;}
.contact-page .elementor-widget-icon-list .elementor-icon-list-text{font-family: var(--themeht-typography-body-font-family) !important; font-weight: 400 !important; margin-left: 10px; color: var(--themeht-white-color) !important; font-size: 20px;}
.contact-page .elementor-widget-icon-list a:hover .elementor-icon-list-text{ color: var(--themeht-primary-color) !important;}
.map iframe { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); height: 500px; max-width: 100%; width: 100%; margin: 0; line-height: 1; border: none; }



/* ------------------------
 Form Section
------------------------*/
input[type="submit"].subscribe-btn,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-search__button {
  height: 100%;
  border-radius: 0;
  line-height: inherit;
  z-index: 99;
  position: relative;
  font-family: var(--themeht-typography-secondary-font-family); font-size: 18px; text-transform: uppercase; font-weight: 700; background: var(--themeht-primary-color); color: var(--themeht-text-color); border: 1px solid var(--themeht-primary-color); padding: 12px 30px;
}


input[type="submit"].subscribe-btn:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-search__button:hover {
  background: var(--themeht-bg-dark-color); color: var(--themeht-white-color); border-color: var(--themeht-primary-color);
}

.comment-form .form-submit input[type=submit],
.post-comment .form-submit input[type="submit"],
.wp-block-search__button,
.post-password-form input[type="submit"] { font-family: var(--themeht-typography-secondary-font-family); font-size: 18px; text-transform: uppercase; font-weight: 700; background: var(--themeht-primary-color); color: var(--themeht-text-color); border: 1px solid var(--themeht-primary-color); padding: 12px 30px; height: 100%;}

.comment-form .form-submit input[type=submit]:hover,
.post-comment .form-submit input[type="submit"]:hover,
.wp-block-search__button:hover,
.post-password-form input[type="submit"]:hover { background: var(--themeht-bg-dark-color); color: var(--themeht-white-color); border-color: var(--themeht-primary-color); }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  border: none;
  border-bottom: 1px solid var(--themeht-border-light-color);
  padding: .375rem 15px .375rem 0;
  width: 100%;
  height: 55px;
  color: var(--themeht-body-color);
  border-radius: 0;
  background: transparent;
}

textarea {
  height: 100px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus { color: var(--themeht-white-color); border-bottom: 1px solid var(--themeht-primary-color) !important;}

.wpcf7-form-control-wrap { display: block;}
.wpcf7-form-control, select { border: none; border-bottom: 1px solid var(--themeht-border-light-color);}
.wpcf7-form-control.wpcf7-select, select { width: 100%; padding: .550rem 0 .550rem 0; background-color: transparent; height: 55px; color: var(--themeht-body-color); }
.wpcf7-form-control.wpcf7-textarea { height: 100px;}
.wpcf7-form .wpcf7-spinner{position: absolute; padding: 0;}
.wpcf7-form .wpcf7-spinner:after{display: none;}
.wpcf7-not-valid-tip { position: absolute; right: 0; font-size: 0.8rem; bottom: -25px; }
.theme-bg .wpcf7-not-valid-tip, .theme-bg .wpcf7-response-output { color: var(--themeht-white-color); }

::-webkit-input-placeholder {
    color: var(--themeht-body-color) !important;
    opacity: 1;
}
:-moz-placeholder {
    color: var(--themeht-body-color) !important;
    opacity: 1;
}
::-moz-placeholder {
    color: var(--themeht-body-color) !important;
    opacity: 1;
}
:-ms-input-placeholder {
    color: var(--themeht-body-color) !important;
    opacity: 1;
}

:focus-visible {
    outline: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(../images/down-arrow.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1.5em 1.5em;
    padding-right: 0;
    -webkit-print-color-adjust: exact;
}


select option{word-break: break-word; color: var(--themeht-text-color);}


blockquote, .wp-block-quote.is-style-large { background: var(--themeht-bg-light-color); padding: 40px 80px 40px 40px !important; margin: 50px 0px 50px 0px; font-size: 18px; line-height: 26px; position: relative; color: var(--themeht-white-color); border-left: 5px solid var(--themeht-primary-color); }
blockquote span { color: var(--themeht-primary-color); margin-top: 20px; display: block; font-family: var(--themeht-typography-secondary-font-family); font-size: 20px; font-weight: 500; }
.themeht-blogs .post-card .post-desc blockquote p { margin-bottom: 15px; margin-top: 0; }
body blockquote.wp-block-quote.is-style-large cite, body blockquote.wp-block-quote.is-style-large p, body blockquote p { margin: 0px; }
blockquote:after { opacity: 0.2; position: absolute; top: 0; left: 0; font-family: 'bootstrap-icons'; content: "\F6B0"; font-size: 80px; color: transparent; -webkit-text-stroke: 1px var(--themeht-primary-color); line-height: 1; }
blockquote.has-text-align-right { padding: 40px 40px 40px 80px !important; }
blockquote.has-text-align-right:after { right: inherit; left: 0; }



/* ------------------------
    Responsive Css
------------------------*/
@media (min-width:1200px) {
    .themeht-sidebar { padding-left: 80px; }
}
@media (max-width:992px) {

    /*Banner*/
    .logo img { max-height: var(--logo-tablet-height); }
    .themeht-sidebar { margin-top: 80px; }
    .post-card .post-bottom li { font-size: 14px; }
    .magnetic-img { width: 80%; }
    .header-menu-item { padding-top: 5rem; padding-left: 3rem; }
    .main-menu .nav-link { font-size: 70px; line-height: 70px; }
    .nav-link.dropdown-toggle::after { font-size: 50px; }
    .main-menu .dropdown-menu .dropdown-item { font-size: 40px; line-height: 40px; }
    .dropdown-submenu a.dropdown-toggle::after { font-size: 30px; }
    body.tt-magic-cursor #magic-cursor { display: none !important; }
}
@media (max-width:767px) {
    h1 { font-size: 60px !important; line-height: 60px !important; }
    .theme-title h2 { font-size: 40px !important; line-height: 40px !important; }
    .theme-title p { font-size: 16px; }
    .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: block; }
    .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { padding-right: 0; }
    .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { padding-left: 0; margin-top: 30px; }
    .counter span { font-size: 120px; }
    .rounded-button { width: 150px; height: 150px; padding: 0 20px; }
    .rounded-button i { font-size: 80px; margin-bottom: -15px; }
    .rounded-button span { line-height: 26px; font-size: 20px; }
    .portfolio-marquee-wrap .portfolio-marquee a { font-size: 150px; }
    .main-menu .nav-link { font-size: 40px; line-height: 40px; }
    .nav-link.dropdown-toggle::after { font-size: 25px; }
    .main-menu .dropdown-menu .dropdown-item { font-size: 30px; line-height: 30px; }
    .dropdown-submenu a.dropdown-toggle::after { font-size: 20px; }
    .menu-close { right: 30px; font-size: 40px; }
    .portfolio-single p, .about-title p { font-size: 20px; line-height: 30px; font-weight: 500; }
    .portfolio-item.style-2 .portfolio-image { padding-right: 50px; }
    .portfolio-item.style-2 .portfolio-image img { height: 400px; }
    a.view-btn { right: 0px; top: 50px; font-size: 20px; width: 120px; height: 120px; padding: 25px 40px; line-height: 26px; }
    .team-member .team-desc h4 { margin-bottom: 10px; font-size: 60px; line-height: 60px; }
}
@media (max-width:576px) {
    h1, .h1 { font-size: 50px !important; line-height: 50px !important; }
}

#particles-js {
  position: fixed;
    left: 0px;
    top: 0px;
    z-index: -99;
    opacity: 0.05;
    width: 100%;
    height: 100%;
}