:root{
  ---maincolor:#00008b;
  ---maincolor2:#ffd700;
  ---color1:#f0f1f5;
  ---color2:#000000;
  ---color3: #f0f1f5a5;
  ---background:linear-gradient(rgba(0, 0, 0, 0.645),rgba(0, 0, 0, 0.612));

  ---largfontS:40px;
  ---midfontS:30px;
  ---smalfontS:20px;
  ---mqlargfS:36px;
  ---mqmidfS:18px;
  ---mqsmalfS:16px;
}



*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-family: 'Nunito Sans',sans-serif;
  /* background-color:var(---color2); */
  color: #f0f1f5;
  font-size: var(---mqsmalfS);
  scroll-behavior: smooth;
}
body{
  background-color: var(---color2);
}

    /* LOADING ANIMATION */

.loader{
  width: 100%;
  height: 100%;
  background-color: var(---color2);
  position: fixed;
  z-index: 100;
}
.loader img{
  position: relative;
  top: 50%;
  left: 50%;
}

    /* ENDS */

    /* NAVIGATION */

nav{
  position: fixed;
  width: 100%;
  padding: 20px 0;
  display: grid;
  background-color:var(---color2);
  grid-template-columns: 1fr 1fr;
  z-index: 100;
}
nav .logo{
  margin: 0 20px;
}
nav .bars{
   display: none; 
}
nav ul{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
ul a{
  transition: all 1s ease-in-out;
}
ul a.active{
  text-decoration: underline ;
  text-decoration-color: var(---maincolor);
  text-decoration-thickness:3px;
  text-underline-offset:10px ;
}
ul a:hover{
  text-decoration: underline ;
  text-decoration-color:var(---maincolor);
  text-decoration-thickness:3px;
  text-underline-offset:10px ;
}


      /* HERO-SECTION */

.hero-section{
  width: 100%;
  padding:100px 0;

}
.hero_section-cont{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero_section-cont .hero-text{
  width: 100%;
}
.hero-text h4{
  color:var(---color1);
}
.hero-text h1{
  font-size: 40px;
  color: var(---color1);
}
.hero-text span{
  font-size: 40px;
  color: var(---maincolor);
}
.hero-text h6{
  font-size: var(---smalfontS);
  color:var(---color1);
}
.hero-text h6 span{
  font-size: var(---smalfontS);
}
.hero_section-cont .img{
  width: 100%;
}
.img img{
  width: 100%;
}

.hero-text .icons{
  display: flex;
  flex-direction: row;
}
.icons i{
  padding: 20px;
  margin: 20px 10px;
  font-size: 20px;
  border-radius: 100px;
  border:2px solid var(---color1);
  background-color:transparent;
  cursor: pointer;
  transition: all 1s ease-in-out;
}

.icons i:hover{
  background-color: var(---maincolor);
}
.hero-text .buttons button{
  padding: 10px;
  margin: 10px;
  border: none;
  background-color:  var(---maincolor);
  cursor: pointer;
}


.buttons button:hover{
  background-color:var(---color1);
  color: var(---color2);
  transition: all 1s ease-in-out;
}

     /* ABOUT SECTION */
         

.about{
  width: 100%;
  margin: 300px auto;
}
.smal-header{
  font-size: 10px;
  color:  var(---maincolor2);
  display: flex;
  text-align: center;
  justify-content: center;
  place-items: center;
}
.about h1{
  text-align: center;
  text-transform: uppercase;
  color:  var(---maincolor);
  font-size:var(---largfontS);
}
.about-cont{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.about-cont .about-img{
  width: 100%;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 2s ease-in-out;
}
.about-img img{
  width: 100%;
}
.about-cont .about-text{
  width: 100%;
  margin: 20px 0;
  display:flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(100%);
  opacity: 0;
  transition: all 2s ease-in-out;
}
.about-text h1{
  text-align: left;
  font-size: var(---midfontS);
}

.abt-btn .btn{
  background-color: var(---color2);
  border:4px solid var(---color1);
  padding: 10px;
  font-size: var(---mqsmalfontS);
  border-radius: 20px;
  transition: all 1s ease-in-out;
  cursor: pointer;

}
.btn.active-btn{
  background-color: var(---maincolor);
}

.btn:hover{
  background-color: var(---maincolor);
}
.more-about{
  width: 100%;
}
.more-about .Education,
.Expertise{
  margin: 20px 0;
}
.more-about ul li{
 list-style: disc;
  margin: 10px 0;
}

.fade .about-text{
transform: translateX(0);
opacity: 1;
}
.fade .about-img{
  transform: translateX(0);
  opacity: 1;
}

   /* JAVASCRIPT ABOUT-BOTTON FUNCTIONALITY */

.Education ul{
  display: none;
  transition: all 2s ease-in-out;
}
.reveal .Expertise{
  display: none;

}
.reveal .active-btn{
  background-color:var(---color2);
}
.reveal .btn#Education{
  background-color: var(---maincolor);
}
.reveal .Education ul{
  display: block;
}
  /* ENDS HERE */



        /* SKILLS */
.skills{
  width: 100%;
  margin: auto;
}
.skills h1{
  text-align: center;
  font-size: var(---largfontS);
  color: var(---maincolor);
}
.skills .skills-cont{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
}
.skills-cont .skill{
  width: 50%;
 margin: 20px 0;
}
.skill p{
  font-size: var(---midfontS);
}
.skill .level{
  height: 1vh;
}

.skill .level#html{
  width: 100%;
  background-color: var(---maincolor2);
}
.skill .level#css{
  width: 80%;
  background-color: var(---maincolor2);
}
.skill .level#java{
  width: 50%;
  background-color: var(---maincolor2);
}



     /* SERVICES */
.services{
  width: 100%;
  margin: 300px auto;
}     
.services h1{
  text-align: center;
  margin: 40px 0;
  color:  var(---maincolor);
  font-size:var(---largfontS);
  text-transform: uppercase;
}
.services-container{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}
.services-container .services-cont{
 width: 80%;
 display: grid;
 justify-content: center;
 place-items: center;
 margin: 40px 0;
 padding: 20px;
 border-radius:20px ;
 box-shadow: 2px 2px 2px var(---maincolor);
 cursor: pointer;
}
.services-cont:hover{
  box-shadow:10px 10px 10px 10px var(---maincolor);
}
.services-cont h1{
  font-size: var(---midfontS);
  color: var(---color1);
}
.services-cont i{
  font-size: var(---midfontS);
  padding: 30px;
  border-radius: 100px;
  background-color: var(---maincolor);
}
.services-cont p{
  text-align: center;
}
.fade-in.services-cont{
  opacity: 0;
  transform: translateY(100%);
  transition: all 2s ease-in-out;
}
.fade.services-cont{
  transform: translateY(0);
  opacity: 1;
}

    /* PORTFOLIO */

.portfolio{
  width: 100%;
  margin:300px auto;
}    
.portfolio h1{
  text-align: center;
  text-transform: uppercase;
  margin: 40px 0;
  font-size:var(---largfontS);
  color: var(---maincolor);
}
.portfolio-cont{
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(---maincolor);
}

      /* FIRST GRID */
 
.portfolio-cont .first-grid{
  opacity: 0;
  width: 100%;
  height: 100vh;
  margin: 10px 20px;
  transition: all 2s ease-in-out;
}
.first-grid img{
  width: 90%;
  height: 50vh;
  border-radius: 20px;
  /* box-shadow: 3px 4px 10px 3px var(---color1); */
}

        /*IMAGE 1*/
 
.first-grid .img1{
  position: relative;
  cursor: pointer;
}
.first-grid .img1 .portfolio-text{
 position: absolute;
 top:0;
 left: 0;
 opacity: 0;
 width:0;
 height: 50vh;
 display: grid;
 border-radius: 20px;
 background:var(---background) ;
 transition: all 2s ease;
}
.portfolio-text p{
 align-content: center;
 text-align: center;
 font-size: var(---midfontS);
 opacity: 0;
 transition: all 2s ease-in-out 2s;
}
.portfolio-text span{
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(---maincolor);
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}

.first-grid .img1:hover .portfolio-text{
  opacity: 1;
  width: 90%;
}
.img1:hover .portfolio-text p{
  opacity: 1;
}

  
     /* IMAGE 2 */

.first-grid .img2{
  position: relative;
  margin: 40px 0;
  cursor: pointer;
}
.img2 img{
  height: 40vh;
}
.first-grid .img2 .portfolio-text{
 position: absolute;
 top:0;
 left: 0;
 opacity: 0;
 width:0;
 height: 40vh;
 display: grid;
 border-radius: 20px;
 background:var(---background) ;
 transition: all 2s ease;
}
.first-grid .img2:hover .portfolio-text{
  opacity: 1;
  width: 90%;
}
.img2:hover .portfolio-text p{
  opacity: 1;
}
       /* SECOND GRID*/

.portfolio-cont .sec-grid{
  opacity: 0;
  width: 100%;
  height: 100vh;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr 1fr;
  transition: all 2s ease-in-out;
}
.sec-grid img{
  width: 90%;
  height: 40vh;
  margin: 10px;
  border-radius: 20px;
  /* box-shadow: 3px 4px 10px 3px var(---color1); */
}

      /* IMAGE 3 */

.sec-grid .img3{
  position: relative;
  cursor: pointer;
}
.sec-grid .img3 .portfolio-text{
  position: absolute;
  top:0;
  left: 0;
  width: 0%;
  top: 0;
  margin: 10px;
  height: 40vh;
  display: grid;
  border-radius: 20px;
  opacity: 0;
  background: var(---background);
  transition: all 2s ease;
}
.img3:hover .portfolio-text{
 opacity: 1; 
 width:90% ;
}
.img3:hover .portfolio-text p{
  opacity: 1;
}

.fade .first-grid{
  opacity: 1;
}
.fade .sec-grid{
  opacity: 1;
}

    /* IMAGE 4 */

.sec-grid .img4{
  position: relative;
  cursor: pointer;
}
.sec-grid .img4 .portfolio-text{
  position: absolute;
  top:0;
  left: 0;
  width: 0;
  margin: 10px;
  height: 40vh;
  display: grid;
  border-radius: 20px;
  opacity: 0;
  background: var(---background);
  transition: all 3s ease;
}
.img4:hover .portfolio-text{
  opacity: 1;
  width: 90%;
}
.img4:hover .portfolio-text p{
  opacity: 1;
}


  /* REVIEWS */

.testimony{
  width: 100%;
  margin:300px auto;
}
.testimony h1{
  margin: 40px 0;
  font-size: var(---largfontS);
  color: var(---maincolor);
  text-align: center;
  text-transform: uppercase;
}
.swiper{
  width: 80%;
  height: fit-content;

}
.swiper-slide{
  padding: 70px 0;
}
.swiper-slide .review{
  width: 100%;
  display: grid;
  justify-content: center;
  place-items: center;
}
.review img{
  width: 23%;
  height: 23vh;
  border-radius:50%;
}
.review h1{
  font-size: var(---midfontS);
  color: var(---color1);
  margin: 10px 0;
}
.review p{
  width: 50%;
  text-align: center;
}

   /* CONTACT SECTION */

.contact{
  width: 100%;
  margin:100px auto;
}
.contact h1{
  font-size: var(---largfontS);
  color: var(---maincolor);
  text-align: center;
  margin: 40px 0;
  text-transform: uppercase;
}
.contact form{
  width: 80%;
  margin: auto;
  display: grid;
}
.contact form .form-cont{
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
form input{
  width: 80%;
  padding: 15px;
  margin: 10px 0;
  border: none;
  border-radius:40px ;
  background-color: var(---color3);
  cursor: pointer;
}
input::placeholder{
  color:var(---color1);
}
form textarea{
 width: 90%;
 border-radius: 10px;
 background-color: var(---color3);
 cursor: pointer;
} 
textarea::placeholder{
 color: var(---color1);
}
form button{
  justify-self: center;
  width: 10%;
  margin: 10px 0;
  padding: 10px 0;
  border-radius: 5px;
  font-size: var(---smalfontS);
  color: var(---color1);
  border: none;
  background-color: var(---maincolor);
  cursor: pointer;
  transition: all 1s ease-in-out;
}
form button:hover{
  background-color: var(---color1);
  color: var(---color2);
}


  /* FOOTER */

footer{
  width: 100%;
  margin: auto;
  padding: 10px 0;
  background-color: var(---maincolor);
}
footer .info{
  display: grid;
  justify-content: center;
  place-items: center;
}
footer .info .footer-icons i{
 padding: 10px;
 margin: 10px 0;
 border-radius: 100px;
 background-color: var(---color2);
 cursor: pointer;
}


  /* ANGLE UP BOTTON */

.angle-up{
  position:fixed;
  bottom: 0;
  right: 0;
  margin: 30px 10px;
  display: none;
}
.angle-up i{
  font-size: var(---midfontS);
  padding: 20px;
  border-radius: 100px;
  background-color: var(---maincolor);
  cursor: pointer;
}
.show-angle{
  display: block;
}



   /*MOBLE PHONES */

@media  (min-width:300px) and (max-width:767px) {
     /* NAVIGATION */

nav{
  position: fixed;
  width: 100%;
  padding: 20px 0;
  display: grid;
  background-color:var(---color2);
  grid-template-columns: 1fr 1fr;
  z-index: 1;
}
nav .logo{
  margin: 0 20px;
}
    
      /* HAMBURGER FUNCTIONALITY  */

nav .bars{
  display: block;
}

.bars i#bar{
  position: absolute;
  top: 0;
  right: 10%;
  margin: 10px;
  font-size: var(---midfontS);
  color: var(---color1);
}
.bars #times{
  display: none;
  position: absolute;
  top: 0;
  right: 10%;
  margin: 10px;
  font-size: var(---midfontS);
  color: var(---color1);
}
.show-bar #times{
  display: block;
}
.show-bar #bar{
  display: none;
}

   /* ENDS HERE */

nav ul{
  position: absolute;
  top: 90%;
  left:5%;
  width: 100%;
  height:0;
  overflow: hidden;
  background-color: var(---color2);
  display: flex;
  flex-direction:column ;
  opacity: 0;
  transition: all 2s ease-in-out;
}
ul li{
  margin: 5px 0;
}
ul a{
  transition: all 1s ease-in-out;
  margin: 10px 0;
}
ul a.active{
  text-decoration: underline ;
  text-decoration-color: var(---maincolor);
  text-decoration-thickness:3px;
  text-underline-offset:2px ;
}
ul a:hover{
  text-decoration: underline ;
  text-decoration-color:var(---maincolor);
  text-decoration-thickness:3px;
  text-underline-offset:2px ;
}
.show-ul ul{
  opacity: 1;
  height: 25vh;
}

      /* HERO-SECTION */

.hero-section{
  width: 100%;
  padding:100px 0;

}
.hero_section-cont{
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction:column-reverse;
}
.hero_section-cont .hero-text{
  width: 100%;
  display: grid;
  justify-content: center;
  place-items: center;
}
.hero-text h4{
  color:var(---color1);
  text-align: center;
}
.hero-text h1{
  font-size: 40px;
  color: var(---color1);
  text-align: center;
}
.hero-text span{
  font-size: 40px;
  color: var(---maincolor);
}
.hero-text h6{
  font-size: var(---smalfontS);
  color:var(---color1);
}
.hero-text h6 span{
  font-size: var(---smalfontS);
}
.hero_section-cont .img{
  width: 100%;
}
.img img{
  width: 100%;
}

.hero-text .icons{
  display: flex;
  flex-direction: row;
}
.icons i{
  padding: 20px;
  margin: 20px 10px;
  font-size: 20px;
  border-radius: 100px;
  border:2px solid var(---color1);
  background-color:transparent;
  cursor: pointer;
  transition: all 1s ease-in-out;
}

.icons i:hover{
  background-color: var(---maincolor);
}
.hero-text .buttons button{
  padding: 10px;
  margin: 10px;
  border: none;
  background-color:  var(---maincolor);
  cursor: pointer;
}


.buttons button:hover{
  background-color:var(---color1);
  color: var(---color2);
  transition: all 1s ease-in-out;
}

     /* ABOUT SECTION */
         

.about{
  width: 100%;
  margin: 300px auto;
}
.smal-header{
  font-size: 10px;
  color:  var(---maincolor2);
  display: flex;
  text-align: center;
  justify-content: center;
  place-items: center;
}
.about h1{
  text-align: center;
  text-transform: uppercase;
  color:  var(---maincolor);
  font-size:var(---largfontS);
}
.about-cont{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr ;
  overflow: hidden;
}
.about-cont .about-img{
  width: 100%;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 2s ease-in-out;
}
.about-img img{
  width: 100%;
}
.about-cont .about-text{
  width: 100%;
  margin: 20px 0;
  display:flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(100%);
  opacity: 0;
  transition: all 2s ease-in-out;
}
.about-text h1{
  text-align: left;
  font-size: var(---midfontS);
}

.abt-btn .btn{
  background-color: var(---color2);
  border:4px solid var(---color1);
  padding: 10px;
  font-size: var(---mqsmalfontS);
  border-radius: 20px;
  transition: all 1s ease-in-out;
  cursor: pointer;
}
.btn.active-btn{
  background-color: var(---maincolor);
}

.btn:hover{
  background-color: var(---maincolor);
}


.more-about{
  width: 100%;
}
.more-about .Education,
.Expertise{
  margin: 20px 0;
}
.more-about ul li{
 list-style: disc;
  margin: 10px 0;
}

.fade .about-text{
transform: translateX(0);
opacity: 1;
}
.fade .about-img{
  transform: translateX(0);
  opacity: 1;
}

   /* JAVASCRIPT ABOUT-BOTTON FUNCTIONALITY */

.Education ul{
  display: none;
  transition: all 2s ease-in-out;
}
.reveal .Expertise{
  display: none;

}
.reveal .active-btn{
  background-color:var(---color2);
}
.reveal .btn#Education{
  background-color: var(---maincolor);
}
.reveal .Education ul{
  display: block;
}
  /* ENDS HERE */

        /* SKILLS */
.skills{
  width: 100%;
  margin: auto;
}
.skills .skills-cont{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
}
.skills-cont .skill{
  width: 100%;
  margin: 20px 0;
}
.skill p{
  font-size: var(---mqmidfontS);
}
.skill .level{
  height: 1vh;
  font-size: var(---smalfontS);
}
.skill .level#html{
  width: 100%;
  background-color: var(---maincolor2);
}
.skill .level#css{
  width: 70%;
  background-color: var(---maincolor2);
}
.skill .level#java{
  width:50% ;
  background-color: var(---maincolor2);
}



     /* SERVICES */
.services{
  width: 100%;
  margin: 300px auto;
}     
.services h1{
  text-align: center;
  margin: 40px 0;
  color:  var(---maincolor);
  font-size:var(---largfontS);
  text-transform: uppercase;
}
.services-container{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;

}
.services-container .services-cont{
 width: 80%;
 display: grid;
 justify-content: center;
 place-items: center;
 margin: 40px 0;
 padding: 20px;
 border-radius:20px ;
 box-shadow: 2px 2px 2px var(---maincolor);
 cursor: pointer;
}
.services-cont:hover{
  box-shadow:10px 10px 10px 10px var(---maincolor);
}
.services-cont h1{
  font-size: var(---midfontS);
  color: var(---color1);
}
.services-cont i{
  font-size: var(---midfontS);
  padding: 30px;
  border-radius: 100px;
  background-color: var(---maincolor);
}
.services-cont p{
  text-align: center;
}

.fade .services-cont{
  transform: translateY(0);
  opacity: 1;
}

    /* PORTFOLIO */

.portfolio{
  width: 100%;
  margin:300px auto;
}    
.portfolio h1{
  text-align: center;
  text-transform: uppercase;
  margin: 40px 0;
  font-size:var(---largfontS);
  color: var(---maincolor);
}
.portfolio-cont{
  opacity: 0;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  background-color: var(---maincolor);
  transition: all 2s ease-in-out;
}

      /* FIRST GRID */
 
.portfolio-cont .first-grid{
  width: 100%;
  height: 110vh;
  margin: 10px 0;
}
.first-grid img{
  width: 90%;
  height: 50vh;
  margin: 20px;
  border-radius: 20px;
  /* box-shadow: 3px 4px 10px 3px var(---color1); */
}

        /*IMAGE 1*/
 
.first-grid .img1{
  position: relative;
  cursor: pointer;
}
.first-grid .img1 .portfolio-text{
 position: absolute;
 top:0;
 left: 0;
 opacity: 0;
 width:0;
 height: 50vh;
 margin: 20px;
 display: grid;
 border-radius: 20px;
 background:var(---background) ;
 transition: all 2s ease;
}
.portfolio-text p{
 align-content: center;
 text-align: center;
 font-size: var(---midfontS);
 opacity: 0;
 transition: all 2s ease-in-out 2s;
}
.portfolio-text span{
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(---maincolor);
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}

.first-grid .img1:hover .portfolio-text{
  opacity: 1;
  width: 90%;
}
.img1:hover .portfolio-text p{
  opacity: 1;
}
  
     /* IMAGE 2 */

.first-grid .img2{
  position: relative;
  margin: 40px 0;
  cursor: pointer;
}
.img2 img{
  height: 40vh;
}
.first-grid .img2 .portfolio-text{
 position: absolute;
 top:0;
 left: 0;
 opacity: 0;
 width:0;
 height: 40vh;
 margin: 20px;
 display: grid;
 border-radius: 20px;
 background:var(---background) ;
 transition: all 2s ease;
}
.first-grid .img2:hover .portfolio-text{
  opacity: 1;
  width: 90%;
}
.img2:hover .portfolio-text p{
  opacity: 1;
}
       /* SECOND GRID*/

.portfolio-cont .sec-grid{
  width: 100%;
  height: 100vh;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.sec-grid img{
  width: 90%;
  height: 40vh;
  margin:20px;
  border-radius: 20px;
  /* box-shadow: 3px 4px 10px 3px var(---color1); */
}

      /* IMAGE 3 */

.sec-grid .img3{
  position: relative;
  cursor: pointer;
}
.sec-grid .img3 .portfolio-text{
  position: absolute;
  top:0;
  left: 0;
  width: 0%;
  top: 0;
  margin: 20px;
  height: 40vh;
  display: grid;
  border-radius: 20px;
  opacity: 0;
  background: var(---background);
  transition: all 2s ease;
}
.img3:hover .portfolio-text{
 opacity: 1; 
 width:90% ;
}
.img3:hover .portfolio-text p{
  opacity: 1;
}

.fade{
  opacity: 1;
}

    /* IMAGE 4 */

.sec-grid .img4{
  position: relative;
  cursor: pointer;
}
.sec-grid .img4 .portfolio-text{
  position: absolute;
  top:0;
  left: 0;
  width: 0;
  margin: 20px;
  height: 40vh;
  display: grid;
  border-radius: 20px;
  opacity: 0;
  background: var(---background);
  transition: all 3s ease;
}
.img4:hover .portfolio-text{
  opacity: 1;
  width: 90%;
}
.img4:hover .portfolio-text p{
  opacity: 1;
}

    /* REVIEWS */
.swiper-slide .review{
  width: 100%;
  display: grid;
  justify-content: center;
  place-items: center;
}

.review img{
  width: 25%;
  height: 10vh;
  border-radius:50%;
}
}
.review h1{
  font-size: var(---mqmidfontS);
  color: var(---color1);
  margin: 10px 0;
}
.review p{
  width: 100%;
  text-align: center;
  font-size: var(---mqsmalfontS);
}

   /* CONTACT SECTION */

.contact{
  width: 100%;
  margin:100px auto;
}
.contact h1{
  font-size: var(---largfontS);
  color: var(---maincolor);
  text-align: center;
  margin: 40px 0;
  text-transform: uppercase;
}
.contact form{
  width: 80%;
  margin: auto;
}
.contact form .form-cont{
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
}
form input{
  width: 90%;
  padding: 15px;
  margin:10px 0;
  border: none;
  border-radius:40px ;
  background-color: var(---color3);
  cursor: pointer;
}
input::placeholder{
  color:var(---color1);
}
form textarea{
 border-radius: 10px;
 padding: 10px;
 background-color: var(---color3);
 cursor: pointer;
} 
textarea::placeholder{
 color: var(---color1);
}
form button{
  width: 50%;
}


  /* FOOTER */

footer{
  width: 100%;
  margin: auto;
  padding: 10px 0;
  background-color: var(---maincolor);
}
footer .info{
  display: grid;
  justify-content: center;
  place-items: center;
}
footer .info .footer-icons i{
 padding: 10px;
 margin: 10px 0;
 border-radius: 100px;
 background-color: var(---color2);
 cursor: pointer;
}


  /* ANGLE UP BOTTON */

.angle-up{
  position:fixed;
  bottom: 0;
  right:5%;
  margin: 100px 0;
  display: none;
}
.angle-up i{
  font-size: var(---midfontS);
  padding: 20px;
  border-radius: 100px;
  background-color: var(---maincolor);
  cursor: pointer;
}
.show-angle{
  display: block;
}
 
}

  

   /* TABLETS */