* {
   --background-color: rgb(249, 249, 249);
   --border-radius: 10px;
   --image-size: 500px;
   box-sizing: border-box;
   font-family: 'Poppins' ;
}

body{
   background-color: var(--background-color);
}

.header {
   position:fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1;
   background-color: rgb(236, 236, 236);
   border-bottom: 2px solid #ddd;
   margin-bottom: 5px;
}

.nav-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
  
   
}

.logo-container img{
   width: 160px;
}

.links ul{
   display: flex;
   height: 100%;
   margin: auto 0;

}

.links ul li {
   list-style: none;
}

.links li a{
   text-decoration: none;
   color: #818181;
   height: 100%;
   font-size: 18px;
   font-weight:500;
}

.links ul li {
   margin-left: 20px;
   
}
.links ul li a:hover {
   transition: all .3s ease ;
   transform: scale(.97) translateY(-3%);
   color:#000;
}

.links ul li a::after {
   color:dodgerblue;
}


/* BODY STYLING  */

.first-row-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-grow: 1;
   margin: 10% auto;

}

.write-up-container {
   text-align: justify;
   margin: 20px 50px 20px 0;
}

.write-up-container h1{
   font-size: 70px;   
}

.my-image-container img {
   width:var(--image-size);
   border-radius: var(--border-radius);
}


.about-container {
   background-color: white;
   padding: 5% 0;
}

.about-header, .card-header, .experience-header {
   display: flex;
   flex-direction: column;
   align-items: center;

}
.about-header hr, 
.about-body-items hr, 
.card-header hr,
.experience-header hr, 
.feedback-header hr, .contact-header hr {
   width:10%;
   background-color:rgb(0, 190, 6);
   text-align: center;
   height: 4px;
   border: none;

}

.about-body-items {
   display: flex;
   margin: 5% auto;
}

.about-body-item-image img {
   width: var(--image-size);
   border-radius: var(--border-radius);
   border: 1px solid #ddd;
}

.about-body-item-texts {
   margin: 20px 50px 20px 0;
}

.about-body-item-texts p {
   text-align: justify;
}


.services-container::before {
   background-color: aliceblue;
}

.card {
   position: relative;
   align-items: center;
}

.card-image img{
   width:300px;
   
}

.card-header {
   text-align: center;
   margin-top: 5%;
}

.cards-container {
   display: flex;
   justify-content: space-evenly;
   gap: 10px;
}

.card-text-content {
   padding:10px;
   text-align: center;
}

.working-experience-container {
   margin: 10% auto;
}

.experience-content {
   display: flex;
   gap: 2%;
   margin: 3% auto;
}


.experience-header {
   text-align: center;
}

.experience-card {
   background-color: #fff;
   padding:2%;
   border-radius: 8px;
}

.feedback-container {
   background-color: rgb(246, 252, 255);
   padding: 5% auto;

}

.feedback-header {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.feedback-content {
   display: flex;
   gap: 20px;
   justify-content: space-evenly;
   padding:5%;
   text-align: center;
}

.feedback-content .inner-content {
   background-color: #fff;
   border-radius: 10px;
}

.avator img {
   width:4rem ;
   border: 3px solid orange;
   border-radius: 80%;
   padding:5px;
}

.content-area {
   position: relative;
   margin-top: 5%;
   text-align: center;
}

.contact-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.textarea-container {
   margin:5% auto auto auto;
   width:500px;
}


.card-space {
   background-color: #fff;
   padding:40px;
   border-radius: 15px;
   margin:10px;
   
   
}
.card-space img {
   width:30px;
   margin:20px;
   
}

.contact-card-container {
   display: flex;
   flex-grow: 1;
   gap: 10px;
  
}

.form-container input{
    padding:20px auto;
}


/* FOOTER STYLING */

.footer {
   background-color: #000;
   color:#fff;
   
}



/* media query section... */
@media screen and (max-width: 767px) {
   /* Styles for screens with a maximum width of 767 pixels */
   /* Add your responsive styles here */
   .ontainer {
      max-height: fit-content !important ;
      font-size: 14px;
   }
   .nav-bar{
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 5px;
      height: 100px;
      width: 100px;
   }
   .nav-bar ul{
      margin-left: -5%;
   }
   .nav-bar button {
      visibility: hidden;
   }

   .first-row-content,
   .about-body-items {
      width: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      
   }

   .write-up-container h1 {
      line-height: 56px;
   }

   .write-up-container  {
      margin-top: 100px;
   }
   .my-image-container img,
   .about-body-item-image img{
      max-width:370px;
   }
   
   .cards-container, 
   .experience-content,
   .feedback-content, 
   .contact-card-container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 10px;
      
   }
   .textarea-container{

   }
 
 }