/*======================================================
KWAGGA DRUKHUIS
Boutique Creative Studio Theme
======================================================*/


/*======================================================
RESET
======================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#FCFAF8;

color:#505050;

line-height:1.8;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

transition:.35s ease;

}

ul{

list-style:none;

}



/*======================================================
COLOURS
======================================================*/

:root{

--primary:#E88F84;

--primary-dark:#CC7067;

--peach:#F6D0C3;

--blush:#FDF1EF;

--sage:#9FAF99;

--sage-light:#DCE8E0;

--blue:#C7DDEA;

--cream:#FCFAF8;

--white:#FFFFFF;

--dark:#434343;

--text:#6B6B6B;

--border:#ECE7E0;

--shadow:
0 20px 55px rgba(0,0,0,.07);

--radius:26px;

}



/*======================================================
BODY BACKGROUND
======================================================*/

body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

url(images/watercolour-texture.png);

background-size:cover;

opacity:.06;

pointer-events:none;

z-index:-5;

}

body::after{

content:"";

position:fixed;

bottom:-250px;

right:-180px;

width:900px;

height:900px;

background:

url(images/floral-watercolour.png);

background-size:contain;

background-repeat:no-repeat;

opacity:.12;

pointer-events:none;

z-index:-4;

}




/*======================================================
TYPOGRAPHY
======================================================*/

h1,h2,h3,h4{

font-family:'Cormorant Garamond',serif;

font-weight:600;

color:var(--dark);

}

h1{

font-size:82px;

line-height:1;

margin-bottom:25px;

}

h2{

font-size:56px;

margin-bottom:20px;

}

h3{

font-size:34px;

margin-bottom:15px;

}

p{

font-size:18px;

color:var(--text);

}




/*======================================================
CONTAINER
======================================================*/

.container{

width:min(92%,1320px);

margin:auto;

}

.section{

padding:140px 0;

}

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 90px;

}

.section-heading span{

display:inline-block;

padding:10px 24px;

background:var(--blush);

border-radius:40px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--primary-dark);

margin-bottom:22px;

}

.section-heading p{

font-size:19px;

}




/*======================================================
BUTTONS
======================================================*/

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:60px;

background:

linear-gradient(

135deg,

#E88F84,

#D87469

);

color:white;

font-weight:700;

box-shadow:var(--shadow);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:

0 28px 60px rgba(216,116,105,.25);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:60px;

border:2px solid var(--primary);

color:var(--primary-dark);

font-weight:600;

background:white;

margin-left:18px;

transition:.35s;

}

.btn-secondary:hover{

background:var(--primary);

color:white;

}




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

header{

position:fixed;

top:20px;

left:0;

width:100%;

z-index:999;

transition:.35s;

}

.navbar{

background:

rgba(255,255,255,.82);

backdrop-filter:blur(18px);

border-radius:80px;

box-shadow:

0 10px 35px rgba(0,0,0,.06);

padding:14px 0;

transition:.35s;

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:82px;

transition:.35s;

}

.menu{

display:flex;

align-items:center;

gap:38px;

}

.menu a{

font-weight:600;

font-size:15px;

color:#555;

position:relative;

}

.menu a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

height:2px;

width:0;

background:var(--primary);

transition:.35s;

}

.menu a:hover::after{

width:100%;

}

.btn-nav{

padding:15px 30px;

border-radius:40px;

background:var(--primary);

color:white !important;

}

.mobile-toggle{

display:none;

font-size:30px;

cursor:pointer;

}




/*======================================================
HERO
======================================================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:

linear-gradient(

rgba(252,250,248,.95),

rgba(252,250,248,.95)

),

url(images/watercolour-bg.jpg);

background-size:cover;

background-position:center;

}

.hero::before{

content:"";

position:absolute;

top:-180px;

right:-120px;

width:650px;

height:650px;

background:

url(images/floral-top-right.png);

background-size:contain;

background-repeat:no-repeat;

opacity:.28;

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

left:-120px;

bottom:-120px;

width:700px;

height:700px;

background:

url(images/floral-bottom-left.png);

background-size:contain;

background-repeat:no-repeat;

opacity:.22;

pointer-events:none;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

}

.hero-subtitle{

display:inline-block;

padding:10px 24px;

background:var(--blush);

border-radius:40px;

color:var(--primary-dark);

font-weight:700;

letter-spacing:2px;

margin-bottom:30px;

text-transform:uppercase;

font-size:13px;

}

.hero p{

margin:35px 0;

font-size:21px;

max-width:620px;

}

.hero-buttons{

display:flex;

align-items:center;

margin-top:35px;

margin-bottom:55px;

}

.hero-features{

display:flex;

gap:40px;

flex-wrap:wrap;

}

.hero-features div{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}

.hero-features i{

font-size:22px;

color:var(--primary);

}

.hero-image{

position:relative;

}

.hero-image img{

width:100%;

filter:drop-shadow(0 35px 60px rgba(0,0,0,.12));

animation:heroFloat 7s ease-in-out infinite;

}

@keyframes heroFloat{

0%{transform:translateY(0);}
50%{transform:translateY(-18px);}
100%{transform:translateY(0);}

}

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

font-size:26px;

color:var(--primary);

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translate(-50%,0);

}

40%{

transform:translate(-50%,-12px);

}

60%{

transform:translate(-50%,-6px);

}

}
/*======================================================
ABOUT
Boutique Studio Style
======================================================*/

.about{

position:relative;

background:linear-gradient(
180deg,
#FCFAF8 0%,
#FFFDFC 100%
);

overflow:hidden;

}

.about::before{

content:"";

position:absolute;

top:80px;

left:-140px;

width:420px;

height:420px;

background:var(--sage-light);

border-radius:50%;

opacity:.18;

filter:blur(60px);

}

.about::after{

content:"";

position:absolute;

bottom:-120px;

right:-120px;

width:450px;

height:450px;

background:var(--blush);

border-radius:50%;

opacity:.45;

filter:blur(70px);

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

border-radius:36px;

box-shadow:

0 30px 70px rgba(0,0,0,.08);

transition:.45s;

}

.about-image:hover img{

transform:scale(1.02);

}

.about-content h3{

font-size:46px;

margin-bottom:30px;

}

.about-content p{

margin-bottom:25px;

}

.about-features{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin:50px 0;

}

.feature{

background:white;

padding:25px;

border-radius:22px;

box-shadow:

0 15px 40px rgba(0,0,0,.05);

transition:.35s;

border:1px solid rgba(232,143,132,.10);

}

.feature:hover{

transform:translateY(-8px);

box-shadow:

0 28px 55px rgba(0,0,0,.08);

}

.feature i{

font-size:26px;

color:var(--primary);

margin-bottom:18px;

}

.feature h4{

font-size:24px;

margin-bottom:10px;

}




/*======================================================
SERVICES
======================================================*/

.services{

background:#fff;

position:relative;

overflow:hidden;

}

.services::before{

content:"";

position:absolute;

right:-220px;

top:120px;

width:700px;

height:700px;

background:var(--sage-light);

opacity:.12;

border-radius:50%;

filter:blur(90px);

}

.services-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));

gap:35px;

position:relative;

z-index:2;

}

.service-card{

background:#fff;

padding:45px;

border-radius:32px;

text-align:left;

transition:.4s;

box-shadow:

0 20px 45px rgba(0,0,0,.05);

border:1px solid rgba(232,143,132,.08);

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:

0 35px 70px rgba(0,0,0,.08);

}

.service-icon{

width:82px;

height:82px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

background:

linear-gradient(

135deg,

#FFF5F3,

#FFFFFF

);

margin-bottom:28px;

}

.service-icon i{

font-size:34px;

color:var(--primary);

}

.service-card h3{

font-size:30px;

margin-bottom:18px;

}

.service-card p{

font-size:16px;

margin-bottom:28px;

}

.service-card::after{

content:"Read More →";

display:inline-block;

color:var(--primary-dark);

font-weight:700;

font-size:14px;

letter-spacing:1px;

text-transform:uppercase;

transition:.3s;

}

.service-card:hover::after{

padding-left:10px;

}




/*======================================================
WHY US
======================================================*/

.why-us{

background:

linear-gradient(

180deg,

#FFFDFC,

#FCFAF8

);

}

.why-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.why-card{

background:white;

padding:50px 35px;

border-radius:28px;

text-align:center;

box-shadow:

0 18px 40px rgba(0,0,0,.05);

transition:.35s;

}

.why-card:hover{

transform:translateY(-10px);

}

.why-card i{

font-size:54px;

margin-bottom:25px;

color:var(--primary);

}

.why-card h3{

margin-bottom:15px;

font-size:30px;

}




/*======================================================
PORTFOLIO
======================================================*/

.portfolio{

background:#ffffff;

}

.portfolio-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(360px,1fr));

gap:35px;

}

.portfolio-item{

position:relative;

overflow:hidden;

border-radius:34px;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

cursor:pointer;

}

.portfolio-item img{

width:100%;

display:block;

transition:.8s;

}

.portfolio-item:hover img{

transform:scale(1.08);

}

.portfolio-overlay{

position:absolute;

inset:0;

display:flex;

align-items:flex-end;

padding:40px;

background:

linear-gradient(

transparent,

rgba(80,80,80,.75)

);

opacity:0;

transition:.4s;

}

.portfolio-item:hover .portfolio-overlay{

opacity:1;

}

.portfolio-overlay h3{

color:white;

font-size:34px;

transform:translateY(20px);

transition:.35s;

}

.portfolio-item:hover .portfolio-overlay h3{

transform:translateY(0);

}




/*======================================================
SOFT HOVER GLOW
======================================================*/

.service-card:hover,
.feature:hover,
.why-card:hover{

border-color:rgba(232,143,132,.20);

box-shadow:

0 35px 70px rgba(232,143,132,.12);

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

.testimonials{

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

position:relative;

overflow:hidden;

}

.testimonials::before{

content:"";

position:absolute;

top:-180px;

right:-120px;

width:650px;

height:650px;

background:var(--blush);

border-radius:50%;

opacity:.45;

filter:blur(90px);

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:40px;

position:relative;

z-index:2;

}

.testimonial-card{

background:white;

padding:50px;

border-radius:34px;

box-shadow:

0 20px 55px rgba(0,0,0,.06);

transition:.35s;

position:relative;

overflow:hidden;

}

.testimonial-card:hover{

transform:translateY(-12px);

box-shadow:

0 35px 70px rgba(232,143,132,.12);

}

.testimonial-card::before{

content:"❝";

position:absolute;

right:35px;

top:25px;

font-size:120px;

font-family:serif;

color:rgba(232,143,132,.08);

}

.stars{

display:flex;

gap:6px;

margin-bottom:28px;

}

.stars i{

color:#E6B86E;

font-size:18px;

}

.testimonial-card p{

font-style:italic;

margin-bottom:30px;

font-size:17px;

}

.testimonial-card h4{

color:var(--primary-dark);

font-size:24px;

}




/*======================================================
QUOTE FORM
======================================================*/

.quote{

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

}

.quote-form{

background:white;

padding:70px;

border-radius:36px;

box-shadow:

0 25px 70px rgba(0,0,0,.07);

border:1px solid rgba(232,143,132,.08);

}

.form-grid{

display:grid;

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

gap:30px;

margin-bottom:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

font-weight:600;

margin-bottom:10px;

color:#555;

}

.form-group input,
.form-group textarea,
.form-group select{

padding:18px 22px;

border-radius:18px;

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

background:#FFFDFC;

font-size:15px;

font-family:inherit;

transition:.3s;

}

.form-group textarea{

min-height:190px;

resize:vertical;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

outline:none;

border-color:var(--primary);

box-shadow:

0 0 0 5px rgba(232,143,132,.15);

background:white;

}




/*======================================================
CONTACT
======================================================*/

.contact{

background:white;

position:relative;

overflow:hidden;

}

.contact::before{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:650px;

height:650px;

background:var(--sage-light);

border-radius:50%;

opacity:.18;

filter:blur(90px);

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

position:relative;

z-index:2;

}

.contact-info h2{

margin-bottom:20px;

}

.contact-info>p{

margin-bottom:40px;

}

.contact-item{

display:flex;

gap:22px;

margin-bottom:35px;

align-items:flex-start;

}

.contact-item i{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(
135deg,
#E88F84,
#D87469);

color:white;

font-size:24px;

flex-shrink:0;

}

.contact-item h4{

margin-bottom:8px;

font-size:25px;

}

.contact-image img{

border-radius:36px;

box-shadow:

0 30px 70px rgba(0,0,0,.08);

}

.social-icons{

display:flex;

gap:18px;

margin-top:40px;

}

.social-icons a{

width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#FFF4F2;

color:var(--primary);

transition:.35s;

box-shadow:

0 12px 25px rgba(0,0,0,.06);

}

.social-icons a:hover{

background:var(--primary);

color:white;

transform:translateY(-6px);

}




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

footer{

background:#4F5652;

color:#F4F4F4;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

margin-bottom:60px;

}

.footer-logo{

height:90px;

margin-bottom:25px;

}

footer h3{

color:white;

margin-bottom:18px;

font-size:30px;

}

footer p{

color:#E3E3E3;

}

footer ul li{

margin-bottom:12px;

}

footer ul a{

color:#E5E5E5;

transition:.3s;

}

footer ul a:hover{

color:#FFD9CF;

padding-left:6px;

}

.footer-bottom{

margin-top:30px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.10);

text-align:center;

}




/*======================================================
WHATSAPP
======================================================*/

.whatsapp-float{

position:fixed;

right:28px;

bottom:28px;

width:68px;

height:68px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#25D366;

color:white;

font-size:34px;

box-shadow:

0 20px 40px rgba(0,0,0,.22);

z-index:999;

transition:.35s;

}

.whatsapp-float:hover{

transform:translateY(-8px);

}




/*======================================================
BACK TO TOP
======================================================*/

.back-to-top{

position:fixed;

right:28px;

bottom:112px;

width:58px;

height:58px;

display:none;

align-items:center;

justify-content:center;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

cursor:pointer;

box-shadow:

0 15px 35px rgba(0,0,0,.15);

transition:.35s;

}

.back-to-top:hover{

background:var(--primary-dark);

transform:translateY(-6px);

}




/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:1100px){

.hero-grid,
.about-grid,
.contact-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero{

padding-top:180px;

}

.hero-image{

order:-1;

max-width:650px;

margin:auto;

}

.footer-grid{

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

}

}

@media(max-width:768px){

h1{

font-size:54px;

}

h2{

font-size:42px;

}

.section{

padding:90px 0;

}

.menu{

display:none;

}

.mobile-toggle{

display:block;

}

.form-grid{

grid-template-columns:1fr;

}

.quote-form{

padding:35px;

}

.about-features{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.btn-secondary{

margin-left:0;

}

}

@media(max-width:500px){

.container{

width:94%;

}

.hero{

padding-top:160px;

}

.hero p{

font-size:17px;

}

.service-card,
.testimonial-card,
.quote-form{

padding:30px;

}

}
/*======================================================
BRAND ENHANCEMENTS
======================================================*/

/* Decorative brush stroke behind headings */

.section-heading h2{
    position:relative;
    display:inline-block;
    z-index:2;
}

.section-heading h2::before{
    content:"";
    position:absolute;
    left:-20px;
    right:-20px;
    bottom:8px;
    height:22px;
    background:linear-gradient(
        90deg,
        rgba(232,143,132,.15),
        rgba(159,175,153,.15)
    );
    border-radius:30px;
    z-index:-1;
}


/* Elegant section dividers */

.section{
    position:relative;
}

.section:not(:last-child)::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-1px;
    transform:translateX(-50%);
    width:220px;
    height:40px;
    background:url(images/divider.png) center no-repeat;
    background-size:contain;
    opacity:.35;
}


/* Glass cards */

.service-card,
.feature,
.why-card,
.testimonial-card{

    backdrop-filter:blur(8px);

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

}


/* Soft pastel shadows */

.service-card,
.feature,
.why-card,
.portfolio-item,
.testimonial-card{

    box-shadow:

    0 12px 30px rgba(232,143,132,.05),

    0 18px 45px rgba(159,175,153,.05);

}


/* Portfolio hover */

.portfolio-item::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

transparent,

rgba(232,143,132,.08)

);

opacity:0;

transition:.35s;

z-index:1;

}

.portfolio-item:hover::before{

opacity:1;

}


/* Rounded images */

.about-image img,
.contact-image img,
.portfolio-item img{

border-radius:32px;

}


/* Soft transitions */

img,
button,
a,
.service-card,
.feature,
.why-card,
.portfolio-item{

transition:all .35s ease;

}


/* Selection colour */

::selection{

background:#F7C9BF;

color:#444;

}


/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#FCFAF8;

}

::-webkit-scrollbar-thumb{

background:#D8B6A7;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#C88E80;

}