/* ---- Fonts ---- */

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_thin-webfont.woff) format(woff);
    src: url(fonts/gelion_thin-webfont.woff2) format(woff2);
    font-weight: 100;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_light-webfont.woff) format(woff);
    src: url(fonts/gelion_light-webfont.woff2) format(woff2);
    font-weight: 300;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_regular-webfont.woff) format(woff);
    src: url(fonts/gelion_regular-webfont.woff2) format(woff2);
    font-weight: 400;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_medium-webfont.woff) format(woff);
    src: url(fonts/gelion_medium-webfont.woff2) format(woff2);
    font-weight: 500;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_semibold-webfont.woff) format(woff);
    src: url(fonts/gelion_semibold-webfont.woff2) format(woff2);
    font-weight: 600;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_bold-webfont.woff) format(woff);
    src: url(fonts/gelion_bold-webfont.woff2) format(woff2);
    font-weight: 700;
}

@font-face {
    font-family: Gelion;
    src: url(fonts/gelion_black-webfont.woff) format(woff);
    src: url(fonts/gelion_black-webfont.woff2) format(woff2);
    font-weight: 900;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-regular-webfont.woff) format(woff);
    src: url(fonts/poppins-regular-webfont.woff2) format(woff2);
    font-weight: 400;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-medium-webfont.woff) format(woff);
    src: url(fonts/poppins-medium-webfont.woff2) format(woff2);
    font-weight: 500;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-semibolditalic-webfont.woff) format(woff);
    src: url(fonts/poppins-semibolditalic-webfont.woff2) format(woff2);
    font-weight: 600;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-bold-webfont.woff) format(woff);
    src: url(fonts/poppins-bold-webfont.woff2) format(woff2);
    font-weight: 700;
}

@font-face {
    font-family: Poppins;
    src: url(fonts/poppins-extrabold-webfont.woff) format(woff);
    src: url(fonts/poppins-extrabold-webfont.woff2) format(woff2);
    font-weight: 800;
}

/* ---- Fonts ---- */

/* ---- Pre-requisites ---- */

html {
    font-size: 62.5%;
    /*This changes the base rem size (i.e., 1rem = 16px) ;
    62.5% of 16px = 10px;
    Thus the new base rem size is 10px (i.e., now 1rem = 10px)*/
}

/* <==== Stylesheet ====> */

:root {

    /* <---- Colors ----> */
    --primary-color: #;
    --secondary-color: #442218;
    --white-color: #fff;
    --dark-color: #20221e;
    --section-bg: #58595b;
    --bg1: #f4f5f9;
    --slider: #192a35;

    /* ---- CTA button ---- */
    --cta: #dd0000;

    /* ---- Nav Colors ---- */
    --nav-content: #231f20;
    --nav-hover: #f0551f;

    /* <---- Font size ----> */
    --font-small: 1.8rem;
    --font-medium: 2rem;
    --font-large: 2.4rem;
    --font-xlarge: 3.2rem;
    --font-title: 5rem;
    --font-button: 1.8rem;
    --hero-large: 5rem;
    --hero-medium: 4.4rem;
    --hero-small: 4rem;
    --hero-xsmall: 2.4rem;
    --hero-content: 2rem;

    /* <---- Fonts ----> */
    --font: 'Gelion', sans-serif;
    --secondary-font: 'Poppins', sans-serif;

    /* <---- Gap ----> */
    --marquee-gap: 1rem;
}

/* <==== Stylesheet close ====> */

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

/* <======== Utilities ========> */

body {
    font-family: var(--font);
}

header {
    background-color: var(--white-color);
}

ul {
    list-style: none;
    font-size: var(--font-small);
}

a {
    text-decoration: none;
}

nav {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-left: 20rem;
}

.btn {
    font-size: var(--font-small);
    display: flex;
    justify-content: space-between;
    color: var(--nav-content);
}

/*nav buttons for tablet view and mobile view*/

button {
    padding: 1.2rem 2.4rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.2rem;
    border-color: var(--dark-color);
    background-color: transparent;
    font-family: 'Gelion', sans-serif;
    font-size: var(--font-button);
    cursor: pointer;
    object-fit: contain;
}

/*nav button for desktop view*/

.title {
    color: var(--secondary-color);
    font-size: var(--font-title);
    font-weight: 300;
}

footer {
    position: relative;
    display: flex;
    width: 100%;
    background-color: var(--section-bg);
}

/* <======== Utilities close ========> */


/* ---- CSS Main ---- */


/* <======== Navbar ========> */

.container {
    display: flex;
    max-width: auto;
    width: 100%;
    padding: 1.6rem 1.6rem;
}

.logo {
    width: auto;
    max-height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    position: relative;
    width: 70%;
    max-width: 20rem;
    object-fit: contain;
}

nav ul {
    display: flex;
    width: 100%;
    margin: 0rem 2rem;
    justify-content: space-between;
    align-items: center;
}

nav .btn {
    display: none;
}

nav li {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

nav li a {
    color: var(--nav-content);
}

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

nav li a button {
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

nav li a img {
    position: relative;
    justify-content: center;
    width: 12%;
    max-width: 1.8rem;
    object-fit: cover;
}

nav button:hover {
    color: var(--white-color);
    background-color: var(--nav-hover);
    border: none;
    font-size: var(--font-small);
}

/* ---- Responsive navbar settings ---- */

@media (max-width:1393px) {}

/* <======== Navbar close ========> */

/* <======== Slides ========> */

.hero-sldier {
    position: relative;
    display: flex;
    width: 100%;
}

.slider-container {
    display: flex;
    width: 100%;
    height: 64rem;
    font-family: var(--secondary-font);
}

.slide1 {

    background-image: url(assets/Home/Slider/Slide\ 1.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;

    color: var(--white-color);
}

.slide1 .content1 {
    display: flex;
    align-items: center;
    padding: 24rem 10rem 0;
    font-size: var(--hero-large);
    font-weight: 600;
}

.slide1 .cta {
    margin-left: 10rem;
    background-color: var(--cta);
    border: none;
    color: var(--white-color);
}

.slide2 {

    background-image: url(assets/Home/Slider/Slide\ 2.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 64rem;
    color: var(--slider);
}

.slide2 .content2 {
    display: flex;
    flex-direction: column;
    padding: 24rem 10rem 0;
}

.content2 h2 {
    font-size: var(--hero-large);
}

.content2 h3 {
    font-size: var(--hero-small);
    font-weight: 400;
}

.slide3 {

    background-image: url(assets/Home/Slider/Slide\ 3.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 64rem;
    color: var(--white-color);
}

.slide3 .content3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: 18rem 10rem 0;
}

.content3 .heading {
    text-align: center;
    font-size: var(--hero-medium);
}

.content3 hr {
    width: 45rem;
}

.subtitle {
    text-align: center;
    font-size: var(--hero-xsmall);
    line-height: 3.2rem;
}

.text-content {
    text-align: center;
    font-size: var(--hero-content);
    line-height: 2.4rem;
    font-style: italic;
    font-weight: 600;
}

.slide3 .cta {
    background-color: var(--cta);
    border: none;
    color: var(--white-color);
}


/* <======== Slides close ========> */

/* <======== We Own ========> */

.we-own {
    display: flex;
    flex-direction: column;
    max-width: auto;
    width: 100%;
    padding: 6rem 0;
    gap: 4rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.we-own .title {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--marquee-gap);
}

.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-width: 100%;
    gap: var(--marquee-gap);
}

.marquee__content li img {
    position: relative;
    width: 100%;
    max-width: 12rem;
    object-fit: contain;
}

.marquee__content hr {
    position: relative;
    width: 0.1rem;
    height: 10rem;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-color);
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--marquee-gap)));
        /* match 1 rem to gap above */
    }
}

.scroll {
    animation: scroll 10s linear infinite;
}

/* <======== We Own close ========> */

/* <======== Counter ========> */

.counter-section {
    display: flex;
    width: 100%;
    max-width: auto;
    justify-content: center;
    align-items: center;
}

.counter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

.counter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem;
}

.counter .image {
    width: 100%;
    max-width: 12rem;
    height: 12rem;
}

.counter img {
    width: 100%;
    object-fit: contain;
}

.counter .data {
    font-size: var(--font-xlarge);
    font-weight: 300;
    color: var(--section-bg);
}

.counter .data span {
    width: 60%;
    font-weight: 500;
}

/* <======== Counter close ========> */

/* <======== About ========> */

.about-section {
    display: flex;
    width: 100%;
    max-width: auto;
}

.about-container {
    display: flex;
    margin: 4rem 12rem;
    gap: 4rem;
}

.about-container .image {
    width: 100%;
    justify-items: center;
    align-items: center;
}

.about-container .image img {
    width: 80%;
    object-fit: contain;
}

.about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    font-size: var(--font-medium);
    color: var(--secondary-color);
}

.design {
    position: absolute;
    z-index: 1;
    padding-top: 32rem;
}

.design img {
    width: 60%;
    height: auto;
}

/* <======== About close ========> */
/* <======== What we do ========> */

.service-section {
    max-width: auto;
    padding: 6rem 0;
    text-align: center;
    background-color: var(--bg1);
}

.service-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.service-container button {
    display: inline-block;
    border: none;
}

.service-container button img {
    width: 60%;
    padding: 2rem;
    height: auto;
    cursor: pointer;
}

.content {
    display: flex;
    width: 100%;
    min-width: 20rem;
    color: var(--secondary-color);
}

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

.ib-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ib-image img {
    width: 100%;
    max-width: 30rem;
}

.content-title {
    font-size: var(--font-xlarge);
    font-weight: 500;
    margin-top: 1.2rem;
}

.description {
    margin-top: 1rem;
    font-size: var(--font-medium);
}

.slick-slide {
    display: inline-block;
}

.slick-prev,
.slick-next {
    display: none !important;
}

/* <======== What we do close ========> */

/* <======== Business banner ========> */

.banner-section {
    display: flex;
    width: 100%;
}

.banner-container {
    position: relative;
    background-image: url(assets/Home/Business-banner/business-banner\ image.webp);
    background-size: cover;
    background-position: center;
    display: block;
    width: 100%;
    height: 36rem;
}

.banner-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 2, 2, 0.6);
    pointer-events: none;
}

.banner-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    justify-content: center;
    align-items: center;
    padding: 7rem 0;
}

.banner-title {
    text-align: center;
    font-size: 6rem;
    font-weight: 900;
    color: var(--white-color);
    z-index: 2;
}

.banner-content {
    margin-top: 1rem;
    font-size: var(--font-xlarge);
    color: var(--white-color);
    z-index: 2;
}

.cta {
    margin-top: 2rem;
    z-index: 2;
}

.cta button {
    font-size: var(--font-button);
    border: none;
    background-color: var(--cta);
    color: var(--white-color);
}

/* <======== Business banner close ========> */

/* <======== Info-box ========> */



/* <======== Info-box close ========> */
/* <======== Blogs ========> */
/* <======== Blogs close ========> */

/* <======== Footer ========> */

.design-foot {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding-top: 290rem;
}

.design-foot img {
    width: 70%;
    height: auto;
}

.footer-container {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 8rem 0;
}

.quick-links {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    font-size: var(--font-large);
    font-weight: 500;
    color: var(--white-color);
}

.footer-navbar ul {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    font-size: var(--font-medium);
    font-weight: 400;
}

.footer-navbar ul li a {
    color: var(--white-color);
}

.details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-logo {
    position: relative;
    width: 60%;
    justify-content: center;
    align-items: center;
    object-fit: contain;
}

.footer-logo .image {
    width: 40%;
}

.location {
    display: flex;
    font-size: var(--font-medium);
    font-weight: 400;
    color: var(--white-color);
    object-fit: contain;
    gap: 1rem;
}

.location img {
    width: 8%;
    justify-content: center;
}

.contact {
    display: flex;
    font-size: var(--font-medium);
    font-weight: 400;
    color: var(--white-color);
    object-fit: contain;
    gap: 1rem;
    align-items: center;
}

.contact img {
    width: 8%;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    font-size: var(--font-large);
    font-weight: 500;
    color: var(--white-color);
    gap: 4rem;
}

form {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    font-size: var(--font-small);
    font-weight: 400;
    gap: 1.2rem;
}

label {
    display: flex;
    font-weight: 400;
    padding-bottom: 0.4rem;
}

input {
    width: 100%;
    padding: 1rem;
    border-radius: 1.2rem;
    border-color: transparent;
    font-size: var(--font-small);
}

textarea {
    width: 100%;
    height: 8rem;
    padding: 1rem;
    border-radius: 1.2rem;
    font-size: var(--font-small);
}

input::placeholder {
    font-family: 'Gelion', sans-serif;
    /* Change font family */
    opacity: 0.6;
    /* Ensure full opacity, as some browsers default to lower opacity */
}

textarea::placeholder {
    font-family: 'Gelion', sans-serif;
    /* Change font family */
    opacity: 0.6;
    /* Ensure full opacity, as some browsers default to lower opacity */
}

form button {
    color: var(--white-color);
    border-color: var(--white-color);
    box-shadow: none;
}

.social-media {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.social-media .title {
    font-size: var(--font-large);
    font-weight: 500;
    color: var(--white-color);
}

.media-icons {
    position: relative;
    display: flex;
    width: 100%;
    gap: 2rem;
    align-items: center;
}

.media-icons a {
    color: var(--white-color);
}

.media-icons a i {
    font-size: var(--font-large);
}

/* <======== Footer close ========> */
/* <======== Copyrights ========> */

.copyrights-section {
    width: 100%;
    padding: 0.8rem;
}

.copyrights-container {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.copy-icon {
    font-size: var(--font-xlarge);
}

.copyrights-container p {
    font-size: var(--font-small);
    font-weight: 400;
}

/* <======== Copyrights Close ========> */
/* <========  ========> */