/*=====================================================
    NEORAA NETWORK LLP
    Premium Enterprise UI
======================================================*/

/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/*=============================
Root
=============================*/

:root{

--rose:#C79A7A;
--rose2:#DAB8A2;
--rose3:#F2E7E1;

--white:#ffffff;

--bg:#FCFAF8;

--section:#F7F2EE;

--heading:#282828;

--text:#656565;

--border:#E7DDD7;

--shadow:0 20px 60px rgba(199,154,122,.12);

--radius:24px;

--transition:.35s ease;

}



/* ==========================================
COMMON PAGE HERO
========================================== */

.page-hero{

    padding:70px 0 90px;

    background:linear-gradient(135deg,#FDF8F5,#F6ECE6);

    position:relative;

}

.page-hero h1{

    font-size:64px;

    font-weight:800;

    margin:20px 0;

}

.page-hero p{

    font-size:20px;

    color:#666;

}

@media(max-width:768px){

.page-hero{

    padding:40px 0 70px;

}

.page-hero h1{

    font-size:40px;

}

}

/*=============================

Reset

=============================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{
    padding-top:120px;
}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--heading);

overflow-x:hidden;

line-height:1.8;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

padding:0;

margin:0;

}

.container{

max-width:1320px;

}

/*=============================

Typography

=============================*/

h1,h2,h3,h4,h5{

font-family:'Outfit',sans-serif;

font-weight:700;

color:var(--heading);

}

.section{

padding:120px 0;

}

.section-light{

background:var(--section);

}

.section-title{

font-size:54px;

font-weight:800;

margin-bottom:15px;

}

.section-subtitle{

display:inline-block;

background:var(--rose3);

color:var(--rose);

padding:8px 18px;

border-radius:50px;

font-size:14px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:20px;

}

/*=============================

Buttons

=============================*/

.btn-main{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:60px;

background:linear-gradient(135deg,#DAB8A2,#C79A7A);

color:#fff;

font-weight:600;

box-shadow:var(--shadow);

border:none;

}

.btn-main:hover{

transform:translateY(-4px);

background:linear-gradient(135deg,#C79A7A,#B27E61);

color:white;

}

.btn-light{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:60px;

background:white;

border:1px solid var(--border);

color:#444;

font-weight:600;

margin-left:15px;

}

.btn-light:hover{

background:var(--rose);

color:white;

border-color:var(--rose);

}

/*=============================

Glass Card

=============================*/

.glass-card{

background:rgba(255,255,255,.75);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.7);

border-radius:var(--radius);

box-shadow:var(--shadow);

}

/*=============================

Animation

=============================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*=============================

Responsive

=============================*/

@media(max-width:992px){

.section{

padding:80px 0;

}

.section-title{

font-size:38px;

}

}

@media(max-width:768px){

.section-title{

font-size:32px;

}

.btn-main,

.btn-light{

width:100%;

margin:10px 0;

}

}
/*=================================================
HEADER
=================================================*/

.header{

position:fixed;

top:20px;

left:0;

width:100%;

z-index:9999;

}

.navbar-wrapper{

background:rgba(255,255,255,.85);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.8);

box-shadow:0 15px 40px rgba(0,0,0,.05);

border-radius:60px;

padding:14px 28px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:55px;

}

.desktop-menu ul{

display:flex;

align-items:center;

gap:35px;

}

.desktop-menu ul li{

position:relative;

}

.desktop-menu ul li a{

font-weight:600;

color:#444;

}

.desktop-menu ul li a:hover{

color:var(--rose);

}

.has-dropdown:hover .mega-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.mega-menu{

position:absolute;

top:55px;

left:-220px;

width:850px;

background:white;

border-radius:28px;

padding:35px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

opacity:0;

visibility:hidden;

transform:translateY(25px);

transition:.35s;

}

.mega-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:35px;

}

.mega-grid h4{

font-size:18px;

margin-bottom:18px;

color:var(--rose);

}

.mega-grid a{

display:block;

margin-bottom:12px;

color:#666;

}

.mega-grid a:hover{

padding-left:8px;

color:var(--rose);

}

.right-buttons{

display:flex;

align-items:center;

}

.mobile-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

.mobile-menu{

position:fixed;

right:-100%;

top:0;

width:300px;

height:100%;

background:white;

padding:40px;

z-index:99999;

transition:.4s;

box-shadow:-10px 0 30px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

margin:18px 0;

font-weight:600;

color:#444;

}

.mobile-close{

font-size:28px;

margin-bottom:20px;

cursor:pointer;

align-self:flex-end;

}

@media(max-width:991px){

.desktop-menu{

display:none;

}

.right-buttons{

display:none;

}

.mobile-toggle{

display:block;

}

.header{

top:10px;

}

.navbar-wrapper{

border-radius:18px;

}

}
/*================================================

HERO

================================================*/

.hero{

padding-top:180px;

padding-bottom:140px;

position:relative;

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;

top:-250px;

right:-150px;

width:700px;

height:700px;

background:radial-gradient(circle,#EFD9CB 0%,transparent 70%);

z-index:-1;

}

.hero::after{

content:'';

position:absolute;

bottom:-200px;

left:-200px;

width:600px;

height:600px;

background:radial-gradient(circle,#F7ECE6 0%,transparent 70%);

z-index:-1;

}

.hero-label{

display:inline-flex;

align-items:center;

gap:12px;

padding:10px 18px;

background:white;

border-radius:50px;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.hero-label img{

height:26px;

}

.hero-label span{

font-size:13px;

font-weight:700;

color:var(--rose);

letter-spacing:1px;

}

.hero h1{

font-size:82px;

font-weight:800;

line-height:1.05;

margin-bottom:25px;

}

.hero h1 span{

display:block;

background:linear-gradient(135deg,#C79A7A,#E0C1AE);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

color:var(--text);

max-width:620px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:55px;

}

.hero-trust{

display:flex;

gap:45px;

}

.hero-trust h3{

font-size:42px;

color:var(--rose);

margin-bottom:0;

}

.hero-trust p{

margin:0;

font-size:15px;

color:#777;

}

/*============

Right

=============*/

.hero-visual{

position:relative;

height:700px;

display:flex;

align-items:center;

justify-content:center;

}

.blob{

position:absolute;

width:550px;

height:550px;

background:linear-gradient(135deg,#F5E5DB,#F0D8CA);

border-radius:45% 55% 60% 40%;

animation:blob 12s infinite linear;

}

.hero-image{

width:520px;

position:relative;

z-index:2;

animation:float 5s infinite ease-in-out;

}

/*============

Floating Cards

=============*/

.floating-card{

position:absolute;

background:white;

padding:18px 24px;

border-radius:18px;

box-shadow:var(--shadow);

font-weight:600;

display:flex;

align-items:center;

gap:12px;

z-index:3;

}

.floating-card i{

color:var(--rose);

font-size:22px;

}

.card1{

left:-10px;

top:90px;

}

.card2{

right:-10px;

top:220px;

}

.card3{

left:50px;

bottom:90px;

}

/*============

Scroll

=============*/

.scroll-down{

position:absolute;

left:50%;

bottom:30px;

transform:translateX(-50%);

}

.scroll-down span{

display:block;

width:28px;

height:48px;

border:2px solid #D6B8A6;

border-radius:40px;

position:relative;

}

.scroll-down span::before{

content:'';

position:absolute;

width:8px;

height:8px;

background:var(--rose);

border-radius:50%;

left:50%;

transform:translateX(-50%);

top:8px;

animation:scroll 2s infinite;

}

/*============

Animation

=============*/

@keyframes blob{

0%{

border-radius:45% 55% 60% 40%;

transform:rotate(0deg);

}

50%{

border-radius:60% 40% 45% 55%;

transform:rotate(180deg);

}

100%{

border-radius:45% 55% 60% 40%;

transform:rotate(360deg);

}

}

@keyframes scroll{

0%{

top:8px;

opacity:1;

}

100%{

top:28px;

opacity:0;

}

}

@media(max-width:991px){

.hero{

text-align:center;

padding-top:140px;

}

.hero h1{

font-size:52px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-trust{

justify-content:center;

margin-bottom:60px;

}

.hero-visual{

height:auto;

margin-top:40px;

}

.hero-image{

width:90%;

}

.floating-card{

display:none;

}

}

/*================================

Solutions

================================*/

.section-desc{

max-width:700px;

margin:auto;

color:#777;

font-size:18px;

margin-top:15px;

}

.solution-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:60px;

}

.solution-box{

background:white;

padding:38px;

border-radius:30px;

border:1px solid var(--border);

transition:.4s;

position:relative;

overflow:hidden;

box-shadow:0 12px 35px rgba(0,0,0,.04);

}

.solution-box::before{

content:'';

position:absolute;

top:-120px;

right:-120px;

width:220px;

height:220px;

background:#F6ECE7;

border-radius:50%;

transition:.5s;

}

.solution-box:hover{

transform:translateY(-12px);

box-shadow:0 20px 60px rgba(199,154,122,.18);

border-color:#DAB8A2;

}

.solution-box:hover::before{

transform:scale(1.4);

}

.solution-icon{

width:85px;

height:85px;

background:linear-gradient(135deg,#F8F1EC,#EFD8CB);

border-radius:24px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

position:relative;

z-index:2;

}

.solution-icon i{

font-size:34px;

color:#C79A7A;

}

.solution-box h3{

font-size:24px;

margin-bottom:15px;

position:relative;

z-index:2;

}

.solution-box p{

color:#777;

margin-bottom:30px;

position:relative;

z-index:2;

}

.solution-link{

font-weight:700;

color:#C79A7A;

position:relative;

z-index:2;

}

.solution-link i{

margin-left:8px;

transition:.3s;

}

.solution-link:hover i{

margin-left:16px;

}

@media(max-width:1200px){

.solution-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.solution-grid{

grid-template-columns:1fr;

}

}


/*=====================================

OEM Slider

======================================*/

.brand-slider{

overflow:hidden;

margin-top:60px;

}

.brand-track{

display:flex;

width:max-content;

animation:brands 35s linear infinite;

}

.brand-slider:hover .brand-track{

animation-play-state:paused;

}

.brand-item{

width:220px;

height:110px;

background:white;

border-radius:24px;

display:flex;

justify-content:center;

align-items:center;

margin-right:25px;

font-size:24px;

font-weight:700;

color:#999;

border:1px solid var(--border);

box-shadow:0 10px 30px rgba(0,0,0,.04);

transition:.35s;

}

.brand-item:hover{

transform:translateY(-8px);

color:var(--rose);

box-shadow:0 20px 50px rgba(199,154,122,.18);

}

@keyframes brands{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

/*=========================

PROCESS

==========================*/

.process-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.process-box{

background:white;

padding:40px;

border-radius:30px;

position:relative;

box-shadow:var(--shadow);

border:1px solid var(--border);

transition:.35s;

}

.process-box:hover{

transform:translateY(-12px);

}

.step{

width:70px;

height:70px;

border-radius:50%;

background:linear-gradient(135deg,#DAB8A2,#C79A7A);

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:24px;

font-weight:700;

margin-bottom:25px;

}

.process-box h3{

margin-bottom:15px;

}

.process-box p{

color:#777;

}

@media(max-width:991px){

.process-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

}

/*==================================

INDUSTRIES

===================================*/

.industries{

background:linear-gradient(180deg,#FCFAF8,#F7F2EE);

}

.industry-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:60px;

}

.industry-card{

background:white;

padding:38px;

border-radius:28px;

border:1px solid var(--border);

transition:.35s;

position:relative;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.04);

}

.industry-card::before{

content:'';

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:linear-gradient(180deg,#DAB8A2,#C79A7A);

transition:.35s;

opacity:0;

}

.industry-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(199,154,122,.15);

}

.industry-card:hover::before{

opacity:1;

}

.industry-icon{

width:82px;

height:82px;

border-radius:24px;

background:#F7ECE5;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.industry-icon i{

font-size:34px;

color:#C79A7A;

}

.industry-card h3{

font-size:24px;

margin-bottom:15px;

}

.industry-card p{

color:#777;

margin-bottom:25px;

}

.industry-card a{

color:#C79A7A;

font-weight:700;

}

.industry-card a i{

margin-left:8px;

transition:.3s;

}

.industry-card:hover a i{

margin-left:16px;

}

@media(max-width:1200px){

.industry-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:992px){

.industry-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.industry-grid{

grid-template-columns:1fr;

}

}
/*==============================

PROJECTS

==============================*/

.project-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.project-card{

height:360px;

border-radius:28px;

overflow:hidden;

position:relative;

}

.project-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.project-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:35px;

background:linear-gradient(transparent,rgba(0,0,0,.78));

color:white;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-overlay h3{

color:white;

}

.project-overlay p{

opacity:.85;

}

.project-overlay a{

display:inline-block;

margin-top:15px;

color:#EFD7C8;

font-weight:700;

}

@media(max-width:992px){

.project-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.project-grid{

grid-template-columns:1fr;

}

}

/*======================================

LEAD SECTION

=======================================*/

.lead-section{

background:linear-gradient(180deg,#FDFBF9,#F5EFEB);

}

.lead-wrapper{

background:white;

border-radius:35px;

padding:70px;

box-shadow:0 25px 70px rgba(199,154,122,.15);

border:1px solid var(--border);

}

.lead-text{

margin:30px 0;

color:#666;

font-size:18px;

}

.lead-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:40px;

}

.lead-features div{

font-weight:600;

}

.lead-features i{

color:var(--rose);

margin-right:10px;

}

.lead-form input,

.lead-form select,

.lead-form textarea{

width:100%;

padding:18px 20px;

border-radius:18px;

border:1px solid var(--border);

margin-bottom:20px;

background:#FCFAF8;

outline:none;

transition:.3s;

}

.lead-form input:focus,

.lead-form select:focus,

.lead-form textarea:focus{

border-color:var(--rose);

box-shadow:0 0 0 4px rgba(199,154,122,.15);

}

@media(max-width:991px){

.lead-wrapper{

padding:35px;

}

}

/*=============================

TESTIMONIALS

=============================*/

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.testimonial-card{

background:white;

padding:40px;

border-radius:30px;

box-shadow:var(--shadow);

border:1px solid var(--border);

}

.stars{

font-size:22px;

color:#F8B84E;

margin-bottom:20px;

}

.client{

display:flex;

align-items:center;

margin-top:30px;

}

.client img{

width:65px;

height:65px;

border-radius:50%;

margin-right:15px;

object-fit:cover;

}

.client span{

color:#777;

}

@media(max-width:991px){

.testimonial-grid{

grid-template-columns:1fr;

}

}

/*======================================

LEAD SECTION

=======================================*/

.lead-section{

background:linear-gradient(180deg,#FDFBF9,#F5EFEB);

}

.lead-wrapper{

background:white;

border-radius:35px;

padding:70px;

box-shadow:0 25px 70px rgba(199,154,122,.15);

border:1px solid var(--border);

}

.lead-text{

margin:30px 0;

color:#666;

font-size:18px;

}

.lead-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:40px;

}

.lead-features div{

font-weight:600;

}

.lead-features i{

color:var(--rose);

margin-right:10px;

}

.lead-form input,

.lead-form select,

.lead-form textarea{

width:100%;

padding:18px 20px;

border-radius:18px;

border:1px solid var(--border);

margin-bottom:20px;

background:#FCFAF8;

outline:none;

transition:.3s;

}

.lead-form input:focus,

.lead-form select:focus,

.lead-form textarea:focus{

border-color:var(--rose);

box-shadow:0 0 0 4px rgba(199,154,122,.15);

}

@media(max-width:991px){

.lead-wrapper{

padding:35px;

}

}


/*=============================

TESTIMONIALS

=============================*/

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.testimonial-card{

background:white;

padding:40px;

border-radius:30px;

box-shadow:var(--shadow);

border:1px solid var(--border);

}

.stars{

font-size:22px;

color:#F8B84E;

margin-bottom:20px;

}

.client{

display:flex;

align-items:center;

margin-top:30px;

}

.client img{

width:65px;

height:65px;

border-radius:50%;

margin-right:15px;

object-fit:cover;

}

.client span{

color:#777;

}

@media(max-width:991px){

.testimonial-grid{

grid-template-columns:1fr;

}

}

/*=====================================

FAQ

======================================*/

.faq-wrapper{

max-width:900px;

margin:auto;

}

.faq-item{

background:white;

margin-bottom:18px;

border-radius:20px;

overflow:hidden;

border:1px solid var(--border);

box-shadow:var(--shadow);

}

.faq-question{

padding:24px 30px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-weight:700;

font-size:18px;

}

.faq-answer{

padding:0 30px 25px;

color:#666;

line-height:1.8;

display:none;

}

.faq-item.active .faq-answer{

display:block;

}

.cta-section{

padding:120px 0;

}

.cta-box{

background:linear-gradient(135deg,#EFDCD0,#DAB8A2);

padding:80px;

border-radius:35px;

text-align:center;

}

.cta-box h2{

font-size:54px;

margin-bottom:20px;

}

.cta-box p{

font-size:20px;

margin-bottom:20px;

}

/*=========================================
FOOTER
=========================================*/

.footer{

background:#2C2725;

padding:90px 0 40px;

color:#D9D9D9;

}

.footer-logo{

height:70px;

margin-bottom:25px;

}

.footer-about{

line-height:1.9;

margin-bottom:30px;

color:#CFCFCF;

}

.footer h4{

color:#F1D7C7;

margin-bottom:25px;

font-size:22px;

}

.footer ul{

padding:0;

list-style:none;

}

.footer li{

margin-bottom:15px;

}

.footer a{

color:#CFCFCF;

transition:.3s;

}

.footer a:hover{

color:#F1D7C7;

padding-left:5px;

}

.social-links{

display:flex;

gap:15px;

margin-top:25px;

}

.social-links a{

width:48px;

height:48px;

border-radius:50%;

background:rgba(255,255,255,.08);

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

}

.social-links a:hover{

background:#C79A7A;

color:white;

padding-left:0;

}

.contact-list li{

display:flex;

align-items:flex-start;

gap:12px;

}

.contact-list i{

color:#C79A7A;

margin-top:5px;

}

.footer hr{

margin:50px 0 25px;

border-color:rgba(255,255,255,.08);

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.footer-bottom a{

margin-left:15px;

}

/* Floating WhatsApp */

.whatsapp-btn{

position:fixed;

right:25px;

bottom:90px;

width:58px;

height:58px;

border-radius:50%;

background:#25D366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

box-shadow:0 15px 35px rgba(0,0,0,.2);

z-index:999;

}

.whatsapp-btn:hover{

color:white;

transform:scale(1.08);

}

/* Back To Top */

#topBtn{

position:fixed;

right:25px;

bottom:20px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#C79A7A;

color:white;

display:none;

cursor:pointer;

box-shadow:0 15px 35px rgba(0,0,0,.15);

z-index:999;

}

#topBtn:hover{

background:#B27E61;

}

/*==============================

SERVICE PAGE

==============================*/

.page-banner{

padding:180px 0 120px;

background:linear-gradient(135deg,#FDF8F5,#F6ECE6);

text-align:center;

}

.banner-content{

max-width:850px;

margin:auto;

}

.page-banner h1{

font-size:64px;

margin:20px 0;

font-weight:800;

}

.page-banner p{

font-size:20px;

color:#666;

}

.service-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.service-card{

background:white;

padding:45px;

border-radius:30px;

border:1px solid var(--border);

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.04);

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(199,154,122,.18);

}

.service-card .service-icon{

width:90px;

height:90px;

background:#F7ECE6;

border-radius:24px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:30px;

}

.service-card .service-icon i{

font-size:38px;

color:#C79A7A;

}

.service-card h3{

font-size:28px;

margin-bottom:18px;

}

.service-card p{

color:#777;

min-height:90px;

}

.service-card a{

font-weight:700;

color:#C79A7A;

}

.service-card a i{

margin-left:8px;

transition:.3s;

}

.service-card:hover a i{

margin-left:15px;

}

@media(max-width:992px){

.service-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.service-grid{

grid-template-columns:1fr;

}

.page-banner h1{

font-size:42px;

}

}

/*====================================

SERVICE DETAILS

====================================*/

.service-hero{

padding:180px 0 120px;

background:linear-gradient(135deg,#FDF8F5,#F4ECE7);

}

.service-hero h1{

font-size:64px;

font-weight:800;

margin:20px 0;

}

.service-hero p{

font-size:20px;

max-width:700px;

color:#666;

}

.service-hero-icon{

width:240px;

height:240px;

margin:auto;

background:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

box-shadow:var(--shadow);

}

.service-hero-icon i{

font-size:90px;

color:var(--rose);

}

.sidebar-card{

background:white;

padding:35px;

border-radius:24px;

box-shadow:var(--shadow);

}

.sidebar-card li{

margin:15px 0;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.feature-card{

background:white;

padding:35px;

text-align:center;

border-radius:24px;

box-shadow:var(--shadow);

}

.feature-card i{

font-size:42px;

color:var(--rose);

margin-bottom:20px;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:60px;

}

.gallery-item{

overflow:hidden;

border-radius:25px;

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.4s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

@media(max-width:991px){

.feature-grid,

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.feature-grid,

.gallery-grid{

grid-template-columns:1fr;

}

.service-hero{

padding-top:140px;

text-align:center;

}

.service-hero h1{

font-size:42px;

}

}


/* ==========================================
HERO SLIDER
========================================== */
.hero-slider{
    margin-top:-140px;
}

.slide-bg{

    height:100vh;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}

.slide-bg::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

}

.hero-content{

    position:relative;

    z-index:5;

    text-align:center;

    color:#fff;

}

.hero-content span{

    display:none;

}

.hero-content h1{

    font-size:72px;

    font-weight:800;

    color:white;

    margin-bottom:25px;

}

.hero-content p{

    display:none;

}

.hero-buttons{

    margin-top:20px;

}

.hero-buttons .btn-light{

    display:none;

}