.main_one{
    position: relative;
    height: 500px;
    width: 100vw;
    /* background-color: rgb(5, 245, 245); */
    margin: 20px 0 0 0;
    padding: 35px 0;

    background-image: url(../img/wood2.png);
    background-position: center;
    background-size: 98%;
    background-repeat: no-repeat;
    /* filter: brightness(96%); */
    overflow: hidden;
}

.spinning_tray{  
    position: relative; 
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background-color: transparent;
    margin: auto;

    background-image: url(../img/spice_various_tray_PLACEHOLDER.png);
    background-position: center;
    background-size: 420px;
    background-repeat: no-repeat;

    animation: spinning_tray_animation 140s linear infinite;
}
    @keyframes spinning_tray_animation {
        0%{transform: rotate(0deg);}
        100%{transform: rotate(-360deg);}
    }



.main_one_left_pane,
.main_one_right_pane{
    position: absolute;
    
    top: 106px;
    display: block;
    height: 280px;
    width: 200px;
    background-color: #f3eeeba2;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #303030b2;
    user-select: none;

    overflow: hidden;
}

.main_one_left_pane{
    left: 9vw;

    background-image: url(../img/bowl1423.png), url(../img/pattern1.png);
    background-position: center top 80px, center top 80px;
    background-size: 160px, 160px;
    background-repeat: no-repeat;
    animation: shrink_grow_main_one_pane 1800ms ease-in-out infinite;
}
    @keyframes shrink_grow_main_one_pane {
        0%{
            scale: 100%;
        }

        50%{
            scale: 99%;
        }

        100%{
            scale: 100%;
        }
    }

.main_one_right_pane{
    right: 9vw;
    
    background-image: url(../img/bowl_rice6532.png), url(../img/pattern1.png);
    background-position: center top 92px, center top 80px;
    background-size: 130px, 154px;
    background-repeat: no-repeat;
    animation: shrink_grow_main_one_pane 1600ms ease-in-out 240ms infinite;     /* Note @Keyframe Above */
}

.main_one_left_pane h3,
.main_one_right_pane h3{
    color: #202020;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin: 23px 0 ;
}


.main_one_left_pane:hover h3,
.main_one_right_pane:hover h3{
    transition: all 380ms;
    margin:18px 0;    
}

.main_one_left_pane:hover{
    animation: none;
    background-position: center top 58px, center top 58px;
    background-size: 140px, 140px;
    transition: all 280ms ease-in;
}


.main_one_left_pane p, 
.main_one_right_pane p{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #202020;
    margin-top: 230px;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 9;
}

.main_one_left_pane:hover p, 
.main_one_right_pane:hover p{
    margin-top: 160px;
    transition: all 500ms;
    font-size: 14px;
    line-height: 1.4;
}

.main_one_right_pane:hover{
    animation: none;
}













.main_two{
    overflow: hidden;
    background-color: var(--white);
}

.main_two h3{
    color: #303030;
    font-size: 70px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    width: 70%;
}

.main_two_diya_span,
.main_two_jhb_span{
    font-weight: bolder;
    font-size: 80px;
}

.grey_line{
    display: block;
    position: relative;
    height: 2px;
    width: 88vw;
    background-color: var(--black);
    margin: 20px auto 20px;
}









.main_three{
    display: block;
    position: relative;
    height: fit-content;
    margin: auto;
    width: fit-content;
    /* border: 1px solid #000; */
    padding: 10px 10px 20px 10px;
}

.main_three_block{
    display: inline-block;
    vertical-align: top;
    position: relative;
    height: 260px;
    margin: 10px 10px;
}
    .main_three_block:nth-child(1){
        width: 360px;
        /* border: 1px solid #000; */

        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

        .main_three_block:nth-child(1) .ul_one,
        .main_three_block:nth-child(1) .ul_two{
            display: inline-block;
        }

        .ul_one_and_two_container{
            /* background-color: #ff0000; */
            width: fit-content;
            height: fit-content;
        }

        .ul_one_and_two_container p{
            padding-left: 50px;
            padding-bottom: 6px;
            font-weight: bold;
        }

        .main_three_block:nth-child(1) .ul_one li,
        .main_three_block:nth-child(1) .ul_two li{
            /* background-color: aqua; */
            height: 22px;
            margin-top: 2px;
        }
        .main_three_block:nth-child(1) .ul_one li{
            width: 120px;
        }
        .main_three_block:nth-child(1) .ul_two li{
            width: 130px;
        }




    .main_three_block:nth-child(2){
        width: 360px;
        border: 1px solid #000;
    }

        .main_three_block:nth-child(2) ul li{
            background-color: lime;
            margin-top: 2px;
        }




    .main_three_block:nth-child(3){
        width: 360px;
        outline: 3px double #aaa;
    }








    .main_four{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: relative;
    }

    .main_four div{
        width: 240px;
        height: 100px;
        background-color: #ff0000;
        margin: 20px;
    }









/* -------------- Mobile Display ---------------- */
/* ------------------- Start -------------------- */
@media screen and (max-width: 500px)
              and (min-width: 200px){
    body{}
        
    .main_one{
        background-size: 1280px;
    }
        
    .spinning_tray{  
        position: relative; 
        width: 366px;
        height: 366px;
        background-size: 74vw;
        margin-top: 38px;
    }

    .main_one_left_pane{
        top: 32px;
        left: 50%;
        margin-left: -140px;
        height: 200px;
        width: 280px;

        background-image: url(../img/bowl1423.png), url(../img/pattern1.png);
        background-position: center top 53px, center top 53px;
        background-size: 150px, 150px;
    }
    
    .main_one_right_pane{
        top: 264px;
        left: 50%;
        margin-left: -140px;
        height: 200px;
        width: 280px;

        background-image: url(../img/bowl_rice6532.png), url(../img/pattern1.png);
        background-position: center top 85px, center top 70px;
        background-size: 160px, 190px;
    }

.main_one_left_pane h3,
.main_one_right_pane h3{
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin: 14px 0 ;
}


.main_one_left_pane:hover h3,
.main_one_right_pane:hover h3{
    transition: all 380ms;
    margin:14px 0;    
}

.main_one_left_pane:hover{
    animation: none;
    background-position: left 10px top 60px, left 10px top 60px;
    background-size: 120px, 120px;
    transition: all 420ms;
}


.main_one_left_pane p, 
.main_one_right_pane p{
    text-align: center;
    width: 120px;
    /* background-color: chartreuse; */
    font-size: 14px;
    font-weight: bold;
    margin-top: 200px;
    margin-left: 136px;
    margin-right: 20px;
    line-height: 9;
}

.main_one_left_pane:hover p, 
.main_one_right_pane:hover p{
    margin-top: 32px;
    transition: all 480ms;
    font-size: 14px;
    line-height: 1.36;
}

.main_one_right_pane:hover{
    animation: none;
}




.main_three{
    display: block;
    position: relative;
    height: fit-content;
    margin: auto;
    width: fit-content;
    /* border: 1px solid #000; */
    padding: 10px 10px 20px 10px;
}

.main_three_block{
    display: block;
    margin: auto;
    position: relative;
    height: 260px;
    margin: 20px 10px;
}
    .main_three_block:nth-child(1){
        width: 80vw;
    }
    .main_three_block:nth-child(2){
        width: 80vw;
    }
    .main_three_block:nth-child(3){
        width: 80vw;
    }

}
/* -------------- Mobile Display ---------------- */
/* ------------------- End ---------------------- */
/* - */
/* - */
/* - */
/* - */
/* - */
/* ----------- Tablet Small Display ------------- */
/* ------------------- Start -------------------- */
@media screen and (max-width: 767px)
              and (min-width: 501px){
    body{}
        

    
    .main_one{
        background-size: 1280px;
    }
    
    .spinning_tray{  
        background-size: 380px;
    }




    .main_three{
        display: block;
        position: relative;
        height: fit-content;
        margin: auto;
        width: fit-content;
        /* border: 1px solid #000; */
        padding: 10px 10px 20px 10px;
    }
    
    .main_three_block{
        display: block;
        margin: auto;
        position: relative;
        height: 260px;
        margin: 20px 10px;
    }
        .main_three_block:nth-child(1){
            width: 80vw;
        }
        .main_three_block:nth-child(2){
            width: 80vw;
        }
        .main_three_block:nth-child(3){
            width: 80vw;
        }

}
/* ----------- Tablet Small Display ------------- */
/* ------------------- End ---------------------- */
/* - */
/* - */
/* - */
/* - */
/* - */
/* ----------- Tablet Large Display ------------- */
/* ------------------- Start -------------------- */
@media screen and (max-width: 1024px)
              and (min-width: 768px){
    body{}
       
    .main_one{
        background-size: 1280px;
    }
    
    .spinning_tray{  
        background-size: 400px;
    }


    
    

    .main_three{
        display: block;
        position: relative;
        height: fit-content;
        margin: auto;
        width: fit-content;
        /* border: 1px solid #000; */
        padding: 10px 10px 20px 10px;
    }
    
    .main_three_block{
        margin: auto;
        position: relative;
        height: 260px;
        margin: 20px 10px;
    }
        .main_three_block:nth-child(1){
            display: inline-flex;
            width: 35vw;
        }
        .main_three_block:nth-child(2){
            display: inline-block;
            width: 35vw;
            float: right;
        }
        .main_three_block:nth-child(3){
            display: block;
            width: 80vw;
        }

}
/* ----------- Tablet Large Display ------------- */
/* ------------------- End ---------------------- */
/* - */
/* - */
/* - */
/* - */
/* - */
/* ------------- Desktop Display ---------------- */
/* ------------------- Start -------------------- */
@media screen and (max-width: 1280px)
              and (min-width: 1025px){
    body{}


    .main_one{
        background-size: 1280px;
    }
        
    .spinning_tray{  
        background-size: 420px;
    }

    .main_one_left_pane{
        left: 8vw;
    }
    .main_one_right_pane{
        right: 8vw;
    }


    
    .main_three{
        display: block;
        position: relative;
        height: fit-content;
        margin: auto;
        width: fit-content;
        /* border: 1px solid #000; */
        padding: 10px 10px 20px 10px;
    }
    
    .main_three_block{
        margin: auto;
        position: relative;
        height: 260px;
        margin: 20px 10px;
    }
        .main_three_block:nth-child(1){
            display: inline-flex;
            width: 35vw;
        }
        .main_three_block:nth-child(2){
            display: inline-block;
            width: 35vw;
            float: right;
        }
        .main_three_block:nth-child(3){
            display: block;
            width: 80vw;
        }

}
/* ------------- Larger Displays ---------------- */
/* ------------------- Start -------------------- */
@media screen and (min-width: 1281px){
    body{}
}
/* ------------- Larger Displays ---------------- */
/* ------------------- End ---------------------- */