/* =========================================
   ROOT VARIABLES
========================================= */

:root {

    --green: #176b3a;

    --green2: #238b4e;

    --dark: #103b27;

    --lime: #dff3c7;

    --cream: #f7f8f1;

    --yellow: #f3b51b;

    --red: #d9534f;

    --ink: #173126;

    --muted: #68766f;

    --line: #e1e8df;

    --white: #ffffff;
}


/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    color: var(--ink);

    background: white;
}


h1,
h2,
h3,
h4,
.brand {

    font-family:
        "Plus Jakarta Sans",
        Inter,
        sans-serif;
}


h1,
h2,
h3,
h4,
p {

    margin-top: 0;
}


button,
input,
select {

    font-family: inherit;
}


button {

    cursor: pointer;
}


a {

    text-decoration: none;
}


/* =========================================
   TOP BAR
========================================= */

.topbar {

    background: var(--dark);

    color: #eaf6df;

    text-align: center;

    padding: 8px;

    font-size: 12px;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {

    height: 76px;

    display: flex;

    align-items: center;

    gap: 28px;

    padding: 0 5%;

    border-bottom: 1px solid var(--line);

    background: white;

    position: sticky;

    top: 0;

    z-index: 20;
}


.brand {

    font-size: 21px;

    color: var(--dark);

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;
}


.brand > span {

    font-size: 27px;
}


.brand strong span {

    color: var(--green2);
}


/* =========================================
   NAVIGATION
========================================= */

nav {

    display: flex;

    gap: 21px;

    flex: 1;

    justify-content: center;
}


nav a {

    color: #526159;

    font-size: 13px;

    font-weight: 600;

    transition: .2s;
}


nav a:hover {

    color: var(--green2);
}


/* =========================================
   BUTTONS
========================================= */

button,
.primary,
.secondary,
.outline {

    border: 0;

    border-radius: 10px;

    padding: 12px 17px;

    font-size: 13px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    transition: .2s;
}


.primary {

    background: var(--green2);

    color: white;

    box-shadow:
        0 7px 18px
        #238b4e22;
}


.primary:hover {

    background: var(--green);
}


.secondary {

    background: white;

    color: var(--green);

    border: 1px solid #b8cbbd;
}


.outline {

    background: white;

    color: var(--green);

    border: 1px solid #b8cbbd;
}


.login-btn {

    background: #f2f7f1;

    color: var(--green);

    border: 1px solid #d9e6da;
}


.menu-btn {

    display: none;

    background: transparent;

    font-size: 24px;

    padding: 5px;
}


/* =========================================
   HERO
========================================= */

.hero {

    min-height: 580px;

    background:
        linear-gradient(
            112deg,
            #f2f8e9,
            #fff 55%
        );

    display: grid;

    grid-template-columns:
        1.03fr
        .97fr;

    padding:
        72px
        8%
        50px;

    overflow: hidden;
}


.eyebrow {

    font-size: 11px;

    letter-spacing: 1.6px;

    color: var(--green2);

    font-weight: 800;

    margin-bottom: 11px;
}


.hero h1 {

    font-size: 58px;

    line-height: 1.04;

    margin-bottom: 20px;

    color: var(--dark);
}


.hero h1 span {

    color: var(--green2);
}


.hero-copy > p {

    font-size: 17px;

    line-height: 1.7;

    color: var(--muted);

    max-width: 560px;
}


.hero-actions {

    display: flex;

    gap: 12px;

    margin: 27px 0;
}


.trust-row {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    font-size: 11px;

    color: #68766f;
}


/* =========================================
   HERO ART
========================================= */

.hero-art {

    position: relative;

    min-height: 430px;

    border-radius: 30px;

    background:
        linear-gradient(
            #bfe9f5 0 48%,
            #8fce72 48% 63%,
            #63a94d 63%
        );

    overflow: hidden;

    box-shadow:
        inset
        0 -40px
        80px
        #2b703344;
}


.sun {

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #ffd45d;

    top: 45px;

    right: 90px;

    box-shadow:
        0 0 50px
        #fff3a0;
}


.field {

    position: absolute;

    left: -10%;

    width: 125%;

    height: 150px;

    border-radius:
        50% 50%
        0 0 /
        100% 100%
        0 0;
}


.field1 {

    bottom: 80px;

    background: #78b758;

    transform: rotate(-5deg);
}


.field2 {

    bottom: -30px;

    background: #4d9847;

    transform: rotate(4deg);
}


.farmer {

    position: absolute;

    font-size: 100px;

    left: 42%;

    bottom: 90px;

    filter:
        drop-shadow(
            0 10px 8px
            #174e2a55
        );
}


.crop {

    position: absolute;

    font-size: 55px;

    bottom: 40px;
}


.crop1 {

    left: 18%;
}


.crop2 {

    right: 18%;
}


/* =========================================
   FLOATING PRICE CARD
========================================= */

.price-float {

    position: absolute;

    right: 20px;

    top: 145px;

    background: white;

    border-radius: 16px;

    padding: 14px 17px;

    box-shadow:
        0 15px
        35px
        #174e2a22;
}


.price-float small {

    display: block;

    color: #65736c;

    font-size: 10px;
}


.price-float b {

    display: block;

    font-size: 24px;

    margin: 3px 0;
}


.price-float span {

    font-size: 11px;

    color: #24864b;
}


/* =========================================
   QUICK SEARCH
========================================= */

.quick-search {

    margin:
        -28px
        auto
        0;

    position: relative;

    width: 86%;

    background: white;

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

    box-shadow:
        0 15px
        45px
        #143e2520;

    border-radius: 18px;

    padding: 18px;

    display: grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr
        1fr
        auto;

    gap: 10px;

    align-items: center;
}


.search-heading {

    display: flex;

    align-items: center;

    gap: 10px;
}


.search-heading b,
.search-heading small {

    display: block;
}


.search-heading small {

    font-size: 10px;

    color: #7b8881;

    margin-top: 3px;
}


.live-dot {

    width: 9px;

    height: 9px;

    background: #34a853;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        #34a85318;
}


.quick-search input,
.quick-search select,
.filters input,
.filters select,
.form-grid input,
.form-grid select,
.alert-form input,
.alert-form select,
.modal-box input {

    height: 44px;

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

    border-radius: 9px;

    padding: 0 12px;

    background: #fbfcfa;

    color: #3e5047;

    outline: none;
}


/* =========================================
   SECTIONS
========================================= */

.section {

    padding:
        82px
        8%;
}


.section-light {

    background:
        var(--cream);
}


.section-head {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}


.section-head h2 {

    font-size: 31px;

    margin: 0 0 5px;

    color: var(--dark);
}


.section-head p {

    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================
   STATS
========================================= */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

    margin-bottom: 24px;
}


.stat {

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

    background: white;

    padding: 20px;

    border-radius: 15px;

    position: relative;
}


.stat > span {

    font-size: 26px;
}


.stat small {

    display: block;

    color: #738078;

    margin:
        10px
        0
        5px;
}


.stat b {

    font-size: 25px;
}


.stat em,
.crop-card em,
.trend-grid em {

    font-style: normal;

    font-size: 11px;

    font-weight: 700;

    margin-left: 7px;
}


.up {

    color: #1d8b4b !important;
}


.down {

    color: #d1534d !important;
}


/* =========================================
   TABLE
========================================= */

.table-wrap {

    background: white;

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

    border-radius: 15px;

    overflow: auto;
}


.table-wrap table {

    width: 100%;

    border-collapse: collapse;

    min-width: 800px;
}


.table-wrap th,
.table-wrap td {

    text-align: left;

    padding: 15px;

    border-bottom:
        1px solid
        #edf0eb;

    font-size: 12px;
}


.table-wrap th {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .8px;

    color: #78847e;

    background: #f8faf6;
}


.table-wrap td small {

    color: #7a857f;

    margin-left: 4px;
}


/* =========================================
   FILTER
========================================= */

.filter-panel {

    padding-top: 45px;

    padding-bottom: 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.filters {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr)
        auto
        auto;

    gap: 8px;

    flex: 1;

    max-width: 850px;
}


/* =========================================
   MAP
========================================= */

.map-pill,
.date-chip {

    padding:
        8px
        12px;

    background:
        #e9f5e3;

    border-radius: 30px;

    color:
        var(--green);

    font-size: 11px;

    font-weight: 700;
}


.map-layout {

    display: grid;

    grid-template-columns:
        1.4fr
        .8fr;

    gap: 24px;
}


.india-map {

    min-height: 460px;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 45% 35%,
            #f2f9e9,
            #dfeecf
        );

    position: relative;

    overflow: hidden;

    border:
        1px solid
        #d2e3ca;
}


.map-title {

    position: absolute;

    top: 30px;

    left: 35px;

    font:
        800
        30px
        "Plus Jakarta Sans";

    color:
        #2c7b4b22;

    letter-spacing: 4px;
}


.marker {

    position: absolute;

    width: 26px;

    height: 26px;

    padding: 0;

    border-radius: 50%;

    background:
        #238b4e;

    color: white;

    border:
        5px solid
        #d9f0d7;

    box-shadow:
        0 5px
        14px
        #174e2a33;
}


.m1 {
    left: 49%;
    top: 51%;
}

.m2 {
    left: 43%;
    top: 68%;
}

.m3 {
    left: 42%;
    top: 33%;
}

.m4 {
    left: 57%;
    top: 39%;
}

.m5 {
    left: 54%;
    top: 22%;
}

.m6 {
    left: 28%;
    top: 48%;
}


.map-hint {

    position: absolute;

    bottom: 25px;

    right: 25px;

    font-size: 11px;

    color: #70806f;
}


/* =========================================
   MANDI INFO
========================================= */

.mandi-info {

    background: white;

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

    border-radius: 20px;

    padding: 26px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 15px;

    align-content: start;

    box-shadow:
        0 10px
        30px
        #1c4c2a0b;
}


.info-icon {

    font-size: 30px;

    background:
        #eef7e8;

    border-radius: 12px;

    padding: 9px;

    height: 55px;
}


.mandi-info span {

    font-size: 9px;

    letter-spacing: 1px;

    color: #819087;

    font-weight: 800;
}


.mandi-info h3 {

    margin:
        3px
        0;
}


.mandi-info p {

    font-size: 12px;

    color: var(--muted);

    margin: 0;
}


.info-grid {

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    border-top:
        1px solid
        var(--line);

    margin-top: 8px;

    padding-top: 17px;

    gap: 17px;
}


.info-grid small,
.info-grid b {

    display: block;
}


.info-grid small {

    font-size: 10px;

    color: #849087;
}


.info-grid b {

    font-size: 14px;

    margin-top: 3px;
}


.full {

    width: 100%;

    grid-column:
        1 / -1;
}


/* =========================================
   CROP CARDS
========================================= */

.crop-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}


.crop-card {

    background: white;

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

    border-radius: 18px;

    padding: 20px;

    transition:
        transform .2s,
        box-shadow .2s;
}


.crop-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px
        30px
        #183e2512;
}


.crop-icon {

    font-size: 34px;

    background:
        #f1f8e9;

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 15px;
}


.crop-card h3 {

    margin:
        13px
        0
        0;

    font-size: 18px;
}


.crop-card > small {

    color:
        #849087;
}


.crop-card > b {

    display: block;

    font-size: 25px;

    margin-top: 15px;
}


.crop-card > b span {

    font-size: 11px;

    color: #7a857f;

    font-weight: 500;
}


.mini-chart {

    height: 38px;

    display: flex;

    align-items: end;

    gap: 5px;

    margin:
        13px
        0;
}


.mini-chart i {

    display: block;

    width: 13%;

    background:
        #74b65a;

    border-radius:
        4px
        4px
        0
        0;
}


.mini-chart i:nth-child(1) {
    height: 35%;
}

.mini-chart i:nth-child(2) {
    height: 50%;
}

.mini-chart i:nth-child(3) {
    height: 42%;
}

.mini-chart i:nth-child(4) {
    height: 70%;
}

.mini-chart i:nth-child(5) {
    height: 62%;
}

.mini-chart i:nth-child(6) {
    height: 90%;
}


.crop-card p {

    font-size: 10px;

    color: #77827c;
}


.crop-card button {

    background:
        #eef6e9;

    color:
        var(--green);

    width: 100%;

    margin-top: 5px;
}


.text-link {

    color:
        var(--green2);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================
   CHART
========================================= */

.range-tabs {

    display: flex;

    background:
        #f0f4ed;

    border-radius: 9px;

    padding: 3px;
}


.range-tabs button {

    background:
        transparent;

    color:
        #69776f;

    padding:
        8px
        12px;

    font-size: 11px;
}


.range-tabs button.active {

    background: white;

    color:
        var(--green);

    box-shadow:
        0 2px
        8px
        #153d2514;
}


.chart-card {

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

    border-radius: 18px;

    padding: 24px;

    background: white;
}


.chart-top {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.chart-top small {

    color: #7b8881;
}


.chart-top h3 {

    font-size: 25px;

    margin:
        4px
        0;
}


.chart-top h3 span {

    font:
        600
        11px
        Inter;
}


.chart-top select {

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

    padding: 9px;

    border-radius: 8px;
}


.chart {

    height: 320px;

    position: relative;

    padding:
        20px
        0
        35px
        55px;
}


.chart svg {

    width: 100%;

    height: 250px;

    overflow: visible;
}


.chart polyline {

    fill: none;

    stroke:
        #238b4e;

    stroke-width: 4;
}


.chart path {

    fill:
        url(#fill);

    stroke: none;
}


.ylabels {

    position: absolute;

    left: 0;

    top: 18px;

    bottom: 50px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: #89938d;

    font-size: 9px;
}


.xlabels {

    display: flex;

    justify-content: space-between;

    color: #89938d;

    font-size: 9px;
}


/* =========================================
   SELL SECTION
========================================= */

.sell-section {

    background:
        linear-gradient(
            120deg,
            #eff8e8,
            #fff
        );

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap: 60px;

    align-items: center;
}


.sell-copy h2 {

    font-size: 37px;

    color:
        var(--dark);
}


.sell-copy > p {

    color:
        var(--muted);

    line-height: 1.7;
}


.sell-benefits {

    display: grid;

    gap: 11px;

    font-size: 12px;

    color: #456354;

    margin-top: 24px;
}


.form-card {

    background: white;

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

    box-shadow:
        0 18px
        45px
        #173d2515;

    border-radius: 20px;

    padding: 27px;
}


.form-card h3 {

    margin-bottom: 18px;
}


.form-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    margin-bottom: 14px;
}


.form-note {

    display: block;

    text-align: center;

    color: #8a958f;

    font-size: 9px;

    margin-top: 10px;
}


/* =========================================
   BUYERS
========================================= */

.buyer-grid {

    display: grid;

    gap: 12px;
}


.buyer {

    display: grid;

    grid-template-columns:
        auto
        1.6fr
        1fr
        .8fr
        auto;

    align-items: center;

    gap: 18px;

    background: white;

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

    padding: 17px;

    border-radius: 15px;
}


.avatar {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background:
        #dcefd2;

    color:
        var(--green);

    display: grid;

    place-items: center;

    font-weight: 800;
}


.buyer h3 {

    font-size: 14px;

    margin:
        0
        0
        5px;
}


.buyer h3 span {

    font:
        600
        9px
        Inter;

    color:
        #1c8a4b;

    background:
        #e6f5e6;

    border-radius: 10px;

    padding:
        4px
        6px;

    margin-left: 4px;
}


.buyer p,
.buyer small {

    font-size: 10px;

    color:
        #7a867f;

    margin: 0;
}


.need b,
.offer b {

    display: block;

    font-size: 12px;

    margin-top: 4px;
}


.offer b {

    font-size: 16px;

    color:
        var(--green);
}


/* =========================================
   WEATHER
========================================= */

.weather-section {

    background:
        #173e2b;

    color: white;

    display: grid;

    grid-template-columns:
        1.5fr
        .7fr;

    gap: 50px;
}


.weather-section .eyebrow {

    color:
        #9bd777;
}


.weather-section h2 {

    font-size: 34px;
}


.weather-section p {

    color:
        #bdd0c3;

    font-size: 13px;
}


.weather-main {

    display: flex;

    gap: 14px;

    margin:
        28px
        0;
}


.big-weather,
.weather-stat {

    background:
        #25523c;

    border:
        1px solid
        #39654e;

    border-radius: 14px;

    padding: 16px;
}


.big-weather {

    flex: 1;

    display: grid;

    grid-template-columns:
        auto
        auto;

    gap:
        4px
        12px;

    align-items: center;
}


.big-weather strong {

    font-size: 38px;
}


.big-weather small {

    grid-column:
        1 / -1;

    color:
        #a9c1b3;
}


.weather-stat {

    min-width: 100px;
}


.weather-stat span,
.weather-stat b,
.weather-stat small {

    display: block;
}


.weather-stat b {

    margin:
        6px
        0;
}


.weather-stat small {

    color:
        #9eb6a8;

    font-size: 9px;
}


.alert {

    background:
        #fff6d8;

    color:
        #5e531e;

    border-radius: 13px;

    padding: 13px;

    display: flex;

    gap: 10px;
}


.alert p {

    color:
        #756d46;

    margin:
        3px
        0;

    font-size: 10px;
}


.forecast {

    background:
        #224b37;

    border-radius: 18px;

    padding: 20px;
}


.forecast h3 {

    margin-bottom: 18px;
}


.day {

    display: grid;

    grid-template-columns:
        1fr
        30px
        1fr;

    gap: 10px;

    align-items: center;

    padding:
        13px
        0;

    border-bottom:
        1px solid
        #355c49;

    font-size: 11px;
}


.day:last-child {

    border: 0;
}


.day span {

    font-size: 18px;
}


.day strong {

    text-align: right;
}


/* =========================================
   ARRIVAL
========================================= */

.arrival-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}


.arrival {

    background: white;

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

    border-radius: 15px;

    padding: 20px;
}


.arrival span,
.arrival b,
.arrival small {

    display: block;
}


.arrival b {

    font-size: 22px;

    margin:
        5px
        0
        14px;
}


.arrival > div {

    height: 7px;

    background:
        #e8efe5;

    border-radius: 20px;

    overflow: hidden;
}


.arrival i {

    display: block;

    height: 100%;

    background:
        #6fb454;

    border-radius: 20px;
}


.arrival small {

    font-size: 9px;

    color:
        #748078;

    margin-top: 9px;
}


/* =========================================
   TRENDS
========================================= */

.trends-cards {

    background:
        #f8fbf5;
}


.trend-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 12px;
}


.trend-grid > div {

    background: white;

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

    border-radius: 15px;

    padding: 18px;
}


.trend-grid span {

    font-size: 25px;
}


.trend-grid small,
.trend-grid b,
.trend-grid em {

    display: block;

    margin:
        7px
        0
        0;
}


.trend-grid small {

    font-size: 9px;

    color:
        #7f8b84;
}


.trend-grid b {

    font-size: 15px;
}


.trend-grid em {

    margin-left: 0;
}


/* =========================================
   SCHEMES
========================================= */

.schemes {

    background: white;
}


.scheme-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}


.scheme-grid article {

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

    border-radius: 17px;

    padding: 22px;

    background:
        #fbfcf9;
}


.scheme-grid span {

    font-size: 28px;
}


.scheme-grid h3 {

    margin:
        12px
        0
        7px;

    font-size: 16px;
}


.scheme-grid p {

    font-size: 11px;

    color:
        #758179;

    line-height: 1.5;

    min-height: 33px;
}


.scheme-grid a {

    color:
        var(--green2);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================
   PRICE ALERT
========================================= */

.alert-section {

    background:
        #edf7e6;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-top: 55px;

    padding-bottom: 55px;
}


.alert-copy h2 {

    margin:
        0
        0
        5px;
}


.alert-copy p {

    margin: 0;

    color:
        #718078;

    font-size: 12px;
}


.alert-form {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr
        1.2fr
        auto;

    gap: 8px;

    flex: 1;

    max-width: 850px;
}


/* =========================================
   FOOTER
========================================= */

.footer-main {

    background:
        #103b27;

    color:
        #d9e8dd;

    padding:
        55px
        8%;

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.3fr;

    gap: 40px;
}


.footer-main .brand {

    color: white;
}


.footer-main p {

    font-size: 11px;

    color:
        #a9c1b2;

    line-height: 1.6;

    margin-top: 12px;
}


.footer-main h4 {

    font-size: 12px;

    color: white;
}


.footer-main a {

    display: block;

    color:
        #a9c1b2;

    margin:
        11px
        0;
}


.footer-main b {

    font-size: 13px;
}


.footer-bottom {

    background:
        #0b2e20;

    color:
        #8fa99a;

    padding:
        13px
        8%;

    display: flex;

    justify-content: space-between;

    font-size: 9px;
}


/* =========================================
   MODAL
========================================= */

.modal {

    position: fixed;

    inset: 0;

    background:
        #09271988;

    display: none;

    place-items: center;

    z-index: 50;

    padding: 20px;
}


.modal.show {

    display: grid;
}


.modal-box {

    background: white;

    border-radius: 20px;

    padding: 32px;

    max-width: 440px;

    width: 100%;

    position: relative;

    box-shadow:
        0 25px
        70px
        #0003;
}


.modal-box h2 {

    margin-bottom: 7px;
}


.modal-box p {

    font-size: 12px;

    color:
        #718078;
}


.modal-box input {

    width: 100%;

    margin:
        5px
        0;
}


.modal-icon {

    font-size: 35px;

    background:
        #eff7e9;

    width: 60px;

    height: 60px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    margin-bottom: 15px;
}


.close {

    position: absolute;

    right: 12px;

    top: 10px;

    background: transparent;

    font-size: 25px;

    color:
        #758179;
}


/* =========================================
   TOAST
========================================= */

.toast {

    position: fixed;

    right: 25px;

    bottom: 25px;

    background:
        #103b27;

    color: white;

    padding:
        13px
        17px;

    border-radius: 10px;

    font-size: 12px;

    transform:
        translateY(100px);

    opacity: 0;

    transition: .3s;

    z-index: 70;
}


.toast.show {

    transform: none;

    opacity: 1;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1050px) {

    nav {
        gap: 10px;
    }


    .hero {

        padding-left: 5%;

        padding-right: 5%;
    }


    .quick-search {

        width: 92%;
    }


    .section {

        padding-left: 5%;

        padding-right: 5%;
    }


    .stats-grid,
    .crop-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .filters {

        grid-template-columns:
            1fr
            1fr
            1fr;
    }


    .map-layout,
    .sell-section,
    .weather-section {

        grid-template-columns: 1fr;
    }


    .trend-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .alert-section {

        display: block;
    }


    .alert-form {

        margin-top: 20px;

        max-width: none;
    }


    .footer-main {

        padding-left: 5%;

        padding-right: 5%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:760px) {


    .navbar {

        padding:
            0
            18px;
    }


    .navbar nav {

        display: none;

        position: absolute;

        top: 76px;

        left: 0;

        right: 0;

        background: white;

        padding: 15px;

        box-shadow:
            0 15px
            25px
            #0001;

        flex-direction: column;
    }


    .navbar nav.open {

        display: flex;
    }


    .login-btn {

        display: none;
    }


    .menu-btn {

        display: block;

        margin-left: auto;
    }


    .hero {

        grid-template-columns: 1fr;

        padding:
            48px
            20px
            80px;
    }


    .hero h1 {

        font-size: 43px;
    }


    .hero-art {

        min-height: 300px;

        margin-top: 20px;
    }


    .quick-search {

        grid-template-columns: 1fr;

        margin-top: -45px;

        width: 92%;
    }


    .section {

        padding:
            55px
            20px;
    }


    .section-head {

        align-items: start;

        flex-direction: column;
    }


    .stats-grid,
    .crop-grid,
    .arrival-grid,
    .scheme-grid {

        grid-template-columns: 1fr;
    }


    .filters,
    .form-grid,
    .alert-form {

        grid-template-columns: 1fr;
    }


    .buyer {

        grid-template-columns:
            auto
            1fr;
    }


    .buyer .need,
    .buyer .offer,
    .buyer button {

        grid-column: 2;
    }


    .weather-main {

        display: grid;

        grid-template-columns:
            1fr
            1fr;
    }


    .big-weather {

        grid-column:
            1 / -1;
    }


    .trend-grid {

        grid-template-columns:
            1fr
            1fr;
    }


    .footer-main {

        grid-template-columns:
            1fr
            1fr;

        padding:
            40px
            20px;
    }


    .footer-bottom {

        padding:
            13px
            20px;

        gap: 10px;

        flex-direction: column;
    }


    .range-tabs {

        width: 100%;

        overflow: auto;
    }


    .range-tabs button {

        white-space: nowrap;
    }


    .chart {

        height: 260px;
    }


    .chart svg {

        height: 200px;
    }

}