@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');




*{font-family: 'Montserrat', sans-serif;
  
}

:root {
    --Extra-color: #FCD34D;
    --secondary-color: #BE185D;
    --button-color: #E5E7EB;
    --primary-color: #6366F1;
    --header-color: #374151
}

body {
    margin: auto;
}

.li{
  color: black;
}
hr {
    margin: 2rem 0rem;
}

.link {
    text-decoration: none;
    padding: 0.5rem 1rem;
    color: white;
   display: block;
   margin: 3px;
   text-align: center;
   display: inline-block;
}

.primary-link {

    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 0.35rem;
    text-align: center; 
}

.secondary-link {
    color: var(--primary-color);
    border: 1px solid black;
    border-radius: 0.35rem;
    padding: 0.5rem;
}

.container{
   
    height: 300px;
    width: auto ;
    position: relative;
    margin: 2px;
}

.item1{
    margin: 30px 0 0 30px;
    width: 50%;
    font-weight: bold;
    font-size: larger;
    display: block;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.bodyimg{
    height: 250px;
    width: 600px;
    margin: auto;
   
}

.item2{
    position: absolute;
    display: block;
    right: 0px;
    top: 0px;
    filter: drop-shadow(0px 5px 3px #374151 );
    animation: drop 1.5s ease;

}
.item3 {
    font-family: 'Montserrat'; 
    height: fit-content;
    width: 50%;
    text-align: center;
    position: absolute;
    top: 0%;
    right: 0%;
    margin: 2px;
  
    padding: 1rem;
}
.item4{
   
   
    height: 300px;
    width: 300px;
}

@keyframes drop {
0% {
    opacity: 0;
    transform: translateX(-380px);
}
100% {
    opacity: 1;
    transform:  translateX(0px);
}
}
a{
    margin: 0 0 px 0;
}

@media screen and (max-width: 1024px) {
 .container   {
   
     flex-direction: column;
     display: block;
     
 }
 .item1{
   
     padding: 1rem;
     display: block;
     margin-top: 1vh;
     text-align: center;
     font-size: small;
     display: absolute;

 }
 .item2{

   display: block;
    height: 50%;
     width: 50%;
     margin: auto;
 }
 .bodyimg{
     
     display: block;
     height: 100%;
     width: 100%;
     position: relative;
     right: 10px;
     top: 45px;
     
    
 }
 .item4{
     
    position: absolute;
    left: 0%;
     height: 280px;
     width: 230px;
 }
 .item3 {
   
    margin: 1px;
    font-size: x-small;
}
    
}



.comtainer {
    padding: 0rem 1rem;
}

.container-center {
    max-width: 600px;
    margin: auto;
    /* padding: 1rem 1rem; */
}



.list {
    list-style: none;
}

.list-display {
    display: inline;
}
.check-float{
    width: 100%;
    height: 500px;
    
}
.left-float{
    width: 50%;
    line-height: 250px;
    float: left;

}

.right-float{
    width: 50% ;
    line-height: 250px;
    text-align: right;

}

.nav {
    background-color: var(--primary-color);
    padding: 1rem;
    border-top-left-radius: 2rem;
    color: white;
    width: auto;
    block-size: auto;
}
.font-big1{
    font-weight: 500px;
    font-size: 4rem;
    margin: auto;
}
.two-head{
    position: relative;
bottom: 286px;
text-align: right;
  
      
}
div {
    display: block;
}

.nav-font {
    font-size: 30px;
    font-weight: 700;
    position: relative;
    left: 113px;
    top: 20px;
}

.nav-decoration {
    text-decoration: none;
    /* text-align: right; */
}

.nav-list {
    list-style-type: none;
    text-align: right;
    border-radius: none;
    border-top-left-radius: none;

}

.nav-list-display {
    display: inline;
    font-weight: 550;
    color: black;
    background-color: var(--button-color);
    border-radius: 0.7rem 0.7rem;
    /* margin: 0.25rem 0.25rem; */
}

.link-active {
    font-weight: bolder;
    color:var(--primary-color);
}



.side h1 {
    text-align: center;
}

.ow {
    background-color: #E5E7EB;
    padding: 1rem;
}

.footer {

    background-color: var(--primary-color);
    padding: 2rem 1rem;
    text-align: center;
    color: white;
    border-bottom-right-radius: 2rem;
    font-weight: 500;
    
}

.footer .link {
    color: white;
    
}

.Pro-page{
    padding: 2rem 2rem; text-align: cente;
padding: 2rem 2rem; text-align: center;
}

.two-page-list{
    text-align: center;
}
.ol{
    text-align: center;
}

.wrap{
    margin: 0;
}

textarea {
    width: 80%;
    height: 10vh;
    display: block;
    margin: 1rem;
    padding: 1rem;
}

#output {
    border: 1px solid black;
    width: 80%;
    height: 10vh;
    margin: 1rem;
    padding: 1rem;
}

.banana-nav{
    background-color: var(--primary-color);
    padding: 3rem;
    border-top-left-radius: 2rem;
    color: white;
   
    block-size: auto;
}

.banana-link{

   position: relative;
   right: 120px;
    color: var(--primary-color);;
    font-weight: 900;
    font-size: 15px;
    padding: 1rem;
    border-radius: 0.75rem;
   text-align: right;
   
}

.text-area{
   border-radius: 00.5rem;
   padding: 2rem;
   font-weight: bold;
   font-style: unset;

}

.btn-margin{
    margin: auto;
}