* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{overflow-x: hidden;}
body{font-family: "Plus Jakarta Sans", sans-serif !important;overflow-x: hidden;}
p{
    line-height: 1.7;
}
.clear-os-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-primery{
    background-color: #c2510e !important;
    color: white !important;
    border: 0;
    border-radius: 5px;
    padding: 15px 25px;
}
.btn-light:hover{
    background-color: rgb(63, 62, 62) !important;
}
.btn-light:hover{
    color: white !important; text-decoration: none !important;
}
.btn-light:hover{
    color: white !important;;
}
.btn-light{
    background-color: rgb(63, 62, 62) !important;
    color: white !important;
    border: 0;
    border-radius: 5px;
    padding: 15px 25px;
    text-decoration: none !important;
}

.btn-primery{color: white !important; text-decoration: none !important;}
.btn-white {text-decoration: none !important;}
button.blank-btn{
    padding: 15px 0;
    border: 0;
    background: transparent;
}
.section1{
    background-image: url(../Images/banner-1.png);
    padding: 150px 0;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.download-bx{
    background-color: #ECECEC;
    border-radius: 20px;
    padding: 30px;
}
.green{
    color: #4e7a12;
}
.grey{
    color: #686868;
}
.orange{
    color: #c2510e;
}
.download-bx img{
    height: 120px;
}
.btn-primery.download-btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}
.btn-light.download-btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}
.desktop{
    background-color: #ECECEC;
    padding: 0 200px;
}
.list{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}
.list ul{
    width: 25%;
}
.list ul li{
    padding-bottom: 10px;
    font-size: 12px;
}
.list-banner{
    padding: 0 200px;
}
.developer-testing{
    background-color: #ECECEC;
}
.testing-bx{border-radius: 5px;}
.testing-flex{
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}
.testing-flex p{
    font-size: 15px;
}
p.orange{
    font-size: 14px;
    margin-bottom: 5rem;
}
.box{
    border-radius: 5px;
}
.box a{
    color: black;
    text-decoration: none;
    margin-top: 30px;
}
.legacy1{
    background-color: #ECECEC;
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}
.pedigree{
    background-color: #ECECEC;
}
.banner3{
    padding: 150px 0;
    width: 100%;
    background-image: url(../Images/banner-3.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-white{
    background-color: #fff !important;
    color: #c2510e !important;
    border: 0;
    border-radius: 5px;
    padding: 15px 25px;
}
button.blank-btn a:hover{
    color:black;
    text-decoration: underline;
}
.banner3-play-button{
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width:1500px){
    .list ul li span{display: none;}
}
@media (max-width:1400px){
    .testing-flex p{font-size: 12px;}
    .lower-footer ul{gap: 10px !important;}
    h6.green.py-5{padding-top: 2rem !important; padding-bottom: 2rem !important;}
    h6.grey.py-5{padding-top: 2rem !important; padding-bottom: 2rem !important;}
    h6.orange.py-5{padding-top: 2rem !important; padding-bottom: 2rem !important;}
   .download-bx {min-height: 610px; max-height: 610px;}
}
@media (max-width:1200px){
    .box{max-height: 200px;min-height: 200px;}
    .box h6{font-size: 15px;}
    .box p.orange{margin-bottom: 3rem;}
    .lower-footer{gap: 15px !important;}
    .lower-footer ul {gap: 2px !important;}
.download-bx {min-height: 670px;max-height: 670px;}
}
@media(max-width:1250px){
    .list-banner{padding: 0 0 !important;}
    .desktop{padding: 0 0 !important;}
}
@media (max-width:991px){
    .download-bx{margin-top: 2rem;padding: 15px;}
    .desktop-text h5.orange.pb-3 {text-align: center;}
    .testing-bx.bg-white.text-left.p-4 {min-height: 220px;max-height: 220px;}
    .box{margin-top: 2rem;}
    .legacy1{flex-direction: column;}
    .legacy-text.text-left{text-align: center;}
    .why-cearOS-text.text-left p{font-size: 12px !important;}
    .why-clearOS.pt-5 .row{align-items: center;}
    .lower-footer ul {gap: 10px !important;}
        .download-bx {
            min-height: auto;
            max-height: 100%;
        }
}
@media (max-width:768px){
    .desktop-text.text-left {text-align: center; padding-bottom: 2rem;}
    .testing-bx{margin-top: 2rem;}
    .testing-bx.bg-white.text-left.p-4 {min-height: 200px;max-height: 200px;}
    .legacy1.p-5{padding: 20px !important; margin-top: 2rem;}
    .why-clearOS .col-lg-6.col-md-5{order: 2;margin-top: 2rem;}
    .why-clearOS .col-lg-6.col-md-7{order: 1;}
    .why-cearOS-text.text-left{text-align: center;}
    .offer{text-align: center;}
    .btn-primery{padding: 10px 15px;}
    .btn-light{padding: 10px 15px;}
    .btn-white{padding: 10px 15px;}
    .full-section p.text-white.pb-4{padding: 10px 20px;}
    .desktop-img img{height:300px;}
.legacy-img img{height:150px;}
.offer img{height:300px;}
}
@media (max-width:570px){
    .desktop-img img{height: 200px;}
    .offer img{height: 300px;}
    .btn-primery{font-size: 12px;}
    .btn-light{font-size: 12px;}
    .btn-white{font-size: 12px;}
    button.blank-btn{font-size: 12px;}
.banner3{padding:50px 20px;}
.section1{padding:50px 20px;}
.text-banner h2{font-size:20px;}
.download-clearos h2.pb-5{font-size:20px; padding-bottom:0rem !important;}
    h6.green.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    h6.grey.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    h6.orange.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
.desktop-text h2{font-size:20px;}
.desktop-text p{font-size:14px;}
.download-bx p{font-size:14px;}
.clearos-mobile h2{font-size:20px;}
.clearos-mobile p{font-size:14px;}
        .desktop-text h5.orange.pb-3{font-size18px;}
.list{padding-left:20px;}
.legacy-edition h2.pb-5.text-center{font-size:20px; padding-bottom:0.5rem !important}
    .see-more a{font-size:13px;}
        .full-section p.text-white.pb-4{font-size:14px;}
img.img-fluid.mx-3{height:35px;}
.clearos-customers h2 {
        font-size: 20px !important;}
.customer h2{font-size:20px;}
.see-more{flex-direction:column; justify-content:center; gap:1rem;}
.see-more img {
    width: 100% !important;
}

}
@media (max-width:450px){
    .list ul li{font-size: 9px;}
   .btn-primery{font-size: 10px;}
   .btn-light{font-size: 10px;}
   .btn-white{font-size: 10px;}
    button.blank-btn{font-size: 10px;}
}
@media (max-width:370px){
    .logo img{height: 30px;}
}







.footer {
    background-color: #f2efea;
}

.footer ul.footer-menu {
    display: flex;
    align-items: start;
    justify-content: flex-start;
}

.footer ul.footer-menu ul {
    width: 25%;
}

.footer .footer-menu li {
    margin: 10px 0;
}

.footer .footer-menu li a {
    font-size: 14px;
    color: black;
    font-weight: 300;
    padding: 5px 0;
    display: block;
    line-height: normal;
    text-decoration: none;
}

.footer .footer-menu li:last-child a {
    padding-right: 0;
    margin-right: 0;
}

.footer .footer-menu li a:hover {
    opacity: 0.7;
}

.footer .clearsites-list {

    border-bottom: solid 1px #CECECE;
    padding: 25px 0;
}

.footer .clearsites-list ul li a {
    font-size: 13px;
    color: black;
    padding: 5px 4px;
    line-height: normal;
    display: inline-block;
    font-weight: 300;
    text-decoration: none;
}

.footer .copyright {
    padding: 15px 0;
}

.footer .copyright p {
    font-size: 12px;
    margin-bottom: 0;
}

.footer .copyright p a {
    color: black;
}

.footer .social-ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer .social-ul li a {
    color: #000;
    padding: 5px 10px;
    font-size: 18px;
}

.footer .footer-payment-icon .icon {
    display: flex;
    align-items: center;
    justify-content: end;
}

.footer .footer-payment-icon .icon div {
    margin: 0 1.5px;
}

.footer .footer-payment-icon .icon div img {
    max-width: 35px;
}

.lower-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 75px;
}

.lower-footer ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 35px;
}

li.company a {
    font-size: 17px !important;
    font-weight: 500 !important;
}

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

    .footer-logo {
        margin-bottom: 1.5rem;
    }

    .footer .footer-menu li a {
        padding: 5px 0;
        text-decoration: none !important;
    }

    .footer .digital-logo-box {
        width: 100%;
        max-width: 200px;
        margin: 20px auto 0;
        display: block;
    }

    .footer .clearsites-list {
        padding-top: 0;
    }

    .footer .clearsites-list ul {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer .clearsites-list ul li:first-child {
        border: 0;
        width: 100%;
        padding: 5px 10px;
        text-align: center;
    }

    .footer .clearsites-list ul li:first-child a {
        border: 0;
    }

    .footer .social-ul {
        justify-content: center;
        margin: 10px 0;
    }

    .footer .footer-payment-icon .icon {
        justify-content: center;
    }
}

.lower-footer ul li {
    list-style: none;
}
.company{
    list-style: none;
}

.see-more {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
}
.see-more a{
    color: #c2510d !important;
}
.see-more img{width: 80% !important;}
ul{
    padding-left: 0px !important;
}







.clearos-customers{
    background-color: #686868;
    color: white;
    padding: 20px 0;
}
.business-section h3{
    color: #c2510e;
    font-weight: 300;
    padding-top: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 2rem;
}
.clearos-customers h2{
    font-size: 25px;
    font-weight: 300;
}
.business-customers{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.customer-box {
    height: 200px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    width: 24%;
    text-align: center;
}
.customer-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.business-btn-show{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.business-btn-less{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: none;
}
.business-btn-less:hover{
    background-color: #c2510d;
    color: white;
}
.business-btn-show:hover{
    background-color: #c2510d;
    color: white;
}

.government-btn-show{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.government-btn-less{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: none;
}
.government-btn-less:hover{
    background-color: #c2510d;
    color: white;
}
.government-btn-show:hover{
    background-color: #c2510d;
    color: white;
}
.education-btn-show{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.education-btn-less{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: none;
}
.education-btn-less:hover{
    background-color: #c2510d;
    color: white;
}
.education-btn-show:hover{
    background-color: #c2510d;
    color: white;
}


.k-12-btn-show{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.k-12-btn-less{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: none;
}
.k-12-btn-less:hover{
    background-color: #c2510d;
    color: white;
}
.k-12-btn-show:hover{
    background-color: #c2510d;
    color: white;
}


.non-profit-btn-show{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.non-profit-btn-less{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: none;
}
.non-profit-btn-less:hover{
    background-color: #c2510d;
    color: white;
}
.non-profit-btn-show:hover{
    background-color: #c2510d;
    color: white;
}

.religious-btn-show{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.religious-btn-less{
    padding: 10px 20px;
    background-color: #c2510d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: none;
}
.religious-btn-less:hover{
    background-color: #c2510d;
    color: white;
}
.religious-btn-show:hover{
    background-color: #c2510d;
    color: white;
}
.show-more-btn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.business-extra-box, .government-extra-box, .education-extra-box, .k-12-extra-box, .non-profit-extra-box, .religious-extra-box {
    display: none;
}

@media (max-width:1200px){
    .customer-box {
        width: 32%;
    }
}
@media (max-width:991px){
    .customer-box {
        height: 150px;
    }
    .customer-box {
        width: 31%;
    }
}

@media (max-width:570px){
    .customer-box {
        height: 100px;
        width: 48%;
    }
    .business-btn-show, .government-btn-show, .education-btn-show, .k-12-btn-show, .non-profit-btn-show, .religious-btn-show{
        font-size: 11px;
    }
    .business-btn-less, .government-btn-less, .education-btn-less, .k-12-btn-less, .non-profit-btn-less, .religious-btn-less{
        font-size: 11px;
    }
    .business-customers {
        gap: 10px;
       flex-wrap: wrap;
    }
    .customer-box img{
        height: 80px;
    }
}