@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap');

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

img {
   display: block;
}

body {
   font-family: 'Bai Jamjuree', sans-serif;
   background-image: url(images/bg-header-desktop.png);
   background-repeat: no-repeat;
   color: var(--FONT-COL-P);
   font-size: 18px;
   min-width: 375px;
   max-width: 1440px;
   height: 100%;
}

/* || FONTS */

h1 {
   font-size: 2.85rem;
   color: var(--FONT-COL-h);
   text-align: center;
}

h2 {
   font-size: 2.2rem;
   color: var(--FONT-COL-h);
   text-align: center;
}

h3 {
   font-size: 1.55rem;
   color: var(--FONT-COL-h);
}
main p {
   line-height: 1.7;
}

/* || VARIABLES */

:root {
   /* COLORS */
   --BTN-BG-IOS: hsl(171, 66%, 44%);
   --BTN-BG-MAC: hsl(233, 100%, 69%);

   --BTN-BG-IOS-HOVER: hsl(171, 81%, 49%);
   --BTN-BG-MAC-HOVER: hsl(233, 100%, 80%);

   --FONT-COL-h: hsl(210, 10%, 33%);
   --FONT-COL-P: hsl(201, 11%, 66%);
}

/* || BUTTON */
button {
   width: 228px;
   height: 56px;
   border-radius: 50px;
   color: white;
   border: none;
   cursor: pointer;
   position: relative;
}
.btn-container button:first-child {
   margin-right: 20px;
}

.button-ios:hover {
   background-color: var(--BTN-BG-IOS-HOVER);
}

.button__line-ios {
   position: absolute;
   top: 2.5px;
   width: 228px;
   height: 56px;
   border-radius: 50px;
   background-color: hsl(172, 100%, 12%);
   z-index: -1;
}
.button__line-mac {
   position: absolute;
   top: 2.5px;
   width: 228px;
   height: 56px;
   border-radius: 50px;
   background-color: hsl(233, 100%, 60%);
   z-index: -1;
}

.button-ios {
   background-color: var(--BTN-BG-IOS);
   font-size: 1rem;
   font-weight: 600;
   box-shadow: 5px 10px 15px hsla(171, 100%, 72%, 0.541);
   
}

.button-mac {
   background-color: var(--BTN-BG-MAC);
   font-size: 1rem;
   font-weight: 600;
   box-shadow: 5px 10px 15px hsla(233, 100%, 69%, 0.336);
}

.button-mac:hover {
   background-color: var(--BTN-BG-MAC-HOVER);
}

/* || HEADER */

header {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 160px;
}

.header__logo {
   width: 128px;
   height: 128px;
   margin: 130px 0 70px 0;
}

.header__p {
   max-width: 750px;
   text-align: center;
   margin: 20px 0 55px 0;
   font-size: 1.3rem;
}

/* || MAIN */

.main__top {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 80px;
}

.main__top-p {
   max-width: 700px;
   margin-top: 20px;
   line-height: 1.7;
}

/* || table__top */
.table__top {
   display: flex;
   justify-content: space-between;
}

.table-mac {
   position: relative;
   left: -32px;
}

.table__top-side {
   max-width: 395px;
   margin-right: 50px;
}

.table__top-side h3:first-child {
   margin-top: 60px;
   margin-bottom: 10px;
}
.table__top-side h3:nth-of-type(2) {
   margin-top: 60px;
   margin-bottom: 10px;
}
.table__top-side h3:nth-of-type(3) {
   margin-top: 60px;
   margin-bottom: 10px;
}

/* || main__mobile */

.main__mobile {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 150px 0 75px 0;
}

.main__mobile-p {
   max-width: 700px;
   margin-top: 20px;
   margin-bottom: 100px;
   line-height: 1.7;
   text-align: center;
}


/* || partners */

.partners__top {
   text-align: center;
}

.partners-p {
   margin-top: 20px;
}

.partners-h3 {
   margin-top: 45px;
}

.blacklists-h3 {
   margin-top: 37px;
}

.partners__tech {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   text-align: center;
   margin-top: 70px;
}

.flex-column {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   max-width: 380px;
}

.partners__carousel {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 160px;
}

/* || main__bottom */

.main__bottom {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin-bottom: 150px;
}

.main__bottom-p {
   max-width: 685px;
   margin: 30px 0 45px 0;
}

/* || FOOTER */

footer {
   background-color: whitesmoke;
   display: flex;
   align-items: center;
   min-height: 160px;
}

footer a {
   color: var(--FONT-COL-h);
   text-decoration: none;
}

footer a:hover {
   color: var(--BTN-BG-IOS);
}

.footer__logo {
   margin: 0 140px 0 160px;
}

.footer__social {
   margin-right: 70px;
}

i {
   font-size: 1.7rem;
   margin-inline: 10px;
}

nav {
   display: flex;
   flex: 1 1 auto;
}

ul {
   display: grid;
   grid-template-columns: 195px 195px 195px; 
   row-gap: 20px;
}

li {
   list-style-type: none;
}

.attribution { 
   font-size: 11px; 
   text-align: center; 
}
.attribution a { 
   color: hsl(228, 45%, 44%); 
}

/* || MEDIA-QUERIES */

@media screen and (max-width: 1070px) {
   header, main {
      margin-inline: 30px;
   }
   .btn-container {
      display: flex;
      flex-direction: column;
   }
   button {
      width: 312px;
      letter-spacing: 1px;
   }
   .button__line-ios {
      width: 312px;
   }
   .button__line-mac {
      width: 312px;
   }
   .btn-container button:first-child {
      margin-right: 0;
      margin-bottom: 25px;
   }
   .table__top {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }
   .table-mac {
      left: 0;
      width: 100%;
      min-width: 240px;
      height: auto;
   }
   .table__top-side {
      margin-right: 0;
   }
   .mobile__devices {
      width: 100%;
      min-width: 240px;
      height: auto;
   }
   .partners__tech {
      flex-direction: column;
      align-items: center;
   }
   .partners__tech div:nth-child(2) {
      margin-top: 70px;
   }
   .partners__tech div:nth-child(3) {
      margin-top: 70px;
   }
   .partners__carousel {
      flex-direction: column;
      row-gap: 60px;
   }
   footer {
      flex-direction: column;
   }
   .footer__logo {
      margin: 50px 0;
   }
   ul { 
      grid-template-columns: 195px; 
      text-align: center;
   }
   nav li:nth-child(4) {
      grid-row: 2 / 3;
   }
   nav li:nth-child(5) {
      grid-row: 4 / 5;
   }

   .footer__social {
      margin: 50px 0;
   }
}

@media screen and (max-width: 500px) {
   h1 {
      font-size: 2rem;
   }
}