/* ==========================================================
   MOHANKANTH.COM
   MAIN STYLESHEET
   Version: 1.0
========================================================== */


/* ==========================================================
   IMPORTS
========================================================== */

@import url("variables.css");
@import url("reset.css");
@import url("typography.css");
@import url("layout.css");
@import url("components.css");
@import url("utilities.css");
@import url("animations.css");
@import url("responsive.css");

/* About Page */
@import url("pages/about.css");
@import url("sections/about-journey.css");
@import url("sections/vision-mission.css");
@import url("sections/services-overview.css");
@import url("sections/core-values.css");
@import url("sections/career-timeline.css");
@import url("sections/skills-expertise.css");
@import url("sections/leadership-philosophy.css");
@import url("sections/about-faq.css");

/*Home Page  Sections */
@import url("sections/navigation.css");
@import url("sections/hero.css");
@import url("sections/founder.css");
@import url("sections/about-preview.css");
@import url("sections/mkzora-preview.css");
@import url("sections/projects-preview.css");
@import url("sections/gallery-preview.css");
@import url("sections/insights-preview.css");
@import url("sections/testimonials.css");
@import url("sections/cta.css");
@import url("sections/footer.css");

/* MKZORA Page */
@import url("pages/mkzora.css");

/* MKZORA Sections */
@import url("sections/mkzora-hero.css");
@import url("sections/our-story.css");
@import url("sections/about-mkzora.css");
@import url("sections/dvision-mission.css");
@import url("sections/services.css");
@import url("sections/process.css");
@import url("sections/industries.css");
@import url("sections/why-mkzora.css");
@import url("sections/commitment.css");
@import url("sections/mkzora-faq.css");



/* ==================================================
   PROJECTS PAGE
================================================== */

@import url("pages/projects.css");

@import url("sections/projects-hero.css");
@import url("sections/featured-projects.css");
@import url("sections/project-categories.css");
@import url("sections/project-showcase.css");
@import url("sections/development-process.css");
@import url("sections/technologies.css");
@import url("sections/client-success.css");
@import url("sections/projects-faq.css");



/* ==================================================
   GALLERY PAGE
================================================== */

@import url("pages/gallery.css");

@import url("sections/gallery-hero.css");
@import url("sections/gallery-categories.css");
@import url("sections/portfolio-gallery.css");
@import url("sections/design-showcase.css");
@import url("sections/behind-scenes.css");
@import url("sections/creative-process.css");
@import url("sections/gallery-faq.css");

/* ==================================================
   INSIGHTS PAGE
================================================== */

@import url("pages/insights.css");

@import url("sections/insights-hero.css");
@import url("sections/featured-articles.css");
@import url("sections/article-categories.css");
@import url("sections/latest-articles.css");
@import url("sections/learning-resources.css");
@import url("sections/newsletter.css");
@import url("sections/insights-faq.css");


/* ==================================================
   CONTACT PAGE
================================================== */

@import url("pages/contact.css");

@import url("sections/contact-hero.css");
@import url("sections/contact-info.css");
@import url("sections/contact-form.css");
@import url("sections/services-inquiry.css");
@import url("sections/contact-faq.css");
/* ==========================================================
   GLOBAL
========================================================== */

html {
    scroll-padding-top: 90px;
}

body {
    overflow-x: hidden;
}


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

main {
    display: block;
}


/* ==========================================================
   IMAGES
========================================================== */

img {
    user-select: none;
    -webkit-user-drag: none;
}


/* ==========================================================
   FORM ELEMENTS
========================================================== */

input,
textarea,
select {
    width: 100%;
}

textarea {
    min-height: 160px;
}


/* ==========================================================
   IFRAME
========================================================== */

iframe {
    width: 100%;
    border: 0;
}


/* ==========================================================
   UTILITIES
========================================================== */

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}

.overflow-hidden {
    overflow: hidden;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

:target {
    scroll-margin-top: 100px;
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}


/* ==========================================================
   SCROLLBAR
========================================================== */

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

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}