/* Common code starts here */
:root {
  transition: all 0.3s ;
}


* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  list-style-type: none;
  text-decoration: none;
  outline:none;
  font-weight: 400;
}

html {
  background-color: #fafafa;
  scroll-behavior: smooth;
  font-size: 62.5%;
  font-family: "Roboto", serif;
}

body {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
/* background-color: #fff; */
/*background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);*/
  max-width:100rem;
  max-width:100%;
  margin: auto;
  box-shadow: 0.1rem 0.1rem 0.1rem #c4c4c4, -0.1rem 0rem 0.1rem #c4c4c4 ;
}


.text-justify {
  text-align:justify;
}

.text-white {
  color:white;
}

.section-center {
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction: column;
  gap:5rem;
}

.section-heading {
  font-size:6rem;
  text-align:center;
  font-family: "Italiano", cursive;
  margin-bottom: 10rem;
}

img {
  width:100%;
  height:auto;
}

.center {
  
     Display :flex;
    justify-content: center;
    align-items: center;
    
}

.left {
  
      Display :flex;
    justify-content: left;
    align-items: center;
}
.right {
  
      Display :flex;
    justify-content: right;
    align-items: center;
}

/* Common code ends here */



     /* Header Section start */

header {

  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  padding:1rem;
  z-index: 10;
  position: sticky;
  top:0;
  width:100rem;
  max-width: 100%;
}


.header_text {
  flex:1;
  justify-content: flex-end;
 font-size: 20px; 
            font-family: "Pacifico", serif; 
            background: #00FF00;
background: linear-gradient(to left, #00FF00 0%, #00FFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

      
            display: inline-block;
  
}

 .header_text_link:hover {
   background-color: rgb(255, 255, 255, 0.2)
}

  #menu_icon {
    color: white;
    font-size: 4rem;
    display: none;
  }


nav ul {
  display:flex;
  gap:1rem;
}

.nav_link {
font-size:2rem;
  padding:1rem;
  transition: all 0.4s linear;
  cursor: pointer;
  background: radial-gradient(circle, rgba(0,240.01875,215.77293008005446,1), #04c70a);
     background: -webkit-radial-gradient(circle, rgba(0,240.01875,215.77293008005446,1), #04c70a); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent;

}





.nav_link:hover {

  background-color: brown;
  border-radius: 0.6rem;
}


        /* Header Section End */



        /* Banner Section starts here */


.banner {
  padding:3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;

}


.banner article {
  flex-basis: 50%;
  margin:1rem;
}


.banner_heading {
  display:inline-block;
  padding:1rem;
  background-color:#000000;
  color:#fff;
  margin-bottom:1rem;
  font-size: 3rem;
}

.banner_desc {
  font-size:1.4rem;
}

.banner aside {
  flex-basis: 50%;
  text-align: center;
}

.banner_img {
  max-width: 100%;
  max-height: 100%rem;
  border: 0.3rem solid; 
}

        /* Banner Section Ends here */
       
       
       
       /* About Section starts here */

.blog-about {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #C4C6DC;
  padding: 3rem 1rem;
}


.about-heading {
  margin-bottom:4rem;
  margin-top:4rem;
  color:black;
}

.cards {
  display: flex;
  align-items: center;
  gap:1rem;
  margin-bottom:5rem;
}

.card {
  border-radius: 0.5rem;
  box-shadow: 0 0 20px #eee;
  background-color: #fff;
  padding:2rem 1rem;
  margin:2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;

}

.card:hover {
  transform: scale(1.1)
}

.card_header {
  font-size:3rem;
}

.card_desc {
  margin-bottom: 1rem;
  padding:0.4rem 0rem;
  font-size: 1.6rem;
  text-align: center;
}

.card_btn {
  width:80%;
  
}

.btn {
  background-image: linear-gradient(to right, #414d0b 0%, #727a17  51%, #414d0b  100%);
  border-radius: 3rem;
border:none;
  cursor:pointer;
  font-size:1.6rem;
  padding:1rem;
  box-shadow: 0 0 20px #eee;
  letter-spacing:0.1rem;
  text-transform:uppercase;
  color:white;
}

       /* About Section Ends here */
       
       
       
       /* Archieve Section starts here */

.blog-archieve {
  min-height: 600px;
  padding-bottom:3rem;
}

     
.archieve-heading {
  margin-bottom:10rem;
  margin-top:4rem;
}


.archieve-container {

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-top:0.1rem solid;
  border-bottom: 0.1rem solid;
  padding:2rem;
  width:90%;
  margin:3rem;
}

.archieve-lists {
  display: flex;
  text-align: center;
  gap:2rem;
  justify-content: center;
 
}

.archieve_list {
  width:20%;
}




.archieve_img {
  height: 100%;
  width:100%;
  border-radius: 0.6rem;
  transition:all 0.3s;
}

.archieve_img:hover {
  transform: scale(1.1)
  
}

       /* Archieve Section Ends here */



       /* Blog Section starts here */


.sec-blog {
flex-direction: column;
height:auto;
background-image: #CFCFCF
}
.blog-heading {
  margin-bottom:5rem;
}

.blog-posts {
  margin-bottom: 10rem;
}

.blog-post {
  width:75%;
  display:flex;
 box-shadow: 0 0 20px #eee;
  transition:all 0.3s;
 margin:1rem 0;
 height: 22rem;
  

}

.blog-post:hover {
  transform: scale(1.1)
}

.blog-post-img {
  
  height:100%;
  flex:1;
  float:left;
}

.blog-post_img {
  height:100%;
  width:100%;
}
.blog-post-article {
  flex:2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding:2rem;
  margin-left:2rem;
  gap:1rem
}

.blog-post_heading {
  margin-bottom:1rem;
  font-size: 2.5rem;
}

.blog-post_sub-heading {
  font-size:2rem;
}

.blog-post_desc {
  font-size: 1.6rem;
  text-align: justify;
  
}

.blog-post_btn {
  
  width:30%;
}

       /* Blog Section Ends here */




       /* Contact Section starts here */

.sec-contact {
  min-height: 50vh;
  background-color: #C4C6DC;


}

.contact-heading {
  margin-top:10rem;
  color:black;
}

form {
  box-shadow: 0 0 20px #eee;
padding:2rem;
color:#000000;
margin:1rem;
display: flex;
flex-direction: column;
transition: all 0.3s;
border-radius: 0.6rem;
}

form:hover {
  transform: scale(1.1);
}

.form-control {
  margin-bottom: 1.5rem;
  display:flex;
  justify-content: center;
  align-items: center;
}

.form-control label {
  font-size:1.6rem;
  flex:0.3;
}

.form-control input {
  flex:0.7;
  width:40rem;
  padding:2rem 1rem;
  border:none;
  border-radius:0.6rem;
}

.input-text {
  resize: none;
  height: 5vh;
}

.contact_btn {
  display: flex;
  justify-content: flex-end;
}

       /* Contact Section Ends here */



       /* footer Section starts here */

.sec-footer {
  background-color: #222;
  color:#fff;
  padding:2rem;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 5vh;

}

.footer-text {
  flex:1;
  font-size:2rem;
}


.footer-nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 3rem;

}

.footer_icon {
  font-size: 3rem;
}
 
 .footer_link {
  color: white;
  transition: all 0.3s;
}

 .footer_link:hover {
  color: orange;
  transform: scale(1.3)
}


   /* Footer Section Ends here */



@media screen and (max-width:768px) {
  
html { font-size: 55.5%;
}

header {
  flex-direction: column;
  gap:1rem;
  
}

#menu_icon {
  display: block;
  margin:1rem 0;
}

.hidden {
  display:none;
}


nav ul {
  flex-direction: row;
 padding-left: 1.9rem;
}

.nav_link {
  font-size: 1.3rem;
}
.banner{
  flex-direction: column;
 
}

.banner article {
  flex-direction: column;
  width:80%;
  display: flex;
  align-items: center;
  
}
.banner aside {
  width: 80%;
}

.cards {
  flex-direction: column;
}

.card {
  width:75%;
}

.blog-archieve {
 min-height: auto;
}
.archieve-lists {
  
  flex-direction:column;
  gap:2rem;
  width:70%;
}

.archieve_list {
  width:100%;
  
}
.blog-posts {
  gap:3rem;
}
.blog-post {
  flex-direction: column;
  height: auto;
}

.blog-post_btn {
  width:50%;
  
}


.sec-contact {
  height: auto;
}

form {
  width:80%;
  margin-bottom: 15rem;
}



.contact-heading {
  margin-top:5rem;
}


.sec-footer {
  flex-direction: column;
  gap:2rem;
  
}

.footer-text {
  
  font-size: 1.5rem;
}

}