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

:root{
    /*fonts*/
    --font-family: "Bai Jamjuree" , sans-surfice;
    --font-size: 18px;
    --font-weight-normal: 400 ;
    --font-weight-bold:600;
    /*colors*/
    --Strong-Cyan: hsl(171, 66%, 44%);
    --Light-Blue:hsl(233, 100%, 69%);
    --Dark-Grayish-Blue:hsl(210, 10%, 33%);
    --Grayish-Blue: hsl(201, 11%, 66%);
}
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body{
   font-family: var(--font-family);
   font-size:var(--font-size) ;
   font-weight: var(--font-weight);
   width: 100vw;
   display: grid;
   grid-template-rows: 320px 220px 220px 600px 100px 730px 130px 1fr 260px 250px 200px;
   gap: 40px;
}

header{
   width: auto;
   grid-column: 1/2;
   grid-row: 1/2;
   background-repeat: no-repeat;
   background-image:url(./images/bg1.png);
   display: grid;
   place-content: center;
   gap: 30px;
}
section1 >p, section9 > p{
   max-width: 100%;
}

section1{
   grid-column: 1/2;
   grid-row: 2/3;
   text-align: center;
}

section2{
   grid-column: 1/2;
   grid-row: 3/4;
   display: grid;
   place-items: center;
   margin-top: 80px;
   text-align: center;
}

h1{
  padding-bottom:15px ;
  font-weight: var(--font-weight-bold);
  font-size: 44px;
}
h2{
   padding-bottom: 20px;
   font-size: 35px;
}
h1,h2,h3{
   color: var(--Dark-Grayish-Blue);
}
p{
   color: var(--Grayish-Blue);
   font-size: 20px;
   line-height: 30px;
   max-width: 800px;
}
#button-ios, #button-mac{
   color: white;
   padding-inline: 40px;
   padding-block: 15px;
   font-size: var(--font-size);
   font-family: var(--font-family);
   margin-top: 40px;
   border-radius: 27px;
   font-weight: var(--font-weight-bold);
}
#button-ios{
   background-color:var(--Strong-Cyan) ;
   border:1px solid var(--Strong-Cyan);
   box-shadow: 2px 2px 1px hsl(171, 63%, 39%);
}
#button-ios:hover{
   box-shadow: 8px 8px 10px hsla(171, 66%, 44%,0.25);
}
#button-mac{
   background-color: var(--Light-Blue);
   box-shadow: 2px 2px 1px hsl(233, 97%, 64%);
   margin-left: 8px;
   border: 1px solid var(--Light-Blue);
}
#button-mac:hover{
   box-shadow: 8px 8px 8px hsla(233, 100%, 69%, 0.25);;
}
.img1{
   margin-top: 85px;
   width: 100%;
}

section3{
   grid-column: 1/2;
   grid-row: 4/5;
   display: grid;
   grid-template-columns: 52% 40%;
   gap: 100px;
   margin-top: 30px;
}
.d1{
   grid-column: 1/2;
   grid-row: 1/2;
   background-image: url(./images/image-computer.png);
   background-repeat: no-repeat;
   background-position: right;
}
.d2{
   grid-column: 2/3;
   grid-row: 1/2;
}
h3{
   margin-top: 60px;
}
.d2 > p{
   text-align: start;
   padding-top: 10px;
   font-size: var(--font-size);
   max-width: 410px;
}

section4{
   grid-column: 1/2;
   grid-row: 5/6;
   text-align: center;
   margin-top: 50px;
   display: grid;
   place-items: center;
}

section5{
   grid-column: 1/2;
   grid-row: 6/7;
   background-image: url(./images/image-devices.png);
   background-repeat: no-repeat;
   background-position: center;
   margin-top: 150px;
}
section6{
   grid-column: 1/2;
   grid-row: 7/8;
   text-align: center;
   display: grid;
   place-items: center;
}

section7{
   grid-column: 1/2;
   grid-row: 8/9;
   display: grid;
   grid-template-columns: 110px 1fr 1fr 1fr 110px;
   grid-template-rows:1fr; 
   text-align: center;
   gap: 20px;
   margin-top: 50px;
}
.d3{
   grid-column: 2/3;
   grid-row: 1/2;
  
}
.div>p{
   font-size: 16px;
   margin-top: 10px;
}
.d4{
   grid-column: 3/4;
   grid-row: 1/2;
}
.d5{
   grid-column: 4/5;
   grid-row: 1/2;
}

section8{
   grid-column: 1/2;
   grid-row: 9/10;
   display: grid;
   grid-template-columns:  100px 1fr 1fr 1fr 1fr 1fr 100px;
   place-items: center;
}
.google{
   grid-column: 2/3;
}
.ibm{
   grid-column: 3/4;
}
.microsoft{
   grid-column: 4/5;
}
.hp{
   grid-column: 5/6;
}
.vector{
   grid-column: 6/7;
}

section9{
   grid-column: 1/2;
   grid-row: 10/11;
   text-align: center;
   padding-inline: 300px;
}

footer{
   grid-column: 1/2;
   grid-row: 11/12;
   display: grid;
   grid-template-columns:1.2fr 0.7fr 0.7fr 0.7fr 1.5fr ;
   background-color: hsl(0, 0%, 93%);
   margin-top: 50px;
}
.c{
   grid-column: 1/2;
   display: grid;
   place-content: center;
}
.div1>p{
   text-align: start;
   padding-top: 35px;
   font-size: var(--font-size);
}
.d9{
   grid-column: 2/3;
}
.d10{
   grid-column: 3/4;
}
.d11{
   grid-column: 4/5;
}
.d12{
   grid-column: 5/6;
   display:flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
}
.div1 > p:hover{
   color: var(--Strong-Cyan);
   
}
.c > img{
   width: 50%;
}

@media (max-width: 400px){
   body{
      width: 375px;
      grid-template-rows: 320px 370px 320px 800px 200px 300px 130px 1fr 550px 400px 480px;
   }

   header{
      background-image:url(./images/bg-header-mobile.png);
      width: 375px;
   }
   h1{
      font-size: 30px;
      max-width: 375px;
      text-align: center;
      margin-inline: 30px;
    }
    section1 > p{
      font-size: 15px;
      max-width: 290px;
   }
   section1{
      display: flex;
      flex-direction: column;
      place-items: center;
      width: 375px;
   }
   #button-ios, #button-mac{
      width: 80%;
      margin-left: 0;
   }
   h2{
      padding-bottom: 20px;
      font-size: 30px;
      max-width: 320px;
   }
   section2 {
      max-width: 375px;
      place-items: center;
   }
   section2 > p,section4 > p, section6 > p, .div>p, section9 > p{
      font-size: 16px;
      max-width: 300px;
   }
   section3{
      grid-column: 1/2;
      grid-row: 4/5;
      display: grid;
      grid-template-rows: 40% 60%;
      grid-template-columns: 375px;
      gap: 0px;
      margin-top: 30px;
      width: 375px;
      
   }
   .d1{
      background-size: contain;
      background-position: center;
   }
   .d2{
      grid-column: 1/2;
      grid-row: 2/3;
      display: grid;
      place-items: center;
   }
   .d2 > p{
      text-align: center;
      padding-top: 10px;
      font-size: 16px;
      max-width: 310px;
   }
   section4,section6{
      max-width: 375px;
   }
  
   section5{
      grid-column: 1/2;
      grid-row: 6/7;
      background-image: url(./images/image-devices.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 375px;
      margin-top: 70px;
   }
   section7{
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr; 
      text-align: center;
      gap: 20px;
      width: 375px;
   }
   .d3{
      grid-row: 1/2;
      grid-column: 1/2;
   }
   .div{
      display: grid;
      place-items: center;
   }
   .d4{
      grid-row: 2/3;
      grid-column: 1/2;
   }
   .d5{
      grid-row: 3/4;
      grid-column: 1/2;
   }
   .d2 >h3{
      margin-top: 40px;
      max-width: 375px;
      text-align: center;
   }
   section8{
      grid-template-columns: 1fr;
      grid-row: 1fr 1fr 1fr 1fr 1fr;
      place-items: center;
      max-width: 375px;
   }
   .google{
      grid-column: 1/2;
      grid-row: 1/2;
   }
   .ibm{
      grid-column: 1/2;
      grid-row: 2/3;
   }
   .microsoft{
      grid-column: 1/2;
      grid-row: 3/4;
   }
   .hp{
      grid-column: 1/2;
      grid-row: 4/5;
   }
   .vector{
      grid-column: 1/2;
      grid-row: 5/6;
   }
   section9{
      display: flex;
      flex-direction: column;
      width: 375px;
      padding: 0;
      place-items: center;
   }
   button{
      margin-left: 40px;
   }
   h2{
      font-size: 25px;
   }
   footer{
      grid-template-columns: 375px;
      grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr;
      margin-top: 50px;
   }
   .c{
      grid-row: 1/2;
      grid-column: 1/2;
      padding-left: 70px;
      
   }
   .div1>p{
      text-align: start;
      padding-top: 35px;
      font-size: var(--font-size);
   }
   .d9{
      grid-row: 2/3;
      grid-column: 1/2;
   }
   .d10{
      grid-row: 3/4;
      grid-column: 1/2;
   }
   .d11{
      grid-row: 4/5;
      grid-column: 1/2;
   }
   .d12{
      grid-row: 5/6;
      grid-column: 1/2;gap:40px;
   }
   .div1>p{
      text-align: center;
      padding-top: 15px;
      font-size: var(--font-size);
      max-width: 375px;
   }
}