@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  width: 0.6rem;
}

html::-webkit-scrollbar-track {
  background: #111;
}

html::-webkit-scrollbar-thumb {
  background: #1abc9c;
  border-radius: 5rem;
}

:root {
  background: black;
  --theme-bg-color: rgba(16 18 27 / 40%);
  --border-color: rgba(113 119 144 / 25%);
  --theme-color: #f9fafb;
  --inactive-color: rgb(113 119 144 / 78%);
  --body-font: "Poppins", sans-serif;
  --hover-menu-bg: rgba(12 15 25 / 30%);
  --content-title-color: #999ba5;
  --content-bg: rgb(146 151 179 / 13%);
  --button-inactive: rgb(249 250 251 / 55%);
  --dropdown-bg: #21242d;
  --dropdown-hover: rgb(42 46 60);
  --popup-bg: rgb(22 25 37);
  --search-bg: #14162b;
  --overlay-bg: rgba(36, 39, 59, 0.3);
  --scrollbar-bg: rgb(1 2 3 / 40%);
}

body.dark-mode {
  background-color: #000;
}

#videoBg {
  display: none; /* Hide the video background by default */
}


.light-mode {
  --theme-bg-color: rgb(255 255 255 / 31%);
  --theme-color: #3c3a3a;
  --inactive-color: #333333;
  --button-inactive: #3c3a3a;
  --search-bg: rgb(255 255 255 / 31%);
  --dropdown-bg: #f7f7f7;
  --overlay-bg: rgb(255 255 255 / 30%);
  --dropdown-hover: rgb(236 236 236);
  --border-color: rgb(255 255 255 / 35%);
  --popup-bg: rgb(255 255 255);
  --hover-menu-bg: rgba(255 255 255 / 35%);
  --scrollbar-bg: rgb(255 253 253 / 57%);
  --content-title-color: --theme-color;
}


body {
  font-family: var(--body-font);
  background-image: url(https://wallpapershome.com/images/wallpapers/macos-big-sur-1280x720-dark-wwdc-2020-22655.jpg);
  background-size: cover;
  background-position: center;
  display: block;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1em;
  width: 100%;
  overflow: hidden;
  text-transform: lowercase;
  scroll-behavior: smooth;
}


.light-mode .dark-light svg {
  fill: transparent;
  stroke: var(--theme-color);
}
.light-mode .profile-img {
  border: 2px solid var(--theme-bg-color);
}
.light-mode .content-section ul {
  background-color: var(--theme-bg-color);
}
.light-mode .pop-up__title {
  border-color: var(--theme-color);
}
.light-mode .dropdown.is-active ul {
  background-color: rgba(255, 255, 255, 0.94);
}

body.light-mode:before,
body.light-mode .video-bg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-backdrop-filter: saturate(3);
          backdrop-filter: saturate(3);
}



@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-info {
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;
    }

    .profile-actions {
        justify-content: center;
    }


}

.portfolio {
  background-color: var(--theme-bg-color);
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 15px;
  font-weight: 500;
}

.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.video-bg video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

img {
  max-width: 100%;
}


section {
  padding: 3rem 0%;
}


.heading {
  text-align: center;
  margin-bottom: 2rem;
}

.heading span {
  color: #1abc9c;
  font-size: 4rem;
}

.heading h1 {
  font-size: 2rem;
  color: #fff;
  margin-top: -2px
}

#text{
  width: 70%;
  padding: 10px;
  margin-top: -70px;
  padding-left: 50px
}


.btn {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.7rem 1.6rem;
  font-size: 1.2rem;
  color: #fff;
  border: 0.2rem solid #1abc9c;
  border-radius: 5rem;
  cursor: pointer;
  background: none;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 300;
}

.btn:hover {
  background: #1abc9c;
  color: white;
  transform: scale(1.1);
  border: 2px solid #1abc9c;
}


.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  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;
  padding: 1.5rem 3%;
}

.header .navbar a {
  font-size: 1.7rem;
  color: #aaa;
  display: inline-block;
  margin: 0 1rem;
  font-weight: normal;
  line-height: 2;
}

.header .navbar a:hover {
  color: #1abc9c;
  cursor: pointer;
}

.header .btn {
  margin-top: 0;
}

.logo {
  font-size: 2.0rem;
  color: #fff;
  font-weight: normal;
  letter-spacing: 3px;
  line-height: 2;
  color: #1abc9c;
}

.logo i {
  color: #1abc9c;
  padding-right: .5rem;
}

.navbar i {
  font-size: 22px;
  color: #1abc9c;
}

.navbar i:hover {
  font-size: 22px;
  color: #fff;
  shape-outside: polygon();
}

#menu-btn {
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  display: none;
}

.action__btn{
  display: none;
}

.typewrite{
  text-decoration: none;
  text-shadow: 20px;
  color: transparent;
  -webkit-text-stroke: 0.1rem white;
  font-weight: bold;
  font-style: oblique;
  font-size: 30px;
  text-overflow: clip;
  text-transform: none;
}

h1{
  margin: 50px 0 30px;
}


.typewrite:hover{
  text-decoration: none;
  color: white;
}



.block {
    height: auto;
    background: #222;
    color: #fff;
    margin-bottom: 20px;
    border-radius: 5%;
    text-align:  justify;
}

/* header ends */


/* home start */

.home {
  margin: 0 auto;
  width: 100%;
  border-radius: 1rem;
  /*background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(../images/home-bg.jpg) no-repeat;*/
  /*background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(../images/1.jpg) no-repeat;*/
  background-size: cover;
  background-position: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 80vh;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 5rem;
}

.home .column span {
  font-weight: bolder;
  color: transparent;
  -webkit-text-stroke: 0.1rem #fff;
  font-size: 2.5vw;
  display: block;
  letter-spacing: 3px;
  font-weight: 400;
  margin-top: 50px
}

.home .column h3 {
  font-size: 2.5vw;
  color: #fff;
  text-align: left;
  margin-top: 20px;
  margin-bottom: -20px;
  letter-spacing: 3px;
  font-weight: 300;
}

.home .column p {
  max-width: 60rem;
  margin: 1rem auto;
  font-size: 1.4rem;
  color: #aaa;
  line-height: 2;
}


.dashboard__content span {
 font-weight: bolder;
 color: transparent;
 -webkit-text-stroke: 0.1rem #fff;
 font-size: 2.3vw;
 display: block;
 text-align: left;
 position: relative;
 margin-top: -50px;
 letter-spacing: 6px;
 padding-left: 60px;
 font-weight: 600;
}

/*home*/



/* book-form start */

.book-form {
  width: 95%;
  margin: 1rem auto;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.3);
          box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.3);
  padding: 1rem 2rem;
}

.dashboard {
          display: flex;
          gap: 20px;
      }

      .dashboard__card {
          background: transparent;
          border-radius: 10px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          padding: 20px;
          text-align: center;
          width: 120px;
          border: 1.5px solid #1abc9c;
      }

      .dashboard__card .number {
          font-size: 1.5rem;
          font-weight: bold;
          margin-left: 35px;
          color: #fff;
          position: absolute;
          margin-bottom: 10px;
          margin-top: -15px
      }



      .dashboard__card .label {
          font-size: 1rem;
          color: #fff;
          margin-bottom: -10px;
          margin-top: 15px;
      }



      .dashboard__card:hover {
        box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
        background: #1abc9c;
        transform: scale(1.1);
        border: 2px solid #1abc9c;
      }

 /* book-form ends */


 /*About me*/

 .card {
   position: relative;
   background-color: #f2f2f2;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   perspective: 1000px;
   box-shadow: 0 6px 14px #1abc9c;
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }


 #serv4{
   height: 300px
 }


 #all-position{
   margin-top: 70px
 }


 .card:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
 }

 .card__content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 20px;
   box-sizing: border-box;
   background-color: #f2f2f2;
   transform: rotateX(-90deg);
   transform-origin: bottom;
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .card:hover .card__content {
   transform: rotateX(0deg);
 }

 .card__title {
   margin: 0;
   font-size: 15px;
   color: #333;
   font-weight: 700;
 }

 .card:hover img {
   scale: 0;
 }

 .card__description {
   margin: 10px 0 10px;
   font-size: 12px;
   color: #777;
   line-height: 1.4;
 }


 .card__button {
   margin-top: 1rem;
   display: inline-block;
   padding: 0.7rem 0.5rem;
   font-size: 1.2rem;
   color: #1abc9c;
   border: 0.2rem solid #1abc9c;
   border-radius: 5rem;
   cursor: pointer;
   background: none;
   margin-left: 10px;
   font-size: 14px;
   font-weight: 300;
 }

 .card__button:hover {
   background: #1abc9c;
   color: white;
 }


 .profile-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .profile-info {
     display: flex;
     align-items: center;
 }

 .profile-image {
     border-radius: 50%;
     width: 70px;
     height: 70px;
     object-fit: cover;
     margin-right: 15px;
 }

 .profile-text {
     text-align: left;
 }

 .profile-name {
     font-size: 1.5em;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .profile-title {
     font-size: 0.9em;
     color: #888;
 }

 .profile-actions {
     display: flex;
     gap: 10px;
 }

 .profile-actions button {
     font-size: 0.9em;
     padding: 10px 15px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: all 0.3s;
 }

 .hire-me-btn {
     background-color: #f4f4f4;
     color: #333;
     border: 1px solid #ddd;
 }

 .hire-me-btn:hover {
     background-color: #ddd;
 }

 .download-cv-btn {
     background-color: #007bff;
     color: white;
 }

 .download-cv-btn:hover {
     background-color: #0056b3;
 }


 .product-container {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding: 20px;
   width: 100%;
 }

 .product-card {
   background: transparent;
   border-radius: 60% 74% 26% 40% / 63% 37% 47% 53%;
   border: 3px solid #1abc9c;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   overflow: hidden;
   width: 300px;
   flex: 0 0 auto;
   text-align: center;
   transition: transform 1.1s;
   scroll-snap-align: center;
   cursor: pointer;
 }

 .product-card:hover {
   transform: scale(1.09);
 }

 .product-title {
   font-size: 18px;
   margin-top: 20px;
   margin-bottom: -15px;
   color: #1abc9c;
 }

 .product-price {
   font-size: 17px;
   margin: 0 0 15px;
   color: #fff;
   text-align: left;
   padding: 15px;
   font-weight: 300;
   line-height: 1.5;
   text-transform: lowercase;
 }


 .product-container::-webkit-scrollbar {
   height: 5px;
 }

 .product-container::-webkit-scrollbar-thumb {
   background-color: #1abc9c;
   border-radius: 5px;
   cursor: pointer;
   margin-bottom: 20px
 }

 .product-container::-webkit-scrollbar-track {
   background-color: #f0f0f0;
 }



 .logo-container {
             text-align: center;
         }

         .logo-container p{
           padding: 1.5% 20%;
           color: #fff;
           text-align: center;
           font-size: 16px;
           font-weight: 300;
           line-height: 1.5;
           text-transform: lowercase;
         }

         .line {
             width: 70px;
             height: 3px;
             background-color: #fff;
             display: inline-block;
             vertical-align: middle;
             margin: 0 10px;
         }

         .text {
             font-size: 24px;
             font-weight: bold;
             letter-spacing: 3px;
             line-height: 2;
             color: #00bfa6;
             display: inline-block;
             vertical-align: middle;
         }


         #about1{
         	text-align: justify;
         	margin-top: 15px;
         	color: #fff;
          line-height: 1.5;
          font-size: 14px
         }


         #about p{
         	text-align: justify;
         	margin-top: 15px;
         	color: #fff;
          line-height: 1.5;
          font-size: 15px;
          font-weight: 400;
          text-transform: lowercase;
         }

         #about2{
         	margin-top: 40px;
           font-size: 14px
         }


         .about__container {
             max-width: 1100px;
             margin: 80px auto;
             border-radius: 15px;
             padding: 30px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
             animation: fadeIn 1.5s ease;
         }

         /* Header Section */
         .about__header {
             background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(../images/home-bg.jpg) no-repeat;
             background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(../images/1.jpg) no-repeat;
             text-align: center;
             padding-bottom: 20px;
             border-radius: 25px;
             padding: 25px 10px;
             border: 2px solid #1abc9c;
             transform: scale(1.05);
             box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
         }

         .about__header img {
             width: 140px;
             height: 140px;
             border-radius: 50%;
             border: 4px solid #1abc9c;
             animation: bounce 2s infinite ease-in-out;
         }

         .about__header h1 {
             margin: 10px 0;
             font-size: 28px;
             background: linear-gradient(to right, #1abc9c,  #1abc9c );
             -webkit-background-clip: text;
             color: transparent;
             font-weight: 400;
         }

         .about__header p {
             font-size: 18px;
             color: #fff;
             font-weight: 400;
         }


         /* About Section */
         .about-me {
             margin-top: 50px;
             padding: 20px 10px;
             border-radius: 10px;
             border: 2px solid #1abc9c;
             transform: scale(1.05);
             box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
         }

         .about-me:hover {
             transform: translateY(-5px);
             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
         }

         .about-me h2 {
             font-size: 22px;
             margin-bottom: 10px;
             color: #1abc9c;
             font-weight: 400;
         }

         .about-me p {
             font-size: 16px;
             line-height: 1.6;
             color: #fff;
             text-align: justify;
             font-weight: lighter;
         }

         /* Experience Section */
         .experience {
             margin-top: 40px;
         }

         .experience h2 {
             font-size: 22px;
             color: #fff;
             font-weight: 400;
             margin-bottom: 20px;
         }

         .job {
             border: 2px solid #1abc9c;
             transform: scale(1.05);
             box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
             border-radius: 10px;
             padding: 15px;
             margin-bottom: 15px;
             margin-top: 30px
         }

         .job:hover {
             transform: translateY(-5px);
             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
         }

         .job h3 {
             margin: 0;
             font-size: 18px;
             color: #1abc9c;
             font-weight: 400;
         }

         .job p {
             margin: 5px 0;
             font-size: 14px;
             color: #fff;
             font-weight: lighter;
         }

         /* Education Section */
         .education {
             margin-top: 40px;
         }

         .education h2 {
             font-size: 22px;
             color: #fff;
             margin-bottom: 20px;
             font-weight: 400;
         }

         .degree {
             margin-bottom: 15px;
             border: 2px solid #1abc9c;
             transform: scale(1.05);
             box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
             border-radius: 10px;
             padding: 15px;
             margin-bottom: 15px;
             margin-top: 30px
         }

         .degree:hover {
             transform: translateY(-5px);
             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
         }

         .degree h3 {
             margin: 0;
             font-size: 18px;
             color: #1abc9c;
             font-weight: 400;
         }

         .degree p {
             margin: 5px 0;
             font-size: 14px;
             color: #fff;
             font-weight: lighter;
         }

         /* Scroll Animations */
         @keyframes fadeIn {
             from {
                 opacity: 0;
                 transform: translateY(50px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }

         @keyframes fadeInUp {
             from {
                 opacity: 0;
                 transform: translateY(20px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }

         @keyframes bounce {
             0%, 100% {
                 transform: translateY(0);
             }
             50% {
                 transform: translateY(-10px);
             }
         }



 /*About me*/


/*skills section start*/

/* Header Section */
.skills-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #1abc9c;
}

.skills-header img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid #1abc9c;
    animation: bounce 2s infinite ease-in-out;
}

.skills-header h1 {
    margin: 10px 0;
    font-size: 28px;
    background: linear-gradient(to right, #1abc9c, #1abc9c);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 400;
}

.skills-header p {
    font-size: 18px;
    color: #fff;
}

#tools, #skills, h2 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 400;
}


/* Cards for Tools, Skills, etc. */
.skills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin: 0px -20px
}



.skills-card {
    border: 2px solid #1abc9c;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    text-align: center;
    padding: 5px
}

.skills-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.skills-card h3 {
    font-size: 18px;
    margin: 10px 0;
    color: #1abc9c;
    font-weight: 400;
}

.skills-card p {
    font-size: 14px;
    color: #666;
}

/* Scroll Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


/*skills-section ended*/



 /*services*/

  .row:after {
   content: "";
   display: table;
   clear: both;
  }

  .column1 {
   float: left;
   width: 33.3%;
   margin-top: 6px;
   padding: 10px;
  }

  .column2 {
   float: left;
   width: 25%;
   margin-top: 6px;
   padding: 10px;
  }

  .column3 {
   float: left;
   width: 50%;
   margin-top: 6px;
   padding: 10px;
  }


  .column9 {
   float: left;
   width: 33.3%;
   margin-top: 6px;
   padding: 10px;
  }

  .column9 h2{
   color: #1abc9c;
  }

  .column7 {
    float: left;
    width: 33.3%;
    margin-top: 6px;
    padding: 10px;
  }

  .column8 {
   float: left;
   width: 25%;
   margin-top: 6px;
   padding: 10px;
  }

  .column7:hover {
    transform: scale(1.05);
  }

  .column8:hover {
    transform: scale(1.05);
  }

  .column9:hover {
    transform: scale(1.05);
  }

  .column2:hover {
    transform: scale(1.05);
  }

  .column3:hover {
    transform: scale(1.05);
  }

  #serv{
   margin: 8px;
   font-size: 14px;
   font-weight: normal;
 }

 #serv1{
   margin: 5px;
   color: #00bfa6;
   font-size: 13px;
   text-align: center;
   text-align: justify;
   text-justify: inter-word;
   text-transform: lowercase;
   font-weight: 300;
 }

 #serv2{
   border-radius: 6%;

 }




  /*services*/


  /*projects*/

  .column5 {
   float: left;
   width: 50%;
   margin-top: 6px;
   padding: 10px;
  }


  .column6 {
   float: left;
   width: 25%;
   margin-top: 6px;
   padding: 10px;
  }



  /*projects*/



  /* banner start */

  .banner {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(../images/banner-bg.jpg) no-repeat;
    background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(../images/app.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    background-attachment: fixed;
    text-align: center;
  }

  .banner .content span {
    font-size: 2rem;
    color: #1abc9c;
  }

  .banner .content h3 {
    font-size: 4rem;
    color: #fff;
    margin-top: 1rem;
    text-align: center;
  }

  .banner .content p {
    max-width: 60rem;
    margin: 1rem auto;
    font-size: 1.4rem;
    color: #aaa;
    line-height: 2;
  }

  /* banner ends */


  /* app start */

  .app {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(../images/banner-bg.jpg) no-repeat;
    background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(../images/app.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    background-attachment: fixed;
    text-align: center;
  }

  .app .content span {
    font-size: 4rem;
    color: #1abc9c;
  }

  .app .content h3 {
    font-size: 2.5rem;
    color: #fff;
    margin-top: 1rem;
  }

  .app .content p {
    max-width: 60rem;
    margin: 1rem auto;
    font-size: 1.4rem;
    color: #aaa;
    line-height: 2;
  }

  /* app ends */



/*blog and testimonial*/

.column5 {
 float: left;
 width: 50%;
 margin-top: 6px;
 padding: 10px;
}

.column6 {
 float: left;
 width: 25%;
 margin-top: 6px;
 padding: 10px;
}

 .contact{
   font-size: 4rem;
   color: #000;
 }

 /* Style inputs */
  input[id=uploadsheet]{
   width: 90%;
   height: 40%;
   padding: 20%;
   border: 2px dashed #ccc;
   border-radius: 25px;
   border-color: #1abc9c;
   color: #1abc9c;
   margin-top: 10px
  }


 #all__form{
   margin-top: -80px
 }

 #all__form__owner{
   margin-top: -80px
 }

 #contact-two{
   margin-top: 50px
 }

 #contact-one{
   margin-top: 80px;
   margin-bottom: -50px
 }


 .column {
  float: left;
  width: 50%;
  margin-top: 50px;
  padding: 10px;
 }


 .contact{
   margin-top: 25px;
   font-size: 4rem;
   color: #1abc9c;
   text-align:center
 }

 .review{
   margin-top: -20px;
   margin-bottom: -20px;
   font-size: 4rem;
   color: #1abc9c;
   text-align:center
 }

 .review-inner{
   margin-top: 30px;
   margin-bottom: 5px;
 }


 .create{
    margin-bottom: -35px;
    font-size: 4rem;
    color: #1abc9c;
    text-align:center
  }


 #review-img{
   border-radius: 50%;
   position: absolute;

 }

 .review-text{
   position: relative;
   padding-left: 10%;
   text-align: center;
   margin-bottom: 15%
 }

  #review-title{
   padding-top: 5%;
   padding-bottom: 3%;
   color: #1abc9c;
 }


 /* Style inputs */
 input[class=contact2], select, textarea {
  width: 90%;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 25px;
  border-color: #1abc9c;
  background-color: transparent;
  margin-top: 6px;
  margin-bottom: 10px;
  resize: vertical;
  color: #1abc9c;
 }



 #text2{
   width: 100%;
   padding: 10px;
   margin-top: 15px;
   border-radius: 25px;
 }


 /*input {
  background-color: #1abc9c;
  border-radius:  15px;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
 }

 input:hover {
  background-color: #1abc9c;
 }*/

 /* Style the container/contact section */
 .container {
  border-radius: 5px;
  background-color: transparent;
 }


 /*testimonial and blogpost end*/




  /* contact start*/

  .contact__container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  border-radius: 22px;
  background-color: #fafafa;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .form {
  width: 100%;
  max-width: 900px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  }

  .contact-form {
  background-color: #1abc9c;
  position: relative;
  }

  .circle {
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 20%, #149279);
  position: absolute;
  }

  .circle.one {
  width: 130px;
  height: 130px;
  top: 130px;
  right: -40px;
  }

  .circle.two {
  width: 80px;
  height: 80px;
  top: 10px;
  right: 30px;
  }

  .contact-form:before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #1abc9c;
  transform: rotate(45deg);
  top: 50px;
  left: -13px;
  }

  form {
  padding: 2.3rem 2.2rem;
  z-index: 10;
  overflow: hidden;
  position: relative;
  }

  .contact__title {
  color: #fff;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1;
  margin-bottom: 0.7rem;
  }

  .input-contact__container {
  position: relative;
  margin: 1rem 0;
  }

  .input {
  width: 100%;
  outline: none;
  border: 2px solid #fafafa;
  background: none;
  padding: 1.2rem 1.2rem;
  color: #fff;
  font-weight: 500;
  margin: 3px 0px;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  border-radius: 25px;
  transition: 0.3s;
  }

  textarea.input {
  padding: 1.2rem 1.2rem;
  min-height: 180px;
  border-radius: 22px;
  resize: none;
  overflow-y: auto;
  }

  .input-contact__container label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 0.4rem;
  color: #fafafa;
  font-size: 1.5rem;
  font-weight: 400;
  pointer-events: none;
  z-index: 1000;
  transition: 0.5s;
  }

  .input-contact__container.textarea label {
  top: 1rem;
  transform: translateY(0);
  }

  .contact__btn {
  padding: 0.9rem 2.3rem;
  background-color: #fff;
  border: 2px solid #fafafa;
  font-size: 1.4rem;
  color: #1abc9c;
  line-height: 1;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  margin: 0;
  }

  .contact__btn:hover {
  background-color: transparent;
  color: #fff;
  }

  .input-contact__container span {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
  font-size: 0.8rem;
  padding: 0 0.4rem;
  color: transparent;
  pointer-events: none;
  z-index: 500;
  }

  .input-contact__container span:before,
  .input-contact__container span:after {
  content: "";
  position: absolute;
  width: 10%;
  opacity: 0;
  transition: 0.3s;
  height: 5px;
  background-color: #1abc9c;
  top: 50%;
  transform: translateY(-50%);
  }

  .input-contact__container span:before {
  left: 50%;
  }

  .input-contact__container span:after {
  right: 50%;
  }

  .input-contact__container.focus label {
  top: 3px;
  background: #1abc9c;
  transform: translateY(-50%);
  left: 25px;
  font-size: 1.3rem;
  }

  .input-contact__container.focus span:before,
  .input-contact__container.focus span:after {
  width: 50%;
  opacity: 1;
  }

  .contact-info {
  padding: 2.3rem 2.2rem;
  position: relative;
  }

  .contact-info .contact__title {
  color: #1abc9c;
  }

  .contact__text {
  color: #333;
  margin: 1.5rem 0 2rem 0;
  font-weight: normal;
  width: 90%;
  text-align: justify;
  }

  .information {
  display: flex;
  color: #555;
  margin: 1.5rem 0;
  font-weight: normal;
  align-items: center;
  font-size: 1.4rem;
  }

  .information a {
  color: #555;
  }


  .icon {
  width: 28px;
  margin-right: 0.7rem;
  }

  .social-media {
  padding: 3rem 0 0 0;
  }

  .social-media p {
  color: #333;
  }

  .social-icons {
  display: flex;
  margin-top: 0.5rem;
  }

  .social-icons a {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: linear-gradient(45deg, #1abc9c, #149279);
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-right: 0.5rem;
  transition: 0.3s;
  }

  .social-icons a:hover {
  transform: scale(1.05);
  }

  .contact-info:before {
  content: "";
  position: absolute;
  width: 110px;
  height: 100px;
  border: 22px solid #1abc9c;
  border-radius: 50%;
  bottom: -77px;
  right: 50px;
  opacity: 0.3;
  }

  .big-circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #1cd4af, #159b80);
  bottom: 50%;
  right: 50%;
  transform: translate(-40%, 38%);
  }

  .big-circle:after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background-color: #fafafa;
  border-radius: 50%;
  top: calc(50% - 180px);
  left: calc(50% - 180px);
  }

  .square {
  position: absolute;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(181%, 11%);
  opacity: 0.2;
  }


  /*ToTop*/

  #goto-topJS {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 1000000;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
  }

  /*ToTop*/



   /* footer start */

   .footer{
     background: #222;
   }
   .footer .box-container {
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
         grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
     gap: 1.5rem;
   }

   .footer .box-container .box {
     text-align: center;
     padding: 1rem 0;
     font-weight: normal;
   }

   .footer .box-container .box .logo {
     padding-bottom: 1rem;
     color: #1abc9c;
     font-weight: normal;
   }

  .footer a{
     font-weight: normal;
   }

   .footer .box-container .box h3 {
     font-size: 2.2rem;
     color: #1abc9c;
     padding: 1rem 0;
     font-weight: normal;
   }

   .footer .box-container .box p {
     font-size: 1.4rem;
     color: #aaa;
     padding: 1rem 0;
     line-height: 2;
     font-weight: normal;
   }

   .footer .box-container .box p i {
     padding-right: .5rem;
     color: #1abc9c;
     font-weight: normal;
   }

   .footer .box-container .box .share {
     padding-top: 1rem;
   }

   .footer .box-container .box .share a {
     background: #111;
     height: 4.5rem;
     width: 4.5rem;
     line-height: 4rem;
     font-size: 2rem;
     border-radius: 5%;
     font-size: 1.7rem;
     border: 0.2rem solid #111;
     color: #fff;
     margin-right: -.2rem;
     text-align: center;
     font-weight: normal;
   }

   .nonthing{
     margin-top: 140px;
     display: none;
   }

   .footer .box-container .box .links {
     font-size: 1.4rem;
     color: white;
     padding: 1rem 0;
     display: block;
     font-weight: normal;
   }

   .footer .box-container .box .links:hover {
     color: #1abc9c;
     font-weight: normal;
   }

   .footer .box-container .box .links:hover i {
     padding-right: 2rem;
   }

   .footer .box-container .box .links i {
     padding-right: .5rem;
     color: #1abc9c;
   }

   .footer .box-container .box form .email {
     width: 100%;
     border-radius: 5rem;
     border: 0.2rem solid #1abc9c;
     background: none;
     text-transform: none;
     color: #aaa;
     margin-bottom: 1rem;
     padding: 1.2rem 1.2rem;
     text-align: left;
   }

   .credit {
     background: #222;
     text-align: center;
     font-size: 1.8rem;
     padding: 2rem 0rem;
     margin-top: -40px;
     margin-bottom: 30px;
     color: #aaa;
   }

   .credit span {
     color: #1abc9c;
     font-weight: normal;
   }


   #contact{
     margin-top: 70px;
   }


   /* footer ends */













 @media screen and (max-width: 1024px) {

   section{
     width: 100%;
     margin-top: 0;

   }

   .heading__row {
   width: 100%;
   margin-top: 0;
   display: flex;
   flex-direction: column-reverse;
 }

 #all__form{
   margin: -10px;
 }

 #all__form .logo-container .text {
    margin-top: -70px
  }

  #all__form .logo-container .line {
     margin-top: -70px
   }


#all__form__owner{
margin: -20px;
}

#all__form__owner #uploadsheet{
margin-top: -10px
}


 .action__btn{
   position: absolute;
   display: block;
   right: 6px
 }

 .action__btn:hover a {
   color: #aaa;
 }

 .navbar i {
   display: none;
 }


 .action__btn a {
   font-size: 22px;
   color: #1abc9c;
   display: inline-block;
   margin: 0 1.4rem;
   font-weight: normal;
   line-height: 2;
 }


 .logo {
   font-size: 1.8rem;
   color: #fff;
   font-weight: normal;
   letter-spacing: 3px;
   line-height: 2;
   color: #1abc9c;
   position: absolute;
   left: 70px
 }

 .home .column span {
   font-weight: bolder;
   color: transparent;
   -webkit-text-stroke: 0.1rem #fff;
   font-size: 5vw;
   display: block;
   letter-spacing: 3px;
   font-weight: 400;
   margin-top: -20px
 }

 .home .column h3 {
   font-size: 5vw;
   color: #fff;
   text-align: left;
   margin-top: 20px;
   margin-bottom: -20px;
   letter-spacing: 3px;
   font-weight: 400;
 }


 .about__header .dashboard {
  display: none;
}


 .dashboard__content span {
  font-weight: bolder;
  color: transparent;
  -webkit-text-stroke: 0.1rem #fff;
  font-size: 3vw;
  display: block;
  text-align: left;
  position: relative;
  margin-top: -20px;
  margin-bottom: 10px;
  letter-spacing: 6px;
 }


 .text {
     font-size: 24px;
     font-weight: bold;
     letter-spacing: 3px;
     line-height: 2;
     color: #00bfa6;
     display: inline-block;
     vertical-align: middle;
 }

 .logo-container p{
   padding: 0 5%;
   margin-bottom: 20px;
   color: #fff;
   text-align: center;
   font-size: 16px;
 }


 .skills-container {
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
 }

 .product-container {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding: 20px;
   width: 100%;
 }

 .product-card {
   background: transparent;
   border-radius: 60% 74% 26% 40% / 63% 37% 47% 53%;
   border: 3px solid #1abc9c;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   overflow: hidden;
   width: 250px;
   height: 180px;
   flex: 0 0 auto;
   text-align: center;
   transition: transform 1.1s;
   scroll-snap-align: center;
   cursor: pointer;
 }

 .product-card:hover {
   transform: scale(1.09);
 }

 .product-title {
   font-size: 15px;
   margin-top: 10px;
   margin-bottom: -15px;
   color: #1abc9c;
 }

 .product-price {
   font-size: 8px;
   margin: 0 0 15px;
   color: #fff;
   text-align: center;
   padding: 5px 25px;
 }


 .product-container::-webkit-scrollbar {
   height: 5px;
 }

 .product-container::-webkit-scrollbar-thumb {
   background-color: #1abc9c;
   border-radius: 5px;
   cursor: pointer;
   margin-bottom: 20px
 }

 .product-container::-webkit-scrollbar-track {
   background-color: #f0f0f0;
 }

 #about2  {
  margin-bottom: -30px
 }

 #about1 p {
  text-align: justify;
  color: #fff;
  line-height: 2;
  font-size: 14px
 }

 #serv4{
   height: 250px
 }

   .column9, .column2, .column3 {
     width: 50%;
     margin-top: 0;
   }

   .column7 {
     width: 50%;
     margin-top: 0;
   }

   .column1 {
     width: 50%;
     margin-top: 0;
   }

   .column8 {
     text-align: center;
     width: 30%;
     margin-top: 0;
   }

   #about1{
     text-align: justify;
     margin-top: 15px;
     color: black;
   }

   .column6 {
     width: 50%;
     margin-top: 0;
   }

  .column5 {
    width: 50%;
    margin-top: 0;
  }

  #about3{
    text-align: justify;
    margin-top: 10px;
    color: white;
    margin-left: -30px;
    font-size: 1.2rem
  }

  #about2{
    margin-top: 40px;
    margin-left: -20px;
  }

 #about2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }


  .column {
    width: 100%;
    margin-top: 0;
  }


  #text{
   width: 70%;
   margin-top: -20px;
   border-radius: 25px;
   resize: vertical;
   margin-left: 120px
  }

  .column {
    width: 100%;
    margin-top: 0;
  }


  .footer .box-container .box p {
    font-size: 1.4rem;
    color: #aaa;
    margin-top: 35px;
    line-height: 2;
  }

  .create{
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 4rem;
    color: #1abc9c;
    text-align:center
  }

  .review-inner{
    margin-top: -30px;
    margin-bottom: 5px;
  }


  .header {
    padding: 1.5rem 2rem;
  }
  section {
    padding: 3rem 1rem;
  }

  #text2{
    width: 100%;
    padding: 10px;
    margin-top: -25px;
    border-radius: 25px;
    margin-left: 15px
  }



  #menu-btn {
    display: inline-block;
  }
  .typewrite {
    font-size: 6vw;
  }
  .header .navbar {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    background: #222;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  .header .navbar.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .header .navbar a {
    margin: 2rem;
    font-size: 2rem;
    display: block;
  }


  .form {
    grid-template-columns: 1fr;
  }

  .contact-info:before {
    bottom: initial;
    top: -75px;
    right: 65px;
    transform: scale(0.95);
  }

  .contact-form:before {
    top: -13px;
    left: initial;
    right: 70px;
  }

  .square {
    transform: translate(140%, 43%);
    height: 350px;
  }

  .big-circle {
    bottom: 75%;
    transform: scale(0.9) translate(-40%, 30%);
    right: 50%;
  }

  .contact__text {
    margin: 1rem 0 1.5rem 0;
  }

  .social-media {
    padding: 1.8rem 0 0 0;
  }


 }



















 @media screen and (max-width: 480px) {
   html {
     font-size: 50%;
   }
   .about .content h3 {
     font-size: 3.5rem;
   }
   .banner .content h3 {
     font-size: 2.7rem;
   }

   .action__btn{
     position: absolute;
     display: block;
     right: 6px
   }

   .header{
     margin-top: 1.5rem;
   }

   .action__btn:hover a {

     color: #aaa;
   }

   .navbar i {
     display: none;
   }


   .action__btn a {
     font-size: 22px;
     color: #1abc9c;
     display: inline-block;
     margin: 0 1.4rem;
     font-weight: normal;
     line-height: 2;
   }


   .logo{
     display: none;
   }

   .home .column span {
     font-weight: bolder;
     color: transparent;
     -webkit-text-stroke: 0.1rem #fff;
     font-size: 5vw;
     display: block;
     letter-spacing: 3px;
     font-weight: bolder;
     margin-top: -20px
   }

   .home .column h3 {
     font-size: 5vw;
     color: #fff;
     text-align: left;
     margin-top: 20px;
     margin-bottom: -20px;
     letter-spacing: 3px;
     font-weight: bolder;
   }

   #hireme{
     display: none;
   }

   .skills-container {
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
   }


   .about__container {
       width: 100%;
       margin: 80px auto;
       border-radius: 15px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       animation: fadeIn 1.5s ease;
       padding: 0.5em;
   }


   .about__header .dashboard {
    display: none;
  }

   .dashboard__content span {
    font-weight: bolder;
    color: transparent;
    -webkit-text-stroke: 0.1rem #fff;
    font-size: 5vw;
    display: block;
    text-align: left;
    position: relative;
    margin-top: -10px;
    margin-bottom: 10px;
    letter-spacing: 6px;
    font-weight: bolder;
   }


   .book-form {
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     width: 100%;
     margin: 1rem auto;
     border-radius: 1rem;
     -webkit-box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.3);
             box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.3);
     padding: 1rem 2rem;
   }


   .dashboard__card {
       background: transparent;
       border-radius: 10px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       padding: 16px 30px;
       text-align: center;
       width: 120px;
   }

   .dashboard__card .number {
       font-size: 1.5rem;
       font-weight: bold;
       margin-left: 5px;
       color: #fff;
       position: absolute;
       margin-bottom: 10px;
       margin-top: -12px
   }

   .dashboard__card .label {
       font-size: 1rem;
       color: #fff;
       margin-bottom: -10px;
       margin-top: 15px
   }

   .dashboard__card:hover {
     color: #1abc9c;
     transform: scale(1.05);
     box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
   }


   .product-container {
     display: flex;
     gap: 20px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     padding: 20px;
     width: 100%;
   }

   .product-card {
     background: transparent;
     border-radius: 60% 74% 26% 40% / 63% 37% 47% 53%;
     border: 3px solid #1abc9c;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     width: 250px;
     height: 180px;
     flex: 0 0 auto;
     text-align: center;
     transition: transform 1.1s;
     scroll-snap-align: center;
     cursor: pointer;
   }

   .product-card:hover {
     transform: scale(1.09);
   }

   .product-title {
     font-size: 15px;
     margin-top: 20px;
     margin-bottom: -15px;
     color: #1abc9c;
   }

   .product-price {
     font-size: 8px;
     margin: 0 0 15px;
     color: #fff;
     text-align: center;
     padding: 5px 25px;
   }


   .product-container::-webkit-scrollbar {
     height: 5px;
   }

   .product-container::-webkit-scrollbar-thumb {
     background-color: #1abc9c;
     border-radius: 5px;
     cursor: pointer;
     margin-bottom: 20px
   }

   .product-container::-webkit-scrollbar-track {
     background-color: #f0f0f0;
   }


   #text{
    width: 100%;
    margin-top: -20px;
    border-radius: 25px;
    resize: vertical;
    margin-left: -10px
   }

   .text {
       margin-bottom: 5px
   }

   #text2{
     width: 100%;
     margin-bottom: -25px
   }

  .logo-container .line {
     display: none;
   }

   .logo-container p {
      display: none;
    }

   #about1{
    text-align: justify;
    margin-top: 15px;
    color: #fff;
    line-height: 2;
    font-size: 16px
   }

   .heading__row {
   width: 100%;
   margin-top: 0;
   display: flex;
   flex-direction: column-reverse;
 }


 #text{
   margin-top: -30px;
 }

 #serv4{
   height: 250px
 }

   .column9, .column2, .column3 {
     width: 100%;
     margin-top: 0;
   }

   .column7 {
     width: 100%;
     margin-top: 0;
   }

   .column1 {
     width: 100%;
     margin-top: 0;
   }

   .column8 {
     text-align: center;
     width: 30%;
     margin-top: 0;
   }

   #about1{
     text-align: justify;
     margin-top: 15px;
     color: black;
   }

   .column6 {
     width: 100%;
     margin-top: 0;
   }

  .column5 {
    width: 100%;
    margin-top: 0;
  }


   #menu-btn {
     display: inline-block;
     font-size: 3rem;
   }
   .typewrite {
     font-size: 6vw;
   }
   .header .navbar {
     position: absolute;
     top: 99%;
     left: 0;
     right: 0;
     background: #222;
     -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
             clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   .header .navbar.active {
     -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
             clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   .header .navbar a {
     margin: 2rem;
     font-size: 2rem;
     display: block;
   }


   .form {
     grid-template-columns: 1fr;
   }

   .contact-info:before {
     bottom: initial;
     top: -75px;
     right: 65px;
     transform: scale(0.95);
   }

   .contact-form:before {
     top: -13px;
     left: initial;
     right: 70px;
   }

   .square {
     transform: translate(140%, 43%);
     height: 350px;
   }

   .big-circle {
     bottom: 75%;
     transform: scale(0.9) translate(-40%, 30%);
     right: 50%;
   }

   .contact__text {
     margin: 1rem 0 1.5rem 0;
   }

   .social-media {
     padding: 1.8rem 0 0 0;
   }

   .input {
   width: 100%;
   outline: none;
   border: 2px solid #fafafa;
   background: none;
   padding: 1.5rem 1.2rem;
   color: #fff;
   font-weight: 500;
   margin: 3px 0px;
   font-size: 1.8rem;
   letter-spacing: 0.5px;
   border-radius: 25px;
   transition: 0.3s;
   }

   .input-contact__container label {
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
   padding: 0 0.4rem;
   color: #fafafa;
   font-size: 2rem;
   font-weight: 400;
   pointer-events: none;
   z-index: 1000;
   transition: 0.5s;
   }

   .input-contact__container.focus label {
   top: 3px;
   background: #1abc9c;
   transform: translateY(-50%);
   left: 25px;
   font-size: 1.8rem;
   }

   .information {
   display: flex;
   color: #555;
   margin: 1.5rem 0;
   font-weight: normal;
   align-items: center;
   font-size: 2rem;
   }

   .contact__btn {
   padding: 1.3rem 2.5rem;
   background-color: #fff;
   border: 2px solid #fafafa;
   font-size: 2.3rem;
   color: #1abc9c;
   line-height: 1;
   border-radius: 25px;
   outline: none;
   cursor: pointer;
   transition: 0.3s;
   margin: 0;
   }

   .contact__btn:hover {
   background-color: transparent;
   color: #fff;
   }

   /*ToTop*/

   #goto-topJS {
     position: fixed;
     bottom: 70px;
     right: 30px;
     z-index: 1000000;
     border: none;
     outline: none;
     cursor: pointer;
     padding: 15px;
     background-color: transparent;
     background-repeat: no-repeat;
     border: none;
   }

   /*ToTop*/


   /* Style inputs */
   input[class=contact2], select, textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 25px;
    border-color: #1abc9c;
    background-color: transparent;
    margin-top: 6px;
    margin-bottom: 10px;
    resize: vertical;
    color: #1abc9c;
   }


   /* Style inputs */
    input[id=uploadsheet]{
     width: 100%;
     height: 40%;
     border: 2px dashed #ccc;
     border-radius: 25px;
     border-color: #1abc9c;
     color: #1abc9c;
     margin-top: 50px
    }

    #all__form .logo-container .text {
       margin-top: -60px
     }

    #all__form{
      margin: -20px;
    }

  #all__form__owner{
  margin: -20px;
}

#all__form__owner #uploadsheet{
  margin-top: -10px
}


.column .uploadsheet{
  margin-top: -10px
}


    .footer .box-container .box {
      text-align: left;
      padding: 1rem 0;
      font-weight: normal;
    }

    .footer .box-container .box h3 {
      font-size: 3rem;
      color: #1abc9c;
      padding: 1rem 0;
      font-weight: normal;
    }


    .footer #box a{
      padding-right: .5rem;
      color: #fff;
      font-weight: normal;
      font-size: 2rem
    }


    #sub-form{
      text-align: left;
      margin-left: -20px
    }


    .portfolio {
      width: 100%;
    }


  .contact__container{
    z-index: -99
  }


    .form {
      grid-template-columns: 1fr;
    }

    .contact-info:before {
      bottom: initial;
      top: -75px;
      right: 65px;
      transform: scale(0.95);
    }

    .contact-form:before {
      top: -13px;
      left: initial;
      right: 70px;
    }

    .square {
      transform: translate(140%, 43%);
      height: 350px;
    }

    .big-circle {
      bottom: 75%;
      transform: scale(0.9) translate(-40%, 30%);
      right: 50%;
    }

    .contact__text {
      margin: 1rem 0 1.5rem 0;
    }

    .social-media {
      padding: 1.8rem 0 0 0;
    }


}