@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Merriweather:wght@700&family=Noto+Serif:wght@800&family=Playfair+Display:wght@500&family=Poppins&family=Roboto+Condensed&family=Roboto+Slab:wght@700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  /* color: white; */
}
:root {
  --body-fonts: "Roboto Slab", serif;
}
#main-div {
  height: 650px;
  background-size: cover;
  /* background: linear-gradient(to right, #02294c 70%, #f75802 30%); */
  background-image: linear-gradient(rgba(28, 28, 28, 0.7), rgba(0, 0, 0, 0.7)),
    url("../teenager-editing-video-on-computer-260nw-2083921174.webp");
  border-bottom: 1px solid white;
  /* background-size: 100% 100%; */
}
#container {
  position: absolute;
  z-index: 9;
  top: 0;
  position: fixed;
}

.navbar-toggler {
  color: white;
}
.navbar-nav .nav-link {
  position: relative;
  font-weight: lighter;
  color: white;
}
.navbar-nav .nav-item .nav-link::after {
  content: "";
  width: 100%;
  background-color: #f75802;
  position: absolute;
  height: 2px;
  left: 0;
  bottom: -2px;
  transform: scale(0);
  transition: 0.4s;
}
.navbar-nav .nav-item .nav-link:hover::after {
  transform: scale(1);
}
.navbar-nav .nav-item .nav-link:hover {
  color: #ffffff;
}

#offcanvasNavbar {
  background-color: #02294c;
  /* width: 500px; */
  border: none;
}
#logo {
  /* font-family: "Montserrat", sans-serif; */
  font-family: "WindSong", cursive;
  font-weight: 400;
  font-style: normal;
  font-style: normal;
  font-weight: 900;
  color: #f75802;
}
#moon-icon {
  border-radius: 50%;
  height: 40px;
  line-height: 40px;
  width: 40px;
  text-align: center;
  margin-top: -7px;
  background-color: #f75802;
}
#moon-icon:hover {
}
#caption {
  margin-top: 18%;
  padding-top: 20px;
  font-size: 34px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}
.auto-type {
  color: #f75802;
}

#img-div {
  width: 70%;
  height: 420px;
  border: 8px solid white;
  box-shadow: 0 0 0rem #ffff, inset 0 0 0.2rem white, 0 0 0.7rem #f75802,
    inset 0 0 0.7rem #f75802, 0 0 0.7rem #f75802, inset 0 0 0.7rem #f75802,
    0 0 0.7rem #f75802, inset 0 0 0.3rem #f75802;
  background: #262525;

  border-radius: 50%;
  position: relative;
  margin-top: 10%;
  margin-left: 20%;
  animation: animate-border 3s infinite ease-in-out;
}

@keyframes animate-border {
  0% {
    /* border: 8px solid #f75802; */
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes moveArrow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.fa-arrow-down {
  animation: moveArrow 1.7s infinite;
}
#my-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transform: translate(-50% -50%);
  border-radius: 50%;
}
#social-icons {
  margin: 20px 20px 20px 0px;
  border: 1px solid #ffffff;
  line-height: 60px;
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  width: 60px;
  height: 60px;
}
#fiver-icon:hover{
  cursor: pointer;
}
#social-icons:hover {
  background-color: white;
  color: black;
  transform: scale(1.2);
  transition: 0.11s;
  cursor: pointer;
}
#cv-btn {
  margin-top: 20px;
  background-color: #f75802;
  /* border: 2px solid #f75802; */
  padding: 8px 18px 8px 18px;
  border-radius: 0px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 4px 4px 0px white;
}
#cv-btn:hover {
  box-shadow: 4px 4px 0px #f75802;
  background-color: white;
  color: #373a3e;
  transition: ease-in-out 0.5s;
}

.cv-btn2 {
  margin-top: 20px;
  background-color: #f75802;
  box-shadow: 4px 4px 0px #0e3360;
  padding: 8px 18px 8px 18px;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cv-btn2:hover {
  box-shadow: 4px 4px 0px #f75802;
  background-color: white;
  color: rgb(0, 0, 0);
  transition: ease-in-out 0.2s;
}
@media (max-width: 991px) {
  #img-div {
    width: 100%;
    margin-top: 60px;
    margin-left: 20px;
  }
}
@media (max-width: 768px) {
  #img-div {
    margin-top: 70px;
  }
  #caption {
    font-size: 28px;
  }
  #scroll-down {
    display: none;
  }
}
@media (max-width: 576px) {
  #img-div {
    width: 50%;
    height: 250px;
    margin: auto;
    margin-top: 0px;
  }
  #offcanvasNavbar {
    width: 240px;
  }
  #main-div {
    /* background: #02294c; */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../image/backgroundimg.jpg");
    background-size: cover;
  }

  #caption {
    font-size: 24px;
  }

  #para {
    font-size: 14px;
  }
}
@media (max-width: 386px) {
  #img-div {
    width: 60%;
    height: 200px;
    margin: auto;
  }
}
@media (max-width: 300px) {
  #img-div {
    width: 60%;
    height: 200px;
    margin: auto;
  }
}
@media (max-width: 280px) {
  #img-div {
    width: 60%;
    height: 170px;
    margin: auto;
  }
  #social-icons {
    margin-right: 10px;
  }
}
@media (max-width: 233px) {
  #img-div {
    width: 70%;
    height: 150px;
    margin: auto;
  }
  #caption {
    font-size: 18px;
  }
}

/* About section CSS start*/

#about-div,
#about-text {
  margin-top: 10%;
  opacity: 0.9;
}
#about-img {
  border-top: 5px solid #f75802;
  border-bottom: 5px solid #000000;
  border-radius: 16px;
  border-top-left-radius: 40%;
  border-bottom-right-radius: 40%;
  box-shadow: rgba(240, 46, 170, 0.4) -5px 5px,
    rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px,
    rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
}

.my-self {
  color: #f75802;
}

@media (max-width: 1440px) {
  #readmore {
    display: none;
  }
}

@media (max-width: 992px) {
  #readmore {
    display: inline;
  }
  #about-text {
    margin-left: 20px;
  }
}

@media (max-width: 768px) {
  #readmore {
    display: none;
  }
  #about-div {
    margin: auto;
    margin-top: 16px;
  }
}

@media (max-width: 992px) {
  #hidePara {
    display: none;
  }
}

@media (max-width: 768px) {
  #hidePara {
    display: inline;
  }
}

@media (max-width: 576px) {
  #about-div {
    display: none;
  }
  #about-text {
    margin-top: 25%;
  }
  #about-text {
    margin-left: 24px;
    margin-right: 24px;
  }
}
@media (max-width: 542px) {
  #about-div {
    display: none;
  }
  #about-text {
    margin-top: 30%;
  }
}
@media (max-width: 400px) {
  #about-text {
    margin-top: 50%;
  }
}
@media (max-width: 388px) {
  #about-text {
    margin-top: 40%;
  }
}
@media (max-width: 290px) {
  #about-text {
    margin-top: 70%;
  }
}
/* About section CSS End*/

/* Services section CSS End*/
#services {
  font-family: var(--body-fonts);
  margin-top: 5%;
}
#web-card,
#web-design-card,
#ui-ux-card,
#seo-card {
  padding: 12px;
  box-shadow: rgba(247, 88, 2, 0.4) 0px 5px, rgba(247, 88, 2, 0.3) 0px 10px,
    rgba(247, 88, 2, 0.2) 0px 15px, rgba(247, 88, 2, 0.1) 0px 20px,
    rgba(240, 46, 170, 0.05) 0px 25px;
}
#web-icon {
  font-weight: bold;
  font-size: 54px;
  margin: auto;
  color: #f75802;
}
#descrption {
  opacity: 0.9;
}

@media (max-width: 992px) {
  #web-design-card,
  #seo-card {
    margin-top: 64px;
  }
}
@media (max-width: 768px) {
  #ui-ux-card {
    margin-top: 64px;
  }
}
@media (max-width: 576px) {
  #ui-ux-card {
    margin-top: 64px;
  }
  #web-design-card,
  #seo-card,
  #web-card,
  #ui-ux-card {
    margin: 24px;
  }
}

/* my work section css */

#f-project {
  border-radius: 8px;
  background-color: #ffffff;
  height: 350px;
}
#my-card {
  padding: 12px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../image/boats-46a.jpg");
  background-size: 100% 100%;
}

@media (max-width: 992px) {
  #my-card {
    margin-bottom: 16px;
  }
}

@media (max-width: 576px) {
  #my-card {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* Achievement section css start */
#achievement {
  font-family: var(--body-fonts);
  margin-top: 5%;
}
.carousel {
  border-radius: 12px;
  overflow: hidden;
  border-bottom: 5px solid #f75802;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.certificate-img {
  height: 300px;
}
#carousel-indicator {
  background-color: #f75802;
  border-radius: 50%;
  height: 28px;
  width: 28px;
  margin: 4px;
}

@media (max-width: 576px) {
  .carousel {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* Achievement section css End */

/* contact us section */
#contact {
  /* width: 100%; */
  background-color: white;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  padding: 30px;
  border-radius: 8px;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0) 75%,
    rgba(255, 129, 213, 0.5)
  );
}
#con-heading {
  font-family: var(--body-fonts);
  margin-top: 5%;
  font-weight: bold;
}
#send-btn {
  width: 98px;
  background-color: #f75802;
  border: none;
  border-radius: 4px;
  padding: 6px;
  color: white;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0) 55%,
    rgba(202, 70, 158, 0.5)
  );
}
#send-btn:hover {
  background-color: #f75802;
}

#address {
  /* width: 100%; */
  height: 100%;
  background-color: white;
  color: rgb(126, 126, 126);
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  border-radius: 8px;
  padding: 30px;
  background-image: linear-gradient(
    -145deg,
    rgba(0, 0, 0, 0) 85%,
    rgba(255, 129, 213, 0.5)
  );
}

#location-icon,
#phone-icon,
#email-icon {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  color: #f75802;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0) 70%,
    rgba(255, 129, 213, 0.5)
  );
}

@media (max-width: 768px) {
  #address {
    margin-top: 18px;
  }
}
@media (max-width: 576px) {
  #address,
  #contact {
    margin: 24px;
  }
  #address {
    margin-top: 0px;
  }
}

/* scroll bar css */
::-webkit-scrollbar {
  display: block;
  width: 6px;
  position: absolute;
}
::-webkit-scrollbar-track {
  background-color: #ffffff;
}
::-webkit-scrollbar-thumb {
  background-color: #f75802;
  border-radius: 50px;
}

/* Footer section css */
#footer-portfo {
  font-family: var(--body-fonts);
}
#footer {
  background-color: #0e3360;
}

/* Scroll up button */
#scroll-icon {
  color: #ffffff;
  padding: 0px 12px 0px 12px;
  border-radius: 50%;
  position: absolute;
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-align: center;
  line-height: 37px;
  display: none;
  cursor: pointer;
  background-color: #f75802;
}
#scroll-icon:hover {
  background-color: #17447b;
  color: white;
}

@keyframes moveArrow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

.fa-arrow-up {
  animation: moveArrow 1s infinite;
}

/* Mode Icon css */
.dark-mode {
  background-color: #333; /* Dark background color */
  color: #fff; /* Light text color */
}