body{
            margin: 0;        
            padding: 0;   
            
        }

        #navbar{
            border: 1px solid #1a232f;
            height: 75px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #1a232f;
        }
        #navbarleft{
            margin-left: 35px;         
        }      

            #navbarright{
            display: flex;
            width: 12%;
            justify-content: space-between;
            align-items: center; 
            /* border: 1px solid blue; */
            margin-right: 30px;
        } 

        #langdiv{
            display: flex;
           
        }      

        #globeimage>img{
            height: 15%;
            width: 28px;
        }

        #EN , a{
            color: rgb(182, 172, 172);
            text-decoration: none;
            
        }

        #EN{
            cursor: pointer;
        }

        #selectlang{
            cursor: pointer;
        }

        #navbarleft>a>img{
            width: 120px;
            height: 46px;
        }

        #navbarleft>img:hover{
            cursor: pointer;
        }
        #containerjai{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: auto;
        }

        #rightside>img{
            width: 100%;
            height: 100%;
        }

        #leftside{
            background-color: black;
            /* border: 1px solid red; */
            padding-left: 70px;
            padding-top: 70px;
           
        }

        #leftside>h1,h2,h5{
            color: white;
            font-weight: 100;
        }
        #leftside>h1{
            font-size: 40px;
            
        }

        #leftside>h5{
            margin-left: 40px;
            margin-top: 10px;
            font-weight: 100;
            
        }

        #leftside>a>button{
            color: white;
            background-color: #0f79af;
            border: #0f79af;
            padding: 15px 10px;
            border-radius: 3px;
            width: 40%;
            margin-left: 0px;
            font-size: 14px;
            
        }

        #leftside>a>button:hover{
            cursor: pointer;
            background-color: #4590b6;
            transition: ease all 0.2s;

        }

        @media only screen and (min-width: 421px) and (max-width: 780px){
          

           #containerjai{
               display: grid;
               grid-template-columns: 100%;
               grid-template-rows: auto auto;
               
           }

           #leftside{
               grid-area: 2/1/3/2;
               padding: 0 15px;
            padding-top: 0px;
            height: 400px;
           }

           #rightside{
               grid-area: 1/1/2/2;
           }

           #leftside>h1,h2,h5{
            color: white;
            font-weight: 100;
            text-align: center;
           
           }

           #leftside>h5{
            margin-left: 0px;
            margin-top: 18px;
            font-weight: 100;
            
          }

           #leftside>a>button{
            color: white;
            background-color: #0f79af;
            border: #0f79af;
            padding: 15px 40px;
            
            text-align: center;
            width: 100%;      
            font-size: 20px;      
            }

            #navbarright{
            display: flex;
            width: auto;            
            margin-right: 80px;
        } 
           
        }

        @media only screen and (min-width: 70px) and (max-width: 420px){
            #containerjai{
               display: grid;
               grid-template-columns: 100%;
               grid-template-rows: auto auto;
               
           }

           #leftside{
               grid-area: 2/1/3/2;
               padding: 0 15px;
            padding-top: 0px;
            height: 400px;
           }

           #rightside{
               grid-area: 1/1/2/2;
           }

           #leftside>h1,h2,h5{
            color: white;
            font-weight: 100;
            text-align: center;
           
           }

           #leftside>h5{
            margin-left: 0px;
            margin-top: 15px;
            font-weight: 100;
            
          }

           #leftside>a>button{
            color: white;
            background-color: #0f79af;
            border: #0f79af;
            padding: 15px 40px;
            
            text-align: center;
            width: 100%;      
            font-size: 20px;      
            }          

             #navbarright{
                display: flex;
                width: auto;
                justify-content: space-between;
                align-items: center; 
                /* border: 1px solid blue; */
                margin-right: 30px;
            } 
        }


         /* jai's homepage styling ends  here */


        #containerB{
            display:flex;
            height: 550px;
            width:95%;
            margin-top: 40px;
            
        }
        #left{
            width:50%;
            height:100%;
            margin-right:30px;

        }
        #right{
            display:grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,165px);
            box-sizing: border-box;
            margin:2px;

            gap:5px;
            width:50%;
            height:100%;
            
        }
        @media all and (min-width:621px) and (max-width:1200px){

            #containerB{
                width:85%;
            }
            #right{
                grid-template-columns: repeat(2,1fr);
                grid-template-rows: repeat(2,150px);

                width:35%;
            }

        }

         @media all and (min-width:80px) and (max-width:621px){

            #containerB{
                display: flex;
                flex-direction: column;
                height:800px;
                width:35%;
            }

            
            #right{
                grid-template-columns: repeat(2,1fr);
                height:800px;
                width:35%;
            }

        }   
     
         
        
        #right>div{
            height: 100px;
            
        }
        .imgC{
            height:85%;
            width:100%;
        }
        .imgC:hover{
            height:102%;
            width:102%;
            box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        }
        #h1S{
            margin:auto;
            padding-left: 80px;
            margin-top: 150px;
            
            font:44.8px "Amazon Ember";
            /* font-size: 30px; */
           
            
        }
        #pS{
           
            padding-left:80px;
            
            /* font-size: 25px; */
            color: #000000;
            font:20.8px "Amazon Ember";
        }
        /* udit styling part */
        #containerD{
            margin-top: 50px;
        }
        #container{
         
            display: flex;
            justify-content: space-around;
            background-color: black;
        }
        #container div{
          
            color: white;
            
        }
        img{
            height: 370px;
            width: 500px;
        }
        h1{
            font-size: 50px;
        }
        #href>button{
            color: white;
            background-color: #0f79af;
            border: #0f79af;
            padding: 15px 40px;
            
            text-align: center;
            width: 50%;      
            font-size: 20px;
            border-radius: 5px;
        }
        #href>button:hover{
    cursor: pointer;
    background-color: #4590b6;
    transition: ease all 0.2s; 

}
        
        p{
            font-size: 20px;
        }
        /* udit styling part end */

   /* FAIZAN */

   #containerFAIZ{
            height: 400px;
            width: 100%;
            /* border: 1px solid rebeccapurple; */
            display: flex;
         
        
          
        }
        .box{
            height: 400px;
            width: 90%;
            /* border: 1px solid red; */
            color: white;
            background-color: black;
        } 
        .box1{
            height: 200px;
            width: 40%;
            /* border: 1px solid red; */
            background-image: url(https://m.media-amazon.com/images/G/01/digital/video/Magellan_MLP/PRIME_multi-benefit_MAGNET_2X._SX1440_CR575,0,865,675_QL80_AC_FP_.jpg);
            background-repeat: no-repeat;
            padding-left: 0px;
            /* padding-top: 70px; */
        } 
        .box1{
            height: 400px;
            width: 90%;
            /* border: 1px solid red; */
        
        }
     
            .one{
                height: 100px;
                width: 70%;
                /* border: 1px solid red; */
                padding-left: 100px;
                padding-top: 40px;
                font-family: sans-serif;
                font-size: 17px;
            }
       
            .two{
                height: 130px;
                width: 100%;
                /* border: 1px solid red; */
                padding-left: 30px;
                padding-top: 20px;
                font-family: sans-serif;
                font-size: 23px;
            }
     button{
         font-size: 20px;
         background-color: teal;
         padding-left: 20px;
         margin-left: 150px;
         margin-top: 30px;
         width: 30%;
         height: 50px;
         border: none;
         color: white;
     }
     
     #containerC{
        margin-top: 80px;
     }