@charset "utf-8";

/*Global view*/

.hero-image {
    background-image: url(../images/laptop,mug.webp);
    height: 1500px;
    background-size: cover;
    background-position: center 0%;
    background-repeat: no-repeat;
}
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
header {
    position: relative;
    margin-left: 538px;
    padding-top: 10px;
    padding-right: 0px;
}
.desktop-view {
    margin-right: -81px;
    margin-top: 77px;

}
.desktop-view ul li {
    display: block;
    list-style-type: none;
    margin-top: 50px;
}
.desktop-view ul li a {
    padding-top: 13px;
    padding-bottom: 13px;
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
    color: #E8E8E8;
    margin-left: 16px;
    margin-top: 31px;
}
.btn-red   {
    background-color: #FF6138;
    top: -146px;
}
.btn-green {
    background-color: #00A388;
}









.mobile-view   {
    display: none;
}
body {
    background-color: #DADAE0;
}

.Main-content {
    margin-top: -1286px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    /* [disabled]font-size: medium; */
    line-height: 155px;
    margin-left: 279px;

}
.Main-content h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
}
.Main-content .description p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 500;
    line-height: 47px;
    margin-top: -44px;
    width: 950px;
    margin-left: 371px;
    font-size: medium;
}
.Main-content .grow_buisness_heading {
    margin-top: -51px;
}

.container header .main-heading {
    margin-left: -242px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    line-height: 66px;
}
header .main-heading h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
}



nav {
    float: right;
}
.packages {
    position: relative;
    left: 639px;
    top: -1127px;
    width: 900px;


}

.packages .Bronze {
    float: left;
}

.packages .Silver {
    margin-left: 311px;
    padding-top: 1px;



}

.packages .Gold {
    padding-top: 41px;
    padding-right: 43px;
    float: left;

}
.packages .Platinum {
    margin-left: 311px;
    padding-top: 41px;



}
.packages .OnceOff_design_fees {
    padding-top: 0px;
    margin-top: -465px;
    padding-right: 0px;
    position: relative;
    margin-left: 658px;

}
.packages .SEO {
    padding-top: 0px;
    margin-top: 46px;
    padding-right: 0px;
    position: absolute;
    margin-left: 658px;
}

.packages .additional_pages {
    margin-left: 655px;
    padding-top: 0px;
    top: -182px;
    position: absolute;
    margin-top: 530px;
}
.packages .Security_Fibre {
    top: 336px;
    position: relative;
    width: 972px;


}
.packages .Security_Assessments  {
    padding-top: 0px;
    margin-right: 405px;
    padding-right: 0px;
    padding-left: 0px;
    width: 436px;
    float: left;
    margin-top: -161px;
}
.packages .Fibre_Services  {
    padding-top: 0px;
    padding-left: 24px;
    width: 368px;
    float: right;
    margin-top: -256px;
    position: relative;
    left: -86px;
}
#contact-form {
    width: 500px;
    position: relative;
    left: 862px;
    top: -1233px;
}
body {
    color: rgba(0,0,0,1.00);
}







/* CSS Document */




/*Tablet View*/

@media ( min-width : 480px ) and (max-width : 810px ){

.mobile-view {
    display: none;
    margin-left: 126px;
    background-color: rgba(85,82,82,1.00);
    margin-top: -84px;
}






.desktop-view {
    display: block;
    text-align: right;
    position: relative;
    left: 86px;
}



.expand {
    display: none;
}
.desktop-view ul li {
    display: inline-block;
    padding-top: 0px;
}
.desktop-view ul  {
    margin-left: -180px;
    margin-top: -120px;
    padding-top: 39px;
}
.desktop-view ul li a {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    text-decoration: none;
    color: #E8E8E8;
    margin-left: 37px;
}

.hero-image {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;




}

header a img {
    margin-left: -150px;
    width: 252px;
    height: 147px;
    margin-top: 15px;

}
.Main-content {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    font-size: medium;
    position: relative;
    top: 1098px;
    padding-right: 43px;
    left: -71px;

}

.Main-content h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    line-height: 55px;
    font-size: large;
    margin-right: 94px;




}
.Main-content .description p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 500;
    line-height: 47px;
    margin-top: -6px;
    width: 587px;
    margin-left: -92px;
    font-size: medium;
}
.Main-content .grow_buisness_heading {
    margin-top: 13px;
    margin-left: 22px;
}
nav {
    margin-left: 16px;
    position: relative;
    left: -287px;
    top: 130px;

}
.container header .main-heading {
    margin-left: -267px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    font-size: medium;
    margin-top: 60px;
}
header .main-heading h1 {
    line-height: 56px;
    font-size: medium;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
}
.packages {
    position: relative;
    left: 106px;
    top: -12px;
    width: 900px;


}
.packages .Security_Fibre {
    top: 442px;
    position: relative;
    width: 972px;
    left: -153px;
    padding-top: 0px;
    margin-left: 18px;


}
.packages .Security_Fibre h2 {
    padding-top: 0px;
    position: relative;
    left: 145px;
    top: -155px;
}
.packages .SEO_Social .SEO {
    padding-top: 0px;
    position: relative;
    left: 145px;
    top: -155px;
}
.packages .Security_Assessments  {
    padding-top: 0px;
    width: 436px;
    position: relative;
    right: -150px;
    top: 19px;
}
.packages .Fibre_Services  {
    padding-top: 0px;
    padding-left: 0px;
    width: 436px;
    padding-right: 22px;
    position: relative;
    top: 148px;
    right: 365px;
}
.packages .OnceOff_design_fees {
    margin-top: -1px;
    padding-right: 0px;
    margin-left: 1px;
    position: absolute;
    top: 470px;

}
.packages .SEO {
    margin-top: -1px;
    padding-right: 0px;
    margin-left: 1px;
    position: relative;
    top: 184px;
}

.packages .additional_pages {
    position: absolute;
    top: 728px;
    margin-left: 8px;
    margin-top: 30px;
    padding-left: 0px;
}
#contact-form {
    width: 288px;
    position: relative;
    left: 253px;
    top: -181px;
}



}




/*Mobie View*/

@media (max-width: 479px){
.hero-image {
    background-repeat: no-repeat;
    /* [disabled]background-size: 100% 40%; */
    background-position: 14% -12%;
    margin-top: -141px;
    height: 520px;


}


.expand {
    display: block;
}
body {
    background-color: #DADAE0;
}
header a img {
    height: 79px;
    width: auto;
    padding-left: 67px;



}
header {
    padding-top: 10px;
    padding-right: 0px;
    margin-left: 114px;
    margin-top: 129px;
}
.mobile-view {
    display: none;
    margin-left: 188px;
    background-color: rgba(85,82,82,1.00);
    margin-top: 14px;
}
.desktop-view ul li {
    display: block;
    padding-top: 0px;
    margin-left: -216px;
    margin-top: 48px;
}
.desktop-view   {
    margin-top: 118px;
}
.Main-content h1 {
    line-height: 56px;
    font-size: medium;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;



}

.Main-content {
    width: 275px;
    position: relative;
    right: 229px;
    top: 999px;
}
.Main-content .description p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    line-height: 47px;
    width: 275px;
    margin-left: -12px;
    overflow-y: auto;
    position: relative;
    top: -827px;
    margin-top: 80px;
}
.Main-content .grow_buisness_heading {
    margin-top: 13px;
    margin-left: -22px;
    position: relative;
    top: -866px;
}
header .main-heading h1 {
    line-height: 56px;
    font-size: medium;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
}
.container header .main-heading {
    margin-left: -4px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    font-size: medium;
    margin-top: 185px;
}
.packages {
    position: relative;
    width: 450px;
    left: 147px;
    margin-top: 29px;
    top: -100px;


}
.packages .Silver {
    padding-top: 1px;
    position: relative;
    left: -326px;
    top: 173px;



}
.packages .Gold {
    padding-top: 41px;
    padding-right: 43px;
    float: left;
    margin-top: 151px;
    position: relative;
    left: -13px;

}
.packages .Bronze {
    float: left;
    margin-left: -16px;
}
.packages .Platinum {
    margin-left: 311px;
    padding-top: 1px;
    position: relative;
    left: -326px;
    top: 466px;



}
.packages .OnceOff_design_fees {
    position: absolute;
    left: -677px;
    top: 1451px;
    width: 183px;
    padding-top: 31px;

}
.packages .SEO {
    position: absolute;
    left: -677px;
    top: 1385px;
    width: 183px;
    padding-top: 31px;
}
.packages .Security_Fibre {
    top: 949px;
    position: relative;
    width: 183px;
    left: -17px;
    margin-right: 0px;


}
.packages .additional_pages {
    position: absolute;
    width: 183px;
    left: -677px;
    top: 744px;
}
.packages .Security_Assessments  {
    width: 183px;
    margin-top: 30px;
}
.packages .Fibre_Services  {
    padding-top: 0px;
    padding-left: 24px;
    width: 183px;
    float: right;
    margin-top: 13px;
    position: relative;
    left: 10px;
}
#contact-form {
    width: 288px;
    position: relative;
    left: 73px;
    padding-left: 0px;
    top: -297px;
}


}


/*laptop view*/

@media (min-width: 1200px) and (max-width: 1420px){
header {
    position: relative;
    margin-left: 454px;
    padding-top: 10px;
    padding-right: 0px;
}
nav {
    margin-right: 120px;

}
.Main-content {
    margin-top: -35px;
    font-family: miama;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    font-size: small;
    line-height: 79px;
    position: relative;
    top: -646px;
    margin-left: 224px;

}
.hero-image {
    background-image: url(../images/laptop,mug.webp);
    height: 930px;
    background-size: cover;
    background-position: center 0%;
    background-repeat: no-repeat;
}
.packages {
    position: relative;
    left: 311px;
    top: -554px;
    width: 900px;


}
.container header .main-heading {
    margin-left: -177px;
    font-family: miama;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    font-size: small;
}
#contact-form {
    width: 288px;
    position: relative;
    top: -676px;
    left: 532px;
}
.packages .OnceOff_design_fees {
    padding-top: 102px;
    margin-top: -570px;
    padding-right: 0px;
    position: absolute;
    margin-left: 658px;

}
.packages .Security_Assessment {
    position: absolute;
    margin-left: 658px;
    padding-top: 0px;
    padding-right: 0px;
    top: 177px;
}
.packages .Security_Assessments {
    position: absolute;
    top: 672px;
}
.packages .Fibre_Services  {
    position: absolute;
    top: -192px;
    left: 212px;
}



.Main-content h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;




}
header .main-heading h1 {
    line-height: 56px;
    font-size: large;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
}
.Main-content .description p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 500;
    line-height: 47px;
    margin-top: -10px;
    width: 950px;
    margin-left: 116px;
    font-size: medium;
}
.Main-content .grow_buisness_heading {
    margin-top: -11px;
    margin-left: 92px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    line-height: 47px;
    width: 950px;
    /* [disabled]font-size: xx-large; */
}




}