.container {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 115px .3fr .7fr 300px; 
    gap: 0px 0px; 
    grid-template-areas: 
      "Banner"
      "Intro"
      "Maincontent"
      "Footer"; 
  }



    /* Intro ---------------------------- */
  
    .Intro {
        display: grid; 
        grid-template-rows: .3fr;
        gap: 0px 0px; 
        grid-area: Intro; 
        
    }


    /* Main Content ---------------------------- */

    .Maincontent {
        display: grid; 
        grid-template-rows: .7fr; 
        gap: 0px 0px;         
        grid-area: Maincontent; 
        padding-top: 20px;
        
    }

    .accordion{
        padding: 0px;

        /* width: 600px; */
    }
    
    .accordion li{
        list-style: none;
        /* width: 100%; */
        margin: 20px;
        padding: 10px;
        /* background: #e3edf7; */
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 16px;
    }
    
    .accordion li label{
        display: flex;
        align-items: center;
        padding: 10px;
        /* font-size: 18px;
        font-weight: 500; */
        cursor: pointer;
    }
    
    label::before{
        content: '+';
        margin-right: 10px;
        /* font-size: 24px;
        font-weight: 600; */
    }
    
    input[type="checkbox"]{
        display: none;
    }
    
    .accordion .content{
        /* color: #555; */
        padding: 0 10px;
        line-height: 26px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s, padding 0.5s;
    }
    
    .accordion input[type="checkbox"]:checked + label + .content{
        max-height: 2000px;
        padding: 10px 10px 20px;
    }
    
    .accordion input[type="checkbox"]:checked + label::before{
        content: '-';
    }

        /* Page Nav ---------------------------- */

        .Page_nav { grid-area: Page_nav; display: none;}

         /* Faq ---------------------------- */

        .FAQ { grid-area: FAQ; padding-top: 20px; display: none;}
  

    
@media only screen and (min-device-width: 1000px) {

    .accordion{
        display: none;        

        /* width: 600px; */
    }

    .Intro {
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: .3fr;
        gap: 0px 0px; 
        grid-template-areas: 
        "Intro_text Intro_image"; 
        grid-area: Intro; 
        
    }
        /* Intro Text ---------------------------- */

        .Intro_text { grid-area: Intro_text; padding-left: 209px;}

            #faq_intro_title{
                padding-top: 71px;
                font-size: 40px;
            
            }
            
            #faq_intro_text{
                font-weight: 300;
                font-size: 22px;
                max-width: 512px;
            
            }

        /* Intro Text ---------------------------- */

        .Intro_image { grid-area: Intro_image;}

            .Image1{
                padding-top: 71px;
            }

    /* Main Content ---------------------------- */

    .Maincontent {
        display: grid; 
        grid-template-columns: .5fr 1.5fr; 
        grid-template-rows: .7fr; 
        gap: 0px 0px; 
        grid-template-areas: 
        "Page_nav FAQ"; 
        grid-area: Maincontent; 
        padding-top: 20px;
        margin-top: 15vh;

    }

        /* Page Nav ---------------------------- */

        .Page_nav { grid-area: Page_nav;         display: grid; 
        }

            .side-bar {
                width: 160px;
                height: 10vh;
                position: sticky;
                /* top: 2vh; */
                top: 15vh;

                margin-left: 40%;
                display: flex;
                flex-direction: column;
                align-items: center;
                z-index: 6999;
            }

            nav ul {
                padding: 0;
            }
            
            nav li {
                list-style: none;
            }
            
            nav li a {
                text-decoration: none;
                color: #333;
                display: block;
                padding: 0.6rem 0.3rem;
                font-weight: 400;
                font-size: 16px;
                transition: all ease-out 250ms;
            }
            
            nav li a:hover {
                color: #00395e !important;
                font-weight: 600;
            }

            nav li .active {
                color: #00395e !important;
                border-left: 4px solid #00395e ;
                font-weight: 600;
            }

         /* Faq ---------------------------- */

        .FAQ { grid-area: FAQ;         display: grid;               

        }
  
            .FAQ_sections{
                
                max-width: 850px; 
            
            }

            #Getting_started{
                
                padding-top: 8px;
                padding-bottom: 48px;
                padding-left: 24px;
                padding-right: 24px;

                font-weight: 400;
                font-size: 16px;
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                border-radius: 16px;
                /* background-image: linear-gradient(white, #e1f1fd); */
            }
            #Uploading_data{
                padding-top: 8px;
                padding-bottom: 48px;
                padding-left: 24px;
                padding-right: 24px;

                font-weight: 400;
                font-size: 16px;
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                border-radius: 16px;
                /* background-image: linear-gradient(white, #e1f1fd); */
            }

            #Reviewing_data{
                padding-top: 8px;
                padding-bottom: 48px;
                padding-left: 24px;
                padding-right: 24px;
                
                font-weight: 400;
                font-size: 16px;
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                border-radius: 16px;
                /* background-image: linear-gradient(white, #e1f1fd); */
            }

            #User_interface{
                padding-top: 8px;
                padding-bottom: 48px;
                padding-left: 24px;
                padding-right: 24px;
                
                font-weight: 400;
                font-size: 16px;
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                border-radius: 16px;
                /* background-image: linear-gradient(white, #e1f1fd); */
            }

            #Machine_learning{
                padding-top: 8px;
                padding-bottom: 48px;
                padding-left: 24px;
                padding-right: 24px;
                
                font-weight: 400;
                font-size: 16px;
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                border-radius: 16px;
                /* background-image: linear-gradient(white, #e1f1fd); */
            }
    
}