@keyframes arrow-moving {
0%{
transform: translate(0, 0) rotate(-45deg);
}
45%{
transform: translate(100%, -100%) rotate(-45deg)
}
50%{
transform: translate(-100%, 100%) rotate(-45deg)
}
100%{
transform: translate(0, 0) rotate(-45deg);
}
}
@keyframes pusle-shadow {
0%{
box-shadow: 0 0 20px 0 rgba(31, 128, 83, 0.7);
}
50%{
box-shadow: 0 0 20px 5px rgba(31, 128, 83, 0.8);
}
100%{
box-shadow: 0 0 20px 0 rgba(31, 128, 83, 0.7);
}
}
@keyframes fade-in {
0% {
opacity: 0;
filter: blur(20px);
}
100%{
opacity: 1;
filter: blur(0);
}
}
@keyframes slide-down {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(0);
}
}
@keyframes fade-in-left {
0% {
transform: translateX(-100%);
opacity: 0;
filter: blur(50px);
}
100% {
transform: translateX(0);
opacity: 1;
filter: blur(0);
}
}
@keyframes fade-in-right {
0% {
transform: translateX(100%);
opacity: 0;
filter: blur(50px);
}
100% {
transform: translateX(0);
opacity: 1;
filter: blur(0);
}
}
@keyframes fade-in-up {
0%{
transform: translateY(100%);
filter: blur(50px);
opacity: 0;
}
100%{
transform: translateY(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes word-fade {
0% {
opacity: 0;
filter: blur(5px);
}
100% {
opacity: 1;
filter: blur(0);
}
}
@keyframes blur-effect {
0% {
transform: scale(1);
filter: blur(0);
}
50% {
transform: scale(1.05);
filter: blur(5px);
}
100% {
transform: scale(1);
filter: blur(0);
}
}
.fade-in-left{
animation: fade-in-left 1.5s both;
animation-timeline: view();
animation-range: entry 15% cover 50%;
}
.fade-in-right {
animation: fade-in-right 1.5s both;
animation-timeline: view();
animation-range: entry 15% cover 50%;
}
.fade-in-up {
animation: fade-in-up 1s both;
animation-timeline: view();
animation-range: entry 15% cover 50%;
}:root{
--text-color: #c6c6c6;
--green-color: #1f8053;
--black-color: black;
--white-color: white;
--border-color: #1c1c1c;
--rgb-black: 0, 0, 0;
--rgb-green: 31, 128, 83;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--black-color);
font-family: "Hanken Grotesk", sans-serif;
color: var(--text-color);
}
section {
overflow-x: clip;
}
a{
color: var(--white-color);
text-decoration: none;
}
.container{
max-width: 1530px;
margin: auto;
padding: 0 10px;
}
header {
padding: 30px 0;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 999;
animation: slide-down 1s;
}
.nav-toggle {
display: none;
width: 48px;
height: 48px;
border: 1px solid var(--border-color);
border-radius: 12px;
background: rgba(var(--rgb-black), 0.75);
backdrop-filter: blur(10px);
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.nav-toggle .bar {
display: block;
width: 100%;
height: 2px;
margin: 7px 0;
background-color: var(--white-color);
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--white-color);
margin: 5px auto;
transition: 0.3s;
}
.main-navigation {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
position: relative;
}
.main-navigation nav {
display: flex;
gap: 40px;
border: 1px solid var(--border-color);
padding: 15px 50px;
border-radius: 30px;
background-color: rgba(var(--rgb-black), 0.5);
box-shadow: 0 4px 30px rgba(var(--rgb-black), 0.5);
backdrop-filter: blur(10px);
}
.main-navigation nav a {
transition: 0.3s;
}
.nav-panel {
display: flex;
align-items: center;
gap: 20px;
}
.logo img {
display: block;
height: 32px;
width: auto;
}
.main-navigation nav a:hover{
color: var(--green-color);
}
.main-navigation img {
filter: drop-shadow(0 0 10px var(--black-color));
}
.secondary-cta-btn {
padding: 15px 20px;
border: 1px solid var(--border-color);
border-radius: 30px;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
position: relative;
background-color: var(--black-color);
white-space: nowrap;
}
.secondary-cta-btn:hover{
border-color:var(--green-color);
}
.secondary-cta-btn::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transition: 0.3s;
border-radius: 30px;
}
.secondary-cta-btn:hover::before {
background: linear-gradient(90deg,rgba(var(--rgb-black), 0) 0%, rgba(var(--rgb-green), 0.3) 50%, rgba(var(--rgb-black), 0) 100%);
}
.cta-button {
display: inline-block;
background: linear-gradient(90deg,rgba(var(--rgb-green), 1) 0%, rgba(var(--rgb-black), 0) 50%);
padding: 2px;
border-radius: 30px;
}
.cta-button .black-btn-bg {
display: flex;
gap: 5px;
align-items: center;
background-color: var(--black-color);
padding: 15px 20px;
border-radius: 30px;
box-shadow: 0 0 20px 0 rgba(var(--rgb-green), 0.7);
}
.cta-button:hover {
background: linear-gradient(90deg,rgba(var(--rgb-green), 1) 0%, rgba(var(--rgb-green), 1) 100%);
}
.cta-button:hover .black-btn-bg {
animation: pusle-shadow 3s infinite;
}
.btn-arrow-wrapper{
overflow: hidden;
width: 17px;
height: 17px;
}
.btn-arrow-wrapper img{
transform: translate(0, 0) rotate(-45deg);
}
a:hover .btn-arrow-wrapper img{
animation: arrow-moving 0.3s linear;
}
.hero{
position: relative;
height: 100vh;
padding-top: 200px;
}
.hero::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--rgb-black), 0.3);
z-index: 2;
}
.hero video {
transform: rotate(180deg);
width: 100%;
}
.hero .video-wrapper {
position: absolute;
z-index: 0;
bottom: 0;
width: 70%;
}
.hero .hero-content{
position: relative;
z-index: 3;
text-align: center;
}
.hero .hero-content h1{
font-size: 9.375rem;
font-weight: 800;
line-height: 1.2;
background: linear-gradient(90deg,rgba(150, 209, 176, 1) 0%, rgba(198, 198, 198, 1) 50%, rgba(150, 209, 176, 1) 100%);
color: transparent;
background-clip: text;
animation: fade-in 1s;
}
.hero .hero-content h2{
font-size: 1.875rem;
font-weight: 400;
line-height: 1;
}
.hero .hero-content p{
font-size: 1.5rem;
max-width: 880px;
font-weight: 300;
}
.hero-content-wrapper{
display: flex;
flex-direction: column;
align-items: center;
gap: 30px
}
.hero .video-wrapper .video-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(var(--rgb-black), 1) 0%, rgba(var(--rgb-black), 0) 100%);
}
.hero .hero-lines{
position: absolute;
z-index: 1;
opacity: 0.1;
height: 70vh;
}
.portfolio {
padding: 50px 0;
}
.portfolio .portfolio-header{
display: flex;
justify-content: space-between;
align-items: end;
}
h2.section-heading {
font-size: 3.75rem;
font-weight: 800;
background: linear-gradient(90deg,rgba(150, 209, 176, 1) 0%, rgba(198, 198, 198, 1) 50%, rgba(150, 209, 176, 1) 100%);
background-clip: text;
color: transparent;
}
.portfolio .portfolio-header h2.section-heading {
max-width: 400px;
}
.portfolio-items {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 30px;
margin-top: 60px;
}
.portfolio-items .portfolio-item a .portfolio.tags {
display: flex;
gap: 10px;
}
.portfolio-items .portfolio-item a .portfolio.tags div {
font-size: 1.125rem;
background-color: var(--border-color);
padding: 5px 15px;
border-radius: 5px;
font-weight: 300;
}
.portfolio-items .portfolio-item a video{
width: 100%;
border-radius: 15px;
border: 1px solid var(--border-color)
}
.portfolio-items .portfolio-item a .portfolio-content-wrapper {
padding: 20px 30px;
display: flex;
flex-direction: column;
gap: 15px;
}
.portfolio-items .portfolio-item a .portfolio-content-wrapper h3 {
font-size: 1.875rem;
font-weight: 400;
}
.portfolio-items .portfolio-item a .portfolio-content-wrapper p {
font-weight: 300;
}
.portfolio-items .portfolio-item a {
position: relative;
}
.portfolio-items .portfolio-item a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: 0.3s;
}
.portfolio-items .portfolio-item a:hover::after {
opacity: 1;
background: radial-gradient(circle,rgba(var(--rgb-green), 0.2) 0%, rgba(var(--rgb-black), 0) 100%);
}
.portfolio-items .portfolio-item::after {
content: "";
height: 1px;
width: 100%;
display: block;
background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(28, 28, 28, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
.call-to-action {
padding: 100px 0;
}
.call-to-action p {
font-weight: 300;
font-size: 3.125rem;
margin-bottom: 50px;
}
.call-to-action p span {
animation: word-fade 2s both;
animation-timeline: view();
animation-range: entry 30% cover 60%;
animation-delay: calc(var(--i) * 100ms);
}
.services {
padding: 80px 0;
}
.services .services-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: var(--border-color);
gap: 1px;
border: 1px solid var(--border-color);
margin-top: 60px;
}
.service-item {
position: relative;
min-height: 300px;
overflow: hidden;
background-color: var(--black-color);
}
.service-item h3 {
font-weight: 500;
font-size: 2rem;
}
.service-item p {
font-weight: 300;
max-width: 450;
}
.service-item.span-2 {
grid-column: span 2;
}
.service-item a::before {
content: "";
display: block;
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid var(--white-color);
top: 15px;
left: 15px;
position: absolute;
z-index: 3;
transition: 0.3s;
}
.service-item a:hover::before {
background-color: var(--white-color);
}
.service-item video {
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
opacity: 0;
transition: 0.3s;
}
.service-item a:hover video {
opacity: 1;
}
.service-item .service-item-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
padding: 30px;
background: linear-gradient(0deg, rgba(var(--rgb-black), 1) 0%, rgba(var(--rgb-black), 0) 100%);
transform: translateY(45%);
gap: 10px;
display: flex;
flex-direction: column;
transition: 0.3s;
}
.service-item a:hover .service-item-content {
transform: translateY(0);
}
.service-item .service-item-content .service-item-content-header {
display: flex;
justify-content: space-between;
align-items: end;
}
.service-item .service-item-content .service-item-content-header img {
width: 30px;
height: 30px;
transform: rotate(-45deg);
}
.blog {
padding: 80px 0;
}
.blog .blog-header {
display: flex;
justify-content: space-between;
align-items: end;
}
.blog-items {
display: flex;
gap: 40px;
margin-top: 60px;
}
.blog-items .blog-item img {
width: 100%;
border-radius: 15px;
}
.blog-items .blog-item .blog-content {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
}
.blog-items .blog-item .blog-content h3 {
font-size: 1.875rem;
font-weight: 400;
}
.blog-items .blog-item .blog-content p {
font-weight: 300;
}
.blog-items .blog-item .blog-content .author-wrapper {
display: flex;
font-size: 1.125rem;
justify-content: space-between;
}
.blog-items .blog-item .blog-content .author-wrapper .author-name-image {
display: flex;
align-items: center;
gap: 10px;
}
.blog-items .blog-item .blog-content .author-wrapper .author-name-image img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
}
.blog-items .blog-item .blog-content .author-wrapper .published-date-read-time {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-color);
}
.blog-items .blog-item:hover a {
display: block;
animation: blur-effect 0.5s both;
}
.dot-separator {
width: 5px;
height: 5px;
border-radius: 50px;
background-color: var(--white-color);
display: block;
}
.big-call-to-action {
position: relative;
height: 100vh;
overflow: hidden;
}
.big-call-to-action video {
width: 100%;
position: absolute;
top: 0;
z-index: 1;
}
.cta-content-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.cta-content-wrapper .cta-content {
backdrop-filter: blur(10px);
border: 2px solid var(--border-color);
padding: 30px 100px;
border-radius: 80px;
background-color: rgba(var(--rgb-black), 0.5);
font-size:  5rem;
text-transform: uppercase;
font-weight: 900;
text-align: center;
background: linear-gradient(90deg,rgba(150, 209, 176, 1) 0%, rgba(198, 198, 198, 1) 50%, rgba(150, 209, 176, 1) 100%);
color: transparent;
background-clip: text;
transition: 0.3s;
}
.cta-content-wrapper .cta-content:hover {
box-shadow: 0px 0px 32px 0px rgba(var(--rgb-green, 0.75)) inset;
}
.glow-effect {
background: radial-gradient(circle, rgba(31, 128, 83, 1) 0%, rgba(31, 128, 83, 0.2) 50%, rgba(31, 128, 83, 0) 100%); 
width: 500px;
height: 500px;
position: absolute;
z-index: 2;
opacity: 0.2;
}
.left-top-position {
top: 10%;
left: 0;
}
.right-bottom-position {
right: 0;
bottom: 5%;
}
.background-additions {
position: absolute;
z-index: 2;
}
.left-bottom-position {
left: 0;
bottom: 5px;
}
.right-top-position {
right: 0;
top: 10%;
}
.footer {
position: relative;
overflow: hidden;
padding-top: 80px;
color: #fff;
background: #000;
}
.footer::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.48);
z-index: 1;
}
.footer-video {
position: absolute;
top: 50%;
left: 50%;
width: 115%;
height: 115%;
transform: translate(-50%, -50%) scale(1.08);
object-fit: cover;
object-position: center center;
filter: blur(18px);
opacity: 0.75;
z-index: 0;
}
.footer-main {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-menu-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr;
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-menu-heading {
padding: 42px 38px;
font-size: 1.35rem;
font-weight: 600;
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-menu-content {
padding: 38px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 24px;
}
.footer-menu-content a {
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
line-height: 1.45;
transition: opacity 0.25s ease;
}
.footer-menu-content a:hover {
opacity: 1;
color: #fff;
}
.footer-contact-content {
gap: 42px;
}
.footer-contact-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-contact-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
line-height: 1.2;
}
.footer-contact-value {
font-size: 1.1rem;
line-height: 1.45;
color: #fff;
text-decoration: none;
}
.footer-copyright {
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-copyright-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 78px;
}
.footer-copyright-wrapper p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
}
.footer-copyright-wrapper img {
max-height: 32px;
width: auto;
}
.responsive-cta {
display: none;
}
img,
video {
max-width: 100%;
height: auto;
display: block;
}
nav a,
a,
button {
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 1400px) {
.hero .hero-content h1 {
font-size: 7rem;
}
.call-to-action p {
font-size: 2.5rem;
}
.cta-content-wrapper .cta-content {
font-size: 4rem;
padding: 25px 70px;
}
}
@media (max-width: 1200px) {
header {
padding: 30px 0;
}
.main-navigation {
align-items: center;
gap: 20px;
}
.main-navigation nav {
gap: 20px;
padding: 12px 25px;
}
.hero {
padding-top: 180px;
}
.hero .hero-content h1 {
font-size: 5.5rem;
}
.hero .hero-content p {
font-size: 1.25rem;
max-width: 700px;
}
h2.section-heading {
font-size: 3rem;
}
.portfolio-items {
gap: 20px;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.service-item.span-2 {
grid-column: span 2;
}
.responsive-span-2 {
grid-column: span 2;
}
.responsive-span-3 {
grid-column: span 2;
}
.blog-items {
gap: 20px;
}
.blog-items .blog-item .blog-content .author-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer-menu-heading,
.footer-menu-content {
padding: 28px 24px;
}
.cta-content-wrapper .cta-content {
font-size: 3rem;
padding: 25px 50px;
}
}
@media (max-width: 992px) {
.container {
padding: 0 20px;
}
header {
padding: 20px 0;
}
.main-navigation {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.main-navigation nav {
order: 3;
width: 100%;
justify-content: center;
flex-wrap: wrap;
border-radius: 20px;
padding: 14px 20px;
gap: 16px;
}
.secondary-cta-btn {
padding: 12px 16px;
}
.hero {
height: auto;
min-height: 100vh;
padding-top: 220px;
padding-bottom: 80px;
}
.hero .video-wrapper {
width: 100%;
left: 0;
}
.hero .hero-lines {
display: none;
}
.hero .hero-content h2 {
font-size: 1.5rem;
}
.hero .hero-content h1 {
font-size: 4.5rem;
line-height: 1.1;
}
.hero .hero-content p {
font-size: 1.1rem;
}
.portfolio .portfolio-header,
.services .services-header,
.blog .blog-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.responsive-remove {
display: none;
}
.responsive-cta {
display: block;
margin-top: 30px;
text-align: center;
}
.portfolio-items {
grid-template-columns: 1fr;
}
.call-to-action {
padding: 70px 0;
}
.call-to-action p {
font-size: 2rem;
line-height: 1.4;
}
.services-grid {
grid-template-columns: 1fr 1fr;
margin-top: 40px;
}
.service-item {
min-height: 260px;
}
.service-item .service-item-content {
transform: translateY(0);
padding: 20px;
}
.service-item h3 {
font-size: 1.5rem;
}
.blog-items {
flex-direction: column;
}
.blog-items .blog-item .blog-content h3 {
font-size: 1.5rem;
}
.big-call-to-action {
height: 70vh;
min-height: 500px;
}
.big-call-to-action video {
height: 100%;
object-fit: cover;
}
.background-additions {
max-width: 180px;
}
.glow-effect {
width: 300px;
height: 300px;
}
.cta-content-wrapper .cta-content {
font-size: 2.4rem;
padding: 20px 35px;
border-radius: 40px;
}
.footer-menu-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-copyright-wrapper {
flex-direction: column;
justify-content: center;
gap: 10px;
text-align: center;
padding: 20px 0;
}
}
@media (max-width: 768px) {
.container {
padding: 0 16px;
}
.main-navigation {
flex-direction: column;
align-items: stretch;
}
.main-navigation > img {
width: 140px;
margin: 0 auto;
}
.main-navigation nav {
flex-direction: column;
align-items: center;
gap: 14px;
padding: 18px;
}
.secondary-cta-btn {
justify-content: center;
width: 100%;
}
.hero {
padding-top: 260px;
min-height: auto;
}
.hero .hero-content h2 {
font-size: 1.2rem;
}
.hero .hero-content h1 {
font-size: 3.2rem;
}
.hero .hero-content p {
font-size: 1rem;
line-height: 1.6;
}
.hero-content-wrapper {
gap: 20px;
}
h2.section-heading {
font-size: 2.3rem;
}
.portfolio,
.services,
.blog,
.call-to-action {
padding: 60px 0;
}
.portfolio-items .portfolio-item a .portfolio-content-wrapper {
padding: 20px 10px;
}
.portfolio-items .portfolio-item a .portfolio.tags {
flex-wrap: wrap;
}
.portfolio-items .portfolio-item a .portfolio.tags div {
font-size: 0.95rem;
padding: 5px 10px;
}
.portfolio-items .portfolio-item a .portfolio-content-wrapper h3 {
font-size: 1.5rem;
}
.call-to-action p {
font-size: 1.6rem;
margin-bottom: 30px;
}
.services-grid {
grid-template-columns: 1fr;
}
.service-item.span-2,
.responsive-span-2,
.responsive-span-3 {
grid-column: span 1;
}
.service-item {
min-height: 240px;
}
.service-item .service-item-content .service-item-content-header {
align-items: center;
}
.blog-items .blog-item .blog-content .author-wrapper,
.blog-items .blog-item .blog-content .author-wrapper .published-date-read-time {
flex-direction: column;
align-items: flex-start;
}
.big-call-to-action {
min-height: 420px;
height: 60vh;
}
.cta-content-wrapper .cta-content {
font-size: 1.7rem;
padding: 18px 24px;
width: calc(100% - 32px);
}
.background-additions {
max-width: 120px;
}
.footer {
padding-top: 50px;
}
.footer-menu-grid {
grid-template-columns: 1fr;
border-left: none;
}
.footer-menu-heading {
padding: 20px 0 10px;
border-right: none;
border-bottom: none;
}
.footer-menu-content {
padding: 0 0 24px;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
gap: 14px;
}
}
@media (max-width: 480px) {
.container {
padding: 0 14px;
}
header {
padding: 15px 0;
}
.main-navigation > img {
width: 120px;
}
.main-navigation nav {
border-radius: 16px;
padding: 14px;
}
.main-navigation nav a {
font-size: 0.95rem;
}
.secondary-cta-btn,
.cta-button .black-btn-bg {
padding: 12px 16px;
}
.hero {
padding-top: 240px;
padding-bottom: 50px;
}
.hero .hero-content h1 {
font-size: 2.5rem;
}
.hero .hero-content h2 {
font-size: 1rem;
}
.hero .hero-content p {
font-size: 0.95rem;
}
h2.section-heading {
font-size: 1.8rem;
}
.portfolio .portfolio-header h2.section-heading {
max-width: 100%;
}
.portfolio-items,
.services-grid,
.blog-items {
margin-top: 30px;
}
.call-to-action p {
font-size: 1.3rem;
}
.service-item {
min-height: 220px;
}
.service-item h3 {
font-size: 1.25rem;
}
.blog-items .blog-item .blog-content {
gap: 14px;
}
.blog-items .blog-item .blog-content h3 {
font-size: 1.25rem;
}
.blog-items .blog-item .blog-content .author-wrapper {
font-size: 0.95rem;
}
.big-call-to-action {
min-height: 360px;
}
.cta-content-wrapper .cta-content {
font-size: 1.3rem;
padding: 16px 20px;
border-radius: 24px;
}
.glow-effect {
width: 220px;
height: 220px;
}
.footer-menu-heading {
font-size: 1.1rem;
}
.footer-copyright-wrapper p {
font-size: 0.9rem;
text-align: center;
}
.footer-copyright-wrapper img {
max-height: 24px;
}
}
@media (hover: hover) and (pointer: fine) {
.service-item a:hover video {
opacity: 1;
}
.service-item a:hover .service-item-content {
transform: translateY(0);
}
.service-item a:hover::before {
background-color: var(--white-color);
}
}
@media (hover: none), (pointer: coarse) {
.service-item video {
opacity: 1;
}
.service-item .service-item-content {
transform: translateY(0);
background: linear-gradient(0deg, rgba(var(--rgb-black), 0.92) 0%, rgba(var(--rgb-black), 0.15) 100%);
}
}
@media (max-width: 1024px) {
header {
padding: 20px 0;
}
.main-navigation {
min-height: 56px;
}
.nav-toggle {
display: block;
}
.nav-panel {
position: absolute;
top: calc(100% + 12px);
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
padding: 18px;
border: 1px solid var(--border-color);
border-radius: 24px;
background: rgba(var(--rgb-black), 0.94);
backdrop-filter: blur(14px);
box-shadow: 0 20px 40px rgba(var(--rgb-black), 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px);
transition: 0.3s ease;
}
header.menu-open .nav-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.main-navigation nav {
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
border-radius: 0;
}
.main-navigation nav a {
display: block;
text-align: center;
padding: 14px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.main-navigation nav a:last-child {
border-bottom: 0;
}
.nav-panel .secondary-cta-btn {
width: 100%;
margin-top: 4px;
}
header.menu-open .nav-toggle span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
header.menu-open .nav-toggle span:nth-child(2) {
opacity: 0;
}
header.menu-open .nav-toggle span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
}
@media (max-width: 480px) {
.logo img {
height: 26px;
}
.nav-panel {
padding: 14px;
border-radius: 18px;
}
.main-navigation nav a {
padding: 12px 8px;
}
.secondary-cta-btn {
padding: 13px 16px;
}
}  .site-header,
header.site-header,
body .site-header {
position: relative;
z-index: 9999 !important;
} body.single-courses .tutor-container,
body.single-courses .tutor-course-details-page,
body.single-courses .tutor-wrap,
body.single-course .tutor-container,
body.single-course .tutor-course-details-page,
body.single-course .tutor-wrap {
padding-top: 60px !important;
} body.single-courses h1.tutor-course-details-title,
body.single-courses .tutor-course-details-title,
body.single-course h1.tutor-course-details-title,
body.single-course .tutor-course-details-title {
display: none !important;
} body.single-courses .tutor-meta.tutor-course-details-info,
body.single-course .tutor-meta.tutor-course-details-info {
display: none !important;
} body.single-courses .tutor-star-rating-group,
body.single-courses .tutor-single-course-rating,
body.single-courses .tutor-ratings,
body.single-course .tutor-star-rating-group,
body.single-course .tutor-single-course-rating,
body.single-course .tutor-ratings {
display: none !important;
} body.single-courses .tutor-course-wishlist-btn,
body.single-courses .tutor-wishlist-btn,
body.single-course .tutor-course-wishlist-btn,
body.single-course .tutor-wishlist-btn {
display: none !important;
} body.single-courses .tutor-course-share-btn,
body.single-courses .tutor-social-share-wrap,
body.single-course .tutor-course-share-btn,
body.single-course .tutor-social-share-wrap {
display: none !important;
} header.site-header {
position: fixed !important;
inset: 0 auto auto 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 999999 !important;
transform: none !important;
margin: 0 !important;
pointer-events: none !important;
}
body.admin-bar header.site-header {
top: 32px !important;
}
header.site-header .container,
header.site-header .main-navigation,
header.site-header .logo,
header.site-header .nav-panel,
header.site-header .nav-panel nav,
header.site-header .secondary-cta-btn,
header.site-header .nav-toggle {
pointer-events: auto;
}
header.site-header .container {
max-width: 1600px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
header.site-header .main-navigation {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
width: 100% !important;
}
header.site-header .logo {
justify-self: start !important;
display: flex !important;
align-items: center !important;
}
header.site-header .nav-panel {
display: contents !important;
}
header.site-header .nav-panel nav {
justify-self: center !important;
display: flex !important;
align-items: center !important;
gap: 32px !important;
}
header.site-header .secondary-cta-btn {
justify-self: end !important;
}
body {
padding-top: 110px !important;
}