/* General Reset */

:root {


    --purple: #B89AD9;

    --lavender: #F2EAF8;

    --gold: #D9B45B;

    --cream: #FCFAF5;

    --dark: #333333;


}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


/* Website Background */

body {

    font-family: 'Inter', sans-serif;
    background-color: #FCFAF5;
    color: #333333;

}

h1,
h2,
h3 {

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

}

/* Navigation Bar */

.navbar {

    display:flex;

    align-items:center;

    padding:18px 5%;

    min-height:80px;

    background-color:white;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

}

/* Logo */

/* Brand Logo + Name */

.brand {

    display:flex;
    align-items:center;
    gap:15px;

}

.brand {

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img {

    width:70px;

}


.brand h2 {

    font-family:'Poppins', sans-serif;
    font-size:24px;
    color:#333333;
    font-weight:700;
    white-space:nowrap;

}

/* Navigation Links */

.nav-links {

    display:flex;

    list-style:none;

    gap:35px;

    position:absolute;

    left:50%;

    transform:translateX(-50%);

}



.nav-links a {

    text-decoration: none;

    color: #333333;

    font-size: 16px;

    font-weight: 500;

    position: relative;

}



.nav-links a::after {

    content: "";

    position: absolute;

    width: 0;

    height: 2px;

    background-color: #B89AD9;

    bottom: -6px;

    left: 0;

    transition: 0.3s;

}



.nav-links a:hover::after {

    width: 100%;

}



/* Quote Button */

.quote-btn {

    text-decoration: none;

    background-color: #B89AD9;

    color: white;

    padding: 12px 25px;

    border-radius: 30px;

    transition: 0.3s;

    margin-left:auto;

}


.quote-btn:hover {

    background-color: #D9B45B;

}

/* Hero Section */


.hero {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 80px 8%;

    min-height: 80vh;

    padding-top: 140px;

}



/* Left side of hero */


.hero-content {

    width: 50%;

}



.hero h1 {

    font-size: 55px;

    line-height: 1.2;

    color: #333333;

}



.hero h1 span {

    color: #B89AD9;

}



.hero p {

    margin-top: 25px;

    font-size: 18px;

    line-height: 1.6;

    color: #555555;

}



/* Buttons */


.hero-buttons {

    margin-top: 35px;

}



.primary-btn,
.secondary-btn {

    display: inline-block;

    padding: 14px 30px;

    border-radius: 30px;

    text-decoration: none;

    margin-right: 15px;

}



/* Main button */


.primary-btn {

    background-color: #B89AD9;

    color: white;

}



/* Second button */


.secondary-btn {

    border: 2px solid #B89AD9;

    color: #B89AD9;

}



/* Website preview */


.hero-image {

    width: 40%;

}



/* Website Mockup */


.website-box {

    height: 380px;

    background-color: white;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0,0,0,0.12);

}



/* Browser Header */


.mockup-header {

    height: 45px;

    background-color: #F2EAF8;

    border-bottom: 1px solid #eeeeee;

}



/* Mockup Content */


/* Creative Services Showcase */


.service-showcase {

    padding: 30px;

    text-align: center;

}



.service-showcase h3 {

    font-size: 28px;

    color: #B89AD9;

    margin-bottom: 25px;

}

.service-showcase {

    padding: 30px;

}



.service-showcase h3 {

    text-align: center;

    font-size: 28px;

    color: #B89AD9;

    margin-bottom: 30px;

}



.service-showcase ul {

    list-style: none;

    padding: 0;

}



.service-showcase li {

    font-size: 17px;

    color: #333333;

    margin-bottom: 18px;

    padding-left: 10px;

}



/* Introduction Section */


.intro {

    text-align: center;

    padding: 80px 15%;

    background-color: white;

}



.intro h2 {

    font-size: 38px;

    color: #333333;

    margin-bottom: 20px;

}



.intro p {

    font-size: 18px;

    line-height: 1.7;

    color: #555555;

}

/* Services Section */


.services {

    padding: 80px 8%;

    background-color: #F2EAF8;

    text-align: center;

}



.services h2 {

    font-size: 38px;

    color: #333333;

    margin-bottom: 50px;

}



/* Service Card Container */


.service-container {

    display: flex;

    justify-content: space-between;

    gap: 30px;

}



/* Individual Cards */


.service-card {

    background-color: white;

    padding: 40px 30px;

    border-radius: 25px;

    width: 33%;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);

    transition: 0.3s;

}



.service-card:hover {

    transform: translateY(-10px);

}



/* Card Text */


.service-card h3 {

    color: #B89AD9;

    font-size: 24px;

    margin-bottom: 20px;

}



.service-card p {

    color: #555555;

    line-height: 1.6;

}

/* Portfolio Section */


.portfolio {

    padding: 80px 8%;

    background-color: white;

    text-align: center;

}



.portfolio h2 {

    font-size: 38px;

    color: #333333;

    margin-bottom: 50px;

}



/* Portfolio Cards Container */


.portfolio-container {

    display: flex;

    justify-content: space-between;

    gap: 30px;

}



/* Project Cards */


.project-card {

    width: 33%;

    background-color: #FCFAF5;

    padding: 25px;

    border-radius: 25px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);

}



/* Project Image Placeholder */


.project-image {

    height: 220px;

    background-color: #F2EAF8;

    border-radius: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #B89AD9;

    font-size: 22px;

    font-weight: bold;

    margin-bottom: 25px;

}



/* Project Titles */


.project-card h3 {

    font-size: 22px;

    color: #333333;

    margin-bottom: 15px;

}



.project-card p {

    color: #555555;

    line-height: 1.6;

    margin-bottom: 25px;

}



/* Project Button */


.project-card a {

    text-decoration: none;

    color: white;

    background-color: #B89AD9;

    padding: 12px 25px;

    border-radius: 30px;

    display: inline-block;

}



.project-card a:hover {

    background-color: #D9B45B;

}

/* Process Section */


.process {

    padding: 80px 8%;

    background-color: #F2EAF8;

    text-align: center;

}



.process h2 {

    font-size: 38px;

    color: #333333;

    margin-bottom: 50px;

}



/* Process Layout */


.process-container {

    display: flex;

    justify-content: space-between;

    gap: 30px;

}



/* Process Cards */


.process-step {

    background-color: white;

    padding: 35px 25px;

    border-radius: 25px;

    width: 25%;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);

}



/* Number */


.process-step span {

    display: block;

    font-size: 35px;

    font-weight: bold;

    color: #B89AD9;

    margin-bottom: 20px;

}



.process-step h3 {

    font-size: 22px;

    margin-bottom: 15px;

    color: #333333;

}



.process-step p {

    color: #555555;

    line-height: 1.6;

}

/* Call To Action Section */


.cta {

    padding: 90px 10%;

    background-color: #B89AD9;

    text-align: center;

    color: white;

}



.cta h2 {

    font-size: 42px;

    margin-bottom: 20px;

}



.cta p {

    font-size: 18px;

    margin-bottom: 35px;

}



.cta a {

    text-decoration: none;

    background-color: white;

    color: #B89AD9;

    padding: 14px 35px;

    border-radius: 30px;

    font-weight: bold;

}



.cta a:hover {

    background-color: #D9B45B;

    color: white;

}

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

.footer{
    background:
        radial-gradient(circle at top left, rgba(184,154,217,.10), transparent 35%),
        radial-gradient(circle at top right, rgba(217,180,91,.05), transparent 40%),
        linear-gradient(180deg,#1b1b1d 0%,#141416 100%);
    color:#fff;
    padding:70px 8% 0;
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size:60px 60px;
    opacity:.15;
    pointer-events:none;
}

.footer-container{
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:50px;
    position:relative;
    z-index:2;
}

.footer-about{
    flex:1.6;
}

.footer-about img{
    width:180px;
    margin-bottom:25px;
}

.footer-about p{
    color:#cfcfcf;
    line-height:1.8;
    max-width:420px;
}

.footer-divider{
    width:1px;
    background:rgba(255,255,255,.15);
    align-self:stretch;
}

.footer-social,
.footer-contact{
    flex:1;
}

.footer-social h3,
.footer-contact h3{
    color:#B89AD9;
    margin-bottom:25px;
    font-size:24px;
}

.footer-social a,
.footer-contact a,
.footer-contact p{
    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;
    color:#ddd;
    margin-bottom:18px;
    transition:.3s;
}

.footer-social a:hover,
.footer-contact a:hover{
    color:#D9B45B;
    transform:translateX(5px);
}

.footer-social i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#2d2d31;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#B89AD9;
    transition:0.3s ease;
}


/* Facebook Hover */

.footer-social a:hover .fa-facebook-f{
    background:#1877F2;
    color:white;
}


/* Instagram Hover */

.footer-social a:hover .fa-instagram{
    background:#E1306C;
    color:white;
}


/* WhatsApp Hover */

.footer-social a:hover .fa-whatsapp{
    background:#25D366;
    color:white;
}


/* Icon movement */

.footer-social a:hover i{
    transform:translateY(-5px);
}

.footer-contact i{
    color:#B89AD9;
    width:22px;
    text-align:center;
}

.footer-bottom{
    position:relative;
    z-index:2;
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
    padding:25px 0;
    color:#9c9c9c;
    font-size:15px;
}

/* Mobile */

@media (max-width:900px){

    .footer-container{
        flex-direction:column;
        gap:35px;
    }

    .footer-divider{
        display:none;
    }

    .footer-about,
    .footer-social,
    .footer-contact{
        width:100%;
    }

}

/* Smooth Scrolling */


html {

    scroll-behavior: smooth;

}



/* Button Animations */


.primary-btn,
.secondary-btn,
.quote-btn,
.cta a {

    transition: 0.3s ease;

}



.primary-btn:hover {

    background-color: #D9B45B;

    transform: translateY(-3px);

}



.secondary-btn:hover {

    background-color: #B89AD9;

    color: white;

    transform: translateY(-3px);

}



/* Card Hover Effects */


.service-card,
.project-card,
.process-step {

    transition: 0.3s ease;

}



.service-card:hover,
.project-card:hover,
.process-step:hover {

    transform: translateY(-8px);

}



/* Section Fade Animation */


@keyframes fadeUp {


    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }


}



.hero-content,
.hero-image,
.intro,
.services,
.portfolio,
.process,
.cta {

    animation: fadeUp 1s ease;

}

/* Mobile Responsive Design */


@media (max-width: 900px) {


    /* Navbar */

    .navbar {

        flex-direction: column;

        position: relative;

        gap: 20px;

    }


    .nav-links {

        position: static;

        transform: none;

        flex-direction: column;

        text-align: center;

        gap: 15px;

    }


    .quote-btn {

        margin-left:0;

    }




    /* Hero */


    .hero {

        flex-direction: column;

        text-align: center;

        padding: 60px 5%;

    }



    .hero-content {

        width: 100%;

    }



    .hero h1 {

        font-size: 40px;

    }



    .hero-image {

        width: 100%;

        margin-top: 40px;

    }



    /* Services */


    .service-container {

        flex-direction: column;

    }



    .service-card {

        width: 100%;

    }



    /* Portfolio */


    .portfolio-container {

        flex-direction: column;

    }



    .project-card {

        width: 100%;

    }



    /* Process */


    .process-container {

        flex-direction: column;

    }



    .process-step {

        width: 100%;

    }



    /* Footer */


    .footer-container{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:50px;

    position:relative;

    z-index:2;

}



    .footer-logo {

        width: 100%;

    }


}

/* Contact Section */


.contact {

    padding: 90px 8%;

    background-color: #FCFAF5;

    text-align: center;

}



.contact h2 {

    font-size: 40px;

    color: #333333;

    margin-bottom: 20px;

}



.contact p {

    font-size: 18px;

    color: #555555;

    margin-bottom: 40px;

}



/* Contact Form */


.contact-form {

    max-width: 700px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.contact-form input,
.contact-form textarea {

    width: 100%;

    padding: 15px 20px;

    border: 1px solid #dddddd;

    border-radius: 15px;

    font-size: 16px;

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

}



.contact-form textarea {

    height: 150px;

    resize: none;

}



/* Submit Button */


.contact-form button {

    background-color: #B89AD9;

    color: white;

    border: none;

    padding: 15px 35px;

    border-radius: 30px;

    font-size: 16px;

    cursor: pointer;

    transition: 0.3s ease;

}



.contact-form button:hover {

    background-color: #D9B45B;

}

/* WhatsApp Button */


.whatsapp-btn {

    position: fixed;

    bottom: 30px;

    right: 30px;

    background-color: #25D366;

    color: white;

    text-decoration: none;

    padding: 15px 25px;

    border-radius: 50px;

    font-weight: bold;

    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    transition: 0.3s ease;

}



.whatsapp-btn:hover {

    transform: translateY(-5px);

}

/* Hero Background Decoration */


.hero {

    position: relative;

    overflow: hidden;

}



.hero::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    background-color: #F2EAF8;

    border-radius: 50%;

    top: -150px;

    right: -150px;

    z-index: -1;

}



.hero::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    background-color: #FCFAF5;

    border-radius: 50%;

    bottom: -100px;

    left: -100px;

    z-index: -1;

}


/* Section Background Details */


.services,
.process {

    position: relative;

    overflow: hidden;

}



.services::before,
.process::before {

    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

    background-color: rgba(184,154,217,0.15);

    border-radius: 50%;

    right: -80px;

    top: 40px;

}

/* Fix scrolling position under fixed navbar */


section {

    scroll-margin-top: 120px;

}

/* Social Media Tooltips */

.footer-social a{
    position:relative;
}


.footer-social a::after{
    content:attr(data-tooltip);
    position:absolute;
    left:55px;
    top:50%;
    transform:translateY(-50%);
    background:#222;
    color:white;
    padding:8px 14px;
    border-radius:8px;
    font-size:13px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:0.3s ease;
}


.footer-social a:hover::after{
    opacity:1;
    left:65px;
}

.contact-form select {

    width:100%;

    padding:15px 20px;

    border:1px solid #dddddd;

    border-radius:15px;

    font-size:16px;

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

    background:white;

    color:#555;

}