/* =========================================================
   SHREE GANPATI INFOTECH
   GENERAL CSS
========================================================= */


/* =========================================================
   COLOR SYSTEM
========================================================= */

:root {

    --blue: #2D4354;

    --sage: #73766A;

    --peach: #FED7A5;

    --terra: #9E6752;

    --brown: #534145;

    --black: #20212B;

    --white: #ffffff;

    --soft: #f7f6f2;

    --line: rgba(45, 67, 84, .13);

    --shadow:
        0 20px 60px rgba(32, 33, 43, .10);

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    background: var(--soft);

    color: var(--black);

    overflow-x: hidden;

}


body.no-scroll {

    overflow: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
textarea,
select {

    font-family: inherit;

}


button {

    border: 0;
    border-radius: 8px;
    padding: 8px;
    margin: 4px;

}


button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline: 2px solid var(--terra);

    outline-offset: 3px;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(
        1380px,
        calc(100% - 70px)
    );

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   COMMON BUTTON
========================================================= */

.btn-main,
.btn-outline,
.banner-button {

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.btn-main:hover,
.btn-outline:hover,
.banner-button:hover {

    text-decoration: none;

}


/* =========================================================
   COMMON RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .container {

        width:
            min(
                100% - 45px,
                1380px
            );

    }

}


@media (max-width: 600px) {

    .container {

        width:
            calc(100% - 28px);

    }

}