/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* root */


:root {
    --color-primary: #1D59F9;
    --color-secondary: #000B27;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color--light-black: #220E27;
    --color-body-font: #464646;
    --color-gray: #383838;
    --color-border: #D8D8D8;
    --primary-font: "Poppins", sans-serif;
    --body-font: 18px;
    --h1-font: 52px;
    --h2-font: 42px;
    --h3-font: 28px;
    --h4-font: 22px;
    --large-body-font: 22px;
    --small-body-font: 16px;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--primary-font);
}

body {
    background: url(../img/home-bg.png) no-repeat;
    background-position: top center;
    background-size: cover;
}

@media screen and (min-width:1500px) {}

.container {
    max-width: 1440px !important;
    padding: 0 20px !important;
}

img {
    width: 100%;
}

a {
    text-decoration: none !important;
}

.w-content {
    width: fit-content !important;
}

.theme_btn {
    padding: 13px 30px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 100px;
    border: 1px solid var(--color-primary);
    transition: all 300ms linear;
    display: inline-block;
}

.theme_btn:hover {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

.theme_btn_new {
    padding: 13px 30px;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    border-radius: 100px;
    transition: all 300ms linear;
    display: inline-block;
}

.theme_btn_new:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

.section {
    padding: 100px 0;
}

/* ---------- Navbar ---------- */

#Navbar.navbar-custom {
    background: transparent;
    padding: 25px 80px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);

    .navbar-nav .nav-link {
        font-size: var(--small-body-font);
        color: var(--color-black);
        font-weight: var(--font-regular);
    }

    .navbar-brand img {
        height: 60px;
        margin-right: 15px;
    }

    .navbar-brand strong {
        font-size: 31.25px;
    }

    .login-btn {
        font-size: var(--small-body-font);
        font-weight: var(--font-medium);
    }

    :focus-visible {
        outline: none;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
}

/* ====================== HOME PAGE ====================== */

/* ---------- Hero Section ---------- */

.hero_section {

    .hero_images img {
        border-radius: 20px;
        max-width: 100%;
        object-fit: contain;
        filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
    }

    .hero-btn i {
        font-size: 30px;
        color: var(--color-gray);
    }

    .hero-btn {
        font-size: 16px;
        font-weight: var(--font-medium);
        color: var(--color-gray);
    }

    @media (min-width: 767px) {
        .modal-dialog {
            max-width: 700px;
        }
    }

    .btn-close:focus {
        box-shadow: none;
    }

    :focus-visible {
        outline: none;
    }

    .modal {
        background-color: rgba(29, 89, 249, 0.3);
    }
}

/* ---------- Section Divider ---------- */

.section_divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(56, 56, 56, 0) 0%, rgba(56, 56, 56, 0.2) 50%, rgba(56, 56, 56, 0) 100%);
    margin: 0;
    border: none;
    opacity: 1;
}

/* ---------- Why AgroQR? Section ---------- */

.why_section {

    .why-list-item {
        background: var(--color-white);
        padding: 10px 15px;
        border-radius: 100px;
    }

    .why-list-item img {
        width: 21px;
        height: 22px;
        object-fit: contain;
    }
}

/* ---------- How It Works Section ---------- */

.how_it_works_section {

    .work-item-img {
        height: 60px;
        width: 60px;
        min-width: 60px;
        background-color: var(--color-primary);
        border-radius: 12px;
        padding: 12px;
        box-sizing: border-box;
    }

    .work-item {
        margin-bottom: 63px;
    }

    .work-item:last-child {
        margin-bottom: 0;
    }
}

/* ---------- Crops Available Section ---------- */

.crops_section {
    .crop_content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        position: relative;
    }

    .single-crop {
        padding: 20px;
        background-color: var(--color-white);
        border-radius: 20px;
    }

    .single-crop img {
        border-radius: 14px;
    }

    .crop_content::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(180deg, rgba(244, 252, 254, 0) 0%, rgba(227, 239, 254, 1) 85%);
        z-index: 1;
    }

    .crop_btn {
        margin-top: -52px;
        z-index: 99;
        position: relative;
    }
}

/* ---------- Frequently Asked Questions Section ---------- */

.faq_section {

    .accordion {
        max-width: 1196px;
        margin: 0 auto;
    }

    .accordion-item {
        margin-bottom: 25px;
        background-color: transparent;
        border: 1px solid var(--color-border) !important;
        border-radius: 20px !important;
    }

    .accordion-item:last-child {
        margin-bottom: 0;
    }

    .accordion-header {
        background-color: transparent;
    }

    .accordion-button {
        padding: 26px 30px;
        background-color: transparent !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        box-shadow: none !important;
        font-size: var(--large-body-font);
        font-weight: var(--font-medium);
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--color-primary) !important;
        color: var(--color-white);
        padding-bottom: 16px;
    }

    .accordion-body {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 0px 30px 26px 30px;
        font-size: var(--body-font);
    }

    .accordion-button::after {
        content: '\f13a';
        font-family: 'FontAwesome';
        background-image: unset;
        color: var(--color-primary);
    }

    .accordion-button:not(.collapsed)::after {
        color: var(--color-white);
        transform: rotate(0);
    }

    :focus-visible {
        outline: none;
    }
}

/* ---------- Government Compliant Section ---------- */

.government_section {
    padding-bottom: 100px;

    .gov-icon {
        height: 80px;
        width: 80px;
        min-width: 80px;
        background-color: var(--color-primary);
        border-radius: 100px;
        padding: 15px;
        box-sizing: border-box;
    }
}

/* ---------- Footer Section ---------- */

.footer_section {
    padding: 50px 0;
    background-color: var(--color-secondary);

    .footer-logo {
        height: 60px;
        width: 60px;
    }

    p,
    a {
        color: var(--color-white);
    }

    a:hover {
        color: var(--color-white);
    }

    p a {
        text-decoration: underline !important;
    }

    ul li a {
        font-size: var(--large-body-font);
        transition: all linear 300ms;
    }

    ul li a:hover {
        opacity: 0.7;
    }
}


/* ====================== PRICING PAGE ====================== */

/* ---------- Pricing Section ---------- */

.pricing_section {

    .single-price {
        padding: 39px 30px;
        background-color: var(--color-white);
        border-radius: 20px;
    }

    .price-text {
        font-weight: var(--font-medium);
    }

    .price {
        font-weight: var(--font-semi-bold);
        color: var(--color-black);
    }

    .dark-item {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .dark-item .price {
        color: var(--color-white);
    }

    .dark-item .theme_btn {
        background-color: var(--color-white);
        border-color: var(--color-white);
        color: var(--color-primary);
    }

    .dark-item .theme_btn:hover {
        background-color: transparent;
        color: var(--color-white);
    }
}

/* ====================== CROPS LIST PAGE ====================== */

/* ---------- Crops Section ---------- */

.crops-list_section {

    .crop_items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .single-crop {
        padding: 20px;
        background-color: var(--color-white);
        border-radius: 20px;
    }

    .single-crop .crop-info img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .crop-img {
        border-radius: 14px;
    }

    .input-group input {
        padding: 15px 17px;
        border-radius: 100px !important;
        border-color: var(--color-primary);
    }

    .search_bar {
        min-width: 345px;
        max-width: 345px;
        position: relative;
    }

    .search_icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-primary);
        font-size: var(--body-font);
        z-index: 99;
    }

    input:placeholder {
        color: var(--color-body-font);
        font-size: 14px;
    }
}


/* ====================== HOW TO USE PAGE ====================== */

/* ---------- How to Use AgroQR.in Section ---------- */

.white_container {
    background: var(--color-white);
    text-align: center;
    border-radius: 3px;
}

.white_container p {
    padding: 14px 20px;
    font-weight: var(--font-medium);
}


.how_to_use_steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 30px;
}

.how_to_use_steps .item {
    background: var(--color-white);
    padding: 20px;
    border-radius: 20px;
}

.how_to_use_steps .item:nth-child(1),
.how_to_use_steps .item:nth-child(2),
.how_to_use_steps .item:nth-child(3) {
    grid-column: span 2;
}

.how_to_use_steps .item:nth-child(4),
.how_to_use_steps .item:nth-child(5) {
    grid-column: span 3;
}

@media (max-width: 767px) {
    .how_to_use_steps {
        grid-template-columns: 1fr;
    }

    .how_to_use_steps .item {
        grid-column: span 1 !important;
    }
}

.how_to_use_steps .item .item_img {
    background-color: #eee;
    width: 100%;
    height: 220px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.how_to_use_steps .item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.how_to_use_steps .item .item_content h3 {
    font-size: var(--h3-font) !important;
    margin-bottom: 20px;
}

.how_to_use_steps .item .item_content p {
    font-size: var(--font-bold);
}

.how_to_use_steps .item .item_content li {
    font-size: var(--font-bold);
}

.how_to_use_steps .item .item_content ul {
    padding: 0;
    margin: 0 20px;
}

.how_to_use_steps .item .item_content ul li ul {
    margin: 0 30px;
}


/* ====================== WHY AGRO QR PAGE ====================== */

/* ---------- Why QR Code on Seed Packs? Section ---------- */

.why_qr_code_on_seed_packs_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
}

.why_qr_code_on_seed_packs_grid .item {
    background: var(--color-white);
    padding: 20px;
    border-radius: 20px;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 267px 1fr;
    align-content: center;
    align-items: center;
}

.why_qr_code_on_seed_packs_grid .item .item_img {
    width: 100%;
    height: 267px;
    background-color: #eee;
    border-radius: 20px;
}

.why_qr_code_on_seed_packs_grid .item .item-icon {
    height: 50px;
    width: 50px;
}

.why_qr_code_on_seed_packs_grid .item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.why_qr_code_on_seed_packs_grid .item .item_content h4 {
    font-size: var(--h4-font) !important;
}

.why_qr_code_on_seed_packs_grid .item .item_content p {
    font-size: var(--body-font) !important;
    padding: 0;
    margin: 0;
}

.full-blue-item {
    grid-template-columns: 1fr !important;
    grid-gap: 10px !important;
    background-color: var(--color-primary) !important;
}

.full-blue-item h4 {
    font-size: var(--h4-font) !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--color-white) !important;
}

.full-blue-item p {
    font-size: var(--body-font) !important;
    color: var(--color-white) !important;
    padding: 0 !important;
    margin: 0 !important;

}


/* ---------- Why Choose AgroQR.in? Section ---------- */

.why_choose_section {

    .table td,
    .table th {
        border-bottom-width: 0px;
    }

    .table thead th:first-child{
        width: 60%;
    }

    .table thead th:last-child{
        width: 40%;
    }

    .table th {
        color: var(--color-white);
        font-size: var(--large-body-font);
        font-weight: var(--font-medium);
    }

    .table th:first-child {
        border-top-left-radius: 20px;
        padding: 24px 0 24px 75px;
    }

    .table th:last-child {
        border-top-right-radius: 20px;
        padding: 24px 75px 24px 0;
    }

    .table thead {
        background-color: var(--color-primary);
    }

    .table tr td:first-child {
        padding: 15px 0 15px 75px;
    }

    .table tr td:last-child {
        padding: 15px 75px 15px 0;
    }

    .table tbody tr:first-child td {
        padding-top: 29px;
    }

    .table tbody tr:last-child td {
        padding-bottom: 20px;
    }

    .table tbody {
        background-color: var(--color-white);
    }

    .table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 20px;
    }

    .table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 20px;
    }

    .table td {
        position: relative;
        font-size: var(--body-font);
        font-weight: var(--font-regular);
    }

    .table td::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
    }

    .table td:first-child::after {
        background: linear-gradient(90deg, rgba(56, 56, 56, 0) 0%, rgba(56, 56, 56, 0.2) 100%);
    }

    .table td:last-child::after {
        background: linear-gradient(270deg, rgba(56, 56, 56, 0) 0%, rgba(56, 56, 56, 0.2) 100%);
    }

    .table tr:last-child td::after{
        display: none;
    }
}

/* ---------- Register Section ---------- */

.register_section{

    .register_content{
        padding: 70px 40px;
        background-color: var(--color-primary);
        border-radius: 30px;
        color: var(--color-white);
    }

    .contact_info i{
        font-size: 30px;
    }
}

/* ====================== FAQS PAGE ====================== */

/* ---------- FAQ Section ---------- */

.faq_Page_section{

    .faqs_Page_accordion{
        background-color: var(--color-white);
        padding: 30px;
        border-radius: 20px;
        box-sizing: border-box;
        height: 100%;
    }

    .faq_header .faq-img{
        height: 50px;
        width: 50px;
        min-width: 50px;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
    }
}

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

/* ---------- Contact AgroQR Section ---------- */

.contact_Page_section{

    .contact-form{
        background-color: var(--color-white);
        width: 100%;
        max-width: 939px;
        border-radius: 20px;
        padding: 50px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .form-control{
        padding: 20px;
        border-radius: 20px;
        border-color: #e4e4e4;
    }

    .contact-info{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .contact-info .single-info{
        padding: 20px 30px;
        border-radius: 20px;
        background-color: #F0F0F0;
    }

    .info-text{
        font-weight: var(--font-medium);
        font-size: 20px;
    }
}