@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Sacramento&display=swap'); 

html {
  scroll-behavior:smooth;
}

* {
  padding:0;
  margin:0;
}

body {
  height:100%;
  width:100%;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

/* Start of Navbar */

.navbar {
  display:flex;
  justify-content: space-between;
  padding: 1em;
  max-width:100%;
  margin:auto;
  align-items: center;
  background-color:white;
}

.nav-left h1 a {
  text-decoration:none;
}

.navbar .nav-right ul li{
  list-style-type:none;
  font-weight:bolder;
  font-size:1.3em;
  color:#000019;
}

.navbar i {
  font-size: 2.4em;
  display:none;
}

.nav-right a {
  text-decoration:none;
  color:#000019;
  padding-left:1.2em;
}

.navbar .nav-right ul li a:hover {
  color:coral;
  text-decoration: underline;
}

.nav-right ul {
  display:flex;
  justify-content: space-evenly;
  align-items:center;
}

.nav-left h1 {
  font-family: 'Sacramento', cursive;
}

.nav-left a{
  color:coral;
  font-size:1.5em;
}

.navbar button{
  padding: 0.5em 2em;
  border-radius:0.3em;
  background-color:black;
  color:white;
  font-size: 1em;
  border:none;
  opacity:0.6;
}

.burgermenu {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center; 
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  width: 10em;
  height: 2em;
  border-radius:0.3em;
  cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
/* .flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
} */

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding-top:0.5em;
}

/* Style the front side */
.flip-box-front {
  background-color: #b8b8b8;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color:coral;
  color: white;
  transform: rotateY(180deg);
}

/*End of navbar/*

/* Start of body image */

.image-section {
  background-image:url(./Assests/me4.jpeg);
  background-color:#ccc;
  height:86vh;
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
  min-width:100%;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  font-size: 1.5em;
}

.empty {
  width:40%;
}

.title span {
  color:coral;
}

.title {
  display:flex;
  width:30%;
  line-height: 2em;
  justify-content: center;
  align-items:flex-start;
  flex-direction:column;
  font-size:1em;
}

.image-section .title button {
  padding: 0.5em 2em;
  border-radius:0.3em;
  background-color:coral;
  color:white;
  font-size: 1em;
  border:none;
  margin-top:1em;
  opacity:0.6;
  cursor: pointer;
}

.image-section .title button:hover {
  opacity:1;
}

.scrollhide{
  color:coral;
  font-size:1.5em;
  position:fixed;
  right:1.5em;
  bottom:1.5em;
  visibility: hidden;
}

/* end of image section */

/* start of services section */

.services {
  width:80%;
  display:flex;
  flex-direction: column;
  margin:auto;
  text-align: center;
  margin-top:5em;
}

.font {
  font-size:2.5em;
}

.row-display {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 1.5em;
}

.card {
  border:0.1px solid black;
  align-items: center;
  border-radius:1em;
  width:30%;
  margin-top:2.5em;
  background: linear-gradient(to top, coral 50%, white 50%);
  background-size: 100% 200%;
  transition: all 0.8s;
}

.row-display .card i {
  padding:0.5em;
  font-size:3em;
}

.row-display p{
  padding:2em;
}

.row-display {
  font-size:1.2em;  
}

.card:hover {
  background-position:left bottom;
  color:white;
  border:none;
  box-shadow:0 0 1em coral;
}

/* End of services */

/* Start of skills */

.container {
  width:80%;
  margin:auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-top:5em;
}

.display {
  width:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}

.wid {
  width:100%;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
}

.bar {
  background-color: rgb(236, 232, 232);
  width: 60%;
  border-radius: 1em;
  margin:2em;
}

.skill {
  background-color: coral;
  color: white;
  padding: 1em;
  text-align: right;
  border-radius: 1em;
}


.php {
  width: 10%;
}

.css {
  width:50%;
}

.js {
  width:20%;
}

.wp {
  width:5%;
}

.mar {
  margin:5em;
}

.img-size {
  height:70px;
  width:70px;
}

/* End of Skills */

/* Start of Project section */

.projects {
  width:80%;
  margin:auto;
  margin-top:5em;
}

.image-positioning{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  gap: 1em;
}

.image-positioning img{
  width: 100%;
  height: 100%;
}

.img1 { 
  grid-column: 1/3;
  grid-row: 1/3;
}

.img1, .img2, .img3, .img4, .img5, .img6 {
  border:1px solid black;
}

.box1 {
  text-align:center;
  padding:2em;
}

/* End of Projects */

/* Start of Testimonials */

.testimonials {
  width:80%;
  display:flex;
  flex-direction: column;
  margin:auto;
  text-align: center;
  margin-top:5em;
}

.row-display {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 1.5em;
}

.test-cards {
  border:0.1px solid black;
  align-items: center;
  border-radius:1em;
  width:30%;
  margin-top:2.5em;
}

.test-cards img {
  height:6em;
  width:6em;
  /* line-height: 1; */
}

.test-cards i {
  color:gold;
}

/* End of Testimonials */

/* Start of Contact us */

.contact {
  background-image: url(./Assests/background.jpeg);
  background-color:#ccc;
  height:40vh;
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
  width:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  font-size: 1.5em;
  margin-top:5em;
  line-height: 1.5em;
  text-align: center;
}

.contact p {
  width:60%;
}

.container1 {
  width:100%;
}

.contact span {
  color:coral;
}

.contact-info {
  text-align:justify;
  width:50%;
  padding:2em 0;
  line-height: 5em;
  margin:auto;
}

.contact-info h2 {
  border-bottom:2px solid coral;
}


/* End of Contact us  */

/* Start of footer */

.cont {
  background-color:#cbcbcb; 
  width:100%;
  height:40%;
  color:white;
}

.mid {
  display:flex;
  flex-direction:row;
  justify-content: space-around;
  display:flex;
  flex-direction:row;
}

.info {
  width:40%;
  line-height: 2em;
  padding:1.5em;
  text-align: center;
}

.info i {
  color:black;
  font-size:2em;
}

.icon {
  display:flex;
  justify-content: space-around;
  align-items: center;
  margin-top:1.5em;
}

.info span {
  font-family: 'Sacramento', cursive;
  color:coral;
  font-size:2em;  
}

.ma {
  margin-top:1.2em;
}

/* End of footer */

/* Start of Dark Mode Classes */

.dark-mode {
  background-color: #343a40;
  color:white;
}

.dark-mode .navbar{
  background-color:#343a40;
}

.dark-mode .navbar .nav-right ul li a{
  color:white;
}

.dark-mode .flip-box .flip-box-inner {
  transform: rotateY(180deg);
}

.dark-mode .cont {
  background-color:#757678;
}

.dark-mode .card {
  border:1px solid white;
  background: linear-gradient(to top, #757678 50%, #343A40 50%);
  background-size: 100% 200%;
}

.dark-mode .contact {
  background-image:url(./Assests/info-bar.jpg);
}

.dark-mode .image-section {
  background-image:url(./Assests/ghassan.jpg);
}

.dark-mode .image-section .title button{
  background-color:#343A40;
  opacity:0.6;
  border:1px solid white;
}

.dark-mode .card:hover {
  box-shadow:0 0 0.5em white;
  background-position: left bottom; 
}

.dark-mode .image-section .title button:hover {
  opacity:1;
}

/* End of Dark Mode Classes */

/* Media Query */

@media screen and (max-width:1000px){
  body{
    font-size:10px;
  }
  .navbar {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .nav-right ul li {
    padding:1em;
  }
  .image-section {
    font-size:1.5em;
    height:60vh;
    }
  .contact {
    font-size: 1.1em;
  }
  .contact-info {
    width:70%;
  }
  .contact{
    height:30vh;
  }
  .burgermenu {
    width:30%;
    justify-content: center;
    top:1em;
    right:1em;

  }
  .scrollhide {
    font-size:2em;
  }
}

@media screen and (max-width:764px) {
  .nav-right {
    display:none;
  }
  .row-display {
    flex-direction:column;
  }
  .row-display > div{
    width:100%;
  }
  .image-positioning {
    grid-template-columns: 1fr;
    grid-template-rows:repeat(6,1fr);
  }
  .img1 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .navbar i {
    display:flex;
  }
  .navbar {
    flex-direction: row;
    justify-content: space-between;
  }
  .image-section {
    height:45vh;
  }
  .contact {
    height:25vh;
    font-size:1.2em;
  }
  .burgermenu{
    width:40%;
    justify-content: space-between;
  }
  .scrollhide {
    right:1em;
  }
}

@media screen and (max-width:620px) {
  .contact-info h2{
    font-size:1em;
  }
  .font {
    font-size:1.5em;
  }
  .image-section {
    font-size:0.7em;
  }
  .contact {
    font-size: 1em;
  }
  .contact-info {
    width:90%;
  }
  .nav-left h1 {
    font-size:1em;
  }
  .container{
    width:100%;
  }
  .navbar i {
    font-size:1.5em;
  }
}

/* End of Project */