/*!
 * SPHERE FLEX
 * ALEX KOO
 * CREATED BY
 * BIT PIXEL STUDIO
 */

:root{
    --color-white: #ffffff;
    --color-title: #0000FF;
    --color-text-menu: #263AD4;
    --color-blue-light: #00A1FF;
    --color-blue-dark: #0367DD;
    --color-outline-green: #009084;
    --bg-green-light: #E9F0EF;
    --bg-green: #00998D;
    --bg-grey-lite: #EFEFEF;
    --bg-grey-heavy: #DFE0E1;
    --bg-grey-light: #E1E1E1;
    --bg-grey: #D9D9D9;
    --bg-grey-search: #9A9A9A;
    --bg-grey-dark: #C8C8C8;
    --bg-blue: #1C75B4;
    --bg-brown: #231F20;
    --bg-red: #B60F1E;
    --bg-yellow: #ECDB9B;
    --bg-overlay: rgba(0,0,0,0.61);

    --border-light-blue: #D4DAE5;

    --text-orange: #ECA72B;
    --text-grey: #808080;
    --text-grey-dark: #666666;
    --text-black: #000000;

    /*font family*/
    --bebas: 'bebas',san-serif;
    --brush: 'brush',san-serif;
    --heldustry: 'heldustry',san-serif;

    --mont-black: 'montserrat-black',san-serif;
    --mont-regular: 'montserrat-regular',san-serif;
    --mont-bold: 'montserrat-bold',san-serif;
    --mont-exbold: 'montserrat-extra-bold',san-serif;
    --mont-light: 'montserrat-light',san-serif;
    --mont-medium: 'montserrat-medium',san-serif;
    --mont-smbold: 'montserrat-semi-bold',san-serif;

    --myriad-smbold: 'myriad-semi-bold',san-serif;
    --myriad-bold: 'myriad-bold',san-serif;
    --opensans-bold: 'opensans-bold',san-serif;
    --opensans: 'opensans-regular',san-serif;

    /*font size*/
    --font-xxs: 12px;
    --font-xs: 14px;
    --font-sm: 16px;
    --font-md: 20px;
    --font-lg: 24px;
    --font-xl: 28px;
    --font-xxl: 32px;
    --font-3xl: 36px;
    --font-4xl: 40px;
    --font-5xl: 44px;
    --font-6xl: 48px;
}



/*!
 * HEADER
 * STYLING
 *
 *
 */
header{
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
}

.header-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 16px 0;
}

.logo-wrapper{
    align-self: center;
    width: 100px;
}

.header-item{
    position: relative;
    display: none;
}

.header-item.mobile{
    display: block;
}

.header-links{
    display: flex;
    align-self: center;
}

.header-link{
    padding: 0 16px;
    color: var(--color-text-menu);
    font-family: var(--opensans-bold);
}

.child-links{
    position: absolute;
    background: var(--color-white);
    width: 200px;
    left: -95%;
    top: 100%;
    z-index: 10;

    display: none;

    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

.header-item:hover .child-links{
    display: block;
}

.child-item a{
    display: block;
    padding: 8px 16px;
    border-bottom: 1px solid var(--bg-grey-light);
    font-family: var(--opensans-bold);
    color: var(--color-text-menu);
}

.child-item a:hover{
    background: var(--color-text-menu);
    color: var(--color-white);
    transition: 0.3s;
}

.child-item:last-child a{
    border-bottom: none;
}



/*!
 * FOOTER
 * STYLING
 *
 *
 */
footer{
    background: #D9D9D9;
    padding: 16px 0;
}

.copyright{
    font-family: var(--mont-bold);
    font-size: var(--font-xxs);
    color: var(--text-black);
}

.footer-links{
    font-family: var(--mont-medium);
    font-size: var(--font-xxs);
    display: block;
    flex-wrap: wrap;
}

.footer-link{
    display: block;
    color:  var(--text-grey-dark);
    padding: 4px 16px 4px 0;
}

.footer-item{
    position: relative;
}

.footer-item::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 92.5%;
    transform: translateY(-50%);
    height: 50%;
    width: 1px;
    /*background: var(--text-black);*/
}

.footer-item:last-child::after{
    display: none;
}

.footer-link:hover{
    color: var(--color-text-menu);
    transition: 0.3s;
}



/*!
 * HOME
 * STYLING
 * BANNER
 *
 */
.banner-wrapper{
    color: var(--color-white);
    padding: 32px 0;
}

.banner-sub{
    font-family: var(--mont-bold);
    font-size: var(--font-xxs);
}

.banner-title{
    font-family: var(--mont-exbold);
    font-size: var(--font-lg);
    margin-bottom: 16px;
}

.banner-desc{
    font-size: var(--font-xxs);
}



/*!
 * HOME
 * STYLING
 * SERVICE
 *
 */
.home-service-wrapper{
    position: relative;
}

.home-service-img{
    overflow: hidden;
}

.home-service-wrapper .home-service-img img{
    transition: 0.3s;
}

.home-service-wrapper:hover .home-service-img img{
    transform: scale(1.1);
    transition: 0.3s;
}

.home-service-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

.home-service-overlay .title{
    font-family: var(--mont-bold);
    font-size: var(--font-xs);
    color: var(--color-white);
    padding: 8px;
    position: absolute;
    bottom: 0;
}



/*!
 * HOME
 * STYLING
 * SERVICE
 * DESCRIPTION
 */
.home-desc-wrapper{
    padding: 16px;
    align-self: center;
}

.home-desc-wrapper .title{
    font-family: var(--mont-bold);
    font-size: var(--font-md);
    color: var(--color-title);
    margin-bottom: 16px;
}

.contact-bg{
    position: absolute;
    width: 250px;
    top: 0;
    right: 0;
    transform: translate(5%,-30%);
}

.home-contact{
    font-size: var(--font-md);
    margin-top: 32px;
}

.home-domain-box{
    background-image: linear-gradient(-90deg, var(--color-blue-dark),var(--color-blue-light));
    text-align: center;
    color: var(--color-white);
    font-family: var(--mont-bold);
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 8px;
}

.home-domain-search{
    font-family: var(--mont-bold);
}

.home-domain-search .input-group{
    border: 1px solid var(--bg-grey-search);
}

.home-domain-search .input-group .form-control{
    border: none;
}

.home-domain-search .input-group .input-group-text{
    border: none;
    border-radius: 0!important;
    background: var(--bg-grey-search);
    color: var(--color-white);
}

.home-domain-search .input-group .form-control,
.home-domain-search .input-group .input-group-text{
    min-height: 40px;
}



/*!
 * WEB DESIGN
 * STYLING
 *
 *
 */
.section-banner-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.section-banner-title{
    font-family: var(--mont-bold);
    color: var(--color-white);
    text-transform: uppercase;
    width: 80%;
    margin: 0 auto;
    font-size: var(--font-md);
}



/*!
 * WEB SECURITY
 * STYLING
 *
 *
 */
.ssl-box{
    background: var(--bg-grey);
    border-radius: 25px;
    padding: 32px 16px;
    margin-bottom: 16px;
}

.ssl-cert-img{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 150px;
    height: 80px;
    margin: auto;
    margin-bottom: 16px;
}

.ssl-feature-links{
    padding-left: 20px;
    list-style: disc;
    font-size: var(--font-xxs);
    color: var(--text-grey-dark);
}

.design-service{
    font-family: var(--mont-medium);
    background-image: linear-gradient(-90deg, var(--color-blue-dark),var(--color-blue-light));
    border-radius: 50px;
    color: var(--color-white);
    padding: 16px;
    margin-bottom: 16px;
}

.sample-wrapper{
    margin-top: -120px;
}



/*!
 * BUSINESS EMAIL & WEBSITE
 * STYLING
 *
 *
 */
.business-wrapper{
    border-radius: 25px;
    padding: 32px 16px;
    color: var(--color-white);
    font-family: var(--mont-medium);
    font-size: var(--font-xxs);
    margin-bottom: 16px;
}

.package{
    color: var(--bg-yellow);
    font-family: var(--mont-bold);
    font-size: var(--font-sm);
    margin-bottom: 16px;
}

.package-price{
    font-size: var(--font-lg);
    font-family: var(--mont-bold);
}

.package-select .form-select{
    width: 70%;
    margin: 8px auto;
    text-align: center;
    border-radius: 0;
    border: 1px solid var(--color-white);
    /*background-color: transparent!important;*/
    /*color: var(--color-white);*/
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");*/
}

.package-discount{
    font-family: var(--mont-bold);
}

.package-subscription{
    width: 70%;
    background: var(--bg-yellow);
    color: var(--text-black);
    padding: 4px 8px;
    margin: auto;
}

.package-feature-wrapper{
    width: 70%;
    margin: 0 auto;
}

.feature-title{
    border-bottom: 1px solid var(--color-white);
    padding: 8px 0;
}

.language-wrapper{
    background: #E5E5E5;
    padding: 32px 16px;
    border-radius: 50px;
}

.language{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.language img{
    align-self: center;
}



/*!
 * HOSTING VPS
 * STYLING
 *
 *
 */
.hosting-tab .nav-link.active{
    background: var(--color-title);
    border-radius: 25px;
}

.hosting-tab .nav-link{
    color: var(--color-title);
    border-radius: 25px;
    font-family: var(--mont-bold);
}



/*!
 * GOOGLE WORKSPACE
 * STYLING
 *
 *
 */
.workspace-wrapper{
    position: relative;
    padding: 16px;
    font-family: var(--mont-medium);
}

.list-icon{
    width: 15px;
}

.workspace-package{
    background: var(--bg-grey-dark);
    border-radius: 25px;
    padding: 16px;
    margin-bottom: 16px;
}

.workspace-package-price{
    font-family: var(--mont-bold);
    font-size: var(--font-lg);
}

.workspace-package-price small{
    font-size: var(--font-xs);
}


.workspace-package-price .del{
    color: var(--text-grey);
    font-size: var(--font-xxs);
}

.workspace-wrapper .desc{
    font-size: var(--font-xxs);
    margin-bottom: 16px;
}

.workspace-list{
    margin-top: 32px;
    font-size: var(--font-xs);
}

.workspace-list li{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.list-icon{
    align-self: center;
    margin-right: 8px;
}

.workspace-list li div{
    width: calc(100% - 32px);
}




/*!
 * PHONE SYSTEM
 * STYLING
 *
 *
 */
.phone-system{
    align-self: center;
    padding: 32px 16px;
}

.phone-system .section-title{
    color: var(--text-black);
    margin-bottom: 16px;
}

.phone-system p{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}



/*!
 * CONTACT US
 * STYLING
 *
 *
 */
.contact p{
    font-size: var(--font-xxs);
}

.info-card{
    padding: 16px;
    border-radius: 25px;
    box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.5);
    margin-bottom: 32px;
}

.info-title{
    font-size: var(--font-sm);
    font-family: var(--mont-bold);
    color: var(--color-blue-light);
    margin-bottom: 16px;
}

.info-card ul li{
    margin-bottom: 16px;
}

.info-card ul li a{
    font-family: var(--mont-regular);
    font-size: var(--font-xxs);
    color: var(--text-black);
}

.btn-contact{
    border-radius: 25px;
    font-family: var(--mont-bold);
    color: var(--color-white);
}



/*!
 * ENTERPRISE EMAIL
 * STYLING
 *
 *
 */
.enterprise-wrapper{
    position: relative;
    padding: 32px 16px;
    border-radius: 25px;
}

.enterprise-feature-links{
    color: var(--color-white);
    padding-left: 20px;
    font-family: var(--mont-medium);
}

.ill-5{
    margin-bottom: 16px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.add-on{
    display: block;
    flex-wrap: wrap;
    text-align: center;
}

.add-on div:first-child{
     border-bottom: unset;
}

.add-on div{
    border: 1px solid var(--text-grey-dark);
    padding: 8px;
}




/*!
 * MICROSOFT 365
 * STYLING
 *
 *
 */
.ms-wrapper{
    border-radius: 25px;
    padding: 32px 16px;
    color: var(--text-grey);
    font-family: var(--mont-medium);
    font-size: var(--font-xxs);
    margin-bottom: 16px;
}

.ms-wrapper .package{
    color: var(--text-grey);
    min-height: 60px;
}

.ms-wrapper .desc{
    min-height: 108px;
}

.ms-wrapper .feature-points{
    text-align: center;
}

.ms-promo{
    width: 80%;
    margin: 0 auto;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: var(--color-white);
    text-align: center;
    font-family: var(--mont-bold);
    padding: 16px;
}

.m-unset{
    min-height: unset;
}

.ms-software{
    background: var(--color-white);
    border-radius: 25px;
    padding: 32px 32px;
    width: 80%;
    margin: 32px auto -60px auto;

    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.25);
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.25);
}

.ms-promo p{
    font-size: var(--font-xxs);
}

.ms-wrapper a{
    font-size: var(--font-xs);
}



/*!
 * SSL
 * STYLING
 * SECTIGO
 *
 */
.ssl-logo{
    width: 150px;
}

.security .feature-points li{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.feature-points li div{
    width: calc(100% - 32px);
}

.sect-wrapper{
    background: var(--bg-grey);
    padding: 32px 16px;
    font-family: var(--mont-medium);
    text-align: center;
    border-radius: 20px;
}

.sect-title{
    font-size: var(--font-sm);
    margin-bottom: 16px;
}

.sect-icon{
    width: 80px;
    margin: 0 auto 16px auto;
}

.sect-wrapper p{
    font-size: var(--font-xs);
}

.sign-icon{
    width: 80px;
    margin: 0 auto 16px auto;
}

.sign-point{
    margin-bottom: 32px;
    font-family: var(--mont-bold);
}

.sign-point div{
    width: calc(100% - 32px);
}

.sign-table{
    color: var(--text-grey-dark);
    font-family: var(--mont-medium);
    font-size: var(--font-xs);
}

.sign-table tr td{
    padding: 32px 16px;
}

.digicert-desc{
    padding: 16px;
}



/*!
 * DOMAIN
 * STYLING
 * WHOIS
 *
 */
.whois-wrapper{
    border: 1px solid var(--border-light-blue);
    padding: 16px;
}

.domain-item{
    position: relative;
    display: block;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}

.domain-item .domain-name{
    font-family: var(--mont-bold);
    font-size: var(--font-md);
}

.domain-name .badge{
    font-size: 8px;
}

.domain-item .domain-type{
    font-family: var(--mont-regular);
}

.domain-name small{
    font-family: var(--mont-light);
}

.domain-item .domain-price{
    font-family: var(--mont-bold);
    font-size: var(--font-sm);
    display: block;
    flex-wrap: wrap;
    align-content: center;
    text-align: left;
    padding: unset;
}

.domain-item .domain-availability{
    margin-bottom: 16px;
}

.domain-item .domain-price a{
    font-size: var(--font-xxs);
    min-width: 120px;
}

.search-border{
    border: 10px solid var(--border-light-blue);
    padding: 8px;
}

.btn-whois{
    border-radius: 25px;
}

.domain-provider{
    border-radius: 15px;
    background: var(--color-white);
    padding: 0 16px 32px 16px;
}

.provider-img{
    width: 70%;
    margin: auto;
}

.domain-provider .price{
    font-size: var(--font-md);
    margin-bottom: 16px;
}

.provider-action .btn-contact{
    background: var(--bg-green);
    font-size: var(--font-xxs);
}

.mt-title{
    background: var(--bg-brown);
    color: var(--color-white);
    max-width: 250px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}


.special-domain{
    padding: 16px;
}

.special-domain img{
    width: 50%;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
}

.special-domain .title{
    font-size: var(--font-md);
    font-family: var(--mont-bold);
    color: var(--color-white);
    margin-bottom: 16px;
}

.special-domain-select .form-select{
    width: 70%;
    margin: 8px auto;
    text-align: center;
    border-radius: 0;
    padding: 12px 8px;
    border: 1px solid var(--color-white);
    background-color: var(--color-white)!important;
    color: var(--text-grey);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.domain-box-wrapper{
    background: var(--bg-brown);
    border-radius: 15px;
    padding: 32px;
}

.domain-box{
    border-radius: 15px;
    overflow: hidden;
}

.domain-tld{
    background: var(--bg-green);
    color: var(--color-white);
    padding: 8px 4px;
}

.domain-price small{
    font-size: 8px;
}

.domain-price .price{
    font-size: var(--font-md);
}

.domain-price{
    background: var(--color-white);
    padding: 0 4px 8px 4px;
}

.domain-action{
    position:  absolute;
    top: 5px;
    right: 8px;
}

.navbar-nav{
    padding-top: 32px;
}

.mobile-menu{
    overflow: hidden;
    padding: 32px 0;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 0%;
    height: 100vh;
    transition: 0.5s;
}

.mobile-menu.active{
    width: 100%;
    padding: 32px 16px;
    transition: 0.5s;
}

.mobile-menu .nav-link{
    color: var(--color-white);
    font-size: var(--font-md);
}

.mobile-menu .dropdown-item,.mobile-menu-close{
    font-size: var(--font-sm);
}

.loading{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.loading svg{
    width: 60px;
    height: 60px;
}


/*!
 * DOCUMENTATION
 * STYLING
 *
 *
 */
.doc-tab .nav-link{
    text-align: left;
    border-radius: 50px;
    color: var(--text-grey-dark);
}

.doc-tab .nav-link.active{
    background: var(--color-blue-light);
}

.footer-link img{
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.child-tab{
    margin-left: 16px;
}