/* =========================================================
   ORGANICCO LTD
   main.css
   Bootstrap 4.4.1 compatible
   2026 Website Branding

   Heading font: Public Sans
   Body font:    Inter

   IMPORTANT:
   Load this file AFTER bootstrap-4.4.1.css
   ========================================================= */


/* =========================================================
   1. SELF-HOSTED FONTS
   ========================================================= */


/* Inter - body copy */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* Public Sans - Regular */
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans/PublicSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Public Sans - SemiBold */
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans/PublicSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* Public Sans - Bold */
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans/PublicSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   2. ORGANICCO BRAND VARIABLES

   These are Organicco variables, not Bootstrap 5 variables.
   They are safe to use with Bootstrap 4.4.1.
   ========================================================= */

:root {

    /* Brand colours */
    --oc-primary: #2e2e84;
    --oc-primary-dark: #25256f;
    --oc-primary-darker: #202060;

    --oc-green: #3ca934;
    --oc-green-dark: #328e2c;

    /* Text */
    --oc-text: #0f172a;
    --oc-heading: #111827;
    --oc-muted: #64748b;
	
	--oc-green: #3ca934;
    --oc-green-text: #2e7d32;

    /* Backgrounds */
    --oc-background: #ffffff;
    --oc-light: #f7f9fc;
    --oc-soft: #f3f5f9;

    /* Borders */
    --oc-border: #e6eaf2;

    /* Fonts */
    --oc-font-body:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --oc-font-heading:
        "Public Sans",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   3. DOCUMENT / BODY
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: var(--oc-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;

    color: var(--oc-text);
    background-color: var(--oc-background);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.navbar-brand {
    font-family: var(--oc-font-heading);
    color: var(--oc-heading);
}


/* H1 */

h1,
.h1 {
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}


/* H2 */

h2,
.h2 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}


/* H3 */

h3,
.h3 {
    font-size: 1.45rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.015em;
}


/* H4 */

h4,
.h4 {
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
}


/* H5 */

h5,
.h5 {
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.35;
}


/* H6 */

h6,
.h6 {
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.4;
}


/* Bootstrap display headings */

.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--oc-font-heading);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}


/*
   These are included in case your new pages
   already use display-5 or display-6.

   Bootstrap 4 itself does not define these.
*/

.display-5 {
    font-family: var(--oc-font-heading);
    font-size: 2.5rem;
    font-weight: 700;

    line-height: 1.1;
    letter-spacing: -0.025em;
}

.display-6 {
    font-family: var(--oc-font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}


/* Body text */

p {
    margin-top: 0;
    margin-bottom: 1rem;
}


/* Lead text */

.lead {
    font-family: var(--oc-font-body);
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.65;

    color: #475569;
}


/* Small text */

small,
.small {
    line-height: 1.5;
}


/* Muted text */

.text-muted {
    color: var(--oc-muted) !important;
}


/* =========================================================
   5. LINKS
   ========================================================= */

a {
    color: var(--oc-primary);
    text-decoration: none;

    transition:
        color 150ms ease,
        opacity 150ms ease;
}

a:hover,
a:focus {
    color: var(--oc-primary-dark);
    text-decoration: none;
}


/* Bootstrap utility override */

.text-primary {
    color: var(--oc-primary) !important;
}

.text-success {
    color: var(--oc-green) !important;
}


/* =========================================================
   6. NAVIGATION
   ========================================================= */

.navbar {
    font-family: var(--oc-font-body);
    font-size: 0.95rem;
}


/* Brand */

.navbar-brand {
    font-family: var(--oc-font-heading);
    font-weight: 700;
    letter-spacing: -0.015em;
}


/* Main navigation */

.navbar .nav-link {
    position: relative;

    color: #334155;

    font-weight: 500;

    transition:
        color 150ms ease;
}


.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item.active .nav-link,
.navbar .nav-link.active {
    color: var(--oc-primary);
}


/* Navigation underline */

.navbar .nav-link::after {
    content: "";

    position: absolute;

    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;

    height: 2px;

    background-color: var(--oc-primary);

    transform: scaleX(0);
    transform-origin: left;

    transition:
        transform 160ms ease;
}


.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.navbar .nav-item.active .nav-link::after,
.navbar .nav-link.active::after {
    transform: scaleX(1);
}


/* Keyboard accessibility */

.navbar .nav-link:focus-visible {
    outline: 2px solid var(--oc-primary);
    outline-offset: 3px;
    border-radius: 4px;
}


/* =========================================================
   7. NAVIGATION CTA
   ========================================================= */

.nav-cta a.small {
    color: #52527d !important;
    text-decoration: none !important;
}

.nav-cta a.small:hover,
.nav-cta a.small:focus {
    color: var(--oc-primary) !important;
}


/* =========================================================
   8. BUTTONS
   Bootstrap 4 compatible
   ========================================================= */

.btn {
    font-family: var(--oc-font-body);

    font-weight: 600;

    border-radius: 0.7rem;

    padding: 0.65rem 1.1rem;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}


.btn:hover {
    transform: translateY(-1px);
}


/* Primary button */

.btn-primary {
    color: #ffffff;

    background-color: var(--oc-primary);
    border-color: var(--oc-primary);
}


.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;

    background-color: var(--oc-primary-dark);
    border-color: var(--oc-primary-dark);
}


.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #ffffff;

    background-color: var(--oc-primary-darker);
    border-color: var(--oc-primary-darker);
}


.btn-primary:focus,
.btn-primary.focus {
    box-shadow:
        0 0 0 0.2rem rgba(46, 46, 132, 0.18);
}


/* Outline primary */

.btn-outline-primary {
    color: var(--oc-primary);

    border-color: var(--oc-primary);
}


.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff;

    background-color: var(--oc-primary);
    border-color: var(--oc-primary);
}


/* Success button */

.btn-success {
    color: #ffffff;

    background-color: var(--oc-green);
    border-color: var(--oc-green);
}


.btn-success:hover,
.btn-success:focus {
    color: #ffffff;

    background-color: var(--oc-green-dark);
    border-color: var(--oc-green-dark);
}


/* Outline success */

.btn-outline-success {
    color: var(--oc-green);

    border-color: var(--oc-green);
}


.btn-outline-success:hover,
.btn-outline-success:focus {
    color: #ffffff;

    background-color: var(--oc-green);
    border-color: var(--oc-green);
}


/* Bootstrap background utilities */

.bg-primary {
    background-color: var(--oc-primary) !important;
}

.bg-success {
    background-color: var(--oc-green) !important;
}


/* =========================================================
   9. CARDS
   ========================================================= */

.card {
    border: 1px solid var(--oc-border);

    border-radius: 0.9rem;

    background-color: #ffffff;
}


.card-title {
    font-family: var(--oc-font-heading);

    font-weight: 650;
}


/*
   Keep Bootstrap card behaviour.
   object-fit improves photographs where HTML specifies height.
*/

.card-img,
.card-img-top {
    object-fit: cover;
}


/* =========================================================
   10. TEAM PHOTOGRAPHS
   ========================================================= */

/*
   Add team-photo to the existing image class.

   Example:

   <img class="card-img img-thumbnail team-photo"
        src="/images/Udaydeep-Singh-Chandhok.jpg"
        height="200"
        alt="Udaydeep Singh Chandhok">
*/

.team-photo {
    -webkit-filter:
        grayscale(100%)
        contrast(105%);

    filter:
        grayscale(100%)
        contrast(105%);

    object-fit: cover;
    object-position: center top;
}


/*
   OPTIONAL:

   If you later want photographs to become colour
   when somebody moves the mouse over them,
   uncomment the following section.


.team-photo {
    transition: filter 350ms ease;
}

.team-photo:hover {
    -webkit-filter:
        grayscale(0%)
        contrast(100%);

    filter:
        grayscale(0%)
        contrast(100%);
}

*/


/* =========================================================
   11. IMAGE THUMBNAILS
   ========================================================= */

.img-thumbnail {
    padding: 0.2rem;

    background-color: #ffffff;

    border:
        1px solid var(--oc-border);

    border-radius: 0.5rem;
}


img {
    max-width: 100%;
}


/* =========================================================
   12. PRODUCT NAME BRANDING
   ========================================================= */

/*
   Organicco product convention:

   eco = lowercase italic
   product identifier = uppercase

   Example HTML:

   <span class="product-name">
       <span class="eco">eco</span>DRYER
   </span>
*/

.product-name {
    font-family: var(--oc-font-heading);

    font-weight: 700;

    letter-spacing: -0.01em;
}


.product-name .eco,
.eco {
    font-style: italic;
    text-transform: lowercase;
}


/* =========================================================
   13. BADGES
   ========================================================= */

.badge {
    font-family: var(--oc-font-body);

    font-weight: 600;

    border-radius: 50rem;
}


/* =========================================================
   14. FORMS
   ========================================================= */

.form-control,
.custom-select {
    font-family: var(--oc-font-body);

    color: var(--oc-text);

    border-color: #dce1ea;

    border-radius: 0.55rem;
}


.form-control:focus,
.custom-select:focus {
    color: var(--oc-text);

    border-color: rgba(46, 46, 132, 0.55);

    box-shadow:
        0 0 0 0.2rem rgba(46, 46, 132, 0.10);
}


label {
    font-weight: 500;

    color: #334155;
}


/* =========================================================
   15. DROPDOWN MENU
   ========================================================= */

.dropdown-menu {
    border:
        1px solid var(--oc-border);

    border-radius: 0.65rem;

    box-shadow:
        0 0.75rem 2rem rgba(15, 23, 42, 0.08);
}


.dropdown-item {
    font-size: 0.95rem;

    color: #334155;
}


.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--oc-primary);

    background-color: #f6f6fb;
}


.dropdown-item.active,
.dropdown-item:active {
    color: #ffffff;

    background-color: var(--oc-primary);
}


/* =========================================================
   16. MODALS
   ========================================================= */

.modal-content {
    border:
        1px solid var(--oc-border);

    border-radius: 0.9rem;
}


/* =========================================================
   17. TABLES
   ========================================================= */

.table {
    color: var(--oc-text);
}


.table thead th {
    font-family: var(--oc-font-heading);

    font-weight: 650;

    border-bottom-color: var(--oc-border);
}


.table td,
.table th {
    border-top-color: var(--oc-border);
}


/* =========================================================
   18. LIST GROUPS
   ========================================================= */

.list-group-item {
    border-color: var(--oc-border);
}


/* =========================================================
   19. HORIZONTAL RULES
   ========================================================= */

hr {
    border-top-color: var(--oc-border);

    opacity: 1;
}


/* =========================================================
   20. OPTIONAL ORGANICCO BACKGROUNDS

   These classes do NOT interfere with Bootstrap.
   Use them on new pages where required.
   ========================================================= */

.bg-organicco-light {
    background-color: var(--oc-light) !important;
}


.bg-organicco-soft {
    background-color: var(--oc-soft) !important;
}


.bg-organicco-primary {
    background-color: var(--oc-primary) !important;

    color: #ffffff;
}


.text-organicco {
    color: var(--oc-primary) !important;
}


/* =========================================================
   21. SECTION SPACING

   Optional class for new website sections.
   Existing Bootstrap padding classes remain untouched.
   ========================================================= */

.section-padding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}


@media (min-width: 992px) {

    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

}


/* =========================================================
   22. HERO

   Only applies if class="hero" is explicitly used.
   Will not alter existing sections automatically.
   ========================================================= */

.hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
}


.hero .lead {
    max-width: 46rem;
}


@media (min-width: 992px) {

    .hero {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

}


/* =========================================================
   23. VIDEO
   ========================================================= */

#video1 {
    width: 100%;

    object-fit: cover;
}


/* =========================================================
   24. FOOTER
   ========================================================= */

footer {
    font-family: var(--oc-font-body);

    font-size: 0.9rem;
}


footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    font-family: var(--oc-font-heading);
}


footer a {
    color: inherit;

    text-decoration: none;
}


footer a:hover,
footer a:focus {
    color: var(--oc-primary);

    text-decoration: none;
}


/*
   Existing Organicco footer company description
*/

footer .col-lg-4 > p.text-muted,
footer .col-lg-4 > ul.text-muted {

    font-size: 0.82rem !important;

    line-height: 1.5 !important;

    letter-spacing: 0.005em;

    color: #6b7280 !important;

    max-width: 23rem;

    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}


/* Existing footer logo */

footer .col-lg-4 img {
    width: 72px;

    height: auto;
}


/* =========================================================
   25. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline:
        2px solid var(--oc-primary);

    outline-offset: 3px;
}


/* =========================================================
   26. RESPONSIVE TYPOGRAPHY
   ========================================================= */

@media (min-width: 768px) {

    h1,
    .h1 {
        font-size: 2.4rem;
    }

    h2,
    .h2 {
        font-size: 1.9rem;
    }

}


@media (min-width: 1200px) {

    h1,
    .h1 {
        font-size: 2.65rem;
    }

    h2,
    .h2 {
        font-size: 2rem;
    }

}


/* =========================================================
   27. MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 991.98px) {

    /*
       Remove underline animation inside collapsed
       Bootstrap mobile navigation.
    */

    .navbar .nav-link::after {
        display: none;
    }

}


/* =========================================================
   28. MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    body {
        line-height: 1.6;
    }


    h1,
    .h1 {
        font-size: 1.9rem;
    }


    h2,
    .h2 {
        font-size: 1.55rem;
    }


    .display-1,
    .display-2,
    .display-3,
    .display-4 {
        font-size: 2rem;
    }


    .btn {
        padding:
            0.6rem 1rem;
    }

}


/* =========================================================
   29. REDUCED MOTION
   Accessibility preference
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}



/* =========================================================
   TEAM PROFILE TYPOGRAPHY
   Semantic H3/P with compact visual styling
   ========================================================= */

/* About page heading */
.about-title {
    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (max-width: 767.98px) {
    .about-title {
        font-size: 1.65rem;
    }
}


.team-name {
    font-family: "Public Sans", "Inter", Arial, sans-serif;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #2e2e84 !important;
    text-align: center !important;
    margin-top: 0.35rem;
    margin-bottom: 0.55rem;
}

.team-role {
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.9rem !important;
    font-weight: 600;
    font-style: italic;
    line-height: 1.35;
    color: #2e7d32 !important;
    text-align: center !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

.team-bio {
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 400;
}