.container-fluid{

  width: auto;
}

/* Footer */

.footer{
height: 340px;
background-color: rgba(19, 18, 22, 0.282);

}
.footer-container{
background-color: rgba(59, 57, 57, 0.543);
list-style: none;

}
.footer-contact-row{
padding: 23px;
color: rgb(61, 61, 61);

}



.Bottom-Footer-Container{

list-style: none; /* Get rid of the Bullet on the list items. */


}





/*End of  Footer */


/* Accordion styling here  */




.accordion-button{
text-align: center;
font-size: 32px;
padding: 32px;
letter-spacing: 0.032em;
}
.accordion-body{
text-align: center;
margin-top: 52px;

padding: 2.5rem;
line-height: 3.43rem;
letter-spacing: 0.08em;
font-size:1.13em ;
}



.accordion{

/*  */

width: 55%;
padding: 5rem;
text-align: center;
margin: auto;
}





body {

text-align: center;
font-size: larger;
}



.imprnt-text{
  
text-decoration: underline;
  text-decoration-color: rgb(137, 73, 10);
  font: bold;
  color: rgb(102, 61, 27);
}

.Title2{
font-size: x-large;
  font-weight: 800;
}
                                                                                  /* row formats */
.row{
    padding:40px;
flex-wrap: wrap;
flex: auto;
justify-content: space-around;
justify-content: space-between;
flex-direction: row;


}


                                                                                  /* Navigation  */

.navbar {
    font-size: larger;
    text-align: center; /* Center align the text horizontally */
  }
  
  .navbar ul {
    list-style: none;
    padding: 0;
  }
  
  .navbar li {
    display: inline; /* Display list items horizontally */
    margin: 0 20px; /* Adjust the horizontal spacing between items */
  }
  
  .navbar a {
    text-decoration: none;
  }
  
  .navbar a:hover {
    text-decoration:underline;
    color: rgb(124, 61, 137);
  }
  

.About-Content{


margin-bottom: 32rem;

}


  /* About Me Section  */

  #about-me-info-row{
margin-top: 3.4rem;
background-color:rgba(128, 128, 128, 0.194);
padding: 22px;
border-radius: 22px;  
color: darkgrey;

}


#about-me-info-row:hover{
  transition-delay: 10.93s; 
  transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  background-color:rgba(48, 47, 47, 0.194);
}

#about-me-info-row p{

color: blueviolet;
font-weight: 400;
}
.about-img{

width: 1200px;
border-radius: 1.3%;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.615); /* Adjust values for horizontal offset, vertical offset, blur radius, and color */
}


#about-me-info-row .col-md-3:hover{

    transform: translateY(10px); /* Move the card up by 5 pixels on hover */
    transition-delay: 0.3s; 
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    cursor: pointer;
    background-color:rgba(52, 52, 52, 0.099);
    box-shadow: 0px 4px 8px rgba(0, 0, 2, 0.118); /* Adjust values for horizontal offset, vertical offset, blur radius, and color */
    border-radius: 24px;
}


                                                    /* hero  section */



#Projects-title{


font-weight: 400;

}


#about-title{
margin-top: 2.3rem;
font-weight: 800;
text-decoration: underline 2px solid;
}


.hero{

margin-top: 6.4rem;
padding: 34px;

}


#hero-profile-pic{

                                            /* the Profile pic in the hero section*/
width: 1200px;
float: none;
border-radius: 84px;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.455); /* Adjust values for horizontal offset, vertical offset, blur radius, and color */
}

.hero-title{
/* herotitle paragraph here  */
width: 600px;
float: right;
padding: 20px;
border: 1.5px solid;
border-radius: 24px;
color: rgb(96, 75, 149); 
}
.hero-title h4,h3{
color: black;
/* Front-End Specialist */
/* Junior web Developer */

}
.hero-title p {
  margin-top: 1.3rem;
  line-height: 5.2rem;
  color: rgb(96, 75, 149);
  font-size: 32px;
/* herotitle paragraph here  */

/* Creating a border here  - improve readabliity*/

}


                                                      /* project section  */





#project-row,.col-md-4{
  width:fit-content;/* Fit content centerd the cards into the middle on the wider vp*/
  
  margin-top: 22px;
  text-align: center;
  margin: auto;
padding: 124px;
}
/* Card styling starts here.  */

               .card-title{
                font-size: xx-large;
                color: rgb(224, 224, 224);



               }                                                           /* Projects */
                                                                          
#p-card{
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*Drop shadow*/
background-color:rgb(88, 97, 107);
color: aliceblue;
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.card-body a { 

letter-spacing: 0.3rem;
font-weight: 500;
text-decoration: none;
font-size: xx-large;

}
.card-link-2{
  color: rgb(44, 41, 41);

}
.card-link-2:hover{

color: rgb(252, 251, 252);

}
.card-link-1{

color: rgb(165, 165, 165);

}
.card-link-1:hover{

color: white;

}


.card:hover {
  transform: translateY(20px); /* Move the card up by 5 pixels on hover */
  transition-delay: 0.3s; 

}

.card-text{
font-size: x-large;


}
                                                                    /* -Contact- */


#Contact-Form{

margin-top: 12.4rem;


}


                                                /* Form */
                                                form{
                                                  padding: 53px;
                                                  background-color:rgb(88, 97, 107);
                                                border-radius: 24px;
                                                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                                                }

                                                .form-control{
                                                margin-top: 12px;
                                                width: 735px;
                                                text-align: center;
                                                margin: auto;
                                                height: 3.1rem;
                                                }


#Contact-Title{
font-weight: 400;
/* Contact title on the index page */
}
/* ICON STYLING */
.bi-code-slash{
  margin-right: 15px;
  width: 24px;
    height: 24px;

}

.bi-gear-wide-connected{


  margin-right: 15px;
  width: 54px;
    height: 54px;

}


.bi-eye-fill{
margin-right:15px;
width: 24px;
  height: 24px;
}
.bi-envelope-arrow-down{
/* Email Icon next to the contact Title. */
width: 320px;
height: 420px;

}
/* Websites Css styles */

.about-paragraph-1 {

font-size: 1.08em;
padding: 3rem;
line-height: 5.2rem;
letter-spacing: 0.09rem;


margin: auto;
}

#grnz-hero-pic{

width: auto;
border-radius: 24px;
}

#grnz-hero-pic-text{
  margin-top: 4.3rem;
 font-size: larger;
 font-weight: 600;
  line-height: 4.1rem;
  line-break:auto;
 
}

#grnz-row-a{
  padding: 24px;

}








.container-links-grnz{
margin-left: 535px;
display: flex;

}



.list-grnz-links{
  text-decoration: none;
  list-style: none;
}
#Grnz-title{

font-weight: 800;
letter-spacing: 0.8rem;
font-size: 5rem;
}

#grnz-cookie-pic{

padding: 56px;

border-radius: 5px;
}

#grnz-cookie-pic p{
  text-align: right;
  font-size: 24px;
  padding: 12px;

}

#grnz-code-pic{

  padding: 22px;
  border-radius: 42px;
}


#grnz-product-text{
  margin-top: 4.2rem;
line-height: 2.23rem;
text-align: center;

}

#grnz-title{

  font-size: 10.4rem;
}

#title-section{


  margin-top:66rem;
}

.white-space{

height: 200px;

}



.Create-Product-Title{


margin-top: 22.4rem;
margin-bottom: 12.2rem;
}

.GRNZ-para{

font-size: 1.12em;
letter-spacing: 0.11em;
}





#Home-about-info{
margin-top:4.2em;


}


/* Contact:email styling */
.useremail {
  
  

color: rgb(59, 59, 59) ;
text-decoration: underline 2px ;
text-underline-offset: 20px;
text-underline-position:above;
}