.bg-white {
    background-color: white;
}

.bg-gray {
    background-color: gray;
}



@media(min-width:1280px) {
    .trapezoid-box {
        
        background-color: green;
        padding-left: 8rem;
        padding-bottom: 2rem;
        padding-top: 2rem;
        padding-right: 2.5rem;
        
    }
}

.relative{
    postion:relative;
}

.rounded-lg {
    border-radius: 10px;
}

.h3-heading {
    color:#3d4c3d;
    font-size: 24px;
    font-weight:600;
}

/******************
    Mobile/Desktop display
********************/

@media(max-width:1024px){  
    .mobile_display{
      
        display: block; 
    }
}

@media(min-width:1024px){    
    .mobile_display{
        display:none;
    }
}

@media(max-width:1024px){  
    .desktop_display{
      
        display: none; 
    }
}

@media(min-width:1024px){    
    .desktop_display{
        display:block;
    }
}

/******************
    Grid
********************/

.grid-display {
    display: grid;
}



@media (min-width:480px){
    .grid-cols-2 {	
	    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1024px){
    .grid-cols-4 {	
	    grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/******************
    Objects
********************/

.object-cover {
    object-fit:cover;
}

/******************
    Transform Rotate
********************/

.rotate-90 {
    -webkit-transform:rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-180 {
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/******************
    Flex Box
********************/

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items:center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

/******************
    Margin
********************/
.mt-2 {
    margin-top:1rem;
}

.mt-4 {
    margin-top:2rem;
}

.mt-12 {
    margin-top:6rem;
}

.mb-12 {
    margin-bottom:6rem;
}

/******************
    Padding
********************/

.px-16{
    padding-left:8rem;
    padding-right:8rem;
}

.pr-1{
    padding-right:0.5rem;
}

.pt-1{
    padding-top:0.5rem;
}

.pl-1{
    padding-left:1rem;
}

.pl-2{
    padding-left:2rem;
}

.pl-5{
    padding-left:5rem;
}

.pr-5{
    padding-right:5rem;
}

.pb-5{
    padding-bottom:5rem;
}

.pb-2{
    padding-bottom:2rem;
}

/***************  
    Width and Height
********************/

.w-full{
    width:100%;
}

.h-full{
    height:100%;
}

.w-half{
    width: 50%;
}

.h-half{
    height: 50%;
}

/***************  
    Site Footer
********************/

.site-footer__body{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content:space-between;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: center;
    width:100%;
}



@media (min-width:768px) {
    .site-footer__body {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: flex-start;
        -webkit-align-items: flex-start;
        -ms-flex-align: flex-start;
        align-items: flex-start;
    }
}

.site-footer__content{
    display:flex;
    align-items:center;
}

.site-footer__content ul li:hover{
    color:green;
}

.site-footer_link {
    font-size:18px;
    color:white;
}

/****************
    List
********************/

.list li {
    text-align: start;
    color:#1a1a1a;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    list-style-type:disc;
}

.mobile-list{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/******************
    Font Size
*********************/

.text-xl {
    font-size: 20px;
}

.text-3xl {
    font-size: 30px;
}

/******************
    Font Weight
*********************/

.font-bold{
    font-weight: 600;
}

/******************
    Product
********************/

.product__item{
    display:flex;
    align-items: center;
    justify-content:ju-start;
}

@media (max-width:640px){
    .product__item {
        flex-direction: column;
    }
}