/********  FOOTER ***********/
/********  newsletter ***********/

/*.container is a CSS class applied to a container element (like a <div>) that wraps the input and button.
It adds some padding around the container to create space between the content and the container's edges.*/
.container {
    padding: 20px;
  }
  
  /*.info[type=text] is a CSS class applied to text input elements with the type "text."
  It sets the width of the input to 50% of its parent container, adds padding inside the input, sets margins around it, displays it as an inline-block element, 
  adds a 1-pixel solid black border, and rounds the corners with a border-radius of 10 pixels.
  box-sizing: border-box; ensures that the padding and border are included in the input's width.*/
  .info[type=text] {
    width: 50%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 2px solid rgba(255, 40, 191, 0.438);
    border-radius: 10px;

    box-sizing: border-box;
  }
  
  .btn{
    background-color: #ffc3f3;
    color: black;
  }
  /********  FOOTER ADRESS PHONE NUMBER ***********/
  
  /*  background: linear-gradient(...) This property sets the background of elements with the class 
  "bgFooter" to a linear gradient.
  A linear gradient is a gradual color transition from one color to another.
  In this case, it starts from 0 degrees (horizontal) and goes from one color to another in the specified percentages.
  rgb(255, 112, 224, 0.3), rgb(255, 179, 228, 0.5), rgb(255, 255, 255, 0.5):
  These are RGB color values with an additional opacity (alpha) value specified using rgba.
  The first value is the red component, the second is green, the third is blue, and the fourth is opacity.
  These colors are used in the linear gradient to create a color transition.*/
  .bgFooter{
    background: linear-gradient(
    0deg,
    rgb(255, 112, 224,0.3) 20%,
    rgb(255, 179, 228,0.5) 70%,
    rgb(255, 255, 255,0.5) 100%
  )
  }
  /* .deco:
  
  This is another CSS class selector. It is used to style elements with the class "deco" in your HTML document.
  It's meant for text decoration styles.*/
  .deco{
    text-decoration: none;
  }
  
  
  /*#ico:
  
  This is a CSS ID selector.
  It is used to style an HTML element with the ID "ico" in your document.
  The styles defined here will apply to that specific element.
  Inside #ico, there are several CSS properties:
  padding, font-size, width, text-align, text-decoration, margin, 
  and border-radius are used to style the element with the ID "ico."
  These properties control things like padding (space around the content), 
  font size, width, text alignment, text decoration (like underlines), 
  margin (spacing around the element), and border radius (rounded corners).*/
  #ico{
    padding: 10px;
    font-size: 20px;
    width: 80px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 10px;
  }
  
  
  /*.ico:hover: This is a CSS class selector with a pseudo-class :hover.
  It is used to style elements with the class "ico" when the mouse cursor hovers over them.
  In this case, it reduces the opacity of the element to 0.7, creating a visual effect when hovered.*/
  .ico:hover {
      opacity: 0.7;
  }
  
  /*.fa-facebook, .fa-twitter, .fa-youtube, .fa-instagram: These are CSS class selectors.
  They are used to style elements with the respective classes "fa-facebook," "fa-twitter," "fa-youtube," 
  and "fa-instagram" in your HTML document.These classes are typically associated with icons from popular 
  social media platforms and are styled with background colors and text colors.*/
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }
  
  .fa-youtube {
    background: #bb0000;
    color: white;
  }
  
  .fa-instagram {
    background: #125688;
    color: white;
  }