@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root {
    --whiteColor: #FFFFFF; 
    --darkColor: #2C3E50;
    --darkTextColor: #051E50;
    --darkLightColor: #2C3350B2;
    --darkenColor:#253647;
    --neutralLightColor: #F2F2F2;
    --primaryColor: #F7941D;
    --primaryDarkenColor: #D87703;
    --lightenPrimaryColor: #F7941D99;
    --charcoalColor: #4A4A4A;
    --charcoalLightenColor: #4A4A4AB2;
    --lightColor: #CDE6F4;
    --lightDarkenColor: #A4D3EE;
    --accentColor: #084E86;
    --lightenAccentColor: #084E8699;
    --neutralMutedColor: #C5C5C5;
}
.borderPrimary{
    border-color: var(--primaryColor);
}
.borderRadius28{
    border-radius: 28px;
}

.borderRadius16{
    border-radius: 16px !important;
}
.navbar{
    --bs-navbar-padding-y: 0rem !important;
}
p,h2{
    cursor:default;
}
.coverImg{
    height: 500px;
    object-fit: cover;
}
.pointer {
    cursor: pointer;
}
.defaultCursor {
    cursor: default;
}

input.form-control:focus {
outline: none;  /* Removes the default outline */
border-color: none;  /* Custom green border on focus */
box-shadow: none;  /* Green glow around the input */
}
@media (max-width: 991px) {
    .w-sm-100{
        width: 100% !important;
    }
    .w-sm-50{
        width: 50% !important;
    }
    .grid-container-sm{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .w-md-50{
        width: 50% !important;
    }
}

@media (min-width:1200px) {
    .w-lg-25{
        width:25% !important;
    }
    .w-lg-50{
        width: 50% !important;
    }
    .w-lg-75{
        width: 75% !important;
    }
    .w-lg-40 {
        width: 40% !important;
    }
}


.custom-shadow {
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.05);
}
.navbarItem{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--darkLightColor);
    font-size: 12px !important
}

.navbarItem:hover{
    color: var(--primaryColor);
}

.navbar-nav {
    display: flex;
    justify-content: space-between;
    width: 100%; 
}
.textMenuButton{
    color: var(--whiteColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0px !important;
}
.textComment{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0px !important;
}

.neutralMutedTextColor{
    color: var(--neutralMutedColor);
}
.menuImg{
    height: 24px;
    width: 24px;
}

.navMenuItem{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 16px !important;
    white-space: nowrap; 
}
.link-button {
    background: none; /* Remove background */
    border: none; /* Remove border */
    cursor: pointer; /* Pointer cursor on hover */
}

.navMenuItem:hover{
    color: var(--primaryColor);
}

.navMenuLastItem{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    text-align: end;
    font-size: 16px !important
}
.bg-custom {
    background-color: var(--neutralLightColor);
    padding-top: 48px;
    padding-bottom: 6px;
    gap: 48px;
}

.custom-container{
    padding: 10px;
    gap: 24px;
}

.logoFooter{
    width: 272px;
    height: 35px;
}

.outlinedFooterButton{
    border: 2px solid var(--darkColor);
}

.textFooterButton{
    color: var(--darkColor);
    font-family:  'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0px !important;
    line-height: 20.83px;
}

.textFooter{
    color: var(--darkColor);
    font-family:  'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0px !important;
    line-height: 20.83px;
}
.textFooter:hover{
    color: var(--primaryColor);
}

.navTitleFooter{
    color: var(--charcoalColor);
    font-family: Raleway, sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.footer-line {
    border-top: 1px solid var(--darkColor);
    margin-bottom: 10px;
    margin-top: 10px;
}
.copyRightText{
    color: var(--darkColor);
    font-family: Raleway, sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 0px !important;
    white-space: nowrap;
    line-height: 26px;
}

.footerText{
    color: var(--darkColor);
    font-family: Raleway, sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 0px !important;
    white-space: nowrap;
    line-height: 26px;
    cursor: pointer;
}

.footerText:hover{
    color: var(--primaryColor);
}

@media (max-width: 991px) {
    .custom-container{
        width: 292px; 
        align-self: center;
    }
}
.iconImg{
    height: 24px;
    width: 24px;
}
.whiteImgIcon{
    font-size: 18px;
    color: var(--whiteColor);
}

.darkIconImg{
    font-size: 20px;
    color: var(--darkColor);
}

.primaryIconImg{
    font-size: 24px;
    color: var(--primaryColor) !important;
}

.contact{
    height: 50px;
    gap: 25px;
}

.outlinedButton{
    height: 50px;
    border-radius: 28px;
    background: none;
    padding-left: 24px;
    padding-right: 24px;
    border: 2px solid var(--darkColor);
    gap: 6px;
    color: var(--darkColor);
    transition: color 0.3s ease;
}

.outlinedPrimaryButton{
    height: 50px;
    background: none;
     border-radius: 28px;
     padding-left: 24px;
     padding-right: 24px;
     gap: 6px;
     color: none;
     border: 2px solid var(--primaryColor);
     transition: color 0.3s ease;
     transition: border 0.3s ease;
}

.outlinedPrimaryContactButton{
    height: 50px;
    background: none;
     border-radius: 28px;
     padding-left: 9px;
     padding-right: 9px;
     gap: 6px;
     color: none;
     border: 2px solid var(--primaryColor);
     transition: color 0.3s ease;
     transition: border 0.3s ease;
}
.outlinedPrimaryContactButton i{
    font-size: 24px;
    align-content: center;
    color: var(--primaryColor);    
}
.outlinedPrimaryContactButton:hover i{
    color: var(--whiteColor);
}
.outlinedPrimaryButton:hover{
    background-color: var(--primaryColor);
    border: 2px solid var(--primaryColor);
}

.outlinedPrimaryButton:hover .textPrimaryColor{
    color: var(--whiteColor);
}

.outlinedPrimaryButton:hover i{
    color: var(--whiteColor);
}

.outlinedPrimaryButton i{
    font-size: 24px;
    align-content: center;
    color: var(--primaryColor);    
}

.outlinedPrimaryButton:hover .outlinedPrimaryButton i{
    color: var(--whiteColor);
}

.outlinedPrimaryContactButton:hover{
    background-color: var(--primaryColor);
    border: 2px solid var(--primaryColor);
}

.outlinedPrimaryContactButton:hover .textPrimaryColor{
    color: var(--whiteColor);
}
.textButton{
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0px !important;
    line-height: 20.83px;
}

.outlinedButton:hover {
    background: var(--darkColor);
    color: var(--whiteColor);
}

.borderPrimaryColor{
    border: 2px solid var(--primaryColor);
    transition: color 0.3s ease;
}

.borderPrimaryColor:hover .outlinedButton{
    color: var(--primaryColor) ;
}

.borderPrimaryColor:hover .textPrimaryColor{
    color: var(--whiteColor) ;
}


.borderDarkColor{
    border: 2px solid var(--darkColor);
}

.borderDarkColor i{
    font-size: 24px;
    align-content: center;
    color: var(--darkColor);    
}
.borderDarkColor:hover i{
    color: var(--whiteColor);
}

.borderDarkColor:hover .textFooterButton{
    color: var(--whiteColor);
}

.gap-6 {
    gap: 6px !important;
}
.gap-10{
    gap: 10px !important;
}
.gap-12{
    gap: 12px !important;
}
.gap-32 {
    gap: 32px !important;
}

.backgroundPrimaryColor{
    background-color: var(--primaryColor);
    border: none;
    transition: background-color 0.3s ease;
}
.backgroundlightenPrimaryColor{
    background-color: var(--lightenPrimaryColor);
    border: none;
}
.backgroundlightenBlueColor{
    background-color: var(--lightenAccentColor);
    border: none;
}

.contact-hover-container:hover{
    background-color: var(--primaryDarkenColor);
}


.textOutlinedButton{
    color: var(--whiteColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 0px !important;
}

.textPrimaryColor{
    color: var(--primaryColor);
}


.button-container {
    position: relative;
    width: 100%;
    top: 325px;
    right: 5%;
}

.button-right {
    position: fixed;
    z-index: 2000;
    right: 20px;
    top: 500px;
    width: 50px;
    height: 50px;
    padding: 6px;
    gap: 10px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
    cursor: pointer;
}
.button-right2 {
    position: fixed;
    z-index: 2000;
    right: 20px;
    top: 560px;
    width: 50px;
    height: 50px;
    padding: 6px;
    gap: 10px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
}

.button-right:hover {
    background-color: var(--primaryDarkenColor);
}
.button-right2:hover {
    background-color: var(--primaryDarkenColor);
}
.hover-colored-container{
    display: flex;
}
.hover-colored-container:hover .backgroundPrimaryColor {
    background-color:  var(--primaryDarkenColor) !important; 
}
@media (max-width: 576px) {
    .button-container {
        top: 500px;
        right: 0;
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    .button-container {
        top: 380px;
        right: 15%;
    }
}
@media (max-width: 992px) {
    .contact{
        gap: 5px;
    }
    .outlinedButton{
        padding-left: 12px;
        padding-right: 12px;
    }
}
.heroHomePage{
    overflow: hidden !important;
    margin-top: 125px;
    gap: 10px;
}

.heroTitle{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;;
    font-weight: bold;
    font-size: 48px;
    line-height: 56.35px;
}

.heroDescription{
    color: var(--darkTextColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: Regular;
    font-size: 16px;
    line-height: 28px;
}

.showedImg{
    height: auto;
 }
 
.otherImg{
     width: 82.2px;
     height: auto; 
     padding-left: 10px;
}

.phoneDiv{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
    cursor: pointer;
    transition: color 0.3s ease;
    transition: background-color 0.3s ease;
}

.number{
    color: var(--primaryColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20.83px;
    display: inline-block;
    margin-bottom: 0px !important;
    cursor: pointer;
}

.hover-container {
    display: inline-block; 
}

.hover-container:hover .phoneDiv {
    background-color:  var(--primaryDarkenColor); 
}
.hover-container:hover .number {
    color:  var(--primaryDarkenColor); 
}

@media (max-width: 992px) {
    .heroHomePage {
        margin-top: 100px;
    }
}
.blogContainer{
    padding-top: 30px;
}

.titleBlog{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;;
    font-weight: 600;
    font-size: 36px;
    text-align: center;
}

.textBlogButton{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0px !important;
}

.style1Img{
    background-image: url(/_next/static/media/compressed-img1.5e486ac9.svg);
    background-size: cover;
    background-position: center; 
    padding: 32px;
 }

 .blogIconDiv{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--lightColor);
    box-shadow: 0 18.49px 38.52px #00000026;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.blogIconDiv:hover{
    background-color: var(--lightDarkenColor);
}
.style2Img{
    position: relative;
    max-width: 400px;
    height: auto;
    background-image: url(/_next/static/media/compressed-img2.149b9278.png);
    background-size: cover;
    background-position: center; 
    padding: 32px;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); 
    display: flex;
    align-items: center; 
    justify-content: center; 
    color: white; 
    padding: 32px;
}
.imgContent1{
    max-width: 300px;
    height: auto;
    background-color: var(--neutralLightColor);
    padding-top: 32px;
    padding-bottom: 32px;
    gap: 12px;
}

.blogTitle{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: start;
    margin-bottom: 0px !important;
    line-height: 21.13px;
}

.blogWhiteTitle{
    color: var(--whiteColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: start;
    line-height: 21.13px;
}

.blogIconDiv2{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.blogIconDiv2:hover{
    background-color: var(--primaryDarkenColor);
}
.blogDescription{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    align-content: center;
    margin-bottom: 0px !important;
    line-height: 28px;
    -webkit-line-clamp: 4; 
    text-overflow: ellipsis;  /* Add ellipsis (...) after the 2nd line */
}

.blogWhiteDescription{
    color: var(--whiteColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    align-content: center;
    margin-bottom: 0px !important;
    line-height: 28px;
}


@media (max-width: 992px) {
    .style2Img{
        max-width: 100%;
        height: 400px;
    }
}
.ctaContainer{
    background-color: #141B34;
    padding-right: 40px;
    padding-left: 40px;
    gap: 10px;
}

.ctaSubTitle{
    width: 70%;
    color: var(--whiteColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 50px;
    text-align: center !important ;
    line-height: 62.5px;
}

@media (max-width: 992px) {
    .ctaContainer{
        padding-right: 32px;
        padding-left: 32px;
    }

}
.leftSide{
    width: 50%;
    background-color: var(--neutralLightColor);
    padding: 32px;
    gap: 16px;
}

.titleDiv{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.titlePrice{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 32.87px;
}
.subTitle{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0 !important;
    line-height: 21.13px;
}

.date{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 0 !important;
    line-height: 24px;
}

.list-title {
    text-align: center; 
    margin-bottom: 10px;
}

ul.separator-list {
    list-style: none; 
    padding: 0; 
    position: relative;
}

ul.separator-list li {
    position: relative;
    padding: 10px 0; 
}

ul.separator-list li:not(:last-child)::after {
    content: ""; 
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px; 
    background: #ccc;
}


.category{
    width: 180px;
    height: 180px;
    background-color: var(--neutralLightColor);
    border-radius: 16px;
    gap: 10px;
    padding: 20px;
    transition: color 0.3s;
}
.categoryIconDiv i{
    font-size: 24px;
    align-content: center;
    color: var(--whiteColor);    
}
.category:hover .categoryIconDiv i{
    color: var(--primaryColor);
}

.categoryIconDiv{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
}


.category:hover{
    background-color: var(--primaryColor);
}
.category:hover .categoryIconDiv{
    background-color: var(--whiteColor);
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap:24px;
    gap:24px;
}
.grid-item {
    border: none;
    font-size: 30px;
    transition: color 0.3s;
}

.categoryTitle{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: left;
    width: 80%;
}

.reviewsContainer{
    background-color: var(--neutralLightColor);
    margin-top: 48px;
    padding-right: 24px;
    padding-left: 24px;
    gap: 10px;
}

.reviewsLeftSide{
    background-color: var(--neutralLightColor);
    padding: 32px;
    gap: 16px;
}

.titleReviews{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 62.5px;
}

.ratingText{
    color: var(--charcoalColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 0 !important;
}

.satisfactionText{
    color: var(--charcoalColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 0 !important;
}

.starImg{
    height: 26px;
    width: 25.87px;
}

.reviewsStarImg{
    height: 24px;
    width: 24px;
}

.reviewsRightSide{
    width: 100%;
    background-color: var(--neutralLightColor);
    padding: 32px;
    gap: 16px;
}

.review{
    background-color: white;
    width: 49%;
    padding: 24px;
    gap: 10px;
}


.reviewDescription{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0 !important;
    line-height: 30px;
}

.googleImg{
    height: 37px;
    width: 37x;
    margin-right: 10px;
}

.reviewName{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0px !important;
}

.reviewDate{
    color: var(--charcoalColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 0px !important;
}
.videoContainer {
    height: auto;
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3); 
}

.video {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block; 
    z-index: -1;
}

.content {
    position: relative;
    z-index: 1; 
    color: var(--whiteColor); 
    text-align: center;
    padding: 48px;
    gap:32px;
    width: 75%;
}

.videoDescriptionText{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: var(--whiteColor);
    font-size: 48px;
    text-align: left;
}


@media (max-width: 576px) {
    .content {
        padding: 25px;
    }
}
.featuresContainer{
    gap: 10px;
}
.featuresTitle{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 28px;
    align-self: center;
}
.featureImg{
    margin: auto;
    display: block;
}
.feature{
    max-width: 200px !important;
    height: 124px;
    background-color: var(--neutralLightColor);
    margin-bottom: 12px;
    border-radius: 16px;
}

.featureItem{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    align-self: center;
    margin-bottom: 0 !important;
    width: 175px;
    line-height: 28px;
}
.cardImg{
    width: 43px;
    height: 43px;
    margin-left: 10px;
    border: 2px solid var(--whiteColor);;
    border-radius: 1000px;
   
}
.cardItem{
    width: 70%;
    padding: 10px;
}

@media (max-width: 1399px) {
    .feature{
        max-width: 180px !important;
    }
    .featuresTitle{
        align-self:flex-start;
    }
}

@media (max-width: 991px) {
    .feature{
        max-width: 48% !important;
    }
}
.advantagesTitle{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;;
    font-weight: 600;
    font-size: 28px;
    line-height: 28px;
}

.advantagesDescription{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
}

.advantageItemsText{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding-left: 10px;
}

.checkedDiv{
    width: 33.33px;
    height: 33.33px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
    cursor: pointer;
    transition: color 0.3s ease;
    transition: background-color 0.3s ease;
}

.checkedImg{
    width: 40px;
    height: 40px;
}
.aboutTitle{
    color: var(--darkColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 28px;
}

.aboutDescription{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}

.aboutUsIconDiv{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
}

.overlayModal {
    width: 700px;
    position: fixed !important;
    height: -moz-fit-content;
    height: fit-content;
    top: 115px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; 
    padding: 0;
    z-index: 3000;
    background-color: var(--whiteColor);
    box-shadow: 0 18.49px 38.52px #00000026;
}
.overlayMenuModal{
    width: 700px;
    position: fixed !important;
    height: -moz-fit-content;
    height: fit-content;
    top: 50px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; 
    padding: 0;
    z-index: 3000;
    background-color: var(--whiteColor);
    box-shadow: 0 18.49px 38.52px #00000026;
}
.modal {
    z-index: 1001;
  }

.titleModal{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 20px !important;
    line-height: 23.48px;
}

.serviceModal{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    text-align: left;
    font-size: 16px !important;
    line-height: 26px;
}

.serviceModal:hover{
    color: var(--primaryColor);
}

.itemMenuModal{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    text-align: left;
    font-size: 14px !important;
    line-height: 16.44px;
}

.itemMenuPrimaryModal{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--primaryColor);
    text-align: left;
    font-size: 14px !important;
    line-height: 16.44px;
}
.serviceModal:hover{
    color: var(--primaryColor);
}


.closeButton {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.content {
    margin-top: 20px; /* Space between close button and content */
}
.rounded-background {
    background-size: cover; /* Cover the entire container */
    background-position: center; /* Center the image */
    border-radius: 28px; /* Make the div circular */
    width: 60%; /* Fixed width */
    padding: 12px;
}   
.blogIconDiv2{
    width: 50px;
    height: 50px;
    margin-left: 10px;
    border-radius: 25px;
    background-color: var(--primaryColor);
    box-shadow: 0 18.49px 38.52px #00000026;
    cursor: pointer;
}
.blogIconDiv2:hover{
    background-color: var(--primaryDarkenColor);
}
.blogDarkTitle{
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 18px;
    width: 70%;
}
.blogTextnotHovered{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--whiteColor);
    font-size: 16px;
    margin-bottom: 0px !important;
    align-content: center;
}

.blogDarkTextnotHovered{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--darkColor);
    font-size: 16px;
    margin-bottom: 0px !important;
    align-content: center;
}
.blogText{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--whiteColor);
    font-size: 16px;
    margin-bottom: 0px !important;
    align-content: center;
    white-space: nowrap;
}

.blogText:hover{
    color: var(--primaryColor);
}
.blogDarkTextNotHovered{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--darkColor);
    font-size: 16px;
    margin-bottom: 0px !important;
    align-content: center;
}
.blogDarkText{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--darkColor);
    font-size: 16px;
    margin-bottom: 0px !important;
    align-content: center;
    text-align: left;
}

.blogDarkText:hover{
    color: var(--primaryColor);
}
.imgContent1{
    max-width: 300px;
    height: auto;
    background-color: var(--neutralLightColor);
    border-radius: 28px;
    padding-top: 32px;
    padding-bottom: 32px;
}

.blogTitle{
    color: var(--whiteColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: start;
    align-self: flex-start;
    margin-bottom: 0 !important;
}

.bannerBlogTitle{
    color: var(--whiteColor);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 56.35px;
    text-align: start;
    margin-bottom: 0 !important;
}
.blogDescription{
    color: var(--darkColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    align-content: center;
    margin-bottom: 0px !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;  /* Add ellipsis (...) after the 2nd line */
}
.blogImg{
    height: 24px;
    width: 24px;
}
.blogIconDiv{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--lightColor);
    box-shadow: 0 18.49px 38.52px #00000026;
    cursor: pointer;
}
.blogIconDiv:hover{
    background-color: var(--lightDarkenColor);
}
.searchBar{
    height: 56px;
    background-color: var(--neutralLightColor);
    border-radius: 28px;
    align-items: center;
    gap: 16px;
}

.searchText{
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--primaryColor);
    font-size: 14px;
    margin-bottom: 0px !important;
}

.categories{
    background-color: var(--neutralLightColor);
    gap: 16px;
}
.categories .form-control {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

.categories input:focus {
    border: none !important;
    outline: none !important;
}

.categories .form-control .custom-border-none:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important; /* Removes the focus outline shadow (optional) */
  }

 input:focus {
    border: none !important;
}
.linkedArticle{
    background-color: var(--lightColor);
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 16px;
}
.accentButton{
    height: 35px;
    width: 63px;
    border-radius: 28px;
    background-color: var(--accentColor);
    border: none;
    padding-left: 16px;
    padding-right: 16px;
    gap: 6px;
    transition: background-color 0.3s ease;
}
.accentButton:hover{
    background-color: var(--primaryColor);
}
.accentLargeButton{
    height: 50px;
    width: 182px;
    border-radius: 28px;
    background-color: var(--accentColor);
    border: none;
    padding-left: 16px;
    padding-right: 16px;
    gap: 6px;
    transition: background-color 0.3s ease;
}

.accentLargeButton:hover{
    background-color: var(--darkenColor);
}
.textLinkedBtn{
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--darkColor);
    font-size: 14px;
    line-height: 18.23px;
    margin-bottom: 0px !important;
}

.textAccentButton{
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    color: var(--whiteColor);
    font-size: 16px;
    line-height: 20.83px;
    margin-bottom: 0px !important;
}

.categoryText{
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 24px;
    margin-bottom: 0px !important;
}

.sidebarText{
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 16px;
    line-height: 18.78px;
    margin-bottom: 0px !important;
}

.sommaireText{
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    color: var(--darkColor);
    font-size: 14px;
    line-height: 18.23px;
    align-content: center;
    margin-bottom: 0px !important;
}
.custom-padding {
    padding-top: 27px;
    padding-bottom: 27px;
    padding-left: 32px;
    padding-right: 32px;
}
.number{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--primaryColor);
    font-size: 16px;
    margin-bottom: 0px !important;
}
.fixedDiv{
    position: fixed;
    z-index: 1000;
    height: 352px;
}

.scrollableDiv {
    height: 300px;
    padding-right: 24px;
    padding-left: 24px;
    gap:12px;
}

.scrollableDiv::-webkit-scrollbar {
    width: 8px !important;
  }

.link{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--darkColor);
    font-size: 16px;
    line-height: 28px;
    transition: color 0.3s ease;
}

.link:hover{
    color: var(--primaryColor);
}


.sticky-top {
/*     position: -webkit-sticky;
 */ position: -webkit-sticky; position: sticky;
    top: 130px;
    z-index: 1020;
}
 ul {
    padding-left: 0 !important;
 }
.style1ImgBlock{
    border-radius: 28px;
    background-size: cover;
    background-position: center;
    padding: 32px;
    overflow: hidden
}

.ctaText{
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 36px;
    text-align: center;
    margin-bottom: 0px !important;
    line-height: 45px;
}
.darkColoredText{
    color: var(--darkColor);
}

.darkColoredTarifText{
    color: var(--charcoalLightenColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18.23px;
}

.primaryColoredTarifText{
    color: var(--primaryColor);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18.23px;
}
.primaryColoredText{
    color: var(--primaryColor);
}
.textService{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--charcoalColor);
    font-size: 16px;
    line-height: 28px;
}
.scrollableContainer{
    /* overflow-y: auto; */
      height: auto;
        padding-right: 24px;
        padding-left: 24px;
        gap:12px;
}
.contentService{
    margin-left: 40%;
    /*w-sm-100 w-lg-40*/
}
.scrollableContainer::-webkit-scrollbar {
    width: 8px !important;
  }
.titleService{
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 24px;
    line-height: 28.18px;
}
.authorText{
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    color: var(--darkColor);
    font-size: 16px;
    line-height: 28px;
}
.dateText{
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--neutralMutedColor);
    font-size: 16px;
    line-height: 28px;
}
.lgTitle{
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    color: var(--darkColor);
    font-size: 28px;
    line-height: 32.87px;
}

.custom-table{
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px -1px 0px 0px #11111114 inset;
}

.custom-thead-dark{
    --bs-table-bg: var(--lightColor) !important;
}

.custom-row{
    --bs-table-bg: var(--neutralLightColor);
}

table{
    border-radius: 16px !important;
}
.cell-text{
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--darkColor) !important;
    font-size: 14px;
    line-height: 18.32px;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    cursor: default;
}
.questionText{
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    color: var(--darkColor) !important;
    font-size: 18px;
    line-height: 21.13px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.roundedIconDiv{
    width: 24px;
    height: 24px;
    border-radius: 28px;
    align-items: center;
    justify-content: center;
}

.smallIcon{
    font-size: 15px !important;
}
.th-end{
    text-align: end !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.title-table{
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    color: var(--darkColor) !important;
    font-size: 16px;
    line-height: 28px;
    align-content: center;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    cursor: default;
}
.td-end{
    text-align: end;
}

.form-control {
    background-color: var(--neutralLightColor) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
}

@media (max-width: 576px) {
    .contentService{
        margin-left: 0;
    }
}

@media (max-width: 960px) {
    .contentService{
        margin-left: 40%;
    }
}


.bg-image {
    position: relative;
    background-size: cover;
    background-position: center; 
    height: 400px; 
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 32px;
    margin-top: 115px;
    overflow: hidden;
}

.no-underline {
    text-decoration: none;
  }

.overlay{
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
    color: white; 
    padding: 32px;
    gap:16px;
    background: linear-gradient(90.08deg, rgba(0, 0, 0, 0.525) 19.04%, rgba(0, 0, 0, 0) 79.46%) !important;
}

@media (max-width: 992px) {
    .bg-image {
        margin-top: 70px;
    }
}
@media (max-width: 992px) {
    .bg-image {
        margin-top: 60px;
    }
}

@media (max-width: 576px) {
    .bg-image {
        margin-top: 50px;
    }
}