@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/*#region Master*/

:root {
    --main-colour: #e3c474;
    --off-black: #1c1c1c;
    --text-gray: #737373;
    --dark-blue: #222831;
    --screen-sm-padding: 45px 0;
    --screen-lg-padding: 75px 0;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(145deg, #6799c8 0%, #1a3c8a 100%);
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

a, input {
    outline: 0;
    text-decoration: none;
}

/*#endregion*/

/*#region Landing Page*/

.domain-hosting {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 60px 0;
}

    .domain-hosting h2 {
        font-size: 28px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 20px;
    }

    .domain-hosting p {
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 25px;
    }

    .domain-hosting .services {
        display: flex;
        justify-content: center;
        align-items: stretch;
        height: 100%;
    }

.service-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 18px;
    padding: 25px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
}

    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
        background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .service-card h2 {
        font-size: 1.7em;
        font-weight: 600;
        color: #1a3c8a;
        margin-bottom: 15px;
    }

    .service-card p {
        font-size: 14px;
        color: var(--text-gray);
        margin-bottom: 20px;
        flex-grow: 1;
    }

    .service-card a {
        display: inline-block;
        padding: 12px 25px;
        background: linear-gradient(90deg, #6799c8 0%, #3b6cbb 100%);
        color: #fff;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 400;
        font-size: 14px;
        transition: background 0.3s ease, transform 0.3s ease;
    }

        .service-card a:hover {
            background: linear-gradient(90deg, #1a3c8a 0%, #6799c8 100%);
            transform: scale(1.05);
        }

/*#endregion*/



/*RESPONSIVE STYLES PER BREAK POINT*/

/* SM Screen (600px and up) */
@media (min-width: 600px) {
}


/* MD Breakpoint (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* LG Breakpoint (tablets, 992px and up) */
@media (min-width: 992px) {
}


/* Normal Screen 18 Inch - 19 Inch ( (Resolution 1366x768 ) 1349px and up) */
@media (min-width: 1349px) {

    /*#region Landing Page*/

    .domain-hosting h2 {
        font-size: 50px;
    }

    .domain-hosting p {
        font-size: 18px;
    }

    .service-card p {
        font-size: 16px;
    }

    /*#endregion*/

}

/*High Definition Plus (HD+) ( (Resolution 1600x900), 1600px and up) */
@media (min-width: 1600px) {
}

/*Extra Large Screen 23 Inch ( (Resolution 1920x1080 ) 1800px and up) */
@media (min-width: 1800px) {
}

/*Extra Large Screen 27 Inch ( (Resolution 2560x1440 ) 2560px and up) */
@media (min-width: 2560px) {
}

/*Extra Large Screen 32 Inch ( (Resolution 3840x2160 ) 3840px and up) */
@media (min-width: 3840px) {
}