@import url("https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Smooch+Sans:wght@100..900&display=swap");

:root {
  --logo-maker-primary: #7f00ff;
  --logo-maker-secondary: #e100ff;
  --logo-maker-text-color: rgb(39, 39, 39);
}

#logo-maker {
  min-height: 150vh;
  width: 100%;
  padding-top: 250px;
  background: url(../img/logo_maker/bg-img.svg) center top / cover no-repeat;
  color: #383838;
}

* {
  font-family: "Kanit", serif;
}

.color-primary{
  color:transparent;
  background: var(--logo-maker-primary);  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, var(--logo-maker-secondary), var(--logo-maker-primary));  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, var(--logo-maker-secondary), var(--logo-maker-primary)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-clip: text;  
  

}

.step,
.sub-step {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.step.active,
.sub-step.active {
  display: block;
  opacity: 1;
}

.step:not(:nth-child(1)){
  background: #ffffff2b;
  padding: 30px;
  backdrop-filter: blur(4px);
  border-radius: 20px;
  border: 2px solid;
}

.logo-container {
  position: relative;
  z-index: 2;
}

.wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: white;
  border-radius: 100% 100% 0 0;
}

.floating-element {
  animation: float 6s ease-in-out infinite;
}

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

.progress-container {
  max-width: 300px;
  margin: 0 auto 2rem;
}

.steps-progress {
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.logo-maker-progress-bar {
  transition: width 0.5s ease-in-out;
}

.form-control {
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
}

.btn-create {
  border-radius: 25px;
  padding: 0.75rem 2rem;
  background-color: var(--logo-maker-primary);
  border: none;
  font-weight: 500;
  background: var(--logo-maker-primary);  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, var(--logo-maker-secondary), var(--logo-maker-primary));  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, var(--logo-maker-secondary), var(--logo-maker-primary)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}
.btn-create:hover {
  background: var(--logo-maker-secondary);  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, var(--logo-maker-secondary), var(--logo-maker-primary));  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, var(--logo-maker-secondary), var(--logo-maker-primary)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.decoration {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.btn-existing {
  border: 1px solid white;
  padding: 5px 20px;
  border-radius: 40px;
}

.btn-existing:hover {
  background: rgba(19, 19, 19, 0.621);
}

/* *************************************** */
/* *************************************** */
/* ***********Input Decoration************ */
/* *************************************** */
/* *************************************** */
/* *************************************** */

.input-container {
  position: relative;
  background: #ffffff;
  color: black;
}

.input {
  padding: 10px;
  height: 40px;
  border: 2px solid var(--logo-maker-text-color);
  border-top: none;
  border-bottom: none;
  font-size: 16px;
  background: transparent;
  width: 350px;
  outline: none;
  box-shadow: 7px 7px 0px 0px var(--logo-maker-text-color);
  transition: all 0.5s;
}

.input.input-lg {
  width: 500px;
}

.input::placeholder {
  color: rgb(0, 0, 0);
}

.input:focus {
  box-shadow: none;
  transition: all 0.5s;
}

.label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--logo-maker-text-color);
  transition: all 0.5s;
  transform: scale(0);
  z-index: 1;
}

.input-container .topline {
  position: absolute;
  content: "";
  background-color: var(--logo-maker-text-color);
  width: 0%;
  height: 2px;
  right: 0;
  top: 0;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus ~ .topline {
  width: 35%;
  transition: all 0.5s;
}

.input-container .underline {
  position: absolute;
  content: "";
  background-color: var(--logo-maker-text-color);
  width: 0%;
  height: 2px;
  right: 0;
  bottom: 0;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus ~ .underline {
  width: 100%;
  transition: all 0.5s;
}

.input-container input[type="text"]:focus::placeholder {
  color: transparent;
}
.input-container input[type="text"]:focus ~ .label {
  top: -20px;
  transform: scale(1);
  transition: all 0.5s;
}

.btn-create.btn-next {
  border-radius: 10px;
  padding: 0.55rem 1rem;
}

/* *************************************** */
/* *************************************** */
/* ***********Sub Steps******************* */
/* *************************************** */
/* *************************************** */
/* *************************************** */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&family=Dancing+Script&display=swap");

.style-card {
  background: white;
  border-radius: 10px 64px;
  color: black !important;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 300px;
  border: 1px solid #000000;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

.style-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.serif-font {
  font-family: "Playfair Display", serif;
}

.sans-serif-font {
  font-family: "Roboto", sans-serif;
}

.handwritten-font {
  font-family: "Dancing Script", cursive;
}

.style-card h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.style-card p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.6;
}

.style-card.active {
  border: 2px solid #007bff;
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}

.style-thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s ease;
  color: black;
}

.style-thumb:hover {
  border-color: #007bff;
  transform: scale(1.1);
}

.style-thumb.active {
  border: 2px solid #007bff;
  background: #f8f9fa;
}

.thumbnails-row {
  margin-bottom: 30px;
}

/* *************************************** */
/* *************************************** */
/* ***********Color Palletes************** */
/* *************************************** */
/* *************************************** */
/* *************************************** */

.palette-container {
}

.color-card {
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  border: 1px solid #7f7d7d;
  overflow: hidden;
  background: #ffffffb3;
}

.color-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.color-card.active {
  border: 2px solid #333;
}

.color-strip {
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 15px;
}

.color-segment {
  height: 50px;
  width: 100%;
  transition: all 0.3s ease;
}

.description {
  color: rgb(0, 0, 0);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-top: 10px;
}

/* Color Palettes */
.blue-palette .color-segment:nth-child(1) {
  background: #0066ff;
}
.blue-palette .color-segment:nth-child(2) {
  background: #4d94ff;
}
.blue-palette .color-segment:nth-child(3) {
  background: #99c2ff;
}
.blue-palette .color-segment:nth-child(4) {
  background: #e6f0ff;
}

.green-palette .color-segment:nth-child(1) {
  background: #00b894;
}
.green-palette .color-segment:nth-child(2) {
  background: #55ebd0;
}
.green-palette .color-segment:nth-child(3) {
  background: #a6f5e6;
}
.green-palette .color-segment:nth-child(4) {
  background: #e6faf7;
}

.purple-palette .color-segment:nth-child(1) {
  background: #9b51e0;
}
.purple-palette .color-segment:nth-child(2) {
  background: #bb86fc;
}
.purple-palette .color-segment:nth-child(3) {
  background: #d4b3fd;
}
.purple-palette .color-segment:nth-child(4) {
  background: #f3ebff;
}

.pink-palette .color-segment:nth-child(1) {
  background: #e91e63;
}
.pink-palette .color-segment:nth-child(2) {
  background: #f06292;
}
.pink-palette .color-segment:nth-child(3) {
  background: #f8bbd0;
}
.pink-palette .color-segment:nth-child(4) {
  background: #fce4ec;
}

.brown-palette .color-segment:nth-child(1) {
  background: #5d4037;
}
.brown-palette .color-segment:nth-child(2) {
  background: #8d6e63;
}
.brown-palette .color-segment:nth-child(3) {
  background: #bcaaa4;
}
.brown-palette .color-segment:nth-child(4) {
  background: #efebe9;
}

.orange-palette .color-segment:nth-child(1) {
  background: #ff4b2b;
}
.orange-palette .color-segment:nth-child(2) {
  background: #ff7e65;
}
.orange-palette .color-segment:nth-child(3) {
  background: #ffbcad;
}
.orange-palette .color-segment:nth-child(4) {
  background: #ffe8e0;
}

/* *************************************** */
/* *************************************** */
/* ***********Icons Step    ************** */
/* *************************************** */
/* *************************************** */
/* *************************************** */

.icons-container {
}

.search-container {
  max-width: 500px;
  margin: 0 auto 40px;
}

.icon-grid {
  max-width: 900px;
  margin: 0 auto;
}

.icon-item {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 10px;
  border: 1px solid #000000;
  color: black !important;
}

.icon-item svg path {
  fill: black;
}
.icon-item svg {
  fill: black;
}
.icon-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.icon-item.selected {
  background: #f8f9fa;
  border: 2px solid #007bff;
  transform: scale(1.1);
}

.icon-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.search-input {
  border-radius: 20px;
  padding: 12px 20px;
  font-size: 16px;
  border: 1px solid #ddd;
  width: 100%;
}

.search-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  border-color: #007bff;
}

.selected-count {
  font-size: 14px;
  color: #8a8a8a;
  text-align: center;
  margin-top: 20px;
}

/* Step 6 */

#step6 .card-body {
  height: 300px;
}




/* ************************************** */
/* ************************************** */
/* ************************************** */
/* ************************************** */
/* ***********     Responsive   ********* */
/* ************************************** */
/* ************************************** */
/* ************************************** */
/* ************************************** */



@media screen and (max-width: 1300px){
  .input-group {
    flex-direction: column;
    align-items:center;
    gap: 20px;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.btn-create {
  border-radius: 10px;
}
#logo-maker {
  padding-top: 175px;
}
}


@media screen and (max-width: 780px) {
  #logo-maker {
    min-height: 100vh;
  }
  .input.input-lg {
    width: 270px;
  }
  .input{
  width: 270px;
}
}