/* ==========================
   Global Styles
========================== */

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

body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#111;
}

/* ==========================
   Hero Section
========================== */

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:80px 20px;
}

.hero-content{
    max-width:900px;
    text-align:center;
}

.hero-content h1{
    font-size:64px;
    line-height:1.15;
    font-weight:500;
    margin-bottom:35px;
}

.hero-content h1 span{
    color:#e68613;
    font-style:italic;
    font-weight:300;
}

.hero-content p{
    max-width:720px;
    margin:0 auto 60px;
    color:#8a8a8a;
    font-size:24px;
    line-height:1.6;
}

/* ==========================
   Buttons
========================== */

.hero-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:15px;

    background:#e68613;
    color:#fff;

    padding:22px 45px;
    border-radius:60px;

    text-decoration:none;
    font-size:22px;
    font-weight:600;

    transition:.3s ease;
}

.btn-primary:hover{
    background:#cf780f;
    transform:translateY(-4px);
}

.btn-secondary{
    color:#e68613;
    text-decoration:underline;
    font-size:22px;
    font-weight:600;
    transition:.3s ease;
}

.btn-secondary:hover{
    color:#c86d06;
}

/* ==========================
   Responsive Design
========================== */

@media (max-width:992px){

    .hero-content h1{
        font-size:48px;
    }

    .hero-content p{
        font-size:20px;
    }

}

@media (max-width:768px){

    .hero{
        min-height:auto;
        padding:70px 20px;
    }

    .hero-content h1{
        font-size:36px;
    }

    .hero-content p{
        font-size:18px;
        margin-bottom:40px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:20px;
    }

    .btn-primary{
        width:100%;
        justify-content:center;
        font-size:18px;
    }

    .btn-secondary{
        font-size:18px;
    }

}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    margin:0;
}

/* Header */

.header{
    width:100%;
    position:fixed;
    top:20px;
    left:0;
    z-index:999;
}

.navbar{

    max-width:1100px;
    margin:auto;

    background:#f8f6f3;

    border:1px solid #ddd;

    border-radius:70px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 35px;

    backdrop-filter:blur(15px);
}

.logo img{
    height:55px;
    display:block;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:40px;
}

.nav-links a{

    color:#222;
    text-decoration:none;
    font-size:18px;
    font-weight:500;
    transition:.3s;
}

.nav-links a:hover,
.nav-links .active{
    color:#e88918;
}

.whatsapp-btn{

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

    color:#e88918;

    text-decoration:none;

    font-size:18px;
    font-weight:600;
}

.whatsapp-btn i{
    font-size:26px;
}

.menu-btn{
    display:none;
    font-size:26px;
    cursor:pointer;
}

@media(max-width:992px){

.nav-links{
    display:none;
}

.whatsapp-btn{
    display:none;
}

.menu-btn{
    display:block;
}

.navbar{
    padding:18px 25px;
}

}


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

body{
    background:#fff;
    font-family:Poppins,sans-serif;
}

.gallery-slider{

    width:100%;
    padding:80px 0;

}

.swiper{

    width:100%;

}

.swiper-slide{

    width:70%;
    height:600px;

    border-radius:20px;
    overflow:hidden;

    transition:.4s;

}

.swiper-slide img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.swiper-slide:not(.swiper-slide-active){

    opacity:.5;
    transform:scale(.9);

}

.swiper-slide-active{

    transform:scale(1);

}

@media(max-width:768px){

.swiper-slide{

    height:350px;

}

}



/* =========================================================
   WHO WE ARE SECTION
========================================================= */

.who-we-are {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 80px 60px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 100px;

    align-items: start;

    background: #ffffff;

}


/* LEFT SIDE */

.who-left {

    padding-top: 5px;

}


.section-label {

    display: block;

    font-size: 18px;

    font-weight: 400;

    font-style: italic;

    color: #111;

    margin-bottom: 38px;

}


.who-left h2 {

    margin: 0;

    font-size: 42px;

    line-height: 1.25;

    font-weight: 400;

    letter-spacing: -1px;

    color: #050505;

}


.who-left h2 em {

    color: #e8780b;

    font-style: italic;

    font-weight: 400;

}


/* RIGHT SIDE */

.who-right {

    padding-top: 58px;

    max-width: 520px;

}


.who-right p {

    margin: 0 0 28px;

    font-size: 19px;

    line-height: 1.25;

    font-weight: 400;

    color: #111;

}


.connect-link {

    display: inline-block;

    color: #e8780b;

    font-size: 18px;

    font-weight: 600;

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    transition: all 0.3s ease;

}


.connect-link:hover {

    color: #111;

}


/* =========================================================
   STATISTICS SECTION
========================================================= */

.stats-section {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 60px 70px;

    display: grid;

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

    gap: 30px;

}


/* STAT CARD */

.stat-card {

    min-height: 345px;

    padding: 42px 40px;

    border-radius: 10px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition:

        background-color 0.4s ease,

        transform 0.4s ease,

        box-shadow 0.4s ease;

    cursor: pointer;

}


/* NUMBER */

.stat-number {

    font-size: 42px;

    line-height: 1;

    font-weight: 600;

    font-style: italic;

    color: #e8780b;

    transition: color 0.4s ease;

}


/* CONTENT */

.stat-content {

    max-width: 320px;

}


.stat-content h3 {

    margin: 0 0 22px;

    font-size: 20px;

    line-height: 1.15;

    font-weight: 600;

    color: #050505;

}


.stat-content p {

    margin: 0;

    font-size: 15px;

    line-height: 1.3;

    color: #111;

}


/* =========================================================
   HOVER EFFECT
========================================================= */

.stat-card:hover {

    background: #ffe7d0;

    transform: translateY(-4px);

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

}


.stat-card:hover .stat-number {

    color: #e8780b;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .who-we-are {

        padding: 65px 35px;

        column-gap: 50px;

    }


    .who-left h2 {

        font-size: 36px;

    }


    .who-right p {

        font-size: 17px;

    }


    .stats-section {

        padding: 0 35px 60px;

        gap: 20px;

    }


    .stat-card {

        min-height: 310px;

        padding: 35px 28px;

    }


    .stat-number {

        font-size: 38px;

    }


    .stat-content h3 {

        font-size: 18px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .who-we-are {

        display: block;

        padding: 55px 25px;

    }


    .section-label {

        font-size: 16px;

        margin-bottom: 25px;

    }


    .who-left h2 {

        font-size: 34px;

        line-height: 1.2;

    }


    .who-right {

        padding-top: 35px;

        max-width: 100%;

    }


    .who-right p {

        font-size: 17px;

        line-height: 1.35;

    }


    .connect-link {

        font-size: 16px;

    }


    /* STATISTICS */

    .stats-section {

        display: grid;

        grid-template-columns: 1fr;

        padding: 0 25px 50px;

        gap: 15px;

    }


    .stat-card {

        min-height: 270px;

        padding: 32px 30px;

    }


    .stat-number {

        font-size: 38px;

    }


    .stat-content {

        max-width: 100%;

    }


    .stat-content h3 {

        font-size: 18px;

        margin-bottom: 15px;

    }


    .stat-content p {

        font-size: 14px;

    }

}


/* =========================================================
   RENOVATION SERVICES SECTION
========================================================= */

.renovation-services {

    width: 100%;

    background: #ffe8d0;

    padding: 55px 6% 70px;

}


/* =========================================================
   HEADING
========================================================= */

.services-heading {

    text-align: center;

    margin-bottom: 42px;

}


.services-heading h2 {

    margin: 0;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 400;

    color: #080808;

    letter-spacing: -1px;

}


.services-heading h2 span {

    display: block;

    margin-top: 4px;

    color: #e8780b;

    font-style: italic;

    font-weight: 400;

}


/* =========================================================
   GRID
========================================================= */

.renovation-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    column-gap: 135px;

    row-gap: 40px;

}


/* =========================================================
   CARD
========================================================= */

.renovation-card {

    background: #ffffff;

    border-radius: 12px;

    padding: 20px;

    min-height: 125px;

    display: flex;

    align-items: center;

    gap: 20px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


/* =========================================================
   CARD HOVER
========================================================= */

.renovation-card:hover {

    transform: translateY(-5px);

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

}


/* =========================================================
   IMAGE
========================================================= */

.renovation-image {

    flex: 0 0 168px;

    width: 168px;

    height: 124px;

    overflow: hidden;

    border-radius: 9px;

}


.renovation-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;

}


.renovation-card:hover .renovation-image img {

    transform: scale(1.06);

}


/* =========================================================
   CONTENT
========================================================= */

.renovation-content {

    flex: 1;

}


.renovation-content h3 {

    margin: 0 0 16px;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    color: #080808;

}


.renovation-content p {

    margin: 0 0 17px;

    font-size: 14px;

    line-height: 1.25;

    color: #111;

}


.renovation-content a {

    display: inline-block;

    color: #e8780b;

    font-size: 14px;

    font-weight: 600;

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    transition: color 0.3s ease;

}


.renovation-content a:hover {

    color: #111;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .renovation-grid {

        column-gap: 30px;

    }

    .renovation-image {

        flex: 0 0 140px;

        width: 140px;

        height: 115px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .renovation-services {

        padding: 45px 20px 55px;

    }


    .services-heading {

        margin-bottom: 30px;

    }


    .services-heading h2 {

        font-size: 30px;

    }


    .renovation-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .renovation-card {

        padding: 15px;

        gap: 15px;

        min-height: auto;

        align-items: flex-start;

    }


    .renovation-image {

        flex: 0 0 115px;

        width: 115px;

        height: 100px;

    }


    .renovation-content h3 {

        font-size: 14px;

        margin-bottom: 10px;

    }


    .renovation-content p {

        font-size: 13px;

        margin-bottom: 12px;

    }


    .renovation-content a {

        font-size: 13px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

    .services-heading h2 {

        font-size: 27px;

    }


    .renovation-card {

        display: block;

    }


    .renovation-image {

        width: 100%;

        height: 180px;

        margin-bottom: 15px;

    }

}

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

.renovation-whatsapp {

    display: flex;

    justify-content: center;

    margin-top: 55px;

}


.renovation-whatsapp a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 205px;

    height: 58px;

    padding: 0 28px;

    border-radius: 50px;

    background: #e8780b;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.3px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.renovation-whatsapp a i {

    font-size: 25px;

}


.renovation-whatsapp a:hover {

    background: #d96d06;

    transform: translateY(-3px);

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

}


/* =========================================================
   ORANGE FEATURE BAR
========================================================= */

.renovation-features {

    width: 100%;

    max-width: 1005px;

    min-height: 110px;

    margin: 36px auto -114px;

    padding: 20px 55px;

    border-radius: 70px;

    background: #e8780b;

    display: grid;

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

    align-items: center;

    position: relative;

    z-index: 5;

}


/* =========================================================
   INDIVIDUAL FEATURE
========================================================= */

.renovation-feature {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 7px;

    color: #ffffff;

}


/* =========================================================
   FEATURE ICON
========================================================= */

.feature-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 28px;

}


.feature-icon i {

    font-size: 22px;

    color: #ffffff;

}


/* =========================================================
   FEATURE TEXT
========================================================= */

.feature-text {

    font-size: 11px;

    line-height: 1.1;

    font-weight: 700;

    color: #ffffff;

    white-space: nowrap;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .renovation-features {

        max-width: 90%;

        padding: 20px 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .renovation-whatsapp {

        margin-top: 40px;

    }


    .renovation-whatsapp a {

        min-width: 190px;

        height: 54px;

        font-size: 14px;

    }


    .renovation-whatsapp a i {

        font-size: 23px;

    }


    .renovation-features {

        max-width: 100%;

        margin-top: 30px;

        margin-bottom: -80px;

        min-height: auto;

        padding: 25px 15px;

        border-radius: 35px;

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

        row-gap: 25px;

    }


    .feature-icon i {

        font-size: 20px;

    }


    .feature-text {

        font-size: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .renovation-features {

        padding: 22px 10px;

        row-gap: 22px;

    }


    .feature-text {

        font-size: 9px;

    }

}


/* =========================================================
   OUR PROCESS
========================================================= */

.process-section {

    width: 100%;

    background: #ffffff;

    padding: 75px 6% 80px;

}


.process-container {

    max-width: 1280px;

    margin: 0 auto;

}


.process-label {

    display: block;

    font-size: 18px;

    font-style: italic;

    color: #111;

    margin-bottom: 30px;

}


.process-heading h2 {

    margin: 0;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 400;

    color: #050505;

}


.process-grid {

    display: grid;

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

    gap: 55px;

    margin-top: 125px;

}


.process-item {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.process-icon {

    width: 58px;

    height: 58px;

    border: 1px solid #d8d8d8;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 27px;

    transition: all 0.3s ease;

}


.process-icon i {

    font-size: 23px;

    color: #e8780b;

}


.process-item:hover .process-icon {

    background: #e8780b;

    border-color: #e8780b;

    transform: translateY(-4px);

}


.process-item:hover .process-icon i {

    color: #ffffff;

}


.process-item h3 {

    margin: 0 0 15px;

    font-size: 28px;

    line-height: 1.2;

    font-weight: 400;

    color: #050505;

}


.process-item p {

    margin: 0;

    max-width: 260px;

    font-size: 18px;

    line-height: 1.25;

    color: #111;

}


/* =========================================================
   APPOINTMENT
========================================================= */

.appointment-section {

    width: 100%;

    padding: 0 4.5%;

    background: #ffffff;

}


.appointment-container {

    border-top: 1px solid #222;

    border-bottom: 1px solid #222;

    padding: 42px 20px 50px;

    text-align: center;

}


.appointment-container h2 {

    margin: 0 0 58px;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 400;

    color: #050505;

}


.appointment-btn {

    display: flex;

    width: 290px;

    height: 58px;

    margin: 0 auto;

    align-items: center;

    justify-content: center;

    border-radius: 50px;

    background: #e8780b;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: all 0.3s ease;

}


.appointment-btn:hover {

    background: #d96d06;

    transform: translateY(-3px);

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

}


/* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.testimonials-section {

    width: 100%;

    background: #ffffff;

    padding: 70px 3% 80px;

}


.testimonials-container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

}


/* =========================================================
   TESTIMONIAL HEADING
========================================================= */

.testimonials-heading {

    margin-bottom: 105px;

}


.testimonials-heading span {

    display: block;

    margin-bottom: 18px;

    font-size: 18px;

    line-height: 1;

    font-style: italic;

    font-weight: 400;

    color: #111;

}


.testimonials-heading h2 {

    margin: 0;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 400;

    color: #050505;

}


/* =========================================================
   TESTIMONIAL GRID
========================================================= */

.testimonial-grid {

    display: grid;

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

    column-gap: 70px;

    row-gap: 40px;

}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.testimonial-card {

    width: 100%;

    height: 500px;

    box-sizing: border-box;

    padding: 48px 26px 25px;

    border-radius: 20px;

    background: #ffe8d0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.testimonial-card:hover {

    transform: translateY(-4px);

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

}


/* =========================================================
   SCROLLABLE TEXT AREA
========================================================= */

.testimonial-text {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding-right: 8px;

    margin: 0;

    scrollbar-width: thin;

    scrollbar-color: #e8780b transparent;

}


/* Chrome / Edge / Safari */

.testimonial-text::-webkit-scrollbar {

    width: 5px;

}


.testimonial-text::-webkit-scrollbar-track {

    background: transparent;

}


.testimonial-text::-webkit-scrollbar-thumb {

    background: #e8780b;

    border-radius: 10px;

}


.testimonial-text::-webkit-scrollbar-thumb:hover {

    background: #d96d06;

}


/* =========================================================
   TESTIMONIAL TEXT
========================================================= */

.testimonial-text p {

    margin: 0;

    padding: 0;

    font-size: 19px;

    line-height: 1.25;

    font-weight: 400;

    color: #111;

}


/* =========================================================
   AUTHOR AREA
========================================================= */

.testimonial-author {

    width: 100%;

    min-height: 62px;

    margin-top: 20px;

    display: flex;

    align-items: center;

    gap: 22px;

    flex-shrink: 0;

}


/* =========================================================
   AUTHOR IMAGE
========================================================= */

.author-image {

    width: 40px;

    height: 40px;

    min-width: 40px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

}


.author-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
   AUTHOR NAME
========================================================= */

.testimonial-author h3 {

    margin: 0;

    padding: 0;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 700;

    color: #050505;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .testimonial-grid {

        column-gap: 35px;

    }


    .testimonial-card {

        height: 480px;

    }


    .testimonial-text p {

        font-size: 18px;

    }


    .testimonial-author h3 {

        font-size: 23px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .testimonials-section {

        padding: 55px 20px 60px;

    }


    .testimonials-heading {

        margin-bottom: 50px;

    }


    .testimonials-heading span {

        font-size: 16px;

    }


    .testimonials-heading h2 {

        font-size: 32px;

    }


    .testimonial-grid {

        grid-template-columns: 1fr;

        gap: 22px;

    }


    .testimonial-card {

        height: 430px;

        padding: 35px 22px 22px;

        border-radius: 18px;

    }


    .testimonial-text p {

        font-size: 17px;

        line-height: 1.3;

    }


    .testimonial-author {

        min-height: 58px;

        margin-top: 15px;

        gap: 15px;

    }


    .testimonial-author h3 {

        font-size: 21px;

        line-height: 1.15;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .testimonial-card {

        height: 420px;

        padding: 30px 20px 20px;

    }


    .testimonial-text p {

        font-size: 16px;

    }


    .testimonial-author h3 {

        font-size: 19px;

    }

}

/* =========================================================
   FINAL CTA
========================================================= */

.final-cta-section {

    width: 100%;

    padding: 0 6% 15px;

    background: #ffffff;

}


.final-cta {

    min-height: 590px;

    border-radius: 0 0 55px 55px;

    background:
        linear-gradient(
            to bottom,
            #ffe9d3 0%,
            #e8780b 48%,
            #e8780b 100%
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 125px 20px 80px;

}


.final-cta h2 {

    margin: 0 0 25px;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;

}


.final-cta p {

    max-width: 700px;

    margin: 0 auto;

    font-size: 20px;

    line-height: 1.2;

    color: #ffffff;

}


.final-cta-btn {

    width: 360px;

    height: 72px;

    margin-top: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50px;

    background: #ffffff;

    color: #e8780b;

    text-decoration: none;

    font-size: 18px;

    font-weight: 700;

    transition: all 0.3s ease;

}


.final-cta-btn:hover {

    transform: translateY(-4px);

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

}


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

.site-footer {

    width: 100%;

    background: #ffffff;

    padding: 70px 6% 0;

}


.footer-container {

    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.8fr 0.8fr 1.1fr;

    gap: 100px;

    padding-bottom: 60px;

}


.footer-logo {

    display: inline-block;

    margin-bottom: 38px;

}


.footer-logo img {

    width: 275px;

    height: auto;

    display: block;

}


.footer-about p {

    max-width: 320px;

    margin: 0;

    font-size: 17px;

    line-height: 1.45;

    color: #111;

}


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

.footer-navigation h3,
.footer-contact h3 {

    margin: 0 0 25px;

    font-size: 17px;

    font-weight: 700;

    color: #050505;

}


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

.footer-navigation ul {

    list-style: none;

    margin: 0;

    padding: 0;

}


.footer-navigation li {

    margin-bottom: 18px;

}


.footer-navigation a {

    color: #111;

    text-decoration: none;

    font-size: 17px;

    transition: color 0.3s ease;

}


.footer-navigation a:hover {

    color: #e8780b;

}


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

.footer-contact p {

    margin: 0 0 18px;

    font-size: 17px;

    line-height: 1.4;

    color: #111;

}


.footer-contact a {

    color: #111;

    text-decoration: none;

}


.footer-contact a:hover {

    color: #e8780b;

}


.footer-whatsapp {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 45px;

    font-size: 17px !important;

}


.footer-whatsapp i {

    font-size: 26px;

}


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

.footer-bottom {

    max-width: 1280px;

    margin: 0 auto;

    border-top: 1px solid #222;

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.copyright {

    font-size: 17px;

    color: #111;

}


.crafted {

    font-size: 17px;

    color: #999;

}


.crafted strong {

    color: #050505;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .process-grid {

        gap: 30px;

        margin-top: 90px;

    }


    .process-item h3 {

        font-size: 24px;

    }


    .process-item p {

        font-size: 16px;

    }


    .testimonial-grid {

        gap: 30px;

    }


    .testimonial-author h3 {

        font-size: 23px;

    }


    .footer-container {

        gap: 50px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {


    /* PROCESS */

    .process-section {

        padding: 55px 25px 60px;

    }


    .process-label {

        font-size: 16px;

        margin-bottom: 22px;

    }


    .process-heading h2 {

        font-size: 32px;

    }


    .process-grid {

        grid-template-columns: 1fr;

        gap: 45px;

        margin-top: 60px;

    }


    .process-icon {

        margin-bottom: 20px;

    }


    .process-item h3 {

        font-size: 26px;

    }


    .process-item p {

        max-width: 100%;

        font-size: 17px;

    }


    /* APPOINTMENT */

    .appointment-section {

        padding: 0 20px;

    }


    .appointment-container {

        padding: 35px 15px 40px;

    }


    .appointment-container h2 {

        font-size: 30px;

        margin-bottom: 40px;

    }


    .appointment-btn {

        width: 240px;

        height: 55px;

    }


    /* TESTIMONIALS */

    .testimonials-section {

        padding: 55px 20px 60px;

    }


    .testimonials-heading {

        margin-bottom: 50px;

    }


    .testimonials-heading span {

        font-size: 16px;

    }


    .testimonials-heading h2 {

        font-size: 32px;

    }


    .testimonial-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .testimonial-card {

        height: 360px;

        padding: 30px 22px 22px;

        border-radius: 18px;

    }


    .testimonial-text {

        height: 255px;

    }


    .testimonial-text p {

        font-size: 17px;

    }


    .testimonial-author {

        gap: 15px;

    }


    .testimonial-author h3 {

        font-size: 21px;

    }


    /* FINAL CTA */

    .final-cta-section {

        padding: 0 20px 15px;

    }


    .final-cta {

        min-height: 500px;

        border-radius: 0 0 35px 35px;

        padding: 80px 20px 60px;

    }


    .final-cta h2 {

        font-size: 32px;

    }


    .final-cta p {

        font-size: 17px;

        line-height: 1.3;

    }


    .final-cta-btn {

        width: 280px;

        height: 60px;

        margin-top: 50px;

        font-size: 16px;

    }


    /* FOOTER */

    .site-footer {

        padding: 55px 25px 0;

    }


    .footer-container {

        grid-template-columns: 1fr;

        gap: 45px;

        padding-bottom: 40px;

    }


    .footer-logo img {

        width: 240px;

    }


    .footer-about p {

        max-width: 100%;

        font-size: 16px;

    }


    .footer-whatsapp {

        margin-top: 25px;

    }


    .footer-bottom {

        padding: 20px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }


    .copyright,
    .crafted {

        font-size: 14px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .process-heading h2,
    .testimonials-heading h2 {

        font-size: 28px;

    }


    .testimonial-card {

        height: 350px;

    }


    .testimonial-text {

        height: 245px;

    }


    .testimonial-author h3 {

        font-size: 19px;

    }


    .final-cta h2 {

        font-size: 28px;

    }


    .final-cta-btn {

        width: 250px;

    }

}