*{
    padding: o;
    margin: 0;
    border: 0;
}

.html{
    font-size: 62.5%; /* 1rem = 10px  */
}

:root {
    --heading-font: "Raleway", sans-serif;
    --para-font: "Open Sans", sans-serif;
    --yellowish-color: #ffdd00;
    --light-font: 300;
    --normal-font: 400;
    --semi-bold-font: 600;
    --bold-font: 700;
    --extra-bold: 900;
}

.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-1{
    display: grid;
    grid-template-rows: repeat(7, minmax(50vh, min-content));
}

.main{
    background: url(./images/header-img.png);
    background-size: 100% 100%,cover;
    display: grid;
    grid-template-rows: 20fr 80fr;
}

.section1{
    display: grid;
    grid-template-columns: 4fr 1fr repeat(5,1fr);
    grid-template-areas: "logo . home about blog contact help";
    color: white;
    padding-right: 105px;
}

.menuItems {
  color: white;
  cursor: pointer;
}

.menuItems:hover {
  color: #ffeb3b;
}

.logo {
    grid-area: logo;
    font-family: 'Paytone One', sans-serif;
    color: white;
    font-size: 38px;
}

.home {
    grid-area: home;
}

.about {
    grid-area: about;
}

.work {
    grid-area: blog;
}

.blog {
    grid-area: contact;
}

.contact {
    grid-area: help;
}

.section2{
    display: grid;
    grid-template-rows: 70fr 30fr;
}

.section2upper{
    flex-flow: column;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding-top: 6rem;
}

.section2upper >h1 {
    /* font-size: 50px; */
    letter-spacing: 2px;
    /* word-spacing: 4px; */
    /* margin-bottom: 15px; */
    color: white;
    font-family: 'Paytone One', sans-serif;
}

.btn {
    background: #DC7633;
    border: none;
    color: white;
    padding: 15px 60px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    font-size: 14px;
}

.buttonloc{
    padding-top: 72px;
}

/* service category css*/

.service{
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 1100px) minmax(
      2rem,
      1fr
    );
  grid-template-rows: 30fr minmax(70fr, min-content);
  grid-template-areas:
    ". heading ."
    ". content .";
    padding: 0 0 6rem 0;  
}

.heading {
    grid-area: heading;
    flex-flow: column;
    margin-bottom: 6rem;
}

.heading >h2 {
  font-size: 1.9rem;
  font-weight: var(--bold-font);
  /* letter-spacing: 0.5rem; */
  margin-bottom: 1.5rem;
  color: #333333;
  padding-top: 100px;
}

.heading >h3 {
  font-size: 1.8rem;
  font-weight: var(--bold-font);
  /* letter-spacing: 0.5rem; */
  margin-bottom: 1.5rem;
  color: #333333;
}

.brand {
  color:#ffeb3b;
  text-decoration: underline;
}

.content {
    /* grid-area: content;
    display: grid;
    grid-template-columns: repeat(6, minmax(3rem, 3fr));
    grid-column-gap: 1rem;
    grid-row-gap: 5rem; 
    grid-area: content;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    grid-column-gap: 2rem;
    grid-row-gap: 5rem; */
    grid-area: content;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    grid-column-gap: 2rem;
    grid-row-gap: 5rem;
  }


.c {
    flex-flow: column;
    background: #e5e5e5;
    padding: 3rem 1.5rem;
  }
  
.c img {
    font-size: 6rem;
    margin-bottom: 5rem;
  }
  
.c .contentLine {
    width: 15%;
    height: 1px;
    background: black;
    margin-bottom: 4rem;
  }  
.c > h3 {
    font-size: 1.7rem;
    font-family: var(--para-font);
    font-weight: var(--light-font);
    margin-bottom: 2rem;
}

.c p {
    /* font-size: 2.2rem;
    font-family: var(--para-font);
    font-weight: var(--normal-font); */
    margin-bottom: 2rem;
    text-align: center;
    padding-bottom: 66px;
  }
  .cl p {
    /* font-size: 2.2rem;
    font-family: var(--para-font);
    font-weight: var(--normal-font); */
    margin-bottom: 2rem;
    text-align: center;
    padding-bottom: 66px;
  }
 /* team catageory */
.team{
    background-color:gray ;
    display: grid;
    grid-template-columns: minmax(1rem, 1fr) minmax(min-content, 1100px) minmax(1rem, 1fr);
    grid-template-rows: 30fr minmax(70fr, min-content);
    grid-template-areas:
    ". heading ."
    ". content .";
}

.c h6 {
    margin-bottom: 2rem;
    text-align: center;
    color: lightseagreen;
}





  /* skills catageory */
.skills{
    background: url(./images/Background.png) ;
    display: grid;
    grid-template-columns: minmax(1rem, 1fr) minmax(min-content, 1100px) minmax(1rem, 1fr);
    grid-template-rows: 30fr minmax(70fr, min-content);
    grid-template-areas:
    ". heading ."
    ". content .";
}

.heading1 {
    grid-area: heading;
    flex-flow: column;
    margin-bottom: 6rem;
}

.heading1 >h2 {
    font-size: 1.8rem;
    font-weight: var(--bold-font);
    letter-spacing: 0.5rem;
    margin-bottom: 1.5rem;
    color: black;
    font-family: 'Paytone One', sans-serif;
}

.headingLine {
    width: 8%;
    height: 5px;
    background: var(--yellowish-color);
}

.servicepara1{
    flex-flow: column;
    padding-top: 31px;
}

.skills_bar {
  width: 500px;
  margin: 60px auto;
  color: white;
  list-style: none;
}

.skills li{
  margin: 20px 0;
}

.bar {
  background: #353b48;
  display: block;
  height: 10px;
  border: 1px solid rgb(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 10px #ffeb3b;
}

.bar span {
  height: 8px;
  float: left;
  background: #ffeb3b;
}

.html {
  width: 90%;
  animation: html 2s;
}

.css {
  width: 70%;
  animation: css 2s;
}

.jquary {
  width: 60%;
  animation: jquary 2s;
}

.javascript {
  width: 85%;
  animation: javascript 2s;
}

@keyframes html{
  0%{
    width: 0%;
  } 
  100%{
    width: 90%;
  }
}

@keyframes css{
  0%{
    width: 0%;
  } 
  100%{
    width: 70%;
  }
}

@keyframes jquary{
  0%{
    width: 0%;
  } 
  100%{
    width: 60%;
  }
}

@keyframes javascript{
  0%{
    width: 0%;
  } 
  100%{
    width: 85%;
  }
}

.heading1 {
  grid-area: heading;
  flex-flow: column;
  margin-bottom: 6rem;
}

.heading1 >h3 {
  font-size: 1.8rem;
  font-weight: var(--bold-font);
  letter-spacing: 0.5rem;
  margin-bottom: 1.5rem;
  color: #ffeb3b;
  font-family: 'Paytone One', sans-serif;
  padding-top: 100px;
}


  /* PORTFOLIO SECTION */

.portfolio{
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(min-content, 1100px) minmax(1rem, 1fr);
  grid-template-rows: 30fr minmax(70fr, min-content);
  grid-template-areas:
  ". heading ."
  ". content .";
}

.button {
    background-color: white;
    border: 1px solid #ffeb3b;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
  background-color: white;
  border: 2px solid #ffeb3b;
    color: black; 
  }
  
  .button1:hover {
    background-color: #ffeb3b;
    color: black;
  }
  
  .button2 {
    background-color: white;
    border: 2px solid #ffeb3b;
    color: black;
  }
  
  .button2:hover {
    background-color:#ffeb3b;
    color: black;
  }
  
  .button3 {
    background-color: white;
    border: 2px solid #ffeb3b;
    color: black;
  }
  
  .button3:hover {
    background-color:#ffeb3b;
    color: black;
  }
  
  .button4 {
    background-color: white;
    border: 2px solid #ffeb3b;
    color: black;
  }
  
  .button4:hover {
    background-color:#ffeb3b;
    color: black;
}
  
  .button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
  }


  .img_work {
    width: 100%;
  max-width: 400px;
  height: auto;
  }

  .img_work2 {
    height: 35%;
    width: 91%;
  }










                /* ABOUT US */
  .about_us {
    background: url(./images/Background.png) ;
  }






  /* .cp img {
    /* width: 100%;
    height: 100%; */
    /* object-fit: contain;
    margin-bottom: 2rem;
  }
  
  .cp h1 {
    font-size: 2.2rem;
    font-family: var(--para-font);
    font-weight: var(--bold-font);
    margin-bottom: 1rem;
  }
  
  .cp h2 {
    font-size: 2rem;
    font-family: var(--para-font);
    font-weight: var(--normal-font);
    margin-bottom: 2rem;
  }
  
  .testimonials {
    background: white;
  }
  
  .ct {
    align-items: flex-start;
    padding: 2rem;
  }
  
  .ct p {
    font-size: 1.7rem;
    font-family: var(--para-font);
    font-weight: var(--normal-font);
    margin-bottom: 2rem;
    text-align: left;
  }
  
  .ct h1 {
    font-size: 2.5rem;
    font-family: var(--para-font);
    font-weight: var(--bold-font);
    margin-bottom: 2rem;
    text-align: left;
  }
  
  .ct div i {
    font-size: 1.5rem;
    color: var(--yellowish-color);
  }  */

.para1{
    padding-top:16px;
}

.fix1{
    padding-top: 45px;
    padding-bottom: 84px;
}

.button5 {
    background-color: #33ffff; 
    color: white; 
    border: none;
  }
  
  .button5:hover {
    background-color: whitesmoke;
    color: black;
  }

  /* ABOUT US CSS */
.aboutus{
    background-color:#ff3399 ;
    /* display: grid;
    grid-template-columns: minmax(1rem, 1fr) minmax(min-content, 1100px) minmax(1rem, 1fr);
    grid-template-rows: 30fr minmax(70fr, min-content);
    grid-template-areas:
    ". heading ."
    ". content ."; */
    height: 100%;
    width: 100%;
}

.para2{
    padding-left: 14px;
    padding-top: 9px;
}

.image1{
    padding-left: 217px;
}

.para3{
    padding-left: 14px;
}

.img2{
    padding-left: 19px;
}

.para4{
    padding-left: 46px;
    padding-top: 9px;
}

.para5{
    padding-left: 46px;
}

.heading2{
  padding-left: 207px;
  padding-top: 74px;
  padding-bottom: 14px
}

.headingLine2{
  width: 11%;
  height: 5px;
  background-color: black;
  margin-left: 437px;
  margin-bottom: 18px;
}

.para6{
  padding-left: 155px;
}

.cl {
  flex-flow: column;
  padding: 0rem 1.5rem;
  color: white;
}


.background1 {
  background-color: white;
    border-radius: 100px;
    height: 33px;
    font-size: 21px;
    width: 36px;
    left: -89px;
    top: 20px;
    position: relative;
}

.background1:hover {
  background-color: #ffeb3b;
}

.icon_1 {
  padding-left: 11px;
  color:#b9b9b9;
}

.icon_2 {
  padding-left: 10px;
  color:#b9b9b9;
}

.background2 {
  background-color:white;
  border-radius: 56px;
  height: 33px;
  font-size: 21px;
  width: 36px;
    top: -13px;
    position: relative;
}

.background2:hover {
  background-color: #ffeb3b;
}

.background3 {
  background-color:white;
    border-radius: 56px;
    height: 33px;
    font-size: 21px;
    width: 36px;
    left: 75px;
    top: -46px;
    position: relative;
}

.background3:hover {
  background-color: #ffeb3b;
}




 /* skills catageory */
 .contactus{
  background: url(./images/path.png) ; 
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(min-content, 1100px) minmax(1rem, 1fr);
  grid-template-rows: 30fr minmax(70fr, min-content);
  grid-template-areas:
  ". heading ."
  ". content .";
}

.heading1 {
  grid-area: heading;
  flex-flow: column;
  margin-bottom: 6rem;
}

.box_border {
  height: 59px;
  width: 510px;
  background-color: #595d64;
}

.heading_1 {
  font-size: 3.2rem;
    color: #ffff;
    letter-spacing: 0.2rem;
    margin-bottom: 1.5rem;
    font-family: 'Paytone One', sans-serif;
    padding-top: 35px;
}

.para_color {
  color: #aeadad;
}

.para_color1 {
  color: white;
}

.icon_3 {
  position: relative;
    font-size: 27px;
    top: 10px;
    left: -69px;
}

.icon_4 {
  position: relative;
    top: -18px;
    left: -14px;
    font-size: 27px;
}

.icon_5 {
  position: relative;
    top: -47px;
    left: 48px;
    font-size: 27px;
}

.img_top {
  padding-top: 107px;
}



@media screen and (max-width: 1024px) {
.heading >h2 {
  font-size: 1.8rem;
}
}

@media screen and (max-width: 768px) {
.heading >h2 {
   font-size: 1.6rem;
  }
.heading >h3 {
  font-size: 1.6rem;
}
}

@media screen and (max-width: 320px) {
  .img_creative {
    height: auto;
    width: 310px;
  }  
  
  .heading >h3 {
    font-size: 0.8rem;
  }
  
  .heading >h2 {
    font-size: 0.9rem;
  }
  
  .para_fix {
    text-align: center;
    font-size: 11px;
  }
  
  .menuItems {
    font-size: 8px;
  }
  
  .heading_1 {
    font-size: 1.2rem;
  }
  
  .box_border {
    width: 230px;
  }
  
  .skills_bar {
    width: 310px;
  }
  
  .para_color {
    font-size: 11px;
  }
  
  .heading1 >h3 {
    font-size: 0.8rem;
  }
  }