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

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

:active,
:hover,
:focus {
  outline: 0 !important;
  outline-offset: 0;
}

a,
a:hover {
  text-decoration: none;
}
ul,
ol {
  margin: 0;
  padding: 0;
}

/*------------------------ variables-------------------------- */
:root {
  /* Background Color */
  --primary-color: #fd4766;
  --secondary-color: #0e1525;
  --bg-dark-blue: #091020;
  --bg-white: #fff;
  --gray-color: #c6c9d8bf;
  --gradient-color: linear-gradient(
    -224deg,
    var(--primary-color) 0,
    #337dff 100%
  );
  --gradient-text: linear-gradient(
    120deg,
    #1c99fe 20.69%,
    #7644ff 50.19%,
    var(--primary-color) 79.69%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--primary-color)', endColorstr='var(--secondary-color)', GradientType=1);

  /* Text Color */
  --primary-font: "Poppins", sans-serif;
  --primary-text: #fd4766;
  --text-gray: #c6c9d8bf;
  --text-white: #fff;
}
/* general  */
h1 {
  font-size: 4rem;
  font-weight: 700;
  color: var(--primary-text);
}
h2 {
  font-size: 3.5rem;
  color: var(--primary-color);
}
h3 {
  font-size: 3rem;
  color: var(--primary-color);
}
h4 {
  font-size: 2.5rem;
  color: white;
}
h5 {
  font-size: 2rem;
  color: white;
}
h6 {
  font-size: 1.8rem;
  color: var(--text-white);
}
p {
  text-align: justify;
  color: white;
  font-size: 1.2rem;
}
.main-btn {
  width: 110px;
  padding: 5px 15px;
  border-radius: 20px;
  border: none;
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  position: relative;
  top: 10px;
}
.main-btn a {
  color: white;
}
.main-btn a:hover {
  color: var(--primary-text);
}
.cv-btn {
  width: 163px;
  margin-left: 10px;
}
.main-btn:hover {
  border: 2px solid var(--primary-color);
  background-color: var(--bg-white);
  color: var(--primary-text);
  cursor: pointer;
  transition: all 0.3s;
}

/* header design  */
.navbar-toggler-icon {
  color: white;
  position: relative;
  top: 7px;
  font-size: 1.7rem;
}

.navigation-wrap {
  background-color: var(--bg-dark-blue);
  border: unset;
  outline: unset;
  position: fixed;
  top: 0px;
  width: 100%;
  /* height: 66px; */
  z-index: 1000;
}
.navbar-toggler:focus {
  outline: unset;
  border: unset;
  box-shadow: none;
}
.navbar-collapse {
  background-color: var(--bg-dark-blue);
  z-index: 999;
}
.nav-link {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-text);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--text-white);
}

/* top banner */
.top-banner {
  background-color: var(--bg-dark-blue);
}
.auto-type {
  color: var(--primary-color);
}
.myname {
  padding-top: 150px;
  /* padding-left: 50px; */
}
.myphoto {
  padding: 50px;
}
.myphoto img {
  /* background: url("../images/myphoto.png");
    background-size: cover; */
  width: 300px;
}

/* about section */
.about-section {
  background-color: var(--bg-dark-blue);
  padding-block: 15px;
}
/* abut progress bar  */
.skillbar .progress {
  height: 5px;
}
.progress-bar {
  background-color: var(--primary-color);
}

/* projects section  */
.projects-section {
  background-color: var(--bg-dark-blue);
  padding-bottom: 50px;
}

.card {
  height: 100%;
  min-height: 350px;
  width: 100%;
  background-color: white;
}

.card1 {
  background: url(../images/p1.jpg);
  background-size: cover;
  background-position: top center;
}
.card2 {
  background: url(../images/p2.jpg);
  background-size: cover;
  background-position: top center;
  transition: all 4s ease-in-out;
}
.card3 {
  background: url(../images/p3.jpg);
  background-size: cover;
  background-position: top center;
}

/* counter section  */
#counter {
  background-color: var(--bg-dark-blue);
}
#counter h4 {
  color: var(--text-white) !important;
  margin-bottom: 0;
  text-align: center;
}
#counter p {
  color: var(--primary-color);
  font-size: 2rem;
  margin-bottom: 10px;
  text-align: center;
}

/* services section  */
.services-section {
  background-color: var(--bg-dark-blue);
}
.service {
  min-height: 300px;

  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  /* justify-content: flex-start; */
  padding: 20px;
}
.service .icon {
  font-size: 2rem;
  color: white;
  /* font-weight: 500; */
  margin-right: 10px;
}
.service h6 {
  text-align: left;
  margin-bottom: 15px;
  color: var(--primary-color);
}
.service p {
  text-align: left;
}
/* contact section  */
.contact-section {
  background-color: var(--bg-dark-blue);
  padding-top: 90px;
}
.form-label {
  font-size: 1rem;
  color: var(--bg-white);
}
.submit-btn {
  margin-block: 15px;
  top: 0px;
}
.social-icon {
  margin-right: 10px;
  color: var(--primary-color);
}
.social-link {
  position: relative;
}
.social-link:hover {
  left: 8px;
}

.rights {
  background-color: var(--bg-dark-blue);
  text-align: center;
}
.pink-text {
  color: var(--primary-color);
}
.pink-text:hover {
  color: var(--primary-color);
}
/* Start https://www.cursors-4u.com */
* {
  cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1151.ani),
    url(https://ani.cursors-4u.net/cursors/cur-13/cur1151.png), auto !important;
} /* End https://www.cursors-4u.com */

.whatsapp {
  width: 60px;
  height: 60px;
  background-color: #25d366;
  position: fixed;
  top: 85%;
  left: 93%;
  z-index: 10000;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: all 0.4s;
}
.fa-whatsapp {
  font-size: 40px;
  color: white;
}
.whatsapp:hover {
  background-color: #108f29;
}