@import url("https://fonts.googleapis.com/css2?family=Poppins: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=Raleway:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

body {
  width: 100%;
  min-height: 100vh;
  font-family: "Urbanist";
  position: relative;
  background-image: url(../../../images/bg.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  padding: 55px 80px;
}

main {
  padding: 45px 40px;
  width: 100%;
  flex: 1;
  background-color: rgb(255, 255, 255);
  position: relative;
  border-radius: 60px;
  overflow: hidden;
  background-image: url(../../../images/overlay.png);
  background-size: cover;
  background-position: top right;
}
header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0 !important;
}
.logo {
  font-size: 40px;
  font-family: "Poppins";
  color: var(--secondary-color);
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  flex: 1;
  text-align: center;
}
.logo img {
  width: 18px;
  margin-right: 10px;
  vertical-align: middle;
}
.logo span {
  color: var(--primary-color);
}
.socialIcons {
  display: flex;
  gap: 5px;
  align-items: center;
}
.socialIcons a {
  font-size: 18px;
  color: rgb(47, 49, 70);
  text-decoration: none;
  border: solid 1px var(--secondary-color);
  border-radius: 50%;
  background-color: transparent;
  width: 49px;
  height: 49px;
  display: grid;
  place-content: center;
  transition: var(--transitions);
}
.socialIcons a:hover {
  background-color: var(--primary-color);
  border-color: transparent;
}
.obj {
  position: absolute;
  bottom: 0;
  right: -75px;
  pointer-events: none;
  width: 35%;
  height: auto;
}
.obj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wirzaH1 {
  font-size: 53px;
  font-weight: 800;
  color: var(--heading-color);
}
.wirzaDesc {
  font-size: 18px;
  color: var(--heading-color);
  font-weight: normal;
}
.gap {
  padding: 60px 0;
}
.selectService {
  width: 100%;
  height: 250px;
  margin-bottom: 25px;
  display: grid;
  place-content: center;
  padding: 20px;
  position: relative;
}
.selectService input {
  border: solid 2px rgb(237, 237, 237);
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  transition: var(--transitions);
  transform-style: preserve-3d;
}
.selectService i,
.selectService label {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.selectService i {
  font-size: 120px;
  text-align: center;
}
.selectService i.fa-wordpress {
  color: rgb(70, 67, 66);
}
.selectService i.fa-shopify {
  color: rgb(149, 191, 71);
}
.selectService i.fa-magento {
  color: rgb(244, 111, 37);
}
.selectService label {
  font-size: 22px;
  font-weight: 900;
  color: var(--heading-color);
  margin-top: 25px;
  text-align: center;
}
.selectService input:hover {
  border-color: rgb(0, 0, 0);
}
.selectService input:checked {
  border-color: rgb(0, 0, 0);
}
.selectService input::before {
  content: "\f058";
  font-size: 25px;
  color: var(--primary-color);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 0;
  right: 10px;
  transition: var(--transitions);
  opacity: 0;
}
.selectService input:checked::before {
  opacity: 1;
  top: 10px;
}
.selectService input::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--primary-color);
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--transitions);
  transform: translateZ(-1px);
}
.selectService input:checked::after {
  top: 10px;
}
.wirza-button {
  width: 20px;
  height: 45px;
  background-color: rgb(0, 0, 0);
  border-radius: 30px;
  padding: 0 25px;
  font-size: 16px;
  color: rgb(255, 255, 255);
  font-weight: 500;
  border: 0;
  margin-top: 20px;
}

.wirza-button i {
  margin-left: 10px;
}
fieldset {
  width: calc(100% - 28px);
  height: auto;
}
.radioSingle {
  border: solid 2px rgb(0, 0, 0);
  width: 100%;
  border-radius: 40px;
  min-height: 84px;
  padding: 15px 50px 15px 25px;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: start;
  background-color: rgb(255, 255, 255);
  position: relative;
  margin-bottom: 25px;
  background-color: rgb(255, 255, 255);
  transform-style: preserve-3d;
}
.radioSingle::before {
  content: "";
  width: 100%;
  height: 100%;
  transform: translateZ(-1px);
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--primary-color);
  transition: var(--transitions);
}
.radioSingle:hover::before {
  top: 10px;
}

.radioSingle input {
  appearance: none;
  border: solid 2px rgb(0, 0, 0);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  background-color: inherit;
}
.radioSingle:hover .mark .inputTooltip {
  opacity: 1;
}
.radioSingle input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  background-color: var(--primary-color);
  border-radius: inherit;
  transition: var(--transitions);
  opacity: 0;
}
.radioSingle input::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  border-radius: inherit;
  transition: var(--transitions);
  transform: translateZ(-1px);
}
.radioSingle label {
  font-size: 22.5px;
  font-weight: 800;
  color: rgb(99, 99, 99);
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.radioSingle input:checked::before {
  opacity: 1;
}
.radioSingle input:checked::after {
  top: 10px;
}
.selectType .swiper,
.selectType .swiper-slide {
  overflow: visible !important;
}
.selectType .swiper-slide.swiper-slide-prev {
  opacity: 0 !important;
}
.mark {
  position: absolute;
  top: 50%;
  position: 0;
  right: -33px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background-color: transparent;
}
.mark .questionBtn {
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border: solid 2px rgb(0, 0, 0);
  background-color: rgb(251, 253, 253);
  font-size: 20px;
  font-weight: 800;
  color: rgb(99, 99, 99);
  position: relative;
  z-index: 1;
}

.radioSingle:hover:after {
  top: 10px;
}
.inputTooltip {
  position: absolute;
  transition: var(--transitions);
  opacity: 0;
  display: flex;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: auto;
  height: auto;
  gap: 5px;
}
.inputTooltip p {
  padding: 45px 30px;
  background-color: var(--primary-color);
  border-radius: 30px;
  width: max-content;
  max-width: 320px;
  z-index: 10;
  font-size: 18px;
  color: var(--heading-color);
}
.inputTooltip span {
  border-radius: 50%;
  background-color: var(--primary-color);
}
.inputTooltip span:nth-child(1) {
  width: 30px;
  height: 30px;
  transform: translate(8%, 75px);
}
.inputTooltip span:nth-child(2) {
  width: 12px;
  height: 12px;
  transform: translate(8%, 65px);
}
.inputTooltip span:nth-child(3) {
  width: 21px;
  height: 21px;
  transform: translate(8%, 45px);
}
.nexPrev {
  width: 95%;
  height: auto;
  border-radius: 30px;
  border: solid 1px var(--secondary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.nexPrev button {
  height: 60px;
  background-color: transparent;
  flex: 1;
  border: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--secondary-color);
}
.nexPrev .swiper-button-disabled {
  opacity: 0.5;
}
.nexPrev button.next,
.sub {
  background-color: var(--primary-color) !important;
}

.inputField,
.select {
  border: solid 2px rgb(0, 0, 0);
  background-color: transparent;
  width: 100%;
  height: 85px;
  border-radius: 40px;
  position: relative;
  padding: 0 54px;
  margin-bottom: 40px;
  transition: var(--transitions);
}
.inputField input,
.select select,
.message textarea {
  width: 100%;
  height: 100%;
  border: 0;
  background-color: transparent;
  border-radius: inherit;
}
input::placeholder,
select::placeholder,
.message textarea {
  font-size: 15px;
  font-weight: 400;
  color: rgb(159, 159, 159);
}
.inputField label {
  border: solid 2px rgb(0, 0, 0);
  position: absolute;
  top: -25%;
  width: 105px;
  left: 25px;
  background-color: rgb(255, 255, 255);
  height: 30px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 17px;
  gap: 3px;
  border-radius: 15px;
  transition: var(--transitions);
}
.inputField input:focus,
.select select:focus,
.message textarea:focus {
  outline: none;
}
.inputField:focus-within {
  border-color: var(--primary-color);
}

.inputField:focus-within label {
  border-color: var(--primary-color);
}
.thankyou {
  flex: 1;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  min-width: 60%;
  margin: 0 auto;
}
.inner {
  width: 100%;
  position: relative;
  border: solid 1px var(--secondary-color);
  border-radius: 325px;
  text-align: center;
  padding: 95px 0 0 0;
}
.inner::before,
.inner:after {
  content: "";
  border: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.inner::before {
  transform: rotate(-3deg);
}
.inner::after {
  transform: rotate(3deg);
}
.wirzaBtn.paddingC {
  padding: 0 100px;
  top: 15px;
}

.socialIcons {
  display: flex;
  gap: 5px;
  align-items: center;
}
.socialIcons a {
  font-size: 18px;
  color: rgb(47, 49, 70);
  text-decoration: none;
  border: solid 1px var(--secondary-color);
  border-radius: 50%;
  background-color: transparent;
  width: 49px;
  height: 49px;
  display: grid;
  place-content: center;
  transition: var(--transitions);
}
.socialIcons a:hover {
  background-color: var(--primary-color);
  border-color: transparent;
}
.wirzaBtn {
  padding: 0 45px;
  border-radius: 27px;
  height: 53px;
  background-color: var(--primary-color);
  border: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--secondary-color);
  margin-top: 20px;
  transition: var(--transitions);
}

/* Flex container for buttons */
.buttonRow {
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;
  gap: 12px;                /* space between buttons */
  flex-wrap: nowrap;        /* keep them in one row */
  overflow-x: auto;         /* allow scroll if screen too small */
  padding: 10px 0;
}

/* Adjust button styling on small screens */
@media (max-width: 480px) {
  .wirza-button {
    font-size: 14px;   /* slightly smaller */
    padding: 8px 18px; /* reduce padding */
  }
}