html – Simple website made for learning purposes


Hello I’ve just finished coding one of my first websites.
And I would love some feedback. I know that I really need to improve my design and improve my code and for that I need some tips from you guys

website : https://fluffes.github.io/Minihouse/

repo on github : https://github.com/fluffes/Minihouse

HTML :

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="sass/main.css">
        <title>Minihouse</title>
        <link rel="icon" type="img/png" sizes="16x16" href="img/favicon-16x16.png">
    </head>
    <body>

    <header class='header'>
        <div class="container">
            <div class="header__logo">
                <img src="https://codereview.stackexchange.com/img/logo.svg" alt="logo">
                <a class="header__logo-link" href="#header">Mini<span>house</span></a>
            </div>
            <nav>
                <ul class="header__menu">
                    <li><a href="#about" class="header__link">about</a></li>
                    <li><a href="#benefits" class="header__link">benefits</a></li>
                    <li><a href="#ideas" class="header__link">ideas</a></li>
                </ul>
            </nav>
            <div class="header__socials">
                <a href="https://www.instagram.com/" target="_blank" class="header__insta">
                    <img src="img/ig-header.png" alt="insta" >
                </a>
                <div class="hamburger">
                    <input type="checkbox" id="navi-toggle" class='hamburger__checkbox'>
                    <label class='hamburger__wrapper' for='navi-toggle'>
                        <span class='hamburger__bar'></span>
                    </label>  
                    <div class="hamburger__nav" id="hamburger__nav">
                        <ul class="hamburger__menu">
                            <li><a href="#about" class="hamburger__link">about</a></li>
                            <li><a href="#benefits" class="hamburger__link">benefits</a></li>
                            <li><a href="#ideas" class="hamburger__link">ideas</a></li>
                            <li><a href="#contact" class="hamburger__link">contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="landing-page">
        <div class="container">
            <div class="info">
                <h2 class="info__header">The beauty of <span>mini</span>malism</h2>
                <hr class="info__hr">
                <p class="info__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <a href="#about" class="info__button">Learn more</a>
            </div>
            <div class="plant">
                <img src="img/plant.png" alt="plant" class='plant__thin'>
                <img src="img/tree.png" alt="tree" class='plant__tree'>
            </div>
        </div>
    </div>   

    <section class="about" id='about'>
        <div class="container">
            <h2 class="section-header">About.</h2>
            <div class="about__wrapper">
                <div class="about__text">
                    <p class="about__desc about__desc--bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <p class="about__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat nesciunt eaque ab aliquid optio? Deserunt, cum reiciendis quasi, laborum blanditiis debitis inventore, maiores repudiandae saepe eveniet non nemo voluptate tempore?</p>
                    <p class="about__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat nesciunt eaque ab aliquid optio? Deserunt, cum reiciendis quasi, laborum blanditiis debitis inventore, maiores repudiandae saepe eveniet non nemo voluptate tempore?</p>
                    <hr class="about__hr">
                </div>
                <div class="about__img">
                    <img src="img/about-img.png" alt="clean room">
                    <img src="img/about-img-2.png" alt="alternative image of minimalism">
                </div>
            </div>
        </div>
    </section>

    <section class="benefits" id="benefits">
        <div class="container">
            <h2 class="section-header">Benefits.</h2>
            <div class="benefits-wrapper">
                <div class="benefits-boxes">
                    <div class="benefits-boxes__box benefits-boxes__box--black">
                        <img src="img/earth-outline.svg" alt="earth">
                        <p class="benefits-boxes__title">Good for the Environment</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                    <div class="benefits-boxes__box ">
                        <img src="img/brush-outline.svg" alt="clean">
                        <p class="benefits-boxes__title">Easier to Clean</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                    <div class="benefits-boxes__box benefits-boxes__box--black benefits-boxes__box--switch-2"> 
                        <img src="img/heart-outline.svg" alt="heart" class="img-switch">
                        <img src="img/heart-outline-black.svg" alt="heart" class="img-switch-2">
                        <p class="benefits-boxes__title">Less Stress</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                    <div class="benefits-boxes__box benefits-boxes__box--switch-1">
                        <img src="img/cash-outline.svg" alt="cash" class="img-switch">
                        <img src="img/cash-outline-white.svg" alt="cash" class="img-switch-2">
                        <p class="benefits-boxes__title">Spend Less</p>
                        <p class="benefits-boxes__desc">Lorem Ipsum is simply dummy.</p>
                    </div>
                </div>
                <div class="benefits-img">
                    <img src="img/benefits.png" alt="wardrobe">
                </div>
            </div>
        </div>
    </section>
     
    <section class="ideas" id='ideas'>
        <div class="container">
            <h2 class="section-header">Ideas.</h2>
            <div class="ideas-box">
                <div class="ideas-box__column ideas-box__column--1">
                    <div class="ideas-box__left">
                        <h2 class="ideas-box__header">Inspire your self with those few ideas</h2>
                        <p class="ideas-box__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    </div>
                    <div class="ideas-box__right">
                        <div class="ideas-box__wrapper">
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Start with throwing out stuff you don’t need</h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Save money by buying less  </h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Sell clothes you don’t wear</h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Clean your house</h3>
                            </div>
                            <div class="ideas-box__content">
                                <div class="ideas-box__circle"><img src="img/bulb.svg" alt="bulb"></div>
                                <h3 class="ideas-box__title">Take a look at your PC and phone</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ideas-box__column ideas-box__column--2">
                    <img src="img/idea.png" alt="bulb">
                </div>
            </div>
        </div>
    </section>
            
        

        
        <footer class="footer" id='contact'>
            <div class="container">
                <div class="footer__column footer__column--first">
                    <div class="footer__header footer__header--center">
                        <img src="https://codereview.stackexchange.com/img/logo.svg" alt="logo">
                        <a class="footer__link" href="#header">Mini<span>house</span></a>
                    </div>
                    <p class="footer__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <p class="footer__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                <div class="footer__column footer__column--second">
                    <h2 class="footer__header">Follow us on social media</h2>
                    <a href="https://www.instagram.com/" target="_blank" class="footer__link">
                        <img src="img/ig-footer.png" alt="ig logo">
                    </a>
                    <a href="" target="_blank" class="footer__link">
                        <img src="img/fb-footer.png" alt="fb logo">
                    </a>
                    <a href="" target="_blank" class="footer__link">
                        <img src="img/tw-footer.png" alt="tw logo">
                    </a>
                </div>
                <div class="footer__column footer__column--third">
                    <h2 class="footer__header">Contact us</h2>
                    <p class="footer__desc--bold">E-mail</p>
                    <input type="text" class="footer__input">
                    <p class="footer__desc--bold">Message</p>
                    <textarea cols="30" rows="10" class="footer__input"></textarea>
                    <button class="footer__btn">Send</button>
                </div>
            </div>
        </footer>
        
        <div class="footer__rights">&copy; 2020 All Rights reserved.</div>

        <script src='script.js'></script>
    </body>
</html>

CSS :

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  background-color: #EBEBEB;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 576px) {
  .container {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 540px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
    padding: 30px 20px;
  }
}

@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 112.5em) {
  .container {
    max-width: 1440px;
  }
}

section {
  padding: 80px 0;
}

@media (max-width: 1200px) {
  section {
    padding: 50px 0;
  }
}

.section-header {
  font-size: 48px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.2);
  scroll-margin-top: 1rem;
}

@media (max-width: 1200px) {
  .section-header {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .section-header {
    font-size: 26px;
    text-align: center;
  }
}

@media (max-width: 992px) {
  .section-header {
    text-align: center;
  }
}

.header__logo {
  font-size: 20px;
  font-weight: bold;
}

.header__logo span {
  color: black;
  font-family: 'Righteous', cursive;
}

.header__logo-link {
  color: #810a51;
}

.header__link {
  font-size: 17px;
  font-weight: 500;
  color: #000000;
}

.hamburger {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: inline-block;
  }
}

.hamburger__wrapper {
  width: 30px;
  height: 100%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 200;
}

.hamburger__bar {
  width: 100%;
  height: 4px;
  background-color: black;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.hamburger__bar::before {
  top: -8px;
}

.hamburger__bar::after {
  top: 8px;
}

.hamburger__bar::before, .hamburger__bar::after {
  content: '';
  width: 100%;
  height: 4px;
  background-color: black;
  position: absolute;
  left: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.hamburger__nav {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  right: 0;
  top: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all .4s;
  transition: all .4s;
}

@media (max-width: 576px) {
  .hamburger__nav {
    width: 100%;
  }
}

.hamburger__menu {
  list-style: none;
  margin-top: 150px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.hamburger__link {
  font-size: 25px;
  font-weight: 500;
  color: #000000;
  margin-top: 30px;
  border-bottom: 1px solid black;
  width: 100%;
  display: inline-block;
}

.hamburger__link:active .hamburger__nav {
  display: none;
}

.hamburger__checkbox {
  display: none;
}

.hamburger__checkbox:checked ~ .hamburger__nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.hamburger__checkbox:checked + .hamburger__wrapper .hamburger__bar::before {
  -webkit-transform: translatey(8px) rotate(45deg);
          transform: translatey(8px) rotate(45deg);
}

.hamburger__checkbox:checked + .hamburger__wrapper .hamburger__bar::after {
  -webkit-transform: translatey(-8px) rotate(-45deg);
          transform: translatey(-8px) rotate(-45deg);
}

.hamburger__checkbox:checked + .hamburger__wrapper .hamburger__bar {
  background: transparent;
}

.header .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 10vh;
}

@media (max-width: 768px) {
  .header .container {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #EBEBEB;
    z-index: 100;
    height: 5vh;
  }
}

.header__logo {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.header__logo-link {
  margin-left: 10px;
  display: inline-block;
}

.header__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
}

@media (max-width: 768px) {
  .header__menu {
    display: none;
  }
}

.header__link {
  position: relative;
}

.header__link::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #810a51;
  left: 0;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.header__link:hover::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.header__socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 992px) {
  .header__socials {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media (max-width: 768px) {
  .header__insta {
    display: none;
  }
}

nav, .header__socials {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media (max-width: 1200px) {
  nav, .header__socials {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
  }
}

.landing-page .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 90vh;
}

@media (max-width: 768px) {
  .landing-page .container {
    margin-top: 10vh;
  }
}

@media (max-width: 992px) {
  .landing-page .container {
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 576px) {
  .landing-page .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    height: 90vh;
  }
}

.plant {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
}

.plant__tree {
  display: none;
}

.plant__thin {
  width: 80%;
}

@media (max-width: 1200px) {
  .plant__thin {
    display: none;
  }
}

@media (min-width: 112.5em) {
  .plant__thin {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .plant {
    height: auto;
  }
  .plant__tree {
    display: block;
  }
}

@media (max-width: 576px) {
  .info {
    text-align: center;
    margin-bottom: 40px;
  }
}

.info__header {
  font-size: 32px;
  font-weight: 500;
}

@media (max-width: 576px) {
  .info__header {
    font-size: 26px;
  }
}

.info__header span {
  color: #810a51;
}

.info__hr {
  border: 2px solid black;
  width: 225px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .info__hr {
    margin: 20px auto 0;
    border-width: 1px;
  }
}

.info__desc {
  font-size: 16px;
  margin-top: 20px;
}

.info__button {
  display: inline-block;
  border: solid 2px #810a51;
  padding: 18px 52px;
  background-color: #810a51;
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-top: 38px;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-radius: 5px;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 992px) {
  .info__button {
    padding: 9px 26px;
  }
}

.info__button:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.info__button:active {
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

.about {
  background-color: white;
}

.about__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .about__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.about__desc {
  font-size: 16px;
}

@media (max-width: 992px) {
  .about__desc {
    text-align: center;
  }
}

.about__desc:not(:first-child) {
  font-size: 16px;
  margin-top: 25px;
}

@media (max-width: 576px) {
  .about__desc {
    width: 100%;
  }
}

.about__desc--bold {
  font-weight: 500;
}

.about__hr {
  height: 3px;
  background-color: black;
  border: none;
  margin-top: 20px;
}

@media (max-width: 992px) {
  .about__hr {
    display: none;
  }
}

.about__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.about__img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 992px) {
  .about__img {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.about__img img:last-child {
  display: none;
}

@media (max-width: 1200px) {
  .about__img img:last-child {
    display: block;
  }
}

@media (max-width: 576px) {
  .about__img img:last-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .about__img img:last-child {
    display: none;
  }
}

.about__img img:first-child {
  width: 75%;
}

@media (max-width: 1200px) {
  .about__img img:first-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .about__img img:first-child {
    display: inline-block;
    margin-top: 50px;
    width: 65%;
  }
}

@media (max-width: 576px) {
  .about__img img:first-child {
    display: none;
  }
}

.benefits-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.benefits-boxes {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

@media (min-width: 112.5em) {
  .benefits-boxes {
    width: 620px;
    height: 620px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 300px 300px;
        grid-template-columns: 300px 300px;
    grid-row: auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media (max-width: 1200px) {
  .benefits-boxes {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(250px, 1fr))(auto-fill);
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media (max-width: 992px) {
  .benefits-boxes {
    margin: 0 auto;
    width: 530px;
    height: 530px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 250px 250px;
        grid-template-columns: 250px 250px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media (max-width: 576px) {
  .benefits-boxes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    width: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.benefits-boxes__box {
  width: 250px;
  height: 250px;
  border-radius: 10px;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.benefits-boxes__box img {
  margin-bottom: 15px;
  width: 60px;
  height: 70px;
}

.benefits-boxes__box .img-switch-2 {
  display: none;
}

.benefits-boxes__box--black {
  background-color: #413D3D;
  color: #FFFFFF;
}

@media (min-width: 112.5em) {
  .benefits-boxes__box--switch-1 {
    background-color: #413D3D;
    color: #FFFFFF;
  }
  .benefits-boxes__box--switch-1 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-1 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 992px) {
  .benefits-boxes__box--switch-1 {
    background-color: #413D3D;
    color: #FFFFFF;
  }
  .benefits-boxes__box--switch-1 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-1 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 576px) {
  .benefits-boxes__box--switch-1 {
    background-color: white;
    color: black;
  }
  .benefits-boxes__box--switch-1 .img-switch {
    display: block;
  }
  .benefits-boxes__box--switch-1 .img-switch-2 {
    display: none;
  }
}

@media (min-width: 112.5em) {
  .benefits-boxes__box--switch-2 {
    background-color: white;
    color: black;
  }
  .benefits-boxes__box--switch-2 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-2 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 992px) {
  .benefits-boxes__box--switch-2 {
    background-color: white;
    color: black;
  }
  .benefits-boxes__box--switch-2 .img-switch {
    display: none;
  }
  .benefits-boxes__box--switch-2 .img-switch-2 {
    display: block;
  }
}

@media (max-width: 576px) {
  .benefits-boxes__box--switch-2 {
    background-color: #413D3D;
    color: #FFFFFF;
  }
  .benefits-boxes__box--switch-2 .img-switch {
    display: block;
  }
  .benefits-boxes__box--switch-2 .img-switch-2 {
    display: none;
  }
}

@media (min-width: 112.5em) {
  .benefits-boxes__box {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 1200px) {
  .benefits-boxes__box:last-child {
    margin-top: 25px;
  }
}

@media (max-width: 992px) {
  .benefits-boxes__box:last-child {
    margin-top: 0px;
  }
}

@media (max-width: 576px) {
  .benefits-boxes__box:not(:first-child) {
    margin-top: 20px;
  }
}

.benefits-boxes__title {
  font-size: 20px;
  font-weight: bold;
  position: relative;
}

.benefits-boxes__desc {
  font-size: 13px;
  font-weight: 300;
  margin-top: 10px;
}

.benefits-img {
  display: none;
}

@media (min-width: 112.5em) {
  .benefits-img {
    display: block;
  }
}

.ideas {
  background-color: white;
}

.ideas-box {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ideas-box__column {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ideas-box__column--1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 576px) {
  .ideas-box__column--1 {
    display: block;
  }
}

.ideas-box__column--2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 1200px) {
  .ideas-box__column--2 {
    display: none;
  }
}

.ideas-box__column--2 img {
  height: 80%;
}

.ideas-box__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-right: 25px;
}

@media (max-width: 576px) {
  .ideas-box__left {
    margin-bottom: 35px;
    text-align: center;
  }
}

.ideas-box__right {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  padding-bottom: 25px;
}

.ideas-box__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.ideas-box__content:not(:first-child) {
  margin-top: 50px;
}

.ideas-box__circle {
  background-color: #810a51;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ideas-box__header {
  font-size: 25px;
  font-weight: 500;
}

@media (max-width: 576px) {
  .ideas-box__header {
    font-size: 21px;
  }
}

.ideas-box__title {
  width: 80%;
  font-size: 20px;
  font-weight: normal;
  margin-left: 10px;
  position: relative;
}

@media (max-width: 576px) {
  .ideas-box__title {
    font-size: 18px;
  }
}

.ideas-box__title::after {
  content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry';
  position: absolute;
  width: 100%;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 300;
  top: 100%;
  left: 0;
}

.ideas-box__desc {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
}

.ideas-box__wrapper {
  border-left: 1px solid black;
  padding-left: 25px;
}

@media (max-width: 576px) {
  .ideas-box__wrapper {
    border-left: none;
    padding-left: 0;
  }
}

.footer .container {
  padding-top: 80px;
  padding-bottom: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

@media (max-width: 1200px) {
  .footer .container {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 1200px) {
  .footer .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)(2);
        grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: (1fr)(2);
        grid-template-rows: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .footer .container {
    display: block;
  }
}

.footer__column {
  height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media (max-width: 576px) {
  .footer__column:not(:first-child) {
    margin-top: 50px;
  }
}

.footer__column--first {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 2 / 2;
}

.footer__column--second {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 2 / 1 / 3 / 2;
}

.footer__column--third {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 3 / 3;
}

.footer__header {
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-bottom: 35px;
}

.footer__header--center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.footer__link {
  margin-left: 10px;
  display: inline-block;
  color: #810a51;
  font-weight: bold;
}

.footer__link span {
  color: black;
  font-family: 'Righteous', cursive;
}

.footer__desc {
  margin-bottom: 15px;
  font-size: 16px;
  color: #282828;
  width: 80%;
}

.footer__desc--bold {
  font-weight: 500;
}

.footer__link {
  margin-right: 30px;
}

.footer__input {
  margin-bottom: 25px;
  border: 1px solid #282828;
  background-color: transparent;
  width: 100%;
  padding: 5px;
  resize: none;
}

.footer__btn {
  font-weight: 500;
  font-size: 16px;
  background-color: #810a51;
  color: white;
  border: none;
  width: 100%;
  padding: 12px;
  border-radius: 15px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  cursor: pointer;
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
}

.footer__btn:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.footer__btn:active {
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

.footer__rights {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  font-weight: 500;
  font-size: 16px;
  color: #DADADA;
  background-color: #323131;
  top: 100%;
  left: 0;
}
/*# sourceMappingURL=main.css.map */