/* Global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.1s linear;

}

.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #cf9aff, #95c0ff);
  color: #fff;
  padding-top: 5%;
  /* padding-left: 9%; */
  padding-bottom: 0;
}

.container h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 600;
}

.container h4 span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 600;
  color: #571094;
}


.container button {

.col-md-8 button{

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(#9418fd, #571094);

  color: #fff;
  font-size: 16px;
  outline: 0;
  border: 0;
  border-radius: 12px;
  padding: 15px 25px;
  margin: 30px 0 20px;
  width: 80%;
  /* border-radius: 40px; */
  padding: 5px 15px;
  cursor: pointer;

}

.form-control {
  height: 200px;
  width: 300px;
}

body {
  height: 100vh !important;
  background: black;
  width: 100vw;
}



/* button styles 1 */
.wrapper {
  display: flex;
  /* background-color: #72abffe0; */
  min-height: 5%;
 
  /* justify-content: center;
  align-items: center; */
}

.space {
  height: 20px;
  /* background-color: #000; */
  margin-top: 0;
}

.wrapper button {
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  /* text-transform: uppercase; */
  border-radius: 12px;
  letter-spacing: 2px;
  background-color: black;
  border: none;
  outline: none;
  color: #F9E400;
  font-size: 1rem;
  transition: .5s;
  overflow: hidden;
  margin-right: 30px;
}

.wrapper button:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 200px #03e9f4;

  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

.wrapper button:first-child {
  filter: hue-rotate(225deg);
}

.wrapper button:last-child {
  filter: hue-rotate(90deg);
}

.wrapper button span {
  position: absolute;
  display: block;
}

.wrapper button span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F9E400);
  animation: animate1 1s infinite;
  animation-delay: 0s;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.wrapper button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #F9E400);
  animation: animate2 1s infinite;
  animation-delay: .25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }

  100% {
    top: 100%;
  }
}

.wrapper button span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #F9E400);
  animation: animate3 1s infinite;
  animation-delay: .5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }

  100% {
    right: 100%;
  }
}

.wrapper button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #F9E400);
  animation: animate4 1s infinite;
  animation-delay: .75s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }

  100% {
    bottom: 100%;
  }
}





/* button styles 2 */
.tStyle {
  display: flex;
  /* background-color: #72abffe0; */
  min-height: 5%;
  
  /* justify-content: center;
  align-items: center; */
}

.tStyle button {
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  /* text-transform: uppercase; */
  letter-spacing: 2px;
  background-color: #000;
  border-radius: 12px;
  color: #F9E400;
  border: 2px solid #F5004F;
  outline: none;
  font-size: 1rem;
  transition: .5s;
  overflow: hidden;
  margin-right: 30px;
  z-index: 1;
  transition: 1s;
}

.tStyle button span {
  position: absolute;
  display: block;
}

.tStyle button:hover {
  color: #fff;

  background-color: #000;
  border: 3px solid #F9E400;
  transition: 1s;
}

#capital:hover {
  text-transform: uppercase;
}

#small:hover {
  text-transform: lowercase;
}

#bold:hover {
  font-weight: 1000;
}

#italic:hover {
  font-style: italic;
}

.tStyle button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40px;
  width: 0;
  height: 100%;
  background: #F9E400;
  transform: skewX(35deg);
  z-index: -1;
  transition: 1s;
}

.tStyle button:hover:before {
  width: 100%;
}


/* button styles 3 */
.rclStyle {
  display: flex;
  /* background-color: #72abffe0; */
  min-height: 5%;
  /* justify-content: center;
  align-items: center; */
}

.rclStyle button {
  position: relative;
  display: inline-block;
  padding: 15px 20px;

  width: auto;
  letter-spacing: 4px;

  background-color: #000;
  color: #F9E400;
  border: 2px solid #F5004F;
  outline: none;
  font-size: 1rem;
  font-weight: bold;
  transition: .5s;
  overflow: hidden;
  margin-right: 30px;
  z-index: 1;
  transition: 1s;
}

.rclStyle button span {
  position: absolute;
  display: block;
}

.rclStyle button:hover {
  color: #fff;

  background-color: #000;
  border: 2px solid #F5004F;
  transition: 1s;
}

.rclStyle button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40px;
  width: 0;
  height: 100%;
  background: #F9E400;
  transform: skewX(35deg);
  z-index: -1;
  transition: 1s;
}

.rclStyle button:hover:before {
  width: 100%;
}



#save,
#clear,
#download {
    padding-right:50px;
    
}



/* Scroll Bar Styling */





/* Preloader styling  */
#preloader {
  background: #ddbea9;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 200;
  min-height: 100vh;
  background: #f5f9ff;
  display: flex;
  justify-content: center;
  align-items: center;

  .dribbble {
    position: fixed;
    display: block;
    right: 20px;
    bottom: 20px;

    img {
      display: block;
      height: 28px;
    }
  }
}

.loader {
  --path: #2f3545;
  --dot: #5628ee;
  --duration: 3s;
  width: 44px;
  height: 44px;
  position: relative;

  &:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 37px;
    left: 19px;
    transform: translate(-18px, -18px);
    animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }

  svg {
    display: block;
    width: 100%;
    height: 100%;

    rect,
    polygon,
    circle {
      fill: none;
      stroke: var(--path);
      stroke-width: 10px;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    polygon {
      stroke-dasharray: 145 (221 - 145) 145 (221 - 145);
      stroke-dashoffset: 0;
      animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    rect {
      stroke-dasharray: (256 / 4 * 3) (256 / 4) (256 / 4 * 3) (256 / 4);
      stroke-dashoffset: 0;
      animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    circle {
      stroke-dasharray: (200 / 4 * 3) (200 / 4) (200 / 4 * 3) (200 / 4);
      stroke-dashoffset: 75;
      animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
  }

  &.triangle {
    width: 48px;

    &:before {
      left: 21px;
      transform: translate(-10px, -18px);
      animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
  }
}

@keyframes pathTriangle {
  33% {
    stroke-dashoffset: 74;
  }

  66% {
    stroke-dashoffset: 147;
  }

  100% {
    stroke-dashoffset: 221;
  }
}

@keyframes dotTriangle {
  33% {
    transform: translate(0, 0);
  }

  66% {
    transform: translate(10px, -18px);
  }

  100% {
    transform: translate(-10px, -18px);
  }
}

@keyframes pathRect {
  25% {
    stroke-dashoffset: 64;
  }

  50% {
    stroke-dashoffset: 128;
  }

  75% {
    stroke-dashoffset: 192;
  }

  100% {
    stroke-dashoffset: 256;
  }
}

@keyframes dotRect {
  25% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(18px, -18px);
  }

  75% {
    transform: translate(0, -36px);
  }

  100% {
    transform: translate(-18px, -18px);
  }
}

@keyframes pathCircle {
  25% {
    stroke-dashoffset: 125;
  }

  50% {
    stroke-dashoffset: 175;
  }

  75% {
    stroke-dashoffset: 225;
  }

  100% {
    stroke-dashoffset: 275;
  }
}

.loader {
  display: inline-block;
  margin: 0 16px;
}

html {
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;

  &:before,
  &:after {
    box-sizing: border-box;
  }
}

/* Main Container */
.container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Canvas Styles */

/* Main canvas styles */

#mainCanvas {
  width: 96%;
  padding: 10px;
  /* max-height: 500px; */
  /* margin: 68px; */
  background-color: #ffffffa8;
  border: 1px solid rgba(216, 94, 202, 0.41);
  box-shadow: 0 4px 8px rgba(216, 94, 202, 0.41);


  width: 83% !important;
  height: auto;
  max-height: 500px;
  margin: 68px;
  border: 1px solid gray;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  border-radius: 5px;
}

/* Control Panel (Form) Styles */
#userForm {
  margin-top: 5px;
  padding: 15px;
  background-color: #1e1e1e;
  border-radius: 8px;
  margin-left: 20px;
  max-height: 90%;
}

/* Flexbox for control panel alignment */
.d-md-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Shape Palette */
.palette {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  margin-left: 30px;
  color: rgb(255, 255, 255);
}

.palette button {
  padding: 5px;
}

#rectangleBtn,
#circleBtn,
#lineBtn {
  /* width: 100px; */
  /* padding: 5px; */
  text-align: center;
  border-radius: 12px;
}

/* Button Styles */
.mt-2.mb-5 {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 70% !important;
  width: 70% !important;
  height: auto;
  border: 1px solid gray;
  background-color: #ced4da;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

/* .logo {
  width: 50px;
  height: auto;
  margin-right: 10px;
} */
.title {
  display: flex;
  align-items: left;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  justify-content: center;
}

/*  Navbar Styling  starts*/
.navbar {
  background-color: #333;
  /* Dark background */
  padding: 10px 10px;
  /* Space around the links */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  /* Spacing between links */
  background-color: #333; /* Dark background */
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 3rem; /* Spacing between links */

  flex-wrap: wrap;

  border-bottom: none;
}
ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

/* Styling individual links in the navbar */
.navbar a {
  color: white;
  /* Link color */
  font-size: 1.2rem;
  /* Font size */
  text-decoration: none;
  /* Remove underline */
  padding: 0.5rem 1rem;
  /* Add padding around the text */
  border-radius: 0.5rem;
  /* Rounded corners for hover effect */
  transition: background-color 0.3s ease;
  /* Smooth hover transition */
}

/* .nav-links {

  color: #a0a0a0; /* Link color */
  font-size: 18px; /* Font size */
  text-decoration: none; /* Remove underline */
  padding: 0.5rem 1rem; 
  border-radius: 0.5rem; /* Rounded corners for hover effect */
  transition: background-color 0.3s ease; /* Smooth hover transition */
  
}
/* .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  
}

.nav-links a {
  position: relative;
  text-decoration: none;
  letter-spacing: 0.5px;
  color: #a0a0a0;
}
.nav-links a:after {
  content: "";
  position: absolute;
  background-color: white;
  height: 3px;
  width: 0;
  left: 0;
  bottom: -10px;
  transition: 0;
}
.nav-links a:hover {
  color: #ffffff;
}
.nav-links a:hover:after {
  width: 100%;
} */

.nav-link {
  text-decoration: none;
  list-style: none;
  color: #e645d0;
}

.gt_container-unisv1 a.glink span {
  text-decoration: none;
  list-style: none;
  color: #e645d0;
}

.nav-link:hover {
  color: #fff;
  background-color: #e645d0;
  border: none;
}

.nav-link.active {

.nav-link{
  text-decoration: none;
  list-style: none;
  color:  #e645d0;
}
.gt_container-unisv1 a.glink span{
  text-decoration: none;
  list-style: none;
  color:  #e645d0;
}
.nav-link:hover{
  color: #fff;
  background-color:  #e645d0;
  border: none;
}
.nav-link.active{ 

  color: #e12ac9 !important;
  background-color: #ffffff;

.nav-links a:hover {
  color: #ffffff;
}
/* navbar styling ends */

/* Style for input field */
#textData {
  
  height: 45px;
  padding: 10px 20px;
  font-size: 1rem;
  border: 2px solid #ced4da;
  border-radius: 30px;
  margin-right: 15px;
  
}

.title-container {
  margin-top: 30px;
  padding: 20px 0;
  font-weight: 550;
  font-size: 40px;
  color: rgb(50, 50, 50);

  position: relative;
  /* Needed for absolute positioning of pseudo-elements */
  display: flex;
  /* Use flexbox to align items */
  align-items: center;
  /* Vertically center the content */

  position: relative; /* Needed for absolute positioning of pseudo-elements */
  display: flex; /* Use flexbox to align items */
  align-items: center; /* Vertically center the content */

}



.canvas-palette {

  border: 2px solid rgba(216, 94, 202, 0.41);
  /* Adding a border for definition */
  border-radius: 10px;
  /* Rounded corners */
  background: #ffffffa8;
  /* White background for clarity */
  padding: 20px;
  /* Padding around content */
  box-shadow: 0 4px 10px rgba(207, 91, 194, 0.1);
  /* Subtle shadow for depth */
  margin-top: 20px;
  /* Space above the palette */

}

.canvas-palette label {
  font-weight: bold;
  /* Bold labels for emphasis */
}

.canvas-palette .form-select,
.canvas-palette .form-control {
  border: 1px solid #ccc;
  /* Soft border for inputs */
  border-radius: 5px;
  /* Slightly rounded corners */
  padding: 5px;
  /* Padding inside inputs */
  transition: border-color 0.3s;
  /* Smooth transition on focus */
}

.canvas-palette .form-select:focus,
.canvas-palette .form-control:focus {
  border-color: #0056b3;
  /* Highlight border color on focus */
  box-shadow: 0 0 5px rgba(0, 86, 179, 0.5);
  /* Soft glow effect */
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  font-size: 1rem;
}


.canvas-palette .btn {

  border-radius: 5px;
  /* Rounded button corners */
  padding: 10px 15px;
  /* Ample padding for buttons */
  font-weight: bold;
  /* Bold text for buttons */

}


.canvas-palette .btn:hover {
  transform: translateY(-2px);
  /* Subtle lift on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* Shadow on hover */
}

.palette {
  margin-top: 15px;
  /* Space above shape buttons */
}

.palette .btn {
  margin: 5px;
  /* Space between shape buttons */
}


/* Style for the Save button */
.btn-primary {
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 12px;
  transition: background-color 0.3s;
}

/* Hover effect for button */
.btn-primary:hover {
  background-color: #0056b3;
  color: white;
}

/* Flex container adjustments */
.cal.d-flex {
  /* display: flex; */
  gap: 1rem;
  border: 1px solid #f87affad;
  background-color: #ffffffa8;
  border-radius: 20px;
}

button {
  margin: 5px;
  
}

.btn {
  margin: 10px 15px;

}

.btn:hover {
  background-color: #0056b3;
  color: white;
  transition: background-color 0.3s ease;
}

/* Input Field Styles */
input[type="text"],
#textData input {
  padding: 10px;
  border-radius: 30px;
  border: 1px solid #ccc;
  font-size: 1rem;
  margin-right: 10px;
  height: 45px;
  width: 10%;
}

/* .d-flex select{

} */

/* input#textData {
  margin-right: 15px;
  height: 45px;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 30px;
  border: 2px solid #ced4da;
  width: 20%;
} */

/* Group related inputs */
.input-group {
  margin-bottom: 10px;
}
.container.mt-5.contact-container{
  background-color: transparent;
}


.container.mt-5.contact-container {
  background-color: transparent;
}


/* Elegant Button */
.boton-elegante {
  padding: 10px 10px;
  border: 2px solid #2c2c2c;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 30px;
  transition: all 1s ease;
  outline: none;
  position: relative;
  overflow: hidden;
  font-weight: bold;

  margin-left: 15px;
  width: 110px;
  text-align: center;
}

.boton-elegante#Save {
  background-color: #15b392;
  background-color: #15b392;
  /* Green color for Save button */
}

.boton-elegante#clear {
  background-color: #dc3545;
}

.boton-elegante#download {
  background-color: #007bff;
}

.boton-elegante::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle,
      rgba(15, 245, 107, 0.886) 0%,
      rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  transition: transform 0.5s ease;
}

/* 
.boton-elegante:hover::after {
  transform: scale(4);
} */

.boton-elegante:hover {
  border-color: #666666;
  background: #292929;
}

/* Hover Tooltips for Formatting Buttons */
button#bold:hover::after,
button#italic:hover::after,
button#capital:hover::after,
button#small:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  transform: translateY(-30px);
  white-space: nowrap;
  z-index: 10;
}

button#save:hover::after,
button#clear:hover::after,
button#download:hover::after {
  content: none;
}

/* Add a specific class to avoid applying to other buttons */
button#bold:hover::after,
button#italic:hover::after,
button#capital:hover::after,
button#small:hover::after {
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  transform: translateY(-30px);
  white-space: nowrap;
  z-index: 10;
}

/* Avoid applying to other buttons like Save, Clear, and Download */
button#save:hover::after,
button#clear:hover::after,
button#download:hover::after {
  content: none;
}

/* Custom Height */
.h-80 {
  height: 80vh !important;
}

/* Flex Container Adjustments */
.d-flex {
  display: flex;
  gap: 1rem;
}

/* Center Alignment */
/* .d-md-flex.justify-content-center {
  margin-top: 15px;
} */

.footer {
  background: black;
  text-align: center;
}

.footer .share {
  padding: 1rem 0;
}

.footer .icon-class {
  border: none;
  background: none;
}

.footer .share a {
  height: 2.5rem;
  width: 2.5rem;
  line-height: 2.5rem;
  font-size: 1rem;
  color: #ffffff;
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
  margin: 0.2rem;
  border-radius: 50%;
  text-decoration: none;
}

.footer .share a:hover {
  background-color: #837667;
}

.footer .links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0;
  gap: 10px;
}

.footer .links a {
  padding: 0.7rem 2rem;
  color: #fff;
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
  font-size: 2rem;
}

.footer .links a:hover {
  background-color: #837667;
}

footer .credit {
  font-size: 2rem;
  font-weight: lighter;
  padding: 1.5rem;
}

.footer .credit p {
  color: #f5f5f1;
}

.footer .credit span {
  color: #ffcc92;
}

@media (max-width: 768px) {
  #mainCanvas {
    width: 90%;
  }
}

/* Contact Us Section */
.contact-section {
  background-color: #f9f9f9;
  padding: 20px;
  text-align: center;
  max-width: 650px;
  border-radius: 15px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.contact-section h2 {
  font-weight: bold;
  font-size: 36px;
  margin-bottom: 20px;
  color: #fff;
}

.contact-section form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.contact-section label {
  text-align: left;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.contact-section input,
.contact-section textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.contact-section button {
  padding: 15px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.contact-section button:hover {
  background-color: #555;
}

.contact .social-media-links {
  width: 230px;
  justify-content: space-evenly;
}

.link-img {

  font-size: 30px;
  border: 1px solid #f87affad;
  padding: 2px;
  border-radius: 6px;
}

/* Back to Top Button */
#BacktoTop {
  position: fixed;
  /* Stay in fixed position */
  bottom: 50px;
  /* Positioned above the chatbot */
  right: 5px;
  /* Aligned to the right */
  width: 55px;
  height: 55px;
  background-color: #007bff;
  /* Button background */
  color: white;
  /* Text color */
  padding: 10px 15px;
  /* Padding for button size */
  border-radius: 50%;
  /* Circular button */
  border: none;
  font-size: 24px;
  /* Size of the text or arrow */
  font-weight: bolder;
  display: block;
  /* Initially hidden */
  visibility: hidden;
  z-index: 1000;
  /* Ensures it is above most elements */
  cursor: pointer;
  /* Pointer when hovered */
}

#BacktoTop:hover {
  background-color: #0056b3;
  /* Change to a lighter blue on hover */
  transform: scale(1.1);
}

body {
  transition: background-color 0.3s, color 0.3s;

}

.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}

.dark-mode .container {
  background-image: linear-gradient(120deg, #3a0033, #001a33, #1a0033);
  color: #007bff;
}

/* .dark-mode .canvas-container {
  background: #2a2a2a;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
} */
.dark-mode #mainCanvas {
  border-color: #ffffff;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
  /* background-color: #333333; */
}

.dark-mode .btn {
  background-color: #444444;
  color: #ffffff;
}

.dark-mode .form-control {
  /* background-color: #333333; */
  color: #ffffff;
}

.dark-mode #userForm {
  background-color: #444444;
}

.dark-mode .footer {
  background-color: #333333;
  color: #ffffff;
}

.dark-mode .footer .share a {
  color: #ffffff;
}

.dark-mode .custom-popup {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .popup-content {
  background-color: #333333;
  color: #ffffff;
}

#darkModeToggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background-color: #333333;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.dark-mode #darkModeToggle {
  background-color: #ffffff;
  color: #333333;
}


body {
  overflow-x: hidden;
  background-color: #ffffff;
  font-family: 'Arial', sans-serif;
}

.container {
  max-width: 170vw;
  margin: 0 auto;
  color: rgb(0, 0, 0);

  background-image: linear-gradient(120deg, #fbccff, #d8f9ff, #d4c6ff);
}

.header {
  width: 100%;
  text-align: center;
  height: 16vh;
}

#logo {
  height: 14vh;
  width: 100%;
  display: flex;
  justify-content: center;
  /* gap: 18rem; */
  align-items: center;
  background-color: rgb(247, 205, 252);
  /* background-attachment: sticky; */
  position: fixed;
  z-index: 99;
  /* position: sticky; */
}

.logo {
  background-image: linear-gradient(to right, #e645d0, #9631d5);
  /* Gradient from left to right */
  -webkit-background-clip: text;
  /* For WebKit browsers */
  -moz-background-clip: text;
  /* For Mozilla browsers */
  background-clip: text;
  color: transparent;
}

.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 10px;
  padding: 20px;
}

/* #mainCanvas {
  max-width: 100%;
  height: 400px;
  /* Set a fixed height */
/* border: 2px solid #000000; */
/* border-radius: 10px;


  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
  background-color: #ffffff; */
/* Default background color */
/* cursor: crosshair;
  margin-top: 20px; */


/* } */
*/ .btn {
  margin: 5px;
  transition: background-color 0.3s, transform 0.2s;
  border-radius: 30px;
}

.btn:hover {
  background-color: #3abe57;
  color: white;
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.95);
}

.palette {
  margin: 15px 0;
  text-align: center;
}

.form-control {
  border-radius: 5px;
}

.edit {
  display: flex;
}

.toolbar-item {
  padding: 10px;
}

#userForm {
  margin-top: 5px;
  padding: 15px;
  background-color: #72abffe0;
  border-radius: 8px;
  margin-left: 20px;
  max-height: 90%;
}

/* Footer Styling */

.footer {
  width: 100%;
  background-color: #241835d8 !important;
  color: #c23e3e;
  text-align: center;
  border-start-start-radius: 5px;
  padding: 35px 350px;
  font-family: 'Arial', sans-serif;
  position: relative;
  margin-top: 0px !important;
}

.footer .share {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.footer .share a {
  margin: 0 10px;
  font-size: 1.8rem;
  color: #ffffff;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer .share a:hover {
  color: #f39c12;
  transform: scale(1.1);
}

.footer .credit {
  font-size: 0.9rem;
  color: #bdc3c7;
}

.footer .credit span {
  color: #f39c12;
  font-weight: bold;
}

.footer .credit p {
  margin: 0;
  font-size: 0.85rem;
}

.footer .credit span:hover {
  color: #f1c40f;
}

/* Responsive design */
@media (max-width: 768px) {
  .footer {
    padding: 30px 0;
  }

  .footer .share a {
    font-size: 1.5rem;
  }

  .footer .credit {
    font-size: 0.8rem;
  }
}



/* Custom scrollbar for Chrome, Safari, and Opera */


h5 {
  color: #eeff00;
  font-size: small;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}


.footer {
  width: 100%;
  background-color: #2c3e5e;
  /*updated this color */
  color: #c23e3e;
  text-align: center;
  border-start-start-radius: 5px;
  padding: 35px 350px;
  font-family: 'Arial', sans-serif;
  position: relative;
  margin-top: 20px;
}


.footer .share {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.footer .share a {
  margin: 0 10px;
  font-size: 1.8rem;
  color: #ffffff;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer .share a:hover {
  color: #f39c12;
  transform: scale(1.1);
}

.footer .credit {
  font-size: 0.9rem;
  color: #bdc3c7;
}

.footer .credit span {
  color: #f39c12;
  font-weight: bold;
}

.footer .credit p {
  margin: 0;
  font-size: 0.85rem;
}

.footer .credit span:hover {
  color: #f1c40f;
}


/* Responsive design */
@media (max-width: 768px) {
  .footer {
    padding: 30px 0;
  }

  .footer .share a {
    font-size: 1.5rem;
  }

  .footer .credit {
    font-size: 0.8rem;
  }
}



/* Custom scrollbar for Chrome, Safari, and Opera */

h2 {
  margin-top: 50px;
  color: black;
  font-size: 50px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.dark-mode h2 {
  color: pink;
}

.welcome h2 {
  font-size: 50px;
  color: white;
  /* Initial color */
  animation: colorChange 7s infinite ease-in-out;
  /* Smoother easing */
  text-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.3),
    /* Main subtle shadow */
    0 0 10px rgba(255, 255, 255, 0.5),
    /* Soft glow */
    0 0 20px rgba(255, 255, 255, 0.4),
    /* Outer glow */
    0 0 30px rgba(173, 216, 230, 0.6);
  /* Light blue glow effect */
  /* Subtle shadow */
}

@keyframes colorChange {
  0% {
    color: #8361ff;
    /* Smooth soft red */
  }

  25% {
    color: #f87aff;
    /* Light salmon */
  }

  50% {
    color: #e100ff;
    /* Gold */
  }

  75% {
    color: #90a3ee;
    /* Light green */
  }

  100% {
    color: #87cefa;
    /* Light sky blue */
  }
}

/* Circle styles */
.circle {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999999;
  transition: transform 0.1s ease-out;
}

.gtranslate_wrapper {
  margin-left: 30px;
}

.custom-popup {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  background-color: black;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.popup-content h3 {
  color: #007bff;
  margin-bottom: 15px;
}

.popup-content p {
  margin-bottom: 20px;
}

#contactSubmit{
  background-color: #03e9f4;
}


/* General Button Styling */
button {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  border-radius: 30px; /* Rounded edges */
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Button Wrapper Styles */
.wrapper, .tStyle, .rclStyle {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.space {
  height: 20px;
}

/* Button Styles 1 - Pink and Blue Theme */
.wrapper button {
  background-color: #F9CEFF; /* Primary Pink */
  color: #805D93; /* Lighter Purple/Soft Mauve */
  border-radius: 50px; /* More roundness for soft look */
  border: 2px solid #F9CEFF;
}

.wrapper button:hover {
  background-color: #D8F9FF; /* Primary Blue */
  color: #518FBA; /* Softer Blue */
  box-shadow: 0 0 10px #D8F9FF, 0 0 20px #D8F9FF, 0 0 40px #D8F9FF;
}

.wrapper button:first-child {
  background-color: #D8F9FF; /* Alternate Blue */
  color: #518FBA;
  border-color: #AEEAFF;
}

.wrapper button:last-child {
  background-color: #F9CEFF; /* Pink for last button */
  color: #805D93; /* Soft Purple */
  border-color: #F4A3FF;
}

/* Soft Border Animation */
.wrapper button span {
  position: absolute;
  display: block;
}

.wrapper button span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D8F9FF); /* Soft Blue Gradient */
  animation: animate1 1s infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.wrapper button span:nth-child(2),
.tStyle button span:nth-child(2),
.rclStyle button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #F9CEFF); /* Soft Pink Gradient */
  animation: animate2 1s infinite 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

/* Button Styles 2 - Pastel Pink and Blue Theme */
.tStyle button {
  background-color: #F9CEFF; /* Primary Pink */
  color: #805D93; /* Softer Purple */
  border-radius: 50px;
  border: 2px solid #F9CEFF;
}

.tStyle button:hover {
  background-color: #D8F9FF; /* Primary Blue on Hover */
  color: #518FBA; /* Softer Blue */
  box-shadow: 0 0 10px #D8F9FF, 0 0 20px #D8F9FF, 0 0 40px #D8F9FF;
}

.tStyle button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40px;
  width: 0;
  height: 100%;
  background: #D8F9FF; /* Light Blue before effect */
  transform: skewX(35deg);
  transition: 0.5s;
  z-index: -1;
}

.tStyle button:hover::before {
  width: 120%;
}

#capital:hover {
  text-transform: uppercase;
}

#small:hover {
  text-transform: lowercase;
}

#bold:hover {
  font-weight: 900;
}

#italic:hover {
  font-style: italic;
}

/* Button Styles 3 - Soft Pink and Blue Theme */
.rclStyle button {
  background-color: #D8F9FF; /* Soft Blue */
  color: #518FBA; /* Soft Blue Accent */
  border-radius: 50px;
  border: 2px solid #AEEAFF;
}

.rclStyle button:hover {
  background-color: #F9CEFF; /* Switch to Pink */
  color: #805D93; /* Soft Mauve Accent */
  box-shadow: 0 0 10px #F9CEFF, 0 0 20px #F9CEFF, 0 0 40px #F9CEFF;
}

.rclStyle button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40px;
  width: 0;
  height: 100%;
  background: #F9CEFF; /* Pink before effect */
  transform: skewX(35deg);
  transition: 0.5s;
  z-index: -1;
}

.rclStyle button:hover::before {
  width: 120%;
}

/* Other border animations remain the same */
.wrapper button span:nth-child(3),
.tStyle button span:nth-child(3),
.rclStyle button span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #F9CEFF); /* Pink */
  animation: animate3 1s infinite 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  100% {
    right: 100%;
  }
}

.wrapper button span:nth-child(4),
.tStyle button span:nth-child(4),
.rclStyle button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #D8F9FF); /* Blue */
  animation: animate4 1s infinite 0.75s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 100%;
  }
}

.quick-action-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}

.quick-action-content {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 12px;
  padding: 30px;
  width: 90%;
  max-width: 350px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.quick-action-content h2 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
}

.quick-action-content h2 i {
  margin-right: 10px;
  color: #03e9f4;
}

.quick-action-close {
  position: absolute;
  top: 15px;
  right: 20px;
  color: #888;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.quick-action-close:hover {
  color: #fff;
}

.modal-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.modal-item:hover {
  background: rgba(3, 233, 244, 0.1);
  border-color: #03e9f4;
  transform: translateX(5px);
}

.modal-item i {
  color: #03e9f4;
  font-size: 20px;
  margin-right: 15px;
  width: 25px;
  text-align: center;
}

.modal-item span {
  color: #fff;
  font-size: 16px;
}

.dark-mode .quick-action-content {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

@media (max-width: 768px) {
  .quick-action-content {
    width: 95%;
    padding: 25px 20px;
  }

  .quick-action-content h2 {
    font-size: 20px;
  }

  .modal-item span {
    font-size: 14px;
  }
}