/* GENERAL STYLES */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #f5f5f5;
    color: #f5f5f5;
    margin: 0;
    padding: 0;
    font-family: "League Spartan", serif;
}

.anchor{
    display:block;
    position:relative;
    top:-225px;
    visibility:hidden;
}

/* HEADER SECTION */
.header {
    width: 90%;
    padding: 2.5% 5% 2.5%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position:sticky;
    top:0;
    z-index:99;
}

/* LOGO */
.logo {
    width: 300px;
    max-width: 100%;
}

/* NAVIGATION */
.nav {
    display: flex;
    gap: 50px; 
    font-size: 22px;
    text-align: right;
}

/* NAVIGATION LINKS */
a.navi {
    text-decoration: none;
    color: #0000ff;
      background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 255, 1),
      rgba(0, 0, 255, .5)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

a.navi:hover {
    background-size: 0 3px, 100% 3px;
}

a.ai{
    color:#BF40BF;
    text-decoration:none;
}

a.ai:hover{
    text-decoration: underline solid 1px;
    text-decoration-color: #BF40BF;
    text-decoration-thickness: .25em;
    text-underline-offset: 10.5px;
}

/* MAIN CONTENT */
.content {
    width: 100%;
    margin: 0 auto;
    background-image:linear-gradient(
                    to bottom right, 
                    rgba(0, 0, 255, 0.4), 
                    rgba(0, 0, 255, 1)), 
                    url("digital_universe.png");
    background-repeat: no-repeat;
    position: relative;
    background-position-x: center;
    background-color: #f4bff7;
    padding-top:450px;
}

.content_a{
    max-width:1300px;
    margin:0 auto;
    padding:5%;

}

/* ABOUT SECTION */
.about {
    padding: 50px;
    margin: 0 auto;
    position: relative;

}


/* CONTENT B */
.content_b {
    max-width:1500px;
    padding-top:100px;
    margin:0 auto;
}


/* SERVICES */
.services {
    width: 95%;
    padding:2.5%;
}

.wrap_box{
    display: flex;
    margin:1% 2.5% 1%;
}

.box {
    width: 60%;
    padding:5%;
    text-align:left;
    color:#f5f5f5;
    font-size: 30px;
    margin-top:50px;
}

.box_right, .box_left{
    width:30%;
    padding:5%;
}

.box_write{
    background-image:
        url("writing.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.box_reputation{
    background-image:url("reputation.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.boxrtext{
text-align: right;
}

.box_design{
    background-image: url("design.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.boxp{
    font-size: 36px;
    line-height:46px;
    color:#0000ff;
    margin-top:10px;
}


/* BOOKING */

.bottom{
background-image:linear-gradient(
                    to bottom, 
                    rgba(0, 0, 255, 1), 
                    rgba(0, 0, 187, .85)), 
                    url("footerverse.png");
                    background-repeat: no-repeat;
                    background-position: bottom;
}

.greeter{
    width:70%;
    margin:0 auto;
    padding-top:50px;
    margin-bottom:-25px;

}

.booking{
    margin-top:50px;
    width:100%;
    font-size: 35px;
}

.bookform{
    margin:0 auto;
    width:60%;
    text-align: left;
    padding:100px;
}

form {
    max-width: 800px;
    margin: 20px auto;
    padding: 25px;
    border-radius: 5px;
}

label {
    display: block;
    padding-top: 25px;
    padding-bottom:10px;
}

input{
    width:95%;
    height:50px;
    margin-top:10px;
    margin-bottom:30px;
    font-family: "League Spartan", serif;
    font-size: 25px;
    padding:2.5%;
    color:#0000ff;
    border:none;
}

textarea{
    width:100%;
    height:50px;
    margin-top:10px;
    margin-bottom:20px;
}

form button {
    background-color: transparent;
    color:#fff;
    font-size: 25px;
    padding: 25px;
    border: 1px solid #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: block; 
    margin: 0 auto;
    width:30%;
    min-width:200px;
    font-family: "League Spartan", serif;
    transform: translateY(50px);
}

form button:hover {
    background-color: #f5f5f5;
    transform: scale(1.05);
    color:#0000ff;
    transform: translateY(50px);
}

form button:active {
    background-color: #BF40BF;
    transform: translateY(50px);
}

fieldset {
    border: none;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 25px;
    width: 15%;
}

.checkbox-group input[type="checkbox"] {
    appearance: none;
    width: 30px;
    height: 30px;
    background-color: white;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    border:solid 1px #fff;
}

.checkbox-group input[type="checkbox"]:checked {

}

.checkbox-group input[type="checkbox"]:checked::before {
    content: '𐄂';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #0000ff;
    font-weight: bold;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    top: 0px;
}

.checkbox-group .checkbox-item:first-child {
    justify-content: flex-start;
}

/* TURNSTILE */

  #turnstile-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top:25px;
  }

  .cf-turnstile {
    margin:0 auto;
  }

/* FOOTER */

.footer{
    padding-top:200px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
    height:30px;
    color: white;
    font-size: 14px;
    font-size:20px;
    text-align: center;
    letter-spacing: 1px;
}

/* HEADINGS */
h1 {
    font-family: "League Spartan", serif;
    font-size: 65px;
    line-height: 65px;
    color: #f5f5f5;
    margin: 0;
    font-weight:bold;
}

h2 {
    font-family: "League Spartan", serif;
    font-size: 55px;
    line-height: 65px;
    color: #f5f5f5;
    margin: 0;
    font-weight:normal;
    letter-spacing: .5px;
}

h3 {
    font-family: "League Spartan", serif;
    font-size: 75px;
    line-height: 65px;
    color: #0000ff;
    margin: 0;
    font-weight:normal;
    text-align:center;
}

h4{
    font-family: "League Spartan", serif;
    font-size: 55px;
    line-height: 60px;
    color: #0000ff;
    margin: 0 0 0 0;
}
h5{
    font-family: "League Spartan", serif;
    font-size: 65px;
    line-height: 60px;
    color: #fff;
    margin:0 0 0 0;
}

h6{
    font-family: "League Spartan", serif;
    font-size: 40px;
    color: #fff;
    margin: 10px 0 0 0;
    font-weight: normal;
}


/* OTHER */

hr{
    color:#fff;
    margin-top:50px;
    margin-bottom:50px;
}

/* MOBILE RESPONSIVENESS */


@media (max-width: 575.98px) { 

}


@media (max-width: 767.98px) {     
    .header {
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding-top:25px;
        padding-bottom:25px;
    }
    .nav {
        gap: 35px;
        margin-top: 15px;
        font-size:25px;
    }
    .content{
        padding-top:50px;
        padding-bottom:150px;
    }
    .about {
        width: 65%;
    }
    h1{
        font-size:60px;
    }
    h2{
        font-size:35px;
        line-height: 40px;
    }
    .ethos{
        margin-top:100px;
        width:75%;
    }
    .logo {
        width: 300px;
    }
    .button1{
        width:80%;
    }
    .about {
        top: 100px; 
    }
    .checkbox-group label {
        font-size:20px;
    }

}


@media (max-width: 991.98px) {
    .wrap_box{
        flex-direction: column;
    }
    .a1{
        order:1;
    }
    .a2{
        order:2
    }
    .box_reputation, .box_write, .box_design{
        width:90%;
        height:150px;
    }
    h3{
        padding-bottom: 50px;
    }
    .box p{
        font-size: 30px;
        line-height:35px;
    }
}



@media (max-width: 1399.98px) { 
    .services{
        display:unset;
    }
    .about {
        width: 80%;
    }
    .box {
        width:80%;
        margin:5%;
        padding:5%;
    }
    .booking{
        margin-top:0px;
    }
    .bookform{
    margin:0 auto;
    width:80%;
    padding:5%;
    }
 }