@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;700&display=swap');

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


:root {
--dark-blue: hsl(233, 26%, 24%);
--lime-green: hsl(136, 65%, 51%);
--bright-cyan: hsl(192, 70%, 51%);

--grayish-blue: hsl(233, 8%, 62%);
--light-grayish-blue: hsl(220, 16%, 96%);
--very-light-gray: hsl(0, 0%, 99%);

--white: hsl(0, 0%, 100%);

}


body {
  background: var(--white);
  font-size: 18px;
  display: grid;
  grid-template-columns: 100%;
  font-family: 'Public Sans', sans-serif;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: var(--dark-blue);
  transition: color .3s ease;
}
li {
  list-style: none;
}

section,header,footer {
  padding: 1.3rem;
}

h1,h2,h3 {
  text-align: center ;
  color: var(--dark-blue)
}

sub{
  font-size: 10px;
}

@media screen and (max-width:765px){
 
  #header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  background: var(--white);
  z-index: 10;
}
#header .logo {
  width :130px;
}
.logo img {
  width: 100%;
}


nav {
  position: fixed;
 top:10%;
 left:0%;
 width: 0;
 height: 0;
 background: #000000D1;
 overflow: hidden;
 padding: 0 1rem;
 border-bottom-right-radius:100%; 
 transition: width .5s ease,height .5s ease, border-radius .5s ease;
}
.open {
 display: block;
 width: 100%;
 height: 100%;
  border-bottom-right-radius: 0;
  
}
menu {
  padding: 2rem;
  background: white;
  width:100%;
  margin: 2rem auto;
  text-align: center;
  border-radius: 5px;
}
menu li {
  padding: .3rem;
  margin-bottom: .2rem;
  
 
}

#toggle {
  cursor: pointer;
  display: block;
  transition: all .5s ease;
}
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position:fixed;
  background: var(--white);
  z-index: 10;
 
}
#header .logo {
  width :130px;
}
.logo img {
  width: 100%;
}

menu li a {
  color: var(--dark-blue);
  position:relative;
  
}
menu li a::after {
  cursor: pointer;
  content: "";
  width: 0;
  height: 3px;
  position: absolute;
  bottom: -50%;
  left: 50% ;
  transform: translateX(-50%);
  background: linear-gradient(var(--lime-green), var(--bright-cyan));
  transition: width 0.3s;
}


menu li a:hover::after{
  width: 100%;
}


.btn {
  color: var(--white);
  background: linear-gradient(var(--lime-green), var(--bright-cyan));
  padding: .7rem 1.3rem;
  border-radius: 25px;
  display: none;
  
}



/* main */
main {
  display: grid;
  grid-template-columns: 100%;
  
}
/* Hero Section */
#hero{
  position: relative;
  margin-bottom: 5rem;
  padding: 0;
}
.mockup {
  background: url(images/bg-intro-mobile.svg) no-repeat;
  width: 100%;
  height: 350px;
  

 
  
}
.mockup img {
 width: 100% ;
 position: absolute;
 top: -7%;
 padding: 0 .5rem;
 
}

#hero article {
  text-align: center;
  margin-top: 4rem;
 
}

#hero article h1 {
  font-size: 32px;
  margin-bottom: .4rem;
}
#hero article p {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 3rem;
  color: var(--grayish-blue);
}
#hero article .btn {
  font-size: 10px;
  display: inline;
  
  
}




/* why choose us */
#choose-us {
  background: var(--very-light-gray);
  text-align: center;
}

#choose-us p {
  font-size: 12px;
  color: var(--grayish-blue);
}

#features {
  display: grid;
}



.feature {
  margin-bottom: 2rem;
  padding-top: 2rem;
}
.feature p {
  font-size: 12px;
  padding-top: 1rem;
  line-height: 1.5;
}


/* Latest Article Section */
#latest-article {
 background: rgba(254, 254, 254, .1);
}
#latest-article h2 {
  text-align: center;
  padding: 3rem 0;
}

#articles .article {
  background:var(--white);
  margin-bottom: 3rem;
  display: grid;
  border: 1px solid var(--very-light-gray);
  
}
.article .article-image {
  width:100% ;
  height: 50%;
  border-radius: 25px;
 margin-bottom: 1rem;
}
.article-image img {
  width: 100%;
  border-radius: 6px 6px  0px 0px;
}
#articles .article sub,h4,p {
  padding: .3rem .5rem 0 1.3rem  ;
  color: var(--grayish-blue);
}


#articles .article h4,p {
  font-size: 13px;
}


/* footer */
#footer {
  background: var(--dark-blue);
  text-align: center;
 
}

#footer .logos .page-logo {
  margin-bottom: 2rem;
}
#footer ul {
  margin:2rem;
}
#footer ul li {
  padding: .2rem;
}
#footer ul li a {
  color: var(--light-grayish-blue);
  font-size: 10px;
}

#footer ul li a:hover,.article h4 a:hover{
  color: var(--lime-green)
}

#footer .copyright .btn {
  display: inline-block;
  font-size: 13px;
  margin-bottom: 1rem;
}
#footer .copyright .built a {
  color: var(--white);
  animation: animate 10s ease infinite ;
  
}
@keyframes animate {
  0%{
    color: var(--bright-cyan);
  }
  20%{
    color: blueviolet;
  }
  
  
  40% {
    color: palevioletred;
  }
  
  60% {
    color: darkcyan;
  }
 
  80% {
    color: wheat;
  }
  100% {
    color: whitesmoke;
  }
  
}




@media screen and (min-width: 765px) {
  
  body {
  background: var(--white) ;
  font-size: 16px;
}


section,header,footer {
  padding: 1.3rem 3.3rem;
}

h1,h2,h3 {
  text-align: left ;
  color: var(--dark-blue);
  
}

sub{
  font-size: 12px;
}

/* header */


menu {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
menu li {
  padding: .3rem;
}
menu li a {
  color: var(--dark-blue);
  position:relative;
  padding: .6rem;
  
}


.btn {
  display: inline;
  padding: .7rem 1.5rem;
  font-size: 12px;
}
#toggle {
 display: none;
}
/* header ending */


/**hero section**/

  #hero{
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 0;
  padding-bottom: 0
 
}
.mockup {
  background: url(images/bg-intro-desktop.svg) no-repeat ;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  
}
.mockup img {
  position: relative;
  padding: 0;
  top:-2%;
  right: -15%;
  width: 100%;

}

#hero>article {
  text-align: left;
  padding-left: 3.3rem;
}
#hero article h1{
  font-size: 44px;
  line-height: 1.2;
}
#hero article>h1,article>p{
  text-align: left;
  padding: 0;
}


/* why choose ud */
#choose-us {
  text-align: left;
  padding-top: 7rem;
}

#choose-us>p {
  font-size: 14px;
  width: 65%;
  padding: 1rem 0;
  line-height: 1.2;
}

#features {
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}



.feature {
  margin-bottom: .6rem;
 
}
.feature img {
  width: 50px;
}
.feature h3 {
  text-align: left;
  padding: .8rem 0;
  font-size: 6px;
  
}
.feature p {
  font-size: .3px;
  line-height: 1.8;
  padding: 0;
}


/***latest article***/

#latest-article{
  background: linear-gradient(white,hsla(235, 0%, 98%, .8));
  margin-bottom: 1em;
 
}
#latest-article h2 {
  text-align: left;
 
}

#articles {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  padding: 0;
 
 
}
#articles .article-image{
  overflow: hidden;
  border-radius: 0;
  height: 135px;
}
#articles .article {
  background: var(--white);
  margin:.9rem 0;
}



#articles .article sub,h4,p {
  padding:  .6rem 0 0 1rem  ;
  width: 100%;
 
}


#articles .article h4,p {
  font-size: 10px;
  line-height: 1.5;
}



/* **footer start** */

#footer {
    text-align: left;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 4rem;
 
  
}


#footer ul {
  margin-top: 0;
  display: grid;
grid-template-columns: repeat(2,1fr);
 padding: 0;
  
}
#footer .logos .social-logos a {
   padding: .2rem;
 }
#footer .logos .page-logo{
  margin-bottom: 3rem;
}
#footer ul li a {
  font-size: 6px
}
.copyright{
  padding: 0;
}
.copyright .built, .built>a {
  font-size: 10px;
  color: white;
}

                          }