/*======================================
Project : Ghori Agro
File    : style.css
Author  : Ameerul Islaam
======================================*/



/*======================================
01. Reset
======================================*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    min-height: 100vh;
}

img{
    display: block;
    max-width: 100%;
    height: auto;
}

picture{
    display: block;
}

a{
    color: inherit;
    text-decoration: none;
}

ul,
ol{
    list-style: none;
}

button,
input,
textarea,
select{
    font: inherit;
    border: none;
    outline: none;
    background: none;
}

button{
    cursor: pointer;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
}




/*======================================
02. Global Styles
======================================*/

html{
    font-size: 100%;
}

body{

    font-family: var(--body-font);
    font-size: var(--fs-16);
    font-weight: var(--fw-400);

    color: var(--text-color);

    background: var(--background-color);

    line-height: 1.7;

}

section{

    padding: var(--section-padding);

}

.container{

    width: min(100% - 30px, var(--container-width));

    margin-inline: auto;

}



/*======================================
03. Typography
======================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family: var(--heading-font);

    color: var(--heading-color);

    font-weight: var(--fw-700);

    line-height: 1.2;

}

h1{

    font-size: var(--fs-48);

}

h2{

    font-size: var(--fs-36);

}

h3{

    font-size: var(--fs-30);

}

h4{

    font-size: var(--fs-24);

}

p{

    margin-top: 15px;

}

.section-header{

    margin-bottom: 50px;

}

.section-subtitle{

    display: inline-block;

    margin-bottom: 10px;

    color: var(--primary-color);

    font-weight: var(--fw-600);

}

.section-title{

    margin-bottom: 15px;

}

.section-description{

    max-width: 700px;

}



/*======================================
04. Common Components
======================================*/

/*
Container

Section

Button

Card

Image

Form

Utilities

*/

/*==========================
Buttons
==========================*/

.btn{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 28px;

    border-radius: var(--radius-md);

    font-weight: var(--fw-600);

    transition: all var(--transition);

}

.btn-primary{

    color: var(--white-color);

    background: var(--primary-color);

}

.btn-primary:hover{

    background: var(--secondary-color);

}

.btn-outline{

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

}

.btn-outline:hover{

    color: var(--white-color);

    background: var(--primary-color);

}


/*==========================
Cards
==========================*/

.card{

    overflow: hidden;

    background: var(--surface-color);

    border-radius: var(--radius-lg);

}

.card-image{

    overflow: hidden;

}

.card-image img{

    width: 100%;

}

.card-body{

    padding: 20px;

}


/*==========================
Utilities
==========================*/

.text-center{

    text-align: center;

}

.text-left{

    text-align: left;

}

.text-right{

    text-align: right;

}



/*======================================
05. Header
======================================*/
  
#site-header{

    background-color: var(--surface-color);

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

}

.header-wrapper{

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 80px;

    gap: 30px;

}


/*==========================
Logo
==========================*/

.site-logo{

    display: flex;

    align-items: center;

}

.site-logo img{

    display: block;

    width: auto;

    height: 60px;

}


/*==========================
Navigation
==========================*/

.main-navigation{

    margin-left: auto;

}

.navigation-menu{

    display: flex;

    align-items: center;

    gap: 30px;

}

.navigation-menu a{

    color: var(--heading-color);

    font-size: var(--fs-16);

    font-weight: var(--fw-500);

    transition: color var(--transition);

}

.navigation-menu a:hover{

    color: var(--primary-color);

}


/*==========================
CTA
==========================*/
.about-link {
    padding: 5px 10px;
    border-radius: 8px;
}

.header-wrapper .btn{

    margin-left: 10px;

}



/*---------- Responsive ----------*/

@media (max-width:991px){

    .navigation-menu{

        gap: 20px;

    }

}

@media (max-width:767px){

    .main-navigation{

        display: none;

    }

}

@media (max-width:575px){

    .header-wrapper{

        min-height: 70px;

    }

    .site-logo img{

        height: 55px;

    }

}





/*======================================
06. Hero
======================================*/  
#hero-section{

    padding-top: 40px;

    padding-bottom: 40px;

}

.hero-wrapper{

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 24px;

    align-items: stretch;

}


/*==========================
Hero Image
==========================*/

.hero-image{

    overflow: hidden;

    border-radius: var(--radius-lg);

}

.hero-image img{

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/*==========================
Hero Features
==========================*/

.hero-features{

    display: flex;

    flex-direction: column;

    gap: 16px;

}


/*==========================
Feature Card
==========================*/

.feature-card{

    flex: 1;

    display: flex;

    align-items: center;

    /* gap: 18px; */

    /* padding: 24px; */
    
    gap: 13px;
        
    padding: 13px 15px;

    background: var(--surface-color);

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

    border-radius: var(--radius-lg);

    transition: var(--transition);

}

.feature-card:hover{

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

}

.feature-icon{

    flex-shrink: 0;

}

.feature-icon img{

    width: 42px;

    height: 42px;

}

.feature-title{

    margin-bottom: 6px;

    font-size: var(--fs-20);

}

.feature-description{

    margin: 0;

    color: var(--light-text-color);

    font-size: var(--fs-16);

}



/*---------- Responsive ----------*/

@media (max-width:991px){ 

}

@media (max-width:767px){
    
    .hero-wrapper{

        grid-template-columns: 1fr;

    }

    .hero-image img{

        aspect-ratio: 16 / 9;

    }
    #hero-section{

        padding-top: 30px;

        padding-bottom: 30px;

    }

    .feature-card{

        padding: 20px;

        gap: 15px;

    }

    .feature-icon img{

        width: 36px;

        height: 36px;

    }

}

@media (max-width:575px){

    .feature-title{

        font-size: var(--fs-18);

    }

    .feature-description{

        font-size: var(--fs-14);

    }

}

 
/*======================================
07. Category: Chicken
======================================*/  

.category-section{

    padding: var(--section-padding) 0;

}


/*==========================
Heading
==========================*/
.category-heading{

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 24px;

    padding: 12px 20px;

    background: var(--surface-color);

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

    border-radius: var(--radius-md);

    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);

}

.category-title{

    margin: 0;

}

.category-link{

    color: var(--primary-color);

    text-decoration: none;

    font-weight: var(--fw-600);

    white-space: nowrap;

}


/*==========================
Content
==========================*/

.category-content{

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 30px;

    align-items: stretch;

    margin-bottom: 40px;

}

.category-text{

   /* display: flex;

    align-items: center; */

}

.category-description{

    margin: 0;

}
/*==========================
Category Benefits
==========================*/

.category-benefits{

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.category-benefits li{

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text-color);

}

.category-benefits i{

    flex-shrink: 0;

    color: var(--primary-color);

    font-size: var(--fs-18);

}
.category-image{

    overflow: hidden;

    border-radius: var(--radius-lg);

}

.category-image img{

    width: 100%;

    height: 100%;
    
    aspect-ratio:4/3;
    
    display: block;

    object-fit: cover;

}
 
/*==========================
Product Grid
==========================*/

.product-grid{

    display: grid;

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

    gap: 24px;

}


/*==========================
Product Card
==========================*/

.product-card{

    overflow: hidden;

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

    border-radius: var(--radius-md);

    background: var(--surface-color);

}

.product-card img{

    width: 100%;

    aspect-ratio: 1 / 1;

    display: block;

    object-fit: cover;

}

.product-content{

    padding: 16px;

}

.product-title{

    margin-bottom: 8px;

    font-size: var(--fs-18);

}

.product-price{

    margin: 0;

}

/*---------- Responsive ----------*/

@media (max-width:991px){
 
     

}


@media (max-width:575px){
    
    .category-image img{

        aspect-ratio: 16 / 9;

    }
    
    .category-section{

        padding: 60px 0;

    }
    
    .category-content{

        grid-template-columns: 1fr;

    } 
    
    .product-grid{

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

    }

}


/*======================================
10. Duck
======================================*/





/*---------- Responsive ----------*/

@media (max-width:991px){

}

@media (max-width:767px){

}

@media (max-width:575px){

}





/*======================================
11. Fish
======================================*/





/*---------- Responsive ----------*/

@media (max-width:991px){

}

@media (max-width:767px){

}

@media (max-width:575px){

}





/*======================================
12. Goat
======================================*/





/*---------- Responsive ----------*/

@media (max-width:991px){

}

@media (max-width:767px){

}

@media (max-width:575px){

}





/*======================================
13. Dairy
======================================*/





/*---------- Responsive ----------*/

@media (max-width:991px){

}

@media (max-width:767px){

}

@media (max-width:575px){

}





/*======================================
14. Why Choose Us
======================================*/





/*---------- Responsive ----------*/

@media (max-width:991px){

}

@media (max-width:767px){

}

@media (max-width:575px){

}





/*======================================
15. Customer Reviews
======================================*/





/*---------- Responsive ----------*/

@media (max-width:991px){

}

@media (max-width:767px){

}

@media (max-width:575px){

}





/*======================================
16. Contact CTA
======================================*/





/*---------- Responsive ----------*/

@media (max-width:991px){

}

@media (max-width:767px){

}

@media (max-width:575px){

}





/*======================================
17. Footer
======================================*/
/*======================================
Footer
======================================*/

.site-footer{

    padding-top: 70px;

    background: var(--primary-color);

    color: var(--white-color);

}


/*==========================
Footer Main
==========================*/

.footer-main{

    display: grid;

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

    gap: 50px;

    padding-bottom: 50px;

}


/*==========================
Footer About
==========================*/

.footer-logo{

    display: inline-block;

    margin-bottom: 20px;

}

.footer-logo img{

    width: 150px;

    height: auto;

    display: block;

}

.footer-about p{

    max-width: 380px;

    margin: 0;

    line-height: 1.8;

}


/*==========================
Footer Title
==========================*/

.footer-title{

    margin-bottom: 20px;

    color: var(--white-color);

    font-size: var(--fs-18);

}


/*==========================
Footer Links
==========================*/

.footer-links,
.footer-contact{

    list-style: none;

    margin: 0;

    padding: 0;

}

.footer-links li,
.footer-contact li{

    margin-bottom: 10px;

}

.footer-links a,
.footer-contact a{

    color: var(--white-color);

    text-decoration: none;

    transition: var(--transition);

}

.footer-links a:hover,
.footer-contact a:hover{

    color: var(--accent-color);

}


/*==========================
Footer Bottom
==========================*/

.footer-bottom{

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 20px 0;

    border-top: 1px solid rgba(255,255,255,0.2);

}

.footer-bottom p{

    margin: 0;

}

.footer-social{

    display: flex;

    gap: 20px;

}

.footer-social a{

    color: var(--white-color);

    text-decoration: none;

    transition: var(--transition);

}

.footer-social a:hover{

    color: var(--accent-color);

}


/*======================================
Footer Responsive
======================================*/

@media (max-width:991px){

    .footer-main{

        grid-template-columns: 1fr 1fr;

        gap: 40px;

    }

}


@media (max-width:575px){

    .site-footer{

        padding-top: 50px;

    }

    .footer-main{

        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 35px;

    }

    .footer-bottom{

        flex-direction: column;

        align-items: flex-start;

    }

}


/*======================================
Mobile Bottom Bar
======================================*/

.mobile-bottom-bar{

    display: none;

}


/*======================================
Mobile Bottom Bar
======================================*/

@media (max-width: 575px){

    .mobile-bottom-bar{

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 1000;

        display: grid;

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

        height: 64px;

        padding: 6px 5px;

        background: var(--surface-color);

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

        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);

    }


    /*==========================
    Item
    ==========================*/

    .mobile-bar-item{

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        min-width: 0;

        color: var(--light-text-color);

        text-decoration: none;

        transition: var(--transition);

    }


    .mobile-bar-item:hover,
    .mobile-bar-item.active{

        color: var(--primary-color);

    }


    /*==========================
    Icon
    ==========================*/

    .mobile-bar-icon{

        display: flex;

        align-items: center;

        justify-content: center;

        width: 28px;

        height: 28px;

        font-size: 24px;

        line-height: 1;

    }


    /*==========================
    Label
    ==========================*/

    .mobile-bar-label{

        font-size: 11px;

        line-height: 1;

        font-weight: var(--fw-500);

        white-space: nowrap;

    }


    /*==========================
    Scroll Progress
    ==========================*/

    .scroll-progress{

        position: relative;

        width: 28px;

        height: 28px;

        border: 2px solid var(--border-color);

        border-radius: 50%;

    }


    .scroll-percent{

        font-size: 8px;

        font-weight: var(--fw-600);

    }

    .mobile-bar-icon{

        font-size: 24px;
    
        line-height: 1;
    
    }
    /*==========================
    Page Bottom Space
    ==========================*/

    body{

        padding-bottom: 64px;

    }

}