.header-article {
    position: relative;
    background-image: url('https://itni.ead01.com//landingpage/img/celeste/bg-modified.png');
    background-size: cover;
    background-position: center;
    color: white;
    height: 370px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logozscaler {
    width: 200px;
}

.container-webconf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-height: 500px; /* Set max height for the container */
    padding: 0;
    background: linear-gradient(180deg, rgba(0,23,68,1) 0%, rgba(37,108,247,1) 50%, rgba(37,209,247,1) 100%);
}

.col-left {
    width: 50%;
    padding-left: 90px;
    color: white;
    font-family: "Libre Franklin", sans-serif;
    max-width: 1200px;
}

.col-left h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #fff;
}

.col-left h1 {
    font-size: 50px;
    margin-bottom: 10px;
    color: #fff;
    font-family: "Poppins", sans-serif;
}

.col-left p {
    font-size: 1em;
    line-height: 1.5;
    color: #fff;
    margin-top: 20px;
    font-weight: 800;
    font-family: "Poppins", sans-serif;
}

.col-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.col-right img {
    width: 100%;
    max-width: 100%;
    max-height: 386px; /* Set max height for the image */
    object-fit: cover; /* Ensures the image covers the space proportionally */
}

/* Responsive Design */
@media (max-width: 1024px) { /* Tablet */
    /* .row {
        flex-direction: row;
        height: auto;
    } */

    .col-left {
        width: 50%;
        padding-left: 20px;
        text-align: left; /* Text stays on the left */
    }

    .col-right {
        width: 50%;
        height: auto;
        padding-right: 20px;
    }

    .col-right img {
        max-height: 300px; /* Slightly reduce image height for tablets */
    }
}

@media (max-width: 768px) { /* Mobile */
    /* .row {
        flex-direction: column;
        height: auto;
        text-align: center;
    } */

    .col-left {
        width: 100%;
        padding: 20px;
        align-content: center;
        text-align: center;
        min-height: 300px;
    }

    .col-left h1 {
        font-size: 2.2em;
    }

    .col-left p {
        font-size: 1.1em;
    }

    .col-right {
        display: none; /* Hide image on mobile */
    }
}

.header-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.breadcrumb-custom {
    font-size: 16px;
    font-weight: 300;
}
.breadcrumb-custom a {
    color: white;
    text-decoration: none;
}
.breadcrumb-custom .separator {
    color: white;
}
.header-title {
    margin: 20px 0;
    font-size: 2em;
    line-height: 1.4em;
}
#header-logo1 {
    margin-top: 20px;
    width: 200px !important;
    max-width: 100%;
    padding-left: 15px;
}
@media (max-width: 600px) {
    .header-article {
        height: auto;
        padding: 50px 0;
    }
    .header-title {
        font-size: 1.5em;
    }
    .breadcrumb-custom {
        font-size: 14px;
    }
    .header-logo {
        width: 150px;
    }
    .navbar a {
        float: none;
        width: 100%;
        text-align: left;
        padding: 14px;
        font-size: 14px !important;
    }
    .navbar-container {
        padding-left: 10px;
    }
    .content-block {
        flex-direction: column;
        padding: 15px !important;
        /* margin-top: 10px; */
    }
    .content-text {
        margin: 0 0 20px 0;
        text-align: center;
        margin-right: 0 !important;
        line-height: 24x !important;
        margin-left: 0 !important;
    }
    .content-image {
        margin-left: 0 !important;
        max-width: 90%;
        margin-right: 0 !important;
        flex: 0 0 0px !important;
        text-align: center;
    }
    .video-container {
        width: 100% !important;
        height: 215px !important;
    }
    .video-block strong {
        font-size: 21px !important;
    }


}

.pub-ban {
    display: none;
}

.imagediv {
    display: flex;
    justify-content: center;
    align-items: end;
}

.breadcrumb-custom a {
    text-transform: uppercase;
}

.navbar {
    background-color: #fff;
    overflow: hidden;
}
.navbar a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 20px;
    text-decoration: underline;
    font-weight: bolder;
    font-size: 18px;
}
.navbar a:hover {
    background-color: #001744;
    color: #fff;
}

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    /* padding-left: 20px; */
 
}

.content-block {
    background-color: white;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    /* margin-top: 20px; */
}

.content-text {
    flex: 1;
    margin-right: 20px;
    line-height: 32px;
    margin-left: 50px;
}

.content-text p {
    font-size: 26px;
}

.content-text strong {
    font-weight: bold;
    color: #116fb3;
    font-size: 38px;
    line-height: 43px;
}

.content-image {
    flex: 0 0 450px;
    margin-left: 60px;
    margin-right: 60px;
}

.content-image img {
    width: 100%;
    height: auto;
}

/* Media Query for screen width between 953px and 1200px */
@media (min-width: 601px) and (max-width: 1200px) {
    .content-block {
        flex-direction: column;
        align-items: center;
    }

    .content-text {
        margin: 0 0 20px 0;
        text-align: center;
    }

    .content-image {
        margin: 0;
        width: 100%;
        max-width: 450px;
        text-align: center;
    }

    .content-image img {
        display: block;
        margin: 0 auto;
    }
}
.video-block {
    background-color: white;
    padding: 20px;
    text-align: center;
    width: 100%;
}
.video-block strong {
    font-weight: 700;
    color: #001744;
    font-size: 35px;
    display: block;
    /* margin-bottom: 20px; */
    font-family: "Roboto", sans-serif;
}
.video-container {
    width: 525px;
    height: 320px;
    margin: 0 auto;
    position: relative;
    /* border-radius: 30px; */
    overflow: hidden;
    cursor: pointer;
}
.video-container img,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* border-radius: 30px; */
}
.video-container img {
    cursor: pointer;
}
#separatordev {
    background-color: white;
}

#separatordevbleu {
    background-color: #001744;
}
.separator-block {
    font-size: 24px;
    font-weight: 500;
    background-color: #fff;
    color: #000000;
    text-align: center;
    padding: 7px 0 7px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    font-family: "Trebuchet MS", sans-serif;

}

.separator-block p {
    width: 80%;
    max-width: 1300px;
}
.separator-block h2 {
    width: 80%;
    max-width: 1300px;
    margin-top: 7px;
}
.articles-section {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    /* margin-top: 20px; */
    text-align: left; /* Ensure text aligns to the left */
    background-color: #fff;
}

.articles-title {
    color: #116fb3;
    font-size: 24px;
    margin-left: 122px; /* Adjust spacing from the left */
}

.article1 {
    width: 80%;
    margin: 20px auto;
    background-color: #eef1f2;
    /* border: 1px solid #ccc; */
    /* border-radius: 15%; */
    border-end-end-radius: 22px;
    border-end-start-radius: 22px;
    border-start-start-radius: 29px;
    border-start-end-radius: 29px;
    overflow: hidden;
    box-sizing: border-box;
    /* padding: 20px; */
    text-align: left;
}

.article-image img {
    width: 100%;
    height: auto;
    /* border-bottom: 1px solid #ccc; */
    max-width: 100%;
}

.article-content {
    padding: 20px;
}

.article-title {
    font-weight: bold;
    color: #116fb3;
    font-size: 18px;
    margin-bottom: 25px;
    
}

.article-content p {
    line-height: 1.6;
    margin: 10px 0;
}

.read-article-btn {
    display: inline-block;
    background: linear-gradient(90deg, rgba(69, 181, 178, 1) 0%, rgba(17, 111, 179, 1) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
    /* float: right; */
    margin-bottom: 18px;
}

.read-article-btn-v2 {
    display: inline-block;
    background: linear-gradient(90deg, rgba(69, 181, 178, 1) 0%, rgba(17, 111, 179, 1) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
    float: right;
    margin-bottom: 18px;
}


@media (max-width: 600px) {
    .article1 {
        width: 100%;
    }
    .articles-title, .articles-title2, .articles-title3, .articles-title4, .articles-title5, .articles-title8 {
        text-align: center !important;
        margin-left: 0 !important;
    }
    .content-text strong {
        font-size: 24px;
        line-height: 30px;
    }
    .content-text p {
        font-size: 18px;
    }
    
}
/* articles section 2 */
.articles-section2 {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
}

.articles-title2 {
    color: #116fb3;
    font-size: 24px;
    text-align: left;
    margin-left: 120px; /* Adjust the left margin to create space */
    margin-bottom: 20px;
}

.articles-container2 {
    width: 80%;
    margin: 0 auto; /* Center the container horizontally */
    display: flex;
    justify-content: space-between; /* Distribute items evenly across the container */
    flex-wrap: wrap; /* Wrap items to the next line if they exceed container width */
}

.article2 {
    width: 290px; /* Set a fixed width for each article */
    margin: 10px; /* Adjust margin for space between articles */
    background-color: #eef1f2;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
}

.article-image2 img {
    width: 100%;
    height: 224px; /* Set a fixed height for the image */
    object-fit: cover; /* Ensure the image covers the container without stretching */
    border-radius: 20px 20px 0 0; /* Rounded corners for the image */
}

.article-content2 {
    padding: 20px;
}

.article-title2 {
    font-weight: bold;
    color: #116fb3;
    font-size: 18px;
    margin-bottom: 15px;
}

.article-content2 p {
    line-height: 1.6;
    margin: 10px 0;
}

.read-article-btn2 {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, rgba(69, 181, 178, 1) 0%, rgba(17, 111, 179, 1) 100%);
    color: white;
    border: none;
    padding: 10px 0;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 960px) {
    .articles-container2 {
        width: 100%; /* Full width on smaller screens */
    }
    .article2 {
        width: calc(50% - 20px); /* Two articles per row on smaller screens */
        margin: 10px; /* Adjust margin for space between articles */
    }
}

@media (max-width: 600px) {
    .article2 {
        width: 100%; /* Single column layout for smaller screens */
    }
}

.separator-block2 {
    font-size: 34px;
    font-weight: bold;
    background-color: #001744;
    color: white;
    text-align: center;
    padding: 22px 0 22px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
/* article 3 css */
.articles-section3 {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
}

.articles-title3 {
    color: #116fb3;
    font-size: 24px;
    text-align: left;
    margin-left: 120px; /* Adjust the left margin to create space */
    margin-bottom: 20px;
}

.articles-container3 {
    width: 80%;
    margin: 0 auto; /* Center the container horizontally */
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1400px;
}

.article3 {
    display: flex;
    flex-direction: row;
    background-color: #E5F1FA;
    /* border-radius: 20px; */
    overflow: hidden;
    box-sizing: border-box;
    height: 100%; /* Ensure all articles have the same height */
    max-height: 400px;
}

.article-image3 {
    flex: 0 0 50%; 
}

.article-image3 img {
    width: 100%;
    height: 100%; /* Set the image to cover the full height */
    object-fit: cover; /* Ensure the image covers the container without stretching */
}

.article-content3 {
    flex: 1; /* The rest of the space is taken by the content */
    padding: 15px 30px 15px 30px; /* Added more padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Ensure content covers the full height */
}

.article-title3 {
    font-weight: bold;
    color: #116fb3;
    font-size: 18px;
    margin-bottom: 15px;
}

.article-content3 p {
    line-height: 1.6;
    margin: 10px 0;
    color: #000;
}

.read-article-btn3 {
    display: inline-block;
    /* width: 30%; */
    background: transparent;
    color: #116fb3;
    border: none;
    padding: 0px;
    border-radius: 10px; 
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    align-self: flex-end;
    font-weight: 600;
}

.read-article-btn3.left-align {
    align-self: flex-start; /* Align the button to the left for Article 2 */
}

.article3:first-child .article-image3 img {
    border-radius: 0px 0 0 0px; /* Rounded corners for the left side image */
}

.article3:nth-child(2) .article-image3 img {
    /* border-radius: 0 20px 0px 0;  */
}

.article3:last-child .article-image3 img {
    /* border-radius: 20px 0 0 0px; */
}

@media (max-width: 960px) {
    .articles-container3 {
        width: 100%; /* Full width on smaller screens */
    }
    .article3 {
        /* flex-direction: column; */
        height: auto; /* Reset height for column layout */
        max-height: 100% !important;
    }
    .article-image3 {
        width: 100%; /* Ensure the image takes full width in column layout */
        height: auto; /* Reset image height for column layout */
    }
    .article-image3 img {
        height: 224px; /* Set a fixed height for images in column layout */
        /* border-radius: 20px 20px 0 0; */
    }
    .read-article-btn3 {
        width: 60%; /* Button width for tablets */
        align-self: center; /* Center the button on tablets */
    }
    .read-article-btn3.left-align {
        align-self: center; /* Center the button for Article 2 on tablets */
    }
}

@media (max-width: 600px) {
    .article3 {
        width: 100%; /* Single column layout for smaller screens */
        flex-direction: column;
        max-height: 100% !important;
    }
    .article3 .article-image3 {
        width: 100%; /* Ensure the image takes full width in column layout */
    }
    .article3 .article-image3 img {
        height: 224px; /* Set a fixed height for images in column layout */
        /* border-radius: 20px 20px 0 0;  */
    }
    .article3:nth-child(1) .article-content3 {
        order: 1; /* Ensures the content appears after the image on mobile */
    }
    .read-article-btn3 {
        width: 100%; /* Button width for mobile */
        align-self: center; /* Center the button on mobile */
    }
    .read-article-btn3.left-align {
        align-self: center; /* Center the button for Article 2 on mobile */
    }

    .article-image3 img {
        object-fit: cover;
    }
}
/* end css of articles */


/* added css */

.separator-block3 {
    font-size: 28px;
    font-weight: bold;
    background-color: #45b5b2;
    color: white;
    text-align: center;
    padding: 22px 0 22px;
    width: 100%;
    box-sizing: border-box;

}

/* article 4 css */
.articles-section4 {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #001744;
}

.articles-title4 {
    color: #116fb3;
    font-size: 24px;
    text-align: left;
    margin-left: 120px; /* Adjust the left margin to create space */
    margin-bottom: 20px;
}

.articles-container4 {
    width: 80%;
    margin: 0 auto; /* Center the container horizontally */
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1400px;
}

.article4 {
    display: flex;
    flex-direction: row;
    background-color: #FFFFFF;
    /* border-radius: 20px; */
    overflow: hidden;
    box-sizing: border-box;
    height: 100%; /* Ensure all articles have the same height */
    max-height: 400px;
}

.article-image4 {
    flex: 0 0 40%; /* Make images take 40% of the width */
    /* height: 100%; Ensure images cover the full height of the article */
}

.article-image4 img {
    width: 100%;
    height: 100%; /* Set the image to cover the full height */
    object-fit: cover; /* Ensure the image covers the container without stretching */
}

.article-content4 {
    flex: 1; /* The rest of the space is taken by the content */
    padding: 30px; /* Added more padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Ensure content covers the full height */
}

.article-title4 {
    font-weight: bold;
    color: #116fb3;
    font-size: 18px;
    margin-bottom: 15px;
}

.article-content4 p {
    line-height: 1.6;
    margin: 10px 0;
    color: #000;
}

.read-article-btn4 {
    display: inline-block;
    /* width: 30%; */
    background: transparent;
    color: #256CF7;
    border: none;
    padding: 8px 0px; 
    /* border-radius: 10px; */
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    align-self: flex-end; /* Align the button to the right */
    font-weight: 700;
}

.read-article-btn4.left-align {
    align-self: flex-start; /* Align the button to the left for Article 2 */
}

.article4:first-child .article-image4 img {
    border-radius: 0px 0 0 0px; /* Rounded corners for the left side image */
}

.article4:nth-child(2) .article-image4 img {
    border-radius: 0 20px 0px 0; /* Rounded corners for the right side image */
}

.article4:last-child .article-image4 img {
    /* border-radius: 20px 0 0 0px;  */
}

@media (max-width: 960px) {
    .articles-container4 {
        width: 100%; /* Full width on smaller screens */
    }
    .article4 {
        /* flex-direction: column; */
        height: auto; /* Reset height for column layout */
        max-height: 100% !important;
    }
    .article-image4 {
        width: 100%; /* Ensure the image takes full width in column layout */
        height: auto; /* Reset image height for column layout */
    }
    .article-image4 img {
        height: 224px; /* Set a fixed height for images in column layout */
        border-radius: 20px 20px 0 0; /* Rounded corners for the image on mobile */
    }
    .read-article-btn4 {
        width: 60%; /* Button width for tablets */
        align-self: center; /* Center the button on tablets */
    }
    .read-article-btn4.left-align {
        align-self: center; /* Center the button for Article 2 on tablets */
    }
}

@media (max-width: 600px) {
    .article4 {
        flex-direction: column-reverse;
        width: 100%; /* Single column layout for smaller screens */
    }
    .article4 .article-image4 {
        width: 100%; /* Ensure the image takes full width in column layout */
    }
    .article4 .article-image4 img {
        height: 224px; /* Set a fixed height for images in column layout */
        border-radius: 20px 20px 0 0; /* Rounded corners for the image on mobile */
    }
    .article4:nth-child(2) .article-content4 {
        order: 1; /* Ensures the content appears after the image on mobile */
    }
    .read-article-btn4 {
        width: 100%; /* Button width for mobile */
        align-self: center; /* Center the button on mobile */
    }
    .read-article-btn4.left-align {
        align-self: center; /* Center the button for Article 2 on mobile */
    }
    .articles-section5 {
        padding: 0 !important;
    }

    .articles-section8 {
        padding: 10px !important;
    }
}
/* end css of articles 4 */

/* start article 5 css */
.articles-section5 {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
}

#articles-section5 {
    background-color: #001744 !important;
}

.articles-title5 {
    color: #45b5b2;
    font-size: 24px;
    text-align: left;
    margin-left: 120px; /* Adjust the left margin to create space */
    margin-bottom: 20px;
}

.articles-container5 {
    width: 83%;
    margin: 0 auto; /* Center the container horizontally */
    display: flex;
    justify-content: space-between; /* Distribute items evenly across the container */
    flex-wrap: wrap; /* Wrap items to the next line if they exceed container width */
    max-width: 1400px;
}

.article5 {
    width: calc(50% - 20px); /* Adjust width to take up more space */
    margin: 10px; /* Adjust margin for space between articles */
    background-color: #1e96ec;
    /* border-radius: 20px; */
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.article-image5 img {
    width: 100%;
    height: 250px; /* Set a fixed height for the image */
    object-fit: cover; /* Ensure the image covers the container without stretching */
    /* border-radius: 20px 20px 0 0; */
}

.article-content5 {
    padding: 20px;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
}

.article-title5 {
    font-weight: bold;
    color: #116fb3;
    font-size: 18px;
    margin-bottom: 15px;
}

.article-content5 p {
    line-height: 1.6;
    margin: 10px 0;
}

.read-article-btn5 {
    display: block;
    width: 100%;
    background: transparent;
    color: white;
    border: none;
    padding: 10px 0;
    border-radius: 20px;
    cursor: pointer;
    text-align: left;
    margin-top: 10px;
    font-weight: 700;
}

@media (max-width: 960px) {
    .articles-container5 {
        width: 100%; /* Full width on smaller screens */
    }
    .article5 {
        width: calc(50% - 20px); /* Two articles per row on smaller screens */
        margin: 10px; /* Adjust margin for space between articles */
    }
}

@media (max-width: 600px) {
    .article5 {
        width: 100%; /* Single column layout for smaller screens */
    }
}

/* end css of articles 5 */


.article-title7, #articles-title7 {
    color: #45b5b2 !important;
    
}
.article-title7 {
    color: #45b5b2 !important;
    
}

.article-title8, .article-title8 p {
    color: #fff !important;
}
.articles-section8 {
    width: 100%;
    padding: 20px 0 20px 0;
    box-sizing: border-box;
    background-color: #fff;
}

#idarticles-section8 {
    background-color: #fff;
}

.articles-title8 {
    color: #116fb3;
    font-size: 24px;
    text-align: left;
    margin-left: 120px; /* Adjust the left margin to create space */
    margin-bottom: 20px;
}

.articles-container8 {
    width: 80%;
    margin: 0 auto; /* Center the container horizontally */
    display: flex;
    justify-content: space-between; /* Distribute items evenly across the container */
    flex-wrap: wrap; /* Wrap items to the next line if they exceed container width */
    max-width: 1400px;
}

.article8 {
    width: calc(33.33% - 20px); /* Adjust width to take up more space */
    /* margin: 10px;  */
    /* background-color: #256CF7; */
    /* border-radius: 20px; */
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 373px;
    height: 400px;
    border-radius: 7px;
}
#article8b1 {
    background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url(https://itni.ead01.com//landingpage/img/vimage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
#article8b2 {
    background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url(https://itni.ead01.com//landingpage/img/iStock-1405695065.png);
    background-size: cover;
    background-repeat: no-repeat;
}
#article8b3 {
    background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url(https://itni.ead01.com//landingpage/img/sheildbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.article-image8 img {
    width: 100%;
    height: 224px; /* Set a fixed height for the image */
    object-fit: cover; /* Ensure the image covers the container without stretching */
    /* border-radius: 20px 20px 0 0; */
}

.article-content8 {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-title8 {
    font-weight: bold;
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
}


.article-content8 p {
    line-height: 1.6;
    margin: 10px 0;
}

.article-content8 a {
    background-color: #fff;
    border-radius: 10px;
    text-decoration: none;
}

.read-article-btn8 {
    display: block;
    width: 100%;
    background: transparent;
    color: #00D15F;
    border: none;
    /* padding: 10px 10px; */
    /* border-radius: 20px; */
    cursor: pointer;
    text-align: center;
    /* margin-top: 10px; */
    font-weight: 700;
}

.buttonwithtext {
    padding: 10px 10px;
    background-color: #fff;
    border-radius: 7px;
    height: 94px;
    align-content: center;
}

.article-text a {
    background-color: #fff;
    border-radius: 10px;
}

@media (max-width: 960px) {
    .articles-container8 {
        width: 100%; /* Full width diyal tablets */
    }
    .article8 {
        width: calc(50% - 20px); /* 2 articlate f row */
        margin: 10px; /* hadi lmargin diyal kola article row */
    }
}

@media (max-width: 600px) {
    .article8 {
        width: 100%; /* Single column layout 3la 9ibal screen adjustment */
    }
}

#article-title3 {
    color: #000 !important;
}

.article-text {
    max-height: max-content;
}

@media only screen and (min-width: 1650px) {
    .article-image8 img {
        width: 100%;
        height: 224px;
        object-fit: cover;
        /* border-radius: 20px 20px 0 0; */
        MIN-HEIGHT: 264px;
    }
  }
  


  @media only screen and (max-width: 1200px) {
    .article-image8 img {
        object-fit: cover;
    }
  }


  .article-text p {
    color: #FFFFFF;
  }

/* new page veeam */

.espartners {
    height: 80px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.espartners a h3 {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ACACAC;
}

#herohomepage {
    height: 461px;
    max-height: 650px;
}

#herohomepage #h1id {
    font-size: 30px;
}
#herohomepage #h3id {
    font-size: 18px;
}


  .hero {
    position: relative;
    max-height: 650px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(https://images.itnewsinfo.com/landingPage/2025/iStock-1256603064.png);    
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: baseline;
    text-align: center;
    color: white;
    font-family: "Roboto", sans-serif;
    height: 400px;
    flex-direction: column;
}
.contentholderbitdef {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
.cdnbitdef {
    width: 100%;
    background: #E4F2FF;
    padding: 30px 0 30px 0;
}
.bitdefholder2 {
    width: 90%;
    display: flex;
    flex-direction: row;
    padding: 0 70px;
    margin: 0 auto;
    gap: 5px;
}

.bitdefheline {
    width: 1px;
    height: 183px;
    background-color: #A0D1FF;
    align-self: center;
    margin: 0 40px;
}

.bitdefholder4 {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: 30px auto;
    gap: 200px;
}
.bitdeftextholder4 {
    width: 60%;
}
.bitdeftextholder4 h1 {
    font-family: "Roboto", sans-serif;
    font-size: 33px;
    color: #000000;
    margin-bottom: 13px;
}
.bitdeftextholder4 p {
    font-family: "Roboto", sans-serif;
    color: #000000;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
}

.bitdefimgholder4 {
    width: 40%;
    background: #E4F2FF;
    border-radius: 15px;
    height: 500px;
}
.bitdefimagevideo4 {
    right: 45%;
    position: relative;
    top: 24%;
}

.imgdracoteam {
    width: 300px;
}

.bitdefdots4 {
    position: relative;
    top: 45%;
    right: -46%;
    width: 150px;
}

.imgdotsbitdef4 {
    width: 148px;
}

.bitdefholder5 {
    display: flex;
    flex-direction: row;
    gap: 100px;
    margin: 30px auto;
    width: 80%;
    padding-top: 40px;
}

.bitdefimg5 {
    width: 100%;
}
.bitdefimg5expo {
    width: 100%;
    border-radius: 10px;
}

.bitdeftextandbtn5 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.textbit5 h2 {
    font-family: "Roboto", sans-serif;
    font-size: 45px;
    color: #000000;
    font-weight: 600;
    margin-bottom: 10px;
}
.textbit5 p {
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    color: #000000;
}
.btnbit5 {
    display: inline-block;
    overflow: hidden;
    padding: 10px;
}

.btnbit5 a {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

.btnbit5 a:hover {
    transform: scale(1.05);
}

.btn5holder {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: #000000;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.3s ease-in-out;
}

.btn5holder svg {
    transition: transform 0.3s ease-in-out;
}

.btnbit5 a:hover .btn5holder svg {
    transform: translateX(5px);
}

.bitdefholder6 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 80%;
    margin: 10px auto;
    padding-top: 30px;
}

.imgandcontentholder6 {
    width: 60%;
    display: flex;
    flex-direction: row;
    background: #000000;
    border-radius: 12px;
}

.imgbidef6 {
    width: 70%;
}
.imgbidef6 img {
    width: 100%;
}
.bottonasbitdef6 {
    width: 30%;
    padding: 17px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bottonasbitdef6 .paragraph {
    font-size: 13px;
    color: #ffffff;
}

.contentholder6 .paragraph2 {
    color: #ffffff;
}
.actbitdef6 {
    width: fit-content;
    padding: 6px 23px;
    border: 1px solid #ffffff;
    border-radius: 27px;
    font-size: 12px;
    color: #fff;
}
.btnbitdef6 a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: #fff;
    text-decoration: none;
}

.contentholder6 {
    width: 40%;
    background: #1B4497;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 17px;
    justify-content: space-between;
    align-items: flex-end;
}

.bitdefholder7 {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    width: 80%;
    margin: 25px auto;
    gap: 20px;
    padding-bottom: 50px;
}

.articlebitdef7 {
    width: 33%;
}
.article2bitdef7 {
    width: 25%;
}
.article3bitdef7 {
    width: 40%;
}

#background7-1 {
    background: #295FD2;
}
#actbitdef6id {
    align-self: end;
}
.articlebitdef7 {
    width: 33%;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 12px;
    min-height: 190px;
    justify-content: space-between;
}
.arttextandbtn7 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.textbitdef7 {
    width: 60%;
}
.btnbitdef7 {
    align-self: end;
    padding-bottom: 5px;
    justify-items: flex-end;
}
.btnbitdef7 a {
    color: #ffff;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    text-decoration: none;
}
.textbitdef7 p {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
}
#background7-2 {
    background: #000000;
}
.article2bitdef7 {
    width: 25%;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 13px;
    justify-content: space-between;
}


#background7-3 {
    background: #295FD2;
}

.article3bitdef7 {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 17px;
    border-radius: 13px;
}


.whitespaceholder {
    height: 200px;
    width: 100%;
    background: #ffffff;
    margin-top: -77px;
}
.whitespacedots {
    width: 85%;
    margin: 0 auto;
}
.whitespacedots img {
    float: right;
    width: 120px;
    padding-top: 40px;
}




.bitdefholder8 {
    background: #ffffff;
    padding: 40px 0 50px 0;
    width: 100%;
}

.bitdefcontent8 {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 5px 0 35px 0;
}

.bitdef8video img {
    width: 100%;
    border-radius: 10px;
}
.bitdef8video a, .bitdef8text a {
    text-decoration: none;
}


.bitdefcontent8-1, .bitdefcontent8-2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bitdef8text h2 {
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    color: #000000;
}




.bitdefform8 {
    max-width: 80%;
    margin: auto;
    padding: 30px 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgb(0 0 0 / 41%);
    position: relative;
}

.bitdefform8holder {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-direction: row;
    margin-bottom: 20px;
}
/* .bitdefform8::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: blue;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
} */

.form-group8 {
    position: relative;
    width: 100%;
}

.form-group8 input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: 0.3s;
    line-height: unset;
}

.form-group8 label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background: white;
    padding: 0 5px;
    color: #000000c2;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
}

.form-group8 input:focus + label,
.form-group8 input:not(:placeholder-shown) + label {
    top: 0;
    left: 10px;
    font-size: 12px;
    color: blue;
}

.bitdefform8 form {
    text-align: center;
    justify-items: center;
}

.submit-btn {
    position: relative;
    width: 35%;
    padding: 10px;
    background: #0075F4;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    transition: background 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.submit-btn:disabled {
    background-color: #5a9ff3;
    cursor: not-allowed;
    opacity: 0.8;
}

.loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.checkmark {
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
}

.checkmark::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 5px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
    left: 4px;
    top: 6px;
}

.error-mark {
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
}

.error-mark::before,
.error-mark::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    background: white;
    top: 9px;
    left: 3px;
}

.error-mark::before {
    transform: rotate(45deg);
}

.error-mark::after {
    transform: rotate(-45deg);
}

.success {
    background-color: #28a745 !important;
}

.error {
    background-color: #dc3545 !important;
}



.submit-btn:hover {
    background: darkgreen;
}

.bitdefform8h3 {
    margin-bottom: 20px;
}

.bitdefform8h3 h3 {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: #000000;
}



.hero-content {
    max-width: 50%;
    z-index: 1;
    margin-left: 140px;
    text-align: left;
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #000000;
    font-family: "Roboto", sans-serif;
}

.hero h3 {
    font-size: 24px;
    color: #000000;
    line-height: 1.3;
    font-family: "Roboto", sans-serif;
}

.tdtextholder p {
    margin-bottom: 35px;
    font-size: 18px;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    line-height: 1.8;
    text-align: justify;
    color: #000000;
}

.tdbuttonholder .tdbutton {
    text-align: center;
}
.tdbuttonholder {
    width: 90%;
    margin: 0 auto;
    padding: 0px 0 30px 0;
}
.td3holder {
    width: 80%;
    margin: 0 auto;
    padding: 45px 0;
    
}

.td3holder .td3contentholder {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-between;
}
.td3holder .td3contentholder .tdprofile {
    text-align: center;
    width: 32%;
    padding: 20px;
    border: solid 1px #0075F4;
    border-radius: 5px;
}


.td3holder .td3contentholder .tdprofile img {
    width: 100px;
    border-radius: 100px;
    padding-bottom: 15px;
}
.td3holder .td3contentholder .tdprofile h2, .td3holder .td3contentholder .tdprofile p {
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #000000;
}

@media (max-width: 768px) {
    .td3holder .td3contentholder {
        flex-direction: column;
        gap: 20px;
    }

    .td3holder .td3contentholder .tdprofile {
        width: 100%;
        padding: 15px;
    }

    .td3holder .td3contentholder .tdprofile img {
        width: 80px;
    }

    .td3holder .td3contentholder .tdprofile h2, .td3holder .td3contentholder .tdprofile p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .td3holder .td3contentholder {
        gap: 15px;
    }

    .td3holder .td3contentholder .tdprofile {
        padding: 10px;
    }

    .td3holder .td3contentholder .tdprofile img {
        width: 60px;
    }

    .td3holder .td3contentholder .tdprofile h2, .td3holder .td3contentholder .tdprofile p {
        font-size: 14px;
    }
}


.tdbuttonholder .tdbutton a {
    color: #ffffff;
    text-decoration: none;
    background: #0075F4;
    padding: 15px 80px;
    font-family: "Roboto", sans-serif;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border-radius: 10px;
}
.tdbuttonholder .tdbutton a:hover {
    background-color: #074f9d;
    transform: scale(1.05);
}



.bottontd {
    margin: 40px 0px 0 0;
}

.bottontd a {
    color: #ffffff;
    text-decoration: none;
    background: #0075F4;
    padding: 15px 80px;
    font-family: "Roboto", sans-serif;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border-radius: 10px;
}

.bottontd a:hover {
    background-color: #065bb7;
    transform: scale(1.05);
}



.bitdefholder1 {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 200px;
    padding: 55px 0 40px 0;
}
.bitdefimageholder {
    height: 450px;
    background: #E4F2FF;
    border-radius: 15px;
    width: 380px;
}

.bitdefbleuholder {
    position: relative;
    top: 10%;
    left: 36%;
}
.bitdefcontentholder {
    align-content: center;
}

.bitdefcontentholder h1 {
    font-size: 37px;
    line-height: 1.3;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    color: #000000;
}
.bitdefcontentholder p {
    font-weight: 600;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
}

.bitdefholder3 {
    width: 100%;
    margin: 40px 0;
}
.holder3bittitle h1 {
    font-weight: 600;
    text-align: center;
    color: #000000;
    font-family: "Roboto", sans-serif;
    font-size: 31px;
}

.holder3bitimg img {
    width: 100%;
}

.bitdefstat h2 {
    color: #878787;
    font-size: 60px;
    font-weight: 600;
    font-family: "Roboto", sans-serif;
}
.bitdefstat p {
    color: #000000;
    font-size: 15px;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
}
.bitdefbleuholder .imgbifdefvideo {
    max-width: 400px;
    cursor: pointer;
}

.bitdefdots {
    position: relative;
    top: 22%;
    left: 70%;
}
.bitdefdotsimg {
    width: 100px;
}
.collab {
    position: absolute;
    bottom: 20px;
    right: 40px;
    display: flex;
    align-items: center;
}

.collab p {
    margin-right: 10px;
    font-size: 1.4rem;
    margin-top: 16px;
}

.collab img {
    width: 130px;
    /* height: 59px; */
}

.bitdefholder9 {
    width: 100%;
    padding: 50px 100px;
    background-image: url(https://itni.ead01.com//landingpage/img/free_trial_banner_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 350px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
}

.bitdef9text p {
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
}
.bitdef9text h4 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 500;
}

.bitdef9btn .btn9bit {
    padding: 10px 30px;
    background: #FF0000;
    color: #ffffff;
    border-radius: 10px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.bitdef9btn .btn9bit:hover {
    transform: scale(1.1);
    background: #CC0000;
}

.bitdef9btn a {
    text-decoration: none;
}

.paragraphdef7 {
    width: 100%;
    text-align: left;
    color: #ffffff;
    font-size: 14px;
}

@media screen and (max-width: 1024px) {
    .bitdefholder9 {
        padding: 30px 50px;
        height: auto;
    }

    .bitdef9text h4 {
        font-size: 24px;
    }

    .bitdef9text p {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .bitdefholder9 {
        flex-direction: column;
        text-align: center;
        padding: 30px;
        height: auto;
    }

    .bitdef9text {
        margin-bottom: 20px;
    }

    .bitdef9text h4 {
        font-size: 22px;
    }

    .bitdef9btn .btn9bit {
        padding: 12px 25px;
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .bitdefholder9 {
        padding: 20px;
    }

    .bitdef9text h4 {
        font-size: 20px;
    }

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

    .bitdef9btn .btn9bit {
        width: 100%;
        padding: 12px 0;
    }
}


/* Mobile responsive design */
@media only screen and (max-width: 768px) {
    .bitdefcontent8 {
        flex-direction: column;
    }
    .bitdefcontent8-1, .bitdefcontent8-2 {
        width: 100%;
    }
    .bitdefform8holder {
        flex-direction: column;
    }
    .submit-btn {
        width: 100%;
    }
    .bitdef8text h2 {
        font-size: 18px;
    }
    .bitdefform8h3 h3 {
        font-size: 18px;
    }
    .bitdefholder2 {
        flex-direction: column;
    }
    .bitdefholder6 {
        flex-direction: column;
    }
    .imgandcontentholder6 {
        width: 100%;
        height: 170px;
    }
    .imgbidef6 {
        display: none;
    }
    .bottonasbitdef6 {
        width: 100%;
        padding: 20px;
        align-items: end;
    }
    .contentholder6 {
        height: 170px;
        width: 100%;
    }
    .bitdefholder7 {
        flex-direction: column;
    }
    .articlebitdef7 {
        width: 100%;
    }
    .article2bitdef7 {
        width: 100%;
    }
    .article3bitdef7 {
        width: 100%;
        height: auto;
    }
    .bitdefholder4 {
        flex-direction: column-reverse;
        width: 100%;
        margin: 0;
        gap: 0;
    }
    .bitdeftextholder4 {
        width: 90%;
        margin: -156px 0px 0 0;
        align-self: center;
        z-index: 2;
    }
    .bitdefimgholder4 {
        width: 90%;
        margin: 0 auto;
        height: 400px;
    }
    .bitdefimagevideo4 {
        right: 0;
        position: relative;
        top: 11%;
    }
    .bitdefdots4 {
        position: relative;
        top: 45%;
        right: -46%;
        width: 150px;
        z-index: 1;
    }
    .bitdefholder5 {
        flex-direction: column;
        gap: 30px;
    }
    #bitdefholderid5 {
        flex-direction: column-reverse !important;
    }
    .bitdefholder1 {
        display: flex;
        flex-direction: column;
        width: 90%;
        gap: 0;
    }
    .bitdefheline {
        display: none;
    }
    .bitdefdots {
        display: none;
    }
    .bitdefimageholder {
        align-content: center;
    }
    .bitdefcontentholder h1 {
        font-size: 36px;
    }
    .bitdefbleuholder .imgbifdefvideo {
        width: 100%;
    }
    .bitdefbleuholder {
        position: relative;
        top: 0;
        left: 0;
    }
    .hero-content {
        max-width: 90%;
        margin-left: 0;
    }
    .hero {
        align-items: center;
    }

    .hero h1, #herohomepage #h1id {
        font-size: 2.9rem;
    }

    .hero h3, #herohomepage #h3id {
        font-size: 1.7rem;
    }

    .collab {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 20px;
        flex-direction: column;
    }

    .collab p {
        margin-bottom: 10px;
    }

    .collab img {
        margin: 0 auto;
    }
}


.firstcontent {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 45px;
    font-family: "Poppins", sans-serif;
    padding-bottom: 30px;
}
.firstcontent h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.7;
    color: #000;
}


.imageandtext {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

.imageandtext p {
    font-size: 17px;
    color: #00D15F;
    font-weight: 800;
}

.imageandtext img {
    width: 130px;
}

.contentveeam {
    background-color: #fff;
}


.seccontent {
    width: 80%;
    max-width: 1400px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 30px;
    font-family: "Poppins", sans-serif;
}

.imageleft, .imageright {
    width: 50%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border: solid 2px #61CD6C;
    border-radius: 10px;
    background-color: #F3F3F3;
}

.textandbutton h4 {
    color: #000;
    font-weight: 800;
} 
.textandbutton p {
    color: #000000;
}

.textandbutton a {
    color: #321AF5;
    font-weight: 700;
}

.imageleft img, .imageright img {
    width: 240px;
    height: 331px;
    border-radius: 9px;
}

.imageleft div, .imageright div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px 7px 0px 7px;
    flex-grow: 1;
}

.imageleft a, .imageright a {
    margin-top: auto;
}

@media (min-width: 1300px) {
    .textandbutton h4 {
        color: #000;
        font-weight: 800;
        font-size: 21px;
    } 
    .textandbutton p {
        color: #000000;
        font-size: 18px;
    }
    
    .textandbutton a {
        color: #321AF5;
        font-weight: 700;
    }
    .imageleft div, .imageright div {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 25px 7px 9px 7px;
        flex-grow: 1;
    }

    .article8 {
        height: 450px;
        max-height: 450px;
        
    }
    .article-title8 {
        font-size: 27px;
    }
    .read-article-btn8 {
        font-size: 19px;
    }
}

@media (max-width: 1024px) {
    .seccontent {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 90%;
    }

    .imageleft, .imageright {
        width: 100%;
        flex-direction: row;
        /* align-items: center; */
    }
    .imageleft h4, .imageright h4 {
        font-size: 28px;
    }
    .imageleft p, .imageright p {
        font-size: 20px;
    }

    .imageleft img, .imageright img {
        width: 100%;
        height: auto;
        max-width: 275px;
    }
}

@media (max-width: 768px) {

    .hero-content img {
        width: 100%;
    }
    .firstcontent h2 {
        font-size: 30px;
        line-height: 1.2;
    }
    .seccontent {
        width: 95%;
    }
    .imageleft {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    .imageright {
        width: 100%;
        flex-direction: column-reverse;
        align-items: center;
    }

    .imageleft div, .imageright div {
        padding: 15px;
    }

    .imageleft img, .imageright img {
        width: 100%;
        height: auto;
        max-width: 367px;
        max-height: 300px;
        object-fit: cover;
        object-position: top;
    }
    .read-article-btn8 {
        font-size: 17px;
    }
}

.separator-block4 {
    font-size: 34px;
    font-weight: bold;
    background: radial-gradient(circle, rgba(35,120,239,1) 100%, rgba(36,100,243,1) 100%);
    color: white;
    text-align: center;
    padding: 22px 0 22px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Trebuchet MS", sans-serif;
    }
    .article-image22, .article-image22 p {
    color: #fff !important;
}

    .articles-section22 {
    width: 100%;
    padding: 20px 0 40px 0;
    box-sizing: border-box;
    background: radial-gradient(circle, rgba(35,120,239,1) 100%, rgba(36,100,243,1) 100%);
}

#idarticles-section22 {
    background: radial-gradient(circle, rgba(35,120,239,1) 100%, rgba(36,100,243,1) 100%);
}

.articles-title22 {
    color: #116fb3;
    font-size: 24px;
    text-align: left;
    margin-left: 120px; /* Adjust the left margin to create space */
    margin-bottom: 20px;
}

.articles-container22 {
    width: 80%;
    margin: 0 auto; /* Center the container horizontally */
    display: flex;
    justify-content: space-between; /* Distribute items evenly across the container */
    flex-wrap: wrap; /* Wrap items to the next line if they exceed container width */
    max-width: 1400px;
}

.article22 {
    width: calc(33.33% - 20px); /* Adjust width to take up more space */
    margin: 10px; /* Adjust margin for space between articles */
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 373px;
}

.article-image22 img {
    width: 100%;
    height: 224px; /* Set a fixed height for the image */
    object-fit: cover; /* Ensure the image covers the container without stretching */
    /* border-radius: 20px 20px 0 0; */
}

.article-content22 {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-image22 {
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    margin-bottom: 15px;
}

.article-content22 p {
    line-height: 1.6;
    margin: 10px 0;
}
.article-content22 h4 {
    line-height: 1.6;
    margin: 10px 0;
}
.read-article-btn22 {
    display: block;
    width: 100%;
    background: transparent;
    color: #2464F3;
    border: none;
    padding: 10px 0;
    /* border-radius: 20px; */
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
}
#idarticles-section22 > div:nth-child(3) > div.article-content22 > a {
    text-decoration: none;
}


@media (max-width: 960px) {
    .articles-container22 {
        width: 100%; /* Full width diyal tablets */
    }
    .article22 {
        width: calc(50% - 20px); /* 2 articlate f row */
        margin: 10px; /* hadi lmargin diyal kola article row */
    }
}

@media (max-width: 600px) {
    .article22 {
        width: 100%; /* Single column layout 3la 9ibal screen adjustment */
    }
    .articles-section22 {
        padding: 10px !important;
    }
    .articles-title22 {
        text-align: center !important;
        margin-left: 0 !important;
    }
    .separator-block5 h1 {
        font-size: 28px;
    }
}

@media only screen and (min-width: 1650px) {
    .article-image22 img {
        width: 100%;
        height: 224px;
        object-fit: cover;
        /* border-radius: 20px 20px 0 0; */
        MIN-HEIGHT: 264px;
    }
  }
  


  @media only screen and (max-width: 1200px) {
    .article-image22 img {
        object-fit: cover;
    }
  }
  .article-text p {
    color: #FFFFFF;
  }

  .article-image22, .article-image22 p {
    color: #000 !important;
}


#celestePZone {
    font-family: "Roboto", sans-serif;
    background-color: #fff;
}


.separator-block5 h1 {
    font-size: 34px;
    font-weight: bold;
    background-color: #fff;
    color: #2464F3;
    text-align: center;
    padding: 22px 0 0px 0;
    width: 100%;
    box-sizing: border-box;
    font-family: "Trebuchet MS", sans-serif;
    }

    .textblockfinal {
        width: 100%;
        background-color: #fff;
    }

    .textoftext {
        font-family: "Trebuchet MS", sans-serif;
        width: 80%;
        max-width: 1400px;
        margin: 0 auto;
        padding-top: 15px;
        color: #000;
    }
    .textoftext p strong {
        font-size: 17px;
        line-height: 2;
    }


    .textoftext h4 {
        font-weight: 800;
        font-size: 17px;
        line-height: 2;
        font-family: "Trebuchet MS", sans-serif;
        color: #000;
    }



.space50px {
    height: 50px;
    width: 100%;
}




.countdown-container {
    display: flex;
    background: #1E7A1E;
    padding: 20px;
    border-radius: 10px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

.countdown-box {
    color: white;
    font-size: 40px;
    font-weight: bold;
    width: 80px;
    text-align: center;
}

.separator {
    color: white;
    font-size: 40px;
    font-weight: bold;
    padding: 0 10px;
}

@media (max-width: 600px) {
    .countdown-container {
        padding: 10px;
        gap: 5px;
    }
    .countdown-box {
        font-size: 30px;
        width: 60px;
    }
    .separator {
        font-size: 30px;
        padding: 0 5px;
    }
}

@media (max-width: 400px) {
    .countdown-container {
        flex-direction: column;
        align-items: center;
    }
    .separator {
        display: none;
    }
}

.space20px {
    height: 20px;
    background-color: #ffffff;
}


#diffusiontd .tdtextholder p {
    margin-bottom: 10px;
}

.countdown-container.hidden {
    display: none;
}

#texttdsynnex {
    font-size: 22px;
    line-height: 1.3;
}

.tdvideoholder {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.tdvideoholder .tdholderimg img {
    border-radius: 15px;
    width: 100%;
}


.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    margin-top: 1rem;
    width: 100%;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    cursor: pointer;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 10px;
}


.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 3px;
    margin-top: 0.2rem;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: #0072c3;
    border-color: #0072c3;
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    flex: 1;
    text-align: left;
    font-size: 10px;
    color: #000000;
}

.checkbox-text a {
    color: #0072c3;
    text-decoration: underline;
}

.mentionleg p {
    font-size: 10px !important;
    color: #000000;
    font-family: "Roboto", sans-serif;
}

.tdconfirmation {
    font-family: "Roboto", sans-serif;
}

.text-wrapper p {
    font-family: "Roboto", sans-serif;
    font-size: 10px;
    color: #000000;
    text-align: left;
}