:root {
    --white: #ffffff;
    --black: #212529;
    --darkBlack: #000000;
    --lightBlack: #555555;
    --grey1: #aaaaaa;
    --buttonBlue: #bbb3fa;
    --buttonBlueActive: #35404d;
    --buttonBlueHover: #424649;

    --defaultFont: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
*{margin: 0px; padding: 0px;}
body {font-family: var(--defaultFont); font-size: 16px; line-height: 24px; background-color: var(--black);box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
body.home-page {overflow-y: hidden;}
a,a:hover,a:focus {text-decoration: none; outline: none; transition: all linear .4s; -webkit-transition: all linear .4s; -moz-transition: all linear .4s;}

.site-wrapper {width: 100%;height: 100%;display: flex;position: relative;}
.menu-sidebar {width: 25%;display: flex;flex-flow: column;height: 100vh;background-color: var(--black);padding: 40px 20px; justify-content: space-between; position: relative; gap: 200px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.top-section img {max-width: 140px;filter: invert(1);margin-block-end: 20px; }
.top-section h1 {color: var(--white);font-size: 28px;font-weight: 700;line-height: 40px;}
.top-section p {color: var(--white);}
.bottom-section aside a {background-color: var(--white);width: -webkit-fill-available; width: auto; display: block;border-radius: 100px;padding: 10px;
text-align: center;color: var(--black);text-decoration: none;font-weight: 600;margin-bottom: 20px;text-transform: capitalize;}
.bottom-section > span {color: var(--white);}
.bottom-section > span > a {color: var(--lightBlack);}

.right-content {width: 75%; height: 100%; }
/* .right-content video {width: 100%;height: 100vh;} */
.right-content img {width: 100%;height: 100%; object-fit: cover;}

/* select your plan page */
.navbar {width: 100%;height: auto;padding-block: 15px;padding-inline: 30px;position: relative; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.previous-button a {display: flex;justify-content: start;height: 100%;color: var(--white);align-items: center;
text-transform: capitalize;gap: 8px;}
.select-device-page {overflow: hidden; background-color: #121113;}
.select-device-page .site-wrapper {flex-flow: column;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}

.multiple-devices {width: 100%;height: 100%;display: block;position: relative;}
.multiple-devices>ul {width: 100%;height: 100vh;display: flex;justify-content: space-between;align-items: center;}
.multiple-devices ul>li {width: 25%;text-align: center;list-style-type: none; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.multiple-devices ul li > img {height: 200px;filter: invert(1);position: relative;top: 0px;transition: all linear .4s;}
.multiple-devices ul li>h2 {color: var(--white);font-weight: 700;font-size: 24px;margin-bottom: 30px;margin-top: 20px;}
.multiple-devices ul li aside {width: 100%;}
.multiple-devices ul li aside>a {background-color: #fff;color: #000;display: inline-block;width: 60%;max-width: 60%;
border-radius: 100px;padding: 10px 0px;text-decoration: none;font-weight: 600;text-transform: capitalize;}

.multiple-devices ul li > img:hover,
.multiple-devices ul li > img:focus {transition: all linear .4s;transform: translateY(-50px);cursor: pointer;}
.multiple-devices ul>li:hover, .multiple-devices ul>li:focus {background-color: #191919;cursor: pointer;}

.navbar .container {display: flex;align-items: center;justify-content: space-between;}
.logo figure img {width: 140px;filter: invert(1);margin-bottom: 0px;}
.logo {text-align: center;}
.logo>strong {color: #fff;font-size: 20px;font-weight: 700;text-transform: uppercase;padding-block-start: 8px;
display: block;}

.verify-page .logo > img {filter: invert(1);width: 170px;}
.row {display: flex;width: 100%;box-sizing: border-box;}
.navbar .container {display: flex;align-items: center;justify-content: space-between;width: 1140px;
box-sizing: border-box;height: auto;margin: 0px auto;}
.navbar .container > .row {justify-content: space-between;}
.icons ul.list-nav {display: flex;}
.icons ul.list-nav li {list-style-type: none; border-left: 1px solid rgb(108,117,125);}
.icons ul.list-nav li:first-child { border-left: none;}
.icons ul.list-nav {display: flex;align-items: center;height: 100%;}

.icons ul.list-nav li svg {fill: rgb(108,117,125);padding-inline: 15px;}
.icons ul.list-nav li svg:hover,.icons ul.list-nav li svg:focus {fill: var(--white);}
.verify-page .navbar {background-color: var(--darkBlack);}
.verify-page .site-wrapper {width: 100%;height: 100%;display: flex;position: relative;flex-flow: column;}

.form-caption {padding: 50px 0px 20px;width: 860px;margin: 0px auto;height: auto;}
.form-caption h2 {color: var(--white);font-size: 2rem;margin-block-end: 20px;}
.form-caption p {line-height: 40px;color: var(--grey1);}

.form-area {height: auto;width: 860px;margin: 0px auto;}
.form-area .tab {overflow: hidden;}
.form-area .tab button {background-color: var(--buttonBlueHover);cursor: pointer;padding: 12px 30px;transition: 0.3s;
border: none;margin-inline-end: 8px;border-radius: 4px;font-size: 16px;font-weight: bold;text-transform: capitalize; color: var(--white);}

/* .tablinks.secondBtn {background-color: var(--buttonBlueHover);color: var(--white);}
.tablinks.secondBtn:hover {background-color: var(--buttonBlue);color: var(--black);} */
.form-area .tab button:hover {background-color: var(--buttonBlue); color: var(--white);}

.form-area .tab button.active {background-color: var(--buttonBlue); color: var(--black);}

.form-area .tabcontent {display: none;padding: 0;border: none;margin-block-start: 50px;}

#wordTwentyFourform form input[type="text"],
#wordTwelveform form input[type="text"] {max-width: 28%;min-width: 28%;display: block;padding: .375rem .75rem;
font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--bs-body-color);-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: var(--bs-body-bg);background-clip: padding-box;border: var(--bs-border-width) solid var(--bs-border-color);border-radius: var(--bs-border-radius);transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;background: transparent !important;border: 1px solid rgb(51, 51, 51) !important;padding: 15px !important;color: #eee !important;margin-bottom: 12px; border-radius: 8px;}

#wordTwentyFourform form,
#wordTwelveform form {display: flex;flex-flow: wrap;justify-content: space-between;}

#wordTwentyFourform form input[type="submit"],
#wordTwelveform form input[type="submit"] {background-color: var(--buttonBlue);border: none;padding: 12px 40px;
display: inline-block;margin-bottom: 50px;margin-top: 20px;font-size: 18px;text-transform: capitalize;color: var(--black);
font-family: system-ui;font-weight: 700;border-radius: 100px;}

.alert-message {position: fixed;left: 50%;top: 50%;background-color: #ffffff;padding: 50px;border: 1px solid rgba(0,0,0,0.15);border-radius: 15px;margin-left: -250px;margin-top: -125px;z-index: 2222;box-shadow: 0px 20px 40px rgba(0,0,0,0.12); text-align: center; display: none; animation: slideIn 0.5s ease-out;}





@media (max-width: 991px){
.site-wrapper {flex-flow: column;}
.menu-sidebar {width: 100%;gap: 50px; height: auto;}
.bottom-section aside a {width: 150px;}
.right-content {width: 100%;}
.navbar .container {width: 100%; padding-inline: 50px;}
.select-device-page {overflow: auto;}
.multiple-devices ul>li {width: 50%;height: auto;}
.multiple-devices>ul {height: auto;flex-flow: wrap; row-gap: 100px;}
.verify-page .navbar .container {padding-inline: 0px;}
.form-caption {padding: 50px 20px 20px;width: 100%;height: auto;box-sizing: border-box;}
.form-area {width: 100%;padding-inline: 20px;box-sizing: border-box;}
}
/* 991 */

@media (min-width: 1023px) and (max-width: 1365px){
.top-section h1 {font-size: 20px;line-height: 30px;}
.navbar .container {width: 100%;}

}
/* 1024 */

@media (max-width: 767px){
body.home-page {overflow-y: scroll;}
.navbar .container {padding-inline: 0px;}
.logo>strong {font-size: 12px;}
.logo figure img {width: 100px;}
.multiple-devices ul>li {width: 100%;}
.select-device-page .site-wrapper {padding-block-end: 100px;}
.navbar .container > .row {justify-content: center;flex-flow: column;row-gap: 20px;align-items: center;}
.form-caption {padding: 50px 20px 20px;width: 100%;height: auto;max-width: 100%;box-sizing: border-box;}
.form-caption h2 {font-size: 2rem;line-height: 1.5em;text-align: center;}
.form-caption p {line-height: 24px;text-align: center;}
#wordTwentyFourform form input[type="text"],
#wordTwelveform form input[type="text"] {max-width: 38%;min-width: 38%;}
.form-area .tab {text-align: center;}
}
/* 767 */