:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1224px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*,
::after,
::before {
    box-sizing: border-box
}

@font-face {
    font-family: icomoon;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/icomoon/icomoon.eot) format("eot"), url(/fonts/icomoon/icomoon.svg) format("svg"), url(/fonts/icomoon/icomoon.woff) format("woff"), url(/fonts/icomoon/icomoon.ttf) format("truetype")
}

html {
    font-family: 'Inter', sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #4D4846;
    text-align: left;
    background-color: #F5EDE8;
    background-image: linear-gradient(270deg, #F5EDE8, white);
    vertical-align: top;

}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0
}

h1 {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: #002F39
}

h2 {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 300;
    color: #002F39;
}

h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: #002F39;
    font-weight: 300
}

dl,
ol,
p,
ul {
    font-family: 'Inter', sans-serif;
    margin-top: 0;
    margin-bottom: 1rem
}

.subline {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #4D4846;
    font-weight: 400px;
    text-align: center;
    vertical-align: top;
}

.subline-bold {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: #002F39;
    font-weight: 400px;
    text-align: left;
    vertical-align: top;
}

abbr[data-original-title],
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
    text-decoration-skip-ink: none
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0
}


.container,
.container-fluid,
.container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.align-items-center {
    align-items: center;
    justify-content: center;

}



/* navbar */

.navigation {
    /* position: relative; */
    overflow: hidden;
    height: 100px;

    padding: 30px 30px 0 0
}


.navigation a {
    float: right;
    display: block;
    color: #002F39;
    text-align: center;
    padding: 14px 40px;
    text-decoration: none;
    font-size: 14px;
}

.navigation ul {
    margin: 8px 0 0 0;
    list-style: none;

}

.navigation a:hover {
    color: #008FAC;
}

.content-nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    opacity: 0.9;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.2s;
}

.user-nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: white;
    opacity: 0.9;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.3s;
}

.content-nav a,
.user-nav a {
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    font-size: 26px;
    color: #002F39;
    display: block;
    transition: 0.01s;

}

.icon {
    font-size: 20px
}

.user-nav a {
    padding: 10px 10px 10px 30px;
}

.user-nav a:hover,
.content-nav a:hover {
    color: #008FAC;
}

.content-nav .btn-close {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 20px;
    margin-left: 50px;
}

.user-nav .btn-close {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 22px;
    margin-left: 50px;
}


.grad-btn {

    border-radius: 25px;
    color: white !important;
    background-color: #004B5B;
    background-image: linear-gradient(180deg, #004B5B, #006475);
}

.grad-btn:hover {


    color: white !important;
    background-color: #004a5b79;
    background-image: linear-gradient(180deg, #004a5b79, #00637579);
}

/* .open-user-slide {
    float: right;
}

.open-content-slide {
    float: left;
} */

@media(max-width:1163px) {
    .navigation-nav {
        display: none
    }

    .navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0px;
    }

    .tcl-logo {
        order: 2;
        height: 49px;
    }

    .open-user-slide {
        /* float: right; */
        order: 3;
    }

    .open-content-slide {
        /* float: left; */
        order: -1;
    }

}

@media(min-width:1164px) {

    .open-content-slide,
    .open-user-slide {
        display: none
    }

    .tcl-logo {
        position: absolute;
        left: 8%;
        top: 35px;
        height: 49px;


    }

    .navigation {
        position: relative;
        vertical-align: middle;
        /* line-height: 70px */

    }
}


/* header */
#header {
    /* position: fixed; */
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
    padding: 12px 0;
    transition: .2s
}

[class*=" icon-"],
[class^=icon-] {
    font-family: icomoon !important;
    speak-as: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-right:before {
    content: "\e900"
}

.icon-arrow-left:before {
    content: "\e901"
}

.icon-person:before {
    content: "\e902"
}

.icon-close:before {
    content: "\e903"
}

.icon-chevron-down:before {
    content: "\e904"
}

.icon-burger:before {
    content: "\e905"
}

.icon-checkmark:before {
    content: "\e906"
}

.icon-person:before {
    content: "\e902"
}

.icon-close:before {
    content: "\e903"
}


#header .logo {
    user-select: none;
    vertical-align: middle;
    margin: 0;
    display: inline-block
}

#header .logo a {
    vertical-align: middle;
    text-decoration: none;
    display: flex;
    align-items: center
}

#header .logo .logo-icon {
    display: inline-block;
    width: 64px;
    height: 64px;
    position: relative
}





#header.fixed .logo-icon .icon {
    font-size: 32px
}



#header.fixed .logo-icon {
    width: 54px;
    height: 54px
}


/* .main-banner{
    
} */

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width:992px) {


    .index .main-banner .main-banner-title {
        text-align: left
    }

    .index .main-banner .main-banner-list {
        max-width: initial
    }
}

.call-to-action {
    width: auto;
    height: auto;
    padding: 10px 50px;
}







footer .hs-form {
    position: relative;
    border-radius: 25px;
    width: 100%;
    display: flex;
    flex-direction: row;
    border: 2px solid white;
    padding: 1px;
    padding-left: 5px;
    background-color: rgb(255, 255, 255);
    margin-bottom: 25px;
}

footer .hs-input,
#email-8c10b90a-0507-4f6e-9071-96e1323bc5d1 {
    margin-left: 1px !important;
    flex-grow: 2;
    background-color: rgba(255, 255, 255, 0) !important;
    border: none;
    border-radius: 25px;
    width: 98% !important;
    padding-left: 6px !important;
}

footer .hs-input:focus, 
#email-8c10b90a-0507-4f6e-9071-96e1323bc5d1:focus {
    outline: none;
    background-color: rgb(255, 255, 255);
}

footer .hs-email .input:focus {
    outline: none;
    background-color: rgb(255, 255, 255);
    outline: none;
    font-size: 12px
}

footer .hs_email label,
#label-email-8c10b90a-0507-4f6e-9071-96e1323bc5d1 {
    padding-top: 3px;
    padding-left: 5px
}

footer .hs-email {
    position: relative;
    height: 30px;
    width: 65%
}

footer .submitted-message {
    color: white;

}

footer .hs-email .input {
    position: absolute;
    top: 3px;
    width: 100%
}

footer label span{
    display: none;
}

footer .hs-error-msg {
    color: white;
    font-size: 10px;
    margin: 10px 0 30px;

}

footer .hs-button {
    position: absolute;
    right: 3px;
    font-size: 10px;
    /* padding: 10px 35px; */
    width: 33%;
    height: 30px;
    border-radius: 25px !important;
    background: #C5A568;
    white-space: nowrap;
    color: white;
    border: none;
    cursor: pointer;

}

@media(max-width:425px) {
    .hs-button {

        padding: 10px 25px;
        width: 33%;

    }
}

@media(max-width:768px) {
    .hs-button {

        padding: 10px 5px;
        white-space: nowrap
    }
}

@media(max-width:1199px)and(min-width:769px) {
    .hs-button {
        white-space: nowrap;
        padding: 10px 20px;
        width: 40%;

    }
}

.gold-btn {
    width: 50%;
    padding: 10px 40px;
    border-radius: 25px !important;
    background: #C5A568;
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
}

.gold-btn:hover {
    color: white;
    background-color: #E2D3B5;
}

.blue-btn {
    width: 50%;
    padding: 10px 40px;
    border-radius: 25px !important;
    background: #004B5B;
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.blue-btn:hover {
    color: white;
    background-color: #01677e;
}


footer {
    background-color: #004B5B;
    padding-bottom: -200px
}

.footer-info {
    padding-top: 50px;
    background-color: #004B5B;
    width: 100%;
    padding-bottom: 50px
        /* height:250px; */
}


.transparent-btn {
    width: 50%;
    padding: 10px 30px;
    border-radius: 25px !important;
    border: 1px solid white;
    color: white;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;

}

.transparent-btn:hover {
    color: #004B5B;
    background-color: white;
}

.get-started-btn {
    margin-top: 10px;
    margin-bottom: 30px;
}



.ig-icon {
    height: 26px;

}

.youtube-icon {
    height: 21px;
    margin-right: 20px;
}


.footer-info {
    display: flex;
}

.footer-title {
    color: white;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
}

.footer-title-links {
    color: white;
    font-weight: bold;
    margin-bottom: 50px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;

}

.footer-title-links:hover {
    color: white;
}

.footer-info .container .footer-items {
    width: 100%
}



.footer-list {
    padding: 0;
    list-style-type: none;
}

.footer-details {
    color: white;
    font-size: 14px;
    font-weight: lighter;
}

.footer-links {
    color: white;
    font-size: 14px;
    font-weight: lighter;
    cursor: pointer;
    text-decoration: none;
}

.footer-links:hover {
    color: white;
}

.hs_email label {
    font-size: 14px;
    text-align: left;
}

@media(max-width:425px) {
    .footer-info {
        flex-wrap: wrap;
        justify-content: center;

    }
}

@media(max-width:767px) {
    .footer-info {
        text-align: center;
    }
}


@media(max-width:1366px) {
    .footer-items {
        display: flex;
        justify-content: space-between
    }

    .email-btn {
        font-size: 10px
    }
}





/* @media */
@media (min-width:769px) {
    #header.fixed .logo-icon {
        width: 64px;
        height: 64px
    }

    #header.fixed .logo-icon .icon {
        font-size: 42px
    }

    .section-title-wrapper .section-title {
        font-size: 30px;
        line-height: 45px
    }
}

@media (max-width:992px) {
    img.laptop {
        height: 300px
    }

    h1.main-banner-title {
        font-size: 35px;
    }
}




@media (min-width:992px) {
    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-lg-1>* {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-lg-2>* {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-lg-3>* {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-lg-4>* {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-lg-5>* {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-lg-6>* {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-lg-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-lg-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-lg-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-lg-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-lg-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-lg-first {
        order: -1
    }

    .order-lg-last {
        order: 13
    }

    .order-lg-0 {
        order: 0
    }

    .order-lg-1 {
        order: 1
    }

    .order-lg-2 {
        order: 2
    }

    .order-lg-3 {
        order: 3
    }

    .order-lg-4 {
        order: 4
    }

    .order-lg-5 {
        order: 5
    }

    .order-lg-6 {
        order: 6
    }

    .order-lg-7 {
        order: 7
    }

    .order-lg-8 {
        order: 8
    }

    .order-lg-9 {
        order: 9
    }

    .order-lg-10 {
        order: 10
    }

    .order-lg-11 {
        order: 11
    }

    .order-lg-12 {
        order: 12
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.33333%
    }

    .offset-lg-2 {
        margin-left: 16.66667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.33333%
    }

    .offset-lg-5 {
        margin-left: 41.66667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.33333%
    }

    .offset-lg-8 {
        margin-left: 66.66667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.33333%
    }

    .offset-lg-11 {
        margin-left: 91.66667%
    }
}

.diy-banner {
    background-color: white;
    padding: 40px 0px 50px
}

.diy-features {

    display: flex;
    justify-content: space-evenly;

    text-align: center;
    padding: 30px 0 20px;
    margin: 0px
}

.diy-features h2 {
    padding: 10px 0;
    margin: 0;

    font-size: 32px;

}

.diy-features p {
    padding: 0 40px 0px;

    font-size: 16px;

}

.diy-features .col-md-4 {
    height: 200px
}

.diy-icon {
    height: 64px;
    border-radius: 50px
}

.explore-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: #002F39;
    font-weight: 300
}

.explore-banner {
    background-color: white;
    text-align: center;
}

.explore-link {
    display: inline-block;
    padding: 10px 30px;
    bottom: 0;
    border-radius: 25px !important;
    background: #C5A568;
    color: white;
    margin-bottom: 10px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;

}

.explore-link:hover {
    color: white;
    color: white;
    background-color: #E2D3B5;
}


.explore-card {
    position: relative;
    text-align: center;
    background-color: #F7F2EF;
    padding: 50px;
    height: 250px;
    width: 100%;
    margin: 30px 10px;
}

.explore h3 {
    position: absolute;
    top: 40px
}

.center-link {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0
        /* align-self: flex-end; */
}

.host-banner {
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    padding: 50px 0 60px
}

.host-banner h2,
.host-banner h5 {
    color: #002F39;
    font-weight: lighter
}

.host-banner h5 {
    font-size: 26px;
    font-weight: lighter;
}

.host-banner h2 {
    font-size: 26px;
    font-weight: lighter;
}

.host-cards {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;

}

.host-subhead {
    margin-bottom: 40px
}

.host-card {
    padding: 25px 25px 0 25px;
    height: 250px;
    width: 370px;
    margin-bottom: 50px;
}

.host-card-img {
    width: 325px;
    height: auto;
    margin-bottom: 25px
}

.carousel-caption {
    bottom: -100px !important;
    color: white;
}

.carousel-caption h3 {
    color: white;
    width: 110%;


}


/* .carousel-inner {
    height: 570px
} */

.highlight {
    color: #C5A568;
    font-weight: bold
}

.dashboard-banner h2 {
    font-weight: 300;
}

.dashboard-banner {
     text-align: center;
    padding: 60px 0 60px 0;

}
.dashboard-banner p {
    padding-bottom: 30px;
}
.dashboard-banner .container-lg {
     width: 70%
}
.site-generator {
    height: 474px;
    float: right;
}

.site-generator-title {
    margin-bottom: 20px
}

.site-generator-banner {
    padding: 30px 0;
    background-color: #F5EDE8;
    background-image: linear-gradient(90deg, #F5EDE8, white);
    width: 100%;
    overflow: hidden;
}

.site-generator-details ul {
    margin-bottom: 60px
}

@media(max-width:425px) {

    .question-card,
    .feature-details {
        margin-left: 15px
    }

    .dashboard-banner,
    .carousel-caption h3 {
        font-size: 10px;
    }

    .carousel-inner {
        height: 250px
    }

    .carousel-indicators {
        bottom: 10px!important
    }


    .dashboard-banner,
    .app-banner {
        overflow: hidden;
        width: 100%;
    }

    .dashboard-banner {
        padding: 40px 0;

    }

    .dashboard h2 {
        font-size: 20px;
        padding: 0 40px
    }
    .carousel-caption {
        bottom: -60px !important
    }
    .dashboard-banner{
        height: 450px
    }

  
}

@media(max-width:475px) {
    .diy-banner {
        overflow: hidden;
        width: 100%;

    }

    .diy-features .col-md-4 {
        width: 100%;
        margin-top: 10px
    }

    .diy-banner .container {
        transform: scale(.9);
    }

    .diy-features {
        padding-bottom: 50px;
        padding-top: 0
    }

   

    .explore-card {

        padding: 40px 50px;
        height: 200px;
        margin-left: 0px
    }

    .explore-card h3 {
        font-size: 18px
    }

    .explore-card p {
        font-size: 12px
    }

    .center-card {
        margin: 0px
    }

    .explore-link {
        transform: scale(.9);
    }

    .site-generator {
        transform: scale(0.6);
        padding-top: 50px
    }



    .site-generator-banner {
        height: 750px;
        /* padding-top: -90px */
    }

    .site-generator-banner .container {
        height: 500px;
        /* margin-bottom: -90x */
    }

    .site-generator-banner .container .col-md-6 {
        height: 500px;
        margin-bottom: -100px
    }


    .site-generator-items .col-md-6 {
        display: flex;
        justify-content: center;

        width: 100%;

    }

    .site-generator-details {
        transform: scale(0.7);
        margin-top: -90px;
        width: 60%;

    }
    .carousel-caption {
        bottom: -70px !important
    }
}

@media(max-width:586px) {
    .diy-features .col-md-4 p {
        padding: 0
    }
}

@media(max-width:640px) {
    .diy-features .col-md-4 {
        width: 70% !important
    }

    .diy-banner {
        height: 700px !important
    }
}

@media(max-width:767px) {
    .diy-features .col-md-4 {
        width: 33%;
    }

    .diy-features p {
        padding: 0 10px;

    }

    .explore-cards .col-md-4 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .explore-card {
        width: 70%;
        height: 200px;
        padding: 30px 50px !important
    }

    .center-link {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0
            /* align-self: flex-end; */
    }
      .create-account-btn{
                padding: 14px 30px
            }
}

@media(min-width:768px) {

    .dashboard h2{
        margin-bottom:20px
    }
    .carousel {

        transform: scale(0.88);
        height: 400px;
    }

    .carousel-inner {
        margin-top: -45px;
        height:450px
    }

    .carousel-indicators {
        bottom: 10px!important
    }

    .my-3 {
        height:400px
    }
    .carousel-caption h3 {
        font-size: 18px;
    
    }
    .carousel-caption {
        bottom: -80px !important
    }
    .dashboard-banner{
        height: 580px!important
    }
  
}

@media(max-width:769px) {

    .host-cards {
        transform: scale(0.8);
        width: 100%
    }

    .host-banner {
        padding: 0;
    }

    .host-cards {
        margin: -60px 0 -40px
    }

   
    .site-generator-items .col-md-6 {
        display: flex;
        justify-content: center;
        width: 100%;
    }

}
@media(max-width:761px) and (min-width:426px){
 
    .carousel-inner {
        height: 300px!important
    }
    .carousel-caption h3 {
        font-size: 12px;
    
    }
    
    .dashboard-banner{
        height: 400px
    }
}
@media(max-width:461px) and (min-width:426px){
    
    .carousel-indicators {
        bottom: 30px!important
    }
}
@media(max-width:767px) and (min-width:426px){
   
    .carousel-inner {
        height: 300px!important
    }
    .carousel-caption h3 {
        font-size: 12px;
    
    }
    .carousel-caption {
        bottom: -70px !important
    }
    .dashboard-banner{
        height: 550px
    }
}
@media(max-width:814px) {
    .diy-card p {
        padding: 0px 20px
    }
}

@media(max-width:991px) {
    .diy-banner .container {
        max-width: 900px !important
    }
}
@media(min-width:992px) {
    .dashboard h2{
        margin-bottom:20px
    }
   
    .carousel{
        height:530px
    }

    .carousel-inner {
        margin-top: -45px;
        height:460px
    }

    .carousel-indicators {
        bottom: 10px!important
    }

    .my-3 {
        height:700px
    }
    .carousel-caption h3 {
        font-size: 18px;
    
    }
    .carousel-caption {
        bottom: -70px !important;
        height:70px
    }
    .dashboard-banner{
        height: 700px!important
    }
  
}

@media(min-width:1200px) {
    .dashboard h2{
        margin-bottom:20px
    }
   
    .carousel{
        height:550px
    }

    .carousel-inner {
        margin-top: -45px;
        height:500px
    }

    .carousel-indicators {
        bottom: -5px!important
    }

    .my-3 {
        height:700px
    }
    .carousel-caption h3 {
        font-size: 18px;
    
    }
    .carousel-caption {
        bottom: -60px !important;
        height:70px
    }
    .dashboard-banner{
        height: 720px!important
    }
  
}
@media(max-width:1179px) {
    .diy-features {
        padding-bottom: 100px
    }

    .center-link {
        bottom: 30px;
    }

    .explore-card {
        padding: 30px;
    }
}

@media(max-width: 1199px) {

    .diy-banner {
        height: 380px;
        padding-top: 20px
    }

    .host-banner{
        display: flex;
        justify-content: center;
        align-items: center;
    }

  
    .host-card {
        width: 325px!important;
        text-align: center;
        margin-bottom: 20px;
        margin-left:2px;
       
    }

    .host-cards{
        margin-top: -40px!important
    }
    .host-cards .col-xs-12 {
        margin-top: 30px
    }
}
@media(min-width:1350px) {
    .dashboard-banner {
        padding: 35px 0 25px 0 !important;
    }
}
@media(min-width:1400px) {
    .dashboard h2{
        margin-bottom:20px
    }
   
    .carousel{
        height:650px
    }

    .carousel-inner {
        margin-top: -45px;
        height:600px
    }

    .carousel-indicators {
        bottom: 0px!important
    }

    .my-3 {
        height:800px
    }
    .carousel-caption h3 {
        font-size: 20px;
    
    }
    .carousel-caption {
        bottom: -60px !important;
        height:70px
    }
    .dashboard-banner{
        height: 790px!important
    }
  
}