nav>i>img{
    width:60%;
}
*{
    margin: 0px;
    padding: 0px;
}
.main{
    display: flex;
    border: 0px solid red;
    width:100%;
    margin: auto;
}
.navbar{
    width:200px;
      left:-200px;      
    position: fixed; 
    margin: auto;
    border: 0px solid red;
    background:white;
    height: 100%;
    transition: 0.4s ease;
    z-index: 20;
}
.navbar ul a{
 width: 70%;
 height: 100%;
 display: block;
 line-height: 40px;
 padding-left: 20px;
}
.pic{
width:100%;
border: 0px solid grey;
height:400px;
margin: auto;
background-image: url("https://assets.interntheory.com/creative/Homepage-Banner.png"); 
background-size: 2000px 500px;
background-repeat: no-repeat;
}
.get>h2{text-align: center;
margin-top: 90px;}
.get>h2>span{
background-color: Red;
padding: 4px;
}
.get>h4{
text-align: center;
margin-top:10px;
color:white;
}
.white{
border: 0px solid red;
width:80%;
margin: auto;
height:100px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding-top: 20px;
z-index: 10;
display: flex;
margin-top:30px ;
}
.white>div{
margin: auto;
}
.white>div>input{
height: 30px;
width:170px;
margin-left: 10px;
border: none;
border-bottom: 1px solid black;
background-color: transparent;

}
::placeholder{
color :rgb(121, 123, 124);
font-size: 18px;
}
.white>div>button{
background-color: red;
padding: 8px;
color: white;
border-radius: 10px;
border: none;
}
.white>div:nth-child(5){
background-color: rgb(242,242,242);
padding: 8px;
border-radius: 8px;

}
ul li:hover a{
background-color: grey;
padding-left: 40px;
}
nav ul a i{
margin-right: 20px;
}
.resize{
left:0px;
}
#icon{
border: 0px solid green;
height: 100%;
width:10%;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 20px;
}
#topnav{
display: flex;
height:60px;
justify-content: space-between;
margin-bottom: 0px;
position: fixed; 
background-color: white;
width: 100%;
margin-bottom: 50px;
z-index: 10;
}
#butn{
margin-right: 20px;
display: flex;
width: 10%;
justify-content: space-between;
align-items: center;
}
#butn>button{
background-color: red;
padding: 0px 10px;
color: white;
border-radius: 10px;
padding: 10px;
}
#middle{
width:80%;
display: flex;
display: grid;
margin: auto;
grid-template-columns: repeat(2,1fr);
grid-row: 1;
margin-top: 40px;
}
#middle>div:nth-child(2){
display: grid;
grid-template-columns: repeat(4,1fr);
grid-row: repeat(5,1fr);
}
#middle>div:nth-child(1)>h3{
margin-top: 150px;
margin-bottom: 10px;
text-align: center;
}
#middle>div:nth-child(1)>h3>span{
color: red;
}
#middle>div:nth-child(1)>p{
width: 86%;
text-align: left;
margin-left: 20px;
line-height: 23px;
margin-top: 10px;
}
#middle2{
border:0px solid blue;
width:100%;
display: flex;
display: grid;
margin: auto;
/* grid-template-columns: repeat(2,1fr);
grid-row: 1; */
margin-top: 40px;
background-color: rgb(247,252,254);
}
#middle2>div{
border:1px solid blue;
width:80%;
display: flex;
display: grid;
margin: auto;
grid-template-columns: repeat(4,1fr);
grid-row: repeat(2,1fr); 
margin-top: 40px;
gap:10px 0px;
border: 0px solid pink;
}
#middle2>div:nth-child(2)>div{
display: flex;
border-radius: 5px;
}
#middle2>div:nth-child(2)>div>img{
width:96%;
margin: auto; 
border-radius: 5px;
}
#middle2>h1{
text-align: center;
margin-top: 80px;
margin-bottom: -20px;

}
#middle2>h1>span{
color: red;
}
#middle3{
border:0px solid blue;
width:100%;
display: flex;
display: grid;
margin: auto;
/* grid-template-columns: repeat(2,1fr);
grid-row: 1; */
border: 0px solid brown;
background-color: rgb(238,238,238);
}
#middle3>div{
border:0px solid red;
width:80%;
display: flex;
display: grid;
margin: auto;
grid-template-columns: repeat(3,1fr);
grid-row: repeat(1,1fr); 
margin-top: 40px;
/* gap:10px 0px; */
}
#middle3>div>div{
margin: auto;
display: flex;
}
#middle3>div>div>img{
width: 97%;
margin: auto;
}
#middle3>h1{
text-align: center;
margin-top: 80px;
margin-bottom: -20px;
}
#middle3>h1>span{
color:red;
}
#middle4{
border:0px solid red;
width:70%;
display: flex;
display: grid;
margin: auto;
grid-template-columns: 40% 60%;
grid-row: 1; 
background-color: white;
}
#middle4>div:nth-child(1)>img{
width: 70%;
}
#middle4>div:nth-child(2)>h2{
text-align: center;
margin-top:120px;
margin-bottom: 15px;
}
#middle4>div:nth-child(2)>h2>span{color:red}
#middle4>div:nth-child(2)>p{
text-align: left;
width: 90%;
line-height: 20px;
margin-top:10px;
}
#middle5{
width: 100%;
height:200px;
background-color: rgb(238,238,238);
}
#last{
border: 2px solid greenyellow;
width:99%;
display: grid;
grid-template-columns: repeat(1,1fr);
grid-template-rows: auto;
border: 0px solid greenyellow;
background-color: rgb(68,100,120); 
}
#last>div:nth-child(2)>a{
color: white;
font-size: 13px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;

}
#last>div:nth-child(2)>hr{
margin-top: 10px;
}
#last>div:nth-child(2)>p{
color: white;
text-align: center;
margin-top: 5px;
}
#last>div:nth-child(1){
border: 0px dotted orchid;
width:80%;
display: grid;
grid-template-columns: repeat(3,25%);
grid-template-rows: 1; 
margin: auto;
justify-content: space-around;
gap:30px;
margin-top: 40px;
margin-bottom: 30px;
}


#last>div:nth-child(2){
border: 0px dotted darkcyan;
margin: auto; 
margin-left:100px ;
margin-top: 10px;
margin-bottom: 30px;
}
a{
text-decoration: none;
}
#last>div:nth-child(1)>div>a>p{
color: white;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
line-height: 30px;
}
#last>div:nth-child(1)>div>p{
color: white;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;

}
li a i{
margin-right: 20px;
}
.sla{
    width:300%;
}

/* main stylin */
.midmain{
    border: 0px solid red;
    width: 100%;
    height:270px;
    margin: auto;
background-color: rgb(238,238,238);
position: relative;
overflow: hidden; 

}
.midmai{
    border: 0px solid blue;
    width: 70%;
    height:160px;
    margin: auto;
    border-radius: 0px 60px 0px 60px;
    display: flex;
    background-color: white;
      position: absolute;   
    left: 15%;
    top:10%;
    padding-right: 40px;
    z-index: 1;
     -webkit-clip-path: circle(1.0% at 0 46%);
clip-path: circle(1.0% at 10 100%); 
margin-top: 30px;

}
.midmai>div:nth-child(1){
    border: 0px solid green;
    width: 26%;
    height:150px;
    margin: auto;
    margin-left: 40px;
}
.midmai>div:nth-child(2){
    border:0px solid greenyellow;
    width: 65%;
    height:150px;
    margin: auto;
}
.inv{
    font-style: italic;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 20px;
    margin-top: 40px;
    color: gray;
}
.boxr{
    border-radius: 30px;
}
.p{
    margin: 0px;
}
.talign{
    text-align: center;
    
}
.imgalign{
    margin-left: 90px;
    margin-top: 25px;
    
}
.blue{
    color: blue;
}
.nav{ border: 0px solid palevioletred;
    width:85%;
    display: flex;
    z-index: 3;
    position: relative;
    top:120px;
    /* left: 600px; */
    justify-content: space-between;
    margin: auto;
}
.nav .btnp,.nav .btnn{
    cursor: pointer;
     height:12px;
    width: 12px; 
    background-color: blueviolet;
    border-radius: 50%; 
    margin: 13px;
   
}
.midmain .midmai.active{
 -webkit-clip-path: circle(150% at 8% 52%);
clip-path: circle(150% at 8% 52%); 

transition-property: circle(150% at 30% 50%); 
 /* transition: 4s;   */
 transition-duration: 7s;
}