:root {
    scroll-behavior: smooth;
    --bs-body-color: #252525;
    --bs-body-bg: #fff;
    --bs-border-color: #dee2e6;
    --bg-color: #d5efff;
    --main-color: #09947d;
    --white-color: #fff;
    --red-color: #b71c1c;
    --black-color: #252525;
    --blur-color: #f7fbfa;
    --line: color-mix(in srgb, #252525, transparent 85%);
    --card-shadow: 0 10px 30px color-mix(in srgb, #252525, transparent 92%);
    --border: color-mix(in srgb, #09947d, transparent 85%);
    --border-radius: 20px;
}

body {
    color: var(--black-color);
    background-color: #ededed;
    font-family: "Arial", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

embed, iframe, object {
    max-width: 100%;
}

/* Css Header */
.header {
    padding: 0;
    background: var(--white-color);
}

.information span {
    margin-left: 20px;
}

.information a {
    color: var(--main-color);
    margin-left: 20px;
}

.preview-devices {
    font-size: 20px;
    width: 170px;
}

.preview-devices .preview-devices-active {
    background-color: #eaeaea;
}

.preview-devices i {
    color: var(--black-color);
}

.preview-devices-active i,
.information i {
    color: var(--main-color);
}

.preview-devices ul {
    margin: 0px;
    padding: 0;
    list-style: none;
    list-style-type: none;
    display: flex;
    align-items: center;
}

.preview-devices a {
    transition: 0.3s;
    display: inline-block;
    margin: 0 5px;
    padding: 10px 8px;
    border: none;
}

.btn-register,
.btn-register:focus {
    color: var(--white-color);
    background: #D7AD5D;
    font-size: 1rem;
    padding: .5rem 1rem;
    margin-left: 10px;
    border: none;
    border-radius: var(--border-radius);
    transition: 0.3s;
    cursor: pointer;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
    color: var(--white-color);
    background: var(--main-color);
    font-size: 1rem;
    padding: .5rem 1rem;
    margin-left: 10px;
    border: none;
    border-radius: var(--border-radius);
    transition: 0.3s;
    cursor: pointer;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
    color: var(--white-color);
    background: color-mix(in srgb, var(--main-color), transparent 15%);
}

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1320px;
    }
}

@media (max-width: 998px){
    .preview-devices {
        display: none;
    }
}

@media (max-width: 676px){
    .btn-getstarted {
        display: none;
    }
}

@media (max-width: 510px){
    .info-name {
        display: none;
    }
}
/* End Css Header */

.preview {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    transition: all 0.2s;
    display:flex; align-items:center; justify-content:center;
}

.preview-frame {
    border: 0;
    position: absolute;
    transition: 0.5s;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

.preview-desktop {
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.preview-tablet {
    width: 768px;
    height: calc(100% - 10px);
    top: 10px;
    left: calc(50% - 384px);
}

.preview-mobile {
    width: 380px;
    height: calc(100% - 10px);
    left: calc(50% - 190px);
    top: 30px;
    margin-top: 0;
}