/* Global styles */

/* CSS Variables */
.template-form-page .form-page {
    display: none;
}

@media (min-width : 768px) {

    /* .navigation__logo {
        width: 17% !important;
        height: auto;
    }

    .navigation__logo::after {
        height: auto !important;
    } */

    .homepage .promo {
        margin-top: -5rem;
        /* Assuming 1rem = 16px */
        padding: 4.6875rem 3.75rem 2.5rem;
        /* 75px, 60px, 40px converted to rem */
    }

    .homepage .promo-text {
        padding: 0;
        width: 97% !important;
    }

    .homepage .promo h2 {
        font-size: 43px !important;
    }

    /* .card-domains-search {
        background: url(/media/images/bg-domain.png) center center no-repeat;
        background-size: contain;
        background-color: #fff;
    }

    .card-domains-search {
        background-color: rgb(255, 255, 255);
        margin-top: -145px;
        padding: 50px 50px 30px 50px;
        border-radius: 15px;
        border: 1px solid #cccccc30;
    } */

    /* .input-group-wrapper {
        margin: 15px 0;
        padding: 6px;
        background-color: rgba(255, 255, 255, 0);
        border: 1px solid #ced4da;
        border-radius: 10px;
    }

    .input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
    } */

    /* .input-group>.form-control,
    .input-group>.form-control-plaintext {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin-bottom: 0;
        padding: 28px;
        font-size: x-large;
        transition: border-color 0.3s ease;
    } */

    /* .form-control {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin-bottom: 0;
        padding: 28px;
        font-size: x-large;
        transition: border-color 0.3s ease;
    }

    .form-control:focus-within {
        border-color: var(--mypa-green);
        /* Change this to your desired color 
    } */

    .input-group-wrapper input.form-control {
        border: 0 !important;
        box-shadow: none;
    } */

    .input-group-append.d-none.d-sm-block {
        padding: 4px;
    }

    .form-control {
        background-color: rgba(255, 255, 255, 0.15);
    }

    #promo-row {
        margin-top: 100px;
    }

    /* .input-group-append .btn {
        padding: 12px 30px;
        font-size: inherit;
        background-color: var(--mypa-green);
        border-color: var(--mypa-green);
        font-weight: 600;
    } */

    /* .card-domains-search .btn {
        border-radius: 10px !important;
    } */

    .card-domain {
        border-radius: 5px;
        padding: 20px;
    }

    .domain-name img {
        margin: auto;
        height: 30px;
        width: auto !important;
    }

    .domain-price {
        display: block;
        font-weight: 300;
        font-size: 1.3em;
        font-family: "Roboto", sans-serif;
        text-align: center;
        color: #71717a;
    }

    .homepage .promo-row {
        padding-top: 55px !important;
        margin-right: -45px;
    }

    /* .homepage .hero {
        margin: 0;
        padding: 95px 0 30px !important;
    } */

    /* .col-md-6.col-md-offset-1.col-lg-5.home-hero {
        width: 66% !important;
        margin-left: 0.333333% !important;
        padding-bottom: 15% !important;
    } */

    .homepage .promo {
        background: var(--mypa-golden-brown) !important;
        margin-top: -70px !important;
        margin-right: -120px;
        padding: 78px 60px 40px !important;
    }

    .listing-card__contents {
        padding-left: 25px !important;
        padding-top: 0px !important;
    }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                /* .listing-card .listing-card__title {
        margin-bottom: 0px;
        color: var(--mypa-golden-brown) !important;
    */

    /* .homepage .home-hero .hero-cta-link {
        color: var(--white);
        background-color: var(--mypa-golden-brown) !important;
        font-weight: 700;
        padding: 0.66em 1.5625em !important;
        display: inline-block;
        vertical-align: middle;
        transition: color ease 0.1s,
            background-color ease 0.1s;
        font-size: larger;
        border-radius: 10px;
    }

    .hero-image {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: fill !important;
    } */

    /* .hero h1 {
        color: var(--white);
        position: relative;
        font-size: 3.6rem !important;
    } */

    .navigation__search-input {
        color: var(--dark);
        font-size: var(--font-sm);
        line-height: 1.5;
        border: 1px solid var(--dark);
        padding: 10px;
        border-radius: 10px;
    }

    /* .navigation-top {
        height: 34px;
        background: #2e3133;
    } */

    /* .blinking-light {
        position: absolute;
        width: 25px;
        height: 25px;
        background: white;
        border-radius: 50%;
        animation: blink 2s infinite;
        filter: blur(7px);
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.2;
        }
    }

    .light1 {
        top: 59%;
        left: 98%;
    }

    .light2 {
        top: 57.7%;
        left: 87.2%;
    }

    .light3 {
        top: 63.4%;
        left: 51.8%;
    }

    .light4 {
        top: 33.5%;
        left: 76.7%;
    }

    .light5 {
        top: 62.4%;
        left: 71.6%;
    }

    .light6 {
        top: 50%;
        left: 65.1%;
    }

    .light7 {
        top: 86%;
        left: 86.1%;
    }

    .light8 {
        top: 0%;
        left: 70.6%;
    }

    .light9 {
        top: 90%;
        left: 6.1%;
        filter: blur(8px);
        background: color(display-p3 0.266 0.457 0.64);
    } */

    /* Intro */
    .container-intro .intro {
        text-align: center;
        margin: 70px 0;
        position: relative;
    }

    .container-intro .intro h2 {
        /* font-size: 2em; */
        margin-bottom: 110px;
    }

    .intro_row {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        margin-top: 50px;
    }

    .dots-bg {
        position: absolute;
        top: 3%;
        left: 50%;
        width: 100%;
        height: auto;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .intro_col {
        flex: 1;
        max-width: 300px;
        padding: 20px;
        position: relative;
        z-index: 2;
        margin: 0px 70px;
    }

    .intro_icon {
        margin-bottom: 20px;
        position: relative;
        display: inline-block;
    }

    .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        z-index: -1;
        transform: translate(-50%, -50%);
    }

    .circle.large {
        width: 168px;
        height: 168px;
        background: rgba(213, 223, 227, 0.25);
    }

    .circle.small {
        width: 123px;
        height: 123px;
        background: #d5dfe3;
    }

    .intro_item_title {
        font-size: 1.5em;
        margin-bottom: 10px;
        margin-top: 100px;
    }

    .intro_h3 {
        margin-top: 75px;
    }

    .intro_item_text p {
        color: #666;
        margin: 0px -34px;
        /* font-size: 1em;
            line-height: 1.5em; */
    }

    .intro_icon img {
        width: 55px;
    }

    .intro_button a {
        display: inline-block;
        margin-top: 30px;
        padding: 15px 30px;
        background: #000;
        color: #fff;
        text-decoration: none;
        border-radius: 25px;
        transition: background 0.3s;
    }

    .intro_button a:hover {
        background: #333;
    }

    /* Footer */
    .footer__icon a {
        color: var(--mypa-golden-brown) !important;
    }
}



/* } */

@media screen and (max-width: 550px) {
    .navigation__logo {
        width: 30%;
        height: auto;
    }

    .homepage .hero {
        margin: 0;
        padding: 20px 0 45px !important;
    }

    .input-group .form-control,
    .input-group .form-control-plaintext {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin-bottom: 0;
    }

    .input-group-wrapper input.form-control {
        border: 0 !important;
        box-shadow: none;
    }
}



/* Temp */