@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Limelight&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap");

:root {
    /* --gold: rgb(243, 207, 0); */
    --gold: #d79a2c;
    --silver: #555454;
    --platinum: #c4c2c2ce;
    --slate: #2f303a;
  }

  * {
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 0;
  }

  body {
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  /* HEADER SECTION */

  .header-container {
      color: white;
      background-color: var(--slate);
      display: flex;
      align-items: center;
      justify-content:space-between;
      height: 20%;
      padding: 1rem;
      border-bottom: solid .25rem var(--gold);
  }

  .logo {
      display: flex;
  }

  .logo-img {
    margin-left: 10px;
    display: flex;
    align-items: center;
    height: 25%;
    width: 25%;
  }

  .logo-title {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-left: -30px;
    font-size: 1.5rem;
    font-family: "Limelight", sans-serif;
  }

  .logo-sub-title {
    display: flex;
    align-items: center;
    margin-top:80px;
    margin-left: -188px;
    font-size: 1.2rem;
    font-family: "Ms Madi", cursive;
  }

  /* TOP NAV */

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

  .nav-links {
    display: flex;
    gap: 2rem;
  }

  .nav-links .current {
    color: var(--gold); 
  }

  .nav-links ul {
    margin: 0;
    padding: 0;
    display: flex;
  }

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

  .nav-links li a {
    text-decoration: none;
    padding: .75rem;
    display: block;
    color: white;
  }

  .nav-links a:active {
    color: var(--platinum); 
    font-style: italic;
  }

  .nav-links a:hover {
    color: var(--gold); 
    text-decoration: underline;
  }

    .toggle-nav-btn {
    position: absolute;
    top: .75rem;
    right: 2rem;
    font-size: 2rem;
    flex-direction: column;
    justify-content: space-between;
    width: 1.8rem;
    height: 1.3rem;
    display: none;
  }

  .fas {
    color: var(--gold);
  }

  .fas:hover {
    color: var(--platinum); 
    text-decoration: none;
  }
  .fas:active {
    color: #c4c2c2f5; 
  }


  /* CONTENT SECTION */

  .services-container {
    background-color: white;
    height: 70%;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 3rem;
  }

  /* ? Content Images */

  .website-design-img {
    display: flex;
  }

  .website-hosting-img {
    display: flex;
  }

  .domain-registration-img {
    display: flex;
  }

  .email-marketing-img {
    display: flex;
  }

  .web-dev-img {
    padding-top: 1rem;
    padding-right: 1rem;
    width:200px;
    height:200px;

  }

  .web-host-img {
    padding-right: 1rem;
    width:200px;
    height:200px;
  }

  .dom-name-img {
    padding-right: 1rem;
    width:200px;
    height:200px;
  }

  .email-promoting-img{
    padding-right: 1rem;
    width:200px;
    height:200px;
  }

  /* ? CONTENT FLEXBOXES */

  .website-design-flexbox {
    display: flex;
    padding: 1rem 0 5rem 0;
    align-items: center;
  }

  .website-hosting-flexbox {
    display: flex;
    padding: 1rem 0 5rem 0;
    align-items: center;
  }

  .domain-registration-flexbox {
    display: flex;
    padding: 1rem 0 5rem 0;
    align-items: center;
  }

  .email-marketing-flexbox {
    display: flex;
    align-items: center;
  }

  /* ? CONTENT SECTIONS */

  .web-dev-section {
    background-color: #2f303a0a;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
  }

  .web-host-section {
    background-color: #2f303a0a;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
  }

  .domain-names-section {
    background-color: #2f303a0a;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
  }

  .email-marketing-section {
    background-color: #2f303a0a;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
  }

    /* ? Content Text */


    .web-dev-header span {
      font-family: Limelight, 'sans-serif';
      color: var(--gold);
    }

    .web-host-header span {
      font-family: Limelight, 'sans-serif';
      color: var(--gold);
    }

    .domain-names-header span {
      font-family: Limelight, 'sans-serif';
      color: var(--gold);
    }

    .email-market-header span {
      font-family: Limelight, 'sans-serif';
      color: var(--gold);
    }

  .web-dev-header {
    font-family: Montserrat, 'sans-serif';
    padding: 1rem;
    background-color: var(--slate);
    color: whitesmoke;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
  }

  .web-dev-text {
    padding: 1rem;
    font-size: 1rem;
  }

  .web-host-header {
    font-family: Montserrat, 'sans-serif';
    padding: 1rem;
    background-color: var(--slate);
    color: whitesmoke;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
  }

  .web-host-text {
    padding-top: 1rem;
    font-size: 1rem;
    padding: 1rem; 
  }

  .domain-names-header {
    font-family: Montserrat, 'sans-serif';
    padding: 1rem;
    background-color: var(--slate);
    color: whitesmoke;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
  }

  .domain-names-text {
    padding-top: 1rem;
    font-size: 1rem;
    padding: 1rem; 
  }

  .email-market-header {
    font-family: Montserrat, 'sans-serif';
    padding: 1rem;
    background-color: var(--slate);
    color: whitesmoke;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
  }

  .email-market-text {
    padding-bottom: 1rem;
    font-size: 1rem;
    padding: 1rem; 
  }

  /* ? BULLET POINTS as STARS */

  ul {
    list-style-type: none;
    padding-bottom: 1rem;
  }  

  .star li {
    align-items: flex-end;
    font-family: 'Montserrat', 'sans-serif';
  }

  .star li:before { 
    content: '⭐'; margin-left: 1.5rem; margin-right: 1rem; 
  } 
  
  
  /* BUTTON */

    /* button */

    button{
      cursor: pointer;
      background-color: var(--slate);
      color: var(--gold);
      font-size: 1.2rem;
      padding: .5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      transition: 0.5s;
    }   

    button:hover{
      color: var(--slate);
      background-color: var(--gold);
    }
 
  /* FOOTER SECTION */

  footer {
    margin-top: auto;
  }

  .footer-container {
    color: white;
    background-color: var(--slate);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: solid .15rem var(--gold);
    padding: 1rem;
  }

  /* FOOTER NAV */

  .footer-nav {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 2rem;
  }

  .fa-brands{
    cursor: pointer;
    color: white; 
    text-decoration: none;
    font-size: 1.5rem;
    margin-right: 1rem;
  }

  .fa-brands a  {
    text-decoration: none;
  }

  .fa-brands:visited  {
    color: white; 
    text-decoration: none;
  }

  .fa-brands:hover {
    color: var(--gold); 
    text-decoration: none;
}
  .fa-brands:active {
    color: var(--platinum); 
    border-bottom: solid .1rem var(--gold);
}

/* MEDIA QUERIES */


  /* ? 731-1090 SCREEN SIZE */

  @media screen and (max-width: 1090px) and (min-width: 731px) {

    .what-we-do-left-section {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }

/* ? 840 SCREEN SIZE */

@media screen and (max-width: 840px) {
  .logo-title {
    display:flex;
    top: 1rem;
    margin-left: -.5%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .logo-sub-title {
    display: flex;
  }
}

/* ? 730 SCREEN SIZE */

@media screen and (max-width: 730px) {
  .services-container{
    flex-direction: column;
    padding: 1rem;
  }

  /* 730 HEADER */

.header-container {
  display: inline;
  justify-content: center;
}

  .logo-img {
    display: flex

  }

  .logo-title {
    display:flex;
    top: 1rem;
    margin-left: -12.5%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .logo-sub-title {
    display: flex;
  }

    /* 730 NAV */ 

  .top-nav{
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    display: none;
    width: 100%;
  }

  .nav-links ul {
    flex-direction: column;
    width: 100%;
  }

  .nav-links li {
    text-align: center;
  }

   .nav-links.active {
    display: flex;
  }

  .nav-links a:hover{
    color: var(--gold);

    background-color: #555;
  }

  .toggle-nav-btn {
      display: flex;
  }

  /* BODY CONTENT ?? */

     /* ? CONTENT FLEXBOXES */

     .website-design-flexbox {
      display: inline;
      align-items: center;
    }
  
    .website-hosting-flexbox {
      display: inline;
      align-items: center;
      
    }
  
    .domain-registration-flexbox {
      display: inline;
      align-items: center;
    }
  
    .email-marketing-flexbox {
      display: inline;
      align-items: center;
    }

      /* ? CONTENT IMAGES */

  .web-dev-img {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;

  }

  .web-host-img {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;

  }

  .dom-name-img {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;

  }

  .email-promoting-img {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;

  }

   /* ? CONTENT SECTIONS */

   .web-dev-section {
    margin-top: 2rem;
    margin-bottom: 4rem;
  }

  .web-host-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .domain-names-section {
    margin-top: 2rem;
  }

  .email-marketing-section {
  }

  .star {
    font-size: .95rem;
  }

  .star li:before { 
    content: '⭐'; margin-left: .5rem; margin-right: 1rem; 
  } 

  /* Footer */

    .copyright {
      display: flex;
      margin-right: auto;
    }
  }

  /* ? 415-640 SCREEN SIZE */

  @media screen and (max-width: 640px) and (min-width: 415px) {
    .logo-title {
      display:flex;
      top: 1rem;
      margin-left: -5%;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  
    .logo-sub-title {
      display: flex;
    }
  }

  /* ? 414px SCREEN SIZE*/

@media screen and (max-width: 414px) {
  .services-container{
    flex-direction: column;
    padding: 1rem;
  }

  /* 414 HEADER */

.header-container {
  display: inline;
  justify-content: center;
}

  .logo-img {
    display: none;

  }

  .logo-title {
    display:flex;
    top: 1rem;
    margin-left: 25%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .logo-sub-title {
    display: flex;
  }

    /* 414 NAV */ 

  .top-nav{
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    display: none;
    width: 100%;
  }

  .nav-links ul {
    flex-direction: column;
    width: 100%;
  }

  .nav-links li {
    text-align: center;
  }

   .nav-links.active {
    display: flex;
  }

  .nav-links a:hover{
    color: var(--gold);

    background-color: #555;
  }

  .toggle-nav-btn {
      display: flex;
  }

  /* 414 Body content */

  /* Footer */

    .copyright {
      display: none;
    }
    .footer-container {
      justify-content: center
    }   
  }

  /* ? 360px */

@media screen and (max-width: 360px) {

  .services-container{
    flex-direction: column;
    padding: .5rem;
  }

  .header-container {
    padding: 0;
    margin: 0;
  }

  .logo {
    justify-content: flex-start;
  }

  .logo-img {
   display: none;
  }

  .logo-title {
    display:flex;
    top: 1rem;
    margin-left: 15%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .logo-sub-title {
    display: flex;
  }

  .nav-links {
    display: none;
  }

  .nav-links a:hover{
    color: var(--gold);
    background-color: #555;
  }

  .toggle-nav-btn {
      display: flex;
  }

  /*  Body content */

  /* Footer */

    .copyright {
      display: none;
    }
    .footer-container {
      justify-content: center
    }

}