/*







=====================================================







    01. GLOBAL & UTILITY STYLES







=====================================================







*/







body {







    font-family: 'Montserrat', sans-serif;







    margin: 0;







    padding: 0;







    display: flex;







    flex-direction: column;







    justify-content: center;







    align-items: center;







    height: 100vh;







    width: 100vw;







    overflow-x: hidden;







    overflow-y: auto;







    text-align: center;







    color: #ffffff;







    background: linear-gradient(135deg, #FF416C 0%, #FFC837 50%, #FF416C 100%);







    box-sizing: border-box;







}















/* Base styles for all links/buttons that float/stick */







.sticky-logo-link,







.sticky-mail-btn-left,







.sticky-phone-btn-right,







.sticky-login-btn,







.sticky-gtld-btn {







    position: fixed;







    border-radius: 50%;







    z-index: 1000;







    display: flex;







    align-items: center;







    justify-content: center;







    text-decoration: none;







    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;







    border: none;







    overflow: hidden;







    box-sizing: border-box;







    background: #FFFFFF;







}















/*







=====================================================







    02. MAIN CONTENT STYLES







=====================================================







*/







.domain-banner {







    max-width: 95%;







    padding: 20px 15px;







    box-sizing: border-box;







    position: relative;







    display: flex;







    flex-direction: column;







    align-items: center;







}















/* Fluid Typography */







.label {







    font-size: clamp(1.1em, 2.3vw, 1.6em);







    font-weight: 700;







    color: #FFEB3B;







    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 2px #000;







    margin-bottom: 10px;







    text-transform: uppercase;







}















.domain {







    font-family: 'Montserrat', sans-serif;







    font-size: clamp(1.8em, 7.5vw, 4.5em);







    font-weight: 900;







    padding: 5px 10px;







    margin: 10px 0 25px;







    text-shadow: 0 0 10px #00F6FF, 0 0 25px rgba(0, 246, 255, 0.8), 0 0 40px rgba(0, 246, 255, 0.6);







    color: #FFFFFF;







    line-height: 1.1;







    white-space: nowrap;







    word-break: keep-all;







}















/* Price Ribbon */







.price-ribbon {







    position: relative;







    z-index: 10;







    background-color: #C0392B;







    color: #FFEB3B;







    padding: 15px 40px;







    border-radius: 8px;







    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 235, 59, 0.8);







    font-family: 'Playfair Display', serif;







    font-size: clamp(1.8em, 5vw, 3em);







    font-weight: 900;







    text-shadow: 2px 2px 4px #000;







    display: inline-block;







    transform: rotate(-3deg);







    transition: transform 0.3s ease-in-out;







    border: 5px solid #FFEB3B;







    margin-bottom: 30px;







}















.price-ribbon:hover {







    transform: rotate(0deg) scale(1.05);







}















.price-ribbon::before,







.price-ribbon::after {







    content: '';







    position: absolute;







    bottom: -20px;







    border: 20px solid transparent;







}















.price-ribbon::before {







    left: 0;







    border-left-color: #8E241F;







    border-bottom-color: #8E241F;







}















.price-ribbon::after {







    right: 0;







    border-right-color: #8E241F;







    border-bottom-color: #8E241F;







}















/* Contact Banner */







.contact {







    font-size: clamp(1.8em, 4vw, 2.5em);







    font-weight: 900;







    color: #FFFFFF;







    background: rgba(0, 0, 0, 0);







    padding: 8px 15px;







    border-radius: 50px;







    margin-top: 0;







    margin-bottom: 30px;







    border: none;







    box-shadow: none;







    display: block;







    width: 100%;







    max-width: 90%;







    box-sizing: border-box;







    font-family: 'Montserrat', sans-serif;







    white-space: nowrap;







    overflow: hidden;







    text-overflow: ellipsis;







}















.contact .symbol {







    text-shadow: 0 0 10px #00F6FF, 0 0 20px rgba(0, 246, 255, 0.8), 0 0 30px rgba(0, 246, 255, 0.6);







    margin-right: 5px;







}















.contact a {







    color: #FFFFFF;







    text-shadow: 0 0 10px #00F6FF, 0 0 20px rgba(0, 246, 255, 0.8), 0 0 30px rgba(0, 246, 255, 0.6);







    font-weight: 900;







    text-decoration: none;







    line-height: 1.1;







    transition: color 0.3s, text-shadow 0.3s;







}















.contact a:hover {







    color: #C0392B;







    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);







    text-decoration: underline;







}















/* Promotional Block */







.other-domains-promo {







    max-width: 90%;







    margin: 0 auto 5px;







    padding: 20px;







    color: #FFFFFF;







    background: rgba(0, 0, 0, 0.7);







    border-radius: 20px;







    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.9);







    border: 4px solid #FFEB3B;







    display: block;







    width: 100%;







    box-sizing: border-box;







    font-family: 'Montserrat', sans-serif;







}















.promo-text {







    font-size: clamp(0.9em, 1.6vw, 1.1em);







    margin-bottom: 10px;







    font-weight: 500;







    color: #FFFFFF;







    text-shadow: none;







}















.other-domains {







    width: 100%;







    word-wrap: break-word;







    overflow-wrap: break-word;







}















.other-domains a {







    font-family: 'Montserrat', sans-serif;







    font-size: clamp(1em, 2.2vw, 1.3em);







    font-weight: 900;







    color: #FFEB3B;







    text-decoration: none;







    display: inline-block;







    margin: 5px 10px;







    transition: color 0.3s;







    text-shadow: none;







}







.other-domains a:hover {







    color: #FFFFFF;







    text-decoration: underline;







}















.owner-claim {







    margin-top: 15px;







    padding-top: 10px;







    border-top: 1px dashed #FFEB3B;







    font-size: clamp(0.75em, 1.5vw, 0.95em);







    font-style: italic;







    opacity: 0.9;







    color: #FFFFFF;







    text-shadow: none;







}







.owner-claim a {







    color: #FFEB3B;







    font-weight: 700;







    text-decoration: none;







    transition: color 0.3s;







}







.owner-claim a:hover {







    color: #FFFFFF;







    text-decoration: underline;







}















/*







=====================================================







    03. STICKY BUTTONS - ICONS & LOGO (MOBILE BASE)







=====================================================







*/















/* Logo Image Styling (Top Center) */







.sticky-logo-link {







    top: 30px;







    left: 50%;







    transform: translateX(-50%);







    display: block;







    overflow: visible;







    background: transparent;







}















.sticky-logo-link:hover {







    transform: translateX(-50%) scale(1.1);







}















.logo-image {







    width: 90px;







    height: 90px;







    object-fit: cover;







    display: block;







    border-radius: 50%;







    transition: box-shadow 0.3s, transform 0.3s;







    box-shadow:







        0 0 0 9px #FF416C,







        0 0 0 18px #FFEB3B,







        0 4px 12px rgba(0, 0, 0, 0.4);







}















.sticky-logo-link:hover .logo-image {







    transform: scale(1.0);







    box-shadow:







        0 0 0 9px #FFEB3B,







        0 0 0 18px #FF416C,







        0 6px 18px rgba(0, 0, 0, 0.6), 0 0 10px #FFC837;







}















/* Mail and Phone Icon Styles (Applies to the <img> tag)







   Mobile buttons are 96px wide, so we make the image 100px to guarantee coverage. */







.mail-image-icon,







.phone-image-icon {







    /* Simple fixed dimension to guarantee coverage, then use the container's overflow: hidden to mask it */







    width: 100px;







    height: 100px;







    object-fit: cover;







    display: block;







    border-radius: 50%;







}















/*







=====================================================







    04. STICKY BUTTONS - MOBILE PLACEMENT







=====================================================







*/















/* Mail Button (Left) - Mobile */







.sticky-mail-btn-left {







    top: 50%;







    transform: translateY(-50%);







    left: 20px;







    width: 96px;







    height: 96px;







    cursor: pointer;







    box-shadow:







        0 0 0 7px #FFEB3B,







        0 0 0 14px #FF416C,







        0 10px 25px 5px rgba(0, 0, 0, 0.4),







        0 0 30px 5px #FFC837;







}















.sticky-mail-btn-left:hover {







    transform: translateY(-50%) scale(1.15) rotate(-5deg);







    box-shadow:







        0 0 0 7px #FF416C,







        0 0 0 14px #FFEB3B,







        0 15px 40px 8px rgba(0, 0, 0, 0.6),







        0 0 45px 8px #FFEB3B;







}















/* Phone Button (Right) - Mobile */







.sticky-phone-btn-right {







    top: 50%;







    transform: translateY(-50%);







    right: 20px;







    width: 96px;







    height: 96px;







    cursor: pointer;







    box-shadow:







        0 0 0 7px #FFEB3B,







        0 0 0 14px #FF416C,







        0 10px 25px 5px rgba(0, 0, 0, 0.4),







        0 0 30px 5px #FFC837;







}















.sticky-phone-btn-right:hover {







    transform: translateY(-50%) scale(1.15) rotate(5deg);







    box-shadow:







        0 0 0 7px #FF416C,







        0 0 0 14px #FFEB3B,







        0 15px 40px 8px rgba(0, 0, 0, 0.6),







        0 0 45px 8px #FFEB3B;







}















/*







=====================================================







    05. DESKTOP/LARGE VIEWPORT STYLES







=====================================================







*/







@media (min-height: 600px) and (min-width: 768px) {







    body {







        transform: scale(0.95);







        transform-origin: center center;







        overflow-y: hidden;







        padding: 0;







    }















    /* Logo Image Styling (Top Center) - Desktop */







    .sticky-logo-link {







        top: 40px;







    }















    .sticky-logo-link .logo-image {







        width: 160px;







        height: 160px;







        box-shadow:







            0 0 0 10px #FF416C,







            0 0 0 20px #FFEB3B,







            0 10px 45px rgba(0, 0, 0, 0.9);







    }















    .sticky-logo-link:hover .logo-image {







        box-shadow:







            0 0 0 10px #FFEB3B,







            0 0 0 20px #FF416C,







            0 15px 60px rgba(0, 0, 0, 0.9), 0 0 20px #FFC837;







    }







    







    /* Mail and Phone Icon Styles - Desktop 







       Desktop buttons are 130px wide, so we make the image 140px to guarantee coverage. */







    .mail-image-icon,







    .phone-image-icon {







        width: 140px;







        height: 140px;







    }















    /* Login Button (Top Right) - Desktop */







    .sticky-login-btn {







        top: 40px;







        right: 40px;







        width: 80px;







        height: 80px;







        font-size: 3.5em;







        font-weight: 700;







        background: #FFEB3B;







        color: #FF416C;







        flex-direction: row;







        padding: 0;







        box-sizing: content-box;







        box-shadow:







            0 0 0 5px #FF416C,







            0 0 0 10px #FFEB3B,







            0 4px 15px rgba(0, 0, 0, 0.7);







    }















    .sticky-login-btn:hover {







        transform: scale(1.1);







        color: #FFEB3B;







        box-shadow:







            0 0 0 5px #FF416C,







            0 0 0 10px #FFFFFF,







            0 6px 25px rgba(0, 0, 0, 0.8), 0 0 15px #FF416C;







    }















    /* GTLD Button (Bottom Right) - Desktop */







    .sticky-gtld-btn {







        bottom: 40px;







        right: 40px;







        width: 160px;







        height: 160px;







        background: rgba(255, 255, 255, 0.1);







        padding: 10px;







        box-shadow:







            0 0 0 10px #FF416C,







            0 0 0 20px #FFEB3B,







            0 10px 45px rgba(0, 0, 0, 0.9);







    }















    .sticky-gtld-btn:hover {







        transform: scale(1.15) rotate(5deg);







        box-shadow:







            0 0 0 10px #FFEB3B,







            0 0 0 20px #FF416C,







            0 15px 60px rgba(0, 0, 0, 0.9), 0 0 20px #FFC837;







    }















    .sticky-gtld-btn .gtld-image {







        width: 70%;







        height: 70%;







        border-radius: 50%;







        object-fit: contain;







        display: block;







        margin-bottom: 0;







        border: 2px solid rgba(0, 246, 255, 0.5);







        transition: border-color 0.3s;







    }















    /* Mail Button (Left) - Desktop */







    .sticky-mail-btn-left {







        top: 50%;







        left: 40px;







        width: 130px;







        height: 130px;







        box-shadow:







            0 0 0 7px #FFEB3B,







            0 0 0 17px #FF416C,







            0 18px 45px 8px rgba(0, 0, 0, 0.5),







            0 0 40px 8px #FFC837;







    }















    .sticky-mail-btn-left:hover {







        transform: translateY(-50%) scale(1.1) rotate(-5deg);







        box-shadow:







            0 0 0 7px #FF416C,







            0 0 0 17px #FFEB3B,







            0 25px 60px 10px rgba(0, 0, 0, 0.7),







            0 0 55px 10px #FFEB3B;







    }















    /* Phone Button (Right) - Desktop */







    .sticky-phone-btn-right {







        top: 50%;







        right: 40px;







        width: 130px;







        height: 130px;







        box-shadow:







            0 0 0 7px #FFEB3B,







            0 0 0 17px #FF416C,







            0 18px 45px 8px rgba(0, 0, 0, 0.5),







            0 0 40px 8px #FFC837;







    }















    .sticky-phone-btn-right:hover {







        transform: translateY(-50%) scale(1.1) rotate(5deg);







        box-shadow:







            0 0 0 7px #FF416C,







            0 0 0 17px #FFEB3B,







            0 25px 60px 10px rgba(0, 0, 0, 0.7),







            0 0 55px 10px #FFEB3B;







    }



}