@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&display=swap');

:root{
    /* FONTS */
    --font-type: "Poppins", sans-serif;
    --h1-fontWeight: 700;
    --h1-fontSize: 2rem;
    --normalText-fontSize: 1.3rem;
    --smallText-fontSize: 1.1rem;
    --normalText-fontWeight: 400;

    /* COLOURS */
    --bg-colour: #FFFFFF;
    --text-colour: #E5F4E3;
    --btn-colour: #F06449;
    --sub-colour: #1B1B3A;

    --margin-80: 80px;
    --margin-50: 50px;
    --margin-30: 30px;
    --margin-15: 15px;
    --margin-10: 10px;
    --margin-5: 5px;
}
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      outline: none;
    }
html, body{
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}
/* Resusable Classes */
.width-small{
    width: 50%;
}
.width-med{
    width: 75%;
}
.width-big{
    width: 87%;
}
.width-large{
    width: 90%;
}
.text-center{
    text-align: center;
}
.bg-sub{
    background-color: var(--sub-colour);
}
.row{
    flex-direction: row;
}
.column{
    flex-direction: column;
}
.element-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.h1{
    font-family: var(--font-type);
    font-weight: var(--h1-fontWeight);
    font-size: var(--h1-fontSize);
    color: var(--text-colour);
}
.small-header{
    font-family: var(--font-type);
    font-weight: var(--h1-fontWeight);
    font-size: var(--normalText-fontSize);
    color: var(--sub-colour);
}
.show{
    display: block;
}
.p{
    font-family: var(--font-type);
    font-weight: var(--normalText-fontWeight);
    font-size: var(--smallText-fontSize);
    color: var(--bg-colour);
    margin-top: var(--margin-5);
}
.btn{
    border-radius: 10px;
    padding: 10px 40px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    font-size: var(--normalText-fontSize);
}
a{
    text-decoration: none;
}
.hero-image{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
}
.hero-image>*{
    padding: 3px 5px;
}
.hero-image>a{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#hero1{
    background-image: url('./images/1.png');
}
#hero2{
    background-image: url('./images/2.png');
}
#hero3{
    background-image: url('./images/3.png');
}
a.get-started{
    width: 300px;
    height: 80px;
    background-color: var(--btn-colour);
    margin-top: var(--margin-80);
}
.carousel, .section {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Fullscreen */
    overflow: hidden;
}

.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.carousel-slide.active {
    pointer-events: auto;
    opacity: 1;
}
#hire-artisans, #get-customers, #coming-soon{
    width: 260px;
    height: 70px;
    margin-top: var(--margin-30);
}
#hire-artisans{
   background-color: var(--sub-colour);
}
#get-customers{
    border: 2px solid var(--btn-colour);
    color: var(--sub-colour);
}
#coming-soon{
    background-color: var(--sub-colour);
    border: 2px solid var(--text-colour);
    color: var(--text-colour);
}
#artisansForm-section h4{
    color: var(--text-colour);
    padding: 10px 5px;
    margin: var(--margin-30) auto;
}
#otherSkillField, .phone-input, form{
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
form{
    padding: 15px 50px;
    width: fit-content;
    margin-bottom: var(--margin-30);
}
form>label, form>div{
    font-family: var(--font-type);
    font-size: var(--smallText-fontSize);
    font-weight: var(--normalText-fontWeight);
    color: var(--text-colour);
}
form>input, form>select, form>textarea, form #phone, #otherSkill{
    width: 250px;
    height: 55px;
    border-radius: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--text-colour);
    color: var(--text-colour);
    background-color: var(--sub-colour);
    margin-bottom: var(--margin-30);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(27, 27, 58, 0.8);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 20px 10px rgba(255, 255, 255, 0.1);
}
#otherSkillField, .phone-input{
    width: 250px;
}
.phone-input{
    margin-bottom: var(--margin-30);
}
form>input:focus, form>select:focus, form>textarea:focus{
    color: var(--sub-colour);
    background-color: var(--text-colour);
}
form>textarea{
    height: 120px;
}
form>input::placeholder, form>textarea::placeholder{
    color: var(--text-colour);
    opacity: 0.7;
    padding: 2px 8px;
}

form>button{
    width: 250px;
    height: 70px;
    color: var(--text-colour);
    background-color: var(--btn-colour);
    margin: 10px auto;
}
.glass-card {
  background: rgba(27, 27, 58, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(27, 27, 58, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 20px 8px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(27, 27, 58, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(27, 27, 58, 0.8),
    transparent,
    rgba(27, 27, 58, 0.3)
  );
}
.hide{
    display: none !important;
}

/* FOR LARGER SCREENS */

@media screen and (width>992px) {
    :root{
    /* FONTS */
        --h1-fontSize: 3.4rem;
        --normalText-fontSize: 1.7rem;
        --smallText-fontSize: 1.3rem;
    }
    .change-background{
        background-color: #801805;
    }
    .btn{
        cursor: pointer;
    }
    .hero-image{
        align-items: start;
    }
    .hero-image>*{
        padding: 3px 35px;
    }
    .hero-image>h3, .hero-image>p{
        width: 42%;
    }
    .hero-image>a{
        top: 75%;
        left: 20%
    }
    a.get-started:hover, #register-btn:hover{
        background-color: #801805 !important;
    }
    #hero1{
        background-image: url('./images/Desktop1.png');
    }
    #hero2{
        background-image: url('./images/Desktop2.png');
    }
    #hero3{
        background-image: url('./images/Desktop3.png');
    }
    #hire-artisans, #get-customers, #coming-soon{
        width: 320px;
        height: 90px;
    }
    #hire-artisans:hover, #get-customers:hover, #coming-soon:hover{
        transform: scale(1.05);
    }
    #coming-soon:hover{
        background-color: var(--text-colour);
        color: var(--sub-colour);
    }
}