/* domain pages styling */


.cart{
    width: 55px;
    height: 55px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 15%;
    right: 10%;
    border-radius: 50%;
    transition: .3s linear;
    cursor: pointer;
    z-index: 100;
}

.cart:hover{
    background-color: #1f1f1f1d;
}

.cart svg{
    width: 30px;
    height: 30px;
}

.cart_item-number{
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #ff1b1b;
    position: absolute;
    color: var(---background);
    font-size: 12px;
    top: 0px;
    right: 0px;
}

.cart_box{
    width: 200px;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(---background);
    box-sizing: border-box;
    box-shadow: 0px 0px 10px #0000001d;
    border-radius: 10px;
    min-height: 200px;
    position: fixed;
    top: 25%;
    font-family: var(---font);
    display: none;
    right: 5%;
    z-index: 500;
}

.close_item{
    display: none !important;
}

.cart_box-header{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 15px;
    background-color: var(---primary_color);
    color: var(---background);
    letter-spacing: 1px;
}

.cart_box-header span{
    position: absolute;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    right: 10%;
    color: var(---background);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    padding-top: 15px;
    z-index: 100;
    cursor: pointer;
}

.cart_box-header span svg{
    width: 20px;
    height: 20px;
}


.sub-total{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #00000022;
    margin-top: 30px;
}

.cart_box a{
    width: 90%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: var(---button_background);
    border-radius: 10px;
    margin: auto auto;
    color: var(---background);
    text-decoration: none;
    font-size: 17px;
    transition: .4s linear;
}

.cart_box a:hover{
    background: var(---background_sect);
    border: 1px solid var(---button_background);
    color: var(---button_background);
}

.domain_hero{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.domain_serch{
    font-family: var(---font);
    box-sizing: border-box;
    overflow: hidden;
    width: 95%;
    margin: auto auto;
    padding-top: 50px;
}

.domain_serch h2{
    margin-bottom: 0px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    font-size: 3rem;
    letter-spacing: .5px;
}

.domain_serch p{
    line-height: 1.5rem;
    letter-spacing: .5px;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

.d_search_form{
   width: 100%;
   height: 70px;
   box-sizing: border-box;
   overflow: hidden;
   max-height: 70px;
   background-color: var(---background);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.d_search_form input{
    width: calc(100% - 200px);
    box-sizing: border-box;
    padding: 20px 30px;
    font-size: 1rem;
    letter-spacing: .5px;
    font-weight: 500;
    border: none;
    outline: none;
    min-height: 100%;
}

.d_search_form input::placeholder{
    font-weight: 600;
    opacity: 0.5;
}



.d_search_form button{
    width: 200px;
    height: 100%;
    background-color: var(---button_background);
    color: var(---background);
    border: 2px solid var(---primary_color);
    font-size: 1rem;
}

.d_search_form button em{
    display: none;
}

.d_search_form button small{
    font-size: 1.2rem !important;
}

.d_result{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 20px;
}

.d_result h3{
    font-size: 2rem;
    box-sizing: border-box;
    margin-bottom: 20px;
    text-align: center;
}

.result_check{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 7px;
    background-color: var(---background);
    margin-bottom: 10px;
    opacity: 0.5;
   transform: translateY(-20px);
   transition: .3s linear;
   transition-delay: 300ms;
}

.result_check{
    animation: dsearchFadeIn 1s cubic-bezier(.4,1.6,.6,1) forwards;
}

@keyframes dsearchFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(0.96);
        box-shadow: none;
    }
    60% {
        opacity: 0.7;
        transform: translateY(10px) scale(1.03);
        box-shadow: 0 8px 32px #00000022;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 16px #00000018;
    }
}

.main_relust{
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #b9b9b9c8;
    flex-wrap: wrap;
}


.main_relust strong{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    width: calc(100% - 250px);
    box-sizing: border-box;
    overflow: hidden;
    font-size: 1.4rem;
    letter-spacing: .5px;
    font-weight: 500;
    gap: 10px;
    height: 100%;
}

.main_relust strong .result_icon{
    font-size: 1rem;
    box-sizing: border-box;
}

.main_relust .result_price{
    width: calc(250px / 2);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-left: 1px solid #b9b9b9c8;
    border-right: 1px solid #b9b9b9c8;
    font-size: 1.5rem;
    letter-spacing: .5px;
    color: var(---text_color);
}

.add_cart em{
    display: none;
}

.add_cart small{
    font-size: 1.3rem;
}

.main_relust .add_cart{
    width: calc(250px / 2);
    border: none;
    background-color: transparent;
    height: 100%;
    overflow: hidden;
    font-size: 1.3rem;
    box-sizing: border-box;
    letter-spacing: .5px;
    color: var(---button_background);
    cursor: pointer;
}

.suggested_sect{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background: var(---background_sect);
}

.suggested_d{
    width: 95%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #eeeeee;
    margin: auto auto;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    font-family: var(---font);
}

.suggested_d h4{
    margin: 5px 0px 10px 0px;
    letter-spacing: .5px;
    box-sizing: border-box;
}

.more_suggestion{
    display: flex;
    align-items: center;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box;
    cursor: pointer;
}

.my_domain_btn{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
}

.my_domain_btn button{
    width: 200px;
    height: 70px;
    overflow: hidden;
    border: 2px solid var(---button_border);
    border-radius: 7px;
    background: var(---button_gradent);
    color: var(---background);
    font-size: 1.1rem;
}

.product_article{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(---background_sect);
    font-family: var(---font);
}

.product_article h2{
    text-align: center;
    margin-bottom: 0px;
    font-size: 2.3rem;
    letter-spacing: .5px;
}

.product_article_holder{
    width: 95%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.product_article_box{
    width: calc(100% / 3 - 30px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(---background);
    border-radius: 20px;
    min-height: 400px;
    box-shadow: 1px 3px 10px #0000007b;
    transition: all .3s ease-in-out;
    text-decoration: none;
    color: var(---text_color);
}

.product_article_box .post_img{
    width: 100%;
    height: calc(400px / 2.25);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s linear;
}

.post_img img{
    width: auto;
    height: 100%;
    object-fit: cover;
    min-width: 100%;
}

.video-js .vjs-big-play-button{
    background: var(---button_gradent) !important;
    color: var(---background) !important;
    left: calc(50% - 3rem) !important;
    top: calc(50% - 1.63332rem) !important;
}


.post_img:hover img{
    transform: scale(1.1);
}

.post_img:hover video{
    transform: scale(1.1);
    transition: .3s linear;
}

.post_content{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
}

.tags{
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    height: fit-content;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    font-size: 13px;
    box-sizing: border-box;
    opacity: .8;
    font-weight: 500;
    display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     line-height: 2rem;
}

.title{
    font-size: 1.3rem;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0px;
    padding: 5px 10px;
    min-height: 120px;
    letter-spacing: .5px;
    line-height: 2.2rem;
    cursor: pointer;
    opacity: .9;
    font-family: Cambria, Cochin, Georgia,
     Times, 'Times New Roman', serif;
     height: fit-content;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
}

.title:hover{
    text-decoration: underline;
}
.decription{
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 2rem;
    color: var(---text_color);
    letter-spacing: .5px;
    margin: 0px;
    padding-top: 0px !important;
    font-weight: 500;
     height: fit-content;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     display: none;
}

.product_article_box .title{
    min-height: 100px !important;
    padding: 0px 10px !important;
}

.product_article_box .post_img video{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    object-fit: cover;
}

.product_article_box .post_img div{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.product_article .author{
    display: block !important;
}

.post_timesince{
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;
    width: 100%;
    height: fit-content;
    font-weight: 500;
    color: var(---text_light);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.blog_nav{
    width: 350px;
    height: fit-content;
    box-sizing: border-box;
    padding: 10px 40px;
    border: 1px solid #595959e5;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.blog_nav em{
    width: 100%;
    height: fit-content;
    margin-bottom: 10px;
    box-sizing: border-box;
    line-height: 1.3rem;
    opacity: 0.7;
    initial-letter: .5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
}

.blog_nav span{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
}

.blog_nav span a{
    text-align: none;
    color: var(---text_color);
    font-size: 30px;
    text-decoration: none;
}

.domain_pricing_hero{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.move_to{
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.move_to a{
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(---button_background);
    border-radius: 7px;
    text-decoration: none;
    color: var(---background);
}

.domain_box_sect{
    width: 100%;
    height: fit-content;
    padding: 20px;
    box-sizing: border-box;
    background: var(---background_gradient);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.domain_box{
    width: calc(100% / 4);
    box-sizing: border-box;
    background-color: var(---background);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 2px 2px 10px #424242;
    transition: .5s linear;
    font-family: var(---font);
    letter-spacing: .5px;
}

.domain_box p{
    font-size: 14px;
    color: var(---text_light);
}

.domain_box:hover{
    transform: translateY(-10px);
}

.why_hackton_domain{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background: var(---background_sect);
    padding: 10px 20px;
    font-family: var(---font);
}

.why_hackton_domain h2{
    text-align: center;
    box-sizing: border-box;
    font-size: 2.5rem;
}

.why_hackton_domain p{
    font-size: 15px;
    text-align: center;
    letter-spacing: .5px;
    color: var(---text_color);
}

.advantage_box-holder{
    width: 90%;
    margin: auto auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 10px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.advantage_box{
    width: calc(100% / 3.2);
    box-sizing: border-box;
    padding: 15px;
    overflow: hidden;
    border: 1px solid var(---button_border);
    background-color: var(---background);
    border-radius: 10px;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 0px 10px #6d6d6dd4;
    min-height: 265px;
}

.advantage_box span{
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage_box span img{
    width: auto;
    height: 100%;
    object-fit: cover;
}

.advantage_box h3{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .5px;
    font-weight: 500;
}

.advantage_box p{
    letter-spacing: .5px;
    font-weight: 500;
    line-height: 1.5rem;
}

.domain_price_table-holder{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto;
    padding: 10px;
    margin-top: 50px;
    font-family: var(---font);
}

.domain_price_table-holder h2{
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: .5px;
}

.domain_price_table-holder p{
    text-align: center;
    letter-spacing: .5px;
    font-size: 15px;
}

.tld_search_holder{
    width: 95%;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto;
}

.tld_search_bar{
    width: fit-content;
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #6d6d6dd4;
    background-color: var(---background);
}

.tld_search_bar span{
    width: 30px;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(---text_light);
    padding-left: 10px;
}

.tld_search_bar input{
    width: 300px;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    outline: none;
    border: none;
    background-color: transparent;
    font-size: 14px;
    letter-spacing: .5px;
    color: var(---text_light);
}

.main_table_holder{
    width: 95%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: transparent;
    margin-top: 30px !important;
    margin: auto auto;
}

.main_table_holder table{
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: fit-content;
    text-align: center;
    font-family: var(---font);
}

.main_table_holder table tr > th{
    font-weight: 500;
    letter-spacing: .5px;
    padding: 10px;
    width: calc(100% / 5);
    background: var(---background_gradient);
}

.main_table_holder table tr > td{
    font-size: 14px;
    padding: 10px;
    overflow: hidden;
    letter-spacing: .5px;
    color: var(---text_light);
    border-radius: 5px;
}

.main_table_holder table tr > td:nth-child(1), .main_table_holder table tr > td:nth-child(3){
    background: var(---background);
}

.main_table_holder table tr > td:nth-child(2), .main_table_holder table tr > td:nth-child(4){
    background: var(---primary_color);
    color: var(---background) !important;
}

.main_table_holder table tr > td:nth-child(5){
    background: var(---button_border);
    color: var(---background) !important;
}

.domain_transfer_features{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    background-color: var(---background_sect);
    font-family: var(---font);
    letter-spacing: .5px;
}

.domain_transfer_features h2{
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: .5px;
}
.domain_transfer_features p{
    font-size: 15px;
    letter-spacing: .5px;
    color: var(---text_color);
    text-align: center;
}

.features_box_holder{
    width: 90%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    gap: 20px;
}

.features_box{
    width: calc(100% / 2 - 20px);
    height: fit-content;
    box-sizing: border-box;
    padding: 15px;
    overflow: hidden;
    background-color: var(---background);
    border: 2px dashed var(---button_border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 220px;
}

.for_text{
    width: calc(100% - 100px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
}

.for_text h3{
    font-size: 1.5rem;
    box-sizing: border-box;
    letter-spacing: .5px;
}

.for_text p{
    font-size: 14px;
    line-height: 1.5rem;
    text-align: start !important;
}

.for_icon{
    width: 90px;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.for_icon svg{
    width: 90px;
    height: 90px;
}

.use_mode{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    background: var(---primary_color);
    border-top: 3px solid var(---background);
    min-height: 200px;
    font-family: var(---font);
    color: var(---background);
}

.use_mode h2{
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: .5px;
}

.use_mode p{
    font-size: 15px;
    letter-spacing: .5px;
    color: var(---background);
    text-align: center;
}

.use_mode_box_holder {
    width: 90%;
    margin: 40px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
    animation: fadeInUp 1s ease;
}

.use_mode_box_holder > div {
    background: linear-gradient(135deg, var(---primary_color) 60%, var(---button_background) 100%);
    color: var(---background);
    border-radius: 16px;
    box-shadow: 0 6px 24px #0000001a;
    padding: 32px 24px;
    min-width: 260px;
    max-width: 340px;
    flex: 1 1 260px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .3s cubic-bezier(.4,2,.6,1), box-shadow .3s;
    opacity: 0;
    animation: popIn .7s forwards;
    animation-delay: calc(var(--i, 0) * 0.15s);
}

.use_mode_box_holder > div:hover {
    transform: translateY(-10px) scale(1.04) rotate(-1deg) !important;
    box-shadow: 0 12px 32px #00000033;
}

.use_mode_box_holder > div .icon,
.use_mode_box_holder > div svg {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.10);
    border-radius: 50%;
    box-shadow: 0 2px 8px #00000014;
    font-size: 2.5rem;
    color: var(---background);
}

.use_mode_box_holder > div h3 {
    margin: 0 0 12px 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
}

.use_mode_box_holder > div p {
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    opacity: .92;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(.8) translateY(40px);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.vps_hero-sect{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(---font);
}

.vps_hero-sect article{
    width: 60%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto;
    text-align: center;
}

.vps_hero-sect article h2{
    font-size: 3rem;
    letter-spacing: .5px;
    line-height: 3.5rem;
}

.vps_hero-sect article p{
    letter-spacing: .5px;
    font-size: 18px;
}

.vps_plan_sect{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    background: var(---background_sect);
    font-family: var(---font);
    letter-spacing: .5px;
    padding-top: 20px !important;
}

.vps_plan_sect h1{
    text-align: center;
    color: var(---text_light);
    opacity: 0.8;
    font-size: 1.2rem;
    font-weight: 500;
}

.vps_plan_sect h2{
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: .5px;
}

.vps_plan_sect_p{ 
    width: 60%;
    text-align: center;
    margin: auto auto;
    line-height: 1.7rem;
    letter-spacing: .5px;
    font-size: 16px;
}

.vps_plan_hoder{
    width: 90%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto auto;
    gap: 50px;
    margin-top: 30px !important;
}

.vps_plan_card{
    width: calc(100% / 3 - 50px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(---background);
    border-radius: 10px;
    box-shadow: 0px 0px 10px #0000001a;
    min-width: 200px;
    border: 1px solid var(---text_light);
    padding: 20px;
}

.vps_plan_header{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 20px;
    border-bottom: 1px solid var(---text_light);
}

.vps_plan_header h3{
    font-size: 2rem;
    letter-spacing: .5px;
    margin-top: 0px;
    text-align: center;
}

.vps_plan_header p{
    font-size: 15px;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.5rem;
}

.vps_plan_header .vps_plan_price strong{
    font-size: 1.5rem;
}
.vps_plan_card b{
    font-size: 1.3rem;
    letter-spacing: .5px;
    font-weight: 500;
}
.vps_plan_card ul{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 2.2rem;
    padding-inline-start: 20px;
    letter-spacing: .5px;
    font-size: 16px;
}

.vps_plan_btn{
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    color: var(---background);
    letter-spacing: .5px;
    font-size: 15px;
    border-radius: 7px;
    background-color: var(---button_background);
    cursor: pointer;
}

.view_more_plans{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 20px 0px;
}

.view_more_plans a{
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 15px 25px;
    background-color: var(---button_background);
    border-radius: 7px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(---background);
    font-size: 15px;
    justify-content: center;
}

.why_hackton-hosting{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    background-color: var(---background);
    margin-bottom: 30px !important;
    font-family: var(---font);
}

.why_hackton-hosting h1{
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: .5px;
    font-weight: 500;
    margin-top: 40px;
}

.why_hackton-hosting h2{
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: .5px;
}

.why_hackton-hosting p{
    width: 60%;
    margin: auto auto;
    letter-spacing: .5px;
    line-height: 1.7rem;
    font-family: 16px;
    text-align: center;
}

.hosting_f_holder{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    padding: 20px 0px;
}

.hosting_f-box{
    width: 220px;
    height: fit-content;
    box-sizing: border-box;
    padding: 30px 20px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0px 5px 10px #0000005a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hosting_f-box span{
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hosting_f-box span > img{
    width: auto;
    height: fit-content;
    object-fit: cover;
    min-width: 100%;
}

.hosting_f-box h3{
    text-align: center;
    letter-spacing: .5px;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7rem;
}

.hosting_f-box p{
    width: 100% !important;
}

.f_bt{
    padding: 25px !important;
    background: var(---button_gradent) !important;
    font-size: 20px !important;
}

.our_vps-plan{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(---font);
    background: var(---background_sect);
    min-height: 200px;
}

.our_vps-plan h2{
    text-align: center;
    font-size: 2rem;
    letter-spacing: .5px;
    margin-bottom: 0px;
}

.our_vps-plan p{
    text-align: center;
    font-size: 15px;
    letter-spacing: .5px;
    color: var(---text_color);
}

.plan_table_holder{
    width: 95%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto auto;
    padding: 10px;
    margin-top: 30px !important;
}

.plan_table{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 700px;
    text-align: center;
}

.plan_table tr > th{
    padding: 10px;
    box-sizing: border-box;
    width: calc(100% / 13);
    background-color: var(---text_color);
    color: var(---background) !important;
    font-size: 15px;
    letter-spacing: .5px;
    font-weight: 500;
}

.plan_table tr > td{
    padding: 10px;
    box-sizing: border-box;
    width: calc(100% / 13);
    font-size: 15px;
    color: var(---background);
    background-color: var(---primary_color);
    letter-spacing: .5px;
}

.plan_table tr > td:nth-child(1){
    text-align: start !important;
    font-size: 15px !important;
    background-color: var(---text_color) !important;
}

.plan_table tr > th:nth-child(1){
    width: calc(100% / 13 * 2);
    text-align: start !important;
    font-size: 1.1rem;
}

.deploy_content{
    width: calc(75% - 170px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-left: 170px;
    min-height: 100px;
    margin-top: 10px !important;
    padding: 10px;
    font-family: var(---font);
}

.deploy_ready{
    width: calc(25% - 20px);
    height: 550px;
    box-sizing: border-box;
    overflow-y: scroll;
    background-color: var(---background);
    border-radius: 10px;
    padding: 10px;
    position:  fixed;
    right: 10px;
    top: 75px;
    border: 1px solid var(---button_border);
    padding: 10px;
    font-family: var(---font);
    transition: .3s linear;

}

.location{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(---background);
    border-radius: 10px;
    border: 1px solid var(---button_border);
    padding: 10px;
}

.location_table{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
}

.location_table tr th{
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 10px;
    text-align: start;
    font-size: 15px;
    font-weight: 500;
}

.location_table tr td{
    padding: 10px;
    box-sizing: border-box;
    width: calc(100% / 3);
    font-size: 14.5px;
    border-bottom: 1px solid #00000014;
}

.td_1{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.td_1 span{
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.location_table tr td > span img{
    width: auto;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
}

.location_table tr > td input{
    cursor: pointer;
}


.vps_plans{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(---background);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(---button_border);
    margin-top: 30px;
}

.all_link{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    color: #0000006c;
    padding: 10px;
    font-size: 14px;
}

.all_link span{
    cursor: pointer;
}

.deploy-plan_table-holder{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 20px;
}

.main{
    color: var(---text_color);
}

.main::before{
    content: '';
    width: 120px;
    position: absolute;
    border-bottom: 2px solid var(---text_color);
    transform: translateY(25px);
}

.deploy_table{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
}

.deploy_table tr th{
    width: calc(100% / 6);
    font-size: 13px;
    color: var(---text_light);
    font-weight: 500;
    padding: 10px;
    border-bottom: 1px solid #00000018;
}

.deploy_table tr > td{
    padding: 10px;
    text-align: center;
    font-size: 11px !important;
    color: var(---text_light);
    border-bottom: 1px solid #00000018;
    width: calc(100% / 6);
    cursor: pointer;
    transition: .3s linear;
}

.deploy tr:hover{
    background: whitesmoke;
}

.image_select{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 10px;
}

.os_box{
    width: calc(100% / 4 - 30px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    border-radius: 7px;
    box-shadow: 0px 0px 10px #0000003c;
    transition: .3s linear;
}

.os_box:hover{
    background-color: #f5f5f5;
}

.os_box span img{
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.os_box p{
    margin: 7px 0px;
    font-size: 15px;
}

.op_sect_row{
    margin-top: 10px;
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    border-top: 1px solid #00000018;
}

.op_sect_row select{
    width: 90%;
    padding: 7px;
    font-size: 11px;
    color: var(---text_light);
    text-align: center;
    border: none;
    outline: none;
    box-sizing: border-box;
    margin: auto auto;
    background-color: transparent;
}

.deploy_ready h4{
    color: #00000066;
}

.deploy_ready .sum_row{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid #00000033;
    margin-bottom: 10px;
}

.deploy_ready .sum_row label{
    font-size: 10px;
}

.deploy_ready .sum_row input{
    border: none;
    padding: 7px;
    box-sizing: border-box;
    width: 100%;
    font-size: 11px;
    outline: none;
}

.deploy_btn{
    margin: 10px 0px;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    background: var(---button_background);
    color: var(---background);
    border-radius: 7px;
    cursor: pointer;
    border: 2px solid var(---primary_color);
    transition: .3s linear;
}

.deploy_btn:hover, .deploy_btn:active, .deploy_btn:focus{
    background: var(---background_sect);
    color: var(---button_background);
}

.f_space{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.f_space_row{
    width: calc(100% / 2 - 5px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid #00000033;
}

.f_space_row input{
    border: none;
    padding: 7px;
    box-sizing: border-box;
    width: 100%;
    font-size: 11px;
    outline: none;
}

.f_space_row label{
    font-size: 10px;
}

.set_row{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 10px;
}

.set_row label{
    font-size: 13px;
    box-sizing: border-box;
    color: #0000004d;
}

.set_row input{
    width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid #0000004c;
}


/* website styling */

.web_branding_sect{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.web_brand_content{
    width: 95%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: auto auto;
    padding: 40px 20px;
    font-family: var(---font);
}

.web_brand_text{
    width: 50%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
}

.web_brand_text h2{
    font-size: 2.5rem;
    letter-spacing: .5px;
    line-height: 3rem;
}

.web_brand_text p{
    font-size: 16px;
    line-height: 1.7rem;
    letter-spacing: .5px;
    color: var(---text_color);
    font-weight: 500;
}


.web_brand_image{
    width: calc(50% - 30px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    transition: .4s linear;
}

.web_brand_image:hover{
    scale: 1.05;
}

.web_brand_text button{
    width: 230px;
    height: 60px;
    background: var(---button_background);
    border: 2px solid var(---primary_color);
    color: var(---background);
    border-radius: 7px;
    font-size: 17px;
    letter-spacing: .5px;
    transition: .3s linear;
    cursor: pointer;
}

.web_brand_text button:hover{
    background: var(---button_gradent);
    border: 1px solid var(---button_border);
}

.web_brand_image img{
    width: auto;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
    min-width: 100%;
}


.build{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 20px;
    background: var(---background_sect);
    font-family: var(---font);
}

.build h2{
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: .5px;
    text-align: center;
}

.build p{
    width: 80%;
    margin: auto auto;
    text-align: center;
}

.barnding_art{
    width: 95%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 50px !important;
    margin: auto auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 10px 0px;
}


.branding_text h2{
    font-size: 2.3rem !important;
    line-height: 3rem;
    text-align: start !important;
}

.branding_text p{
    font-size: 15px;
    box-sizing: border-box;
    line-height: 1.7rem;
    width: 100% !important;
    text-align: start !important;
}

.branding_text{
    width: 45%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
}

.brand_image{
    width: calc(50% - 30px);
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 0px 0px 10px #0000004f;
}

.brand_image img{
    width: auto;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
    min-width: 100%;
}

.host_web{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    padding: 20px;
    background: var(---background_gradient);
    font-family: var(---font);
}

.host_web h2{
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: .5px;
    text-align: center;
}

.host_web p{
    width: 80%;
    margin: auto auto;
    text-align: center;
}

.host_offer_holder{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
    padding: 10px 0px;
}

.host_offer_box{
    width: calc(100% / 3 - 30px);
    min-width: 270px;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 15px;
    background-color: var(---background);
    padding: 15px;
    box-shadow: 0px 0px 10px #00000064;
}

.host_offer_box h3{
    text-align: center;
    font-size: 1.7rem;
    letter-spacing: .5px;
}

.host_offer_box p{
    text-align: center;
    letter-spacing: .5px;
    line-height: 1.7rem;
    font-size: 17px;
    width: 100% !important;
}

.host_offer-img{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px !important;
    max-height: 340px !important;
}

.host_offer-img img{
    width: auto;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
    min-width: 100%;
}

.more_holder{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0px;
}

.more_holder a{
    padding: 25px 35px;
    background: var(---button_gradent) ;
    border: 1px solid var(---button_border);
    border-radius: 7px;
    text-decoration: none;
    color:var(---background);
    font-size: 1.1rem;
}

.why_hackton {
  background: var(---primary_color);
  padding: 60px 0 40px 0;
  margin: 40px 0;
  box-shadow: 0 8px 32px rgba(60,60,120,0.08);
  animation: fadeInUp 1s cubic-bezier(.39,.575,.565,1.000);
  color: var(---background) !important;
  font-family: var(---font);
}
.why_hackton h2 {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
  animation: fadeInDown 0.8s;
}
.why_hackton > p {
  text-align: center;
  width: 90%;
  margin: auto auto;
  font-size: 1.1rem;
  margin-bottom: 36px;
  animation: fadeInDown 1s;
  line-height: 1.7rem;
}
.why_hackton_benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.why_hackton_benefit {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(60,60,120,0.07);
  padding: 32px 24px 28px 24px;
  width: 260px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  animation: benefitPop 0.7s;
  box-sizing: border-box;
}
.why_hackton_benefit:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 8px 32px rgba(60,60,120,0.13);
}
.why_hackton_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #60a5fa 100%);
  color: #fff;
  font-size: 2.2rem;
  box-shadow: 0 2px 12px rgba(99,102,241,0.13);
  animation: iconBounce 1.2s infinite alternate;
}
.why_hackton_icon svg {
  display: block;
  width: 36px;
  height: 36px;
}
.why_hackton_benefit h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #3730a3;
  letter-spacing: 0.5px;
}
.why_hackton_benefit p {
  color: #475569;
  font-size: 1rem;
  line-height: 1.5;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px);}
  to { opacity: 1; transform: translateY(0);}
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px);}
  to { opacity: 1; transform: translateY(0);}
}
@keyframes benefitPop {
  0% { opacity: 0; transform: scale(0.8);}
  100% { opacity: 1; transform: scale(1);}
}
@keyframes iconBounce {
  0% { box-shadow: 0 2px 12px rgba(99,102,241,0.13);}
  100% { box-shadow: 0 8px 24px rgba(99,102,241,0.18);}
}


.pastepro{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    background: var(---background_sect);
    padding: 20px;
    font-family: var(---font);
}

.pastepro h2{
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 1px;
    width: 90%;
    margin: auto auto;
    line-height: 3.2rem;
}

.pastepro p{
    width: 90%;
    margin: auto auto;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: .5px;
    line-height: 1.7rem;
    font-size: 1.1rem;
}


.file_box-holder{
    width: 90%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto  auto;
    background-color: var(---background);
    padding: 20px;
    box-shadow: 0px 0px 10px #0000004c;
    margin-top: 50px !important;
    border-radius: 10px;
}

.upload-section {
  padding: 40px 20px;
  text-align: center;
}

.upload-section h2{
    font-size: 1.7rem !important;
    margin-bottom: 20px;
}

.upload-box {
  border: 2px dashed var(---primary_color);
  border-radius: 10px;
  padding: 40px;
  background: #f0f4fa;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
}

.upload-box:hover {
  background: #e0e7f1;
}

.upload-box p {
  font-size: 18px;
  color: var(---primary_color);
}

.upload-box span {
  display: block;
  font-size: 14px;
  color: #777;
  margin-top: 5px;
}

.upload-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  cursor: pointer;
}

.file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start;
  width: 33% !important;
}

.preview-box {
  width: 90%;
  padding: 10px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  border-radius: 7px;
  box-shadow: 0 2px 10px #0000000d;
  font-size: 12px !important;
  overflow-wrap: break-word;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.preview-box div{
    width: 100px;
}

.preview-box p{
    width: fit-content;
}

.file_holder{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 10px;
}

.file_holder button{
    width: 150px;
    height: 45px;
    cursor: pointer;
    overflow: hidden;
    border: none;
    background-color: var(---button_background);
    color: var(---background);
    border-radius: 20px;
    font-size: 14px;
    letter-spacing: 1px;
}

/* dns styling */

.dns_head {
      background-color: #001441;
      color: white;
      padding: 20px;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
    }
    .container {
      width: calc(100% - 150px);
      float: right;
      margin: auto;
      padding: 30px 20px;
      box-sizing: border-box;
    }
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .top-bar h2 {
      margin: 0;
      font-size: 24px;
    }
    .add-btn {
      background: #2563eb;
      color: white;
      padding: 10px 18px;
      border: none;
      border-radius: 6px;
      font-size: 15px;
      cursor: pointer;
    }

    .status-active {
      color: #10b981;
      font-weight: 600;
    }
    .status-error {
      color: #ef4444;
      font-weight: 600;
    }

    /* Delete button only hover red */
    .delete-btn {
      font-size: 18px;
      color: #ef4444;
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      transition: 0.2s ease;
    }
    .delete-btn:hover {
      background-color: #fee2e2;
    }

    /* Modal */
    .modal {
      display: none;
      position: fixed;
      z-index: 500;
      left: 0; top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background: white;
      padding: 25px 30px;
      border-radius: 10px;
      width: 90%;
      max-width: 500px;
      position: relative;
    }
    .modal-content h3 {
      margin-top: 0;
      font-size: 20px;
    }
    .modal-content input {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 15px;
      font-size: 15px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .modal-content button {
      background: #2563eb;
      color: white;
      padding: 10px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    .close-btn {
      position: absolute;
      top: 12px;
      right: 15px;
      font-size: 20px;
      cursor: pointer;
      color: #888;
    }


@media screen and (max-width: 900px) {
    .use_mode_box_holder {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    .use_mode_box_holder > div {
        max-width: 100%;
        min-width: 0;
        width: 95%;
        margin: 0 auto;
    }
    .os_box{
        width: calc(100% / 3 - 30px);
        min-width: 129px !important;
    }
    .why_hackton_benefits {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .why_hackton_benefit {
    width: 90%;
  }
  .web_brand_content{
    padding: 40px 0px;
  }
  .web_brand_text h2{
    font-size: 2rem;
  }

  .barnding_art{
    flex-wrap: wrap;
  }

  .branding_text{
    width: 100%;
  }

  .brand_image{
    width: 100%;
  }

  .host_offer_box{
    width: calc(100% / 2 - 30px);
  }

  .file_box-holder{
    width: 100%;
  }

  .branding_text h2{
    font-size: 1.8rem !important;
  }
  .top-bar {
        flex-direction: column;
        align-items: flex-start;
      }
      .add-btn {
        margin-top: 10px;
      }
}



@media screen and (max-width:1200px) {
    .advantage_box{
        width: calc(100% / 2.2);
    }

    .features_box_holder{
        width: 100%;
    }
    .features_box:nth-child(1){
        min-height: 244px !important;
    }
    .vps_plan_hoder{
        width: 100%;
    }
    .hosting_f_holder{
        flex-wrap: wrap;
    }
    .deploy_ready{
        position: relative;
        height: fit-content;
        overflow: hidden;
        width: calc(100% - 190px);
        margin-left: 190px;
        box-sizing: border-box;
        margin-bottom: 40px !important;
        top: 10px;
    }
    .deploy_content{
        width: calc(100% - 170px);
    }
}

@media screen and (max-width:1000px) {
    .product_article_box{
        width: calc(100% / 2 - 30px);
    }
    .blog_nav{
        width: calc
        (100% / 2 - 30px) !important;
    }
    .domain_box{
        width: calc(100% / 3);
    }
    .features_box{
        width: 100% !important;
    }
    .vps_plan_card{
        width: calc(100% / 2 - 50px);
    }
    .vps_hero-sect article{
        width: 80%;
    }
    .barnding_art{
        width: 100%;
    }
    .cart{
        display: none;
    }
}

@media screen and (max-width:750px) {
    .domain_serch h2{
        font-size: 1.5rem;
    }
    .domain_serch p{
        font-size: 14px;
    }
    .d_search_form button small{
        display: none !important;
    }
    .d_search_form button em{
        display: flex;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }
    .d_search_form{
        height: 60px;
    }
    .d_search_form input{
        width: calc(100% - 55px);
    }
    .d_search_form button{
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        border-radius: 50%;
    }
    .result_check{
        height: fit-content;
        border-radius: 10px;
    }
    .main_relust{
        height: fit-content;
        border-radius: 10px;
    }
    .main_relust strong{
        width: 100%;
        height: fit-content;
    }
    .main_relust .result_price{
        width: calc(100% - 60px) !important;
        justify-content: flex-start;
        padding-left: 20px;
        font-size: 16px;
        border: none;
        height: 47px;
        display: flex;
        align-items: center;
    }
    .add_cart small{
        display: none;
    }
    .main_relust .add_cart{
        display: flex;
        width: 50px !important;
        height: 45px !important;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .add_cart em{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #add_to_cart{
        background-color: var(---button_background);
        color: var(---background) !important;
        border-radius: 5px;
    }
    .more_suggestion{
        font-family: 1rem;
    }

    .product_article_box{
        width: 90% !important;
        border-radius: 0px;
        min-height: 360px;
        background-color: transparent !important;
        box-shadow: none;
        border-bottom: 1px solid #0000003e;
    }

    .product_article_box .post_timesince{
        display: none;
    }
    .product_article_box .post_img{
        min-height: 238px !important;
        border-radius: 10px;
    }
    .product_article_box .title{
        min-height: fit-content !important;
    }
    .blog_nav{
        width: 70% !important;
        position: relative;
        left: 10%;
    }
    .d_result h3{
        font-size: 1.5rem;
    }
    .product_article_holder{
        width: 100%;
    }

    .domain_pricing_hero{
        min-height: 300px !important;
    }
    .domain_box{
        width: 90%;
    }
    .why_hackton_domain h2{
        font-size: 1.6rem;
    }
    .advantage_box{
        width: 95% !important;
    }
    .tld_search_holder{
        width: 100%;
    }
    .tld_search_bar{
        width: 100%;
    }
    .tld_search_bar input{
        width: calc(100% - 40px);
    }
    .main_table_holder{
        width: 100% !important;
    }
    .domain_price_table-holder{
        padding: 0px;
    }
    .why_hackton_domain{
        padding: 10px;
    }

    .domain_transfer_features h2{
        font-size: 1.7rem;
    }
    .use_mode h2{
        font-size: 1.7rem;
    }
    .domain_price_table-holder h2{
        font-size: 1.7rem !important;
    }
    .use_mode_box_holder div{
        box-sizing: border-box;
    }
    .vps_hero-sect article h2{
        font-size: 2rem;
    }
    .vps_hero-sect article p{
        line-height: 1.7rem;
    }
    .vps_plan_sect h2{
        font-size: 1.8rem;
    }
    .vps_plan_sect_p{
        width: 100%;
        font-size: 15px;
    }
    .vps_plan_card{
        width: 90% !important;
    }
    .why_hackton-hosting h2{
        font-size: 2rem;
    }
    .why_hackton-hosting p{
        width: 100%;
        font-size: 15px;
    }
    .plan_table_holder{
        width: 100%;
        overflow-x: scroll;
    }

    .deploy_nav{
        bottom: 0% !important;
        left: 0px !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 0px 10px !important;
        border-radius: 0px !important;
        top: calc(100% - 58px) !important;
        z-index: 1;
        bottom: 0px !important;
    }

    .deploy_nav nav ul{
        flex-direction: row !important;
    }

    .deploy_nav nav ul li a > span{
        font-size: 15px !important;
    }

    .deploy_nav nav ul li a > span:nth-child(2){
        font-size: 11px !important;
    }

    .deploy_content{
        width: 100% !important;
        margin: auto auto;
    }

    .deploy_ready{
        width: calc(100% - 20px) !important;
        margin: auto auto;
        right: 0px;
        left: 0px;
        padding-bottom: 50px !important;
    }
    .web_brand_content{
        flex-wrap: wrap;
    }
    .web_brand_text{
        width: 100%;
    }
    .web_brand_image{
        width: 100%;
    }
    .build h2{
        font-size: 1.7rem;
    }
    .build p{
        line-height: 1.7rem;
        width: 90%;
        font-size: 15px;
    }
    .branding_text h2{
        font-size: 1.5rem !important;
        line-height: 2.3rem;
    }
    .branding_text p{
        font-size: 15px;
    }
    .host_web h2{
        font-size: 1.8rem;
        line-height: 2.5rem;
    }
    .host_web p{
        width: 90%;
        line-height: 1.5em;
        font-size: 15px;
    }

    .host_offer_box{
        width: 90% !important;
    }
    .why_hackton h2{
        font-size: 1.8rem;
    }
    .why_hackton p{
        font-size: 0.90rem;
    }

    .pastepro h2{
        font-size: 1.8rem;
        line-height: 2.5rem;
        font-weight: 700;
        width: 100%;
    }
    .pastepro p{
        font-size: 15px;
    }
    .upload-section h2{
        font-size: 1.3rem !important;
    }
    .build, .host_web, .pastepro{
        padding: 20px 10px !important;
    }

    .container{
            float: left;
            width: 100%;
            overflow: hidden;
        }
        .modal-content{
            scale: 0.8;
        }
}

@media screen and (max-width:500px) {
    .product_article_box{
        width: 100% !important;
    }
    .blog_nav {
        width: 90% !important;
        left: 5%;
    }
    .d_search_form input{
        padding: 15px 25px;
        font-size: 0.90rem;
    }
    .d_search_form input::placeholder{
        font-weight: 500 !important;
        font-size: 0.90rem;
    }
    .advantage_box-holder{
        width: 100% !important;
    }
    .advantage_box{
        width: 100% !important;
    }
    .main_table_holder table{
        min-width: 500px !important;
    }
    .main_table_holder{
        overflow-x: scroll;
    }
    .vps_hero-sect article{
        width: 95% !important;
    }
    .vps_hero-sect article h2{
        font-size: 1.7rem !important;
    }
    .hosting_f-box{
        width: 90% !important;
    }

    .location_table tr th{
        width: calc(100% / 2.5);
    }

    .all_link span{
        font-size: 13px;
    }
    .deploy-plan_table-holder{
        overflow-x: scroll;
    }

    .deploy_table{
        min-width: 700px;
    }
    .os_box{
        width: calc(100% / 2 - 20px);
    }
    .host_offer_box{
        width: 100% !important;
    }
    .upload-section{
        padding: 10px !important;
    }
    .file_holder{
        flex-wrap: wrap;
    }
    .file-preview{
        width: 100% !important;
    }
}


@media screen and (max-width:400px) {
    .main::before{
        width: 100px !important;
    }
    .all_link span {
        font-size: 10px !important;
    }
}

@media screen and (max-width:350px) {
    .features_box{
        flex-wrap: wrap;
    }
    .for_text{
        width: 100%;
    }
    .for_icon{
        width: 100%;
        justify-content: flex-end;
    }
}