@media (min-width: 1051px){
    .sidebar-toggle {
        display: none;
    }
}

@media (max-width: 1250px){
    .navbar-logo img{
        width: 200px;
    }
    .navbar-menu{
        gap:10px;
    }
    .document-sidebar{
        padding: 30px;
    }
    .features-img2 {
        padding: 30px 110px 0;
    }
    .business-rules .center-title{
        width: 70%;
     }
     .server-card .center-title{
        width: 70%;
     }
     .business-rule .center-title{
        width: 76%;
     }
     @media (max-width: 1525px){
        .why-title p{
            width: 90%;
            margin: 0 auto;
         }
     }
     

}
@media (max-width: 1180px){
    .col-4 {
        width: 49%;
        margin-bottom: 25px;
    }
    .business-rule .center-title{
        width: 100%;
     }
    
}
@media (max-width: 1150px){
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 30px;
    }
    h3{
        font-size: 22px;
    }
	.rules-content h2 {
		font-size: 24px;
		font-weight: 400;
	}
    .hero{
        padding: 200px 0 40px;
        height: auto;
    }
    .center-title{
        width: 80%;
    }
    .service-card {
        width: 48.5%;
        margin-bottom: 30px;
    }
    .card-box{
        height: 790px;
        padding: 20px;
    }
    .col-5{
        width: 100%;
    }
    .col-7{
        width: 100%;
    }
    .hero{
        text-align: center;
        padding: 150px 0 50px;
        height: auto;
    }
    .hero img {
        width: 50%;
        margin-top: 40px;
    }
    .hero-btn {
        justify-content: center;
    }
    .business-rules .center-title{
        width: 100%;
     }
     .server-card .center-title{
        width: 100%;
     }
}
@media (max-width: 1050px){
    .col-6{
        width: 100%;
        margin: 10px 0;
    }
    .col-5{
        width: 100%;
    }
    .col-7{
        width: 100%;
    }
    .features .col-6{
        width: 100%;
    }
    .code-area .col-6{
        width: 100%;
    }
    .hero{
        text-align: center;
        padding: 150px 0 50px;
        height: auto;
    }
    .hero img {
        width: 50%;
        margin-top: 40px;
    }
    .hero-btn {
        justify-content: center;
    }
    .center-title {
        width: 90%;
    }
    .coustomer{
        padding: 20px 0 50px;
    }
    .arrow-img{
        display: none;
    }
    .how-work-box{
        padding: 0 10px;
    }
    .col-3 {
        width: 49%;
        margin-bottom: 25px;
    }
    .card-box {
        height: 620px;
        padding: 20px;
    }
    .section-padding{
        padding: 70px 0;
    }
    .footer-box-content {
        width: 40%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .footer-box img{
        width: 200px;
    }
    .footer-box {
        width: 30%;
        margin-bottom: 30px;
        padding-left: 0px;

    }
    .copyright {
        margin-top: 50px;
    }
    .section-padd-200{
        padding: 150px 0 80px;
    }
    .sing-up-box p {
        font-size: 16px;
        line-height: 26px;
        margin: 20px 0;
    }
    .mr-100 {
        margin-top: 0px;
    }
    .document-area{
        flex-direction: column;
    }
    .sidebar-toggle {
        padding: 12px 16px;
        line-height: 0px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #bcbcbc;
        border-radius: 7px;
		cursor:pointer;
    }
		.sidebar-toggle:hover {
			border: 1px solid #ffbb00;
		}
			.sidebar-toggle:hover span {
				color: #ffbb00;
			}

	.document-sidebar.active {
		display: block;
	}
    .document-sidebar{
        width: 100%;
        margin-bottom: 40px;
        display : none;
    }
    .document-content{
        width: 100%;
    }
    .rules-img {
        width: 100%;
        position: relative;
        bottom: -5px;
    }
    .reverse-flex{
        flex-direction: column-reverse;
    }
    .col-4 {
        width: 49%;
        margin-bottom: 25px;
    }
    .rule-btn{
        justify-content: start;

    }
    .padd-top-50{
        padding-top: 40px;
    }
}
@media (max-width: 900px){
    .col-6{
        width: 100%;
        margin: 10px 0;
    }
    .card-box{
        height: 700px;
    }
    footer{
        padding: 50px 0;
    }
	.legal-area h2 {
		font-size: 28px;
	}
	.legal-area p, .legal-area h4 {
		font-size: 14px;
		line-height:20px;
	}
    
}
@media (max-width: 768px){
    .hero img {
        width: 62%;
        margin-top: 20px;
    }
    .center-title {
        width: 100%;
    }
    .main{
        width: 94%;
    }
    .activation .main{
        width: 100%;
    }
    .rules-box{
        padding: 50px 50px 0;
    }
    .col-3 {
        width: 100%;
        margin-bottom: 25px;
    }
    .how-work-box{
        margin-bottom: 30px;
    }
    .card-box{
        height: auto;
    }
    .cardBox-img img {
        position: relative;
        bottom: -24px;
    }
    .sing-up-area{
        padding: 50px;
    }
    
    .col-4{
        width: 100%;
    }
    .code-area, .legal-area{
        padding: 40px;
    }

		.legal-area h2 {
			font-size: 26px;
		}
	.activation .main {
		padding: 40px 30px 0px 30px;
	}
}
@media (max-width:700px){

    .footer-box {
        width: 49%;
    }
		.footer-box h3 {
			margin-bottom: 14px;
		}
    .footer-box.footer-box-content {
        width: 100%;
    }
		.footer-box ul li {
			font-size: 14px;
			margin-top: 4px;
		}
    .features-img2 {
        padding: 39px 28px 0;
    }
    .features-img{
        padding: 39px 28px 0;
    }
}
@media (max-width:600px){
    .serve-area{
        padding: 30px;
    }
    .service-card {
        width: 100%;
        margin-bottom: 30px;
    }
    .hero img {
        width: 100%;
    }
    .section-padding{
        padding: 50px 0;
    }
    .sing-up-box{
        width: 100%;
    }
    .sing-up-area{
        padding: 50px 5px;
    }
    .copyright{
        margin-bottom: 0;
    }
    .gobal-btn a{
        padding: 9px 13px;
    }
    .border-btn a{
        padding: 9px 13px;
    }
    .hero-btn .gobal-btn {
        margin-right: 5px;
    }
    .sing-up-box form button {
        border-radius: 46px;
        padding: 7px 24px;
        margin-left: -20px;
    }
    .doucoment-button .gobal-btn a{
        padding: 9px 15px;
    }
    .headind-topic{
        flex-direction: column;
    }
    .doucoment-title{
        width: 100%;
    }
    .doucoment-button{
        margin-top: 30px;
        text-align: left;
        width: 100%;
    }
    .cta-community{
        padding: 20px;
    }
    .doucment-form button{
        padding: 9px 15px;
    }
    .comment-top{
        align-items: start;
        flex-direction: column;
    }
    .comment-top select{
        margin-top: 20px;
    }
    .comment-heading{
        flex-direction: column;
    }
    .comment-heading h3{
        margin-bottom: 10px;
    }
    .rules-content{
        width: 90%;
    }
    section.business-rules.section-padd-200 {
        padding: 50px 0;
    }
    .checkbox-group input{
        width: 15px;
    }
    .code-area, .legal-area{
        padding: 20px 30px;
    }
	.legal-area h2 {
		font-size: 22px;
	}
		.legal-area p, .legal-area h4 {
			font-size: 13px;
			line-height:18px;
		}
}
@media (max-width:434px){
    .hero-btn .gobal-btn {
        margin-right: 9px;
    }
    .hero-btn{
        flex-wrap: wrap;
    }
    .hero h1 {
        font-size:35px!important;
    }
    .rules-box{
        padding: 20px 20px 0;
    }
    .copyright{
        font-size: 18px;
        margin-top: 20px;
    }
    .rule-btn .gobal-btn{
        margin-bottom: 30px;
    }
    .activation .main {
        padding: 15px;
    }
    
}
@media (max-width:376px){
    .hero-btn .gobal-btn {
        margin-bottom: 32px;
    }
    .footer-box {
        width: 100%;
    }
		.footer-box h3 {
			margin-bottom: 12px;
		}
		.footer-box ul li a {
			font-size: 13px;
		}
    .footer-box ul li {
        margin-top: 3px;
    }
    .activation-form{
        padding: 15px;
    }
}