html {
    scroll-behavior: smooth;
}

/*#region grid */

@media (min-width: 1200px) {
    .container {
        max-width: 85%;
    }
}

/*#endregion grid */

/*#region fonts*/


body {
    font-size: calc(14px + 0.30vw); /* Responsive base font size */
}

@media(min-width:900px) {
    body {
        font-size: calc(14px + 0.20vw); /* Responsive base font size */
    }
}

@media(min-width:1200px) {
    body {
        font-size: calc(14px + 0.14vw); /* Responsive base font size */
    }
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
    font-weight: 600;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.50em;
    font-weight: 400;
}

h4 {
    font-size: 1.15em;
}

h5 {
    font-size: 1.10em;
}

h1, h2, h3, h4, h5, h6 {
    margin: calc(12px + 1.05vw) 0; /* Responsive margins */
}

p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    color: rgb(5, 10, 15);
    line-height: 160%;
}

a:hover {
    text-decoration: none;
}

.btn {
    background: rgba(240,0,90,1);
    color:#FFF;
    font-weight:600;
    padding:10px 20px;
    border-radius:20px;
}

.btn:hover {
    background: rgba(250,0,100,1);
    color: #FFF;
    font-weight: 600;
    padding: 10px 20px;
}

/*#endregion fonts*/

/*#region header */

.header {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    min-height: 90px;
}


.top-bar {
    display: flex;
    flex-direction: row;
    height: 90px;
    width: 92%;
    justify-content: flex-start;
    align-items: center;
}

    .top-bar .brand {
        display: flex;
        flex-direction: column;
        min-width: 180px;
        width: 20%;
        align-items: flex-start;
        justify-content: center;
        height: 100%;
    }

        .top-bar .brand img {
            max-width: 160px;
        }

        .top-bar .brand label {
            font-family: 'Courgette', cursive;
            font-size: 2.4em;
            font-weight: 600;
            letter-spacing: 2px;
            color: rgba(160,0,160,1);
            margin: 0px;
        }

            .top-bar .brand label span {
                font-size: 0.34em;
                font-weight: 600;
                color: rgba(80,0,80,1);
            }

        .top-bar .brand p {
            font-size: 0.9em;
            font-weight: 300;
            color: rgba(80,0,80,1);
            letter-spacing: 1.0px;
            margin: 0px;
            margin-left: 2px;
        }

    .top-bar .navigation {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        height: 100%;
        align-items: center;
        transition:all ease-in-out 0.25s;
    }

        .top-bar .navigation ul {
            list-style-type: none;
            margin: 0px;
        }

            .top-bar .navigation ul li {
                display: inline-flex;
                margin: 0px;
            }

                .top-bar .navigation ul li a {
                    color: #101010;
                    font-weight: 600;
                    text-transform: lowercase;
                    padding: 20px 8px;
                    font-size: 0.95em;
                }

    .top-bar .navigation_toggle {
        display: none;
        flex-direction:column;
        list-style-type:none;
        width:30px;
        justify-content: center;
        align-items: center;
        margin:0px;
        padding:0px;
        cursor:pointer;
    }

        .top-bar .navigation_toggle li {
            display:flex;
            width:30px;
            height:2px;
            background:#101010; 
            margin-top:5px;
        }

@media(max-width:1200px){
    .header {
        position:relative;
    }

    .header .top-bar {
        justify-content:space-between;
        align-items:flex-start;
        padding-top:20px;
    }

    .top-bar .navigation_toggle {
        display: flex;
        z-index:9999;
        margin-top:15px;
    }

    .top-bar .navigation {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction:column;
        justify-content:start;
        align-items:start;
        margin: 0px;
        padding: 0px;
        left: 0px;
        height:calc(100vh);
        z-index:9998;
    }

    .top-bar .navigation ul {
        display:flex;
        flex-direction:column;
        width:100%;
        background:#FFF;
        margin-top:90px;
        background:rgba(240,0,90,1);
        height:100vh;
    }

    .top-bar .navigation ul li a {
        color:#FFF;
    }

    .top-bar .navigation.active {
        opacity: 1;
        visibility: visible;
    }
}

/*#endregion */

/*#region hero */
.hero {
    display: flex;
    min-height: 320px;
    max-height: 800px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*background-image: url('../images/background-brandable-domain.jpg');
    background-position: top center;
    background-attachment: inherit;
    background-size:cover;*/
    background-color: rgba(240,0,90,1);
    flex-direction: column;
}

    .hero .content {
        width: 85%;
        display:flex;
        flex-direction:column;
    }
    .hero .search {
        width: 85%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start ;
    }

    .hero .search form {
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        width:100%;
        max-width:400px;    
    }

        .hero .search form input {
            padding:10px;
            border:1px solid #FFF;
            height:50px;
            width:calc(100% - 40px);
            border-radius:10px 0px 0px 10px;
        }

        .hero .search form i {
            display:flex;
            color: #000;
            margin: 0px 0px;
            font-size: 1.2em;
            background: #FFF;
            height: 50px;
            width: 50px;
            justify-content:center;
            align-items:center;
            border-radius:0px 10px 10px 0px;
        }

        .hero .search form button {
            background:none;
            margin:0px;
            padding:0px;
            border:0px;
            cursor:pointer;
        }

    .hero h1, .hero p {
    }

    .hero h1 {
        text-shadow: 0px 0px 30px rgba(255,255,255,0.25);
        color: #FFF;
        font-size: 2.2em;
        margin: 0px 0px 10px 0px;
    }

    .hero p {
        color: #FFF;
        font-size: 1em;
        max-width: 1000px;
    }

        .hero p b {
            font-size: 1.1em;
        }

        .hero p a {
            color: #FFFFFF;
            font-weight: 600;
        }

/*#endregion */

/*#region intro */
.intro {
    display: flex;
    flex-direction: column;
    padding: 50px 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.intro-section {
    box-shadow: 0px 0px 25px rgba(0,0,0,0.35);
    background: rgba(240,40,100,1);
}

.intro h1 {
    color: #FFF;
}

.intro p {
    color: #FFF;
}

.intro ul {
    display: inline-flex;
    padding: 20px 10px;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

    .intro ul li {
        display: flex;
        min-width: 200px;
        min-height: 100px;
        margin: 20px;
        background: rgba(255,255,255,1);
        border-radius: 20px;
        padding: 20px 50px;
        justify-content: center;
        align-items: center
    }

        .intro ul li:nth-of-type(odd) {
            background: rgba(230,240,250,1);
        }

/*#endregion */

/*#region how */
.how {
    background: rgba(240,245,250,1);
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .how h1 {
    }

    .how h3 {
        background: rgba(100,100,240,1);
        padding: 10px 20px;
        color: #FFF;
        font-weight: 800;
        font-size: 1.0em;
        text-transform: uppercase;
        letter-spacing: 2px;
        border-radius: 25px;
    }

    .how p {
        max-width: 1000px;
        display: inline-block;
    }

    .how ul {
        display: inline-flex;
        padding: 20px 10px;
        list-style-type: none;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        max-width: 1500px;
    }

        .how ul li {
            display: flex;
            min-width: 300px;
            min-height: 300px;
            max-width: 30%;
            width: 100%;
            margin: 20px;
            background: rgba(245,248,251,1);
            border-radius: 20px;
            padding: 50px 60px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border: 8px solid #FFF;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
        }

            .how ul li p {
                height: 120px;
            }

/*#endregion */

/*#region listing */

.listing {
    padding: 40px 20px;
}

    .listing > .col-12 {
        text-align: center;
    }

        .listing > .col-12 h1 {
            margin-top: 120px;
        }

.domains {
    display: flex;
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1500px;
    padding-bottom: 60px;
}

.headline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .headline h1, .headline p {
        text-align: center;
        max-width: 1000px;
    }

.domains ul {
    display: inline-flex;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width:100%;
}

    .domains ul li {
        display: flex;
        min-width: 17%;
        max-width: 17%;
        min-height: 360px;
        margin: 6px;
        padding: 0px;
        justify-content: center;
        align-items: flex-start;
        font-size: 1.2em;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: center;
        border: 8px solid #FFF;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
        border-radius: 6px;
    }

    #words .domains ul li {
        min-width: calc(25% - 24px);
    }

    .domains ul.with-text li {
        min-width: calc(33% - 24px);
        max-width: calc(33% - 24px);
        margin: 12px;
    }

    .domains ul li img {
        max-width: 100%;
        max-height:240px;
    }

    .domains ul li p {
        display: flex;
        padding: 15px 20px;
        margin: 0px;
        color: #101010;
        background: rgba(246,248,250,1);
        width: 100%;
        justify-content: center;
        align-items: center;
        min-height: 60px;
        font-size: 1em;
    }

        .domains ul li p span {
            font-size: 0.8em;
        }

    .domains ul.with-text li p {
        display: flex;
        flex-direction: column;
        min-height: 240px;
        align-content: flex-start;
        justify-content: flex-start;
    }

    .domains ul li label {
        display: flex;
        padding: 20px;
        margin: 0px;
        color: #303030;
        background: rgba(240,242,244,1);
        width: 100%;
        justify-content: center;
        align-items:center;
        font-size: 0.80em;
        font-weight: 700;
        height:30px;
    }

    .domains ul li label:nth-of-type(2) {
        font-weight:400;
        font-size:0.70em;
        padding:12px 20px 20px 20px;
    }

.domains ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}

/*#endregion */

/*#region questions */

#questions {
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 1340px;
}

    #questions h3 {
        margin: 0px 0px 20px 0px;
        font-weight: 500;
    }

    #questions p {
        padding: 40px;
        background: rgba(240,240,250,1);
        border-radius: 10px;
    }

@media(max-width:1399px) {
    #questions {
        max-width: calc(100% - 40px);
    }
}

.questions {
    display: flex;
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1500px;
}

    .questions ul {
        display: flex;
        width: 100%;
        padding: 20px 10px;
        list-style-type: none;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

        .questions ul li {
            display: flex;
            min-width: 100%;
            margin: 20px;
            background: rgba(230,235,240,1);
            border-radius: 10px;
            padding: 10px 20px;
            justify-content: center;
            align-items: center;
            font-size: 1.2em;
            flex-direction: column;
        }

/*#endregion */

/*#region contact */

.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px 100px 20px;
}

.container-fluid.contact{
    background:rgba(240,240,240,1);
}

.contact > .row {
    width: 80%;
    max-width: 1000px;
}

#contact p {
    text-align:center;
}

#contact label, #contact input, #contact textarea {
    display: flex;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
}

#contact input {
    padding: 24px 12px;
}

#contact label {
    margin-top: 30px;
    font-weight: 600;
    font-size: 0.9em;
}

#contact textarea {
    padding: 12px;
    height: 160px;
}

#contact .extra {
    padding: 20px;
}

#contact #submit {
    width: 100%;
    background: rgba(100,100,240,1);
    color: #FFF;
    padding: 15px 20px;
    font-size: 1.0em;
    font-weight: 600;
    margin-top:20px;
}

/*#endregion */

#about {
    background: rgba(0,100,250,0.05);
    padding: 0px 20px;
    text-align: left;
}

.about {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10%;
}


.footer {
    background: rgba(10,20,30,1);
    padding: 40px 20px;
}

    .footer sub, .footer p, .footer a {
        color: #FFF;
        font-size: 0.9em;
    }

        .footer p span {
            font-size: 0.9em;
        }

        .footer ul {
            display: flex;
            flex-direction: row;
            list-style-type: none;
            margin: 0px 0px 20px 0px;
            padding: 0px;
            justify-content: center;
            align-items: center
        }

    .footer ul li {
        display: flex;
        flex-direction: column;
        margin: 0px;
        padding: 10px 20px;
        width:fit-content;
    }

@media(max-width:990px) {
    h1 {
        line-height: 100%;
    }

    .top-bar .brand {
        padding-left: 0px;
    }

    .hero {
        min-height: 460px;
    }

        .hero h1 {
            max-width: 80%;
            line-height: 80%;
            font-size: 3.0em;
        }

        .hero p {
            max-width: 80%;
        }

    .intro ul li {
        display: block;
        margin: 10px 0px;
        padding: 24px 34px;
    }

    .how ul {
        padding: 0px;
    }

        .how ul li {
            max-width: 100%;
            padding: 30px;
            min-height: 200px;
        }

            .how ul li p {
                height: unset;
            }

    .how h3 {
        padding: 20px;
    }

    #contact label {
        margin-top: 10px;
    }

    .contact {
        padding: 40px 8px 60px 8px;
    }

        .contact > .row {
            width: 94%;
        }

    #contact label, #contact input, #contact textarea, #contact #submit, #contact iframe {
        max-width: 100%;
    }

    .domains ul li, .domains ul.with-text li {
        min-width: 44%;
        max-width: 44%;
    }

    .footer ul {
        display: flex;
        flex-direction: column;
    }
}

@media(max-width:495px) {

    h1 {
        font-size: 1.4em;
    }

    .domains ul li {
        margin: 4px;
        min-height: unset;
    }

    .domains ul li, .domains ul.with-text li {
        min-width: 44%;
        max-width: 44%;
    }

        .domains ul li p {
            font-size: 0.85em;
            padding: 10px;
            min-height: 40px;
        }

    .hero {
        min-height: 560px;
    }

    .domains ul.with-text li {
        margin: 4px;
    }

        .domains ul.with-text li p {
            min-height: 40px;
        }

            .domains ul.with-text li p span, .domains ul.with-text li p br {
                display: none;
            }

    #contact label, #contact input, #contact textarea, #contact #submit, #contact iframe, #contact form p {
        max-width: 100%;
        width: 100%;
    }
}

/* * * */

.landing-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    background-image: linear-gradient(75deg, rgba(90, 50, 240, 1) 0, rgba(100, 100, 240, 1) 50%);
}

.landing-container.fullscreen {
    height:100vh;
    align-items: center;
}

.landing-contact {
    display: flex;
    width: 64%;
    justify-content: center;
    align-items: flex-start;
}

.landing-container.fullscreen .landing-contact {
    height: 100%;
    align-items: center;
}


.landing-domain {
    display: flex;
    width: 36%;
    justify-content: center;
    align-items: flex-start;
    padding:20px 0px;
}


    .landing-domain h3 {
        color: #FFF;
        font-weight:300;
        font-size:1.8em;
    }

    .landing-domain a {
        color: #FFF;
        font-weight: 600;
    }

        .landing-domain a:hover {
            color: #FFF;
            font-weight: 600;
            text-decoration: underline;
        }

.landing-contact {
    background: rgba(245,245,250,1);
    padding: 60px 0px;
}

    .landing-contact table {
        width: 100%;
        margin: 10px 0px 0px 0px;
        border-bottom: 1px solid rgba(240,240,250,1);
    }

.landing-contact form {
    background:#FFF;
    padding:30px;
    max-width:100%;
}

    .fullscreen .landing-contact form {
        background: unset;
        padding:unset;
    }

    .landing-contact table th {
        background: #FFF;
        width: 25%;
        padding: 10px;
        font-size: 0.9em;
        text-align: center;
    }

    .landing-contact table tr:nth-of-type(1) th:nth-of-type(1) {
        background: rgba(240,40,100,1);
        color: #FFF;
        font-size: 1.4em;
        font-weight: 500;
        border-right: 2px solid #FFF;
    }

    .landing-contact table tr:nth-of-type(1) th:nth-of-type(2) {
        background: rgba(100,100,240,1);
        color: #FFF;
    }

    .landing-contact table tr:nth-of-type(2) th {
        background: rgba(240,240,250,1);
        color: #000;
    }

    .landing-contact table tbody td {
        background: rgba(250,250,255,1);
        color: #000;
        padding:20px 10px;
        font-weight:800;
        font-size:1.2em;
    }

#contact > table > tbody > tr > td > label {
    display: inline;
    font-size:0.65em;
    font-weight:400;
}

    .landing-contact table tbody td:not(:last-of-type) {
        border-right:1px solid rgba(240,240,250,1);
    }
    
    .landing-contact table td {
        background: #FFF;
        width: 25%;
        padding: 10px;
        font-size: 0.9em;
        text-align:center;
    }


.landing-container .landing-domain .domain {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.landing-container .landing-domain .domain ul {
    display:flex;
    list-style-type:none;
    width:100%;
    flex-wrap:wrap;
    gap:10px;
    margin:0px 0px 40px 0px;
    padding:0px;
}

    .landing-container .landing-domain .domain ul li {
        display: flex;
        list-style-type: none;
        padding: 10px 20px;
        border-radius: 20px;
        text-align: left;
        background: rgba(100, 100, 250, 1);
        font-size: .95em;
        font-weight: 700;
        color: #FFF;
    }

.landing-contact .contact {
    max-width: 800px;
    flex-direction: column;
    align-items: flex-start;
    width:100%;
}

    .landing-contact .contact h4, .landing-contact .contact h4 {
        padding: 0px;
        margin: 0px;
    }

.landing-container .landing-domain .domain img {
    max-width: 300px;
    border: 14px solid #FFF;
}

.landing-container .landing-domain .domain h1 {
    color: #FFF;
}

.landing-container .landing-domain .domain p {
    color: #FFF;
}

@media(max-width:1150px) {

    .landing-container.fullscreen {
        height: unset;
    }

    .landing-contact {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        height: unset;
        padding: 60px;
    }

    .landing-domain {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        height: unset;
        padding: 100px 20px;
    }
}

@media(max-width:450px) {
    .landing-contact {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        height: unset;
        padding: 40px 20px;
    }

    .landing-domain {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        height: unset;
        padding: 100px 0px;
    }
}

.breadcrumb {
    background: rgba(0,0,0,0.05);
    padding: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .breadcrumb .content {
        width: 85%;
    }

    .breadcrumb p {
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

        .breadcrumb p a {
            color: #303030;
            font-weight: 600;
        }

        @media(max-width:690px) 
        {
            .desktop-only {
                display: none;
            }
            .landing-contact form {
                padding: 30px 15px;
            }
        }

/* Google */
.grecaptcha-badge {
    display: none !important;
}

/*#region general */

#general {
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 1100px;
}

    #general h3 {
        margin: 0px 0px 20px 0px;
        font-weight: 500;
    }

@media(max-width:1399px) {
    #general {
        max-width: calc(100% - 40px);
    }
}

/*#endregion */