Current Directory: /home/u930863517/domains/limraevents.com/public_html/css
Viewing File: /home/u930863517/domains/limraevents.com/public_html/css/style.css
/* importing variable css */
@import url("./partials/variable.css");
/* importing global css */
@import url("./partials/global.css");
/* importing navbar css */
@import url("./partials/navbar.css");
/* ========================================================== */
/* HERO */
/* ========================================================== */
.hero{
height: 100vh;
position: relative;
}
.hero .hero-wrapper{
height: 100%;
position: relative;
z-index: 100;
}
.hero .hero-wrapper .slide .content-wrapper{
height: 100vh;
}
.hero .hero-wrapper .slide{
position: relative;
}
.hero .hero-wrapper .slide::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.6;
}
.hero .hero-wrapper .slide.slide1{
background: url("../assets/backgrounds/hero-slide2.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero .hero-wrapper .slide.slide2{
background: url("../assets/backgrounds/hero-slide5.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero .hero-wrapper .slide.slide3{
background: url("../assets/backgrounds/hero-slide6.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero .hero-wrapper .slide.slide4{
background: url("../assets/backgrounds/hero-slide7.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero .content-wrapper{
text-align: center;
color: white;
max-width: 800px;
margin: auto;
position: relative;
z-index: 100;
}
.hero .content-wrapper .sub-heading{
font-family: var(--font-roboto);
font-size: 25px;
}
.hero .content-wrapper .hero-heading{
font-family: var(--font-monteserrat);
text-transform: uppercase;
font-size: 40px;
font-weight: bold;
letter-spacing: 1px;
}
.hero .content-wrapper .line{
width: 5px;
height: 35px;
background: white;
margin: 1rem auto;
z-index: 100;
}
.hero .hero-wrapper .slider-btn{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 2rem;
}
.hero .hero-wrapper .slider-btn .btn{
background: black;
color: white;
border-radius: 50px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.hero .primary-button,
.hero .secondary-button{
border: 2px solid var(--white-color);
color: var(--white-color);
}
.hero .primary-button .overlay{
background: var(--white-color);
}
.hero .primary-button:hover span{
color: var(--black-color2);
}
.hero .secondary-button{
color: var(--black-color2);
}
.hero .secondary-button:hover span{
color: var(--white-color);
}
.hero .secondary-button .overlay{
background: var(--white-color);
}
/* ========================================================== */
/* ABOUT US */
/* ========================================================== */
.about-us .heading{
font-family: var(--font-monteserrat);
text-transform: uppercase;
font-weight: 600;
position: relative;
margin-top: 2rem;
}
.about-us .heading:before{
content: 'LIMRA';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 150px;
font-weight: 800;
color: rgba(0, 0, 0, 0.05);
}
.about-us .sub-heading{
font-family: var(--font-roboto);
font-size: 20px;
font-weight: 500;
margin: 2rem 0;
}
.about-us .para{
font-size: 15px;
}
.about-us .primary-button{
margin: 0 !important;
}
/* about image */
.about-us .about-image{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
/* ========================================================== */
/* CLIENTS */
/* ========================================================== */
section.clients{
padding: 75px 50px !important;
}
section.clients .image{
margin: 0.5rem 1rem;
box-shadow: var(--box-shadow3);
}
section.clients .image img{
filter: grayscale(1);
transition: 0.2s ease;
width: 100%;
}
section.clients .image:hover img{
filter: grayscale(0);
transform: scale(1.1);
}
/* ========================================================== */
/* COUNTERS */
/* ========================================================== */
.counter{
position: relative;
}
.counter .card{
border:none;
background: none;
border-radius: 0;
text-align: center;
}
.counter .card i{
font-size: 50px;
color: var(--secondary-color);
}
.counter .card .number{
font-family: var(--font-monteserrat);
font-weight: bold;
color: var(--primary-color);
margin: 0.5rem auto;
}
.counter .card .para{
margin: 0;
color: #666;
}
.counter .card h4{
font-family: var(--font-monteserrat);
color: var(--primary-color);
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 0.5rem;
}
.counter img{
max-width: 400px;
}
/* ========================================================== */
/* GALLERY */
/* ========================================================== */
.gallery .gallery-wrapper{
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: 10px;
margin: 75px 0;
}
.gallery .gallery-wrapper .map2-2{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.gallery .gallery-wrapper .map2-3{
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 4;
}
.gallery .gallery-wrapper .map6-1{
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
}
.gallery .gallery-wrapper .map1-11{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.gallery .gallery-wrapper .map1-12{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.gallery .gallery-wrapper .map1-13{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery .gallery-wrapper .map1-14{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery .gallery-wrapper .map1-15{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.gallery .gallery-wrapper .map1-16{
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
}
.gallery .gallery-wrapper .map1-17{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 4;
grid-row-end: 5;
}
.gallery .gallery-wrapper img{
width: 100%;
height: 100%;
}
.gallery .secondary-button{
border-color: black !important;
color: white !important;
cursor: pointer;
overflow: hidden !important;
}
.gallery .secondary-button .overlay{
background: black !important;
border-radius: 50px;
height: 100%;
transform: rotate(0deg) translate(-50%, -50%);
}
.gallery .secondary-button span{
color: white !important;
}
.gallery .secondary-button:hover span{
color: black !important;
}
/* ========================================================== */
/* TESTIMONIALS */
/* ========================================================== */
.testimonials .slick-track{
padding-top: 75px !important;
}
.testimonials .testimonial-slider .card{
position: relative;
border-radius: 5px;
border: none;
box-shadow: var(--box-shadow2);
margin: 1rem;
padding: 2rem;
padding-top: 100px;
}
.testimonials .testimonial-slider .card .image{
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 125px;
height: 125px;
border-radius: 100px;
overflow: hidden;
box-shadow: var(--box-shadow2);
}
.testimonials .testimonial-slider .card .para{
font-size: 14px;
text-align: center;
margin: 0;
}
.testimonials .testimonial-slider .card .card-heading{
font-family: var(--font-monteserrat);
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
text-align: center;
margin: 0;
margin-top: 1rem;
}