html,
body {
width: 100%;
overflow-x: hidden;
}
.nav-link:active {
color: #00a79d !important;
}
.how-it-works{
background:#fff;
}
.step-card{
background:#fff;
padding:40px 25px;
border-radius:18px;
position:relative;
overflow:hidden;
transition:.4s;
border:1px solid #ececec;
height:100%;
box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.step-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.step-number{
position:absolute;
top:18px;
right:18px;
font-size:18px;
font-weight:700;
color:#dcdcdc;
}
.step-icon{
width:90px;
height:90px;
margin:auto;
border-radius:20px;
background:linear-gradient(135deg,#0ea5a4,#14b8a6);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:40px;
margin-bottom:25px;
transition:.4s;
}
.step-card:hover .step-icon{
transform:rotate(8deg) scale(1.08);
}
.step-card h5{
font-weight:700;
margin-bottom:12px;
}
.step-card p{
color:#666;
font-size:15px;
margin:0;
line-height:1.7;
}
/* Connector Line */
@media(min-width:992px){
.step-card::after{
content:"";
position:absolute;
width:70px;
height:3px;
background:#14b8a6;
top:85px;
right:-38px;
z-index:1;
}
.col-lg-3:last-child .step-card::after{
display:none;
}
}
/* Mobile */
@media(max-width:991px){
.step-card{
margin-bottom:15px;
}
.step-card::after{
display:none;
}
}
.featured-category{
background:#fff;
}
.section-subtitle{
display:inline-block;
background:#12b3a8;
color:#fff;
padding:6px 18px;
border-radius:30px;
margin-bottom:12px;
font-size:14px;
letter-spacing:1px;
}
.category-card{
background:#fff;
border-radius:18px;
overflow:hidden;
transition:.4s;
box-shadow:0 12px 30px rgba(0,0,0,.08);
height:100%;
}
.category-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.category-image {
position: relative;
overflow: hidden;
height: 170px;
width: 100%;
max-width: 100%;
}
.category-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}
.category-card:hover img{
transform:scale(1.12);
}
.category-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,
rgba(0,0,0,.75),
rgba(0,0,0,.15));
}
.category-icon {
position: absolute;
top: 20px;
left: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #12b3a8;
transition: .4s;
}
.category-card:hover .category-icon{
transform:rotate(360deg);
}
.listing-count {
position: absolute;
top: 0px;
right: 0px;
background: #12b3a8;
color: #fff;
padding: 6px 16px;
border-radius: 25px;
font-size: 14px;
}
.btn.btn-danger.btn-sm.passingID {
background: #000;
border: 1px solid #000;
}
.category-content {
text-align: center;
padding: 15px;
}
.category-content h4 {
margin-bottom: 20px;
font-size: 1.25rem;
}
.btn-category{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 22px;
background:#12b3a8;
color:#fff;
text-decoration:none;
border-radius:30px;
transition:.4s;
}
.btn-category:hover{
background:#0d8d84;
color:#fff;
}
.btn-category i{
transition:.3s;
}
.btn-category:hover i{
transform:translateX(6px);
}
@media(max-width:768px){
.category-image{
height:200px;
}
.category-content{
padding:22px;
}
}
/**/
/* NAVBAR */
.navbar-brand{
font-weight:800;
}
.nav-link{
margin:0 10px;
color:#555;
font-weight:500;
}
.nav-link:hover,
.nav-link.active{
color:#0ca79d;
}
/* HERO */
.hero-section {
background: #0b6d66;
padding: 45px 0 63px;
position: relative;
overflow: hidden;
}
.hero-section:before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(255,255,255,.05);
border-radius:50%;
left:-150px;
top:-120px;
}
.hero-section:after{
content:"";
position:absolute;
width:500px;
height:500px;
background:rgba(255,255,255,.04);
right:-180px;
bottom:-200px;
border-radius:50%;
}
.hero-image{
animation:float 4s ease-in-out infinite;
max-width:260px;
}
@keyframes float{
50%{
transform:translateY(-15px);
}
}
.hero-tags{
margin-top:30px;
}
.hero-tags span{
display:inline-block;
background:#ffffff20;
padding:8px 18px;
border-radius:30px;
margin:6px;
color:#fff;
font-size:14px;
backdrop-filter:blur(10px);
}
.hero-search{
background:#fff;
padding:20px;
border-radius:15px;
box-shadow:0 20px 40px rgba(0,0,0,.2);
margin-top:35px;
}
/* CATEGORY */
.category-slider{
margin-top: 40px;
background:#fff;
border-radius:20px;
padding:25px;
box-shadow:0 20px 40px rgba(0,0,0,.12);
position:relative;
z-index:20;
}
.mini-card{
display:flex;
align-items:center;
background:#f8f9fa;
border-radius:15px;
overflow:hidden;
transition:.4s;
}
.mini-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.mini-card img {
width: 100%;
height: auto;
object-fit: cover;
}
.mini-card div{
padding:15px;
flex:1;
}
.mini-card h6{
margin-bottom:5px;
font-weight:700;
}
.mini-card p{
margin:0;
font-size:14px;
color:#777;
}
.mini-card i{
font-size:28px;
padding:20px;
color:#0ca79d;
}
@media(max-width:991px){
.hero-section{
text-align:center;
padding:70px 0 120px;
}
.hero-image{
margin-bottom:30px;
max-width:180px;
}
.category-slider{
margin-top:40px;
}
}
/**/
.advertisement-section{
background:#f8f9fa;
}
.section-tag{
display:inline-block;
padding:6px 18px;
border-radius:30px;
background:#14b8a6;
color:#fff;
margin-bottom:15px;
}
.ad-card{
background:#fff;
border-radius:18px;
overflow:hidden;
transition:.4s;
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.ad-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.ad-image{
position:relative;
overflow:hidden;
}
.ad-image img {
width: 100%;
height: auto;
object-fit: cover;
transition: .5s;
max-width: 100%;
}
.ad-card:hover img{
transform:scale(1.08);
}
.sponsored{
position:absolute;
top:15px;
left:15px;
background:#fff;
padding:7px 18px;
border-radius:30px;
font-size:13px;
font-weight:600;
color:#14b8a6;
}
.ad-content{
padding:25px;
}
.ad-content h5 {
margin-bottom: 18px;
font-size: 15px;
font-weight: bold;
}
.ad-meta{
display:flex;
justify-content:space-between;
font-size:14px;
color:#888;
}
.btn-view, .btn-contact {
width: 32%;
padding: 5px;
text-align: center;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: .3s;
}
.btn-view{
background:#14b8a6;
color:#fff;
}
.btn-contact{
background:#222;
color:#fff;
}
.btn-view:hover{
background:#0d9488;
color:#fff;
}
.btn-contact:hover{
background:#000;
color:#fff;
}
.swiper{
padding-bottom:60px;
}
.swiper-button-next,
.swiper-button-prev{
width:48px;
height:48px;
background:#14b8a6;
border-radius:50%;
color:#fff;
}
.swiper-button-next:after,
.swiper-button-prev:after{
font-size:18px;
font-weight:bold;
}
.swiper-pagination-bullet{
background:#14b8a6;
opacity:.3;
}
.swiper-pagination-bullet-active{
opacity:1;
width:24px;
border-radius:20px;
}
/**/
.about-business{
background:#fff;
}
.section-badge{
display:inline-block;
background:#18b7ad;
color:#fff;
padding:8px 20px;
border-radius:50px;
font-size:14px;
font-weight:600;
letter-spacing:1px;
}
.about-business h2{
font-weight:700;
}
.about-business p{
color:#000;
line-height:1.9;
font-size:16px;
}
.btn-business{
background:linear-gradient(45deg,#16b6aa,#0d8f87);
color:#fff;
padding:14px 32px;
border-radius:50px;
font-weight:600;
text-decoration:none;
display:inline-block;
transition:.4s;
}
.btn-business:hover{
transform:translateY(-4px);
color:#fff;
box-shadow:0 12px 30px rgba(22,182,170,.35);
}
.stat-card{
background:#fff;
border-radius:18px;
padding:16px;
text-align:center;
transition:.4s;
border:1px solid #e9ecef;
box-shadow:0 15px 35px rgba(0,0,0,.05);
}
.stat-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.icon-box{
width:60px;
height:60px;
margin:auto;
border-radius:20px;
background:linear-gradient(135deg,#16b6aa,#0d8f87);
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:34px;
margin-bottom:20px;
transition:.4s;
}
.stat-card:hover .icon-box{
transform:rotateY(180deg);
}
.stat-card h2{
font-size:30px;
color:#16b6aa;
font-weight:700;
margin-bottom:8px;
}
.stat-card p{
margin:0;
font-size:17px;
color:#555;
}
@media(max-width:768px){
.stat-card{
padding:25px 15px;
}
.stat-card h2{
font-size:28px;
}
.icon-box{
width:65px;
height:65px;
font-size:28px;
}
}
/**/
.cta-section{
background:linear-gradient(135deg,#0a6b65,#118b83);
padding:40px 0;
position:relative;
overflow:hidden;
}
/* Background Pattern */
.cta-section::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size:35px 35px;
opacity:.5;
}
/* Floating Circles */
.cta-section::after{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(255,255,255,.05);
border-radius:50%;
right:-180px;
top:-180px;
}
.cta-badge{
display:inline-block;
background:rgba(255,255,255,.15);
color:#fff;
padding:8px 20px;
border-radius:30px;
backdrop-filter:blur(8px);
font-weight:600;
}
.cta-section h2{
color:#fff;
font-size:31px;
font-weight:700;
line-height:1.4;
}
.cta-section h2 span{
color:#ffd54f;
}
.cta-section p{
color:rgba(255,255,255,.85);
line-height:1.8;
font-size:17px;
}
.btn-add{
display:inline-block;
padding:15px 34px;
background:#18b7ad;
color:#fff;
border-radius:50px;
text-decoration:none;
font-weight:600;
margin:8px;
transition:.4s;
}
.btn-add:hover{
background:#fff;
color:#18b7ad;
transform:translateY(-5px);
}
.btn-browse{
display:inline-block;
padding:15px 34px;
background:#fff;
color:#222;
border-radius:50px;
text-decoration:none;
font-weight:600;
margin:8px;
transition:.4s;
}
.btn-browse:hover{
background:#ffd54f;
color:#000;
transform:translateY(-5px);
}
.cta-img-left,
.cta-img-right{
max-width:240px;
animation:float 4s ease-in-out infinite;
}
.cta-img-right{
animation-delay:1s;
}
@keyframes float{
50%{
transform:translateY(-15px);
}
}
/* Mobile */
@media(max-width:991px){
.cta-section{
padding:70px 20px;
text-align:center;
}
.cta-section h2{
font-size:34px;
}
.cta-section p{
font-size:15px;
}
.btn-add,
.btn-browse{
width:100%;
margin:8px 0;
}
}
/**/
.testimonial-section{
background:#fff;
}
.section-badge{
display:inline-block;
background:#13b6ab;
color:#fff;
padding:8px 22px;
border-radius:30px;
font-weight:600;
}
.testimonial-card {
background: #fff;
border-radius: 25px;
padding: 10px;
position: relative;
box-shadow: 6px 20px 45px rgba(0,0,0,.08);
transition: .4s;
}
.testimonial-card:hover{
transform:translateY(-8px);
}
.quote-icon{
position:absolute;
right:35px;
top:25px;
font-size:70px;
color:#13b6ab20;
}
.testimonial-card p{
font-size:inherit;
line-height:1.9;
color:#555;
font-style:italic;
margin-bottom:35px;
}
.client-info{
display:flex;
align-items:center;
}
.client-info img{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
margin-right:20px;
border:4px solid #13b6ab;
}
.client-info h5{
margin-bottom:5px;
font-weight:700;
}
.client-info span{
color:#888;
display:block;
margin-bottom:8px;
}
.stars{
color:#ffc107;
}
.swiper-button-next,
.swiper-button-prev{
width:50px;
height:50px;
background:#13b6ab;
border-radius:50%;
color:#fff;
}
.swiper-button-next::after,
.swiper-button-prev::after{
font-size:20px;
}
.swiper-pagination-bullet{
background:#13b6ab;
opacity:.4;
}
.swiper-pagination-bullet-active{
opacity:1;
width:25px;
border-radius:20px;
}
@media(max-width:768px){
.testimonial-card{
padding:30px 20px;
}
.client-info{
flex-direction:column;
text-align:center;
}
.client-info img{
margin-right:0;
margin-bottom:15px;
}
.testimonial-card p{
font-size:16px;
}
}
/**/
.footer-section {
background: linear-gradient(135deg,#ddd,#000);
color: #fff;
padding: 70px 0 60px;
}
.footer-logo{
max-width:260px;
}
.footer-section p{
color:#d9f2ef;
line-height:1.8;
}
.footer-section h4{
margin-bottom:45px;
font-weight:700;
position:relative;
}
.footer-section h4:after{
content:"";
width:50px;
height:3px;
background:#fff;
position:absolute;
left:0;
bottom:-10px;
}
.footer-section ul{
padding:0;
margin:0;
list-style:none;
}
.footer-section ul li{
margin-bottom:14px;
}
.footer-section ul li a{
color:#d9f2ef;
text-decoration:none;
transition:.3s;
}
.footer-section ul li a:hover{
color:#fff;
padding-left:8px;
}
.footer-section ul li i{
margin-right:8px;
}
.newsletter{
display:flex;
background:#fff;
border-radius:50px;
overflow:hidden;
}
.newsletter input{
border:none;
box-shadow:none;
}
.newsletter button{
border:none;
background:#18b7ad;
color:#fff;
width:60px;
}
.social-icons{
display:flex;
gap:15px;
}
.social-icons a{
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,.12);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
text-decoration:none;
transition:.4s;
font-size:20px;
}
.social-icons a:hover{
background:#fff;
color:#18b7ad;
transform:translateY(-6px);
}
.app-buttons{
display:flex;
gap:15px;
}
.app-buttons img{
width:150px;
border-radius:10px;
transition:.3s;
}
.app-buttons img:hover{
transform:scale(1.05);
}
.footer-section hr{
border-color:rgba(255,255,255,.2);
margin:45px 0 25px;
}
@media(max-width:768px){
.footer-section{
text-align:center;
}
.footer-section h4:after{
left:50%;
transform:translateX(-50%);
}
.social-icons,
.app-buttons{
justify-content:center;
}
.newsletter{
margin:auto;
}
}
.fw-bold {
font-weight: 700 !important;
font-size: 25px;
}
.fw-bolds {
font-weight: bold;
}
.footer-bottom {
position: relative;
background: #232425a8;
padding: 25px 0;
border-top: 1px solid #dddddd78;
}
.toptitle {
font-size: 15px;
font-weight: normal;
}
.btn-success {
background:#96f4ee;
border: 1px solid #96f4ee;
color:#000;
}
.btn.btn-success:hover {
background: #0b6d66;
border: 1px solid #0b6d66;
color: #fff;
}
/**/
.page-header{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#13b6ab,#0d8d84);
padding:80px 0;
color:#fff;
}
/* Background Pattern */
.page-header::before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size:35px 35px;
opacity:.4;
}
.page-header h1{
font-size:52px;
font-weight:700;
position:relative;
z-index:2;
}
.breadcrumb{
background:none;
margin-bottom:0;
position:relative;
z-index:2;
}
.breadcrumb a{
color:#fff;
text-decoration:none;
}
.breadcrumb-item.active{
color:#e8fdfb;
}
.breadcrumb-item + .breadcrumb-item::before{
color:#fff;
}
/* Floating Icons */
.shape{
position:absolute;
color:rgba(255,255,255,.25);
font-size:55px;
animation:float 6s ease-in-out infinite;
}
.shape1{
left:12%;
top:25%;
}
.shape2{
left:22%;
top:55%;
font-size:40px;
}
.shape3{
left:35%;
top:20%;
font-size:35px;
}
.shape4{
right:22%;
top:18%;
font-size:45px;
}
.shape5{
right:15%;
top:58%;
font-size:55px;
}
.shape6{
right:8%;
top:30%;
font-size:70px;
}
@keyframes float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-15px);
}
}
/* Responsive */
@media(max-width:768px){
.page-header{
padding:60px 0;
}
.page-header h1{
font-size:34px;
}
.shape{
font-size:28px;
}
.shape6{
font-size:40px;
}
}
.location-section{
background:#f5fbfb;
}
.location-card{
background:#ffffff;
border-radius:20px;
padding:30px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
border:1px solid #dff3f1;
}
.location-info{
display:flex;
align-items:center;
gap:20px;
}
.location-icon{
width:75px;
height:75px;
border-radius:18px;
background:linear-gradient(135deg,#14b8a6,#0f8d84);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
box-shadow:0 10px 25px rgba(20,184,166,.35);
animation:float 2s ease-in-out infinite;
}
.location-info small {
color: #888;
font-size: 19px;
font-weight: bold;
}
.location-info h5{
font-weight:700;
color:#222;
}
.search-box{
position:relative;
}
.search-box i{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
color:#14b8a6;
font-size:20px;
}
.search-box input{
height:60px;
border-radius:50px;
border:1px solid #d8eceb;
padding-left:55px;
box-shadow:none;
}
.search-box input:focus{
border-color:#14b8a6;
box-shadow:0 0 0 .2rem rgba(20,184,166,.15);
}
.btn-theme{
background:#14b8a6;
color:#fff;
border-radius:50px;
padding:10px 22px;
}
.btn-theme:hover{
background:#0f8d84;
color:#fff;
}
.btn-light{
border-radius:50px;
padding:10px 20px;
}
@keyframes float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-6px);
}
}
@media(max-width:768px){
.location-card{
padding:20px;
}
.location-info{
flex-direction:column;
text-align:center;
}
.location-icon{
width:65px;
height:65px;
font-size:28px;
}
}
.blog-section{
background:#f7fbfc;
}
.sidebar-card{
background:#fff;
padding:30px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.sidebar-card h4{
margin-bottom:20px;
font-weight:700;
}
.sidebar-card ul{
padding:0;
margin:0;
list-style:none;
}
.sidebar-card li{
margin-bottom:15px;
}
.sidebar-card a{
text-decoration:none;
color:#555;
transition:.3s;
}
.sidebar-card a:hover{
color:#12b6ab;
padding-left:8px;
}
.promo-card{
position:relative;
overflow:hidden;
border-radius:15px;
}
.promo-card img{
width:100%;
}
.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#fff;
text-align:center;
padding:20px;
}
.blog-card{
background:#fff;
border-radius:18px;
overflow:hidden;
margin-bottom:0px;
box-shadow:0 15px 35px rgba(0,0,0,.07);
transition:.4s;
}
.blog-card:hover{
transform:translateY(-8px);
}
.blog-card img{
width:100%;
height:100%;
}
.blog-content{
padding:30px;
position:relative;
}
.status{
position:absolute;
right:25px;
top:0px;
background:#12b6ab;
color:#fff;
padding:6px 14px;
border-radius:30px;
font-size:13px;
}
.blog-content h3 {
font-size: 19px;
font-weight: 700;
margin-bottom: 20px;
}
#servc{
display: inline-block;
background: #eef9f8;
color: #12b6ab;
padding: 6px 14px;
border-radius: 30px;
margin: 4px;
font-size: 13px;
}
.meta{
display:flex;
flex-wrap:wrap;
gap:20px;
color:#888;
margin-bottom:18px;
}
.tags{
margin-bottom:20px;
}
.tags span{
display:inline-block;
background:#eef9f8;
color:#12b6ab;
padding:6px 14px;
border-radius:30px;
margin:4px;
font-size:13px;
}
.btn-theme{
background:#12b6ab;
color:#fff;
padding:10px 26px;
border-radius:30px;
}
.btn-theme:hover{
background:#0d958c;
color:#fff;
}
@media(max-width:768px){
.blog-content{
padding:20px;
}
.blog-content h3{
font-size:22px;
}
.status{
position:static;
display:inline-block;
margin-bottom:15px;
}
.meta{
gap:10px;
}
}
/**/
.about-section{
background:#fff;
}
.section-tag{
display:inline-block;
padding:8px 22px;
background:#13b6ab;
color:#fff;
border-radius:30px;
font-weight:600;
}
.about-section h2{
color:#1b2d3a;
}
.about-section p{
font-size:17px;
line-height:1.9;
color:#666;
}
.counter-box{
background:#fff;
padding:25px;
margin-bottom:20px;
border-radius:18px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.07);
transition:.35s;
}
.counter-box:hover{
transform:translateY(-8px);
}
.counter-box h3{
font-size:32px;
font-weight:700;
color:#13b6ab;
margin-bottom:5px;
}
.counter-box span{
color:#666;
}
.about-image{
text-align:center;
margin-bottom:35px;
animation:float 5s ease-in-out infinite;
}
.about-image img{
max-width:100%;
}
.cta-card{
background:linear-gradient(135deg,#13b6ab,#0c8c84);
padding:35px;
border-radius:20px;
color:#fff;
box-shadow:0 15px 40px rgba(19,182,171,.3);
}
.cta-card h4{
font-weight:700;
margin-bottom:15px;
}
.cta-card p{
color:#eefefe;
margin-bottom:25px;
}
.btn-theme{
background:#fff;
color:#13b6ab;
font-weight:600;
padding:12px 28px;
border-radius:40px;
}
.btn-theme:hover{
background:#f2f2f2;
color:#0c8c84;
}
@keyframes float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
}
@media(max-width:991px){
.about-section{
text-align:center;
}
.counter-box{
margin-bottom:15px;
}
}
.why-business{
background:#f8fbfd;
}
.section-badge{
background:#11b5ae;
color:#fff;
padding:8px 22px;
border-radius:40px;
font-weight:600;
display:inline-block;
}
.feature-card{
position:relative;
background:#fff;
padding:35px;
border-radius:18px;
overflow:hidden;
transition:.35s;
border:1px solid #e8ecef;
height:100%;
box-shadow:0 10px 25px rgba(0,0,0,.05);
}
.feature-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#11b5ae,#18d0c8);
}
.feature-card:hover{
transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}
.icon-box{
width:70px;
height:70px;
border-radius:18px;
background:linear-gradient(135deg,#11b5ae,#16d6ca);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:30px;
margin-bottom:25px;
transition:.4s;
}
.feature-card:hover .icon-box{
transform:rotate(-10deg) scale(1.1);
}
.feature-card h4{
font-weight:700;
margin-bottom:18px;
color:#222;
}
.feature-card p{
color:#666;
line-height:1.8;
margin-bottom:0;
}
.feature-number{
position:absolute;
top:25px;
right:25px;
font-size:55px;
font-weight:800;
color:#11b5ae;
opacity:.08;
}
@media(max-width:768px){
.feature-card{
padding:25px;
}
.icon-box{
width:60px;
height:60px;
font-size:24px;
}
.feature-number{
font-size:40px;
}
}