/* CUSTOM COLOR PALETTE*/

/* Background: Light Blue Color : #B7DAF0 */

/*  Text: Dark Brown Color: #652A10*/

/* Title h2 Dark Green Color #164632*/

/* Text in the container content stripe Dark Brown Color: #652A1*/

/* Navigation Bar Background Color when you hover: #C6F1D3*/

/* Navigation Bar Text Color + when you hover: #141414*/

/* Navigation Bar Color Green #61B8A5*/

/* Nav bar links when you hover  61B8A5*/


*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Navigation bar image and logo*/

#logo{
    margin:5px 0px;                   /* #logo margin: 5 px controls up direction and 0px control left direction means the distance from top and bottom in the navbar*/
}

  #logo img{
    margin: 2px 10px;               /* margin: 2px controls the top and 10px controls the left--->it controls the logo in the navbar*/
    width: 20%;                    /*width:20%  It means how big is the logo image --->NOTE: To re responsive it shoud be in percentage*/
    min-width: 190px;              /*min-width:190px it means how big is the logo image*/    /*width:300px means how big is the logo image*/
    height: auto;                     /* I added height:auto here*/
/* position: relative; REMOVED!!!*/            /*I added position relative here */
}

   /* .responsive is for image to be responsive  */

  .responsive{                
    max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
    height: auto;
  }

  /* Style the Main Image Content including the Text*/
  
  .container .content {                              /* .coontainer .content is WORKING NOW TIME IS 10.05 4 JULY */
    text-transform: capitalize;
    position: absolute;                        /* Position the background text */
    bottom: 3%;                                /*  HERE WAS THE PROBLEM! At the bottom. Use top:0 to append it to the top */
    background: #652A10;                    /* Fallback color */
    background: rgba(120, 233, 241, 0.5);   /* GREAT yellow colors ---> rgba(196, 223, 97, 0.5) AND rgbA(191, 244, 16) */  /* Black background with 0.5 opacity */  
    color:#141414; /* Grey text */         /* color: is the color of the text in the transperant lenta */
    width: 80%; /* Full width */                     /* width: 98.7% is the WIDTH of the green tranparent block */
    padding: 1%; /* Some padding */
    font-family: Arial, sans-serif;
    font-size: 1.375rem;                             /* 	22 px= 1.375rem   24 px= 1.5rem*/
    text-align: left;                                /* text-align: Position the text  on the left side*/
    /*font-weight: 900;*/
  }
    
    .container main{                       
      position: relative;
      max-width: 50px; 
      margin: auto;
      }
    
    content .responsive{       /* .responsive I added this now but it is not WORKING  */
        max-width: 100%;
        height: auto;
      }
    

  /* Style the Navigation Bar*/

nav{
    width: 100%;
    background:#61B8A5;         /*rgba(4, 67, 15, 0.5); #275F26 #CCF5EB  #61B8A5*/
    opacity: 100%;
                                    /*margin: 1; REMOVED IT DOES NOTHING FOR ME*/ 
    padding:0;
    font-size: 15px;                 /* font-size: 15px it meaNS that the text in the navbar is 15 px; ---> NOTE:By default is 16px*/ 
}

nav ul{
    display: flex;
    justify-content: flex-end;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

nav ul li{
    list-style: none;
    position: relative;
    padding: 14px 0px;                 /* padding: originally was 10px 0px ---> NOTE: change it to 14px 0px for smooth transition */
    transition: 0.5sec;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,.2); /* border-right: COLOR IS rgba(255,255,255,.2) 1px solid in the navbar, I can remove it later */
}

nav ul li:hover{
    background: #C6F1D3; /* nav ul li:hover it means When You hover to see the navigation bar the color is light green rgba(224, 246, 227, 0.5)*/
}

nav ul li:last-child{
    border-right:none;
}

nav ul li a{
    text-decoration: none;
    padding: 0px 20px;
    color:#141414;      /*  THIS IS THE TEXT IN THE NAVBAR NEW COLOR #474747*/
}

nav ul li ul{
    position: absolute;
    background:#61B8A5; /*  THIS IS THE color of the subpages IN THE NAVBAR NEW COLOR* NOTE: OLD COLOR rgba(4, 67, 15, 0.5) NEW #61B8A5 */
    top: 45px;
    left:0;
    display: block;
    width: 200px;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    padding: 0;
}

nav ul li:hover ul{
    opacity: 1;
    visibility: visible;
}

nav ul li ul li{
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.2);    /* OLD COLOR rgba(255,255,255,.2)*/
}











/* Media Queries Styling for the Navbar and accompanying Text*/

@media (max-width: 680px){         
nav{
    font-size: 13px;  /* font-size:13px it means that when the website is shrinked, the text in the navbar is 13px in size NOTE: Look on the left to see how the text gets smaller*/
}
        nav ul 
        {
              display: block;
        }
        nav ul li
        {
              display: block;
        }

        nav ul li ul 
        {
              width: 100%;
              z-index: 1;
        }

        img#pic2 {
          min-width: 200px;

        }

.content{
    display: none;
}

/*.bikes-left{
  display: block;
  text-align: center;
  float: none;
  width: 100%;

}

.bikes-right{
  display: block;
  text-align: center;
  float: none;
  width: 100%;
}*/
}



/*Style the Body*/ 

body{
  background-color: #B7DAF0;    /* #B7DAF0 #B7DAF0 */
  max-width: 100vw;      /*  max-width: 100vw;  max-width: 100vw added to the body, I can alsways remove it!*/
  margin: 0;
  /*padding-left: 5px;*/
  /*padding-right: 5px;*/
  height: 100vh;
  font-family: Arial,sans-serif;
  font-size: 16px;
  color:#141414;    /*  #623332; #652A10; #652A10 color:rgb(15, 109, 35) and color rgba(120, 233, 241, 0.5) and color rgb(98, 53, 12)*/ 
  line-height: 1.5;
}

.mncon {       /*.mncon width is the margin of the main page. This is per instrcutons. I make it width: 80%;  NOTE: 10% per each side */ 
  width: 80%;                      
  margin: 0 auto;
  margin-bottom:50px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
}


/* Style the Footer */

footer{
  margin: 0;
  background-color: #61B8A5;                         /*rgba(4, 67, 15, 0.5);*/
  width: 50;
  padding:  0;
  color: #141414;
  clear:both;
}

/* Style the Footer Content */

.footer-content{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* Style the Footer Content for the h3*/

.footer-content h3{
  /*font-weight: bold;*/
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: capitalize;
  line-height: 3rem;
  color: #141414;
}

/* Style the Footer Content for the paragraph text*/

.footer-content p{
  font-family: Arial, sans-serif;
  max-width: 500px;
  margin: 10px auto;
  line-height: 28px;
  font-size: 14px;
  color:#141414;
}


/* Style the Outer Footer Content */

.outer-footer{
  font-family: Arial, sans-serif;
  padding: 10px;
  text-align: center;
  color: #141414;
  font-size: 14px;
  background-color:#C6F1D3;                                           /* rgba(224, 246, 227, 0.5); */
  opacity: 100%;
}


footer .email{       
color: #141414;
font-weight: bold;
}

/* Style the Social Media Icons*/

.socials{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 1rem 0;
  padding: 5px 5px 5px 5px;
}

/* Style the Socials List Faceboook and Twitter*/

.socials li{
  margin: 0 10px;          /*margin:0 10 px; it measn the distance between the Faceboook and Twitter*/
}

/* .social li a    QUESTION: How to make the Facebook the letter "F" center in the circle???  */

.socials li a{
  text-decoration: none;
  align-items: center;
  color:#141414;
  /*border: 1px solid aqua; */
  padding: 5px;
  border-radius: 50%;
  width: 25px;
}

.socials a i{
  font-size: 1.1rem;
  width: 20px;
  transition: color .4s ease;
}

.socials a:hover i{
  color: #C6F1D3;
}

/* Make the Footer Responsive*/

@media (max-width:500px) {
  .footer-menu ul{
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  }

  /* Styling the Home Page*/

  #homepage section h2{              /* Styling the Home Page h2 Title*/
    font-weight: 900;                 
    font-family:Arial,sans-serif;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    text-align: center;
    line-height: 1.5;              
  }
  
  #homepage main p{                    /* Styling the Home Page Page p text*/
      font-family: Arial,sans-serif;
      font-size: 16px;
      color: #141414;
      text-align: left;
      /* margin-left: 0; */           /* margin-right:20px it means that I added 20px on the left side of the paragraph text*/
      /* margin-right: 0;  */         /* margin-right:20px it means that I added 20px on the right side of the paragraph text*/
    margin-bottom: 20px;              /* margin-bottom:10px for adjusting the space between paragraphs*/
    }

    main p .cbuilds{                /* Styling Custom Build Page link and text to returntohome*/
      color: #141414;
      font-weight: bold;
      text-align: center;
      }
    









    /* Style the image  for the HOME PAGE---> NOTE: this has a value of pic2 */

img#pic2 {
  width: 20%;     /* BEFORE IT WAS width:30%; it means that how big is the image; NOTE:it allows to be resposnive when shrikned the webpage NOTE2: USE ONLY PERCENTAGES HERE %*/
  height: auto;                     /* height: auto it means that is allows to be resposnive when shrikned the webpage*/
  float: left;
  padding-right: 0px;
  padding-bottom: 0px;
  box-shadow: 5px 5px #888888;
  margin-right: 20px;
  margin-bottom: 20px;            /* margin-bottom: I  made it 10px, it looks better, before was 20px NOT LOOKING GOOD*/
  /*margin-left: 10px;   */       /* margin-left: I  made it 10px, JUST ADDEDD*/
  min-width: 400px;               /* min-width: 400px do not want to use FIXED PIXELS*/
 }

.responsive  img#pic2{              /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
}

  /* Styling the About Us Page*/

  #aboutus h2{              /* Styling the About Us Page h2 Title*/
  font-weight: 900;                 
  font-family:Arial,sans-serif;
  font-size: 24px;
  color: #141414;              
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px; 
  text-align: center;              
}

#aboutus main p{                    /* Styling the About Us Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: left;
    /* margin-left: 0; */           /* margin-right:20px it means that I added 20px on the left side of the paragraph text*/
    /* margin-right: 0;  */         /* margin-right:20px it means that I added 20px on the right side of the paragraph text*/
  margin-bottom: 20px;              /* margin-bottom:10px for adjusting the space between paragraphs*/
  }

  /* Style the image for About Us Page ---> NOTE: this has a value of pic3 */
  
    

content .responsive{       /* .responsive I added this now but it is not WORKING  */
      max-width: 100%;
      height: auto;
    }

.responsive  img#pic3{            /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
}

/* Styling Our Philosophy Page*/

#philosophy h2{                          /* Styling Philosophy Page h2 Title*/
    font-weight: 900;
    font-family:Arial,sans-serif;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    text-align: center; 
  }
  
#philosophy main p{                 /* Styling Our Philosophy Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: center;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
}
  
  /* Style the image for Philosophy Page ---> NOTE: this has a value of pic4 */
  
.container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
.responsive  img#pic4{                /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }
  
  /* Styling Meet Our Team Page*/

#team h2{                                   /* Styling Meet Our Team Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    text-align: center;
}

  #team main p{                     /* Styling Meet Our Team Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: left;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  /* Style the image Meet Our Team ---> NOTE: this has a value of pic5 */
  
  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic5{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }

  img#founder {
    width: 20%;       /* BEFORE IT WAS width:30%;  it means that how big is the image; NOTE:it allows to be resposnive when shrikned the webpage NOTE2: USE ONLY PERCENTAGES HERE %*/
    height: auto;                     /* height: auto it means that is allows to be resposnive when shrikned the webpage*/
    float: left;
    padding-right: 0px;
    padding-bottom: 0px;
    box-shadow: 5px 5px #888888;
    margin-right: 20px;
    margin-bottom: 20px;            /* margin-bottom: I  made it 10px, it looks better, before was 20px NOT LOOKING GOOD*/
    /*margin-left: 10px;   */       /* margin-left: I  made it 10px, JUST ADDEDD*/
    min-width: 40%;               /* min-width: 400px do not want to use FIXED PIXELS*/
   }

.responsive  img#founder{              /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
    width: 100%;
    height: auto;
  }

  /* Styling Shop Page*/

#shop h2{                                       /* Styling Shop Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    text-align: center;
}

  #shop main p{                     /* Styling Shop Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: center;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  main p .vcbikes {                /* Styling Shop Page link text for bikes*/
    color: #141414;
    font-weight: bold;
    text-align: center;
    }
    
    main p .vcaccessories {                /* Styling Shop Page link text for accessories*/
      color: #141414;
      font-weight: bold;
      text-align: center;
      }
  /* Style the image for Shop Page ---> NOTE: this has a value of pic6 */

  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic6{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }
  
  /* Styling Bikes Page*/

#bikes h2{                                /* Styling Bikes Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    text-align: center;
  }
  
  #bikes main p{                     /* Styling Bikes Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: center;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  /* Style the image for Bikes Page ---> NOTE: this has a value of pic7 */
  
  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic7{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }


  /* Styling Bike Page Images*/

  img#mnbike {
   /* width: 20%; */      /* BEFORE IT WAS width:30%;  it means that how big is the image; NOTE:it allows to be resposnive when shrikned the webpage NOTE2: USE ONLY PERCENTAGES HERE %*/
    height: auto;                     /* height: auto it means that is allows to be resposnive when shrikned the webpage*/
    /*float: left;*/
    padding-right: 0px;
    padding-bottom: 0px;
    box-shadow: 5px 5px #888888;
    margin-right: 20px;
    margin-bottom: 20px;            /* margin-bottom: I  made it 10px, it looks better, before was 20px NOT LOOKING GOOD*/
    /*margin-left: 10px;   */       /* margin-left: I  made it 10px, JUST ADDEDD*/
    min-width: 40%;               /* min-width: 400px do not want to use FIXED PIXELS NOTE: Put 40% INSTEAD, IT IS WORKING1*/
    margin-top: 2%;
  }

   img#cbike {
   /* width: 20%;  */     /* BEFORE IT WAS width:30%;  it means that how big is the image; NOTE:it allows to be resposnive when shrikned the webpage NOTE2: USE ONLY PERCENTAGES HERE %*/
    height: auto;                     /* height: auto it means that is allows to be resposnive when shrikned the webpage*/
    /*float: right;*/
    padding-right: 0px;
    padding-bottom: 0px;
    box-shadow: 5px 5px #888888;
    margin-right: 20px;
    margin-bottom: 20px;            /* margin-bottom: I  made it 10px, it looks better, before was 20px NOT LOOKING GOOD*/
    /*margin-left: 10px;   */       /* margin-left: I  made it 10px, JUST ADDEDD*/
     min-width: 40%;               /* min-width: 400px do not want to use FIXED PIXELS*/
     margin-top: 2%
    }

   img#tbike {
    /*width: 20%;    */   /* BEFORE IT WAS width:30%;  it means that how big is the image; NOTE:it allows to be resposnive when shrikned the webpage NOTE2: USE ONLY PERCENTAGES HERE %*/
    height: auto;                     /* height: auto it means that is allows to be resposnive when shrikned the webpage*/
    /*float: right;*/
    padding-right: 0px;
    padding-bottom: 0px;
    box-shadow: 5px 5px #888888;
    margin-right: 20px;
    margin-bottom: 20px;            /* margin-bottom: I  made it 10px, it looks better, before was 20px NOT LOOKING GOOD*/
    /*margin-left: 10px;   */       /* margin-left: I  made it 10px, JUST ADDEDD*/
    min-width: 40%;               /* min-width: 400px do not want to use FIXED PIXELS*/
    margin-top: 2%
  }

   img#ebike {
    /*width: 20%;*/       /* BEFORE IT WAS width:30%;  it means that how big is the image; NOTE:it allows to be resposnive when shrikned the webpage NOTE2: USE ONLY PERCENTAGES HERE %*/
    height: auto;                     /* height: auto it means that is allows to be resposnive when shrikned the webpage*/
    /*float: left; */
    padding-right: 0px;
    padding-bottom: 0px;
    box-shadow: 5px 5px #888888;
    margin-right: 20px;
    margin-bottom: 20px;            /* margin-bottom: I  made it 10px, it looks better, before was 20px NOT LOOKING GOOD*/
    /*margin-left: 10px;*/       /* margin-left: I  made it 10px, JUST ADDEDD*/
    min-width: 40%;                 /* min-width: 400px do not want to use FIXED PIXELS*/
    margin-top: 2%
  }

   .bikes-left {
    float: left;
    width: 35%;

   }

   .bikes-right {
   float: right;
   width: 35%;
   }

  /* Styling Accessories Page*/

#accessories h2{                            /* Styling Accessories Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    text-align: center;
}
  
  #accessories main p{                     /* Styling Accessories Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: center;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  /* Style the image for Accessories Page ---> NOTE: this has a value of pic8 */
  
  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic8{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }
  
  img#accessories{
    /*width: 20%;*/       /* BEFORE IT WAS width:30%;  it means that how big is the image; NOTE:it allows to be resposnive when shrikned the webpage NOTE2: USE ONLY PERCENTAGES HERE %*/
    height: auto;                     /* height: auto it means that is allows to be resposnive when shrikned the webpage*/
    /*float: left; */
    padding-right: 0px;
    padding-bottom: 0px;
    box-shadow: 5px 5px #888888;
    margin-right: 20px;
    margin-bottom: 20px;            /* margin-bottom: I  made it 10px, it looks better, before was 20px NOT LOOKING GOOD*/
    /*margin-left: 10px;*/       /* margin-left: I  made it 10px, JUST ADDEDD*/
    min-width: 40%;              /* min-width: 400px do not want to use FIXED PIXELS*/
    margin-top: 2%;
  }

   .accessories-left {
    float: left;
    width: 35%;
   }

   /* Styling Custom Builds Page*/

#custombuilds h2{                           /* Styling Custom Builds Page h2 Title*/
  font-family:Arial,sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: #141414;              
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px; 
  text-align: center;
  margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
}

#custombuilds main p{                     /* Styling Custom Builds Page p text*/
  font-family: Arial,sans-serif;
  font-size: 16px;
  color: #141414;
  text-align: center;
  margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
}

#custombuilds h3{                           /* Styling Custom Builds Page h2 Title*/
  font-family:Arial,sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #141414;              
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px; 
  text-align: center;
  margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
}


main p .returntohome{                /* Styling Custom Build Page link and text to returntohome*/
  color: #141414;
  font-weight: bold;
  text-align: center;
  }


/* Style the image for Custom Builds Page ---> NOTE: this has a value of pic9 */

.container main .responsive{                
max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
height: auto;
}

.responsive  img#pic9{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
width: 100%;
height: auto;
}

/* Styling Custom Build Form*/

/* Styling Text Color and Size*/

form {
width: 35%;
margin:0 auto;
background: var(--color-darkblue-alpha);   /*i JUST ADD THOSE!!!*/ 
padding: 2.5rem 0.625rem;                  /*i JUST ADD THOSE!!!*/ 
border-radius: 0.25rem;                    /*i JUST ADD THOSE!!!*/ 
}


textarea{                                   /*i JUST ADD THOSE!!!*/ 
vertical-align: middle;
}

/* Styling Text Inputs*/

input[type="text"], input[type="name"], input[type="email"], input[type="phone"], textarea {
  width:12em;
  padding:5px;
  margin: 10px 10px 10px 0;
  border-radius: 7px;
  background-color: #fdedec;                                                              /* #fdedec;*/
 }

button, input, select, textarea{
  font-family: inherit;
  font-size: 100%;
  color: rgb(170, 227, 12);
}

/* Styling Box-Sizing for Forms*/

input, textarea, select{
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   color: #61B8A5;
}

label{
  font-family: Arial,sans-serif;
  font-size: 16px;
  display: block;
  font-weight: bold;
  color: #141414;
}

input[type="checkbox"] +label{
  display:inline;
}

/* Styling Remove the Borders around the fieldsets*/

fieldset{
  font-family: Arial,sans-serif;
    font-size: 16px;
 border-width: 0;
  padding:0;
  color:  #141414;                /* color:red BEFORE */
}

input [type="text"], input[type="phone"], input [type="email"]{
  width: 90%;
  margin:  .2em auto .8em auto;
}
#phone {max-width: 10em;}

select, fieldset{
  margin:  .2em auto .8em auto
}

legend{
  margin-left:  50
  px;  /* Styling What is your favorite color NOTE:  border on the left is 20px*/
  font-weight: bold;
}

@media (min-width: 35em) {
  label {
    display: inline;
  }
  input [type="text"], input[type="phone"], input [type="email"]{
    width: 55%;

  }
  label{
    width: 10em;
    display: inline-block;
  }

}


  /* Styling Services Page*/

#services h2{                     /* Styling Services Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
   text-align: center; 
   margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  #services main p{                     /* Styling Services Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: center;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  #services main li{                       /* Styling Services Page  main li text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color:  #141414;
    text-align: left;
    margin-left: 50px;                      /* margin-right:20px it means that I added 20px on the left side of the paragraph text*/
    margin-right: 20px; 
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }


  
  /* Style the image for Services ---> NOTE: this has a value of pic10 */
  
  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic10{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }

  /* Styling Bike Service and Repair Page*/

#bikeservicerepair h2{                     /* Styling Bike Service and Repair Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
   text-align: left; 
   margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  #bikeservicerepair main p{                     /* Styling Bike Service and Repair Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: left;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  #bikeservicerepair main li{                       /* Styling Services Page  main li text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: left;
    margin-left: 50px;                      /* margin-right:20px it means that I added 20px on the left side of the paragraph text*/
    margin-right: 20px; 
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  /* Style the image for Services ---> NOTE: this has a value of pic10 */

  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic11{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }

  /* Styling Trade-In Page*/

#tradein h2{                               /* Styling Trade-In Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
   text-align: center; 
   margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  #tradein main h3{                 /* Styling Trade-In Page main h3 Title*/

    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    text-align: center; 
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  
  #tradein main p{                     /* Styling Trade-In Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: center;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }

 






  
  /* Style the image for  Trade-In ---> NOTE: this has a value of pic10 */
  
  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic12{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }
  
  /* Styling Contact Us Page*/

#contactus h2{                               /* Styling Trade-In Page h2 Title*/
    font-family:Arial,sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
   text-align: center; 
   margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  #contactus main h2{                 /* Styling Contact Us main h3 Title*/
    font-family:Arial,sans-serif;
    font-size: 24px;
    color: #141414;              
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
   text-align: center; 
   margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  #contactus main p{                     /* Styling Contact Us Page p text*/
    font-family: Arial,sans-serif;
    font-size: 16px;
    color: #141414;
    text-align: left;
    margin-bottom:20px;    /* margin-bottom:10px for adjusting the space between paragraphs*/
  }
  
  /* Style the image for Contact Us ---> NOTE: this has a value of pic10 */
  
  .container main .responsive{                
  max-width: 100%;    /*max-width:100%  It means how big is the logo image --->NOTE: To Be responsive, it shoud be in percentage % */
  height: auto;
  }
  
  .responsive  img#pic13{                               /*.responsive it USED TO BE  img#pic1 BUT THEN I CHANGE IT TO img#pic2*/ 
  width: 100%;
  height: auto;
  }
  
  
 main .email {                /* Styling Shop Page link text for bikes*/
  color: #141414;
  font-weight: bold;
  text-align: center;
  }


/*  Styling the Map */
  
  .address-map {
    height: 400px;
    width: 600px;
    margin-left: 470px;
    margin-bottom: 50px;
  }