@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Biryani:wght@200;300;400;600;700&display=swap');


body{ 
        background-color: rgb(236, 236, 236);
      /* max-height: 100%; */
    /* max-width: 100%; */
   
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0%;
    
}

.logo{ 
        /* max-width: 300px; */
        max-height: fit-content;
       max-width: 30vw;
     
}

img{ 
       
  height:40px;
  width: 300px;
 /* margin-right: 550px; */
 position: fixed;
 padding-left: 40px;
 padding-top: 20px;
 padding-bottom: 2%;
 padding-right: 80%;
 background-color: rgb(236, 236, 236);
}
#header{ 
        display: flex;
        /* max-width: 100%; */
       max-height: fit-content; 
         /* position: relative; */   
}
     
 #header li{ 
        float: left;
        padding-right: 100px;
        padding-bottom: 20px;
        list-style: none;
        color: black;
        margin-bottom: 10px;
        font-weight: 500;
        font-size: 18px; 
        /* background-color: rgb(236, 236, 236); */
}

#pricing{ 
        margin: 0px;
}
 
nav{ 
        padding-left: 60%;
        padding-top: 10px;
        position: fixed;
        /* background-color: rgb(236, 236, 236); */
        
}
#hero{ 
        max-width: fit-content;
     margin: 6% auto auto auto;
    text-align: center;
        
}
#hero h2{
        font-size: 25px;
        font-weight: 600;
        /* padding-top: 30%; */
}

 #email{ 
         max-width: 300px;
       margin: auto;
        height: 20px;
        width: 250px;
      padding: 2px;
}
.btn{ 
        margin-top: 20px;
       width: fit-content;
       background-color: rgb(241, 196, 15);
       font-size: 18px;
       font-weight: bold;
       border: none;
       padding: 5px 4px 5px 15px;
       cursor: pointer;
}

@media only screen and (min-width:768px) and (max-width:1024px){ 
        nav{ 
                padding-left: 0%;
                margin-top: 5%;
                float: right;
                /* justify-content: center; */
               position: relative 0; 
               right: 0%;
        }
        img{ 
                margin-left:0px;   
                padding-bottom: 8%;
           padding-right: 80%;
          background-color: rgb(236, 236, 236);
        }
        #hero{ 
                margin: 20% auto auto auto ;
        }
        
}
@media only screen and (max-width:700px){ 
        nav{ 
                padding-left: 0%;
                margin-top: 18%;
                float: right;
                justify-content: center;
               
        }
        img{ 
                margin-left:0px; 
                padding-bottom: 20%;
            padding-right: 80%;
            background-color: rgb(236, 236, 236);  
        }
        #hero{ 
                margin: 40% auto auto auto ;
        }
        
}
@media only screen and (max-width:425px ) { 
        nav{ 
                padding-left: 0%;
                margin-top: 13%;
                float: right;
                justify-content: center;
               
        }
        img{ 
                margin-left:0px;  
                padding-bottom: 30%;
                padding-right: 80%;
                background-color: rgb(236, 236, 236);
        }
        #hero{ 
                margin: 50% auto auto auto ;
        }
        .icon{ 
                display: none;
        }
        #pricing{ 
                display: flex;
               flex-direction:column;
        }
        .price{ 
                display: flex;
               flex-direction:column;
        }
        .price .btn{ 
                margin: 20px auto;
        }
}
@media only screen and (max-width:375px ) { 
        nav{ 
                padding-left: 0%;
                margin-top: 15%;
                float: right;
                justify-content: center;
               
        }
        img{ 
                margin-left:0px;  
                padding-bottom: 50%;
          padding-right: 80%;
           background-color: rgb(236, 236, 236); 
        }
        #hero{ 
                margin: 70% auto auto auto ;
        }
}

.container{ 
      margin: 5% 00% 00% 20%;
}

.grid{ 
 display: flex;
 margin-bottom: 50px;
 margin-right: 20%;
}

.icon{ 
        color: rgb(241 196 15);
       font-size: 50px;
       font-size: 50px;
       margin-right: 10%;
}


 .disc h2{    
        list-style: none;
        color: black;
        margin-block: 0;
        font-size: 30px;  
        font-weight: 600;  
}
p{ 
        margin-block: 0px;
}
.first-p{ 
 margin-left: 3%;
}
#video{ 
        height: 312px;
        width: 45%;
     margin: 5% 0% 0% 15%; 
}
#pricing{ 
        display: flex; 
       
}
.price{ 
        height: fit-content;
        /* background-color: red; */
       width:80%;
       margin-top: 10%;
      border: 2px solid black;
       text-align: center;
    
}
.price1{ 
   /* background-color:rgb(155, 211, 25); */
  margin-right: 10px;
}
.price2{ 
   /* background-color:rgb(201, 44, 44); */
  margin-right:10px;
}
.price3{ 
   /* background-color:rgb(146, 195, 67); */
  margin-right: 20%;

}
.price h2{ 
        background-color: rgb(218, 216, 216);
        margin: 0%;
       padding:5% 10% 5% 10%;
        font-size: 18px;
}
.price h3{ 
        font-size: 30px;
        font-weight: 400;
        font-family: 'Biryani', sans-serif;
    margin-block-end: 0px;
}
.price p{ 
       margin: auto;
}
.price .btn{ 
        /* margin-bottom: 20px; */
        font-weight: 300;
        padding:8px 12px 8px 12px;
     margin-bottom: 20px;
     
}
.btn:hover{ 
 
        background-color: rgb(246, 161, 3);
}
.btn:focus{ 
        border: 2px solid black;
}

footer {
        margin-top: 30px;
        background-color: #ddd;
        padding: 20px;
        margin-right: 20%;
      }
      
      footer > ul {
        display: flex;
        justify-content: flex-end;
        margin-top: 0%;
      }
      
      footer > ul > li {
        padding: 0 1%;
        list-style: none;

      }
      
      footer > span {
        margin-top: 5px;
        display: flex;
        justify-content: flex-end;
        font-size: 0.9em;
        color: #444;
      }
      
      footer > ul > li > a {
        color: black;
        text-decoration: none;
      }