@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
:root{
     --font-main-heading:"IBM Plex Sans", sans-serif;
     --font-texts:"Source Sans 3", sans-serif;
     --white:#fff;
     --black:#000;
     --link:rgb(11, 11, 151);
}
*{
     margin:0;
     padding:0;
     box-sizing:border-box;
}
a,li,ul{
     list-style: none;
     text-decoration:none;
}
#ul{
     display: none;
}
body{
font-size:16px;
font-family:var(--font-texts);
}
.navigation-section{
     display:flex;
     justify-content:space-between;
     padding:10px;
     align-items: center;

}
.navigation-section a{
     color:var(--black);
     opacity:0.5;
}
.dark{
     color:rgb(19, 11, 63);
     font-weight:650;
}
.main-h1{
     font-size:3em;
     padding:.5em 0em;
     color:rgb(19, 11, 63);
     cursor:copy;
}
.desc{
     font-size:1.1em;
     font-weight:normal;
     line-height:1.7em;
     text-align: justify;
     padding:5px;
  

}

.nav2{
     display: none;
}
.logo-section{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding:10px 30px;
}
.logo{
     width:30%;
     padding:.8em;
     
}
.logo img{
     width:100%;
}
.sub p{
     opacity:0.9;
}
.sub{
     margin-top:2em;
     background-color:rgb(19, 11, 63);
     /* border:2px solid rgb(19, 11, 63); */
     padding:30px;
     display:flex;
     flex-direction:column;
     gap:15px;
     border-radius:10px;
     color:var(--white);
    justify-content: center;
}
.sub input[type='email']{
     padding:7px;
     width:60%;
     border-radius:2px;
     border:none;
     outline: none;
     background:transparent;
     border:1px solid #ffffffb4;
     color:#fff;
     font-weight:300;
}
.sub input[type='email']:focus{
     background-color:#fff;
     color:rgb(19, 11, 63);
}
.sub-btn{
     padding:7px;
     background-color:#fff;
     color:rgb(19, 11, 63);
     border:none;
     transition:0.3s ease-in-out;
     margin-left:5px;
     border-radius:2px;
}


.catogary-list{
     margin-top:20px;
     background-color:beige;
     padding:20px 10px;
     display:flex;
     align-items: center;
     justify-content:space-around;
}

.marked{
     background-color:rgb(19, 11, 63);
     color:#fff;
}

.list{
padding:15px;
border-radius:10px;
transition:.5s ease;
cursor:pointer;
}
.find{
     display:flex;
     align-items: center;
     gap:5px
}
.blog-container-wrap{
     display:grid;
     grid-template-columns:repeat(1,1fr);
     gap:2em;
     padding:10px 35px;
     /* background-color:yellow; */
     margin-top:2em;
     grid-template-columns: repeat(auto-fit, minmax(1fr,2fr));
    

}
.blog{
     display: flex;
     flex-direction:column;
     justify-content: center;
     justify-content:space-between;
     gap:.8em;
     background-color:beige;
     padding:20px;
     border-radius:5px;
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
     height:auto;
     transition:0.2s ease-in-out;
}
.blog hr{
border:2px solid rgba(19, 11, 63, 0.205);
display: none;
}
.blog-img{
     width:65%;
     align-self: center;
}
.blog-img img{
     width:100%;
     border-radius:5px;
}
.blog-details{
     /* margin-top:1em; */
     display:flex;
     justify-content: space-between;
     opacity:0.5;
}
.blog-heading{
     font-size:1.2em;
  
}
.blog-heading a{
     font-weight:500;
}
.search{
     display: flex;
     justify-content: center;
     align-items: center;
     gap:5px;
     margin-top:1em;
}
.search input{
     width:50%;
}
.search input:focus{
 border:2px solid rgb(19, 11, 63);
 background-color: rgb(19, 11, 63);
 color:#fff;
}

.search input{
     padding:1em;
     border:2px solid rgba(19, 11, 63, 0.267);
     font-size:.8em;
     border-radius:20px;

}
.thanku-modal{
     position: fixed;
     top:0;
     left:0;
   width:100%;
   background:rgba(0, 0, 0,0.8);
   height:100vh;
   z-index:5;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.8);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.4s ease, transform 0.4s ease;
}
.greet{
     background:#fff;
     padding:5em;
     color:rgb(19, 11, 63);
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
     font-size:1em;
     font-weight:normal;
     text-align: center;
     border-radius:2em;
     transition:.5s ease-in-out;
}
@media screen and (max-width:460px){
     body{
          font-size:12px;
     }
     .sub input[type='text']{
          width:60%;
     }
     .desc{
          padding:0px;
     }
     .blog-container-wrap{
          padding:10px 25px;
     }
     .blog{
          min-height: 300px; /* Set a minimum height */
          max-height:auto;
     }
     .main-h1{
          padding:0;
          padding-bottom:0.2em;
     }
}

@media screen and (min-width:530px) and (max-width:700px){
     body{
       
          font-size:17px;
     }
     .blog-container-wrap {
       grid-template-columns:repeat(2,1fr);
     }
     .desc{
          padding:15px;
     }
   
     .sub{
          width:90%;
     }
     .sub input[type='text']{
          width:70%;
     }
     .inpt{
          width:70%;
          align-self: center;
     }
     .main-h1{
          font-size:3.2em;
     }
     
}
@media screen and (min-width:700px) and (max-width:1200px) {
     body{
     
          font-size:18px;
     }
     .desc{
          padding:2em 5em;
     }
     .sub{
          width:60%;
          margin-top:1em;

     }
        .blog-container-wrap{
          grid-template-columns:repeat(2,1fr);
          padding:0em 1.5em;
        }
        .catogary-list{
          justify-content:flex-start;
          padding-left:3em;
        }
        .search input{
          width:30%;
        }
        .main-h1{
          padding:0;
          font-size:3.5em;
        }
        .logo{
          width:20%;
        }

}
@media screen and (min-width:1200px){
body{
     font-size:18px;
}
.logo{
     width:60%;
}
.desc{
     padding:1em 9em  1em 9em;
}
.sub{
     width:50%;
     margin-top:1em;
}

   .blog-container-wrap{
     grid-template-columns:repeat(3,1fr);
     padding:1em 3em;
   }

   .sub input[type='email']{
     width:70%;
     padding:11px;
}
.sub-btn{
     padding:11px;
}
.inpt{
     width:70%;
     align-self:center;
}
.blog{
     padding:30px;
}
.catogary-list{
     justify-content:flex-start;
     padding-left:3em;
   }
   .search input{
     width:30%;
   }
   .logo{
     width:17%;
   }
   .main-h1{
     font-size:4em;
     padding:0;
   }
}
@media screen and (min-width:1400px){
     body{
     }
     .logo{
          width:10%;
     }
     .description{
          padding:1em 5em;
     }
     .main-h1{
          font-size:5em;
     }
}