html { scroll-behavior: smooth; }
body{ font-family: var(--manrope); background: var(--black); font-size: 16px; }

h1, h2, h3, h4, h5, h6{ font-family: var(--manrope); font-weight: 600; }
h2{ color: #FFF; font-family: var(--manrope); font-size: 54px; font-style: normal; font-weight: 300; line-height: 118%; letter-spacing: 0.54px; }
h3{font-family: var(--manrope); font-size: 16px; font-style: normal; font-weight: 600; line-height: 110%; letter-spacing: 0.32px; background:  linear-gradient(91deg, #FF5407 0.82%, #D49D56 159.7%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
h4{color: #FFF; font-family: var(--manrope); font-size: 28px; font-style: normal; font-weight: 400; line-height: 130%; }
p{ color: #FFF; font-family: var(--manrope); font-size: 16px; font-style: normal; font-weight: 300; line-height: 175%; letter-spacing: 0.16px; }
p.subtitle{ margin-top: 120px; }
p.subtitle::before{ content: ""; display: block; width: 33px; height: 1px; background: var(--orange); margin-bottom: 20px; }
span.number-text { color: var(--orange); font-family: var(--orbitron); font-size: 24px; font-style: normal; font-weight: 700; line-height: 110%; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 20px; }


.content{ margin: 0 auto; max-width: 1600px; width: 100%; padding: 0 30px; }
.content.text-left { position: relative; display: flex; justify-content: start; }
.content.text-right { position: relative; display: flex; justify-content: end; }
section{ height: 100vh; }
.box { position: relative;  bottom: 0; overflow: hidden; width: 100%; height: 100%; border-radius: 20px; border: 1px solid #4A4A4A; padding: 60px; display: flex; flex-direction: column; justify-content: end;box-shadow: 0 2px 25px rgba(252, 146, 97, 0); transition: all 0.4s ease; }
.box > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; z-index: 0; }
.box:hover > img { transform: scale(1.05); }
.box > span, .box > h4 { position: relative; z-index: 1; }
.box:hover { box-shadow: 0 2px 25px rgb(252 149 97 / 23%); border: 1px solid #f7801a5e; bottom: 10px;}
.box-title { position: relative; overflow: hidden; border-radius: 5px; border: 1px solid var(--asdf, #FF5407); background: linear-gradient(91deg, rgba(255, 84, 7, 0.05) 0.82%, rgba(212, 157, 86, 0.05) 159.7%); backdrop-filter: blur(5px); display: inline-block; padding: 9px 15px; margin-bottom: 15px; }
.box-title::after { content: ''; position: absolute; top: -1px; left: -60%; width: 40%; height: calc(100% + 2px); background: linear-gradient(110deg, transparent, rgba(255, 210, 160, 0.28), transparent); transform: skewX(-15deg); pointer-events: none; animation: boxtitle-shine 5s ease-in-out infinite; }
.text { width: 100%; max-width: 490px; }
strong{ font-weight: 600; }
em, i{ font-style: italic; }

.content.text-left { justify-content: space-between; align-items: center; display: flex; gap: 28px; margin-bottom: 70px; }
.content.img-indicator { position: absolute; bottom: 50px; }
ul.text-list { position: relative; display: flex; gap: 25px; width: 100%; margin-top: 84px; }
ul.text-list li { position: relative; overflow: hidden; background: #101010; border: 1px solid #404040; border-radius: 10px; transition: border 0.4s ease, color 0.4s ease; padding: 26px 20px 26px 30px; width: 100%; display: flex; align-items: center; color: #646464; }
ul.text-list li::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0d4f5c 0%, #1a1f5e 100%); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; }
ul.text-list li.active { color: #FFF; border: 1px solid rgba(255, 255, 255, 0.12); }
ul.text-list li.active::before { transform: scaleX(1); }
ul.text-list li span { position: relative; z-index: 1; font-family: var(--orbitron); font-size: 16px; font-style: normal; font-weight: 700; line-height: 110%; letter-spacing: 0.8px; text-transform: uppercase; margin: 0; margin-right: 20px; color: #646464; transition: color 0.4s ease; }
ul.text-list li h4 { position: relative; z-index: 1; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%; color: #646464; transition: color 0.4s ease; }
ul.text-list li.active span { color: #FFF; }
ul.text-list li.active h4 { color: #FFF; }

/* Titles */
.page-title{ font-size: 38px; font-weight: 600; letter-spacing: -1px; color: var(--black); }

/* reCaptcha */
.grecaptcha-badge{ visibility: hidden; }
.recaptcha-message{ font-size: 13px; line-height: 1.4; }
.recaptcha-message a{ margin: 0 5px; color: #FFF; text-decoration: none; }
.recaptcha-message a:hover{ text-decoration: underline; }

/* Pattern */
.pattern{ position: absolute; width: 100%; height: 100%; background-image: url(../img/pattern.png); background-repeat: repeat; mix-blend-mode: soft-light; }
.pattern-black{ position: absolute; width: 100%; height: 100%; background-image: url(../img/pattern.jpg); background-repeat: repeat; mix-blend-mode: darken; top: 0; }
.pattern-white{ position: absolute; width: 100%; height: 97%; background-image: url(../img/pattern-white.png); background-repeat: repeat; mix-blend-mode: soft-light; top: 0; opacity: .7; }

/* Swiper */
.features-slider{ padding: 0 30px !important;}

/* Animations */
@keyframes background-animation{ from { opacity: 1; } to { opacity: 0.7; } }
@keyframes radar-pulse { from { opacity: 1; } to { opacity: 0.6; } }

@keyframes h3-shine {
    0%, 55%  { background-position: 0% center; }
    75%      { background-position: 100% center; }
    76%      { background-position: 0% center; }
    100%     { background-position: 0% center; }
}

@keyframes boxtitle-shine {
    0%, 50%  { left: -60%; }
    78%      { left: 130%; }
    100%     { left: 130%; }
}

@keyframes vector-shine {
    0%, 40%  { background-position: 0% center; }
    68%      { background-position: 100% center; }
    68.01%   { background-position: 0% center; }
    100%     { background-position: 0% center; }
}


.mobile-only{display: none!important;}

/* Media Queries */
@media screen and (max-width: 1280px){
    .page-title{ font-size: 36px; }

}

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

    .box { border-radius: 20px; padding: 20px; height: 400px; }
    .page-title{ font-size: 30px; }
    h4 { font-size: 20px; }
    span.number-text { font-size: 20px; letter-spacing: 1px; margin-bottom: 10px; }
    .mobile-only{display: block!important;}
    .content.mobile-only{ padding: 0; }
    .desktop-only{ display: none!important;}

}

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

    html { overflow-x: hidden; }
    body { overflow-x: clip; }

    .box-title h3 { font-size: 12px; }
    h2 { font-size: 34px; letter-spacing: 0; }
    p { font-size: 14px; letter-spacing: 0; }
    p.subtitle { margin-top: 60px; }

    .content.text-right { justify-content: start; }

}

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