/* ---- 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;
    --footer: #58595b;
    --section-bg: #c7ddeb20;
    --bg1: #f4f5f9;
    --slider: #192a35;
    --infobox1: #f7ac47;
    --infobox2: #ffcb05;
    --infobox3: #f5824c;

    /* ---- 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-xxlarge: 4.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: 500;
}

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

/* <======== 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;
    cursor: pointer;
}

.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 ========> */

/* <======== Pageheader ========> */

.pageheader {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-family: var(--font);
    font-size: var(--font-title);
    color: var(--white-color);
}

.page-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 8rem 0;
    background-position: center;
    background-size: cover;
}

/* <======== Pageheader close ========> */

/* <======== Tagline ========> */

.tagline {
    display: flex;
    width: 100%;
    max-width: auto;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-color);
}

.text-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 4rem 0;
    margin: 0 20rem;
    gap: 2rem;
}

.text {
    width: 100%;
    font-family: var(--font);
    font-size: var(--font-xxlarge);
    font-weight: 500;
    text-align: center;
}

.text-container hr {
    height: 0.1rem;
    background-color: var(--secondary-color);
    border: none;
}

/* <======== Tagline close ========> */

/* <======== Passion to begin ========> */

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

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

.about-container .about-image {
    width: 100%;
    object-position: center;
}

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

.about {
    display: flex;
    flex-direction: column;
    padding-right: 9rem;
    gap: 1.6rem;
    font-size: var(--font-medium);
    color: var(--secondary-color);
}

/* <======== Passion to begin close ========> */

/* <======== Multiple brands ========> */

.multiplebrands {
    text-align: center;
    padding: 2rem;
    color: var(--secondary-color);
}

.mb-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
    margin: 4rem 20rem;

}

.mb-container>div {
    border-radius: 1.6rem;
    padding: 2rem;
    width: 100%;
    max-width: 32rem;
    text-align: center;
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mb1 {
    background-color: var(--infobox1);
    color: var(--white-color);
}

.mb2 {
    background-color: var(--infobox2);
    color: var(--secondary-color);
}

.mb3 {
    background-color: var(--infobox3);
    color: var(--white-color);
}

.mb-image {
    overflow: hidden;
    border-radius: 1.6rem;
    margin-bottom: 1.6rem;
    width: 100%;
}

.mb-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.6rem;
}

.mb-content {
    font-size: var(--font-medium);
}

/* <======== Multiple brands close ========> */

/* <======== First step in industry ========> */

.section {
    display: flex;
    background-color: var(--section-bg);
}

.section .container {
    display: flex;
    flex-direction: column;
    margin: 4rem 20rem;
    align-items: center;
}

.container .title {
    padding: 1rem 2rem;
    border-radius: 1.2rem;
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.contents {
    display: flex;
    flex-direction: column;
    margin: 4rem 0;
}

.contents .content {
    display: flex;
    padding: 0 1rem;
    font-size: var(--font-large);
}

.contents .content .image {
    object-fit: cover;
}

.content .image img {
    width: 100%;
}

.content .description {
    padding: 8rem   ;
    justify-content: center;
}

/* <======== First step in industry close ========> */

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

.design-foot {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding-top: 284rem;
}

.design-foot img {
    width: 50%;
    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 {
    position: relative;
}

.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 ========> */