@import url(../styles/global.css);
@import url(../styles/header.css);
.main-slider picture,
.main-slider img {
border-radius: 30px;
}
.main-slider .owl-next,
.main-slider .owl-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.main-slider .owl-next {
left: 9px;
}
.main-slider .owl-prev {
right: 9px;
}
.owl-stage {
display: flex;
}
.owl-stage-outer {
overflow-x: clip;
}
.category-slider .owl-prev,
.category-slider .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.category-slider {
padding: 0 60px;
overflow-x: clip;
}
.category-slider .owl-prev {
height: 100%;
position: absolute;
right: -4px;
}
.category-slider .owl-next {
height: 100%;
position: absolute;
left: -4px;
}
.category-slider .owl-stage-outer {
overflow: visible !important;
}
.category {
border-radius: 30px;
border: 1px solid #F8C7CC;
background: #FFF;
padding: 35px 35px 50px 35px;
justify-content: space-between;
height: 100%;
}
.category__title {
color: #094778;
text-align: center;
font-size: 28px;
font-weight: 900;
letter-spacing: -0.56px;
}
.category-slider .owl-item:not(.active) {
visibility: hidden;
}
.blog-slider {
padding: 2px;
}
.blog-slider .owl-prev,
.blog-slider .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.blog-slider .owl-prev {
right: -50px;
}
.blog-slider .owl-next {
left: -50px;
}
.category::before {
content: " ";
display: block;
position: absolute;
width: 72px;
height: 72px;
background-color: #fff;
border-radius: 50%;
border: 1px solid #F8C7CC;
bottom: -36px;
left: 50%;
transform: translateX(-50%);
transition: all 0.3s;
background: #fff url('data:image/svg+xml,') no-repeat center;
}
.category:hover::before {
background-color: var(--color-primary);
}
.category:hover::before {
background-image: url('data:image/svg+xml,');
}
.category:hover {
box-shadow: 0 10px 30px #F8C7CC;
}
.banner__section {
margin-top: 100px;
}
/* ------------------------------------------------------------ services */
.services__text {
color: #094778;
text-align: justify;
font-size: 14px;
font-weight: 400;
line-height: 25px;
/* 178.571% */
letter-spacing: -0.28px;
}
.services__section .section__title {
margin-bottom: 10px !important;
}
.service {
border-radius: 30px;
border: 1px solid #EEEEEF;
background: #FFF;
padding: 30px 10px;
text-align: center;
}
.service__title{
color: #094778;
font-size: 14px;
font-weight: 900;
line-height: 25px; /* 178.571% */
letter-spacing: -0.42px;
}
/* ----------------------------------------------- comments section */
.comments-slider .owl-stage-outer{
/* box-shadow: 6px 4px 70px 8px rgba(227, 0, 22, 0.10); */
overflow: visible;
}
.comments-slider .owl-item:not(.active){
opacity: 0.1;
}
.comments-slider .owl-dots{
display: flex;
justify-content: center;
margin-top: 50px;
}
.comments-slider .owl-dot{
width: 10px;
height: 8px;
background-color: #F8C7CC;
border-radius: 25px;
margin: 2px;
}
.comments-slider .owl-dot.active{
width: 24px;
background-color: var(--color-primary);
}
.comment__text{
background-color: #fff;
padding:20px 20px 20px 20px ;
line-height: 30px;
height: 250px;
border-radius: 25px;
background: var(--white, #FFF);
box-shadow: 6px 4px 70px 8px rgba(227, 0, 22, 0.10);
color: #686868;
text-align: justify;
font-size: 14px;
line-height: 30px; /* 187.5% */
}
.comment__text .wrapper{
height: 100%;
overflow-y: auto;
padding:0 7px;
margin: 0 -7px;
}
.comment__text .wrapper::-webkit-scrollbar {
width: 5px;
}
.comment__text .wrapper::-webkit-scrollbar-track {
background-color: #e6e6e6;
border-radius: 25px;
position: absolute;
height: 90%;
}
.comment__text .wrapper::-webkit-scrollbar-thumb {
background-color: var(--color-primary);
border-radius: 25px;
}
.comments-slider .owl-nav{
display: none;
}
.comment__author{
color: #605F5F;
font-size: 1.25rem;
font-weight: 700;
}
.comment__position{
color: #605F5F;
font-size: 11px;
font-weight: 400;
}
.star{
display: block;
width: 18px;
height: 17px;
margin: 0 1px;
background: url('data:image/svg+xml,');
}
.star.fill{
background: url('data:image/svg+xml,');
}
.comment__img{
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
margin-left: 16px;
}
.comment__img img{
object-fit: cover;
width: 100%;
height: 100%;
}
/* ------------------------------------------------------- faq section */
.faq{
max-width: 1111px;
padding: 27px 30px;
display: flex;
flex-direction: column;
position: relative;
min-width: 100%;
transition: all 0.3s;
border-radius: 30px;
border: 1px solid #F8C7CC;
margin-bottom: 20px;
}
.faq.active{
background-color: #E8E8E8;
border-color: #E8E8E8;
margin-right: 50px;
}
.faq.active .faq-num{
color: #fff;
font-size: 70px;
}
.faq-question{
color: #094778;
font-size: 24px;
font-weight: 600;
line-height: 30px; /* 125% */
letter-spacing: -0.72px;
}
.faq-question::before{
content: " ";
width: 28px;
height: 28px;
margin-left: 13px;
position: absolute;
top: 28px;
left: 40px;
background-image: url('data:image/svg+xml,');
}
.faq.active .faq-question::before{
background-image: url('data:image/svg+xml,');
}
.faq-answer{
color: #E30016;
text-align: right;
font-size: 15px;
font-weight: 400;
line-height: 30px; /* 200% */
letter-spacing: -0.45px;
display: none;
}
.faq p:not(:first-child){
color: #E30016;
text-align: right;
font-size: 15px;
font-weight: 400;
line-height: 30px; /* 200% */
letter-spacing: -0.45px;
display: none;
}
.faq p:nth-child(2){
margin-top: 16px;
}
/* ------------------------------------------------------- order section */
.order-step {
border: 0.5px solid #FFCB05;
background: #FFF;
padding: 30px 20px;
height: 100%;
}
.order-step__title {
color: #939393;
font-size: 1rem;
font-weight: 300;
letter-spacing: -0.48px;
}
.order-step__img {
height: 70px;
}
.small-blog article:first-child {
margin-bottom: 16px;
}
@media only screen and (max-width:1200px) {
.category-slider {
padding: 0 16px;
}
.category-slider .owl-prev {
right: -15px;
}
.category-slider .owl-next {
left: -15px;
}
.category-slider .owl-next svg, .category-slider .owl-prev svg{
width: 36px;
height: 36px;
}
.category-slider .owl-next {
left: 0;
}
.category-slider .owl-prev{
right:0
}
.blog-slider .owl-next{
left: -20px;
}
.blog-slider .owl-prev{
right: -20px;
}
.faq.active{
margin-right: 10px;
}
}
@media only screen and (max-width:768px) {
.product__title {
font-size: 1rem;
}
.product {
padding: 6px 6px 12px 6px;
}
.comment__text{
height: auto;
}
}
@media only screen and (max-width:576px) {
.category__title {
font-size: 1.2rem;
}
.category {
padding: 35px 15px;
}
.main-btn {
font-size: 0.875rem;
min-width: 120px;
}
.order-steps__section .col-lg-20:nth-child(even) {
padding-right: 5px;
}
.order-steps__section .col-lg-20:nth-child(odd) {
padding-left: 5px;
}
.order-step {
padding: 10px;
}
.category::before{
width: 45px;
height: 45px;
bottom: -20px;
}
.faq{
padding: 16px;
}
.faq-question{
font-size: 16px;
}
.faq-question::before{
top: 16px;
left: 0;
}
.faq.active{
margin-right: 0;
}
.faq p:not(:first-child){
font-size: 13px;
}
}