@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
    --text-black: #1c1c1c;
    --vanto-blue: #004166;
    --vanto-light-blue: #00acdd;
    --vanto-grey: #646564;
    --vanto-blue-grey: #E1E6EF;
    --text-grey: #5b5675;
}

html, body, form {
    height: 100%;
}

.card-img, .card-img-bottom, .card-img-top {
    width: auto;
    max-height: 60px;
    margin: 0 auto;
    display: flex;
}

.domain-hosting {
    position: relative;
    display: block;
    background-image: url('https://www.vanto.co.za/media/domain_bg.jpg');
    background-size: cover;
    background-position: unset;
    height: unset;
    padding:75px 0;
}

.hosting-text {  
    text-align: right;
}

.domain-hosting h1 {
    font-family: 'myriad-pro';
    font-size: 65px;
    color: #FFF;
    text-transform: uppercase;   
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0;
    line-height: 60px;
}

.domain-hosting h2 {
    font-family: 'myriad-pro';
    font-size: 55px;
    color: #FFF;
    text-transform: uppercase;
    line-height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0;
}

.domain-hosting h3 {
    font-family: 'myriad-pro';
    font-size: 40px;
    color: #FFF;
    text-transform: uppercase;
    line-height: 45px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0;
}

    .domain-hosting h3 span {
        font-size: 55px;
    }

.domain-hosting .contact {
    font-family: 'Inter';
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    /*    background-color: #fff;*/
    border-radius: 5px;
    padding: 10px;
    margin-top: 25px;
}

/*#region Main Services*/

.domain-hosting .padding-box {
    padding: 15px 15px 0px 15px;
    margin-bottom: auto;
}

    .domain-hosting .padding-box img {
        max-height: 202px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
    }

.main-service-item {
    transition: 0.5s;
    background-color: rgba(255, 255, 255,0.85);
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

    .main-service-item .item-content a:hover {
        color: var(--vanto-blue);
    }

    .main-service-item .item-content p {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-grey);
        line-height: 33px;
        padding-top: 5px;
        margin-bottom: 0px;
    }

.btn-main-services {
    background-color:var(--vanto-blue);
    color: #fff;  
    text-decoration: none;
    font-size: 16px;
    padding: 10px;
    font-weight: 700;
    text-align: center; 
    padding: 18px;
    display: block;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*#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) {

    .domain-hosting {
        height: 100%;
        background-position: top right;
    }

    .hosting-text {
        position: absolute;
        top: 14%;
        right: 5%;

    }

    .domain-hosting h1 {
        font-size: 100px;      
        padding-left: 0px;
        padding-right: 0px;
        line-height: 50px;
    }

    .domain-hosting h2 {
        font-size: 70px;
        line-height: 100px;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .domain-hosting h3 {
        font-size: 50px;
        line-height: 30px;
        padding-left: 0px;
        padding-right: 0px;
    }

        .domain-hosting h3 span {
            font-size: 70px;
        }

    .domain-hosting .contact {
        font-size: 22px;
        margin-top: 0px;
    }

    .main-service-item .item-content p {
        font-size: 14px;      
    }

    .main-service-item {
        margin-bottom: 0px;
    }

}

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

    /*#region Main Services*/

    .main-service-item .item-content p {
        font-size: 16px;
    }

    .btn-main-services {
        color: var(--vanto-blue);
        background-color: unset;
    }

        .btn-main-services:hover {
            color: #fff;
            background-color: var(--vanto-blue);
            transition: all 0.3s ease;         
        }

    /*#endregion*/

}


@media (min-width: 1280px) {

    .domain-hosting {
        height: auto;
        padding: 135px 0;
    }

    .hosting-text {
        position: relative;     
    }

    /*#region Main Services*/

    .domain-hosting .contact {
        margin-top: 125px;
    }

    .domain-hosting .padding-box img {
        max-height: 60px;
    }

    /*#endregion*/
}

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

    .domain-hosting {     
        padding: 125px 0;
    }

    .hosting-text {
        top: 6%; 
    }

    /*#region Main Services*/

    .domain-hosting .contact {
        margin-top: 125px;
    }

    .domain-hosting .padding-box img {
        max-height: 60px;
    }

    /*#endregion*/
}

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

    .domain-hosting {
        height: 100%;
        padding: 90px 0;
    }

    .hosting-text {
        position: absolute;
        top: 15%;
    }

}

/*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) {
    .hosting-text {      
        top: 16%;
    }
}

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

    .hosting-text {
        top: 21%;
    }

}