h1 {
font-size: 100px;
line-height: 108px;
text-transform: uppercase;
}
.swiper-container h2,
.digital-slider h2 {
font-size: 35px;
line-height: 44px;
text-transform: uppercase;
}
h4 {
font-size: 1em !important;
} .slider-nav {
display: inline-block;
width: 150px;
}
.slider-nav li {
display: block;
text-transform: uppercase;
font-size: 22px;
line-height: 32px;
font-weight: 300;
color: #555555;
transition: all 0.5s;
-webkit-transition: all 0.5s;
position: relative;
}
.slider-nav li:after {
content: "";
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.slider-nav li:hover {
color: #fff;
cursor: pointer;
}
.slick-current li {
position: relative;
padding-left: 30px;
color: #fff !important;
}
.slick-current li:after {
content: "";
position: absolute;
background: #f10000;
height: 2px;
width: 40px;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}  .lambo {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
background: radial-gradient(
86.74% 37.06% at 50% 52.26%,
#555555 0%,
#000000 100%
);
min-height: 100vh;
position: relative;
padding: 40px 0px 70px;
}
.banner {
width: 100%;
position: relative;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
.banner .slick-slide {
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.banner .slick-slide.slick-active {
opacity: 1;
}
.banner-slide {
display: flex !important;
display: -webkit-flex !important;
justify-content: center;
-webkit-justify-content: center;
}
.slick-prev {
position: absolute;
top: auto;
left: 49%;
bottom: -40px;
}
.slick-prev:before,
.slick-next:before {
font-size: 30px;
font-family: none;
}
.slick-next {
position: absolute;
top: auto;
right: 44%;
bottom: -40px;
}
.banner-desc {
position: relative;
left: 18%;
margin-bottom: -2%;
}
.banner-inner {
padding-left: 40px;
}
.banner-inner h2 {
padding-left: 2px;
background: linear-gradient(178.09deg, #ffffff 2.14%, #4c4c4c 114.15%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 400;
}
.banner-inner h1 {
letter-spacing: 1px;
color: transparent;
text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.014);
-webkit-text-stroke: 1px #fff;
font-weight: 700;
}
.banner-inner img {
display: block;
z-index: 1;
position: relative;
width: 80%;
margin: 0px auto;
} @media (min-width: 992px) and (max-width: 1199px) {
h1 {
font-size: 80px;
line-height: 85px;
}
h2 {
font-size: 25px;
line-height: 30px;
}
.lambo {
padding: 40px 0px 75px;
} nav {
padding-left: 15px;
}
.slider-nav li {
font-size: 20px;
line-height: 30px;
}
.slick-prev {
left: 47%;
}
.slick-next {
right: 41%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
h1 {
font-size: 60px;
line-height: 65px;
}
h2 {
font-size: 20px;
line-height: 25px;
}
.lambo {
padding: 40px 0px 75px;
} nav {
padding-left: 10px;
}
.slick-current li {
padding-left: 20px;
}
.slider-nav li {
font-size: 16px;
line-height: 26px;
}
.slick-current li:after {
content: "";
width: 25px;
}
.slick-prev {
left: 49%;
}
.slick-next {
right: 41%;
}
}
@media (min-width: 576px) and (max-width: 767px) { .lambo {
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
padding: 0px 0px 35px;
}
.banner {
margin-top: 0px;
}
.banner-inner {
padding-left: 0px;
}
h1 {
font-size: 35px;
line-height: 40px;
}
h2 {
font-size: 15px;
line-height: 20px;
} nav {
position: static;
transform: translateY(0%);
-webkit-transform: translateY(0%);
width: 100%;
}
.slick-current li {
padding-left: 20px;
}
.slick-current li:after {
content: "";
left: 39%;
transform: translate(0);
-webkit-transform: translate(0);
width: 28px;
}
.slider-nav {
width: 100%;
}
.slider-nav li {
text-align: center;
font-size: 18px;
line-height: 28px;
}
.slick-prev {
left: 42%;
}
.slick-next {
right: 42%;
}
nav {
position: relative;
padding-left: 0px;
}
nav .slick-prev {
position: absolute;
top: 50%;
left: 20%;
}
nav .slick-next {
position: absolute;
top: 50%;
right: 20%;
}
}
@media (max-width: 575px) { .lambo {
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
padding: 0px 0px 35px;
}
.banner {
margin-top: 15px;
}
.banner-inner {
padding-left: 0px;
}
.banner-inner img {
width: 100%;
}
.banner-desc {
left: 10%;
margin-bottom: -3%;
}
h1 {
font-size: 35px;
line-height: 40px;
}
h2 {
font-size: 15px;
line-height: 20px;
} .slick-prev:before,
.slick-next:before {
font-size: 25px;
}
nav {
position: static;
transform: translateY(0%);
-webkit-transform: translateY(0%);
width: 100%;
}
.slick-current li {
padding-left: 10px;
}
.slick-current li:after {
content: "";
left: 34%;
width: 20px;
}
.slider-nav {
width: 100%;
}
.slider-nav li {
text-align: center;
font-size: 18px;
line-height: 28px;
}
.slick-prev {
left: 40%;
}
.slick-next {
right: 40%;
}
nav {
position: relative;
padding-left: 0px;
}
nav .slick-prev {
position: absolute;
top: 50%;
left: 10%;
}
nav .slick-next {
position: absolute;
top: 50%;
right: 10%;
}
}
.homepage-slider {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.swiper-container {
width: 100%;
height: 400px;
position: relative;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.slider-caption {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 8px;
}
.swiper-button-next,
.swiper-button-prev {
color: #fff;
}
.swiper-pagination-bullet {
background: #fff;
} .custom-slider {
display: flex;
flex-direction: row;
background: #222;
color: #fff;
padding: 20px;
border-radius: 10px;
overflow: hidden;
} .slider-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.category-label {
font-size: 14px;
text-transform: uppercase;
color: #ccc;
margin-bottom: 10px;
letter-spacing: 1px;
}
.slider-title {
font-size: 32px;
font-weight: bold;
line-height: 1.2;
margin-bottom: 20px;
}
.author-image {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
}
.author-name {
font-size: 14px;
font-weight: bold;
color: #fff;
}
.post-date {
font-size: 14px;
color: #ccc;
margin-left: 10px;
} .slider-images {
flex: 0.3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
.circle-image {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
background: #333;
}
.circle-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.homepage-slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.swiper-container {
width: 100%;
height: auto;
}
.swiper-slide {
position: relative;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px;
color: #fff;
}
.slider-content {
max-width: 600px;
background: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
}
.category-label {
font-size: 14px;
text-transform: uppercase;
color: #ddd;
margin-bottom: 10px;
}
.slider-title {
font-size: 32px;
font-weight: bold;
line-height: 1.2;
margin-bottom: 20px;
}
.slider-title a {
color: #fff;
text-decoration: none;
}
.author-info {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.author-info img {
border-radius: 50%;
border: 1px solid #009ee3;
width: 50px;
}
.author-name {
font-size: 14px;
font-weight: bold;
color: #fff;
}
.post-date {
font-size: 14px;
color: #ccc;
} .swiper-button-next,
.swiper-button-prev {
color: #fff;
}
.swiper-pagination-bullet {
background: #fff;
}