@media screen and (max-width: 768px){


/*grid*/

    .gridOne{
        max-width: 100%;
        margin: 0 auto;
        display: grid;
        grid-auto-rows: minmax(50px,auto);
        grid-column-gap: 0;
        grid-row-gap:0 ;
        justify-items: stretch;
        align-items: stretch;
        grid-template-columns: repeat(9 , 1fr);
        
        
    }
    
    .sectionSameCss{
        
       
         padding: 0;
    }
    
    
    .sectionOne{
        
        grid-column: 1/10;
        grid-row:1/2;
        background-color: rgb(24,53,82);
        
        
        
        
         
    }
    .sectionTwo{
        grid-column: 1/10;
        grid-row: 2/15  ;
        background-image: url(../img/man-5806012_19202.jpg);
        background-repeat: no-repeat;
        background-size: 100% 130% ;
        
        }
    
    .sectionThree{
        grid-column: 1/10;
        grid-row: 16/26  ;
        background-color: rgb(250, 250, 250);
    
    }
    .sectionFour{
        grid-column: 1/10;
        grid-row: 25/35;
        background-color:rgba(24, 53, 82, 1) ;
    
    }
    .sectionFive{
        grid-column: 1/10;
        grid-row: 35/38;
        background-color: rgb(250, 250, 250);
    }
    .sectionSix{
        grid-column: 1/10;
        grid-row: 38/46;
        background-color: rgba(239, 239, 239, 1);
    
    }
    .sectionSeven{
        grid-column: 1/10;
        grid-row: 46/58;
        background-image: url(../img/justiceblue.jpg);
        background-size: 100% 140% ;
    }
    .sectionEight{
        grid-column: 1/10;
        grid-row: 58/60;
        background-color: rgba(24, 53, 82, 1);
        background-size: 100% 100% ;
    
    }
    
    
    
    
    
    
    
    
    .gridTwo{
    
        max-width: 100%;
        margin: -50px 0px 0px 0px;
        display: grid;
        grid-auto-rows: minmax(50px,auto);
        grid-column-gap: 0;
        grid-row-gap:0 ;
        justify-items: stretch;
        align-items: stretch;
        grid-template-columns: repeat(9 , 1fr);
        grid-template-rows: repeat(6 , 1fr);
    
    }
    .gridTwoCss{
        grid-auto-rows: minmax(75px,auto);}
    .gridTwoSctionOne{

        grid-column: 1/10;
        grid-row: 1/1 ;
        background-color: rgba(250, 250, 250, 1);
        color: #e4b407;
        text-align: center;
        font-size: 30px;
        
    }
    .gridTwoSctionTwo{
        grid-column: 1/9;
        grid-row: 2/2 ;
    }
    .gridTwoSctionThree{
        grid-column:1/4;
        grid-row: 4/4 ;
    }
    .gridTwoSctionFour{
        grid-column:4/10;
        grid-row: 4/4 ;
    }
    .gridTwoSctionFive{
        grid-column:1/10;
        grid-row: 3/3 ;
    }
    .gridTwoSctionSix{
        grid-column:1/4;;
        grid-row: 5/5 ;
    }
    .gridTwoSctionSeven{
        grid-column:4/10;
        grid-row: 5/5 ;}
       
        
    .gridTwoSctionEight{
        grid-column:4/10;
        grid-row: 6/6 ;
        
    }
    .gridTwoSctionNine{
        grid-column:1/4;
        grid-row: 6/6 ;
        
    }
    .gridTwoSctionTen{
        grid-column:1/10;
        grid-row: 7/7 ;
        
    }
    
    
    
    /*gridThree*/
    
    .gridThree{
        max-width: 100%;
        margin: -50px 0px 0px 0px;
        display: grid;
        grid-auto-rows: minmax(50px,auto);
        grid-column-gap: 0;
        grid-row-gap:0 ;
        justify-items: stretch;
        align-items: stretch;
        grid-template-columns: repeat(9 , 1fr);
        grid-template-rows: repeat(5 , 1fr);
    }
    
    .gridThreeSectionOne{
        display: hidden;
        grid-column: 1/10;
        grid-row: 1/1;
        
    }
    .gridThreeSectionTwo{
        grid-column: 3/10;
        grid-row: 2/2;
        
    }
    .gridThreeSectionThree{
        grid-column: 3/10;
        grid-row: 3/3;
    
    }
    .gridThreeSectionFour{
        grid-column: 3/10;
        grid-row: 4/4;
    
    }
    .gridThreeSectionFive{
        grid-column: 1/10;
        grid-row: 5/5;
        
    }
    
    
    /*gridfour*/
    
    .gridFour{
        max-width: 100%;
        margin: -50px 0px 0px 0px;
        display: grid;
        grid-auto-rows: minmax(50px,auto);
        grid-column-gap: 0;
        grid-row-gap:0 ;
        justify-items: stretch;
        align-items: stretch;
        grid-template-columns: repeat(9 , 1fr);
        grid-template-rows: repeat(5 , 1fr);
    }
    
    .gridFourSectionOne{
        grid-column: 4/5;
        grid-row: 2/2;
        transition-duration: 0.3s;
     
    }
    .gridFourSectionTwo{
        grid-column: 4/5;
        grid-row: 3/3;
        transition-duration: 0.3s;
    
    }
    .gridFourSectionThree{
        grid-column: 4/5;
        grid-row: 4/4;
        transition-duration: 0.3s;
        
        
        
    }
    
    .gridFourSectionThree:hover , .gridFourSectionTwo:hover,.gridFourSectionOne:hover{
    
        
        margin-top: -10px;
    }
    
    
    
    
    /* grid5 */
    
    .gridFive{
        max-width: 100%;
        margin: -50px 0px 0px 0px;
        display: grid;
        grid-auto-rows: minmax(50px,auto);
        grid-column-gap: 0;
        grid-row-gap:0 ;
        justify-items: stretch;
        align-items: stretch;
        grid-template-columns: repeat(9 , 1fr);
    
    }
    
    .gridFiveSctionZero{
        grid-column: 1/4;
        grid-row: 1/2;
    
        
       
    
    }
    .gridFiveSctionOne{
        grid-column: 4/7;
        grid-row: 1/2;
        
       
    
    }
    .gridFiveSctionTwo{
        grid-column: 7/10;
        grid-row: 1/2;
       
    
    }
    .gridFiveSctionThree{
        grid-column: 4/7;
        grid-row: 2/3;
        
    
    }
    .gridFiveSctionFour{
        grid-column: 7/10;
        grid-row: 2/3;
        
       
    
    }
    .gridFiveSctionFive{
        grid-column: 1/4;
        grid-row: 2/3;
        
       
    
    }
    .gridFiveSctionSix{
        
        grid-column: 4/7;
        grid-row: 3/4;
        
        }
    
    .gridFiveSctionSeven{
        
        grid-column: 7/10;
        grid-row: 3/4;
         
        }   
        
        .gridFiveSctionFive p{
            
            
            margin: 10px 10px 0 0;
            
            }
        .gridFiveSctionFive a{
            color:black
        }
    
        .gridFiveSctionFive a:visited{color:black;
         text-decoration: none;}
    
     
    
    
        
    
    
        /*grid6*/
    
        .gridSix{
            max-width: 100%;
            margin: 0 auto;
            display: grid;
            grid-auto-rows: minmax(50px,auto);
            grid-column-gap: 0;
            grid-row-gap:0 ;
            justify-items: stretch;
            align-items: stretch;
            grid-template-columns: repeat(9 , 1fr);
            
        
        }
    
        .gridSixSctionZero
        {
            
            grid-column: 1/10;
            grid-row:2/3
            }
    
            .gridSixSctionZero p
        {
            font-size: 20px;
            color: gold;
            
            text-align: center;
            }
    
        .gridSixSctionOne
        {
            
            grid-column: 1/10;
            text-align: center;
            grid-row:4/5
            }
    
        .gridSixSctionTwo{
            
            grid-column: 1/10;
            text-align: center;
            grid-row:5/6
            
            }
    
        .gridSixSctionThree{
            
            grid-column: 1/10;
            text-align: center;
            grid-row:6/7
           }
    
        .gridSixSctionFour{
            
            grid-column: 1/10;
            text-align: center;
            grid-row:7/8
            }
    
        .gridSixSctionFive{
            
            grid-column: 1/10;
            text-align: center;
            grid-row:8/9
            
            }
            
    
        .gridSixSctionSix{
            
            grid-column: 1/8;
            grid-row:10/11;
            text-align: center;
            }





 /* flex*/






            .flexBoxOne{display: flex;
                align-content: center;
               justify-content: center;
               align-items: center;
            flex-direction: column;}
            
            
            
            .sectionOneFlexBoxOne{
                margin: 178px 17px 113px 0px;
            }
            
            .sectionTwoFlexBoxOne{
                margin: 69px -184px  0px 9px;
            }
            
            
            .flexBoxTwo{display: flex;
                align-content: center;
               justify-content: center;
               align-items: center;
            flex-direction: column;}
            
            .FlexBoxTwoCss{
                margin: 65px;
            }
            .sectionOneFlexBoxTwo{
                width: 300px;
            height: 300px;
            background: #FFFFFF;
            border: 2px solid #FFC700;
            box-sizing: border-box;
            transition-duration: 0.3s;
                
            }
            
            
            
            .sectionTwoFlexBoxTwo{
                width: 300px;
            height: 300px;
            background: #FFFFFF;
            border: 2px solid #FFC700;
            box-sizing: border-box;
            transition-duration: 0.3s;
            
                
            }
            
            
            .sectionOneFlexBoxTwo:hover , .sectionTwoFlexBoxTwo:hover{
            
                box-shadow: 1px 2px 20px 7px rgb(13 89 239 / 43%);
                margin-top: 35px;
            }
            




            form textarea{


                width: 300px;
                height: 103px;
                background: rgba(196, 196, 196, 0.25);
                border-radius: 11px;
                
                
                }
                form input{
                
                
                    width: 300px;
                    height: 37px;
                    background: rgba(196, 196, 196, 0.25);
                    border-radius: 11px;
                    
                    
                    }
                
                    form select{
                
                
                        width: 300px;
                        height: 37px;
                        background: rgba(196, 196, 196, 0.25);
                        border-radius: 11px;
                    }
                
                    form select option{
                        width: 300px;
                        height: 37px;
                        background: rgba(196, 196, 196, 0.25);
                        border-radius: 11px;
                    }
                
                    form button{
                position: absolute;
                width: 100px;
                height: 35px;
                
                font-family: 'David Libre', serif;
                font-size: 20px;
                font-weight: 700;
                background: #AD8700;
                border-radius: 11px;
                color: rgb(9 8 113);
                transition-duration: 0.5s;
                
                    }
                
                    
                        
                            
                 form button:hover{
                     position: absolute;
                     width: 100px;
                     height: 35px;
                     
                     color:black;
                     background: #ffd336;
                     border-radius: 11px;
                     
                         }








}