/**
 Theme Name: Davis
 Author: Laralink
 Version: 1.0.0
 */
/*Google Fonts*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
/*--------------------------------------------------------------
>> TABLE OF CONTENTS:
----------------------------------------------------------------
1. Typography
2. Spacing
3. General
4. Preloader
5. Header
6. Button
7. Slider
8. Section Heading
9. Icon box
10. Text Block
11. Text Block
12. Video Block
13. Image Box
14. Funfact
15. Isotope
16. Image Gallery
17. Skill
18. Post
19. Testimonial
20. Contact Form
21. Blog Details
22. Comments
23. Footer

--------------------------------------------------------------*/
/*--------------------------------------------------------------
1. Typography
----------------------------------------------------------------*/
body,
html {
  color: #a9adb8;
  background-color: #0a101e;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h3,
h6 {
  clear: both;
  color: #fdfeff;
  padding: 0;
  margin: 0 0 10px 0;
  font-weight: 700;
  line-height: 1.2em;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 26px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 15px;
}

p {
  margin-bottom: 12px;
}

ul {
  margin: 0 0 15px 0;
  padding-left: 15px;
  list-style: square outside none;
}

ol {
  padding-left: 15px;
  margin-bottom: 15px;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 15px;
}

address {
  margin: 0 0 15px;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 991px) {
  body, html {
    font-size: 14px;
  }
  body {
    padding-top: 70px;
  }
}
/*--------------------------------------------------------------
2. Spacing
----------------------------------------------------------------*/
@media screen and (min-width: 992px) {
  .st-height-b0 {
    height: 0px;
  }
  .st-height-b5 {
    height: 5px;
  }
  .st-height-b10 {
    height: 10px;
  }
  .st-height-b15 {
    height: 15px;
  }
  .st-height-b20 {
    height: 20px;
  }
  .st-height-b25 {
    height: 25px;
  }
  .st-height-b30 {
    height: 30px;
  }
  .st-height-b35 {
    height: 35px;
  }
  .st-height-b40 {
    height: 40px;
  }
  .st-height-b45 {
    height: 45px;
  }
  .st-height-b50 {
    height: 50px;
  }
  .st-height-b55 {
    height: 55px;
  }
  .st-height-b60 {
    height: 60px;
  }
  .st-height-b65 {
    height: 65px;
  }
  .st-height-b70 {
    height: 70px;
  }
  .st-height-b75 {
    height: 75px;
  }
  .st-height-b80 {
    height: 80px;
  }
  .st-height-b85 {
    height: 85px;
  }
  .st-height-b90 {
    height: 90px;
  }
  .st-height-b95 {
    height: 95px;
  }
  .st-height-b100 {
    height: 100px;
  }
  .st-height-b105 {
    height: 105px;
  }
  .st-height-b110 {
    height: 110px;
  }
  .st-height-b115 {
    height: 115px;
  }
  .st-height-b120 {
    height: 120px;
  }
  .st-height-b125 {
    height: 125px;
  }
  .st-height-b130 {
    height: 130px;
  }
  .st-height-b135 {
    height: 135px;
  }
  .st-height-b140 {
    height: 140px;
  }
  .st-height-b145 {
    height: 145px;
  }
  .st-height-b150 {
    height: 150px;
  }
  .st-height-b155 {
    height: 155px;
  }
  .st-height-b160 {
    height: 160px;
  }
  .st-height-b165 {
    height: 165px;
  }
  .st-height-b170 {
    height: 170px;
  }
  .st-height-b175 {
    height: 175px;
  }
  .st-height-b180 {
    height: 180px;
  }
  .st-height-b185 {
    height: 185px;
  }
  .st-height-b190 {
    height: 190px;
  }
  .st-height-b195 {
    height: 195px;
  }
  .st-height-b200 {
    height: 200px;
  }
  .st-height-b205 {
    height: 205px;
  }
  .st-height-b210 {
    height: 210px;
  }
}

@media screen and (max-width: 991px) {
  .st-height-lg-b0 {
    height: 0px;
  }
  .st-height-lg-b5 {
    height: 5px;
  }
  .st-height-lg-b10 {
    height: 10px;
  }
  .st-height-lg-b15 {
    height: 15px;
  }
  .st-height-lg-b20 {
    height: 20px;
  }
  .st-height-lg-b25 {
    height: 25px;
  }
  .st-height-lg-b30 {
    height: 30px;
  }
  .st-height-lg-b35 {
    height: 35px;
  }
  .st-height-lg-b40 {
    height: 40px;
  }
  .st-height-lg-b45 {
    height: 45px;
  }
  .st-height-lg-b50 {
    height: 50px;
  }
  .st-height-lg-b55 {
    height: 55px;
  }
  .st-height-lg-b60 {
    height: 60px;
  }
  .st-height-lg-b65 {
    height: 65px;
  }
  .st-height-lg-b70 {
    height: 70px;
  }
  .st-height-lg-b75 {
    height: 75px;
  }
  .st-height-lg-b80 {
    height: 70px;
  }
  .st-height-lg-b85 {
    height: 85px;
  }
  .st-height-lg-b90 {
    height: 90px;
  }
  .st-height-lg-b95 {
    height: 95px;
  }
  .st-height-lg-b100 {
    height: 100px;
  }
  .st-height-lg-b105 {
    height: 105px;
  }
  .st-height-lg-b110 {
    height: 110px;
  }
  .st-height-lg-b115 {
    height: 115px;
  }
  .st-height-lg-b120 {
    height: 120px;
  }
  .st-height-lg-b125 {
    height: 125px;
  }
  .st-height-lg-b130 {
    height: 130px;
  }
  .st-height-lg-b135 {
    height: 135px;
  }
  .st-height-lg-b140 {
    height: 140px;
  }
  .st-height-lg-b145 {
    height: 145px;
  }
  .st-height-lg-b150 {
    height: 150px;
  }
  .st-height-lg-b155 {
    height: 155px;
  }
  .st-height-lg-b160 {
    height: 160px;
  }
  .st-height-lg-b165 {
    height: 165px;
  }
  .st-height-lg-b170 {
    height: 170px;
  }
  .st-height-lg-b175 {
    height: 175px;
  }
  .st-height-lg-b180 {
    height: 180px;
  }
  .st-height-lg-b185 {
    height: 185px;
  }
  .st-height-lg-b190 {
    height: 190px;
  }
  .st-height-lg-b195 {
    height: 195px;
  }
  .st-height-lg-b200 {
    height: 200px;
  }
  .st-height-lg-b205 {
    height: 205px;
  }
  .st-height-lg-b210 {
    height: 210px;
  }
}

/*--------------------------------------------------------------
3. General
----------------------------------------------------------------*/
.st-mp0 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.st-zoom {
  position: relative;
  overflow: hidden;
}

.st-zoom .st-zoom-in {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.st-zoom:hover .st-zoom-in {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

.st-vertical-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.st-vertical-middle .st-vertical-middle-in {
  width: 100%;
}

.st-bg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.st-content {
  position: relative;
  z-index: 10;
  overflow-x: hidden;
}

.st-sticky-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.st-dark-bg {
  background-color: #070d1b;
}

.st-gray-bg {
  background-color: #b8b8b8;
}

.st-gray-overlay {
  position: relative;
}

.st-gray-overlay:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(184, 184, 184, 0.86);
}

.st-gray-overlay .container {
  position: relative;
  z-index: 1;
}

hr {
  margin: 0;
  width: 100%;
  border-color: #000000;
}

.st-fixed-bg {
  background-attachment: fixed;
}

@media screen and (max-width: 991px) {
  .st-content {
    margin: 0 !important;
  }
  .st-vertical-middle {
    display: block;
  }
}

/*--------------------------------------------------------------
5. Header
----------------------------------------------------------------*/
.st-site-header.st-style1 {
  background-color: rgba(7, 13, 27, 0.9);
  -webkit-box-shadow: 0 10px 10px -10px rgba(7, 13, 27, 0.1);
          box-shadow: 0 10px 10px -10px rgba(7, 13, 27, 0.1);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-site-header.st-style1 .st-main-header-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100px;
}

.st-site-header.st-style1.st-transparent-header {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.st-site-header.st-style1.st-sticky-active {
  background-color: #070d1b;
  -webkit-box-shadow: 0 10px 10px -10px rgba(7, 13, 27, 0.1);
          box-shadow: 0 10px 10px -10px rgba(7, 13, 27, 0.1);
}

@media screen and (max-width: 991px) {
  .st-main-header .container {
    max-width: 100%;
  }
  .st-site-header.st-style1 {
    background-color: #070d1b;
  }
  .st-site-header.st-style1 .st-main-header-in {
    height: 70px;
  }
}

.st-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-main-header {
  position: relative;
}

@media screen and (min-width: 992px) {
  .st-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .st-nav .st-nav-list {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .st-nav .st-nav-list > li {
    margin-right: 40px;
  }
  .st-nav .st-nav-list > li:last-child {
    margin-right: 45px;
  }
  .st-nav .st-nav-list > li > a {
    padding: 15px 0;
    font-size: 15px;
    display: inline-block;
    color: #fdfeff;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
  }
  .st-nav .st-nav-list > li > a.active {
    color: #fec544;
  }
  .st-nav .sp-phone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 45px;
    position: relative;
  }
  .st-nav .sp-phone::before {
    content: '';
    position: absolute;
    height: 11px;
    width: 1px;
    background: white;
    left: 0px;
  }
  .st-nav .sp-phone svg {
    fill: #ffffff;
    width: 15px;
  }
  .st-nav .sp-phone .sp-phone-no {
    padding-left: 15px;
    color: #fec544;
  }
  .st-munu-toggle,
  .st-munu-dropdown-toggle {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .st-munu-dropdown-toggle {
    position: absolute;
    height: 30px;
    width: 30px;
    right: 20px;
    top: 5px;
  }
  .st-munu-dropdown-toggle:before {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    font-size: 10px;
    color: #a9adb8;
    transition: transform 0.3s ease, color 0.3s ease;
    height: auto;
    width: auto;
    background-color: transparent;
  }
  .st-munu-dropdown-toggle:after {
    display: none;
  }
  .st-munu-dropdown-toggle.active:before {
    transform: translate(-50%, -50%) rotate(180deg);
    color: #fec544;
  }
  .st-nav .st-nav-list {
    position: absolute;
    width: 100vw;
    left: 0;
    background-color: #070d1b;
    padding: 10px 0;
    display: none;
    top: 100%;
    border-top: 1px solid #101624;
    border-bottom: 1px solid #101624;
    overflow: auto;
    max-height: calc(100vh - 80px);
  }
  .st-nav .st-nav-list ul {
    padding-left: 15px;
    display: none;
  }
  .st-nav .st-nav-list a {
    display: block;
    padding: 8px 20px;
  }
  .st-nav .menu-item-has-children {
    position: relative;
  }
  .st-nav .sp-phone {
    display: none;
  }
  /*Mobile Menu Button*/
  .st-munu-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 27px;
    margin: 15px 0px 15px 0px;
    cursor: pointer;
  }
  .st-munu-toggle span,
  .st-munu-toggle span:before,
  .st-munu-toggle span:after {
    width: 100%;
    height: 2px;
    background-color: #666;
    display: block;
  }
  .st-munu-toggle span {
    margin: 0 auto;
    position: relative;
    top: 12px;
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  .st-munu-toggle span:before {
    content: '';
    position: absolute;
    margin-top: -8px;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    transition-property: margin, transform, -webkit-transform;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s, 0s;
            transition-delay: 0.2s, 0s;
  }
  .st-munu-toggle span:after {
    content: '';
    position: absolute;
    margin-top: 8px;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    transition-property: margin, transform, -webkit-transform;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s, 0s;
            transition-delay: 0.2s, 0s;
  }
  .st-toggle-active span {
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  .st-toggle-active span:before {
    margin-top: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition-delay: 0s, 0.2s;
            transition-delay: 0s, 0.2s;
  }
  .st-toggle-active span:after {
    margin-top: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition-delay: 0s, 0.2s;
            transition-delay: 0s, 0.2s;
  }
}

.st-sticky-header {
  position: fixed;
  z-index: 200;
  width: 100%;
  top: 0;
  left: 0;
}

.st-site-branding img {
  height: 85px !important;
  width: auto !important;
  filter: brightness(1.4) drop-shadow(0px 0px 8px rgba(254, 197, 68, 0.5));
}

@media screen and (max-width: 991px) {
  .st-site-branding img {
    height: 50px !important;
  }
}

.st-site-header.st-style2 .st-header-author {
  height: 190px;
  width: 190px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.1);
  margin: auto;
}

.st-site-header.st-style2 .st-header-author img {
  border-radius: inherit;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (min-width: 991px) {
  .st-site-header.st-style2 {
    width: 300px;
    background: #070d1b;
    height: 100vh;
    border-right: 1px solid #101624;
    overflow: auto;
  }
  .st-site-header.st-style2 .st-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .st-site-header.st-style2 .st-nav .st-nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .st-site-header.st-style2 .st-nav .st-nav-list > li {
    margin-right: 0;
  }
  .st-site-header.st-style2 .st-nav .st-nav-list > li > a {
    padding: 10px 0;
  }
  .st-site-header.st-style2 .st-main-header {
    position: relative;
    padding: 40px 25px 80px;
  }
  .st-site-header.st-style2 .st-main-header:after {
    content: '';
    position: fixed;
    height: 80px;
    width: 299px;
    left: 0;
    bottom: 0;
    background-color: #070d1b;
  }
  .st-site-header.st-style2 .st-social-btn.st-style1 {
    position: fixed;
    bottom: 40px;
    left: 40px;
  }
  .st-site-header.st-style2 .st-social-btn.st-style1 li {
    color: #0a101e;
    margin-right: 20px;
    font-size: 18px;
  }
  .st-site-header.st-style2 .st-social-btn.st-style1 li:last-child {
    margin-right: 0;
  }
  .st-site-header.st-style2 .st-social-btn.st-style1 li a:hover {
    color: #070d1b;
  }
  .st-site-header.st-style2 .st-main-header-left {
    margin-bottom: 24px;
  }
  .st-site-header.st-style2 .st-btn.st-style1 {
    margin-top: 20px;
    font-size: 14px;
    padding: 0.6em 1.3em;
  }
  .st-site-header.st-style2 .st-hero-btn {
    margin-top: 22px;
  }
  .st-site-header.st-style2 .st-main-header-left {
    margin-left: -40px;
    margin-right: -40px;
    border-bottom: 1px solid #101624;
    padding-bottom: 40px;
  }
  .st-get-sidebar {
    padding-left: 300px;
  }
  .st-get-sidebar .st-sticky-footer {
    left: 300px;
    max-width: calc(100% - 300px);
  }
}

@media screen and (max-width: 991px) {
  .st-site-header .st-btn,
  .st-site-header.st-style2 .st-opening-hr,
  .st-site-header.st-style2 .st-social-btn.st-style1 {
    display: none !important;
  }
  .st-site-header.st-style2 {
    background-color: #070d1b;
    border-bottom: 1px solid #101624;
  }
  .st-site-header.st-style2 .st-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .st-site-header.st-style2 .st-main-header-in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 70px;
  }
  .st-site-header.st-style2 .st-header-author {
    height: 50px;
    width: 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
  }
}

/*--------------------------------------------------------------
8. Slider
-
---------------------------------------------------------------*/
.st-hero-wrap {
  position: relative;
  height: 850px;
  background-color: #070d1b;
}

.st-hero-wrap img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.st-hero-wrap .st-hero-img {
  position: absolute;
  right: 4%;
  top: 0;
  height: 100%;
  width: 45%;
  z-index: 11;
}

.st-hero.st-style1 {
  height: 710px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  z-index: 11;
}

.st-hero.st-style1 .st-hero-text h1 {
  font-size: 120px;
  margin-bottom: 24px;
  font-weight: 900;
  color: #fdfeff;
  line-height: 1;
}

.st-hero.st-style1 .st-hero-text h2 {
  font-size: 36px;
  margin-bottom: 41px;
  font-weight: 300;
  color: #a9adb8;
}

.st-hero.st-style1 .st-hero-text h3 {
  font-size: 30px;
  margin-top: -6px;
  margin-bottom: 10px;
  font-weight: 300;
  color: #fec544;
}

.st-social-group {
  background-color: #101624;
  border: 1px solid #232935;
  border-right: 0;
  border-radius: 50px 0 0 50px;
  height: 80px;
  width: 448px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: 30px;
  padding-left: 12px;
  right: 100%;
}

.st-hero.st-style2 {
  min-height: 100vh;
  padding-top: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #070d1b;
}

.st-hero.st-style2 .container {
  position: relative;
  z-index: 11;
}

.st-hero.st-style2 h1 {
  font-size: 60px;
  font-weight: 600;
  margin-bottom: 20px;
}

.st-hero.st-style2 h1 span {
  color: #fec544;
}

.st-hero.st-style2 p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6em;
  margin-bottom: 22px;
}

.st-hero.st-style2 .st-author {
  height: 190px;
  width: 190px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.1);
  margin: auto;
  margin-bottom: 25px;
}

.st-hero.st-style2 .st-author img {
  border-radius: inherit;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  object-position: center 15%;
}

.st-hero.st-style2 .st-hero-shape {
  width: 100%;
  fill: #0a101e;
  position: absolute;
  bottom: 0;
}

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  top: 0;
  left: 0;
}

.st-hero-social-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.st-hero-social-links .st-social-btn {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 16px;
  margin: 0 10px;
}

.st-hero-social-links .st-social-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
}

#background-wrap {
  bottom: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  top: 0;
  opacity: 0.1;
}

/* KEYFRAMES */
@-webkit-keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}
@keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}

@-webkit-keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}

@keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}

/* ANIMATIONS */
.x1 {
  -webkit-animation: animateBubble 25s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 25s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
  left: -5%;
  top: 5%;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

.x2 {
  -webkit-animation: animateBubble 20s linear infinite,
 sideWays 4s ease-in-out infinite alternate;
          animation: animateBubble 20s linear infinite,
 sideWays 4s ease-in-out infinite alternate;
  left: 5%;
  top: 80%;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

.x3 {
  -webkit-animation: animateBubble 28s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 28s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
  left: 10%;
  top: 40%;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.x4 {
  -webkit-animation: animateBubble 22s linear infinite,
 sideWays 3s ease-in-out infinite alternate;
          animation: animateBubble 22s linear infinite,
 sideWays 3s ease-in-out infinite alternate;
  left: 20%;
  top: 0;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}

.x5 {
  -webkit-animation: animateBubble 29s linear infinite,
 sideWays 4s ease-in-out infinite alternate;
          animation: animateBubble 29s linear infinite,
 sideWays 4s ease-in-out infinite alternate;
  left: 30%;
  top: 50%;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

.x6 {
  -webkit-animation: animateBubble 21s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 21s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
  left: 50%;
  top: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.x7 {
  -webkit-animation: animateBubble 20s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 20s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
  left: 65%;
  top: 70%;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

.x8 {
  -webkit-animation: animateBubble 22s linear infinite,
 sideWays 3s ease-in-out infinite alternate;
          animation: animateBubble 22s linear infinite,
 sideWays 3s ease-in-out infinite alternate;
  left: 80%;
  top: 10%;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}

.x9 {
  -webkit-animation: animateBubble 29s linear infinite,
 sideWays 4s ease-in-out infinite alternate;
          animation: animateBubble 29s linear infinite,
 sideWays 4s ease-in-out infinite alternate;
  left: 90%;
  top: 50%;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

.x10 {
  -webkit-animation: animateBubble 26s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 26s linear infinite,
 sideWays 2s ease-in-out infinite alternate;
  left: 80%;
  top: 80%;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}

/* OBJECTS */
.bubble {
  border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px white;
          box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px white;
  height: 200px;
  position: absolute;
  width: 200px;
}

.bubble:after {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=1);
  border-radius: 50%;
  -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
          box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
  content: '';
  height: 180px;
  left: 10px;
  position: absolute;
  width: 180px;
}

.st-to-right {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 991px) {
  .st-hero-wrap {
    height: initial;
  }
  .st-hero-wrap .st-hero-img {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .st-hero.st-style2 h1 {
    font-size: 40px;
  }
  .st-hero.st-style2 p {
    font-size: 16px;
  }
  .st-hero.st-style2 p br {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .st-hero.st-style1 {
    height: 580px;
  }
  .st-hero.st-style1 .st-hero-text h1 {
    font-size: 90px;
  }
}

/*--------------------------------------------------------------
6. Button
----------------------------------------------------------------*/
.st-btn.st-style1,
.st-btn.st-style2 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5em;
  font-weight: 500;
  padding: 12px 1.5em;
  border-radius: 50px;
  min-width: 170px;
  border: none;
  outline: none;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  text-transform: capitalize;
}

.st-btn.st-style2 {
  border: 1px solid;
  padding: 0.69em 3.2em;
}

.st-btn.st-style1:hover,
.st-btn.st-style2:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0px 5px 10px 0px #fec64450;
          box-shadow: 0px 5px 10px 0px #fec64450;
}

.st-btn.st-style1.st-color1 {
  background-color: #fec544;
  color: #070d1b;
}

.st-btn.st-style1.st-color2 {
  background: #000;
  color: #fff;
}

.st-btn.st-style1.st-color3 {
  background: #fff;
  color: #222;
}

.st-btn.st-style1.st-color4 {
  background-color: pink;
  color: #fff;
}

.st-btn.st-style1.st-color5 {
  background: linear-gradient(45deg, #1446ea 0%, #03dcec 88%, #03dcec 100%);
  color: #fff;
}

.st-btn.st-style2.st-color1 {
  background-color: transparent;
  border-color: #fec544;
  color: #fec544;
}

.st-btn.st-style2.st-color1:hover {
  background-color: #fec544;
  color: #070d1b;
}

.st-btn.st-size-medium {
  padding: 0.6em 1.8em;
}

.st-btn.st-style2.st-color2 {
  border-color: #fff;
  color: #fff;
}

.st-btn.st-style2.st-color2:hover {
  background-color: #fff;
  color: #222;
}

.st-hero-btn-group .st-btn:not(:last-child) {
  margin-right: 12px;
}

@media screen and (max-width: 991px) {
  .st-btn.st-style1,
  .st-btn.st-style2 {
    font-size: 14px;
    padding: 0.72em 1.8em;
  }
}

/*--------------------------------------------------------------
9. Section Heading
----------------------------------------------------------------*/
.st-section-heading.st-style1 {
  text-align: center;
  position: relative;
  margin-top: -5px;
  margin-bottom: 41px;
}

.st-section-heading.st-style1 .st-section-heading-title {
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fec544;
  position: relative;
  z-index: 10;
  letter-spacing: 1px;
}

.st-section-heading.st-style1 .st-section-heading-title::before {
  content: "";
  position: absolute;
  background-color: #3f4551;
  width: 170px;
  height: 2px;
  bottom: -16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.st-section-heading.st-style1 .st-section-heading-title::after {
  content: "";
  position: absolute;
  background-color: #fec544;
  width: 70px;
  height: 2px;
  bottom: -16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.st-section-heading.st-style1 .st-section-heading-subtitle {
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 90px;
  font-weight: 700;
  color: rgba(21, 27, 41, 0.5);
  margin: 0;
  margin-top: -17px;
  width: 100%;
}

@media screen and (max-width: 991px) {
  .st-section-heading.st-style1 .st-section-heading-subtitle {
    display: none;
  }
}

/* End Section Heading */
/*--------------------------------------------------------------
9. About Section — "The Dossier" (Group 2: static composition)
   Layout + depth layers + metric grid + scan rail, all at
   RESTING final state. No motion here — entrance (Groups 3-5),
   parallax (Group 6), shimmer (Group 7) layer on top later.
----------------------------------------------------------------*/

/* ── Section shell ─────────────────────────────────────────── */
.st-ab-wrap {
  position: relative;
  overflow: hidden; /* contains depth-plane bleed + future parallax */
}

/* ── Eyebrow (reframed — replaces doubled watermark heading) ── */
.st-ab-head {
  margin-bottom: 6px;
}
.st-ab-eyebrow {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fec544;
  position: relative;
  padding-left: 52px; /* room for the lead-in gold tick */
}
.st-ab-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 2px;
  background: #fec544;
  transform: translateY(-50%);
}

/* ── Master grid: portrait | content ───────────────────────── */
.st-ab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;   /* was: center — top-align both columns */
}

/* ════════════════════════════════════════════════════════════
   LEFT — Portrait stack with depth layers (Z-axis composition)
   The stack is a positioning context; layers sit absolutely
   around the portrait so Group 6 can translate them at
   independent rates. At rest they form one composed image.
   ════════════════════════════════════════════════════════════ */
.st-ab-portrait-col {
  position: relative;
}

.st-ab-portrait-stack {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  /* Aspect box keeps the composition stable regardless of the
     portrait's native ratio; the img covers it. */
  aspect-ratio: 4 / 5;
}

/* Back depth plane — a large gold-outlined rounded rect, offset
   up-left behind the portrait. Reads as architectural depth, not
   the old flat "picture frame." */
.st-ab-depth-plane {
  position: absolute;
  top: -26px;
  left: -26px;
  width: 78%;
  height: 78%;
  border: 1.5px solid rgba(254, 197, 68, 0.30);
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 0% 0%,
      rgba(254, 197, 68, 0.06), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* Portrait frame — the real image, masked to a clean panel.
   overflow:hidden gives the Group 3 clip-wipe a crisp boundary. */
.st-ab-portrait-frame {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(254, 197, 68, 0.14);
}
.st-ab-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; /* favors the face given the crop */
  display: block;
}
/* Subtle bottom gradient — seats the figure into the section,
   matches the existing image treatment language. */
.st-ab-portrait-frame::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top,
    rgba(7, 13, 27, 0.55) 0%, transparent 100%);
  pointer-events: none;
}

/* Front accent — a short gold corner bracket, lower-right,
   sitting in FRONT of the portrait. The fastest-moving parallax
   layer in Group 6; at rest it's a crisp framing detail. */
.st-ab-front-accent {
  position: absolute;
  /* Hug the portrait frame's bottom-right, overhanging slightly so
     it reads as a layer in FRONT of the image, not inside it. */
  right: -12px;
  bottom: -12px;
  width: 78px;
  height: 78px;
  border-right: 2px solid #fec544;
  border-bottom: 2px solid #fec544;
  border-radius: 0 0 10px 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: 4px 4px 18px rgba(254, 197, 68, 0.10);
}

/* ════════════════════════════════════════════════════════════
   RIGHT — Dossier content + scan rail
   ════════════════════════════════════════════════════════════ */
.st-ab-content-col {
  position: relative;
  padding-left: 34px; /* room for the scan rail */
}

/* Scan rail — the active gold agent. Group 2: rests at full
   height (its L→R/top-down DRAW is Group 4). Group 7 may add a
   whisper shimmer. */
.st-ab-scan-rail {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
    rgba(254, 197, 68, 0) 0%,
    #fec544 14%,
    #fec544 86%,
    rgba(254, 197, 68, 0) 100%);
  box-shadow: 0 0 10px rgba(254, 197, 68, 0.28);
  pointer-events: none;
}

/* ── Headline + positioning ────────────────────────────────── */
.st-ab-headline {
  font-size: 44px;
  font-weight: 600;
  color: #fdfeff;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}
.st-ab-positioning {
  font-size: 21px;
  font-weight: 300;
  color: #fec544;
  margin: 0 0 22px;
  line-height: 1.35;
}

/* ── Bio ───────────────────────────────────────────────────── */
.st-ab-bio p {
  color: #a9adb8;
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 16px;
}
.st-ab-bio p:last-child {
  margin-bottom: 0;
}

/* ── Metric grid (2×2) — premium elevated cards (R3) ───────── */
.st-ab-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 30px 0 28px;
}

.st-ab-metric {
  position: relative;
  background: linear-gradient(160deg, #141b2c 0%, #101624 65%);
  border: 1px solid #232935;
  border-radius: 8px;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.st-ab-metric-figure {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #fec544;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}

.st-ab-metric-label {
  font-size: 13px;
  line-height: 1.4;
  color: #a9adb8;
  letter-spacing: 0.2px;
}

.st-ab-metric:hover {
  border-color: rgba(254, 197, 68, 0.5);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
  transform: translateY(-4px);
}

/* ── Detail line ───────────────────────────────────────────── */
.st-ab-detail {
  font-size: 13.5px;
  color: #8c97a4;
  letter-spacing: 0.3px;
  margin-bottom: 26px;
}

/* ── CTA ───────────────────────────────────────────────────── */
.st-ab-cta {
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Tablet — tighten gap, scale headline */
@media screen and (max-width: 1199px) {
  .st-ab-grid { gap: 44px; }
  .st-ab-headline { font-size: 38px; }
}

/* Stack point — portrait above content (<992px) */
@media screen and (max-width: 991px) {
  .st-ab-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .st-ab-portrait-stack {
    max-width: 380px;
  }
  .st-ab-content-col {
    padding-left: 26px;
  }
  /* Rail shortens its reach slightly when stacked */
  .st-ab-headline { font-size: 36px; }
}

/* Small — comfortable metric grid + portrait on phones */
@media screen and (max-width: 575px) {
  .st-ab-portrait-stack {
    max-width: 300px;
  }
  .st-ab-depth-plane { top: -16px; left: -16px; }
  .st-ab-front-accent { width: 56px; height: 56px; right: -8px; bottom: -8px; }
  .st-ab-headline { font-size: 31px; }
  .st-ab-positioning { font-size: 18px; }
  .st-ab-metrics { gap: 12px; }
  .st-ab-metric { padding: 20px 18px 18px; }
  .st-ab-metric-figure { font-size: 32px; }
  .st-ab-content-col { padding-left: 22px; }
}
/*--------------------------------------------------------------
9b. About — flash-guard (simplified entrance — wipe removed)
   Portrait hidden start is opacity + slight scale (revealed by
   JS scale-up+fade). No clip-path, no seam. JS-gated via
   .st-ab-ready; no JS → visible (graceful).
----------------------------------------------------------------*/
.st-ab-wrap.st-ab-ready .st-ab-portrait-img {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .st-ab-wrap.st-ab-ready .st-ab-portrait-img {
    opacity: 1;
  }
}
/*--------------------------------------------------------------
9c. About — Group 4: scan-develop flash-guard + rail draw prep
   JS-gated via .st-ab-ready (already added by the About IIFE).
   Hidden states apply ONLY when JS runs AND reduced-motion is
   not requested. No JS → blocks stay visible (Group 2 resting).
----------------------------------------------------------------*/

/* Scan rail draws from the top: scaleY 0 → 1. Origin top so it
   grows DOWNWARD. (Group 2 set its full-height resting look;
   here we prep the transform for the JS-gated draw.) */
.st-ab-wrap.st-ab-ready .st-ab-scan-rail {
  transform: scaleY(0);
  transform-origin: top center;
}

/* Content blocks: hidden + slightly risen, revealed in the rail's
   wake by the timeline. Each is an independent target so the
   develop can be keyed to the rail's vertical position. */
.st-ab-wrap.st-ab-ready .st-ab-headline,
.st-ab-wrap.st-ab-ready .st-ab-positioning,
.st-ab-wrap.st-ab-ready .st-ab-bio,
.st-ab-wrap.st-ab-ready .st-ab-metrics,
.st-ab-wrap.st-ab-ready .st-ab-detail,
.st-ab-wrap.st-ab-ready .st-ab-cta {
  opacity: 0;
}

/* The eyebrow sits ABOVE the grid (it's in .st-ab-head, outside
   the content column). It develops first, as the rail is born. */
.st-ab-wrap.st-ab-ready .st-ab-eyebrow {
  opacity: 0;
}

/* REDUCED MOTION: never hide content or collapse the rail, even
   with .st-ab-ready — everything calm and complete, no JS dep. */
@media (prefers-reduced-motion: reduce) {
  .st-ab-wrap.st-ab-ready .st-ab-scan-rail {
    transform: scaleY(1);
  }
  .st-ab-wrap.st-ab-ready .st-ab-eyebrow,
  .st-ab-wrap.st-ab-ready .st-ab-headline,
  .st-ab-wrap.st-ab-ready .st-ab-positioning,
  .st-ab-wrap.st-ab-ready .st-ab-bio,
  .st-ab-wrap.st-ab-ready .st-ab-metrics,
  .st-ab-wrap.st-ab-ready .st-ab-detail,
  .st-ab-wrap.st-ab-ready .st-ab-cta {
    opacity: 1;
  }
}
/*--------------------------------------------------------------
10. Icon box
----------------------------------------------------------------*/
.st-iconbox.st-style1 {
  text-align: center;
  padding: 50px 30px;
  border-radius: 3px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border: 1px solid #232935;
  background-color: #101624;
}

.st-iconbox.st-style1:hover .st-iconbox-icon {
  border: 0.5px solid #fec544;
}

.st-iconbox.st-style1:hover .st-iconbox-icon svg {
  fill: #fec544;
}

.st-iconbox.st-style1:hover .st-iconbox-title {
  color: #fec544;
}

.st-iconbox.st-style1 .st-iconbox-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 90px;
  width: 90px;
  border: 0.5px solid #3f4551;
  border-radius: 50%;
  background-color: #070d1b;
  margin: auto;
  font-size: 50px;
  margin-bottom: 28px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-iconbox.st-style1 .st-iconbox-icon svg {
  width: 52px;
  fill: #3f4551;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-iconbox.st-style1 .st-iconbox-title {
  font-weight: 400;
  line-height: 1.2em;
  font-size: 20px;
  margin-bottom: 16px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-iconbox.st-style1 .st-iconbox-text {
  margin-bottom: -6px;
}
/*--------------------------------------------------------------
10b. Core Competencies — Elevated Card Design
----------------------------------------------------------------*/

/* ── Grid: 2 columns desktop, full-width cards ─────────────── */
.st-cc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  position: relative;
  z-index: 1;
}

/* ── Card shell ────────────────────────────────────────────── */
/* The 2px gold top edge lives on the OUTER element so it reads
   as the card's "header" edge. The gradient + shadow give the
   card depth so it lifts off the #070d1b section background
   instead of blending into it. */
.st-cc-card {
  position: relative;
  border-radius: 8px;
  border: 1px solid #232935;
  border-top: 2px solid #fec544;
  background: linear-gradient(160deg, #141b2c 0%, #101624 60%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.40);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Card inner — content padding + left-aligned rhythm ────── */
.st-cc-card-inner {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Title — resting near-white; swept to gold in Group 3 ──── */
/* Overrides the global h2 (34px). Rests at #fdfeff so the
   entrance gold-sweep has a neutral state to sweep FROM. */
.st-cc-title {
  font-size: 24px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  line-height: 1.25;
  color: #fdfeff;
  margin: 0 0 18px 0;
}

/* ── Gold rule — short, left-aligned, gold→transparent ─────── */
/* Resting width 48px. In Group 3 it draws L→R from 0 width;
   here it simply sits at its final width. */
.st-cc-rule {
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 22px;
  background: linear-gradient(
    to right,
    #fec544 0%,
    rgba(254, 197, 68, 0.0) 100%
  );
  border-radius: 2px;
}

/* ── Description — muted body, left-aligned ────────────────── */
.st-cc-text {
  color: #a9adb8;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ── Hover — lift, deepen shadow, gold intensifies ─────────── */
.st-cc-card:hover {
  border-color: rgba(254, 197, 68, 0.55);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.50);
  transform: translateY(-6px);
}

/* The gold top edge is already gold; on hover we let the
   gradient lift slightly so the card feels like it leans forward. */
.st-cc-card:hover {
  background: linear-gradient(160deg, #17203250 0%, #101624 60%), linear-gradient(160deg, #18202f 0%, #101624 60%);
}

/* ── Tablet — keep 2 columns but tighten gap ───────────────── */
@media screen and (max-width: 991px) {
  .st-cc-grid {
    gap: 20px;
  }
  .st-cc-card-inner {
    padding: 32px;
  }
}

/* ── Mobile — single column ────────────────────────────────── */
@media screen and (max-width: 767px) {
  .st-cc-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .st-cc-card-inner {
    padding: 28px;
  }
  .st-cc-title {
    font-size: 21px;
  }
}
/*--------------------------------------------------------------
10c. Core Competencies — Entrance flash-guard (JS-gated)
----------------------------------------------------------------*/
/* These hidden states apply ONLY when JS has added .st-cc-ready
   to the grid AND reduced-motion is not requested. If JS never
   runs, none of this applies and the cards stay fully visible
   (Group 2 resting state) — graceful degradation. */

.st-cc-grid.st-cc-ready .st-cc-card {
  opacity: 0;
}

/* The gold rule starts at zero width so it can draw L→R. */
.st-cc-grid.st-cc-ready .st-cc-rule {
  width: 0;
}

/* Description lines: each line is wrapped by SplitText; start
   them hidden + slightly lowered for the per-line soft rise. */
.st-cc-grid.st-cc-ready .st-cc-line {
  opacity: 0;
}

/* REDUCED MOTION: never hide, even if .st-cc-ready is added —
   show everything calmly, no JS dependency. */
@media (prefers-reduced-motion: reduce) {
  .st-cc-grid.st-cc-ready .st-cc-card,
  .st-cc-grid.st-cc-ready .st-cc-rule,
  .st-cc-grid.st-cc-ready .st-cc-line {
    opacity: 1;
    width: auto;
  }
  .st-cc-grid.st-cc-ready .st-cc-rule {
    width: 48px;
  }
}
/*--------------------------------------------------------------
10d. Core Competencies — Idle polish + reduced-motion completeness
----------------------------------------------------------------*/

/* Whisper-quiet breathing on the gold rule once the card is at
   rest — gold opacity gently rises/falls. Applied to all cards;
   it's subtle enough to read as "alive," not "busy." Paused if
   reduced motion is requested. */
@media (prefers-reduced-motion: no-preference) {
  .st-cc-rule {
    animation: st-cc-rule-breathe 4s ease-in-out infinite;
  }
}

@keyframes st-cc-rule-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Reduced-motion completeness: the Group 3 flash-guard already
   shows cards instantly, but the mobile branch also sets the
   TITLE color/opacity inline via gsap.set when JS runs. Under
   reduced motion the mobile gsap branch never runs (gated off),
   so the title keeps its CSS color — confirm it's gold at rest
   here so a reduced-motion mobile user sees the finished card. */
@media (prefers-reduced-motion: reduce) {
  .st-cc-grid.st-cc-ready .st-cc-title {
    color: #fec544;
  }
}
/*--------------------------------------------------------------
18. Skill
----------------------------------------------------------------*/
.st-skill-title {
  font-size: 36px;
  font-weight: 400;
  margin-bottom: 25px;
}

.st-progressbar-wrap {
  overflow: hidden;
}

.st-progressbar-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 2px;
  font-family: 'Roboto', sans-serif;
}

.st-single-progressbar {
  margin-top: -5px;
}

.st-progressbar-title {
  font-size: 16px;
  margin-bottom: 0;
}

.st-progressbar-percentage {
  color: #fec544;
  font-weight: 400;
}

.st-progressbar {
  width: 100%;
  height: 2px;
  background-color: #3f4551;
}

.st-progressbar-in {
  background-color: #fec544;
  height: 2px;
}

@media screen and (max-width: 991px) {
  .st-skill-title {
    font-size: 28px;
  }
}

/*--------------------------------------------------------------
18. Resume Section
----------------------------------------------------------------*/
.st-resume-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.st-resume-heading .st-resume-heading-title {
  margin: 0;
  margin-left: 30px;
  font-size: 36px;
  font-weight: 400;
}

.st-resume-timeline {
  position: relative;
  padding-top: 1px;
}

.st-resume-timeline::before {
  position: absolute;
  content: "";
  border: 2px solid #232935;
  border-radius: 50%;
  background-color: #101624;
  width: 13px;
  height: 13px;
  top: 0px;
  left: -47px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-resume-timeline:hover::before {
  background-color: #fec544;
}

.st-resume-timeline .st-resume-timeline-title {
  font-size: 24px;
  font-weight: 400;
  color: #fec544;
  margin-top: -7px;
  margin-bottom: 8px;
}

.st-resume-timeline .st-resume-timeline-duration {
  font-size: 18px;
  margin-bottom: 21px;
}

.st-resume-timeline .st-resume-timeline-subtitle {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 19px;
}

.st-resume-timeline .st-resume-timeline-text p {
  margin: 0;
  margin-bottom: -7px;
}

.st-resume-timeline-wrap {
  padding-left: 40px;
  margin-left: 20px;
  border-left: 1px solid #232935;
}

/*--------------------------------------------------------------
1. Portfolio
----------------------------------------------------------------*/
.st-portfolio {
  display: block;
  position: relative;
  margin-bottom: 30px;
}

.st-portfolio::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #3f4551;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 1;
}

.st-portfolio::after {
  content: "";
  position: absolute;
  border: 1px solid #fdfeff;
  width: 90%;
  height: 90%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}

.st-portfolio:hover::before {
  opacity: .85;
}

.st-portfolio:hover::after {
  opacity: .85;
}

.st-portfolio:hover .st-portfolio-item-hover {
  opacity: 1;
  visibility: visible;
}

.st-portfolio .st-portfolio-img img {
  width: 100%;
}

.st-portfolio-item-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 5;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}

.st-portfolio-item-hover i {
  border: 0.5px solid #3f4551;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fec544;
  color: #151b29;
  font-size: 26px;
  opacity: .8;
}

.st-portfolio-item-hover h5 {
  position: absolute;
  width: 250px;
  top: 87px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 0;
  font-size: 20px;
  color: #fdfeff;
}

.st-portfolio-item-hover p {
  position: absolute;
  width: 250px;
  top: 114px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 0;
}

.st-portfolio-btn {
  margin-top: 20px;
}

/*--------------------------------------------------------------
7. Slider
----------------------------------------------------------------*/
.st-slider.st-style1,
.st-slider.st-style2 {
  position: relative;
}

.swipe-arrow.st-hidden,
.pagination.st-hidden {
  display: none;
}

.pagination.st-style1 ul,
.pagination.st-style2 ul {
  padding: 0;
  margin: 0;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  list-style: none;
}

.pagination.st-style1 li,
.pagination.st-style2 li {
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-color: #000000;
  margin-right: 8px;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.pagination.st-style1 li.slick-active,
.pagination.st-style2 li.slick-active {
  background-color: #3f4551;
}

.pagination.st-style1 button,
.pagination.st-style2 button {
  display: none;
}

.pagination.st-style2 {
  position: absolute;
  bottom: 17px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.pagination.st-style1.container {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 60px;
  padding-left: 15px;
}

.st-slider.st-style1,
.st-slider.st-style2 {
  position: relative;
}

.st-slider.st-style1 .slick-slide,
.st-slider.st-style2 .slick-slide {
  padding-left: 15px;
  padding-right: 15px;
}

.st-slider.st-style1 .slick-slide > div,
.st-slider.st-style2 .slick-slide > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.st-slider.st-style1 .slick-slide > div > .slick-slide-in,
.st-slider.st-style2 .slick-slide > div > .slick-slide-in {
  width: 100%;
}

.st-slider.st-style1 .slick-list,
.st-slider.st-style2 .slick-list {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: -20px;
  margin-bottom: -20px;
  margin-left: -15px;
  margin-right: -15px;
}

.st-slider.st-style1 .slick-arrow,
.st-slider.st-style2 .slick-arrow {
  -webkit-box-shadow: 0px 5px 10px 0px rgba(106, 106, 106, 0.15);
          box-shadow: 0px 5px 10px 0px rgba(106, 106, 106, 0.15);
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  background-color: #3f4551;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-slider.st-style1 .slick-arrow:before,
.st-slider.st-style2 .slick-arrow:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 30px;
}

.st-slider.st-style1 .slick-arrow.slick-arrow-left,
.st-slider.st-style2 .slick-arrow.slick-arrow-left {
  left: 0px;
}

.st-slider.st-style1 .slick-arrow.slick-arrow-left:before,
.st-slider.st-style2 .slick-arrow.slick-arrow-left:before {
  right: -20px;
}

.st-slider.st-style1 .slick-arrow.slick-arrow-right,
.st-slider.st-style2 .slick-arrow.slick-arrow-right {
  right: 0px;
}

.st-slider.st-style1 .slick-arrow.slick-arrow-right:before,
.st-slider.st-style2 .slick-arrow.slick-arrow-right:before {
  left: -20px;
}

.st-slider.st-style1 .slick-arrow:hover,
.st-slider.st-style2 .slick-arrow:hover {
  color: #000000;
}

.st-slider.st-style1:hover .slick-arrow,
.st-slider.st-style2:hover .slick-arrow {
  opacity: 1;
  visibility: visible;
}

.st-slider.st-style1:hover .slick-arrow.slick-arrow-left,
.st-slider.st-style2:hover .slick-arrow.slick-arrow-left {
  left: -70px;
}

.st-slider.st-style1:hover .slick-arrow.slick-arrow-right,
.st-slider.st-style2:hover .slick-arrow.slick-arrow-right {
  right: -70px;
}

@media screen and (max-width: 991px) {
  .st-slider .pagination.st-hidden {
    display: block;
    margin-top: 20px;
  }
  .st-slider .pagination.st-style1 ul,
  .st-slider .pagination.st-style2 ul {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .swipe-arrow.st-style1 {
    display: none;
  }
  .st-hidden.st-hidden-md,
  .swipe-arrow.st-style2 {
    display: none !important;
  }
}

/*--------------------------------------------------------------
24. Testimonial
----------------------------------------------------------------*/
.st-testimonial.st-style1:hover .st-testimonial-name {
  color: #fec544;
}

.st-testimonial.st-style1:hover .st-testimonial-text {
  border-color: #fec544;
}

.st-testimonial.st-style1:hover .st-testimonial-text::after {
  border-color: #fec544;
}

.st-testimonial.st-style1 .st-testimonial-text {
  position: relative;
  border-radius: 3px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  background-color: #101624;
  padding: 30px 15px;
  border: 1px solid #232935;
  margin-bottom: 40px;
  height: 250px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.st-testimonial.st-style1 .st-testimonial-text::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  bottom: -16px;
  border: 1px solid #232935;
  border-width: 0 1px 1px 0;
  background: #101624;
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-testimonial.st-style1 .st-testimonial-text p {
  text-align: center;
  margin-top: -6px;
  margin-bottom: -6px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.st-testimonial.st-style1 .st-testimonial-text .st-quote {
  position: absolute;
  top: 1px;
  left: 1px;
}

.st-testimonial.st-style1 .st-testimonial-info {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  margin-bottom: -4px;
}

.st-testimonial.st-style1 .st-testimonial-img {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
  margin-bottom: 20px;
}

.st-testimonial.st-style1 .st-testimonial-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.st-testimonial.st-style1 .st-testimonial-name {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 4px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-testimonial.st-style1 .st-testimonial-designation {
  line-height: 1.3em;
}

/*--------------------------------------------------------------
17. Blog
----------------------------------------------------------------*/
.st-post-single.st-style1 .st-post-thumb {
  display: block;
  overflow: hidden;
}

.st-post-single.st-style1 .st-post-thumb img {
  width: 100%;
}

.st-post-single.st-style1 .st-post-date {
  font-size: 14px;
  margin-top: 22px;
  margin-bottom: 9px;
}

.st-post-single.st-style1 .st-post-date .st-post-date-divider {
  margin-left: 4px;
  margin-right: 4px;
}

.st-post-single.st-style1 .st-post-date .st-post-author,
.st-post-single.st-style1 .st-post-date .st-post-publish-date {
  color: #fec544;
}

.st-post-single.st-style1 .st-post-date .st-post-author:hover {
  opacity: 0.8;
}

.st-post-single.st-style1 .st-post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2em;
  margin-bottom: 0;
}

.st-post-single.st-style1 .st-post-title:hover {
  color: #fec544;
}

/*--------------------------------------------------------------
27. Blog Details
----------------------------------------------------------------*/
.st-page-heading {
  height: 650px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  padding-top: 120px;
  background-size: cover;
  background-attachment: fixed;
}

.st-page-heading.st-size-md {
  height: 450px;
}

.st-page-heading:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.st-page-heading > div {
  position: relative;
  z-index: 1;
}

.st-page-heading-title {
  color: #fff;
  font-size: 48px;
  text-align: center;
  margin-bottom: 7px;
}

.st-breadcamp {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  margin: 0;
}

.st-breadcamp li {
  color: rgba(255, 255, 255, 0.7);
  list-style: none;
}

.st-breadcamp li:not(:last-child):after {
  content: '/';
  padding-right: 6px;
  margin-left: 6px;
}

.st-breadcamp a:hover {
  color: #fff;
}

.st-page-heading.st-style1 {
  padding-top: 0;
  height: 320px;
}

.st-widget {
  border: 1px solid #232935;
  border-radius: 7px;
  padding: 30px;
}

.st-widget .st-widget-title {
  font-size: 16px;
  position: relative;
  padding-bottom: 0;
  margin-bottom: 17px;
  margin-top: -3px;
  overflow: hidden;
}

.st-widget .st-widget-title span {
  position: relative;
  display: inline-block;
  padding-right: 15px;
}

.st-widget .st-widget-title span:before {
  content: '';
  background-color: #232935;
  position: absolute;
  left: 100%;
  bottom: 50%;
  height: 1px;
  width: 1000px;
}

.st-widget-list {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-top: -16px;
  margin-bottom: -16px;
  font-size: 14px;
}

.st-widget-list li:not(:last-child) {
  border-bottom: 1px solid #232935;
}

.st-widget-list a {
  display: block;
  padding: 10px 0;
}

.st-widget-list a:hover {
  color: #fec544;
}

.st-tagcloud {
  margin-bottom: -10px;
}

.st-tagcloud .st-tag {
  display: inline-block;
  font-size: 13px;
  padding: 2px 10px;
  border: 1px solid #232935;
  border-radius: 7px;
  margin-right: 6px;
  margin-bottom: 10px;
}

.st-tagcloud .st-tag:hover {
  color: #fff;
  background-color: #fec544;
  border-color: #fec544;
}

.st-sidebar-social-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: -4px;
  margin-bottom: -5px;
}

.st-sidebar-social-btn a:not(:last-child) {
  margin-right: 15px;
}

.st-post-details.st-style1 {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.8em;
}

.st-post-details.st-style1 .slick-slide {
  line-height: 0;
}

.st-post-details.st-style1 .st-post-thumb {
  margin-bottom: 25px;
}

.st-post-details.st-style1 .st-post-thumb img {
  width: 100%;
}

.st-post-details.st-style1 .st-post-title {
  font-size: 28px;
  margin-bottom: 9px;
}

.st-post-details.st-style1 blockquote {
  background-color: rgba(255, 255, 255, 0.02);
  margin: 0;
  padding: 30px 40px 27px;
  font-size: 24px;
  line-height: 1.6em;
  border-left: 5px solid #fec544;
  color: #fec544;
  border-radius: 7px;
  font-weight: 400;
  margin: 20px 0;
}

.st-post-details.st-style1 blockquote small {
  display: block;
  line-height: inherit;
  margin-top: 4px;
  color: #a9adb8;
  font-size: inherit;
  font-size: 16px;
}

.st-post-details.st-style1 blockquote small span {
  color: #fec544;
}

.st-post-details.st-style1 .st-post-label {
  margin-bottom: 15px;
}

.st-post-details.st-style1 .st-post-text p {
  margin-bottom: 15px;
}

.st-post-details.st-style1 .st-post-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 25px 0;
  line-height: 1.6em;
  font-size: 15px;
  border-top: 1px solid #232935;
  border-bottom: 1px solid #232935;
}

.st-post-details.st-style1 h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.st-post-details.st-style1 p {
  margin-bottom: 15px;
}

.st-post-details.st-style1 img {
  margin-bottom: 20px;
  border-radius: 7px;
  margin-top: 5px;
}

.st-post-details.st-style1 .embed-responsive {
  margin-top: 15px;
  margin-bottom: 15px;
}

.st-post-label > span {
  display: inline-block;
  position: relative;
}

.st-post-label > span:not(:last-child) {
  padding-right: 15px;
  margin-right: 15px;
}

.st-post-label > span:not(:last-child):before {
  content: '';
  position: absolute;
  height: 16px;
  width: 1px;
  background-color: #232935;
  right: 0;
  top: 3px;
}

.st-post-label a:hover {
  color: #fec544;
}

.st-post-tage-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 15px;
  font-weight: 400;
}

.st-post-tage-list li {
  margin-right: 5px;
}

.st-post-tage-list li:not(:last-child):after {
  content: ',';
}

.st-post-tage-list li a:hover {
  color: #fec544;
}

.st-post-tages,
.st-post-share {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.st-post-tages .st-post-tage-title,
.st-post-tages .st-post-share-title,
.st-post-share .st-post-tage-title,
.st-post-share .st-post-share-title {
  margin: 0;
  font-size: 16px;
  margin-right: 10px;
  line-height: 1.6em;
  font-weight: 500;
}

.st-post-share-btn-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 15px;
}

.st-post-share-btn-list a:not(:last-child) {
  margin-right: 12px;
}

.st-post-share-btn-list a:hover {
  color: #fec544;
}

.st-post-btn-gropu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.st-post-btn-gropu .st-btn {
  min-width: 170px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.st-page-heading-in .st-post-label {
  color: rgba(255, 255, 255, 0.75);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 6px;
}

.st-page-heading-in .st-post-label > span:not(:last-child):before {
  background-color: rgba(255, 255, 255, 0.15);
}

.st-page-heading-in .st-post-label > span:not(:last-child) {
  color: rgba(255, 255, 255, 0.75);
}

.st-page-heading-in .st-post-label a:hover {
  color: #fff;
}

.st-page-heading-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  font-weight: 300;
  margin-top: 7px;
}

@media screen and (max-width: 991px) {
  .st-page-heading-title {
    font-size: 38px;
  }
  .st-page-heading-subtitle {
    font-size: 16px;
  }
  .st-page-heading.st-size-md {
    height: 350px;
    padding-top: 80px;
  }
  .st-page-heading-title br {
    display: none;
  }
  .st-page-heading {
    height: 500px;
    padding-top: 80px;
  }
  .st-post-details.st-style1 {
    font-size: 16px;
  }
  .st-post-details.st-style1 blockquote {
    padding: 20px 20px 17px;
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .st-post-details.st-style1 .st-post-meta {
    display: block;
  }
  .st-post-btn-gropu .st-btn {
    min-width: 140px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0.6em 1.5em;
  }
}

/*--------------------------------------------------------------
28. Comments
----------------------------------------------------------------*/
.comments-title,
.comment-reply-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.25px;
  margin-bottom: 25px;
}

.comments-area {
  padding-top: 56px;
  border-top: 1px solid #232935;
}

.comment-body {
  position: relative;
  margin-left: 60px;
  margin-bottom: 25px;
  min-height: 50px;
}

.comments-area ol {
  list-style: none;
  padding-left: 0;
}

.comments-area .children .children {
  padding-left: 0px;
}

.comment-author .avatar {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0;
  left: -60px;
  border-radius: 6px;
}

.comment-author {
  margin-bottom: -6px;
}

.comment-author .nm,
.comment-author .nm a {
  font-weight: 500;
  color: #fec544;
  font-size: 14px;
  display: block;
}

.comment-author .nm {
  padding-top: 4px;
}

.comment-author .nm a:hover,
.comment-author .nm:hover,
.comment-metadata a:hover {
  color: #fec544;
}

.comment-metadata a {
  color: #fdfeff;
  font-weight: 400;
  font-size: 13px;
}

.comment-content {
  font-size: 14px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.comment-content p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.comment-reply-link {
  font-size: 14px;
  color: #fec544;
  position: relative;
}

.comment-reply-link:hover,
.comment-reply-link:focus {
  color: #fff;
}

.comment-reply-link:before {
  content: "\f112";
  font-family: 'FontAwesome';
  margin-right: 4px;
}

.children .comment-body {
  margin-left: 60px;
}

.children .comment-author .avatar {
  left: -60px;
}

.comment-respond {
  display: block;
  width: 100%;
  margin-top: 56px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-top: 1px solid #232935;
  padding-top: 57px;
}

.comment-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.comment-form-author,
.comment-form-email {
  width: 50%;
}

.comment-form-email {
  padding-left: 10px;
}

.comment-form-comment {
  width: 100%;
}

.comment-form-author {
  padding-right: 10px;
}

.comment-form-url {
  padding-left: 0px;
  width: 100%;
}

.form-submit {
  margin-bottom: 0;
}

.comment-form p {
  margin: 0;
}

.comment-form textarea,
.comment-form input {
  border: 1px solid #232935;
  padding: 8px 15px;
  width: 100%;
  background-color: transparent;
  display: block;
  margin-bottom: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 7px;
  color: #fff;
}

.comment-form textarea:focus,
.comment-form input:focus {
  outline: none;
  border-color: #fec544;
}

.post-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.post-navigation > div {
  display: inline-block;
}

.nav-previous a:before {
  content: "\f100";
  font-family: 'FontAwesome';
  margin-right: 4px;
}

.nav-next a:after {
  content: "\f101";
  font-family: 'FontAwesome';
  margin-left: 4px;
}

.nav-all-post {
  min-width: 120px;
  text-align: center;
  margin: 0 25px;
}

/*--------------------------------------------------------------
26. Contact Form
----------------------------------------------------------------*/
#st-alert {
  font-size: 15px;
  font-weight: 300;
}

.st-contact-title {
  font-size: 30px;
  font-weight: 400;
  margin-top: -6px;
  margin-bottom: 22px;
}

.st-form-field {
  width: 100%;
  margin-bottom: 30px;
}

.st-form-field input,
.st-form-field textarea {
  display: block;
  width: 100%;
  color: #a9adb8;
  padding: 12px 20px;
  border: 1px solid #232935;
  background-color: #101624;
  height: 52px;
  border-radius: 7px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.st-form-field input::-webkit-input-placeholder,
.st-form-field textarea::-webkit-input-placeholder {
  color: #3f4551;
}

.st-form-field input:-ms-input-placeholder,
.st-form-field textarea:-ms-input-placeholder {
  color: #3f4551;
}

.st-form-field input::-ms-input-placeholder,
.st-form-field textarea::-ms-input-placeholder {
  color: #3f4551;
}

.st-form-field input::placeholder,
.st-form-field textarea::placeholder {
  color: #3f4551;
}

.st-form-field input:focus,
.st-form-field textarea:focus {
  border-color: #fec544;
  outline: 0;
}

.st-form-field textarea {
  height: 150px;
}

.st-contact-text {
  margin-top: -6px;
  margin-bottom: 23px;
}

.st-single-contact-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 30px;
}

.st-single-contact-info:hover i {
  border-color: #fec544;
}

.st-single-contact-info i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 0.5px solid #3f4551;
  border-radius: 50%;
  background-color: #070d1b;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-single-info-details h4 {
  font-size: 20px;
  font-weight: 400;
  margin-top: -4px;
  margin-bottom: 6px;
}

.st-single-info-details a {
  display: block;
  margin-bottom: -2px;
}

.st-single-info-details a:hover {
  color: #fec544;
}

.st-single-info-details a:last-child {
  margin-bottom: -6px;
}

.st-single-info-details span {
  display: block;
  margin-bottom: -2px;
}

.st-social-info .st-social-text {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 500;
  padding-top: 5px;
}

.st-social-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.st-social-link .st-social-btn {
  border-radius: 50px;
  background-color: #070d1b;
  border: 0.5px solid #3f4551;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.st-social-link .st-social-btn:not(:last-child) {
  margin-right: 20px;
}

.st-social-link .st-social-btn .st-social-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  text-align: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.st-social-link .st-social-btn .st-social-icon i {
  font-size: 22px;
}

.st-social-link .st-social-btn .st-icon-name {
  font-weight: 600;
  color: #fdfeff;
  overflow: hidden;
  max-width: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.st-social-link .st-social-btn:hover, .st-social-link .st-social-btn.active {
  padding-right: 15px;
}

.st-social-link .st-social-btn:hover .st-icon-name, .st-social-link .st-social-btn.active .st-icon-name {
  max-width: 140px;
}

.st-copyright-wrap {
  height: 72px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
/*--------------------------------------------------------------
Events Section
----------------------------------------------------------------*/
.st-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
.st-event-card {
  background-color: #101624;
  border: 1px solid #232935;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  border-top: 2px solid #fec544;
}

.st-event-card:hover {
  border-color: #232935;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(254, 197, 68, 0.12), 0 0 0 1px rgba(254, 197, 68, 0.5);
}

.st-event-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #070d1b;
}

.st-event-has-gallery .st-event-photo {
  overflow: visible;
}

.st-event-has-gallery .st-event-photo::before,
.st-event-has-gallery .st-event-photo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 8px 8px 0 0;
  background-color: #1e2a3a;
}

.st-event-has-gallery .st-event-photo::before {
  bottom: -6px;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
  transform: translateY(4px) scaleX(0.97);
}

.st-event-has-gallery .st-event-photo::after {
  bottom: -10px;
  height: 100%;
  opacity: 0.3;
  z-index: -2;
  transform: translateY(8px) scaleX(0.94);
}

.st-event-has-gallery .st-event-photo img {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.st-event-photo:not(.st-event-has-gallery .st-event-photo)::after,
.st-event-has-gallery .st-event-photo img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(7, 13, 27, 0.65) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.st-event-has-gallery .st-event-photo .st-event-photo-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(7, 13, 27, 0.65) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.st-event-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.st-event-card:hover .st-event-photo img {
  transform: scale(1.05);
}

.st-event-photo-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(7, 13, 27, 0.75);
  border: 1px solid rgba(254, 197, 68, 0.25);
  border-radius: 20px;
  padding: 3px 10px;
  color: #fec544;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  letter-spacing: 0.5px;
}

.st-event-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
}

.st-event-pill {
  display: block;
  width: fit-content !important;
  max-width: fit-content !important;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(200, 169, 81, 0.12);
  color: #c8a951;
  border: 1px solid rgba(200, 169, 81, 0.25);
  margin-bottom: 10px;
}
.st-event-title {
  color: #fdfeff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 8px;
}

.st-event-teaser {
  color: #a9adb8;
  font-size: 12.5px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

.st-event-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  color: #fec544;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  width: 100%;
}

.st-event-hint-line {
  flex: 1;
  height: 1px;
  background: #232935;
}

.st-event-hint-arrow {
  font-size: 14px;
}

/* Modal */
.st-event-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 13, 27, 0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.st-event-modal-overlay.st-modal-active {
  display: flex;
}

.st-event-modal-box {
  background: #101624;
  border: 1px solid #2a3347;
  border-top: 2px solid #fec544;
  border-radius: 4px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
}

.st-event-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  background: rgba(7, 13, 27, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.st-event-modal-close:hover {
  border-color: #fec544;
  color: #fec544;
}

.st-event-modal-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
  max-height: 90vh;
}

.st-event-modal-photos {
  background: #070d1b;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1e2a3a;
}

.st-event-modal-slider-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.st-modal-slider {
  height: 100%;
}

.st-modal-slider img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  cursor: pointer;
  display: block;
}

.st-modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(7, 13, 27, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: border-color 0.3s ease;
}

.st-modal-arrow:hover {
  border-color: #fec544;
  color: #fec544;
}

.st-modal-arrow-l { left: 10px; }
.st-modal-arrow-r { right: 10px; }

.st-modal-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  background: #070d1b;
}

.st-modal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a3a55;
  cursor: pointer;
  transition: background 0.3s ease;
}

.st-modal-dot.st-dot-active {
  background: #fec544;
}


.st-event-modal-content {
  padding: 40px 36px 32px;
  overflow-y: auto;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.st-event-modal-title {
  color: #fdfeff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 16px;
  margin-top: 12px;
}

.st-event-modal-divider {
  height: 1px;
  background: #1e2a3a;
  margin-bottom: 18px;
}

.st-event-modal-desc {
  color: #a9adb8;
  font-size: 13.5px;
  line-height: 1.8;
}

.st-event-modal-desc p {
  margin-bottom: 14px;
}

.st-event-modal-desc p:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media screen and (max-width: 991px) {
  .st-events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .st-event-modal-inner {
    grid-template-columns: 1fr;
    max-height: 85vh;
    overflow-y: auto;
  }
  .st-event-modal-slider-wrap {
    height: 240px;
    flex: none;
  }
  .st-event-modal-content {
    max-height: none;
    overflow-y: visible;
  }
}

@media screen and (max-width: 575px) {
  .st-events-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .st-event-modal-box {
    max-height: 92vh;
  }
}

.st-event-modal-content .st-event-pill {
  display: table;
  width: auto;
  align-self: flex-start;
}
/*--------------------------------------------------------------
Navbar Dropdown
----------------------------------------------------------------*/

/* Desktop dropdown */
@media screen and (min-width: 992px) {
  .st-nav-list > li.menu-item-has-children {
    position: relative;
  }
  .st-nav-list > li.menu-item-has-children > ul {
    display: block;
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 220px;
    background-color: #070d1b;
    border-top: 2px solid #fec544;
    border-bottom: 1px solid #1e2a3a;
    border-left: 1px solid #1e2a3a;
    border-right: 1px solid #1e2a3a;
    border-radius: 0 0 4px 4px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 300;
    list-style: none;
    margin: 0;
  }
  .st-nav-list > li.menu-item-has-children:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .st-nav-list > li.menu-item-has-children > ul > li > a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #a9adb8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.2s ease, padding-left 0.2s ease;
    white-space: nowrap;
  }
  .st-nav-list > li.menu-item-has-children > ul > li > a:hover {
    color: #fec544;
    padding-left: 26px;
  }
  .st-nav-list > li.menu-item-has-children > ul > li > a.active {
    color: #fec544;
  }
  
  /* Hide the JS-injected dropdown toggle arrow on desktop */
  .st-nav-list > li.menu-item-has-children > .st-munu-dropdown-toggle {
    display: none;
  }
  
  /* Style Blog span label to match nav links */
  .st-nav-list > li.menu-item-has-children > span.st-blog-label {
    padding: 15px 0;
    font-size: 15px;
    display: inline-block;
    color: #fdfeff;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    cursor: default;
    transition: color 0.3s ease;
  }
  .st-nav-list > li.menu-item-has-children:hover > span.st-blog-label {
    color: #fdfeff;
  }
  /* FA chevron on span */
  .st-nav-list > li.menu-item-has-children > span.st-blog-label::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.25s ease, color 0.25s ease;
    color: #a9adb8;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
  .st-nav-list > li.menu-item-has-children:hover > span.st-blog-label::after {
    transform: rotate(180deg);
    color: #fec544;
  }
}

/* Mobile dropdown */
@media screen and (max-width: 991px) {
  .st-nav-list > li.menu-item-has-children > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #070d1b;
    display: none;
  }
  .st-nav-list > li.menu-item-has-children > ul > li > a {
    display: block;
    padding: 8px 20px 8px 36px;
    font-size: 13px;
    color: #8c97a4;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-top: 1px solid #101624;
  }
  .st-nav-list > li.menu-item-has-children > ul > li > a:hover,
  .st-nav-list > li.menu-item-has-children > ul > li > a.active {
    color: #fec544;
  }
  /* Style Blog span label on mobile to match nav links */
  .st-nav-list > li.menu-item-has-children > span.st-blog-label {
    display: block;
    padding: 8px 20px;
    color: #fdfeff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
    pointer-events: none;
  }
  /* Hide FA chevron on mobile — JS toggle handles interaction */
  .st-nav-list > li.menu-item-has-children > span.st-blog-label::after {
    display: none;
  }
}
/*--------------------------------------------------------------
Coming Soon Nav Item
----------------------------------------------------------------*/
.st-nav-coming-soon {
  color: #4a5160 !important;
  cursor: not-allowed;
  opacity: 0.6;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  padding: 10px 20px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-family: 'Roboto', sans-serif;
}

@media screen and (max-width: 991px) {
  .st-nav-coming-soon {
    padding: 8px 20px 8px 36px;
    font-size: 13px;
    border-top: 1px solid #101624;
    white-space: normal;
  }
}
/*--------------------------------------------------------------
My Journey Section - FA Icon Sizing
----------------------------------------------------------------*/
.st-resume-heading i {
  font-size: 40px;
  color: #fec544;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

/*--------------------------------------------------------------
My Journey — Premium Alternating Timeline — Direction 3
Horizontal split card: logo zone left, content zone right.
----------------------------------------------------------------*/

/* ── Outer wrapper ─────────────────────────────────────────── */
.st-timeline-wrap {
  position: relative;
  padding: 0 0 40px;
}

/* ── Central spine ─────────────────────────────────────────── */
.st-timeline-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #1e2a3a, #2a3347, #1e2a3a);
  transform: translateX(-50%);
  z-index: 0;
}

/* ── Spine fill — grown by JS as cards enter view ──────────── */
.st-tl-spine-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom,
    rgba(254,197,68,0.6) 0%,
    #fec544 30%,
    #fec544 70%,
    rgba(200,169,81,0.7) 100%);
  transform: translateX(-50%);
  z-index: 1;
  transition: height 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
  box-shadow: 0 0 8px rgba(254,197,68,0.3);
  pointer-events: none;
}

/* ── Phase label badges ────────────────────────────────────── */
.st-tl-phase-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  margin: 40px 0 48px;
}

.st-tl-phase-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(254,197,68,0.3));
}

.st-tl-phase-label .st-tl-phase-line:last-child {
  background: linear-gradient(to left, transparent, rgba(254,197,68,0.3));
}

.st-tl-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  background: linear-gradient(135deg, #101624 0%, #0d1420 100%);
  border: 1px solid #fec544;
  color: #fec544;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
  box-shadow:
    inset 0 0 12px rgba(254,197,68,0.08),
    0 0 20px rgba(254,197,68,0.15),
    0 4px 16px rgba(0,0,0,0.3);
}

.st-tl-phase-badge i {
  font-size: 13px;
}

/* ── Timeline item — base ──────────────────────────────────── */
.st-tl-item {
  position: relative;
  width: 45%;
  margin-bottom: 44px;
  z-index: 2;
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

.st-tl-left {
  left: 0;
  transform: translateX(-50px) scale(0.97);
}

.st-tl-right {
  left: 55%;
  transform: translateX(50px) scale(0.97);
}

.st-tl-item.st-tl-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.st-tl-right.st-tl-visible {
  transition-delay: 150ms;
}

/* ── Dot marker on spine ───────────────────────────────────── */
.st-tl-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(254,197,68,0.15);
  border: 2px solid rgba(254,197,68,0.2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: visible;
}

.st-tl-left .st-tl-dot {
  right: -9.5%;
}

.st-tl-right .st-tl-dot {
  left: -9.5%;
}

/* Dot activates to solid gold when card enters view */
.st-tl-dot.dot-active {
  background: #fec544;
  border-color: #fec544;
  box-shadow:
    0 0 0 3px rgba(254,197,68,0.25),
    0 0 12px rgba(254,197,68,0.5);
}

/* Double pulse rings on dot activation */
.st-tl-dot::before,
.st-tl-dot::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: rgba(254,197,68,0.6);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}

.st-tl-dot.dot-pulse::before {
  animation: st-dot-burst 1s ease-out;
}

.st-tl-dot.dot-pulse::after {
  animation: st-dot-burst 1s ease-out 0.2s;
}

@keyframes st-dot-burst {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0;   }
}

/* ── Card — horizontal split grid ─────────────────────────── */
.st-tl-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  background: linear-gradient(135deg, #101624 0%, #0d1420 100%);
  border: 1px solid #2a3347;
  border-radius: 8px;
  overflow: visible;
  position: relative;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  padding: 0;
}

.st-tl-card:hover {
  border-color: rgba(254,197,68,0.55);
  box-shadow:
    0 12px 40px rgba(254,197,68,0.10),
    0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* Gold accent border on the spine-facing side */
.st-tl-left .st-tl-card {
  border-left: 3px solid #fec544;
}

.st-tl-right .st-tl-card {
  border-right: 3px solid #fec544;
}

/* Card connector arrow toward spine */
.st-tl-card::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #101624 0%, #0d1420 100%);
  border-top: 1px solid #2a3347;
  border-right: 1px solid #2a3347;
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
  transition: border-color 0.4s ease;
}

.st-tl-left .st-tl-card::before {
  right: -7px;
  border-right-color: rgba(254,197,68,0.55);
}

.st-tl-right .st-tl-card::before {
  left: -7px;
  transform: translateY(-50%) rotate(225deg);
  border-right-color: rgba(254,197,68,0.55);
}

/* ── Logo zone — left panel ────────────────────────────────── */
.st-tl-logo-zone {
  background: #1a2235;
  border-right: 1px solid rgba(254,197,68,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  position: relative;
  min-height: 110px;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
}

.st-tl-logo-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 80% at 50% 0%,
    rgba(255,255,255,0.04),
    transparent 60%
  );
  pointer-events: none;
}

.st-tl-logo-zone--empty {
  min-height: 110px;
}

.st-tl-logo-zone img {
  max-height: 70px;
  max-width: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 8px rgba(254,197,68,0.45))
    drop-shadow(0 0 16px rgba(254,197,68,0.2));
  transition: filter 0.4s ease;
}

.st-tl-card:hover .st-tl-logo-zone img {
  filter:
    drop-shadow(0 0 12px rgba(254,197,68,0.65))
    drop-shadow(0 0 24px rgba(254,197,68,0.3));
}

/* ── Content zone — right panel ────────────────────────────── */
.st-tl-content-zone {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  border-radius: 0 8px 8px 0;
  overflow: hidden;
}

/* ── Card typography ───────────────────────────────────────── */
.st-tl-title {
  font-size: 18px;
  font-weight: 500;
  color: #fec544;
  margin: 0 0 6px;
  line-height: 1.3;
}

.st-tl-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: #fdfeff;
  margin: 0 0 10px;
  line-height: 1.4;
}

/* ── Meta badges row ───────────────────────────────────────── */
.st-tl-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.st-tl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(254,197,68,0.08);
  border: 1px solid rgba(254,197,68,0.2);
  border-radius: 20px;
  padding: 4px 10px;
  color: #8c97a4;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.st-tl-badge-icon {
  width: 11px;
  height: 11px;
  flex: none;
  color: #fec544;
  display: inline-flex;
}

/* ── Phase divider dot ─────────────────────────────────────── */
.st-tl-divider {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin: 8px 0;
}

.st-tl-divider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3f4551;
  border: 2px solid #232935;
}

/* ── Responsive — mobile single column ────────────────────── */
@media screen and (max-width: 991px) {
  .st-timeline-wrap::before {
    left: 20px;
  }

  .st-tl-spine-fill {
    left: 20px;
    transform: none;
  }

  .st-tl-item {
    width: calc(100% - 50px);
    left: 50px !important;
    transform: translateX(-20px);
  }

  .st-tl-item.st-tl-visible {
    transform: translateX(0);
  }

  .st-tl-right.st-tl-visible {
    transition-delay: 0ms;
  }

  .st-tl-dot {
    left: -36px !important;
    right: auto !important;
  }

  .st-tl-left .st-tl-card,
  .st-tl-right .st-tl-card {
    border-left: 3px solid #fec544;
    border-right: 1px solid #2a3347;
  }

  .st-tl-left .st-tl-card::before,
  .st-tl-right .st-tl-card::before {
    left: -7px;
    right: auto;
    transform: translateY(-50%) rotate(225deg);
  }

  .st-tl-phase-label {
    justify-content: flex-start;
    padding-left: 50px;
    margin: 32px 0 40px;
  }

  .st-tl-phase-line {
    display: none;
  }

  .st-tl-divider {
    justify-content: flex-start;
    padding-left: 16px;
  }
}

@media screen and (max-width: 575px) {
  .st-tl-card {
    grid-template-columns: 80px 1fr;
  }

  .st-tl-logo-zone {
    padding: 12px 8px;
    min-height: 90px;
  }

  .st-tl-logo-zone img {
    max-height: 52px;
    max-width: 68px;
  }

  .st-tl-content-zone {
    padding: 16px 16px;
  }

  .st-tl-title {
    font-size: 15px;
  }

  .st-tl-subtitle {
    font-size: 13px;
  }

  .st-tl-badge {
    font-size: 11px;
    padding: 3px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-tl-item {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .st-tl-spine-fill {
    display: none;
  }
  .st-tl-dot::before,
  .st-tl-dot::after {
    display: none;
  }
  .st-tl-dot {
    transition: none;
  }
}
/*--------------------------------------------------------------
9-metrics-edge. About — R3: gold top-edge element
   Real <span class="st-ab-metric-edge"> inside each card,
   tweened by GSAP during entrance (scaleX 0→1, left→right).
   JS-gated via .st-ab-ready. No JS → full width (graceful).
----------------------------------------------------------------*/
.st-ab-metric-edge {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, #fec544 0%, rgba(254, 197, 68, 0.3) 100%);
  transform-origin: left center;
}

.st-ab-wrap.st-ab-ready .st-ab-metric-edge {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .st-ab-wrap.st-ab-ready .st-ab-metric-edge {
    transform: scaleX(1);
  }
}
/*--------------------------------------------------------------
9d. About — Group 5: metric count-up structure
   Figure innards: prefix + animating number + suffix on one
   baseline. Prefix/suffix never animate (only the digit counts).
   tabular-nums (set in 9b/Group 2) prevents width jitter.
----------------------------------------------------------------*/
.st-ab-metric-figure {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.st-ab-metric-figure .st-ab-mf-prefix,
.st-ab-metric-figure .st-ab-mf-num,
.st-ab-metric-figure .st-ab-mf-suffix {
  display: inline;
}
/*--------------------------------------------------------------
9e. About — Group 6: Phase-2 parallax prep
   will-change hints for the layers the scrub translates. Low
   amplitude is enforced in JS, not here. Parallax is desktop-only
   and gated off under reduced-motion (JS branch never adds it).
----------------------------------------------------------------*/
.st-ab-depth-plane,
.st-ab-portrait-frame,
.st-ab-front-accent {
  will-change: transform;
}
/*--------------------------------------------------------------
9f. About — Group 7: idle shimmer on the scan rail
   A faint gold highlight drifting down the rested rail — "alive,
   not busy." Pure CSS animation on a pseudo-element so it costs
   nothing in JS and is trivially killable (delete this block or
   flip the kill-switch class). Gated off under reduced-motion.
----------------------------------------------------------------*/

/* The rail gets a relative context for the shimmer pseudo. */
.st-ab-scan-rail {
  position: absolute; /* already set in Group 2; restated for clarity */
  overflow: hidden;
}

/* Shimmer: a short bright gold segment that travels top→bottom,
   loops slowly. Only visible once the rail is at rest (full
   height) — during the entrance draw the rail is scaleY-animating
   and the shimmer is visually irrelevant/hidden by the transform. */
.st-ab-scan-rail::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  top: -28%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 240, 200, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: st-ab-rail-shimmer 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes st-ab-rail-shimmer {
  0%   { top: -28%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* KILL-SWITCH: add class "st-ab-no-shimmer" to .st-ab-wrap (or
   delete block 9f) to remove the shimmer in one move. */
.st-ab-wrap.st-ab-no-shimmer .st-ab-scan-rail::after {
  display: none;
}

/* Reduced motion: no shimmer. */
@media (prefers-reduced-motion: reduce) {
  .st-ab-scan-rail::after {
    display: none;
  }
}

/*--------------------------------------------------------------
9h. About — Group 9: reduced-motion completeness sweep
   Consolidated guarantee that under reduced-motion the ENTIRE
   About section is at final state, instantly, with zero motion —
   regardless of which .st-ab-ready states JS may have set. The
   per-group blocks (9b/9c/9f) already handle their parts; this
   is the single authoritative override.
----------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  /* Rail full height, no draw, no shimmer. */
  .st-ab-wrap.st-ab-ready .st-ab-scan-rail { transform: scaleY(1); }
  .st-ab-scan-rail::after { display: none; }

  /* All content visible, no rise. */
  .st-ab-wrap.st-ab-ready .st-ab-eyebrow,
  .st-ab-wrap.st-ab-ready .st-ab-headline,
  .st-ab-wrap.st-ab-ready .st-ab-positioning,
  .st-ab-wrap.st-ab-ready .st-ab-bio,
  .st-ab-wrap.st-ab-ready .st-ab-metrics,
  .st-ab-wrap.st-ab-ready .st-ab-detail,
  .st-ab-wrap.st-ab-ready .st-ab-cta {
    opacity: 1;
    transform: none;
  }

  /* Depth layers at rest, no parallax transform. */
  .st-ab-depth-plane,
  .st-ab-portrait-frame,
  .st-ab-front-accent {
    transform: none !important;
  }
}
/*--------------------------------------------------------------
About Section — Icon Detail List
----------------------------------------------------------------*/
.st-text-block-details li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.st-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #070d1b;
  border: 0.5px solid #3f4551;
  color: #fec544;
  font-size: 13px;
  transition: all 0.4s ease;
}
.st-text-block-details li:hover .st-detail-icon {
  border-color: #fec544;
}
.st-detail-value {
  color: #a9adb8;
  line-height: 1.5;
  padding-top: 6px;
  margin-left: 0;
}
/*--------------------------------------------------------------
Hero Choreography — initial states & flash guard
----------------------------------------------------------------*/

/* JS-GATED HIDDEN STATES.
   These apply ONLY when JS has run (added .st-hero-ready to
   .st-hero-text) AND the user has not requested reduced motion.
   If JS never runs, none of this applies and content stays
   visible — graceful degradation. */
.st-hero-text.st-hero-ready .st-author,
.st-hero-text.st-hero-ready h1,
.st-hero-text.st-hero-ready p,
.st-hero-text.st-hero-ready .st-hero-social-links {
  opacity: 0;
}

/* REDUCED-MOTION: even if JS adds .st-hero-ready, never hide —
   show everything with a minimal calm fade, no JS dependency. */
@media (prefers-reduced-motion: reduce) {
  .st-hero-text.st-hero-ready .st-author,
  .st-hero-text.st-hero-ready h1,
  .st-hero-text.st-hero-ready p,
  .st-hero-text.st-hero-ready .st-hero-social-links {
    opacity: 1;
    animation: st-hero-fallback-fade 0.8s ease both;
  }
}

@keyframes st-hero-fallback-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Gold-sweep support: chars assemble in a neutral light tone,
   then JS sweeps them to gold. Scoped to the JS-active path only
   (.st-hero-ready) so the reduced-motion / no-JS fallback keeps
   the name in its normal inherited gold. */
.st-hero-text.st-hero-ready h1 .st-hero-char {
  color: #fdfeff; /* neutral white-ish start; swept to gold by JS */
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion never sweeps — keep chars gold if a split ever
     exists, though the JS path won't run here anyway. */
  .st-hero-text.st-hero-ready h1 .st-hero-char {
    color: #fec544;
  }
}