/* ====================== RESPONSIVE SETTINGS ====================== */


/* =========== All page Responsive =============== */
@media screen and (min-width: 1400px) {

    /* ========= index.html =========  */
    .search-Btn {
        width: 74%;
        gap: 0;
    }

    /* ========= about.html =========  */
    .about-span span:first-child {
        top: 3px;
        left: -28px;
    }

    .about-span span:last-child {
        top: 44px;
        left: -21px;
    }

    /* ========= service.html =========  */
    .cards div .shape-one {
        width: 466px;
    }
}

@media screen and (max-width: 1399px) {

    /* ========= index.html =========  */
    #m-back .d-flex div {
        margin-right: 5px;
    }
}

@media screen and (max-width: 1199px) {

    /* ========= index.html =========  */
    .navbar-brand hr {
        display: none;
    }

    .navbar-collapse hr {
        display: none;
    }

    .navbar-nav li {
        padding: 0 4px;
    }

    .navbar-collapse .gap-4 {
        gap: 0.50rem !important;
    }

    header .dropdown {
        padding-right: 0px !important;
    }

    .search-domain input {
        width: 53%;
    }

    .search-Btn {
        width: 66%;
        gap: 4rem;
    }

    .span-box span:first-child {
        left: 70px;
    }

    #about span:nth-child(3) {
        display: none;
    }

    #about span:nth-child(5) {
        display: none;
    }

    #feature span:first-child {
        display: none;
    }

    #feature span:nth-child(2) {
        display: none;
    }

    #feature span:nth-child(3) {
        display: none;
    }

    #m-back .m-main {
        padding: 0 0 0 0;
    }

    #m-back .d-flex div {
        margin: 0px 0 0 15px;
    }

    .ready {
        top: 33%;
        left: 15%;
    }

    .integ-first h2 {
        color: #031D5B;
        text-align: center;
        margin: 0 auto;
    }

    .slider {
        padding: 300px 0 0 0;
    }

    .slider .d-flex {
        padding: 0 10px 30px 10px;
        gap: 30px;
    }

    .info-date {
        top: 175px;
    }

    #informed p {
        padding: 5px 100px 20px 100px;
    }

    .newsletter figure {
        display: none;
    }

    .newsletter span {
        display: none;
    }

    .footer-links span {
        display: none;
    }

    .newsletter figure img {
        display: none;
    }

    .newsletter p {
        padding: 0 150px;
    }

    /* ========= about.html =========  */
    .about p {
        padding: 5px 100px 0 0;
    }

    .about-span span:first-child {
        display: none;
    }

    .about-span span:last-child {
        display: none;
    }

    #counter hr {
        padding: 0 28px;
    }

    .counter-cards div {
        width: 150px;
    }

    /* ========= contact.html =========  */
    #contact form p {
        padding: 10px 100px 30px 100px;
    }
}

@media all and (min-width: 992px) {

    /* ========= index.html =========  */
    .navbar .dropdown-menu-end {
        right: 0;
        left: auto;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        margin-top: 10px;
    }

    .navbar .nav-item:hover .nav-link {
        color: #505050;
    }

    .navbar .dropdown-menu.fade-down {
        top: 80%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }

    .navbar .dropdown-menu.fade-up {
        top: 180%;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transition: .3s;
        opacity: 1;
        visibility: visible;
        top: 100%;
        transform: rotateX(0deg);
    }
}

@media screen and (max-width: 991px) {

    /* global setting */
    .container,
    .container-md,
    .container-sm {
        max-width: 925px;
    }

    /* ========= index.html =========  */
    .navbar-brand hr {
        display: none;
    }

    .navbar-toggler {
        padding: 7px 12px 5px 12px !important;
    }

    .search-domain input {
        width: 48%;
    }

    .search-Btn {
        width: 60%;
        gap: 4rem;
    }

    .span-box span:first-child {
        left: 60px;
    }

    .span-box span:last-child {
        top: 110px;
        left: 60px;
    }

    #service .content p {
        padding: 0 150px 35px 150px !important;
    }

    #clients figure img {
        display: none;
    }

    .client-box {
        gap: 10px;
        margin: 15px 0;
    }

    .client-box .counter {
        padding: 25px 60px;
    }

    .client-box h4 {
        margin-top: 11px;
    }

    .hosting-bg {
        display: none;
    }

    #hosting span {
        display: none;
    }

    .plan-card figure {
        display: none;
    }

    .zoom-out {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .pricing_plan {
        margin-top: 0px;
    }

    .ready {
        width: 80%;
        top: 35%;
        left: 10%;
    }

    .slider {
        margin-top: 200px;
    }

    .inform-cards .col-lg-4:nth-child(3) {
        margin-top: 15px;
    }

    /* ========= contact.html =========  */
    #contact form {
        left: 90px;
    }
}

@media screen and (max-width: 897px) {

    /* ========= index.html =========  */
    .search-Btn {
        gap: 3rem;
    }
}

@media screen and (max-width: 859px) {

    /* ========= index.html =========  */
    #m-back .d-flex div {
        margin: 0 0 0 0;
    }

    .info-date {
        top: 160px;
    }
}

@media screen and (max-width: 805px) {

    /* ========= index.html =========  */
    .client-box .counter {
        padding: 35px 50px;
    }
}

@media screen and (max-width: 768px) {

    /* global setting */
    h1 {
        font-size: 45px;
        font-weight: 600;
        line-height: 51px;
    }

    h2 {
        font-size: 30px;
        font-weight: 600;
        line-height: 36px;
    }

    h3 {
        font-size: 24px;
        font-weight: 600;
        line-height: 30px;
    }

    h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    h5 {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
    }

    h6 {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    p {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
    }

    button {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 14px 30px 14px 30px;
    }

    a {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 14px 30px 14px 30px !important;
    }

    /* ========= index.html =========  */
    .navbar-brand img {
        width: 180px;
    }

    .sidebar img {
        width: 155px;
    }

    #hero {
        margin: 0 0;
        padding: 70px 0;
    }

    #hero .row {
        margin: 0px auto;
    }

    #hero h1 {
        padding: 0 0 10px 0;
    }

    .heroBtn {
        margin-top: 15px;
    }

    .heroBtn a:first-child i {
        padding: 7px 11px;
    }

    .heroBtn a:last-child {
        padding: 14px 28px 14px 28px !important;
    }

    #domain .container {
        padding: 50px 0;
    }

    #domain {
        margin: 0px 0;
        padding: 0 0 70px 0;
    }

    .search-domain {
        height: 58px;
    }

    .search-Btn {
        gap: 0rem;
    }

    .domain-btn button {
        padding: 12px 35px 12px 10px !important;
    }

    .domain-btn i {
        padding: 7px 11px;
    }

    .b-btn {
        padding: 12px 35px 12px 10px !important;
    }

    .b-btn i {
        padding: 7px 11px;
    }

    .span-box span:first-child {
        width: 30px;
        height: 30px;
    }

    .span-box span:last-child {
        width: 50px;
        height: 50px;
    }

    #service {
        padding: 0 0 0 0;
    }

    .cards img {
        width: 75px;
    }

    .cards div {
        padding: 35px 15px;
        min-height: 310px;
        margin: 0 auto 20px auto !important;
    }

    #service .content p {
        padding: 0 120px 15px 120px !important;
    }

    #service .mt-4 {
        margin-top: 0 !important;
    }

    .w-btn {
        padding: 14px 28px;
    }

    .about-box img {
        width: 55px;
    }

    .aboutBtn {
        margin-top: 20px !important;
    }

    #about {
        margin: 70px 0;
        padding: 30px 0 0 0;
    }

    .about-box {
        padding: 30px 30px;
        min-height: 167px;
    }

    #about span:nth-child(2) {
        height: 33px;
        width: 33px;
    }

    #about span:first-child {
        height: 33px;
        width: 33px;
    }

    #started .row {
        padding: 35px 50px;
    }

    #started p {
        margin: 15px 0 40px 0;
    }

    #started {
        margin: 0 0 70px 0;
    }

    .client-box .counter {
        padding: 15px 30px;
        min-height: 184px;
    }

    #clients {
        margin: 0 0 70px 0;
    }

    .client-box div img {
        width: 50px;
    }

    #hosting {
        margin: 70px 0;
        padding: 0 0;
    }

    #hosting h2 {
        padding: 0 100px;
    }

    #hosting .mt-4 {
        margin-top: 1rem !important;
    }

    .zoom-out {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .tabcontent {
        padding: 30px 12px;
    }

    #feature {
        padding: 70px 0;
    }

    .py-3 {
        padding-top: 0px !important;
    }

    #feature ul {
        padding: 15px 0 0 0;
    }

    #feature .accordion-item {
        padding: 20px 20px 6px 20px;
    }

    .advance_btn {
        margin-top: 25px;
    }

    #m-back .m-main img {
        width: 50px;
    }

    .m-main .gap-3 {
        gap: 1.75rem !important;
    }

    #m-back {
        padding-bottom: 70px;
    }

    #integrate {
        margin: 0 0 70px 0;
    }

    .integ-first div {
        gap: 35px;
        margin-top: 60px;
    }

    .slider-box {
        padding: 25px 35px;
    }

    .integ-first {
        padding: 70px 0 0 0;
    }

    .integ-first div img {
        width: 50px !important;
    }

    .ready {
        padding: 20px 58px 35px 30px;
        top: 29%;
    }

    .ready p {
        padding: 15px 10px 15px 0;
    }

    .ready a i {
        padding: 8px 12px;
    }

    .slider {
        margin-top: 187px;
    }

    .slider {
        padding: 249px 0 0 0;
    }

    .slider p {
        padding: 5px 10px 0 20px;
    }

    .slider-box img:nth-child(2) {
        width: 55px;
    }

    .slider-box div img:first-child {
        width: 80px;
    }

    .slider .d-flex {
        margin-top: 0;
    }

    #achievement {
        padding: 0 0;
    }

    .achieve-cards img {
        width: 65px;
    }

    #achievement .container {
        padding-bottom: 70px;
    }

    #faq {
        padding: 70px 0 0 0;
    }

    #faq .row {
        padding-bottom: 50px;
    }

    #faq .accordion-body p {
        font-size: 16px;
    }

    #faq .accordion button {
        font-size: 16px;
    }

    .faq-content {
        margin-top: 0;
    }

    #logoipsum {
        margin: 0 0 70px 0;
        padding: 25px 0 0 0;
    }

    #logoipsum img {
        width: 150px !important;
    }

    .about p {
        padding: 5px 45px 0 0;
    }

    #counter hr {
        padding: 0 20px;
    }

    .counter-cards img {
        width: 65px;
    }

    /* ========= blog.html =========  */
    #informed .pt {
        padding-bottom: 0;
    }

    /* ========= contact.html =========  */
    #contact span {
        width: 45px;
        height: 45px;
    }

    #location .container-fluid {
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 767px) {

    /* ========= index.html =========  */
    .sidebar {
        width: 45%;
    }

    .sidebar button {
        padding: 10px 20px;
        margin: 20px 12px 0 0;
        font-size: 13px;
    }

    #hero {
        margin: 0 0;
    }

    .span-box span:first-child {
        left: 50px;
    }

    .span-box span:last-child {
        top: 140px;
        left: 40px;
    }

    #domain select {
        display: none;
    }

    .search-domain {
        height: 62px;
        flex-direction: row;
        justify-content: center;
        gap: 0;
        padding: 12px 4px;
    }

    .search-Btn hr {
        display: none;
    }

    .search-domain input {
        text-align: center;
        padding: 0 0 0 0;
        width: 100%;
        margin: 0px 0px 0 0;
    }

    .search-Btn {
        flex-direction: row;
        justify-content: center;
        gap: 7px;
        width: 51%;
    }

    .domain-names {
        gap: 9px 283px;
    }

    #domain hr {
        display: none;
    }

    .cards {
        flex-direction: column;
    }

    .cards div {
        margin: 0 auto 20px auto !important;
    }

    .cards div {
        min-height: 260px;
    }

    .cards div .shape-one {
        width: 800px;
        height: 500px;
        bottom: -123px;
        left: -76px;
    }

    #about span:first-child {
        display: none;
    }

    #about span:nth-child(2) {
        display: none;
    }

    #about span:nth-child(4) {
        display: none;
    }

    #about p {
        text-align: center;
    }

    .about-box {
        margin: 10px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 10px;
        min-height: 170px;
    }

    .about-img img {
        width: 70%;
    }

    #about .row h2 {
        text-align: center;
    }

    #about figure img {
        display: none;
    }

    #started .row {
        gap: 15px;
    }

    #started img {
        width: 80%;
        margin-top: 20px;
    }

    #clients span {
        display: none;
    }

    #clients .row .col-lg-6:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .client-box {
        gap: 10px;
        margin: 10px;
    }

    .client-box .counter img {
        width: 80px;
    }

    .client-box .counter {
        padding: 20px 50px;
    }

    #feature .adv-bg img {
        display: none;
    }

    .advance_btn {
        display: flex;
        justify-content: center;
    }

    #feature .row {
        gap: 35px;
    }

    #hosting figure img {
        display: none;
    }

    #hosting {
        margin: 40px 0;
    }

    .plan-card {
        width: 85%;
        justify-content: center;
        align-items: center;
        padding: 0 auto;
    }

    .tabcontent .row {
        gap: 16px;
    }

    .zoom-out {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .pricing_plan .d-flex {
        align-items: center;
    }

    #hosting h2 {
        padding: 0 100px;
    }

    #m-back h3 {
        background-color: #4F80FF;
        color: #fff;
        width: 100%;
        text-align: center;
        padding: 20px 0px;
        border-radius: 15px;
    }

    #m-back .d-flex div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    #m-back .m-main {
        padding: 0;
    }

    .m-main .row {
        padding-bottom: 20px;
    }

    .integ-first img[alt="spring"] {
        display: none;
        padding: 0 10px;
    }

    .slider-box img:first-child {
        width: 110px;
    }

    .integ-first h2 {
        width: 100%;
    }

    .ready {
        top: 20%;
    }

    .ready p {
        padding: 15px 10px;
    }

    .ready div:first-child {
        flex-direction: column;
        text-align: center;
    }

    .one-time {
        width: 70%;
    }

    .slider div:first-child {
        flex-direction: column;
    }

    .slider-box div:first-child {
        display: flex;
        flex-direction: row;
    }

    .slider {
        padding: 300px 0 0 0;
    }

    .slider .d-flex {
        padding: 0 10px 50px 10px;
        gap: 30px;
    }

    .slider-box {
        width: 100%;
    }

    .slider-content {
        margin-top: 170px;
    }

    .slider .d-flex {
        margin-top: 100px;
    }

    #achievement p {
        width: 100%;
    }

    .achieve-cards {
        flex-direction: column;
        gap: 30px;
    }

    .achieve-cards hr {
        display: none;
    }

    .achieve-cards div {
        gap: 13px;
        width: 100%;
    }

    .achieve-cards {
        margin-top: 10px;
    }

    .faq-content {
        padding: 0 20px;
    }

    #informed p {
        padding: 5px 50px 20px 50px;
    }

    #informed .d-flex {
        align-items: center;
    }

    #informed {
        margin: 40px 0;
    }

    .inform-cards {
        flex-direction: column;
    }

    .inform-cards .blog {
        width: 70%;
    }

    .inform-cards .col-lg-4:nth-child(2) {
        margin-top: 15px;
    }

    .newsletter p {
        padding: 0 70px;
    }

    .newsletter input {
        width: 97%;
    }

    .newsletter span {
        display: none;
    }

    .newsletter form {
        width: 80%;
        margin: 0 auto;
    }

    .newsletter button {
        padding: 14px 10px 14px 10px !important;
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .newsletter i {
        display: none;
    }

    .email-btn {
        width: 100%;
        padding: 0 8px;
    }

    footer {
        padding: 250px 0 0 0;
    }

    .footer-links figure img {
        width: 140px;
    }

    .footer-links h5::after {
        display: none;
    }

    .address {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .copyright {
        flex-direction: column;
        align-items: center;
    }

    .footer-links .col-sm-6 {
        width: 48%;
    }

    /* ========= about.html =========  */
    .about h2 {
        padding-top: 15px;
    }

    .about p {
        padding: 5px 75px 30px 75px;
    }

    .about img {
        width: 70%;
        margin: 0 auto;
    }

    .counter-cards {
        flex-direction: column;
        gap: 30px;
    }

    .counter-cards hr {
        display: none;
    }

    .counter-cards div {
        gap: 3px;
        width: 100%;
    }

    .counter-cards {
        margin-top: 10px;
    }

    /* ========= contact.html =========  */
    #contact span {
        display: none;
    }

    #contact img {
        padding-bottom: 20px;
    }

    #contact .justify-content-end img {
        display: none;
    }

    #contact form p {
        padding: 10px 50px 30px 50px;
    }

    #contact form {
        left: 90px;
        top: 245px;
    }

    #location .container-fluid {
        padding-bottom: 20px;
    }

}

/* ========= 768px and below - Tablets and small laptops ========= */
@media screen and (max-width: 768px) {
    /* Global adjustments for tablets */
    h1 { font-size: 48px; line-height: 56px; }
    h2 { font-size: 36px; line-height: 44px; }
    h3 { font-size: 28px; line-height: 36px; }
    
    .container { max-width: 720px; padding: 0 20px; }
    
    /* Navigation improvements */
    .navbar-brand img { width: 180px; }
    .sidebar { width: 70%; }
    
    /* Hero section optimization */
    #hero { padding: 80px 0; }
    #hero h1 { font-size: 50px; text-align: center; }
    
    /* Domain search optimization */
    .search-domain { padding: 25px 20px; }
    .domain-names { gap: 15px; }
    
    /* Service cards layout */
    .cards { 
        flex-direction: column; 
        gap: 30px; 
        align-items: center;
    }
    .cards div { 
        width: 75%; 
        max-width: 450px;
    }
    
    /* About section */
    .about-box { 
        width: 80%; 
        margin: 20px auto;
        padding: 30px 25px;
    }
    
    /* Hosting plans */
    .plan-card { padding: 40px 30px; }
    
    /* Feature section */
    #feature .accordion img { width: 50px !important; }
    
    /* Slider optimizations */
    .slider { padding: 280px 0 60px 0; }
    .slider-box { width: 90% !important; }
    .ready { 
        width: 80%; 
        top: 25%; 
        left: 10%; 
        padding: 40px 30px;
    }
    
    /* Achievement section */
    .achieve-cards { 
        flex-direction: column; 
        gap: 30px; 
        align-items: center;
    }
    .achieve-cards div { width: 60%; }
    
    /* FAQ section */
    #faq img { width: 80%; }
    
    /* Newsletter */
    .newsletter .gap-5 { gap: 25px !important; }
    
    /* Footer */
    .footer-links .col-6 { width: 50%; text-align: center; }
    .address { align-items: center; text-align: center; }
}

/* ========= 720px and below - Small tablets/Large phones ========= */
@media screen and (max-width: 720px) {
    /* Global adjustments */
    h1 { font-size: 40px; line-height: 48px; }
    h2 { font-size: 32px; line-height: 40px; }
    h3 { font-size: 26px; line-height: 32px; }
    
    .container { max-width: 680px; padding: 0 20px; }
    
    /* Navigation */
    .navbar-brand img { width: 160px; }
    
    /* Hero section */
    #hero { padding: 60px 0; }
    #hero h1 { font-size: 42px; text-align: center; }
    
    /* Domain section improvements */
    .search-domain { 
        flex-direction: column; 
        gap: 25px; 
        padding: 25px 20px;
    }
    .search-domain input { width: 100%; }
    .search-Btn { 
        flex-direction: column; 
        gap: 20px; 
        align-items: center;
    }
    .domain-btn button, .b-btn { width: 100%; max-width: 250px; }
    
    /* Service section */
    .service-bg img { width: 65%; }
    .cards { 
        flex-direction: column; 
        gap: 25px; 
        align-items: center;
    }
    .cards div { 
        width: 85%; 
        max-width: 400px;
    }
    
    /* About section */
    .about-box { 
        width: 90%; 
        margin: 15px auto;
    }
    
    /* Hosting section */
    .hosting_links { 
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .tab button { font-size: 14px; padding: 8px 16px; }
    .plan-card { padding: 35px 25px; }
    
    /* Feature section */
    #feature .container { max-width: 600px; }
    #feature .accordion img { width: 45px !important; }
    
    /* Money back section */
    #m-back .d-flex { gap: 20px; flex-wrap: wrap; }
    
    /* Integration section */
    .integ-first div { gap: 20px !important; }
    .integrate-logo img:nth-child(6) { display: none; }
    
    /* Slider section */
    .slider { padding: 260px 0 50px 0; }
    .slider-box { width: 95% !important; }
    .ready { 
        width: 85%; 
        top: 22%; 
        left: 7.5%; 
        padding: 35px 25px;
    }
    
    /* Achievement section */
    .achieve-cards { gap: 25px; }
    .achieve-cards div { width: 70%; }
    
    /* FAQ section */
    #faq img { width: 75%; }
    
    /* Blog section */
    .inform-cards { gap: 20px; }
    
    /* Newsletter */
    .newsletter input { width: 100%; margin-bottom: 15px; }
    .newsletter button { width: 100%; }
    
    /* Footer */
    .footer-links .col-6 { width: 100%; margin-bottom: 20px; }
}

/* ========= 640px and below - Large phones landscape ========= */
@media screen and (max-width: 640px) {
    /* Typography scaling */
    h1 { font-size: 36px; line-height: 44px; }
    h2 { font-size: 28px; line-height: 36px; }
    h3 { font-size: 22px; line-height: 28px; }
    p { font-size: 16px; line-height: 24px; }
    
    .container { max-width: 600px; padding: 0 15px; }
    
    /* Navigation */
    .navbar-brand img { width: 150px; }
    .sidebar { width: 75%; }
    
    /* Hero section */
    #hero { padding: 50px 0; }
    #hero h1 { font-size: 38px; padding: 0 10px; }
    .heroBtn { gap: 15px; }
    
    /* Domain section */
    .search-domain { 
        width: 95%;
        padding: 20px 15px;
        gap: 20px;
    }
    .domain-names { gap: 8px; }
    
    /* Service section */
    .service-bg img { width: 70%; }
    .cards div { width: 90%; }
    
    /* About section */
    #about { padding: 40px 0; }
    .about-box { padding: 25px 20px; }
    
    /* Clients section */
    .client-box .counter { width: 200px; }
    
    /* Hosting section */
    .hosting_links a { font-size: 13px; padding: 8px 15px !important; }
    .plan-card { padding: 30px 20px; }
    
    /* Feature section */
    #feature .container { max-width: 550px; }
    
    /* Money back section */
    #m-back .d-flex div { width: calc(50% - 10px); }
    
    /* Slider section */
    .slider { padding: 240px 0 50px 0; }
    .ready { padding: 30px 20px; }
    .slider-content { margin-top: 80px; }
    
    /* Achievement section */
    .achieve-cards div { width: 80%; }
    
    /* FAQ section */
    .faq-content { padding: 0 5px; }
    
    /* Blog section */
    .inform-cards .blog { width: 95%; }
    
    /* Newsletter */
    .newsletter p { padding: 0 15px; }
}

@media screen and (max-width: 626px) {
    /* ========= index.html =========  */

    .heroBtn a:first-child {
        padding: 8px 13px 10px 5px !important;
    }

    .heroBtn a:first-child i {
        margin-right: 7px;
        padding: 6px 9px;
    }

    .heroBtn a:last-child {
        padding: 11px 20px 10px 15px !important;
    }

    .span-box span:first-child {
        display: none;
    }

    .span-box span:last-child {
        display: none;
    }

    .search-domain {
        width: 90%;
    }

    .service-bg img {
        width: 30%;
    }

    #service {
        padding: 10px 0;
    }

    .cards {
        flex-direction: column;
        margin: 15px 0;
    }

    .cards div {
        margin: 0 auto 14px auto !important;
        width: 70%;
        padding: 25px 15px;
    }

    .cards img {
        width: 70px;
    }

    #service .content p {
        padding: 0 50px 10px 50px !important;
    }
}

/* ========= 576px and below - Mobile first approach ========= */
@media screen and (max-width: 576px) {
    /* Typography for mobile */
    h1 { font-size: 32px; line-height: 40px; }
    h2 { font-size: 24px; line-height: 32px; }
    h3 { font-size: 20px; line-height: 26px; }
    h4 { font-size: 18px; line-height: 24px; }
    h5 { font-size: 16px; line-height: 22px; }
    p { font-size: 14px; line-height: 22px; }
    
    .container { max-width: 540px; padding: 0 15px; }
    
    /* Navigation optimization */
    .navbar-brand img { width: 140px; }
    .navbar-toggler { padding: 8px 10px !important; }
    .navbar-toggler i { font-size: 20px; }
    .sidebar { width: 80%; }
    .sidebar img { width: 120px; }
    .sidebar button {
        padding: 8px 15px;
        margin: 15px 10px 0 0;
        font-size: 12px;
    }
    
    /* Hero section mobile */
    #hero { padding: 40px 0; }
    #hero h1 { 
        font-size: 34px; 
        text-align: center;
        padding: 0 10px;
    }
    #hero p { text-align: center; padding: 0 10px; }
    .heroBtn { 
        flex-direction: column; 
        gap: 15px; 
        align-items: center;
    }
    .heroBtn a { width: 100%; max-width: 250px; text-align: center; }
    
    /* Domain section mobile */
    #domain { padding: 0 0 40px 0; }
    .search-domain { 
        width: 100%;
        flex-direction: column;
        gap: 20px;
        padding: 20px 15px;
    }
    .search-domain input { width: 100%; text-align: center; }
    .search-Btn { 
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
    .domain-btn button, .b-btn { 
        width: 100%; 
        padding: 12px 20px !important;
        text-align: center;
    }
    .domain-names { 
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Service section mobile */
    #service { padding: 40px 0; }
    #service h2 { 
        text-align: center;
        padding: 0 15px;
    }
    #service .content p { 
        padding: 0 15px 15px 15px !important;
        text-align: center;
    }
    .service-bg img { width: 80%; }
    .cards { 
        flex-direction: column;
        gap: 20px;
        margin: 20px 0;
    }
    .cards div { 
        width: 90%;
        max-width: 350px;
        margin: 0 auto !important;
        padding: 25px 20px;
        text-align: center;
    }
    .cards img { width: 60px; }
    
    /* About section mobile */
    #about { padding: 40px 0; }
    #about .row h2 { 
        text-align: center;
        padding: 0 15px;
    }
    #about .text-start { 
        text-align: center !important;
        padding: 0 15px;
    }
    .about-box { 
        width: 95%;
        margin: 15px auto;
        padding: 25px 20px;
        text-align: center;
    }
    .about-box img { width: 50px; }
    
    /* Get started section mobile */
    #started { margin: 0 0 40px 0; }
    #started .row { padding: 40px 20px; }
    #started h2 { text-align: center; padding: 0 10px; }
    #started p { text-align: center; padding: 0 10px; }
    #started img { width: 100%; margin-top: 20px; }
    
    /* Clients section mobile */
    #clients { margin: 0 0 40px 0; }
    #clients h2 { text-align: center; padding: 0 15px; }
    #clients p { text-align: center; padding: 0 15px; }
    .client-box { 
        flex-direction: column;
        gap: 15px;
        margin: 10px;
    }
    .client-box .counter { 
        width: 100%;
        padding: 20px;
        text-align: center;
    }
    .client-box .counter img { width: 50px; }
    
    /* Hosting section mobile */
    #hosting { margin: 40px 0; }
    #hosting h2 { 
        text-align: center;
        padding: 0 15px;
    }
    #hosting p { text-align: center; padding: 0 15px; }
    .hosting_links { 
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hosting_links a { 
        font-size: 12px;
        padding: 8px 15px !important;
    }
    .tabcontent { padding: 20px 15px; }
    .plan-card { 
        width: 100%;
        padding: 30px 20px;
        margin: 10px 0;
    }
    .plan-card figure { display: none; }
    .plan-card h4 { text-align: center; }
    .plan-card .pricing_plan { 
        text-align: center;
        margin-top: 15px;
    }
    
    /* Feature section mobile */
    #feature { padding: 40px 0; }
    #feature h2 { text-align: center; padding: 0 15px; }
    #feature p { text-align: center; padding: 0 15px; }
    #feature .container { max-width: 500px; }
    #feature .accordion img { width: 40px !important; }
    #feature .accordion button { 
        font-size: 14px;
        padding: 12px 10px !important;
    }
    
    /* Money back section mobile */
    #m-back { padding-bottom: 40px; }
    #m-back h3 { 
        text-align: center;
        padding: 20px 15px;
        font-size: 18px;
    }
    #m-back .d-flex { 
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    #m-back .d-flex div { 
        width: calc(50% - 10px);
        min-width: 140px;
        text-align: center;
    }
    .m-main .row { padding-bottom: 20px; }
    
    /* Integration section mobile */
    #integrate { margin: 0 0 40px 0; }
    .integ-first { padding: 40px 0 0 0; }
    .integ-first h2 { 
        text-align: center;
        padding: 0 15px;
    }
    .integ-first h3 { 
        text-align: center;
        padding: 0 15px;
    }
    .integ-first div { 
        gap: 20px !important;
        margin-top: 30px;
        justify-content: center;
    }
    .integrate-logo img:nth-child(6) { display: none; }
    .ready { 
        width: 90%;
        top: 20%;
        left: 5%;
        padding: 30px 20px;
    }
    .ready h3 { text-align: center; }
    .ready p { text-align: center; padding: 10px 0; }
    .ready div:first-child { 
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    /* Slider section mobile */
    .slider { padding: 220px 0 40px 0; }
    .slider-content { 
        padding-top: 30px;
        margin-top: 60px;
    }
    .slider .d-flex { 
        padding: 0 15px 20px 15px;
        gap: 20px;
        flex-direction: column;
    }
    .slider-box { 
        width: 100% !important;
        padding: 20px 15px;
    }
    .slider-box div:first-child { padding: 0; }
    .slider-box img:first-child { width: 80px; }
    .slider-box img:nth-child(2) { width: 50px; }
    .slide-para p:first-child { 
        padding: 15px 10px;
        text-align: center;
    }
    .slider figure { 
        margin: 20px 0 0 0;
        text-align: center;
    }
    
    /* Achievement section mobile */
    #achievement { padding: 40px 0; }
    #achievement .container { padding-bottom: 40px; }
    #achievement h2 { text-align: center; padding: 0 15px; }
    #achievement p { 
        text-align: center;
        padding: 0 15px 15px 15px;
    }
    .achieve-cards { 
        flex-direction: column;
        gap: 25px;
        margin-top: 20px;
    }
    .achieve-cards hr { display: none; }
    .achieve-cards div { 
        width: 100%;
        text-align: center;
        gap: 15px;
    }
    .achieve-cards img { width: 50px; }
    
    /* FAQ section mobile */
    #faq { padding: 40px 0 0 0; }
    #faq img { width: 90%; }
    .faq-content { padding: 0 10px; }
    .faq-content h2 { 
        text-align: center;
        padding-top: 25px;
    }
    .faq-content p { 
        text-align: center;
        padding: 10px 0 0 0;
    }
    #faq .accordion-body { padding: 0px 30px 0px 15px; }
    #faq .row { padding-bottom: 30px; }
    
    /* Blog section mobile */
    #informed { margin: 40px 0; }
    #informed h2 { text-align: center; padding: 0 15px; }
    #informed p { 
        text-align: center;
        padding: 5px 15px 20px 15px;
    }
    .inform-cards { 
        flex-direction: column;
        gap: 20px;
    }
    .inform-cards .blog { 
        width: 100%;
        margin: 0 auto;
    }
    
    /* Logo section mobile */
    #logoipsum { 
        margin: 40px 0 0 0 !important;
        padding: 30px 0 0 0;
    }
    #logoipsum img { width: 100px !important; }
    
    /* Newsletter mobile */
    .newsletter { padding: 0 0 20px 0; }
    .newsletter h2 { text-align: center; padding: 0 15px; }
    .newsletter .gap-5 { gap: 20px !important; }
    .newsletter p { 
        text-align: center;
        padding: 0 15px;
    }
    .newsletter input { 
        width: 100%;
        padding: 12px 10px;
        margin-bottom: 15px;
    }
    .newsletter button { 
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 12px !important;
    }
    .email-btn { 
        width: 100%;
        padding: 0 10px;
    }
    
    /* Footer mobile */
    footer { padding: 120px 0 0 0; }
    .footer-links { padding: 0 15px; }
    .footer-links figure img { width: 130px; }
    .footer-links .row { gap: 20px; }
    .footer-links .col-6 { 
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
    }
    .footer-links h5 { 
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .footer-links ul li { padding: 5px 0; }
    .address { 
        align-items: center;
        text-align: center;
        padding: 15px 0;
    }
    .address h5 { margin-left: 0; }
    .address div { 
        justify-content: center;
        gap: 8px;
        padding: 5px 0;
    }
    .copyright { 
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    footer hr { margin: 15px 0 25px 0; }
    
    /* Back to top button */
    #backToTopBtn { 
        padding: 10px 12px;
        bottom: 20px;
        right: 20px;
    }
    
    /* About page */
    .about h2 { text-align: center; padding: 0 15px; }
    .about p { 
        text-align: center;
        padding: 5px 15px 25px 15px;
    }
    #counter { padding: 40px 30px; }
    
    /* Contact page */
    #contact { padding: 50px 0 20px 0; }
    #contact h2 { text-align: center; padding: 0 15px; }
    #contact img { width: 45px; }
    #contact form { 
        width: 100%;
        padding: 25px 20px;
        position: relative;
        left: auto;
        top: auto;
    }
    #contact form p { 
        text-align: center;
        padding: 10px 0 25px 0;
    }
    #contact form button { width: 100%; }
    #location .container-fluid { padding-bottom: 20px; }
    
    /* Service page */
    #integrate .adjust { padding-top: 40px !important; }
}

@media screen and (max-width: 575px) {

    /* ========= index.html =========  */
    .navbar-toggler i {
        font-size: 25px;
    }

    .sidebar img {
        width: 128px;
    }

    .sidebar button {
        padding: 6px 12px;
        margin: 17px 12px 0 0;
        font-size: 10px;
    }

    .hosting_links {
        gap: 30px;
    }

    #hosting h2 {
        padding: 0 10px;
    }

    .plan-card figure {
        display: none;
    }

    .ready {
        width: 80%;
        top: 19%;
        left: 10%;
    }

    .integ-first img[alt="spring"] {
        top: 19%;
        right: 3%;
    }

    .integ-first img[alt="spring"] {
        width: 15px;
    }

    .slider-content {
        padding-top: 40px;
    }

    .slider figure {
        margin-top: 30px;
    }

    .slider-box img:nth-child(2) {
        width: 60px;
    }

    .footer-links .row {
        gap: 20px;
    }

    /* ========= contact.html =========  */
    #contact form {
        width: 100%;
        padding: 30px 30px;
    }

    #contact form .col-md-10 {
        width: 100%;
    }
}

@media screen and (max-width: 504px) {

    /* ========= index.html =========  */
    .footer-links .col-sm-6 {
        width: 45%;
    }
}

@media screen and (max-width: 480px) {

    /* global setting */
    h1 {
        font-size: 35px;
        font-weight: 600;
        line-height: 41px;
    }

    h2 {
        font-size: 28px;
        font-weight: 600;
        line-height: 34px;
    }

    h3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 26px;
    }

    h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
    }

    h5 {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
    }

    h6 {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    p {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    button {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 12px 26px 12px 26px;
    }

    a {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 12px 26px 12px 26px !important;
    }

    /* ========= index.html =========  */
    .navbar-toggler {
        padding: 2px 12px 4px 12px !important;
    }

    .navbar-toggler i {
        font-size: 20px;
    }

    .sidebar button {
        padding: 6px 12px;
        margin: 17px 12px 0 0;
        font-size: 8px;
    }

    .sidebar {
        width: 50%;
    }

    .navbar-brand img {
        padding-left: 20px;
    }

    #hero {
        padding: 50px 0;
    }

    #hero h1 {
        padding: 0 0;
    }

    #domain {
        padding: 0 0 50px 0;
    }

    #domain hr {
        display: none;
    }

    .search-domain {
        flex-direction: column;
        gap: 31px;
        padding: 17px 4px;
        height: 147PX;
    }

    .domain-names {
        gap: 9px 158px;
    }

    .service-bg img {
        width: 40%;
    }

    .cards div {
        width: 90%;
        padding: 25px 30px;
        min-height: 0;
    }

    .cards img {
        width: 60px;
    }

    #service .content p {
        padding: 0 20px 10px 20px !important;
    }

    #about {
        margin: 20px 0 50px 0;
        padding: 30px 0 0 0;
    }

    #about .row h2 {
        padding-top: 15px;
    }

    .about-box {
        padding: 25px 45px;
        min-height: 0;
    }

    #about .text-start {
        padding: 0 20px;
    }

    #started {
        margin: 0 0 50px 0;
    }

    #started img {
        width: 100%;
    }

    #started .row {
        padding: 50px 50px;
    }

    .client-box .counter img {
        width: 55px;
    }

    .client-box .counter {
        width: 216px;
    }

    #clients {
        margin: 0px 0 50px 0;
    }

    #feature .container {
        max-width: 437px;
    }

    .plan-card {
        width: 100%;
        padding: 45px 60px;
    }

    #m-back h3 {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .m-main .row {
        padding-bottom: 28px;
    }

    #m-back {
        padding-bottom: 50px;
    }

    #integrate {
        margin: 0 0 50px 0;
    }

    .integ-first div {
        gap: 25px !important;
    }

    .ready {
        top: 20%;
        left: 10%;
        padding: 50px 25px;
    }

    .slider-content {
        margin-top: 100px;
    }

    .slider {
        padding: 300px 0 50px 0;
    }

    .slider-box {
        width: 97% !important;
    }

    .one-time {
        width: 90%;
    }

    .slider-box img:first-child {
        width: 100px;
    }

    .slider-box div:first-child {
        padding: 0 0 0 0;
    }

    .slide-para p:first-child {
        padding: 19px 5px;
        color: #505050;
    }

    .slider-box div img:first-child {
        width: 80px;
    }

    .slider figure {
        margin: 15px 0 0px 30px;
    }

    .slider .d-flex {
        padding: 0 10px 20px 16px;
    }

    .integrate-logo img:nth-child(6) {
        display: none;
    }

    #achievement p {
        padding: 0 20px 10px 20px;
    }

    #faq img {
        width: 70%;
    }

    #faq {
        padding: 50px 0 0 0;
    }

    .faq-content {
        padding: 0 7px;
    }

    .faq-content h2 {
        padding-top: 30px;
    }

    #faq .accordion-body {
        padding: 0px 41px 0px 21px;
    }

    #faq .row {
        padding-bottom: 30px;
    }

    #informed h2 {
        padding: 0 15px;
    }

    #informed p {
        padding: 5px 10px 20px 10px;
    }

    .inform-cards .blog {
        width: 90%;
    }

    #logoipsum {
        margin: 50px auto 10px 0 !important;
    }

    .newsletter p {
        padding: 0 10px;
    }

    .newsletter input {
        width: 95%;
    }

    .newsletter button {
        display: flex;
        justify-content: center;
    }

    .email-btn {
        width: 100%;
        padding: 0 8px;
    }

    footer {
        padding: 200px 0 0 0;
    }

    .footer-links figure img {
        width: 130px;
    }

    .footer-links .col-6 {
        text-align: left;
    }

    .footer-links h5 {
        margin-bottom: 0px;
    }

    .address {
        align-items: self-start;
    }

    .address h5 {
        margin-left: 0;
    }

    .address div {
        padding: 5px 0;
    }

    /* back to top button */
    #backToTopBtn {
        padding: 10px 15px;
    }

    /* ========= about.html =========  */
    .about p {
        padding: 5px 30px 30px 30px;
    }

    #counter {
        padding: 50px 70px;
    }

    /* ========= service.html =========  */

    #integrate .adjust {
        padding-top: 50px !important;
    }

    /* ========= blog.html =========  */
    #informed {
        margin: 40px 0 0 0;
    }

    /* ========= contact.html =========  */

    #contact {
        padding: 70px 0 20px 0;
    }

    #contact img {
        width: 50px;
    }

    #contact form p {
        padding: 10px 5px 30px 5px;
    }

    #contact form button {
        width: 100%;
    }

    #location .container-fluid {
        padding-bottom: 10px;
    }
}

@media screen and (max-width: 470px) {
    /* ========= index.html =========  */

    .client-box {
        flex-direction: column;
    }
}

@media screen and (max-width: 430px) {
    /* ========= index.html =========  */

    .search-domain {
        flex-direction: column;
        gap: 31px;
        padding: 17px 4px;
        height: 147PX;
    }
}

@media screen and (max-width: 420px) {
    /* ========= index.html =========  */

    .sidebar img {
        width: 100px;
    }

    .sidebar {
        width: 60%;
    }

    .search-domain {
        width: 90%;
        padding: 15px 12px;
    }

    .about-box {
        gap: 18px;
    }

    .hosting_links {
        gap: 10px;
    }

    #m-back .d-flex {
        gap: 20px;
    }

    .slider-content {
        padding-top: 20px;
    }

    #logoipsum img {
        width: 120px !important;
    }

    .address div {
        align-items: flex-start;
        gap: 5px;
    }

    .copyright {
        text-align: center;
    }

    footer {
        padding: 160px 0 0 0;
    }

    .footer-links figure img {
        width: 125px;
    }
}

@media screen and (max-width: 380px) {

    /* ========= index.html =========  */
    .pricing_plan {
        margin-top: 20px;
    }
}

@media screen and (max-width: 360px) {

    /* ========= index.html =========  */
    #service h2 {
        margin: 0 0 10px 0;
    }

    #about .row h2 {
        padding-top: 30px;
    }

    .about-box {
        margin: 10px 16px;
        width: 90%;
        padding: 25px 30px;
        min-height: 0;
    }

    #about .text-start {
        padding: 0 12px;
    }

    #started p {
        margin: 10px 0 25px 0;
    }

    .client-box .counter img {
        width: 65px;
    }

    #feature h2 {
        text-align: center;
    }

    #feature p {
        text-align: center;
    }

    #feature .accordion img {
        width: 45px !important;
    }

    .tab {
        flex-wrap: nowrap;
    }

    .tab button {
        margin: 0 8px;
    }

    .tabcontent {
        padding: 7px 12px 30px 12px;
    }

    .integ-first h2 {
        padding: 0 20px;
    }

    .integ-first h3 {
        color: #031D5B;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }

    .ready {
        width: 90%;
        top: 19% !important;
        left: 5%;
    }

    .ready p {
        padding: 10px 10px;
    }

    .ready .mt-4 {
        margin-top: 10px !important;
    }

    .integ-first div {
        margin-top: 45px;
    }

    .slider-content {
        padding-top: 25px;
        margin-top: 50px;
    }

    .slider-box img:nth-child(2) {
        width: 40px;
    }

    #achievement .container {
        padding-bottom: 50px;
    }

    .faq-content p {
        padding: 10px 0 0 0;
    }

    #faq .accordion button {
        padding-bottom: 0 !important;
    }

    #faq .accordion-button:not(.collapsed) {
        box-shadow: none;
    }

    .newsletter {
        padding: 0 0 20px 0;
    }

    .newsletter .gap-5 {
        gap: 20px !important;
    }

    .newsletter p {
        padding: 0 25px;
    }

    .newsletter button {
        border: none;
    }

    .footer-links {
        padding: 0 15px 0 15px;
    }

    .footer-links h5 {
        padding-bottom: 5px;
    }

    .footer-links i {
        font-size: 19px;
    }

    .footer-links ul li {
        padding: 5px 0;
    }

    footer {
        padding: 140px 0 0 0;
    }

    footer hr {
        margin: 15px 0 30px 0;
    }

    .copyright p {
        font-size: 14px;
    }

}

/* ========= Intermediate mobile screens (381px and below) ========= */
@media screen and (max-width: 381px) {
    
    /* Header optimization to prevent hamburger menu shifting */
    .navbar-brand img {
        width: 125px; /* Reduced from 140px to make room for hamburger */
    }
    
    /* Ensure proper spacing for header elements */
    .navbar {
        padding: 8px 0;
    }
    
    .navbar-toggler {
        padding: 6px 8px !important;
        margin-left: auto; /* Ensure toggler stays on the right */
    }
    
    /* Container adjustment for this specific range */
    .container,
    .container-sm,
    .container-md {
        max-width: 360px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media screen and (max-width: 330px) {

    /* global setting */
    h1 {
        font-size: 28px;
        font-weight: 600;
        line-height: 34px;
    }

    h2 {
        font-size: 22px;
        font-weight: 600;
        line-height: 28px;
    }

    h3 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    h4 {
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
    }

    h5 {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    h6 {
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
    }

    p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }

    button {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        padding: 10px 20px;
    }

    a {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        padding: 10px 20px !important;
    }

    /* container settings */
    .container,
    .container-sm,
    .container-md {
        max-width: 310px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ========= Header section =========  */
    .navbar-brand img {
        width: 120px;
        padding-left: 10px;
    }

    .navbar-toggler {
        padding: 5px 8px !important;
        border: 1px solid #505050;
    }

    .navbar-toggler i {
        font-size: 16px;
    }

    .sidebar {
        width: 75%;
        padding: 15px 0;
    }

    .sidebar img {
        width: 90px;
    }

    .sidebar button {
        padding: 5px 8px;
        margin: 10px 8px 0 0;
        font-size: 8px;
    }

    /* ========= Hero section =========  */
    #hero {
        padding: 30px 0;
        margin: 0;
    }

    #hero .row {
        margin: 0 auto;
    }

    #hero h1 {
        padding: 0;
        text-align: center;
    }

    #hero p {
        text-align: center;
        margin-top: 5px;
    }

    .heroBtn {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .heroBtn a:first-child {
        padding: 8px 15px 8px 5px !important;
        text-align: center;
    }

    .heroBtn a:first-child i {
        margin-right: 5px;
        padding: 5px 8px;
    }

    .heroBtn a:last-child {
        padding: 8px 15px !important;
        text-align: center;
    }

    /* ========= Domain section =========  */
    #domain {
        margin: 0;
        padding: 0 0 30px 0;
    }

    #domain .container {
        padding: 30px 0;
        border-radius: 15px;
    }

    #domain h3 {
        margin-bottom: 15px;
        padding: 0 10px;
    }

    .search-domain {
        width: 95%;
        height: auto;
        flex-direction: column;
        gap: 15px;
        padding: 15px 10px;
        border-radius: 15px;
    }

    .search-domain input {
        width: 100%;
        text-align: center;
        padding: 10px 5px;
        margin: 0;
        border-radius: 8px;
    }

    .search-Btn {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .search-Btn hr {
        display: none;
    }

    .domain-btn button {
        padding: 10px 20px 10px 8px !important;
        width: 100%;
        text-align: center;
    }

    .domain-btn i {
        padding: 5px 8px;
    }

    .b-btn {
        padding: 10px 20px 10px 8px !important;
        width: 100%;
        text-align: center;
    }

    .b-btn i {
        padding: 5px 8px;
    }

    .domain-names {
        gap: 5px;
        margin-top: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ========= Service section =========  */
    #service {
        padding: 30px 0;
    }

    #service h2 {
        margin: 0 0 10px 0;
        text-align: center;
        padding: 0 5px;
    }

    #service .content p {
        padding: 0 10px 10px 10px !important;
        text-align: center;
    }

    .service-bg img {
        width: 60%;
    }

    .cards {
        flex-direction: column;
        margin: 10px 0;
        gap: 10px;
    }

    .cards div {
        width: 100%;
        padding: 20px 15px;
        margin: 0 auto 10px auto !important;
        min-height: auto;
        text-align: center;
    }

    .cards img {
        width: 50px;
    }

    .cards h4 {
        margin: 10px 0 5px 0;
    }

    .w-btn {
        padding: 10px 20px;
        margin: 15px auto 0 auto;
        display: block;
        width: fit-content;
    }

    /* ========= About section =========  */
    #about {
        margin: 30px 0;
        padding: 20px 0 0 0;
    }

    #about .row h2 {
        padding-top: 20px;
        text-align: center;
    }

    #about .text-start {
        padding: 0 5px;
        text-align: center !important;
    }

    #about p {
        text-align: center;
    }

    .about-box {
        margin: 8px 5px;
        width: calc(100% - 10px);
        padding: 20px 15px;
        min-height: auto;
        gap: 10px;
    }

    .about-box img {
        width: 40px;
    }

    .aboutBtn {
        margin-top: 15px !important;
        text-align: center;
    }

    /* spans */
    .span-box span:first-child,
    .span-box span:last-child,
    #about span:first-child,
    #about span:nth-child(2),
    #about span:nth-child(3),
    #about span:nth-child(4),
    #about span:nth-child(5) {
        display: none;
    }

    /* ========= Get Started section =========  */
    #started {
        margin: 0 0 30px 0;
    }

    #started .row {
        padding: 30px 20px;
        gap: 10px;
    }

    #started h2 {
        text-align: center;
    }

    #started p {
        margin: 10px 0 20px 0;
        text-align: center;
    }

    #started img {
        width: 100%;
        margin-top: 15px;
    }

    /* ========= Clients section =========  */
    #clients {
        margin: 0 0 30px 0;
    }

    #clients h2 {
        text-align: center;
        padding: 0 5px;
    }

    #clients p {
        text-align: center;
        padding: 0 5px;
    }

    #clients .row .col-lg-6:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .client-box {
        flex-direction: column;
        gap: 15px;
        margin: 8px;
    }

    .client-box .counter {
        width: 100%;
        padding: 15px 20px;
        min-height: auto;
        text-align: center;
    }

    .client-box .counter img {
        width: 45px;
    }

    .client-box h4 {
        margin-top: 8px;
    }

    /* spans */
    #clients span,
    #clients figure img {
        display: none;
    }

    /* ========= Hosting section =========  */
    #hosting {
        margin: 30px 0;
        padding: 0;
    }

    #hosting h2 {
        padding: 0 5px;
        text-align: center;
    }

    #hosting p {
        text-align: center;
        padding: 0 5px;
    }

    #hosting .mt-4 {
        margin-top: 1rem !important;
    }

    .hosting_links {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hosting_links a {
        padding: 8px 12px !important;
        font-size: 11px;
    }

    .tabcontent {
        padding: 15px 8px 20px 8px;
    }

    .tabcontent .row {
        gap: 10px;
    }

    .plan-card {
        width: 100%;
        padding: 25px 15px;
        margin: 5px 0;
    }

    .plan-card h4 {
        text-align: center;
    }

    .plan-card .pricing_plan {
        margin-top: 10px;
        text-align: center;
    }

    .plan-card figure,
    .hosting-bg,
    #hosting span,
    #hosting figure img {
        display: none;
    }

    /* ========= Feature section =========  */
    #feature {
        padding: 30px 0;
    }

    #feature h2 {
        text-align: center;
        padding: 0 5px;
    }

    #feature p {
        text-align: center;
        padding: 0 5px;
    }

    .py-3 {
        padding-top: 0 !important;
    }

    #feature ul {
        padding: 10px 0 0 0;
    }

    #feature .accordion-item {
        padding: 15px 10px 5px 10px;
    }

    #feature .accordion img {
        width: 35px !important;
    }

    #feature .accordion button {
        padding: 10px 5px !important;
        font-size: 12px;
    }

    .advance_btn {
        margin-top: 20px;
        text-align: center;
    }

    .adv-bg img,
    #feature span:first-child,
    #feature span:nth-child(2),
    #feature span:nth-child(3) {
        display: none;
    }

    /* ========= Money Back section =========  */
    #m-back {
        padding-bottom: 30px;
    }

    #m-back h3 {
        background-color: #4F80FF;
        color: #fff;
        width: 100%;
        text-align: center;
        padding: 15px 5px;
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
    }

    #m-back .d-flex {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #m-back .d-flex div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 0;
        width: calc(50% - 10px);
    }

    #m-back .m-main {
        padding: 0;
    }

    #m-back .m-main img {
        width: 35px;
    }

    .m-main .row {
        padding-bottom: 15px;
    }

    .m-main .gap-3 {
        gap: 1rem !important;
    }

    /* ========= Integrate section =========  */
    #integrate {
        margin: 0 0 30px 0;
    }

    .integ-first {
        padding: 30px 0 0 0;
    }

    .integ-first h2 {
        color: #031D5B;
        text-align: center;
        margin: 0 auto;
        padding: 0 5px;
    }

    .integ-first h3 {
        color: #031D5B;
        text-align: center;
        margin: 0 auto;
        width: 100%;
        padding: 0 5px;
    }

    .integ-first div {
        gap: 20px !important;
        margin-top: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .integ-first div img {
        width: 35px !important;
    }

    .integrate-logo img:nth-child(6) {
        display: none;
    }

    .ready {
        width: 95%;
        top: 15% !important;
        left: 2.5%;
        padding: 20px 15px;
        border-radius: 10px;
    }

    .ready h3 {
        text-align: center;
        margin: 0 0 5px 0;
    }

    .ready p {
        padding: 8px 5px;
        margin: 0;
        text-align: center;
    }

    .ready .mt-4 {
        margin-top: 8px !important;
    }

    .ready div:first-child {
        flex-direction: column;
        text-align: center;
    }

    .ready a i {
        padding: 6px 8px;
    }

    .slider {
        padding: 200px 0 30px 0;
        margin-top: 0;
    }

    .slider-content {
        padding-top: 15px;
        margin-top: 30px;
    }

    .slider .d-flex {
        padding: 0 8px 15px 8px;
        gap: 15px;
        margin-top: 50px;
        flex-direction: column;
    }

    .slider-box {
        width: 100% !important;
        padding: 20px 15px;
    }

    .slider-box img:first-child {
        width: 70px;
    }

    .slider-box img:nth-child(2) {
        width: 35px;
    }

    .slider-box div:first-child {
        padding: 0;
        align-items: center;
        gap: 10px;
    }

    .slider-box div img:first-child {
        width: 60px;
    }

    .slide-para p:first-child {
        padding: 10px 5px;
        color: #505050;
        text-align: center;
    }

    .slider p {
        padding: 5px 5px 0 5px;
        text-align: center;
    }

    .slider figure {
        margin: 10px 0 0 0;
        text-align: center;
    }

    .one-time {
        width: 100%;
    }

    /* ========= Achievement section =========  */
    #achievement {
        padding: 0;
    }

    #achievement .container {
        padding-bottom: 30px;
    }

    #achievement h2 {
        text-align: center;
        padding: 0 5px;
    }

    #achievement p {
        width: 100%;
        padding: 0 5px 10px 5px;
        text-align: center;
    }

    .achieve-cards {
        flex-direction: column;
        gap: 20px;
        margin-top: 15px;
    }

    .achieve-cards hr {
        display: none;
    }

    .achieve-cards div {
        gap: 10px;
        width: 100%;
        text-align: center;
    }

    .achieve-cards img {
        width: 45px;
    }

    /* ========= FAQ section =========  */
    #faq {
        padding: 30px 0 0 0;
    }

    #faq .row {
        padding-bottom: 30px;
    }

    #faq img {
        width: 80%;
        margin: 0 auto;
    }

    .faq-content {
        padding: 0 5px;
        margin-top: 0;
    }

    .faq-content h2 {
        padding-top: 20px;
        text-align: center;
    }

    .faq-content p {
        padding: 8px 0 0 0;
        text-align: center;
    }

    #faq .accordion-body {
        padding: 0px 20px 0px 10px;
    }

    #faq .accordion-body p {
        font-size: 12px;
        text-align: left;
    }

    #faq .accordion button {
        font-size: 12px;
        padding-bottom: 0 !important;
    }

    #faq .accordion-button:not(.collapsed) {
        box-shadow: none;
    }

    /* ========= Blog section =========  */
    #informed {
        margin: 30px 0;
    }

    #informed h2 {
        padding: 0 5px;
        text-align: center;
    }

    #informed p {
        padding: 5px 5px 15px 5px;
        text-align: center;
    }

    #informed .d-flex {
        align-items: center;
    }

    .inform-cards {
        flex-direction: column;
        gap: 15px;
    }

    .inform-cards .blog {
        width: 100%;
        margin: 0 auto;
    }

    .inform-cards .col-lg-4:nth-child(2),
    .inform-cards .col-lg-4:nth-child(3) {
        margin-top: 0;
    }

    .info-date {
        top: 10px;
    }

    /* ========= Logo section =========  */
    #logoipsum {
        margin: 30px 0 0 0 !important;
        padding: 20px 0 0 0;
    }

    #logoipsum img {
        width: 80px !important;
    }

    /* ========= Newsletter section =========  */
    .newsletter {
        padding: 0 0 15px 0;
    }

    .newsletter h2 {
        text-align: center;
        padding: 0 5px;
    }

    .newsletter .gap-5 {
        gap: 15px !important;
    }

    .newsletter p {
        padding: 0 5px;
        text-align: center;
    }

    .newsletter input {
        width: 100%;
        padding: 10px 8px;
        font-size: 12px;
    }

    .newsletter button {
        display: flex;
        justify-content: center;
        border: none;
        padding: 10px !important;
        width: 100%;
        margin-top: 10px;
    }

    .newsletter i {
        display: none;
    }

    .newsletter form {
        width: 95%;
        margin: 0 auto;
    }

    .email-btn {
        width: 100%;
        padding: 0 5px;
    }

    .newsletter span,
    .newsletter figure {
        display: none;
    }

    /* ========= Footer section =========  */
    footer {
        padding: 100px 0 0 0;
    }

    .footer-links {
        padding: 0 10px;
    }

    .footer-links figure img {
        width: 100px;
    }

    .footer-links h5 {
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .footer-links h5::after {
        display: none;
    }

    .footer-links i {
        font-size: 16px;
    }

    .footer-links ul li {
        padding: 3px 0;
    }

    .footer-links ul li a {
        padding: 0 !important;
        font-size: 12px;
    }

    .footer-links .row {
        gap: 15px;
    }

    .footer-links .col-6 {
        text-align: left;
        width: calc(50% - 10px);
    }

    .footer-links .col-sm-6 {
        width: calc(50% - 10px);
    }

    .address {
        align-items: flex-start;
        padding: 10px 0;
    }

    .address h5 {
        margin-left: 0;
        margin-bottom: 8px;
    }

    .address div {
        align-items: flex-start;
        gap: 5px;
        padding: 3px 0;
    }

    .address div p {
        margin: 0;
        font-size: 12px;
    }

    .copyright {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
    }

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

    footer hr {
        margin: 10px 0 20px 0;
    }

    .footer-links span {
        display: none;
    }

    /* back to top button */
    #backToTopBtn {
        padding: 8px 10px;
        bottom: 15px;
        right: 15px;
        font-size: 12px;
    }

    /* ========= About page =========  */
    .about h2 {
        padding-top: 10px;
        text-align: center;
    }

    .about p {
        padding: 5px 10px 20px 10px;
        text-align: center;
    }

    .about img {
        width: 90%;
        margin: 0 auto;
    }

    .counter-cards {
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }

    .counter-cards hr {
        display: none;
    }

    .counter-cards div {
        gap: 8px;
        width: 100%;
        text-align: center;
    }

    .counter-cards img {
        width: 45px;
    }

    #counter {
        padding: 30px 20px;
    }

    #counter hr {
        padding: 0 15px;
    }

    /* ========= Contact page =========  */
    #contact {
        padding: 30px 0 15px 0;
    }

    #contact h2 {
        text-align: center;
        padding: 0 5px;
    }

    #contact img {
        width: 40px;
        padding-bottom: 15px;
    }

    #contact .justify-content-end img {
        display: none;
    }

    #contact span {
        display: none;
    }

    #contact form {
        width: 100%;
        padding: 20px 15px;
        left: auto;
        top: auto;
        position: relative;
    }

    #contact form .col-md-10 {
        width: 100%;
    }

    #contact form p {
        padding: 8px 0 20px 0;
        text-align: center;
    }

    #contact form button {
        width: 100%;
        padding: 10px !important;
    }

    #contact form input,
    #contact form textarea {
        width: 100%;
        padding: 10px 8px;
        font-size: 12px;
    }

    #location .container-fluid {
        padding-bottom: 15px;
    }

    /* ========= Service page =========  */
    #integrate .adjust {
        padding-top: 30px !important;
    }

    /* ========= Blog page =========  */
    #informed .pt {
        padding-bottom: 0;
    }

}