.hero-sec{ position: relative; height: 100vh; } .hero-sec .overlay{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.7); height: 100%; z-index: 0; } .hero-sec .caption{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; } .hero-sec .caption h3{ color: #fff; font-size: 35px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; } .hero-sec .caption h1{ color: #fff; font-size: 95px; font-weight: 700; letter-spacing: 5px; } .hero-sec .caption a{ text-decoration: none; font-size: 30px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } /*title seperation code start*/ .title-line { position: relative; } .title-line:before { left: 44px; } .title-line:after { right: 44px; } .title-line:after, .title-line:before { content: ''; width: 87px; height: 5px; position: absolute; top: 6px; color: #fff; } .title-line > i{ background-color: #f15a28; } .title-line:before { background: linear-gradient(to left, transparent , #f15a28); } .title-line:after{ background: linear-gradient(to right, transparent , #f15a28); } .title-line > i { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); position: relative; z-index: 3; margin: 0 2px; } .cta-2{ background-color: #f15a28; padding: 90px 0; } .cta-2 p{ letter-spacing: 1px; font-size: 19px; } .class-box:hover .class-schedule{ background-color: #f15a28; } .class-box:hover .class-schedule h6, .class-box:hover .class-schedule p{ color: #fff; } .navbar-nav .nav-item .nav-link { color: #fff !important; } .header-three .menu-search a{ color: #fff !important; } .affix.sticky-menu .navbar-nav .nav-item .nav-link { color: #000 !important; } @media (max-width: 992px){ .affix.sticky-menu .navbar-nav .nav-item .nav-link { color: #fff !important; } }