* {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

}

html {
  overflow-x: hidden;
}

body {

  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif !important;
  color: #fff !important;
  /* mobile viewport bug fix */
  /* min-height: -webkit-fill-available; */
  background: #000000;


}


.loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #b94181;
  /* Change the background color to match your design */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* Ensure the loader appears on top of other content */
}

.loader {
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  object-fit: cover;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



/* DESKTOP NAVABAR */

/* 
main {
  height: 40px;
  width: 100%;

} */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 65px;
}

.navbar-toggler {

  border: 0px !important;
  transition: none !important;


}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0 !important;
}



.main-nav {
  padding: 40px 50px 15px 50px !important;
  background: transparent !important;
  display: none;
  justify-content: end;

}




.navbar-nav .nav-item {
  writing-mode: vertical-lr;
  text-transform: capitalize !important;
  padding-right: 47px !important;
  color: #fff !important;
  margin-bottom: 40px !important;
  margin-top: 40px !important;
  font-weight: 400;
  font-size: 16pt;


}

.navbar-nav .about-link-mobile {
  display: none !important;


}

.navbar-nav .about-link {
  display: flex !important;


}

.navbar-nav .portfolio-mobile {
  display: none !important;


}

.navbar-nav .portfolio-desk {
  display: flex !important;


}





.secondnav {
  position: absolute;
  top: 90px;
  right: 0;
  bottom: 0;
  width: 100px;

}

.custom-toggler .navbar-toggler-icon {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 55px !important;
  height: 55px !important;


}



/* main section greetingSECTIONS */

.section-homepage {
  display: block;
}

.section-mobile {
  display: none;
}

.boxes-container {
  min-height: 100vh;
  position: relative;
  width: 100%;
  border-bottom: #b94181 5px solid;


}

/* .boxes-container::before {
  content: '';
  background: url("/img/home-pic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  filter: brightness(70%);
  width: 100%;
  height: 100%;
  position: absolute;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  z-index: -10;

} */


.boxes {

  height: 100%;
  position: absolute;


}

.boxes .box {
  height: 100% !important;


}

.box .text-content {
  height: 50%;
  /* padding: 40px 0px 0px 220px !important; */
  -webkit-animation: fadein 3.5s linear forwards;
  animation: fadein 3.5s linear forwards;
  width: 100%;
  margin-left: 14% !important;
  /* margin-top: -100px !important; */


}




@keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: .75;
  }

  100% {
    opacity: 1;
  }
}

.section-homepage {
  min-height: 100vh;
  width: 100% !important;


}

#message {
  background-color: #000;
}

#avatar {
  background-color: #b94181;
  height: 100%;
}



.avatar img {
  border-radius: 50%;
  width: 400px;
  height: 380px;
  object-fit: cover;
  /* box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.45); */

}


.btn-home .i-1 {
  color: #000;
  letter-spacing: 0px !important;
  border: none;

}

.btn-home .i-2 {
  color: #b94181;
  letter-spacing: 0px !important;
  border: none;


}



.btn-desktop {


  padding: 20px 30px !important;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  margin-top: 80px !important;
  background: #b94181;
  border-radius: 5px;
  border: none;
  width: 261px;



}

.btn-desktop-left {
  margin-left: 14% !important;
}

.btn-home .btn-desktop {
  color: #fff;
  font-size: 14pt;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;

}

.btn-home .contact-btn {
  color: #fff;
  font-size: 14pt;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;


}


.contact-btn {
  padding: 20px 30px !important;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  margin-top: 145px !important;
  background: rgb(11, 12, 27, 0.75);
  border-radius: 5px;
  border: none;
  width: 261px;

  box-shadow: 0 8px 6px -6px black;
}


.btn-mobile {
  display: none;
}



@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(185, 65, 129, 0.7);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px 10px rgba(185, 65, 129, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(185, 65, 129, 0.7);
  }
}

.pulsate {
  animation: pulse 2s infinite;
  background-color: transparent;
  border-radius: 50%;

}



/* GREETING TEXT */
.text-content .description {
  margin-top: 50px !important;
}

.text-content .p-title {

  font-size: 16pt;
  font-weight: 500;
  line-height: 2rem;
  color: #fff;
  /* text-shadow: 2px 2px 2px #000; */
  letter-spacing: 1px;

}

.text-content .hola-1 {
  font-size: 50pt;
  font-weight: 400;
  --webkit-text-stroke: 4px #000;
  text-shadow: 2px 2px 4px #000;
  text-shadow: 1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
  color: #000 !important;
  line-height: 4rem;
  letter-spacing: 1.5px;

}

.text-content .hola {
  font-size: 72pt;
  font-weight: 900;
  --webkit-text-stroke: 4px #000;
  text-shadow: 2px 2px 4px #000;
  /* text-shadow: 1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; */
  /* text-shadow: 3px 3px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; */
  color: #b94181 !important;
  line-height: 6rem;

  /* text-shadow: 1px 1px 1px #23273c; */

}

.pink-text {
  color: #b94181 !important;
  font-size: 50pt;
  font-weight: 800;
  --webkit-text-stroke: 4px #000;
  text-shadow: 2px 2px 4px #000;
}



.highlight {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-2&color=b94181) no-repeat center center/cover;
  margin: -2px -6px !important;
  padding: 0px 8px !important;

}

.p-pad {
  padding-top: 15px !important;
}




/* TOOLS SECTION*/

.new-section {
  /* min-height: 100vh; */
  width: 100%;



}

.wrapper .dot {
  color: #fff;
}

.container-box {


  border-radius: 20px;

}

.container-box h1 {
  font-size: 50pt;
  padding-bottom: 60px !important;
  text-shadow: 2px 2px 4px #000000;
  color: #fff;
}




.new-section h2 {
  font-size: 40px;
  text-align: center;

}

.new-section .text-container {
  display: flex;
  width: 100%;
  padding: 0px 80px !important;

}

.text-box p {
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 16pt;
  text-shadow: 2px 2px 4px #000000;
}

.new-section .text-container .text-box {
  margin: 50px 70px !important;
  padding: 120px 10px !important;
  width: 100%;

}

.projects-wrapper {
  padding-bottom: 100px !important;

}

.tools-section .card {
  /* background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%); */
  /* background: rgb(11, 12, 27, 0.75); */
  margin: 15px 25px !important;
  border-radius: 10px;
  box-shadow: 1px 2px 2px #b94181;




}


@keyframes wiggle {

  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-15deg);
  }

  20% {
    transform: rotateZ(10deg);
  }

  25% {
    transform: rotateZ(-10deg);
  }

  30% {
    transform: rotateZ(6deg);
  }

  35% {
    transform: rotateZ(-4deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }
}

/* .tools-section .card-pink {

  margin: 15px 25px !important;
  border-radius: 10px;
  box-shadow: 1px 2px 8px #fff;


} */


.card .tools-i {
  font-size: 55pt;
  padding: 40px 0px 20px 0px !important;
  text-shadow: #000 1px 1px 1px;

}

.dots {
  padding-top: 60px !important;
  padding-left: 10px !important;
}

.dotgreen {
  height: 10px;
  width: 10px;
  background-color: rgb(111, 196, 111);
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px !important;

}

.dotgray {
  height: 10px;
  width: 10px;
  background-color: #323131;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px !important;

}

.dothalf {
  height: 10px;
  width: 10px;
  background: linear-gradient(to right, #6FC46F 50%, #323131 50%);
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px !important;

}

.card .vs img {
  width: 75px;
  height: 135px;
  padding: 40px 0px 20px 0px !important;
  object-fit: cover;

}


.card .ftp img {
  width: 75px;
  height: 135px;
  padding: 40px 0px 20px 0px !important;
  object-fit: cover;
}

.card .gimp img {
  width: 105px;
  height: 135px;
  padding: 40px 0px 20px 0px !important;
  object-fit: cover;
}

.tools-card-body .skill {
  padding-bottom: 10px !important;
  /* padding-top: 20px !important; */
  font-size: 20pt;
  text-shadow: 1px 1px 1px #000;
  font-weight: 700;
  line-height: 1;

}

.tools-card-body .description {

  font-size: 11pt;
  line-height: 1.2;
  padding: 10px 20px 40px 20px !important;
  color: #fff;


}

.reveal {
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active {
  transform: translateX(0);
  opacity: 2;
}

.revealr {
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: 1s all ease;
}

.revealr.active {
  transform: translateX(0);
  opacity: 2;
}


/* SECTION PLANETS */


.new-section-2 {

  position: relative;
}

.new-section-2 .dot {

  color: #fff;

}

.skills-container {
  min-height: 100vh !important;
  position: relative;
}

.new-section-2 .home-section-skills {
  height: 100vh !important;

}

section-skills {
  height: 100% !important;

}

.new-section-2 h1 {
  color: #fff;
  position: relative;
  font-size: 50pt;
  padding-top: 80px !important;
  font-weight: 900;
  text-shadow: 4px 4px 0px #000;

}


.box-skills-1 {

  padding: 0px 60px 70px 60px !important;
  margin: 0px 30px !important;
}

.box-skills-2 {

  padding: 0px 60px !important;
  margin: 20px 30px 50px 30px !important;
}


.text-box h2 {
  color: #fff;
  padding: 12px !important;
  font-weight: 700;

}

.text-box .sec-2p {

  color: #848485;
  font-weight: bold;
  font-size: 18pt;
  text-shadow: 2px 2px 4px #000000;
}


.new-section-2::before {
  content: "";
  background-image: url('/img/planet-6.jpg');
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  filter: brightness(40%);
  z-index: -10;
}


.text-box .sec-2i {
  font-size: 55px;
  /* background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important; */
  color: #fff;
  background: rgb(185, 65, 129, 0.75);
  padding: 27px 20px !important;
  border-radius: 50%;
  width: 112px;
  height: 110px;
  text-shadow: #000 1px 1px 1px;



}



.text-box .fa-magic,
.text-box .fa-mobile-alt {

  font-size: 55px;
  /* background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important; */
  color: #fff;
  background: rgb(185, 65, 129, 0.75);
  padding: 27px 20px !important;
  border-radius: 50%;
  width: 112px;
  height: 110px;

}


.box-skills-1 {
  background-color: transparent;
}

.box-skills-2 {
  background-color: transparent;
}





/* contact form home screen new section */

#new-section-contact {

  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;

}

#new-section-contact::before {
  content: "";
  background-image: url('/img/planet-9.jpg');

  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url('/img/planet-9.jpg');
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.70;
  width: 100%;
  height: 100%;
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  /* transform: scaleX(-1); */



}

.contact-form .dot {
  color: #fff;
}

.new-section-contact {
  width: 100%;

}

.contact-form {
  min-height: 80vh;
  width: 50%;

}


.quote-area {
  padding: 0px 10px 60px 10px !important;
}


.quote {
  font-size: 14pt;
  font-weight: 400;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}


.p-quote {
  font-size: 12pt;
  text-shadow: 1px 1px 1px #000;
}





.main-form h1 {
  /* background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 10%, rgba(0, 212, 255, 1) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: #fff;
  text-align: center;
  padding-bottom: 10px !important;
  padding-top: 40px !important;
  font-weight: 700;
  text-shadow: 4px 4px 0px #000;

}



.form {
  width: 40%;
  margin-bottom: 100px !important;
  padding: 60px 100px !important;
  border: #fff solid 10px;

}



.main-form label {
  /* display: block; */
  margin-bottom: 10px !important;
  font-weight: 400;
  font-size: 14pt;


}

.form .form-control {
  margin-bottom: 10px !important;



}

.main-form input {
  width: 100%;
  padding: 4px !important;
  height: 45px;
  border: rgb(185, 65, 129, 0.75) 1px solid;
  /* border-radius: 10px; */
  background-color: #353535;
  /* background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%); */

}

.main-form textarea {
  width: 100%;
  padding: 4px !important;
  height: 95px;
  border: rgb(185, 65, 129, 0.75) 1px solid;
  /* border-radius: 10px; */
  resize: none;
  overflow: hidden;
  background-color: #353535 !important;
  color: #fff;

}

.main-form input:focus {
  /* border-image: linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%);
  border-image-slice: 1; */
  border: #b94181 2px solid;
  outline-style: none;
}

.main-form textarea:focus {
  /* border-image: linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%);
  border-image-slice: 1; */
  border: #b94181 2px solid;
  outline-style: none;
}

.main-form .btn {

  font-size: 16pt;
  background-color: #b94181;
  color: #fff;
  width: 100%;
  display: block;
  margin: auto;
  border: solid 2px #b94181;
  text-shadow: 2px 2px 4px #000000;
  border-radius: 0 !important;
  margin-top: 30px !important;
  position: relative;
  font-weight: 700;

}




.main-form .text-msg {
  margin-top: 50px !important;
  margin-bottom: 30px !important;
}

.mb-3 .is-required::after {
  content: '*';
  color: #fff;
  padding-left: 2px !important;
}

.text-msg .message {
  color: whitesmoke;
  /* font-weight: bold; */
}


.h1s {
  color: #fff;
  font-size: 50pt;
  font-weight: 900;
  padding: 120px 0px 60px 0px !important;
  text-shadow: 2px 2px 4px #000000;
}




/* ABOUT PAGE */


.about-homepage {
  min-height: 100vh;
  width: 100%;

}


.about-nav {
  padding: 35px 45px 15px 45px !important;
  background: transparent !important;


}

.about-container {
  min-height: 100vh;
  width: 100% !important;

}

.about-container::before {
  content: '';
  background: url("/img/astro-5.jpg");
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  background-size: cover;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  filter: brightness(50%);
  width: 100%;
  height: 100%;
  position: absolute;
  /* -webkit-transform: translate3d(0, 0, 0); */
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;



}


.about {

  height: 100%;
  position: absolute;


}

.about .box {
  height: 100% !important;


}

.box .text-content-about {
  height: 250px;
  padding: 0px 100px 0px 0px !important;
  -webkit-animation: fadein 4s linear forwards;
  animation: fadein 1.5s linear forwards;
  width: 100%;
}

.about-btn {
  padding: 0px 100px 0px 0px !important;
}

.btn-home .about-btn a {
  color: #fff;
  font-size: 14pt;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;


}


.about-btn {
  padding: 20px 30px !important;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  margin-left: -80px !important;
  background: rgb(11, 12, 27, 0.75);
  border-radius: 5px;
  border: none;
  width: 261px;
  box-shadow: 0 8px 6px -6px black;
}


.info-1 {
  width: 100%;
  height: 100%;


}

.box .text-content-about {
  /* font-size: 24pt;
  font-weight: 800;
  color: #fff;
  --webkit-text-stroke: 1px #000;
  text-shadow: 2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  line-height: 2.25rem;
  letter-spacing: 1px; */
  font-size: 1.5vw;
  font-weight: 500;
  line-height: 2rem;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
}

.info-1 p {
  font-size: 18pt;
  text-shadow: 4px 4px 0px #000;
  animation: fadein 1s linear forwards;
  border-radius: 15px;
  height: 100%;
  padding: 50px !important;
  background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%);
  border: 4px solid transparent;
  border-color: linear-gradient(180deg, #23273c, #0b0c1b 103.33%);
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



.me-h1 {
  position: absolute;
  font-size: 60pt;
  font-weight: bolder;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-shadow: 4px 4px 0px #000;
  z-index: 1;
  margin-top: 50px !important;

}


.me-h1 .me {
  color: #b94181;
  text-shadow: 4px 4px 0px #000;

}

.about-homepage .me {
  padding-left: 17px !important;
  padding-top: 6px !important;
}


/* HOMEPAGE Avatar / DICE SKILLS section */



.fa-js {
  color: goldenrod;

}

.fa-html5 {
  color: rgb(192, 55, 21);
}

.fa-css3-alt {
  color: rgb(59, 59, 228);
}

.fa-sass {
  color: rgb(202, 83, 186);
}

.fa-bootstrap {
  color: rgb(133, 41, 133);

}

.fa-elementor {
  color: #fff;

}

.fa-git-alt {
  color: rgb(192, 55, 21);
}

.fa-wordpress {
  color: #0c638b;
}


.row {
  --bs-gutter-x: 0 !important;
}


/* INSTAGRAM PG */

#alpaca-body {
  background: linear-gradient(90deg, rgba(102, 6, 112, 1) 36%, rgba(9, 9, 121, 1) 100%, rgba(0, 212, 255, 1) 100%);
  height: 100vh;
  width: 100%;
}

#alpaca {
  display: flex !important;
  justify-content: center !important;
  height: 100%;
  width: 100%;
}

.alpaca-h4 {
  color: rgb(252, 112, 31);
  font-size: 16pt;
  text-shadow: 2px 2px 4px #000000;
  display: flex;
  justify-content: center;
  padding: 20px 8px !important;


}


.img-area-alpaca {
  display: flex;
  justify-content: center;
  width: 100%;

}

.alpaca {
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin: auto !important;
  align-items: center;
}

.alpaca img {
  width: 480px;
  height: 400px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 5px 5px 5px 2px rgba(14, 13, 13, 0.952);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;

}



/* SUCCESS FORM */

#success {
  min-height: 100vh;


}

.container-s {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 60vh;
}

.container-s a {
  color: #000;
}


/* PROJECTS PAGE */


#wrapper {
  min-height: 80vh;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  border-bottom: rgba(255, 105, 180, .20) 1px solid;
  /* background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%); */
  background: #000;



}





.wrapper h1 {
  font-size: 50pt;
  color: #fff;
  padding-bottom: 60px !important;
  padding-top: 70px !important;
  font-weight: 900;
  text-shadow: 4px 4px 0px #000;

}

.wrapper h1 {
  font-size: 50pt;
  color: #fff;
  padding-bottom: 100px !important;
  padding-top: 80px !important;
  font-weight: 900;
  text-shadow: 4px 4px 0px #000;

}

.wrapper .project-cards {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.project-cards .card {
  margin: 15px !important;
  background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%);
  border: 4px solid transparent;
  border-color: linear-gradient(180deg, #23273c, #0b0c1b 103.33%);

}


.card-body .btn {
  padding: 6px 15px !important;
  margin-bottom: 10px !important;
  margin-top: 10px !important;

}

.card-body a {
  font-size: 12pt;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  color: #b8bacc !important;
  letter-spacing: 1px;
}

.card-body i {
  font-size: 10pt;
  color: #03e9f4 !important;
  padding-left: 3px !important;

}


.btn-primary:focus {
  box-shadow: none !important;
}

.card-body {
  padding: 30px 5px 30px 5px !important;
  color: #fff;
}

.card-body .m-p {
  padding-bottom: 35px !important;

}

.card-body p {
  padding: 10px 3px 10px 3px !important;
  color: #848485;
  font-size: 11pt;
  text-shadow: 2px 2px 4px #000000;


}


.card-body h5 {

  color: #fff;
  font-weight: 500;
  font-size: 12pt;
  text-shadow: 2px 2px 4px #000000;

}

.header-portfolio {
  display: flex;
  justify-content: center;
  margin-bottom: 40px !important;

}

.main-h1 {
  color: #fff;
  text-shadow: 2px 2px 4px #000000;
  font-size: 42pt;
}



/* testing accordion section */


.accordion-section-mobile {
  display: none;
}




.cards-projects {
  flex-direction: row !important;
  justify-content: center;
}


.card-header {
  padding: 0rem;
  margin-bottom: 0;
  background-color: transparent;
  border-bottom: none;
  border-top: none;
  margin-left: 15px;
  margin-right: 15px;
}

.card-header-desk button {

  margin: 0px 10px !important;
  text-decoration: none !important;
  color: #fff !important;
  padding: 10px 15px !important;
  z-index: 10;
}



.card {
  background: transparent;
  border: none;

}

.fifth-sec-btn.focus,
.fifth-sec-btn:focus {
  text-decoration: none !important;
}



.fifth-sec-btn {
  border-radius: 0rem;
  padding-left: 5px;
  padding-right: 5px;
  text-shadow: 1px 1px 1px #000;
  font-weight: bold;


}

.col-sm-4 video {
  width: 600px !important;
  height: 330px !important;
  object-fit: cover;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.45);
  border-radius: 20px;

}

.col-sm-4 img {
  width: 600px !important;
  height: 300px !important;
  object-fit: cover;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.45);
  border-radius: 20px;
}

.card-body .collap-text {
  padding-top: 30px !important;
}


.collap-text .fa-html5 {
  color: rgb(192, 55, 21) !important;
  font-size: 22pt;
  padding-top: 10px !important;
}

.collap-text .fa-css3-alt {
  color: rgb(59, 59, 228) !important;
  font-size: 22pt;
}

.collap-text .fa-align-justify {
  background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 0.020028079591211445) 0%, rgba(191, 10, 203, 1) 0%, rgba(0, 212, 255, 1) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  font-size: 22pt !important;
}



.collap-text .fa-bootstrap {
  color: rgb(133, 41, 133) !important;
  font-size: 22pt;
  padding-top: 10px !important;
}

.collap-text .fa-js {
  color: goldenrod !important;
  font-size: 22pt;
  padding-top: 10px !important;
}


.collap-text .fa-wordpress {
  color: #0c638b;
  font-size: 22pt;
  padding-top: 10px !important;
}


.fifth-sec-btn.focus,
.fifth-sec-btn:focus {
  outline: 0 !important;
  box-shadow: none !important;
  border-bottom: #03e9f4 3.5px solid;
}

.card-body {
  height: 100%;
}

.card-body-a {
  height: 60vh;
  padding-top: 90px;
  width: 100%;


}



.card-body-a p {

  width: 600px;
  height: 400px;
  padding-left: 60px;
  font-size: 18px;
}

.card-body h2 {
  font-weight: 600;
  padding-left: 60px;
  font-size: 40px;
  padding-top: 15px;
  padding-bottom: 15px;

}

.paragraph {
  margin-top: -7.5px;
}

.collapsing {
  transition: none !important;
  -webkit-transition: none !important;

}

.bottom-border {
  border-bottom: #b9b7b7 solid 1px;
}

/* end testing accordion section */

/* new porfolio section */

.projects-btn button {
  background: transparent;
  border: none;
  /* padding: 10px 15px !important; */
  font-size: 12px;
  text-shadow: 1px 1px 1px #000;
  height: 40px;
  width: 100px;
  color: #fff;
  margin-top: 8px !important;
  border-radius: 15px;


}

.projects-btn button .fa-chevron-circle-right {
  margin-left: 5px !important;
  color: #b94181;
  font-size: 11pt;


}

.projects-btn button a {
  text-decoration: none;
  color: #fff;


}

/* NEW PROJECT DISPLAY */

#accordion-desk {
  min-height: 80vh;
  width: 100%;
  border-bottom: rgba(255, 105, 180, .20) 1px solid;
  /* background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%); */
  background: #000;

}

.work-section-img .card {
  position: relative;
  margin: 20px !important;
  height: 470px;
}


.work-section .work-section-img {
  /* height: 350px; */
  width: 1260px !important;
  height: auto;


}

.projects-gallery img {
  height: 470px;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;


}

.projects-gallery {
  position: relative;
  overflow: hidden;
}

.projects-gallery:hover .projects-img {
  transform: scale(1.01);
  transition: .5s ease;
  filter: brightness(30%);

}

.projects-gallery .text-projects {
  position: relative;
}



.fancybox-container {
  max-width: 60%;
  /* Desired container width */
  max-height: 100%;
  /* Optional height limit */
  position: fixed !important;
  /* Fix the container in place */
  top: 50% !important;
  /* Center vertically */
  left: 50% !important;
  /* Center horizontally */
  transform: translate(-50%, -50%) !important;
  /* Shift to center */
  margin: 0 !important;
  /* Remove default margins */
  padding: 0 !important;
  /* Remove padding, if any */
  box-sizing: border-box;
  /* Ensure proper sizing */

}

.fancybox-content {
  display: block;
  /* Default block layout to avoid unexpected behavior */
  text-align: center;
  /* Center the content horizontally */
  max-width: 100%;
  /* Ensure content respects container width */
  max-height: 100%;
  /* Prevent overflow */

}

.fancybox-content img {
  max-width: 100%;
  /* Scale image properly */
  max-height: 95%;
  /* Fit within container */
  object-fit: contain;
  /* Maintain aspect ratio */
}

.fancybox-caption {
  font-family: 'Poppins', sans-serif !important;
  /* Change to your desired font */
  font-size: 18px !important;
  /* Adjust the font size */
  font-weight: 500 !important;
  /* Make the font bold */
  color: #fff !important;
  /* Change text color */
  text-align: center !important;
  /* Center the caption text */

  padding-bottom: 40px !important;
  padding-top: 40px !important;
  /* background: #03e9f4 !important; */
  padding-left: 50px !important;
  padding-right: 50px !important;
  background: #1d36b2 !important;
}




.text-projects-p {
  width: inherit;
  height: 470px;
  transition: .8s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  padding: 35px !important;

}

.text-projects-p:hover {
  opacity: 1;
  transition: .8s ease;
}

.btn-projects:hover {
  opacity: 1;
  transition: .8s ease;
}

.text-projects-p .btn-projects {

  margin-top: 40px !important;

}

.text-projects-p .btn-projects a {
  color: #fff;
  font-size: 12pt;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  height: 50px;
  background: rgb(11, 12, 27, 0.75);
  padding: 10px 20px !important;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #000;
}




.btn-projects i {
  color: #b94181;
  margin-left: 5px !important;
  border: none;
  font-size: 11pt;

}


.text-projects-p h2 {
  font-weight: 800;
  padding-bottom: 10px !important;
  font-size: 19pt;
  text-shadow: 1px 1px 1px #000;
}






div.box-project {
  --s: 300px;
  /*Size of the circle */
  --p: 15px;
  /* padding */

  height: var(--s);
  width: var(--s);
  border-radius: 50%;
  background: url('/img/BluePlanet-planet3.png') center/cover no-repeat;
  color: #fff;
  margin: 20px 10px !important;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  object-fit: cover;
  text-align: justify;
  text-justify: distribute;
  animation: rotate 16s linear infinite;

}


.box-project h2 {
  font-size: 20px;
  text-align: center;
  padding-bottom: 10px !important;
  font-weight: bold;
  line-height: 1;


}

.box-project .circle,
.box-project::before {
  content: '';
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
  background: rgba(0, 0, 0, 0.7);

}

.box-project .circle {
  float: right;
  shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);

}

div.box-project-2 {
  --s: 300px;
  /*Size of the circle */
  --p: 15px;
  /* padding */

  height: var(--s);
  width: var(--s);
  border-radius: 50%;
  background: url('/img/Marsplanet2.png') center/cover no-repeat;
  color: #fff;
  margin: 20px 10px !important;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  object-fit: cover;
  text-align: justify;
  text-justify: distribute;


}

.box-project-2 h2 {
  font-size: 20px;
  text-align: center;
  padding-bottom: 10px !important;
  font-weight: bold;
  line-height: 1;

}

.box-project-2 .circle,
.box-project-2::before {
  content: '';
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
  background: rgba(0, 0, 0, 0.6);
}

.box-project-2 .circle {
  float: right;
  shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);

}

div.box-project-3 {
  --s: 300px;
  /*Size of the circle */
  --p: 15px;
  /* padding */

  height: var(--s);
  width: var(--s);
  border-radius: 50%;
  background: url('/img/Jupiter.svg') center/cover no-repeat;
  color: #fff;
  margin: 20px 10px !important;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  object-fit: cover;
  text-align: justify;
  text-justify: distribute;

}

.box-project-3 h2 {
  font-size: 20px;
  text-align: center;
  padding-bottom: 10px !important;
  font-weight: bold;
  line-height: 1;

}

.box-project-3 .circle,
.box-project-3::before {
  content: '';
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
  background: rgba(0, 0, 0, 0.6);
}

.box-project-3 .circle {
  float: right;
  shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);

}

div.box-project-4 {
  --s: 300px;
  /*Size of the circle */
  --p: 15px;
  /* padding */

  height: var(--s);
  width: var(--s);
  border-radius: 50%;
  background: url('/img/CharonIsolated.svg') center/cover no-repeat;
  color: #fff;
  margin: 20px 10px !important;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  object-fit: cover;
  text-align: justify;
  text-justify: distribute;
  /* text-align-last: left; */

}

.box-project-4 h2 {
  font-size: 20px;
  padding-bottom: 10px !important;
  font-weight: bold;
  line-height: 1;
  margin-top: 10px;
  text-align: center;

}

.box-project-4 .circle,
.box-project-4::before {
  content: '';
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
  background: rgba(0, 0, 0, 0.6);
}

.box-project-4 .circle {
  float: right;
  shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);

}



/* .work-section-img .img-work img {
  height: 300px;
  width: 300px !important;


  border: #000 2px solid;
  animation: rotate 16s linear infinite;

} */
@keyframes rotate {
  from {
    transform: rotate(0deg);

  }

  to {
    transform: rotate(360deg);

  }
}

/* .work-section-img .img-moon img {
  height: 300px;
  width: 300px !important;
  object-fit: cover;

  filter: brightness(55%);
  border: #000 2px solid;

}

.work-section-img .img-earth img {

  filter: brightness(55%);
  border: #000 2px solid;

} */

.h2-work {
  width: 300px;
  height: 300px;
  transition: .7s ease;
  position: absolute;
  top: 0;
  left: 8%;
  padding: 25px !important;

}



.h2-work h2 {

  font-size: 23px;
  font-weight: 800;
  text-shadow: 1px 1px 1px #000;
  color: white;

}

.h2-work p {

  font-size: 13px;

  text-shadow: 1px 1px 1px #000;
  color: white;

}


.h2-work button {
  background-color: #b94181;
  width: auto;
  border: 3px #b94181 solid;
  padding: 10px 15px !important;
  font-size: 13px;
  text-shadow: 1px 1px 1px #000;
  height: 45px;
  color: #fff;

}

.h2-work button a {
  text-decoration: none;
  color: #fff;


}

.work-pics {
  position: relative;
  overflow: hidden;

}





/* FOOTER */

#footer {
  width: 100%;
  height: 925px;
  position: relative;
  display: flex;
  flex-direction: column;

}

#footer img {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.9;
  background-attachment: fixed;
  object-fit: cover;


}

hr {
  width: 35%;
  border: 1px solid #b94181;
  opacity: 1;
  margin-bottom: 60px !important;
  margin-top: -1.8px !important;

  /* color: rgb(250, 97, 9); */
  /* background: linear-gradient(180deg, #23273c, #0b0c1b 103.33%); */

}



.flex-footer h1 {


  font-size: 16pt;
  color: #6c757d;
  font-family: 'Space Mono', monospace;


}


.flex-footer .thanks-hr {
  position: absolute;
  height: 100%;
  width: 100%;
  padding-top: 180px !important;



}

.flex-footer .thanks-hr h1 {
  padding: 20px !important;
  font-weight: 700;

}

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


}

.social {
  font-size: 12pt;



}

.social p {
  font-size: 8pt;
}


.fa-codepen {

  color: #fff;
}



.fa-github {
  color: #fff;
}

.github-2 {
  color: #fff;
}

.fa-instagram {
  color: #fff;
}


.fa-linkedin {
  color: #fff;
}

.fa-linkedin-2 {
  color: #fff;
}

.fa-linkedin-a {
  color: #fff;
}

.fa-envelope {
  color: #fff;
}

.fa-envelope-2 {
  color: #fff;
}

.fa-instagram-2 {
  color: #fff;
}



.social {
  text-align: center;
  position: absolute;
  width: 100%;



}

.social i {

  padding: 10px !important;
}



.social p {
  color: #848485;

  font-size: 10pt;


}

.social .p2 {
  font-size: 11px;
}

.heart {
  /* color: rgb(245, 43, 218); */
  color: #b94181;
  text-shadow: 4px 4px 0px #000;
  font-size: 13px;

}