* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    border: none;
    outline: none;
    text-decoration: none !important;
    list-style: none;
    user-select: none;
    text-decoration: none;
}


p,
a,
ul,
li {
    margin-bottom: 0rem !important;
}

:root {
    --primary-color: #ffffff;
    --secondary-color: #0e82e6;
    --text-color-primary: #201E1E;
    --text-color-secondary: #ffffff;
    --background-color: #ffffff;
    --padding-small: .5rem;
    --padding-medium: 1rem;
    --padding-large: 2rem;
    --border: 2px solid var(--text-color-secondary);
    --margin-top: 100px;
    --link: #000080;
    --logo-color: #ffcc29;
}

.para-1 {
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: capitalize;
}

.para-2 {
    font-size: 1rem;
    text-transform: capitalize;
}

html,
body {
    height: 100%;
    font-size: 100%;
    line-height: 1.6;
    background-color: var(--background-color);
    overflow-x: hidden;
    scroll-behavior: smooth;
    height: fit-content;

}


/* ::-webkit-scrollbar {
    display: none;
} */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--logo-color);

}

::-webkit-scrollbar-thumb {
    background: var(--text-color-primary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

section {
    scroll-margin-top: 10rem;
    /* Adjust this value to match your header height */
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.btn {
    padding: 1rem 3rem;
    color: var(--text-color-secondary);
    background-color: var(--logo-color);
    text-transform: uppercase;
    font-weight: 900;
    margin: 0 !important;
    white-space: nowrap;
}


/* upper icon css */
.upper {
    background-color: var(--secondary-color);
    padding: 1rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    /* Hidden by default */
    border: 2px solid transparent;
    /* Initial border */
}

.upper a {
    color: var(--text-color-secondary);
}


/* call details css */
.contact-upper {
    /* background-image: url("../images/about-texture-blue.png"); */
    background-color: var(--logo-color);
    background-size: cover;
    background-position: center;
    /* margin-top: 7.5rem; */
}

.contact-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-small) var(--padding-large);
}

.contact-details {
    display: flex;
    gap: 1rem;
}

.contact-details-one,
.contact-details-two {
    display: flex;
    align-items: center;
    gap: .5rem;
}


.contact-details-one p,
.contact-details-two p {
    text-transform: capitalize;
    font-weight: 100;
    color: var(--text-color-secondary);
}

.contact-details-one p a {
    color: var(--text-color-secondary);
}

.contact-details-one i,
.contact-details-two i {
    color: var(--text-color-primary);
}

.contact-social {
    display: flex;
    gap: .5rem;
}

.contact-social i {
    font-size: 1rem;
    border: var(--text-color-secondary) solid;
    padding: .5rem;
    color: var(--text-color-primary);
    border-radius: 50%;
}

/* call details responsive css  */

@media screen and (max-width:600px) {
    .contact-upper {
        display: none;
    }

    .contact-header {
        flex-direction: column;
        gap: 1rem;
    }

}

@media screen and (max-width:922px) {

    .contact-header {
        padding: var(--padding-small) var(--padding-small);
    }

}

/* header css */

header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 2rem 2rem;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    transition: .5s all ease;
    z-index: 100;
    /* height: 5rem; */
    background-color: var(--background-color);
    overflow: hidden;
}

header.active {
    background-color: var(--text-color-secondary);
    background-color: transparent;
    padding: 2rem 2rem;
    backdrop-filter: blur(5px);
    color: var(--text-color-secondary);
}

header.active .header-book button {
    background-color: var(--text-color-primary);
    color: var(--logo-color);
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: .5s all ease;

}

header.active nav ul li a {
    color: var(--text-color-primary);

}

header .logo {
    width: 5rem;
    height: 5rem;
    background-image: url("../images/logo.png");
    background-size: cover;
    background-position: center;
    scale: 1.5;
    font-size: 2rem;
    font-weight: 800;
    color: var(--secondary-color);
}

header .logo img {
    scale: .5;
}

header nav {
    width: 65%;
}


header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
}

header nav ul li a {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-color-primary);
    font-weight: bolder;
    font-style: italic;
}

header nav ul li a:hover {
    color: var(--logo-color);
}

header .header-end {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

header .header-book button {
    padding: 1rem 3rem;
    color: var(--text-color-secondary);
    background-color: var(--logo-color);
    text-transform: uppercase;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-weight: bolder;
    font-style: italic;
    transition: .5s all ease;
}

header .header-collapse {
    display: none;
}

@media screen and (max-width:922px) {
    header {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        /* padding: var(--padding-small) var(--padding-small); */
        padding: 3rem;
    }

    header nav {
        display: none;
    }

    header nav ul {
        display: flex;
        gap: 3rem;
    }


    header .header-collapse {
        display: block;
    }

    header .header-collapse i {
        font-size: 2rem;
    }

}

@media screen and (max-width:500px) {

    header .header-book button {
        white-space: nowrap;
        display: none;
        padding: 1rem 2rem;
        color: var(--text-color-secondary);
        background-color: var(--secondary-color);
        text-transform: uppercase;
    }

}

@media screen and (max-width:600px) {

    header {
        top: 0px;
        padding: 2rem;
    }

}

/* nav invisible */
.nav-invisible {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    background-color: transparent;
    background-color: rgba(255, 255, 255, 0.9);
    margin-left: -100%;
    transition: 1s cubic-bezier(.19, -0.45, .43, .43);

}

.nav-invisible.active {
    transition: .5s ease;
    margin-left: 0%;
    background-color: rgba(0, 0, 0, 0.2);
}

.nav-container {
    width: 60%;
    background-color: var(--background-color);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: var(--padding-large);
    overflow-y: scroll;
}

.nav-container .nav-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 var(--padding-large) 0;

}

.nav-container .nav-upper .logo {
    color: var(--text-color-primary);
    font-size: 2rem;
    width: 10rem;
}

.nav-container .nav-upper i {
    font-size: 2rem;
}

.nav-container nav.nav-lower {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.nav-container nav.nav-lower a {
    text-transform: uppercase;
    color: var(--text-color-primary);
    border-bottom: 2px solid rgba(0, 0, 0, 0.196);
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.swiper-wrapper {
    width: 100%;
}

.nav-container .nav-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 1rem;
}

.nav-container .nav-content h2 {
    text-transform: uppercase;
    margin-top: 1rem;
}

.nav-container .nav-content a {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    color: var(--secondary-color);
}

.nav-container .nav-icons {
    display: flex;
    gap: 1rem;
}

.nav-container .nav-icons a {
    padding: 1rem;
    background-color: var(--secondary-color);
    color: var(--text-color-secondary);
}

/* Home css */

.home {
    width: 100%;
    height: 100vh;
    margin-top: 9rem;
}

.home .home-slider {
    height: 100%;
    width: 100%;
}


.home .home-slider .home-list {
    height: 100%;
    width: 100%;
}

.home .home-slider .home-list .home-item {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center;
    padding: 0 var(--padding-large);
}

.home .home-slider .home-list .home-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: black;
    opacity: .4;

}

.home .home-slider .home-list .home-item h1 {
    font-size: 5rem;
    font-weight: 900;
    text-transform: capitalize;
    color: var(--text-color-secondary);
    text-align: center;
    line-height: 1;
}

.home .home-slider .home-list .home-item p {
    color: var(--text-color-secondary);
    text-align: center;
    text-transform: capitalize;
    padding: 0 4rem;
    font-size: 1.3rem;
}

@media screen and (max-width:922px) {

    .home .home-slider .home-list .home-item h1 {
        font-size: 4rem;
    }

    .home .home-slider .home-list .home-item p {
        font-size: 1rem;
    }
}

@media screen and (max-width:768px) {

    .home .home-slider .home-list .home-item h1 {
        font-size: 3rem;
    }

    .home .home-slider .home-list .home-item p {
        font-size: 1rem;
    }
}

@media screen and (max-width:576px) {


    .home .home-slider .home-list .home-item {
        padding: 0 var(--padding-small);
    }


    .home .home-slider .home-list .home-item h1 {
        font-size: 3rem;
    }

    .home .home-slider .home-list .home-item p {
        padding: 0 2rem;
        font-size: 1rem;
    }
}


/* services css */

#service {
    width: 100%;
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    /* margin-top: var(--margin-top); */
    gap: 2rem;
    padding: 0 var(--padding-large);
    /* margin: var(--margin-top) auto 0; */
    margin-top: var(--margin-top);
    margin-bottom: 3rem;
}

#service .swiper {
    width: 100%;
}

#service .service-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: var(--padding-large);
}

#service .service-content h3 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 900;
    position: relative;
    color: var(--logo-color);
}

#service .service-content h3::before {
    content: 'service';
    position: absolute;
    font-size: 6rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px var(--text-color-primary);
    color: transparent;
    opacity: .2;
}

#service .service-content h2 {
    text-transform: capitalize;
    font-size: 2.5rem;
    font-weight: 900;
}

#service .service-content h2 span {
    color: var(--logo-color);
}

#service .swiper {
    overflow: visible !important;
}

#service .service-slider {
    width: 100%;
    overflow: hidden;
    padding: 20px 10px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#service .service-slider-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#service .service-slider-item .service-slider-link {
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.5rem;
    transition: .5s;
    height: 100%;
}

#service .service-slider-item .service-slider-link:hover {
    transform: rotate(2deg);
    scale: 1.1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

#service .service-slider-item:nth-child(even) .service-slider-link:hover {
    transform: rotate(-2deg);
}

#service .service-slider-item .service-slider-link ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

#service .service-slider-item .service-slider-link ul li {
    line-height: 1.4;
    color: var(--text-color-primary);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 500;
    border-bottom: 2px solid var(--text-color-primary);
    /* width: 100%; */
}

#service .service-slider-item .service-slider-link i {
    font-size: 2rem;
    color: var(--logo-color);
}

#service .service-slider-item .service-slider-link h3 {
    color: var(--text-color-primary);
    text-transform: uppercase;
}

#service .swiper-button-prev {
    position: absolute;
    top: -10%;
    scale: .8;
    right: 10% !important;
    z-index: 100;
    background-color: var(--logo-color);
    color: var(--text-color-primary);
    padding: var(--padding-large);
}

#service .swiper-button-next {
    position: absolute;
    top: -10%;
    scale: .8;
    right: 0%;
    z-index: 100;
    background-color: var(--logo-color);
    color: var(--text-color-primary);
    padding: var(--padding-large);
}

#service button {
    background-color: var(--logo-color);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: .5s all ease;
}

#service button:hover {
    background-color: var(--text-color-primary);
    color: var(--text-color-secondary);
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media screen and (max-width:450px) {
    #service {
        width: 100%;
        padding: 0 0;
        margin: 0;
        overflow: hidden;
        /* height: 130vh; */
    }

    #service .service-slider {
        width: 100%;
        overflow: hidden;
        padding: 20px 10px;
        height: 380px;
        height: 100%;
    }


    .swiper-button-prev {
        scale: .5;
    }

    .swiper-button-next {
        scale: .5;
    }
}


/* provide section css */

.provider {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: var(--padding-large);
    margin-top: 1rem;
}

.provider-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: var(--margin-top);
}

.provider-heading h2 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 900;
    position: relative;
    color: var(--logo-color);
}

.provider-heading h2::before {
    content: 'choose';
    position: absolute;
    font-size: 6rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px var(--text-color-primary);
    color: transparent;
    opacity: .2;
}

.provider .provide {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: .5rem;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.provider .provide::after {
    position: absolute;
    content: '';
    width: 10rem;
    height: 10rem;
    background-color: var(--logo-color);
    top: -5rem;
    right: -5rem;
    border-radius: 50%;
    transition: .5s all ease;
    z-index: -1;
}

.provider .provide:hover::after {
    position: absolute;
    content: '';
    background-color: var(--logo-color);
    top: -5rem;
    right: -5rem;
    border-radius: 50%;
    scale: 6;

}

/* .provider .provide:hover {
    background-color: var(--logo-color);
} */

.provider .provide .provide-upper {
    display: flex;
    gap: 1rem;
    justify-content: start;
    align-items: center;
}

.provider .provide .provide-upper i {
    padding: 1rem;
    font-size: 1.3rem;
    border: 3px solid var(--text-color-primary);
}

.provider .provide p {
    text-align: justify;
    text-align-last: start;
    line-height: 1.2;
    text-transform: capitalize;
}

.provider .provide .provide-upper h3 {
    text-transform: uppercase;
    font-size: 1.5rem;
}

.provider .provide:hover .provide-upper h3 {
    color: var(--text-color-secondary);
}

.provider .provide:hover .provide-upper i {
    color: var(--text-color-secondary);
    border: 3px solid var(--background-color);
}

.provider .provide:hover p {
    color: var(--text-color-secondary);
}

.provider .provide:hover {
    /* transform: scale(1.1, 1.1); */
    box-shadow: none;
}

/* .provider:hover>.provide:not(:hover) {
    filter: blur(10px);
    transform: scale(0.9, 0.9);
    box-shadow: none;
} */

@media screen and (max-width:922px) {
    .provider {
        margin-top: var(--padding-large);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

}

@media screen and (max-width:768px) {
    .provider {
        grid-template-columns: 1fr;
    }

}



/* about css design */

#about {
    width: 100%;
    /* height: 100%; */
    display: flex;
    gap: 3rem;
    margin-top: var(--margin-top);
    justify-content: center;
    align-items: center;
    /* background-image: url("../images/about-texture-blue.png"); */
    background-position: center;
    background-size: cover;
    padding: var(--padding-large);
    background-color: var(--logo-color);
}

#about .about-left {
    width: 50%;
}

#about .about-right {
    width: 50%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 2rem;
}

#about .about-left .about-left-image {
    width: 100%;
    height: 80vh;
    background-image: url("../images/about.png");
    background-size: cover;
    background-position: center;
}

#about .about-right .about-right-data-one {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#about .about-right .about-right-data-one h3 {
    text-transform: uppercase;
    position: relative;
    font-size: 1rem;
    color: var(--text-color-secondary);
    font-weight: 900;
    z-index: 1;
}

#about .about-right .about-right-data-one h3::before {
    content: 'about us';
    position: absolute;
    font-size: 6rem;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px var(--text-color-primary);
    color: transparent;
    opacity: .3;
    white-space: nowrap;
    font-weight: bolder;
    z-index: -1;
}

#about .about-right .about-right-data-one h2 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 3rem;
    line-height: 1.3;
    color: var(--text-color-secondary);
}

#about .about-right .about-right-data-one h2 span {
    color: var(--text-color-primary);
}

#about .about-right .about-right-data-one p {
    text-transform: capitalize;
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: justify;
    word-break: keep-all;
    opacity: 1;
    font-weight: 400;
    color: var(--text-color-secondary);
}

#about .about-right .about-right-data-one p span {
    color: var(--text-color-primary);
}

#about .about-right .about-right-data-two {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: start;
    gap: 1rem;
}

#about .about-right .about-right-data-two .about-right-data-upper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#about .about-right .about-right-data-two .about-right-data-upper .about-right-data-box {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: .5rem;
}

#about .about-right .about-right-data-two .about-right-data-upper .about-right-data-box i {
    border: 3px solid var(--text-color-secondary);
    padding: .4rem;
    font-size: 1rem;
    color: var(--text-color-secondary);
    border-radius: 50%;
}

#about .about-right .about-right-data-two .about-right-data-upper .about-right-data-box p {
    text-transform: capitalize;
    font-weight: 700;
    color: var(--text-color-primary);
    word-break: break-all;
}

#about .about-right .about-right-data-two .about-right-data-upper .about-right-data-box p span {
    color: var(--text-color-secondary);
}

#about .about-right .about-right-data-two .about-right-data-lower {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#about .about-right .about-right-data-two .about-right-data-lower .about-right-data-lower-box {
    /* width: 100%; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#about .about-right .about-right-data-two .about-right-data-lower .about-right-data-lower-box .about-right-data-lower-box-left img {
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

#about .about-right .about-right-data-two .about-right-data-lower button {
    background-color: var(--text-color-primary);
    color: var(--text-color-secondary);
    font-style: italic;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

#about .about-right .about-right-data-two .about-right-data-lower .about-right-data-lower-box .about-right-data-lower-box-right {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    line-height: 1.2;
}

#about .about-right .about-right-data-two .about-right-data-lower .about-right-data-lower-box .about-right-data-lower-box-right h2 {
    text-transform: capitalize;
    color: var(--text-color-secondary);
    font-weight: 300;
    white-space: nowrap;
}

#about .about-right .about-right-data-two .about-right-data-lower .about-right-data-lower-box .about-right-data-lower-box-right p {
    text-transform: capitalize;
    color: var(--text-color-secondary);
    font-weight: 500;
}

@media screen and (max-width:922px) {
    #about {
        flex-direction: column;
        gap: 3rem;
        height: 1000px;
    }

    #about .about-left {
        width: 100%;
        height: 100%;
    }

    #about .about-left .about-left-image {
        width: 100%;
        height: 100%;
    }

    #about .about-right {
        width: 100%;
    }
}

@media screen and (max-width:576px) {
    #about .about-right .about-right-data-two .about-right-data-lower {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }
}

@media screen and (max-width: 450px) {
    #service {
        width: 100%;
        padding: 0 0;
        /* margin: 0; */
        margin-top: var(--margin-top);
        overflow: hidden;
        /* height: 130vh; */
    }
}


/* increment style */
.increment {
    width: 100%;
    /* background-image: url("../images/about-texture-blue.png"); */
    background-color: var(--logo-color);
    margin: var(--margin-top) 0;
    background-size: cover;
    background-position: center;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.increment .increment-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.increment .increment-box .increment-icon {
    border: 2px solid var(--text-color-secondary);
    padding: 2rem;
    border-radius: 50%;
}

.increment .increment-box i {
    color: var(--text-color-primary);
    font-size: 2rem;
}

.increment .increment-box .increment-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
}

.increment .increment-box .increment-data h2 {
    color: var(--text-color-secondary);
    font-size: 3rem;
    font-weight: 500;
}

.increment .increment-box .increment-data p {
    color: var(--text-color-primary);
    text-transform: capitalize;
    font-weight: bold;
    font-style: italic;
}

@media screen and (max-width:576px) {
    .increment {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .increment .increment-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding-bottom: var(--padding-large);
    }
}

@media screen and (max-width:400px) {
    .increment {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .increment .increment-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        border-bottom: 1px solid var(--text-color-secondary);
        padding-bottom: 1rem;
    }

}

/* choose */

.choose {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: var(--margin-top);
}

.choose h2 {
    text-transform: uppercase;
}

.choose h2 span {
    color: var(--logo-color);
}



.choose ul li button {
    padding: var(--padding-large) 4rem;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.choose .nav-pills .nav-link,
.nav-pills .show>.nav-link ul li button i {
    font-size: 1.4rem;
    color: var(--text-color-primary);
}

.choose .nav-pills .nav-link,
.nav-pills .show>.nav-link ul li button p {
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text-color-primary);
}

.choose .nav-pills .nav-link.active,
.nav-pills .show>.nav-link ul li button p {
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text-color-secondary);
}

.choose .nav-pills .nav-link.active,
.nav-pills .show>.nav-link ul li button i {
    color: var(--text-color-secondary);
}

.choose .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--logo-color);
}



.choose .tab-content .tab-pane {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.tab-content>.tab-pane:not(.active),
.pill-content>.pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}

.choose .tab-content .tab-pane p {
    width: 80%;
    text-align: center;
    line-height: 1;
    opacity: .8;
}

.para-italic {
    font-style: italic;
}

@media screen and (max-width:700px) {

    .choose ul {
        display: flex;
        gap: 1rem;
    }

    .choose ul li button {
        padding: var(--padding-small) 2rem;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
}

@media screen and (max-width:576px) {

    .choose ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0rem;
    }

    .choose ul li button {
        padding: var(--padding-small) 1rem;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: .3rem;
        scale: .8;
        /* gap: 1rem; */
    }
}


/* projects css */

#projects {
    width: 100%;
    /* height: 100%; */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem var(--padding-large);
    gap: 2rem;
}

#projects>h2 {
    text-transform: uppercase;
    color: var(--logo-color);
    font-size: 1rem;
    position: relative;
    z-index: 1;
    font-weight: 600;
}

#projects>h2::before {
    content: 'projects';
    position: absolute;
    font-size: 6rem;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px var(--text-color-primary);
    color: transparent;
    opacity: .3;
    white-space: nowrap;
    font-weight: bolder;
    z-index: -1;
}

#projects .projects-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    padding: 3rem;
}

#projects .projects-boxes .projects-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding-bottom: 1rem;
    border: .1rem solid var(--text-color-primary);
    position: relative;
    transition: .5s all ease;
}

#projects .projects-boxes .projects-box:hover::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--logo-color);
    opacity: .6;
}

#projects .projects-boxes .projects-box:hover h3 {
    color: var(--text-color-secondary);
    z-index: 1;
}

#projects .projects-boxes .projects-box:hover p {
    color: var(--text-color-secondary);
    z-index: 1;
}

#projects .projects-boxes .projects-box img {
    height: 70%;
    object-fit: cover;
}

#projects .projects-boxes .projects-box h3 {
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 1.2rem;
}

#projects .projects-boxes .projects-box p {
    padding: 0 1.5rem;
    text-align: center;
    word-break: keep-all;
}

@media only screen and (max-width:922px) {
    #projects .projects-boxes {
        grid-template-columns: 1fr 1fr;
    }

}

@media only screen and (max-width:768px) {
    #projects .projects-boxes {
        grid-template-columns: 1fr;
    }

}

/* feedback */

.feedback {
    display: flex;
    width: 100%;
    margin-top: var(--margin-top);
    padding: var(--padding-large);
    gap: 1rem;
    /* height: 100%; */
}

.feedback .feedback-left {
    width: 50%;
    height: 100%;
}

.feedback .feedback-right {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--padding-large);
}

.feedback .feedback-left .feedback-left-image {
    width: 100%;
    height: 100%;
}

.feedback .feedback-left .feedback-left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feedback .feedback-right>h2 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 900;
    position: relative;
    color: var(--logo-color);
}

.feedback .feedback-right>h2::before {
    content: 'clients';
    position: absolute;
    font-size: 6rem;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px var(--text-color-primary);
    color: transparent;
    opacity: .2;
}

.feedback .feedback-right h3 {
    text-transform: capitalize;
    font-size: 2.5rem;
    font-weight: 900;
}

.feedback .feedback-right h3 span {
    color: var(--logo-color);
}

.feedback .feedback-right .feedback-container {
    width: 100%;
    height: 100%;
}

.feedback .feedback-right .feedback-container .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.feedback .feedback-right .feedback-container .swiper-slide .slider-upper {
    display: flex;
    gap: 2rem;
    height: 100%;
}

.feedback .feedback-right .feedback-container .swiper-slide .slider-upper i {
    font-size: 4rem;
    color: var(--logo-color);
}

.feedback .feedback-right .feedback-container .swiper-container {
    width: 100%;
    height: 100%;
}

.feedback .feedback-right .feedback-container .swiper-slide .slider-upper p {
    font-size: 1rem;
    color: var(--text-color-primary);
    text-align: justify;
    word-break: break-all;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.5;
    opacity: .8;
}

.feedback .feedback-right .feedback-container .swiper-slide .slider-lower {
    display: flex;
    gap: 2rem;
    padding: 0 0 var(--padding-large) 0;
}

.feedback .feedback-right .feedback-container .swiper-slide .slider-lower .slider-lower-img {
    width: 100px;
    height: 100px;
}

.feedback .feedback-right .feedback-container .swiper-slide .slider-lower .slider-lower-img img {
    width: 100px;
    height: 100px;
    display: block;
    object-fit: cover;
    box-shadow: 10px 10px var(--secondary-color);
}

.feedback .feedback-right .feedback-container .swiper-slide .slider-lower .slider-lower-content {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    line-height: 1;
}



.feedback .feedback-container .swiper-button-prev {
    padding: 1rem 2rem;
    position: absolute;
    top: 40% !important;
    width: calc(var(--swiper-navigation-size) / 44* 27);
    height: 60px;
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    /* left: 70%; */
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    background-color: var(--logo-color);
    color: var(--text-color-secondary);
    scale: .7;
}

.feedback .feedback-container .swiper-button-next {
    height: 60px;
    scale: .7;
    padding: 1rem 2rem;
    position: absolute;
    top: 40% !important;
    width: calc(var(--swiper-navigation-size) / 44* 27);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    background-color: var(--logo-color);
    color: var(--text-color-secondary);
}

@media screen and (max-width:922px) {
    .feedback {
        flex-direction: column;
    }

    .feedback .feedback-left {
        width: 100%;
        height: 50vh;
    }

    .feedback .feedback-right {
        width: 100%;
    }

    .feedback .feedback-right>h2::before {
        left: 25%;
    }

    .feedback .feedback-right .feedback-container .swiper-slide .slider-upper p {
        font-size: 1.5rem;
    }

    .feedback .feedback-right .feedback-container .swiper-slide .slider-upper i {
        font-size: 3rem;
    }

    .feedback .feedback-container .swiper-button-prev {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 28% !important;
    }

    .feedback .feedback-container .swiper-button-next {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 28% !important;
    }

    .feedback .feedback-right .feedback-container .swiper-slide {
        gap: 4rem;
    }

    .feedback .feedback-right {
        padding: 0;
    }

}

@media screen and (max-width:768px) {

    .feedback .feedback-container .swiper-button-prev {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 80% !important;
        left: 80%;
    }

    .feedback .feedback-container .swiper-button-next {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 80% !important;
    }


}

@media screen and (max-width:600px) {

    .feedback .feedback-container .swiper-button-prev {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 80% !important;
        left: 50%;
    }

    .feedback .feedback-container .swiper-button-next {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 80% !important;
    }

    .feedback .feedback-right .feedback-container .swiper-slide .slider-lower .slider-lower-content p {
        white-space: nowrap;
    }

}

@media screen and (max-width:300px) {

    .feedback .feedback-container .swiper-button-prev {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 90% !important;
        left: 50%;
    }

    .feedback .feedback-container .swiper-button-next {
        height: 50px;
        scale: .5;
        padding: var(--padding-large) 2rem;
        top: 90% !important;
    }

    .feedback .feedback-right .feedback-container .swiper-slide .slider-lower .slider-lower-content p {
        white-space: nowrap;
    }

}



/* company slider images */

.company-slider {
    overflow: hidden;
    /* Hide overflow for scrolling effect */
    width: 100%;
    /* Full width */
    position: relative;
    margin-top: var(--margin-top);
    /* Required for positioning */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.company-slider h2 {
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    letter-spacing: .2rem;
}

.slider-wrapper {
    display: flex;
    /* Flexbox to align items in a row */
    animation: scroll 15s linear infinite;
    /* Animation for scrolling */
}

.slider-wrapper h2 {
    text-transform: uppercase;
}

.slider {
    display: flex;
    /* Flexbox for images */
    gap: 3rem;
}

.slider img {
    height: 7rem;
    /* Adjust height as needed */
    margin: 0 15px;
    /* Space between images */
    object-fit: contain;
    /* Maintain aspect ratio */
}

/* Keyframes for scrolling */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Scroll fully to the left */
    }
}




.slider-wrapper-1 {
    display: flex;
    /* Flexbox to align items in a row */
    animation: scroll1 15s linear infinite;
    /* Animation for scrolling */
}

/* Keyframes for scrolling */
@keyframes scroll1 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
        /* Scroll fully to the left */
    }
}



/* blog section */

.blog {
    margin-top: var(--margin-top);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.blog .blog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blog .blog-content h2 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 900;
    position: relative;
    color: var(--logo-color);
}


.blog .blog-content h2::before {
    content: 'blog';
    position: absolute;
    font-size: 6rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px var(--text-color-primary);
    color: transparent;
    opacity: .2;
}

.blog .blog-content h3 {
    text-transform: lowercase;
    font-size: 3rem;
}

.blog .blog-content h3 span {
    color: var(--logo-color);
}

.blog .blog-container {
    width: 100%;
}

.blog .blog-container .blog-swiper {
    padding: var(--padding-large);
}

.blog .swiper-slide {
    padding: var(--padding-large);
}

.blog .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: relative;
}

.blog .swiper-slide .blog-details {
    padding: var(--padding-large);
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    border-bottom: 2px solid var(--text-color-secondary);
}

.blog .swiper-slide .blog-details:hover {
    border-bottom: 2px solid var(--logo-color);
}

.blog .swiper-slide .blog-details h2 {
    display: flex;
    font-size: 1.2rem;
    gap: .5rem;
}

.blog .swiper-slide .blog-details h2 i {
    color: var(--logo-color);
}

.blog .swiper-slide .blog-details p {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1rem;
}

.blog .swiper-slide .blog-details p:hover {
    color: var(--logo-color);
    cursor: pointer;
}

.blog .swiper-slide .blog-details .blog-more {
    text-transform: uppercase;
    color: var(--text-color-primary);
    font-weight: 700;
    font-size: 1rem;
    margin-top: 1rem;
    display: block;
}

.blog .swiper-slide .blog-details .blog-more:hover {
    color: var(--logo-color);
}

/* appointment css code */

.appointment {
    /* margin-top: var(--margin-top); */
    padding: var(--padding-large);
    /* background-image: url("../images/about-texture-blue.png"); */
}

.appointment h2 {
    color: var(--text-color-primary);
    text-align: center;
    text-transform: capitalize;
}

.appointment h3 {
    color: var(--logo-color);
    text-align: center;
    text-transform: capitalize;
    font-size: 3rem;
}

.appointment h3 span {
    color: var(--text-color-primary);
}

.appointment p {
    color: var(--logo-color);
    font-size: 1.5rem;
}

.appointment .para {
    font-size: 3rem;
}

.appointment form {
    display: flex;
    gap: 3rem;
}

::placeholder {
    text-transform: uppercase;
}

.appointment form input {
    padding: var(--padding-medium) var(--padding-medium);
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border: .1rem solid var(--logo-color);
}

.appointment form input[type="submit"] {
    padding: var(--padding-medium) var(--padding-large);
    text-transform: uppercase;
    background-color: var(--logo-color);
    color: var(--text-color-secondary);
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

@media screen and (max-width:922px) {
    .appointment form {
        flex-wrap: wrap;
    }
}


/* footer design */

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-image: url("../images/about-texture-dark.png"); */
    background-color: var(--text-color-primary);
    color: var(--text-color-secondary);
    padding: var(--padding-large);
    gap: 1rem;
}

footer .footer-divs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
}

footer .footer-divs .footer-div {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

footer .footer-divs .footer-div-1 {
    gap: 3rem;
}

footer .footer-divs .footer-div-1 .logo {
    width: 10rem;
}

footer .footer-divs .footer-div-1 p {
    font-size: 1rem;
    text-transform: capitalize;
    /* text-align: justify; */
    word-break: break-all;
    text-align: left;
    line-height: 1.6;
}

footer .footer-divs .footer-div-2 {
    gap: 1rem;
}

footer .footer-divs .footer-div-2 h2 {
    text-transform: uppercase;
    font-size: 1.5rem;
}

footer .footer-divs .footer-div-2 p {
    text-transform: capitalize;
}

footer .footer-divs .footer-div-3 {
    gap: 1.4rem;
}

footer .footer-divs .footer-div-3 h2 {
    text-transform: uppercase;
    font-size: 1.5rem;
}

footer .footer-divs .footer-div-3 p {
    text-transform: capitalize;
    font-size: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

footer .footer-divs .footer-div-3 address {
    text-transform: capitalize;
    font-size: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}


footer .footer-divs .footer-div-4 h2 {
    text-transform: uppercase;
    font-size: 1.5rem;
}

footer .footer-divs .footer-div-4 {
    gap: 2rem;
}

footer .footer-divs .footer-div-4 form {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

footer .footer-divs .footer-div-4 form input {
    padding: var(--padding-medium) var(--padding-large);
}

footer .footer-divs .footer-div-4 form input[type="submit"] {
    text-transform: uppercase;
    background-color: var(--logo-color);
    color: var(--text-color-secondary);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

footer .footer-social {
    display: flex;
    gap: 3rem;
}

footer .footer-social .footer-icon {
    border: 2px solid var(--text-color-secondary);
    padding: var(--padding-medium);
    transition: .5s all ease;
}

footer .footer-social .footer-icon:hover {
    border: 2px solid var(--secondary-color);
    background-color: var(--secondary-color);
    scale: 1.5;
}

footer .footer-social .footer-icon i {
    color: var(--text-color-secondary);
    transition: .5s all ease;
}

footer .footer-social .footer-icon i:hover {
    color: var(--text-color-secondary);
    scale: 1.5;
}

@media screen and (max-width:922px) {

    footer .footer-divs {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        margin-bottom: 1rem;
    }

    footer .footer-social {
        flex-wrap: wrap;
        justify-content: center;
    }

}

@media screen and (max-width:600px) {

    footer .footer-divs {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 1rem;
    }

    footer .footer-divs .footer-div {
        align-items: center;
    }

}



/* address section css */

.address {
    /* background-image: url("../images/about-texture-dark.png"); */
    background-color: var(--text-color-primary);
    padding: var(--padding-medium);
    width: 100%;
}

.address .address-divs {
    width: 100%;
    color: var(--text-color-secondary);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: var(--padding-medium);
    gap: 1rem;

}

.address .address-divs .address-div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.address .address-divs .address-div .address-div-icon {
    background-color: var(--logo-color);
    padding: var(--padding-large);
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.address .address-divs .address-div .address-div-icon i {
    font-size: 1.5rem;
    color: var(--text-color-secondary);
}

.address .address-divs .address-div .address-div-data {
    display: flex;
    flex-direction: column;
}

.address .address-divs .address-div .address-div-data p {
    white-space: nowrap;
}

.address .address-divs .address-div:nth-child(2) .address-div-data p:nth-child(2) {
    white-space: nowrap;
}

@media screen and (max-width: 922px) {
    .address .address-divs {
        grid-template-columns: 1fr 1fr;
        /* 2 columns for tablets */
    }
}

@media screen and (max-width: 576px) {
    .address .address-divs {
        grid-template-columns: 1fr;
        /* Stack items on small screens */
    }

    .address .address-divs .address-div {
        flex-direction: column;
        /* Stack icon and text vertically */
        align-items: center;
    }

    .address .address-divs .address-div .address-div-data {
        align-items: center;
    }

    .address .address-divs .address-div .address-div-data p {
        text-align: center;
    }

    .address .address-divs .address-div .address-div-icon {
        width: 4rem;
        height: 4rem;
        padding: var(--padding-small);
        /* Adjust padding for smaller icons */
    }
}


/* contact css */

#contact {
    display: flex;
    flex-direction: column;
    margin-top: var(--margin-top);
}

.error-message {
    color: red;
    font-size: 0.8em;
}

#contact .contact-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#contact .contact-heading h2 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 900;
    position: relative;
    color: var(--logo-color);
}

#contact .contact-heading h3 {
    font-size: 3rem;
}

#contact .contact-heading h3 span {
    color: var(--logo-color);
}

#contact .contact-heading h2::before {
    content: 'contact';
    position: absolute;
    font-size: 6rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px var(--text-color-primary);
    color: transparent;
    opacity: .2;
}



#contact .contact-container {
    display: flex;
    padding: var(--padding-large);
}

#contact .contact-container .contact-left {
    width: 50%;
    display: flex;
    flex-direction: column;
}

#contact .contact-container .contact-left .contact-left-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#contact .contact-container .contact-left .contact-left-heading h2 {
    text-transform: capitalize;
    font-size: 1rem;
}

#contact .contact-container .contact-left .contact-left-heading h3 {
    text-transform: capitalize;
    font-size: 2.5rem;
}

#contact .contact-container .contact-left .contact-left-form form {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    padding: var(--padding-large);
}

#contact .contact-container .contact-left .contact-left-form form .form-div {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

#contact .contact-container .contact-left .contact-left-form form .form-div .input-div {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(0, 0, 0, 0.192);
    padding: var(--padding-small);
    width: 100%;
}

#contact .contact-container .contact-left .contact-left-form form .form-div .input-div input {
    width: 100%;
}

#contact .contact-container .contact-left .contact-left-form form .form-div .input-div textarea {
    display: block;
}

#contact .contact-container .contact-left .contact-left-form form .form-div .input-div i {
    color: var(--logo-color);
}

#contact .contact-container .contact-left .contact-left-form form .form-div .input-div input::placeholder {
    text-transform: capitalize;
}

#contact .contact-container .contact-left .contact-left-form form .form-div .input-div textarea::placeholder {
    text-transform: capitalize;
}

#contact .contact-container .contact-left .contact-left-form form .form-textarea {
    width: 100%;
    display: flex;
    justify-content: start;
}

#contact .contact-container .contact-left .contact-left-form form .form-textarea .input-div {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
}

#contact .contact-container .contact-left .contact-left-form form .form-textarea .input-div i {
    margin-top: .2rem;
}

#contact .contact-container .contact-left .contact-left-form form .form-textarea .input-div textarea {
    width: 100%;
}

#contact .contact-container .contact-left .contact-left-form form input[type="submit"] {
    padding: 1rem 4rem;
    background-color: var(--logo-color);
    text-transform: uppercase;
    color: var(--text-color-secondary);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

@media screen and (max-width:922px) {

    #contact .contact-container {
        flex-direction: column;
    }

    #contact .contact-container .contact-left {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #contact .contact-heading h3 {
        text-align: center;
    }

    #contact .contact-container .contact-left .contact-left-heading h3 {
        text-align: center;
    }

}

@media screen and (max-width:576px) {
    #contact .contact-container .contact-left .contact-left-form form {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 1rem;
        padding: var(--padding-small);
    }

}

@media screen and (max-width:400px) {

    #contact .contact-container .contact-left .contact-left-form form .form-div {
        flex-direction: column;
    }

}





/* about section */


.header-about {
    display: flex;
    justify-content: space-between;
}

.header-about nav {
    display: block;
}

.header-about nav ul {
    flex-wrap: nowrap;
    padding-left: 0px;
}

.contact-upper.service-upper {
    margin-top: 6rem;
}

.about-banner {
    background-image: url("../images/about-texture-dark.png");
    padding: 4rem var(--padding-large);
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 3rem; */
}

.about-banner h1 {
    text-transform: uppercase;
    color: var(--text-color-secondary);
}



@media screen and (max-width:922px) {
    .header-about nav ul li a {
        font-size: 2vw;
    }
}

@media screen and (max-width:768px) {
    .header-about {
        flex-direction: column;
    }

    .header-about nav ul li a {
        font-size: 2vw;
    }
}

@media screen and (max-width:500px) {
    .header-about {
        flex-direction: column;
        padding: 0;
    }

    .header-about nav ul {
        gap: 4vw;
        flex-wrap: wrap;
    }

    .header-about nav ul li a {
        font-size: 1rem;
    }

    .contact-upper.service-upper {
        margin-top: 10rem;
    }

}



/* services */
.service-boxes {
    padding: var(--padding-large);
    display: flex;
    justify-content: space-between;
    margin-top: var(--margin-top);
}

.service-boxes .box a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-size: 3rem;
    text-transform: uppercase;
    color: var(--secondary-color);
}



/* commercial css code */
.commercial {
    padding: 5rem;
    background-image: url("../images/about-texture-light-1\ \(1\).jpg");
}

.commercial h1 {
    font-size: 5rem;
    color: var(--text-color-primary);
    text-align: center;
}

.commercial-boxes {
    display: grid;
    width: 100%;
    padding: var(--padding-large);
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.commercial-boxes .commercial-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.commercial-boxes .commercial-box h2 {
    font-size: 1.5rem;
}

.commercial-boxes .commercial-box p {
    font-size: 1rem;
    text-transform: capitalize;
    text-align: justify;
    word-break: break-all;
}

.commercial-boxes .commercial-box-image {
    box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
}

.commercial-boxes .commercial-box-image:nth-child(odd) {
    box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}

.commercial-boxes .commercial-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}

@media screen and (max-width:922px) {
    .commercial-boxes {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .commercial h1 {
        font-size: 3rem;
        color: var(--text-color-primary);
    }

}


/* amc css code */

.amc {
    padding: var(--padding-large);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.amc h2 {
    text-transform: uppercase;
}

.amc p {
    text-align: justify;
    word-break: keep-all;
    text-transform: capitalize;
}


.table-amc {
    padding: var(--padding-large);
}

th,
td {
    text-transform: uppercase !important;
}



/* contact */
.contact-map {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-medium);
    margin-top: var(--margin-top);
}

.contact-map iframe {
    width: 100%;
}