@font-face {
    font-family: calibri;
    src: url(../fonts/calibri-font-family/CalibreRegular.otf);
  }

  @font-face {
    font-family: calibri-bold;
    src: url(../fonts/calibri-font-family/CalibreBold.otf);
  }

  @font-face {
    font-family: omar;
    src: url(../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf);
  }

  @font-face {
    font-family: omar-bold;
    src: url(../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Bold.ttf);
  }

body {
    direction: ltr; /* Default for English */
}

html[lang="ar"]  body{
    direction: rtl; /* For Arabic */
    text-align: right;
    font-family: omar;

    .page-locat  img , .career-join .d-flex img , .ContactUs .d-flex img{
        transform: rotate(180deg);
    }
	
	.carousel-item {
    .hr {
        margin-top: 1rem;
        height: 2px;
    }
}

    .career-join .d-flex .orange-hover  img  {
        transform: rotate(0deg);

    }

    .navbar .main-btn {
        padding: 12px 20px 18px !important;
    }

    .ml-auto {
        margin-left:unset !important;
        margin-right:auto !important;
    }

    .navbar .main-btn {
        font-family: omar !important;
    }

    .section-title  {
        h4::after {
            bottom: -8px;
            right: 0;
            height: 3px;
            width: 50px;
        }
    }

   .contact-us {
        h4::after {
            right: 200px;
        }
    }

    .portfolio-text {
        padding-left: 0;
        padding-right: 8px;
    }

    .timeline-card:before {
        content: '';
        position: absolute;
        left: -6px;
        margin-right: 0;
        transform: rotate(180deg);
        right: unset;
    }

    .timeline-item:nth-child(odd) .timeline-card:before {
        transform: rotate(0deg);

    }

    @media (min-width: 1200px) {
        .timeline-item:nth-child(even) .timeline-card {
            margin-right: 70%;
        }
    }

    .Cooperation, .Simplicity {
        left: unset;
        right: -24px;
    }

    .Equity {
        top: 50%;
        left: -5px;
        right: unset;
    }

    input , textarea , select {
        text-align: right;
    }

    .dir-ltr {
        direction: ltr;
    }

    .dropdown-menu  li a  {
        text-align: right;
        direction: rtl;
    }

    .dropdown-toggle::after {
        margin-right: .255em;
        margin-left: 0;
    }

    .menu-image-title-before.menu-image-not-hovered img, .menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper, .menu-image-title-after.menu-image-title {
        padding-right: 5px;
        padding-left: 0;
    }

    @media (min-width: 1200px) {
        .about .img-container2 .highlighted-box:first-of-type {
            left: 0;
        }
    }

    .slick-dotted.slick-slider {
        direction: ltr;
    }

    .life .highlighted-box.Knowledge  , .Commitment{
        left: unset;
        right: 0;
    }

    .Trust , .Team{
        right: unset;
        left: 0;
    }

    .theme-container {
        padding: 0 80px !important;
    }

    .hero {
        .carousel-indicators {
            left: unset;
            bottom: 0;
            z-index: 999;
            right: 3rem;
			@media (max-width: 768px) {
            right: 5rem;
			}
        }
    }

    .value-box img, .highlighted-box img {
        margin-right: 0px;
        margin-left: 8px;
    }


    .theme-container {
        @media (max-width: 1200px) {
            padding: 0 15px  !important;
        }
    }

    @media (max-width: 992px) {
    
        .navbar-toggler {
            position: absolute;
            right: unset !important;
            left: 0;
        }
    }

    .regular-parag, .input-box input::placeholder {
        margin-right: 0;
        margin-left: 2rem;
    }

    footer .copy-right.text-center {
        direction: ltr;
    }
	
	h4::after {
content: " ";
    height: 3px;
    width: 100px;
    background-color: var(--secondary-color);
    display: inline-block;
    position: absolute;
    bottom: -7px;
    right: 0;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
	
	.badge-work span::before , .badge-work span::after {
		display:none;
	}
    

}


html {
    font-size: 16px;
}

body {
    font-family: calibri;
    background-color: var(--bg-color);
    --bg-color: #ffffff;
    --main-color: rgba(0, 167, 203, 1);
    --main-color-opacity: #7AC6CB;

    --light-main-color: #E5F5F2;
    --btns-colr: rgba(0, 167, 203, 1);
    --text-color: #797C7F;
    --title-color: #222733;
    --secondary-color: #162950;
    --tab-bg: #D2D3D5;

    --alt-bg-color: #DEF1F2;
    --light-orange: #ffbe81;
    --shadow-1: 0 0 24px rgba(0, 153, 163, 0.41);
    --shadow-2: 0 0 40px rgba(14, 85, 108, 0.32);
    --shadow-3: 0 0 40px rgba(14, 85, 108, 0.16);
    --shadow-4: 0 0 16px rgba(14, 85, 108, 0.8);
    overflow-x: hidden !important;
    /* background: linear-gradient(-45deg, #1a1818, #2d2d2d, #262626, #080808);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite; */
}

pre.wp-block-code {
    display: none;
}

p,
a,
ul,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.main-container {
    width: 100%;
    overflow-x: hidden;
}

.container {
    min-width: 91%;
}

/* Global Elements & Classes */
h1 {
    font-size: 3.5rem;
    color: var(--secondary-color);
    line-height: 76.27px;
}

h2 {
    font-size: 3rem;
    color: var(--title-color);
    margin-top: 27.5px;
    margin-top: 16px;
}

h3 {
    font-size: 2.5rem;
    color: var(--title-color);
}

h4 {
    position: relative;
    font-size: 1.5rem;
    color: var(--btns-colr);
    width: fit-content;

}

/* .section-header h2 {
    font-size: 2rem;
} */

.why .value-box h3 {
    font-size: 24px;
}

.section-header h4 {
    margin: auto;
}

h4::after {
    content: " ";
    height: 6px;
    width: 193px;
    background-color: var(--secondary-color);
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: -201px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.section-header h4::before {
    content: " ";
    height: 6px;
    width: 193px;
    background-color: var(--secondary-color);
    display: inline-block;
    position: absolute;
    left: -201px;
    bottom: 10px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

h5 {
    font-size: 1.375rem;
    margin-bottom: 0;
}

h6,
label {
    font-size: 1.25rem;
}

.card {
    border: none;
    border-radius: 1rem;
}

/* .card >div:first-child{
   height: 300px;
} */
.card>div>img {
    height: 100%;
}

.card .bg-color {
    height: 100%;
}

.main-btn,
.branch-btn,
.branch-main-btn {
    padding: 24px 32px;

    border-radius: 8px;
    font-size: 1.375rem;
    width: fit-content;
    display: block;
    transition: all 0.5s ease-in-out;
}

.main-btn {
    color: var(--bg-color) !important;
    background-color: var(--btns-colr);
    /* -webkit-box-shadow: inset 0px 4px 4px #CBCE8F;
    -moz-box-shadow:    inset 0px 4px 4px #CBCE8F;
    box-shadow:         inset 0px 4px 4px #CBCE8F; */
}

.main-btn.mos-btn {
    background-color: var(--bg-color);
    width: -webkit-fill-available !important;
    color: var(--btns-colr) !important;
    text-align: center;
}

.main-btn:hover,
.branch-main-btn:hover {
    color: var(--bg-color) !important;
    background-color: var(--main-color-opacity);
}

.branch-btn {
    color: var(--bg-color) !important;
    background-color: var(--secondary-color);
    text-decoration: none;
}

a:hover {
    color: aliceblue;
    text-decoration: none;
}

.branch-main-btn {
    color: var(--bg-color);
    background-color: var(--main-color);
}

a {
    text-decoration: none;
}


.align-items-baseline {
    align-items: baseline;
}
.hero .regular-parag,
.hero .input-box input::placeholder {
    font-size: 1.375rem;
    color: var(--text-color);
    line-height: 29.96px;
    margin-left: -6rem;
    width: 69%;


}

.regular-parag,
.input-box input::placeholder {
    font-size: 1.375rem;
    color: var(--text-color);
    line-height: 29.96px;
    margin-right: 2rem;

}
.hero .regular-parag
{
    font-size: 1rem !important;


}
small {
    font-size: 12px;
    color: #a3a3a3;
}
/* Hero Section */
.circle-left {
    top: 6.25rem;
    left: 0px;

    animation: moverUpDown 2s infinite alternate;
}

.hero.home {
    padding-bottom: 80px;
    /* background: linear-gradient(90deg, #FFFFFF 0%, #EFEFEF 100%); */
    background-image: url(../images/Header-s.svg);
    background-size: cover;
    height: 113vh;
}

.hero-socials {
    right: 6%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    z-index: 9999999;
}

.hero-text-container {
    position: absolute;
}

.hero-text-container .vh-100 {
    padding-bottom: 102px;
    margin-left: -43px;
}



.navbar-nav .nav-item a {
    font-size: 1.125rem;
    color: var(--title-color);
}

.navbar-nav .nav-item a.active {
    color: var(--bg-color);
}

.navbar-nav .nav-item a:hover {
    color: var(--bg-color);
    /* background-color: var(--main-color-opacity); */
}

ul.dropdown-menu {
    box-shadow: 0px 0px 24px 0px rgba(0, 153, 163, 0.24);
	position:relative;
}

ul.dropdown-menu:before {
    content: " ";
    position: absolute;
    left: 20px;
    top: -12px;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid white;
}

.dropdown-menu.show li .dropdown-item:hover,
.dropdown-item:active {
    color:  var(--main-color-opacity);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: unset;
}

.nav-item .nav-btn {
    padding: 16px 32px;
    border-radius: 8px;
}

/* .nav-item .nav-btn.light{
    background-color: var(--btns-colr);
    color: var(--main-color) !important;
} */
/* .nav-item .nav-btn.light:hover{
    background-color: var(--main-color-opacity);
    color: var(--bg-color) !important;
} */
.nav-item .nav-btn.dark {
    color: var(--bg-color) !important;
    background-color: var(--main-color);
}

.nav-link {
    padding: 16px 0;
}

p span {
}

.imgs-container {
    max-width: 937px;
    width: 65vw;
}

.hero-img {
    top: -40px;
    left: -32px;
    z-index: 10;
}

.Asset {
    z-index: 10;
    right: 0;
    bottom: -60px;
}

ul.dropdown-menu {
    border: none !important;
    border-radius: 16px !important;
    /* padding:16px 16px 8px 0px !important */
}

/* ul.dropdown-menu:before {
    content: '';
   
   
    margin-right: -7px;
    
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: 40px solid white;
} */
.Rocket {
    z-index: 10;
    left: -150px;
    bottom: -70px;
    animation: up-down 5s ease-in-out infinite;
}

@keyframes up-down {
    0% {
        left: -150px;
        bottom: -70px;
    }

    50% {
        transform: translate(15px, 100px);
    }

    100% {
        left: -150px;
        bottom: -70px;
    }
}

.Vector2 {
    bottom: 50%;
    right: 20%;
}

.Vector2 svg path {
    /* -webkit-animation:colorchange 20s infinite; */
    animation: colorchange 8s ease-in infinite;
}

.Vector3 {
    top: 56%;
    right: 12%;
}

.Vector4 {
    right: 24%;
    bottom: 25%;

}

.Vector4 svg path {

    animation: colorchange2 8s ease-in infinite;
}

.Vector5 {
    right: 32%;
    bottom: 34%;
}

.Vector5 path {
    fill: red;


}
.highlighted-box:hover .svg-animat path{
    fill: #0E556C;
    transition: 0.4s linear;
}

.Vector6 {
    left: 90%;
    top: 23%;

}

.Vector6 svg path {
    animation: colorchange2 8s ease-in infinite;


}

.Vector7 {
    left: 94%;
    top: 16%;

}

.Vector8 {
    left: 95%;
    top: 28%;
    animation: colorchange 8s ease-in infinite;

}

.Vector8 svg path {

    animation: colorchange 8s ease-in infinite;

}

.Vectorbtn {
    right: 80%;
    bottom: 27%;
}

.card.filter .bg-color {
    height: 430px;
}

.blog.articles .card>div>img {
    height: unset !important;
}

.Group {
    left: 28%;
    bottom: 80px;
}

/* .hero .regular-parag{
    margin-left:-3rem ; 
   } */
.slick-list {
    padding: 0px 20px !important;
}

/* .Testimonials .slick-slide {
    width: 519px !important;
} */
/* .Testimonials .slick-track{
    transform: translate3d(-1087px, 0px, 0px) !important;
} */
.Testimonials .slick-slide>div {
    margin: 3rem 1rem;
}


/* About Section */
.about-box span {
    background-color: aqua;
    width: 60px;
    height: 1px;
    transition: 0.5s all ease-in-out;
}

.about-box:hover span {
    width: 180px;
    color: black;
}

.about .about-circles {
    right: 0;
}

.about .img-container {
    border-radius: 1rem;
    z-index: 10;
    width: fit-content;
}

.img-container img {
    border-radius: 16px;
}

.progr-box .img-container img {
    border-radius: unset;
}

.about .highlighted-box h6 {
    color: var(--main-color);
}

.highlighted-box {
    position: absolute;
    border-radius: 8px;
    padding: 16px 24px;
    background-color: #fff;
    box-shadow: var(--shadow-1);
    max-width: 310px;
    /* height: 56px; */
    /* display: flex !important; */
    align-items: center;
    z-index: 99;
}

.highlighted-box img {
    transform: scale(1);
    color: var(--secondary-color);
    transition:  2s ease-in-out !important;
}

.highlighted-box h6 {
    transform: scale(1);

}

/* .highlighted-box:hover{
    transform: scale(1.2);
    transition: 0.4s linear;

} */

.highlighted-box:hover div svg {
}
.highlighted-box div svg{
    transition: all 2s ease-in-out;
}
.highlighted-box:hover  div svg{
    transform: scale(1.3);

    color: var(--secondary-color);
    margin-top: 8px;
    margin-right: 8px;
    transition: 0.6s linear;

    
}

.highlighted-box.hight-mission {
    bottom: 33px;
    left: 268px;

}

.highlighted-box:hover h6{
    color: #00A7CB;
}
.highlighted-box:hover{
    transform: scale(1.1);
    transition: 0.4s linear;
   
}
.img-container.orange-hover{
    border-radius: 1rem ;
}
.orange-hover .highlighted-box:hover h6{
    color: #00A7CB;
}
.high-line{
    background-color: var(--main-color);
    height: 1px;
    width: 33%;
    border-radius: 0 50px 50px 0;
    transition: all 2s ease-in-out;
}
.highlighted-box:hover .high-line{
    width: 100%;
}
/* .highlighted-box .position-relative{
    width: fit-content;
    transition: 2s ease-in-out;
}

.highlighted-box:hover .position-relative {
    width: auto;
        transition: 2s ease-in-out;
} */
/* .highlighted-box:hover .position-relative span{
    background-color: var(--secondary-color);
        transition: 2s ease-in-out;
} */
.highlighted-box p{

    color: var(--title-color);
    margin-left: 8px;
    font-size: 1.125rem;
}

/* Why Section */
/* .why .value-box{

    transition: all 0.5s ease-in-out;
} */

.value-box{
    margin-top: 1rem;
}

.why .value-box h3 {
    transform: scale(1);
}

.why .value-box:hover h3{
    font-size: 2rem;
    transition: 0.4s linear;
}

/* About-History */
.about-icon {
    transform: scale(1);
}

.about-icon:hover {
    transform: scale(1.3);
    transition: 0.4s linear;
    margin-bottom: 28px;
}

/* Service Section */
.services {
    background-image: url(../images/Rectangle\ 64.svg);
    background-size: cover;
    background-color: #F9F9F9;
}

.history-timeline {
    background-image: url(http://ssis.sa/wp-content/uploads/2025/02/Blue-BG.png);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}
}

.services .main-srv,
.cont-form {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-1);
}

.main-srv h3 {
    margin-bottom: 16px;
}

.main-srv li:not(:last-child) {
    margin-bottom: 26.5px;
}

.srv-box {
    border-radius: 16px;
    padding: 64px 0;
    cursor: pointer;
    box-shadow: var(--shadow-3);
    transition: all 0.5s ease-in-out;
}

.srv-box:hover {
    background-color: var(--main-color);
    color: #fff;
    /* margin-bottom: 2rem; */
}

.srv-box .img-container {
    padding: 16px;
    background: var(--main-color);
    width: fit-content;
    margin: auto;
}

.srv-box .img-container img {
    border-radius: unset;
}

.srv-box:not(.active) {
    background-color: #fff;

}

.srv-box.active {
    background-color: var(--main-color);
    color: #fff;

}

.srv-box.active .img-container {
    background-color: unset;
    transform: scale(1.8);
    margin-bottom: 1.9rem;

}

.srv-box.active .img-cont {
    background-color: unset;
    margin-bottom: 1.9rem;

}

.srv-box .img-cont img {
    transition: transform 0.3s linear;
}

.srv-box.active .img-cont img {
    transform: scale(1.8);
}

.srv-box h5 {
    margin-top: 24px;
}

.srv-box:not(.active) h5 {
    color: var(--text-color);
}

.srv-box:not(.active) h5 {
    color: var(--main-color);
}

/* .srv-box:not(.active):hover{
    background-color: var(--light-orange);
    color: #fff;
 
} */
.Cooperationhover h6{
    color: var(--btns-colr);
    }


    /* Progress Section */
.progr-box {


    padding: 41.5px 0;
    min-width: 50% !important;
    border: 1px solid var(--tab-bg);
    margin: auto;
}

.progr-box.projects {
    border-top-left-radius: 16px;
}

.progr-box.clients {
    border-top-right-radius: 16px;
}

.progr-box.partners {
    border-bottom-left-radius: 16px;
}

.progr-box.retention {
    border-bottom-right-radius: 16px;
}

.progr-box .img-container {
    width: 64px;
    height: 64px;
    background-color: var(--btns-colr);
}

/* Portfolio Section */
.portf-circles {
    right: 0;
    top: 20%;
}

.portf-gallery {
    overflow-x: scroll;
    overflow-y: hidden;
    flex-wrap: nowrap;


}

.portf-gallery::-webkit-scrollbar {
    display: none;
}

.portf-gallery div {
    padding: 8px 32px;
    font-size: 1.25rem;
    transition: 0.3s all ease-in-out;
    border-radius: 50px;
    cursor: pointer;
}

.portf-gallery div:first-child {
    background: var(--btns-colr);
    color: var(--main-color);
    -webkit-box-shadow: inset 0px 4px 4px #CBCE8F;
    -moz-box-shadow: inset 0px 4px 4px #CBCE8F;
    box-shadow: inset 0px 4px 4px #CBCE8F;
}

.portf-gallery div {
    background-color: var(--tab-bg);
}

body>section.portfolio>div>div.row>div.filter>div:nth-child(1)>div {
    background-color: var(--alt-bg-color);
    /* border-top-right-radius: 16px;
    border-bottom-right-radius: 16px; */
    border-radius: 16px;
}

.portfolio .img-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--light-main-color);
}

.img-container .img1,
.img-container .img2 {
    width: auto;
}

/* Partners Section */
.slider .slider-content.appear {
    display: block;
}

.slider .slider-content.none {
    display: none;
}

.slick-dots li button {
    display: inline-flex;
    height: 8px;
    width: 24px;
    border-radius: 16px;
}

.slick-dots li:not(.slick-active) button {
    background-color: var(--title-color);
}

.slick-dots li.slick-active button {
    background-color: var(--main-color);
}

.slick-dots li.slick-active button:before {
    display: none;
}

.slick-dots li button:before {
    display: none;
}

.slider .img-slide:hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s linear;
    object-position: center;
    transform: scale(1.5);
}

/* Testimonial Section */
.testimonial {
    background-color: #F9F9F9;

}

.slider-indicators {
    top: 0;
    right: 0;
}

.test-box {
    background-color: #fff;
    padding: 24px;
    border-radius: 16px;
    /* max-width: 519px;
    min-width:519px; */
}

.transf {
    transform: translateX(-519px);
}

.transf-bk {
    transform: translateX(519px);
}

.test-box p {
    font-size: 1.375rem;
    color: var(--title-color);
}

.person img {
    border-radius: 50%;
}

.person span {
    font-size: 1.125rem;
    line-height: 24.52px;
}

.person-detl h6 {
    margin-bottom: 4px;
}

/*Life Section */
/* .life .img-container {
    border-radius: 1rem;
} */
.value-boxs {
    gap: 59px;
    padding-right: 50px;
}

.value-box img,
.highlighted-box img {
    margin-right: 8px;
}
.highlighted-box:hover.value-box img,
.highlighted-box:hover.highlighted-box img {
    transform: scale(1.3);
    transition: 0.6s linear;
}

.life .img-container {
    max-width: 302px;
    margin-bottom: 24px;
    border-radius: 1rem;
}

.life .highlighted-box,
.join .highlighted-box {
    max-width: fit-content;
    max-height: fit-content;
}

.life .highlighted-box.Knowledge {
    top: 2rem;
    left: -2rem;
    /* height: 56px; */
}

section.news.py-80 .card div img.card-img-top,
.explore-news img.card-img-top {
    height: 317px;
}

.life .highlighted-box img,
.join .highlighted-box img {
    width: 24px;
}

.Trust {
    top: 4rem;
    right: -1rem;
}

.Commitment {
    bottom: 0;
    left: -2rem;
}

.Team {
    bottom: 0;
    right: -1rem;
}

/*Join Section */
/* .join .col-lg-5{
    overflow: hidden;
} */
.join .img-container {
    display: block;
    margin: auto;
    /* overflow: hidden; */

}

.join .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s linear;
    object-position: center;
    transform: scale(1);
}

.scaled-image {
    overflow: hidden;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}

.scaled-image img {
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
    -webkit-transition: transform 1s ease-in-out;
    -moz-transition: transform 1s ease-in-out;
    -ms-transition: transform 1s ease-in-out;
    -o-transition: transform 1s ease-in-out;
}

.scaled-image:hover img {
    transform: scale(1.16);
    -webkit-transform: scale(1.16);
    -moz-transform: scale(1.16);
    -ms-transform: scale(1.16);
    -o-transform: scale(1.16);
    transform-origin: left;
    border-radius: 16px !important;
    -webkit-border-radius: 16px !important;
    -moz-border-radius: 16px !important;
    -ms-border-radius: 16px !important;
    -o-border-radius: 16px !important;
}
.scaled-image.right:hover img {
    transform: scale(1.16);
    -webkit-transform: scale(1.16);
    -moz-transform: scale(1.16);
    -ms-transform: scale(1.16);
    -o-transform: scale(1.16);
    transform-origin: right;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.label{
    cursor: pointer;
}
.label img,
.label h6,
.label.Team ,
.label.Equity{
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}
.orange.label
{
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.label:hover img {
    width: 32px;
    height: 32px;
}

.label.Team:hover {
    right: -48px;
}
.label.Equity:hover {
    right: -32px;
}
.label.Team:hover {
    right: -48px;
}
.label:hover {
    color: #00A7CB;
}
.orange.label:hover {
    color: #00A7CB;
}
.w-628{
    width: 90%;
}

/* .join .img-container:hover img{

    transform: scale(1.1);

} */
.join-img {
    top: 50%;
    transform: translateY(-50%);
}

.join-text {
    padding-left: 48px;
}

.Cooperation,
.Simplicity {
    left: -24px;
}

.Cooperation {
    top: 40px;
}

.Equity {
    top: 50%;
    right: -24px;
}

.Simplicity {
    bottom: 40px;
}

/*News Section */
.news {
    background-color: #F9F9F9;
}

.datetime {
    color: var(--secondary-color);
    font-size: 0.875rem;
    line-height: 19.07px;
}

.datetime .date img {
    margin-right: 8px;
}

.card-text {
    font-size: 1.25rem;
    color: var(--text-color);
    line-height: 27.24px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
            line-clamp: 2 !important; 
    -webkit-box-orient: vertical;
}
.card-body .regular-parag{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
            line-clamp: 3 !important; 
    -webkit-box-orient: vertical;

}

.card-img-top {
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 1rem;

}

.news .card .card-img-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;

}

.card a img {
    margin-left: 4px;

}

.card a h6 {
    margin-bottom: 0;
    color: var(--secondary-color);
}

.card h5 {
    margin-top: 8px;
}

.event-gallery .slick-slide {
    width: 246px !important;
}

/* Quotation Section */
.quotation {
    background: url(../images/Rectangle\ 64.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.quotation h2 {
    margin-bottom: 16px;
}



label {
    margin-bottom: 0;
}

label span {
    color: #DC3545;
}

.quotation form input:not([type=submit]),
.quotation form textarea {
    padding: 16px;
    margin-top: 8px;
    background-color: #FCFCFC;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--main-color-opacity);
    outline: 0;
    box-shadow: var(--shadow-2);
}

.quotation form input:not([type=submit]) {
    height: 59px;
}

.quotation form textarea {
    resize: none;
}



/* Footer */
footer {
    padding-top: 40px;
    padding-bottom: 30px;
    background-color: var(--secondary-color);
    color: #fff;
}

footer hr {

    border-top: 0.5px solid #fff;
    opacity: 1;

}

footer .copy-right.text-center {

    color: #fff;
}

footer .top-arrow {

    top: 100px;

    transform: rotate(270deg);
    right: 0;

}

.top-arrow span {
    padding-right: 10px;
    color: var(--bg-color);
}

.top-arrow img {
    transform: rotate(90deg);
}

footer .lin-title {
    color: var(--bg-color);
    ;
    margin-bottom: 17px;
    font-size: 20px;
}

footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer ul li a {
    color: #fff;
}

footer ul li {
    padding-bottom: 16px;
    position: relative;
    z-index: 99999;
}

footer .img-container-footer {
        right: 0;
    bottom: 0;
    opacity: 0.03;
}

/* ////////////////////////////////////////////////// BLOG PAGE ///////////////////////////////////*/
/*Hero Section */
/* .hero.branch{
    height: 462px;
    background-image: url(../images/Mask\ group\ \(4\).svg);
    background-size: cover;
} */
.branch-rocket {
    right: 70px;
    bottom: 40px;
    max-width: 220px;
    z-index: 10;
}

.branch-hero-bg {
    bottom: 0;
    width: 100%;
}
.hero.branch h1{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
    position: relative;
    top: 130px;
    color: #0E556C;

}

.cirls {
    right: 0;
    bottom: 0;
}

/* Articles Section */
.page-locat {
    font-size: 0.875rem;
    color: var(--title-color);
}

h3.title {
    margin-top: 1.5rem;
    font-size: 2rem;
}

.blog-date {
    font-size: 1.25rem;
}

.blog-circles {
    right: 0;
}

.branch-circles {
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: -1;
}

.articles .card {
    border: none;
}

.articles .card .img-container {
    height: 350px;
    border-radius: 16px;
}

.Dev .img-container {
    background-color: #229F6A;
}

.Quality .img-container {
    background-color: #FFC107;
}

.UX .img-container {
    background-color: #9747FF;
}

.HR .img-container {
    background-color: #D91515;
}

.IT .img-container {
    background-color: #0A66C2;
}

/* .card .img-container h2{
    color: #fff;
    margin: 0;
} */
.articles .card .img-container img {
    width: 80px;

}

/* Explore Section */
.articles-gallery {
    flex-wrap: wrap;
}

.articles-gallery .colored {
    background-color: var(--light-main-color);
}

.articles-gallery.blog .colored {
    background-color: unset;
}

/* .explore .card{
    border: none;
    background-color: transparent
} */
.explore .card .img-container {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    height: 300px;
}

.explore .card p.regular-parag {
    font-size: 1.25rem;
    line-height: 27.24px;
}

.explore .card-body {
    height: 294px;
    /* line-height: 2.5ex; */
    /* height: 37ex;  */
    /* 2.5ex for each visible line */
    overflow: hidden;
    background-color: #fff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* //////////////////////////////////////// News & Events Page /////////////////////////////////////*/

/*Hero Section */
.hero.branch {
    height: 274px;
    background-image: url(../images/inner-bg.jpg);
    background-size: cover;
}

.branch-rocket {
    right: 70px;
    bottom: 40px;
    max-width: 220px;
    z-index: 10;
}

.branch-hero-bg {
    bottom: 0;
    width: 100%;
}

/* .hero.branch h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
} */
.cirls {
    right: 0;
    bottom: 0;
}

/* news-events Section */



.branch-circles {
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: -1;
}

.news-events .card {
    border: none;
}

.news-events .card .img-container {
    /* height: 350px; */
    border-radius: 16px;
}

.Dev .img-container {
    background-color: #229F6A;
}

.Quality .img-container {
    background-color: #FFC107;
}

.UX .img-container {
    background-color: #9747FF;
}

.HR .img-container {
    background-color: #D91515;
}

.IT .img-container {
    background-color: #0A66C2;
}

.card .img-container h2 {
    color: #fff;
    margin: 0;
}

.news-events .card .img-container img {
    border-radius: 16px;
    width: 100%;
    object-fit: cover;
}

/* Explore Section */
.news-events-gallery {
    flex-wrap: wrap;
}

.news-events-gallery .colored {
    background-color: var(--light-main-color);
}

.explore .card {
    border: none;
    background-color: transparent
}

.explore .card .img-container {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;

    height: 300px;
}

/* .blog.explore .card .img-container img{
    
 } */
.blog.explore .card .img-container img {
    width: 80px !important;
    height: 80px;
    object-fit: cover;

}

.explore .card .img-container img {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 100%;
    object-fit: cover;
}

.explore .card p.regular-parag {
    font-size: 1.25rem;
    line-height: 27.24px;
}


/* //////////////////////////////////////// AboutClient Page /////////////////////////////////////*/
/* About-Testimonials Section */
.ab-testi-img1 {
    top: 26%;
}

.slick-slide img {
    width: 100%;
}

.ab-testi-img2 {
    bottom: 14%;
}

/* Contact Us */
.contact-us {
    background-image: url(https://ssis.sa/wp-content/uploads/2025/02/Contact-Us.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}
.ContactUs .card-body.info-cards.mb-5{
    margin-bottom: 3.8rem!important;
}

.contact-us h4 {
    color: #fff;
}

.contact-us h4::after {
    background-color: #fff;
}

.about-clients .row div:hover img {
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
}

/* ///////////////////////////// AboutTeam Page ////////////////////////*/
.aboutm-pg .card {
    background-color: transparent;
    overflow: hidden;
}

.about-tm-members .card img {
    border: 3px solid var(--main-color);
}

.aboutm-pg .card img {
    
    background-color: var(--light-main-color);
    border-radius: 16px;
}

.about-team .card img {
    border: 2px solid var(--main-color);
}

.aboutm-pg .card p {
    font-size: 1.375rem;
}

/* ///////////////////////////////////// Gallery Page ////////////////////////////////////////*/
.moments-gallery .colored {
    background-color: var(--light-main-color);
}

.moments-gallery {
    overflow-x: scroll;
    overflow-y: hidden;

    flex-wrap: nowrap;
}

.moments-gallery::-webkit-scrollbar {
    display: none;
}

/* ///////////////////////////////////News&Events Page /////////////////////////////////////////*/

.third_anni .card p {
    line-height: 35.2px;
}

/* Removes the default 20px margin and creates some padding space for the indicators and controls */
.carousel {
    margin-bottom: 0;
    padding: 0 40px 30px 40px;
}

/* Reposition the controls slightly */
.carousel-control {
    left: -12px;
}

.carousel-control.right {
    right: -12px;
}

/* Changes the position of the indicators */
.carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
    z-index: 1;
}

.row-fluid .span3 {
    /* width: 300px !important; */
    height: auto !important;
    border-radius: 16px !important;
}

.thumbnail {
    border: unset !important;
    background-color: unset !important;
}

a.thumbnail {
    border-radius: 16px;
}

a.thumbnail img {
    border-radius: 16px;
}

/* .carousel-control{
    top: 0 !important;
} */
/* Changes the colour of the indicators */
.carousel-indicators li {
    background: #c0c0c0;
}

.carousel-indicators .active {
    background: #333333;
}

.event-gallery .slider-photo img {
    height: 300px;
}

.slider-photo {
    max-width: 300px;
    min-width: 210px;
}

.event-gallery .r-img {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* //////////////////////////////////////// History-About Page ///////////////////////////////*/
.history-ab .h-ab-values img {
    width: 120px;
    height: 120px;
}

/* ///////////////////////////////////// Career-Openings ///////////////////////////////////*/
.search-box input {
    padding: 16px 24px 16px 64px;
    background-color: #F9F9F9;
    border: 1px solid var(--tab-bg);
}

.search-icon {
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
}
.career-box{
    padding: 24px 32px;
    border: 1px solid var( --tab-bg);
    width: 100%;
    h5 {
       font-weight: 700; 
    }
    ul {
        list-style: disc;
        padding-left: 2rem;
        li {
            font-size: 20px;
            color: #797C7F
        }

    }

    .career-box-data {
        color: #797C7F;
        font-size: 20px;
    }
}
.serv-card .career-box{
    padding: 24px 32px;
    border: 1px solid var( --tab-bg);
    height: 100%;
    background: #FCFCFC;
}
.career-title h6{
    right: 0;
}

.career-box {
    padding: 24px 32px;
    border: 1px solid var(--tab-bg);
}

.career-title h6 {
    right: 0;
}




/*TimeLine*/
#timeline {

    position: relative;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}


#timeline:before {
    content: "";
    width: 4px;
    border-radius: 16px;
    height: 100%;
    background: var(--main-color);
    left: 50%;
    top: 10px;
    position: absolute;
}

#timeline:after {
    content: "";
    clear: both;
    display: table;
    width: 100%;
}
.line-1-timeline{
position: absolute;
    top: 30px;
    right: 37%;
    background-color: #00A7CB;
    width: 13%;
    height: 4px;
  }
  .line-2-timeline{
position: absolute;
    top: 27px;
    left: 37%;
    background-color: #00A7CB;
    width: 13%;
    height: 4px;
  }

.timeline-item {
    margin-bottom: 100px;
    position: relative;
}

.timeline-icon-logo {
    top: -20px;
}

.timeline-item:nth-child(odd) .timeline-icon {
    background: var(--main-color);
    width: 3.5rem;
    height: 3.5rem;
    position: absolute;
    top: 0px;
    left: 65%;

    margin-left: -1.4rem;
    border: 4px solid #F9F9F9;
    border-radius: 50%;
    box-shadow: 0 0 0 8px var(--main-color), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.1);
    -webkit-animation: switchOn-Off 800ms linear infinite alternate;
    animation: switchOn-Off 800ms linear infinite alternate;
}

.timeline-item:nth-child(even) .timeline-icon {
    background: var(--main-color);
    width: 3.5rem;
    height: 3.5rem;
    position: absolute;
    top: 0px;
    right: 63%;

    margin-left: -1.4rem;
    border: 4px solid #F9F9F9;
    border-radius: 50%;
    box-shadow: 0 0 0 8px var(--main-color), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.1);
    -webkit-animation: switchOn-Off 800ms linear infinite alternate;
    animation: switchOn-Off 800ms linear infinite alternate;
}

/* .timeline-item:nth-child(odd) .timeline-icon::before{
    content: "";
    height: 32px;
    border-radius: 16px;
    width: 100%;
    background: var(--main-color);
    top: 8px;
    position: absolute;
  } */

@keyframes switchOn-Off {
    from {
        background-color: #F9F9F9;

    }

    to {
        background-color: var(--main-color);

    }
}

.timeline-logo {


    position: absolute;
    top: 0;
    left: 46.4%;

    


}

.timeline-icon .fa {
    margin-left: .9rem;
    margin-top: .9rem;
    color: white;
}


.timeline-card {
    width: 25%;
    padding: 8px 32px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

.timeline-card:before {
    content: '';
    position: absolute;
    right: 1px;
    margin-right: -7px;
    top: 1.1rem;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid white;
}

.timeline-card .card-header {
    border-color: white;
    background-color: white;
}

.timeline-card h2 {
    font-weight: 300;
    font-size: 2rem;
    color: var(--main-color);
}

.portfolio-text{
    position: relative;
    padding-left: 8px;
    transition: all 2s ease-in-out;

}
.port-circle{
    outline: 8px solid var(--main-color);
    min-width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bg-color);
    transition: all 2s ease-in-out;

}
.portfolio-line:hover .port-circle{
    width: 16px;
    height: 16px;
}
.portfolio-line:hover p.portfolio-text{
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--main-color);
}
/* .portfolio-text::before{
    position: absolute;
    left: -12px;
    content: url(../images/EllipseText.svg);

}  */
/* .portfolio-text:hover::before{
    position: absolute;
    left: -12px;
    
    
}  */

.style-1 {
    left: 0;
    right: inherit;
    border: 3px solid var(--main-color);

}

.timeline-item:nth-child(odd) .timeline-card {
    margin-left: 70%;

}

.timeline-item:nth-child(even) .timeline-card {
    margin-left: 5%;
}

.timeline-item:nth-child(odd) .timeline-card:before {
    left: 1px;
    right: inherit;
    margin-left: -7px;
    border-left: 0;
    border-right: 7px solid white;
}

.timeline-item:nth-child(odd) .timeline-date {
    right: 50%;
    left: inherit;
    margin-right: 3rem;
}

/* @media screen and (max-width: 768px) {
    html {
        font-size: 12px;
    }
    #timeline { padding: 30px; }
    #timeline:before { left: 1.8rem; }
    .timeline-icon { left: 0; }
    .timeline-card { width: 90%; margin-left: auto; }
    .timeline-card:before, .right:before {
      left: 0;
      right: inherit;
      margin-left: -7px;
      border-left: 0;
      border-right: 7px solid white;
    }
  } */
@keyframes colorchange {
    0% {

        fill: #CDEBED;
    }

    10% {

        fill: #bcf0f4;
    }

    20% {

        fill: #97ecf3;
    }

    30% {

        fill: #66ebf5;
    }

    40% {


        fill: #CDEBED;
    }

    50% {

        fill: #CDEBED;
    }

    60% {

        fill: #FFC188;
    }

    70% {

        fill: #FFC188;
    }

    80% {

        fill: #FFC188;
    }

    90% {

        fill: #FFC188;
    }

    100% {

        fill: #FFC188;
    }
}

@keyframes colorchange2 {

    20% {

        fill: #FFC188;
    }

    30% {

        fill: #FFC188;
    }

    40% {

        fill: #FFC188;
    }

    50% {

        fill: #FFC188;
    }

    100% {

        fill: #FFC188;
    }

    60% {

        fill: #CDEBED;
    }

    70% {

        fill: #bcf0f4;
    }

    80% {

        fill: #97ecf3;
    }

    90% {

        fill: #66ebf5;
    }

    000% {


        fill: #CDEBED;
    }


}



/* //////////////////////////Media Query ////////////////////////////////*/
@media (min-width:1200px) {
    .hero.home {
        min-height: 113vh;
    }

    .timeline-card {
        width: 30%;

    }

    .timeline-item:nth-child(even) .timeline-card {
        margin-left: 0%;
    }

    .hero.home .row {
        margin-top: 6vh;
    }
    .about .img-container2 .highlighted-box:first-of-type{
        top: 40px;
        left: -93px;
    }

    /* .img-container .highlighted-box:last-of-type{
        bottom: 45px;
        right: -40px
    } */
    .srv-box.consult {
        margin-top: -40px;
    }

    .srv-box.products {
        margin-top: 40px;
    }

    .about-text {
        padding-right: 100px;
    }

    /* .slick-track>div {   
        width: 519px !important;

} */
    /* .Testimonials   .slick-track>div {   
    width: 519px !important;

} */
}

@media (min-width:992px) and (max-width:1280px) {
    /* .progr-box{
        min-width: 220px;
    } */
    /* h5{
        font-size: 1.125rem;
    }
    h3{
        font-size: 30px;
    } */
}

@media (max-width:992px) {

    /* html {
        font-size: 0.875;
    } */
    h1 {
        /* font-size: 28px; */
        line-height: 38.27px;
    }

    /* h2{
        font-size: 24px;
        margin-top: 12px;
    }
    h3{
        font-size: 1.375rem;
    }
    h4{
        font-size: 17px;
    } */
    h4::after {
        width: 90px;
        bottom: 6px;
        right: -95px;
    }

    .section-header h4::before {
        left: -97px;
        bottom: 6px;
        width: 90px;
    }

    /* h6, label{
        font-size: 0.875;
    } */
    .regular-parag {
        /* font-size: 15px; */
        line-height: 22.96px;
    }

    .gap-40 {
        gap: 18px;
    }

    .gap-24 {
        gap: 12px;
    }

    .gap-16 {
        gap: 8px;
    }

    .nav-link {
        padding: 6px 0;
    }

    /* .navbar-nav .nav-item a.active{
        margin-top: 16px;
    } */
    .navbar-brand img {
        width: 130px;
    }

    /* .navbar-nav .nav-item a {
        font-size: 0.875;
    } */
    .main-btn,
    .branch-btn,
    .branch-main-btn {
        padding: 12px 25px;
        /* font-size: 16px; */
    }

    .hero.home {
        height: 75vh;
    }

    .hero-text-container {
        z-index: 99999;

    }

    .hero-text {
        width: 100%;
        margin: auto;
    }

    /* .hero-socials {
        flex-direction: row;
        gap: 18px;
        justify-content: center;
        align-items: center;
        margin-top: 70px;
        left: 0px;
        bottom: 20px;
    } */
    /* ul.navbar-nav{
        position: absolute;
    background-color: var(--bg-color);
    z-index: 999999999;
    width: 64%;
    right: 0;
    border-radius: 8px;

    } */
    /* .navbar-nav .nav-item a {
        
        margin-left: 16px;
    }
    .nav-item .nav-btn {
        padding: 8px 24px;
        border-radius: 8px;
        margin-bottom: 16px;
    } */
    .hero-text-container .vh-100.d-flex {
        display: block !important;
        margin-top: 1.5rem;

    }

    .hero-text-container .vh-100 {
        height: 50vh !important;
        margin-left: unset !important;

    }

    .main-btn.mos-btn {
        margin-top: 4rem;
    }

    .hero h1 {
        font-size: 2.1rem;
        line-height: 32px !important;
    }

    .navbar-nav .nav-item a:hover,
    .navbar-nav .nav-item a.active {
        color: var(--secondary-color);

    }

    .py-80 {
        padding: 40px 0;
    }

    .pb-80 {
        padding-bottom: 40px;
    }

    .mb-24 {
        margin-bottom: 17px;
    }

    .p-40 {
        padding: 20px;
    }

   /* .about .highlighted-box.hight-vision {
        left: 0;
        bottom: -95px;
    } */
    .highlighted-box.hight-mission{
        bottom:-190px;
        margin-bottom: 2rem;
  

    }

    .highlighted-box {
        padding: 12px 16px;
    }

    /* .highlighted-box p {
        font-size: 0.875;
    } */
    .highlighted-box img {
        width: 24px;
    }

    .why {
        margin-top: 48px;
    }

    /* .srv-box{
        padding: 45px 0;
    } */

    .srv-box h5 {
        margin-top: 15px;
    }

    .main-srv li:not(:last-child) {
        margin-bottom: 14.5px;
    }

    .mt-40 {
        margin-top: 20px;
    }

    /* .progr-box {
        width: 50%;
        min-width: 230px;
        margin-bottom: 0;
    } */

    .portf-gallery div {
        padding: 8px 20px;
        /* font-size: 0.875; */
    }

    .value-boxs {
        gap: 17px;
    }

    .mb-40 {
        margin-bottom: 20px;
    }

    .Trust,
    .Team,
    .Equity {
        right: 0;
    }

    .life .highlighted-box.Knowledge,
    .Commitment,
    .Cooperation,
    .Simplicity {
        left: 0;
    }

    .join-text {
        padding-left: 0;
    }

    .quotation form input {
        height: 35px;
        margin-top: 0px;
    }

    .footer-logo {
        width: 130px;
    }

    footer ul li {
        padding-bottom: 8px;
        /* font-size: 15px; */
    }

    .socials img {
        width: 24px;
    }

    .top-arrow {
        transform: rotate(267deg);
    }

    .top-arrow span {
        font-style: 13px;
    }

    footer {
        padding-top: 30px;
        padding-bottom: 15px;
    }
}
.filter{
    height: fit-content;
    overflow: hidden !important;
}

.filter img{
    transition: transform .5s ease;
}
/* .filter:hover img{
    transform: scale(1.1);
} */
.img-container{
    height: fit-content;
    overflow: hidden !important;
}
.img-container img{
    transition: transform .5s ease;
}
/* .filter .img-container:hover img{
    transform: none !important;
} */
/* .img-container:hover img{
    transform: scale(1.3) !important;
} */
.join .img-container:hover img ,
.about .img-container:hover img,
.life .img-container:hover img,
.career-join .img-container:hover img,
.news-events .img-container:hover img,
.career-join .img-container:hover img 
{
    transform: scale(1.3) !important;
}
.news-events .card .img-container:hover img,
.explore.new-event-card .card .img-container:hover img
{
    transform: scale(1) !important;
}
.life .highlighted-box,
.join .highlighted-box{
    max-width: fit-content;
    max-height: fit-content;
}
.img-contact-us{
    position: absolute;
    /* width: 100%; */
    z-index: 999;
    top: 40%;
    left: 44%;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
.news .card{
    height: fit-content;
    overflow: hidden !important;
}
.news .card img{
    transition: transform .5s ease;
}
/* .news .card:hover img{
    transform: scale(1.1);

} */
/* @media (max-width:576px) {
    html {
        font-size: 0.875;
    }
    .progr-box {
        min-width: 160px;
        padding: 20.5px 0;
        gap: 5px;
    }
    .progr-box .img-container{
        width: 45px;
        height: 45px;
    }
    .progr-box .img-container img{
        width: 24px;
       
    }
    .section-header h4::before {
        left: -55px;
        width: 50px;
    }
    h4::after {
        width: 50px;
        right: -55px;
    }
    h1 {
       
        line-height: 30.27px;
    }
    .main-btn, .branch-btn, .branch-main-btn {
        padding: 10px 20px;
       
    }
    .regular-parag {
        
        line-height: 19.96px;
    }
    .hero-socials img{
        width: 24px;
    }
    .hero-socials{
        gap: 10px;
    }
 
    .mb-24{
        margin-bottom: 10px;
    }
    .card-text{
        
        line-height: 22px;
    }
    .buttons span {
        height: 4px;
        width: 10px;
    }
    .slick-track > div {
   
        width: 100% ;

}
} */
/* .card-head{
    height:400px
} */
/* .card-head.mangmenet{
    height:340px
} */
/* .card-head img{
    width: 100%;
} */
.card-head{
    height: 400px;
}
.card-head img{
    height: 102%;
}


  

.navbar-nav {
    align-items: center;
  }
.navbar {
    background-color: #fff;
    box-shadow: 0px 0px 24px 0px rgba(0, 167, 203, 0.24);
    padding: 24px 0;

}
.navbar-brand {
    font-weight: bold;
}
.nav-link {
    color: rgba(22, 41, 80, 1) !important;
    line-height: 24px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    @media (max-width: 1200px) {
    font-size: 18px !important;
    }

}

.active .nav-link , .nav-link:hover {
    color: rgba(0, 167, 203, 1)  !important;

}
.navbar .main-btn {
    background: rgba(239, 207, 0, 1) !important;
    color: rgba(34, 39, 51, 1) !important;
    padding: 15px 20px 10px !important;
    font-size: 24px !important;
    font-weight:500 !important;
    border-radius: 8px !important;
    width: max-content;
    display: flex;
    height: 100% !important;
    @media (max-width: 1200px) {
        padding: 10px 8px !important;
        font-size: 20px !important;
        }

}


button:focus {
    outline: unset;
}

.carousel-item {
    h1 {
        font-size: 48px;
        line-height: 56px;
        font-weight: 600; 
        color: rgba(22, 41, 80, 1);
        @media (max-width: 992px) {
            font-size: 38px;
        } 

        @media (max-width: 525px) {
            font-size: 32px;
        } 

    }

    .hr {
        background-color: rgba(22, 41, 80, 1);
        height: 1px;
        width: 160px;
        margin-bottom: 32px;
    }

     p {
        font-size: 22px;
        line-height: 32px;
        color: rgba(22, 41, 80, 1);
        margin-bottom: 32px;

     }

     .discover-btn{
        background: rgba(0, 167, 203, 1);
        color: #fff;
        font-size: 22px;
        padding: 20px 70px;
        margin-bottom: 16px;
        border-radius: 8px;
        @media (max-width: 992px) {
            padding: 20px 40px;
        font-size: 20px;

        } 

    
    }

    .slidder-padding {
        padding-top: 170px;
        @media (min-width: 1200px) {
            padding-top: 140px;
        }

        @media (max-width: 992px) {
            padding-top: 40px;
        }

    }
    

}

.hero {
    .carousel-indicators li {
        background: rgba(20, 42, 79, 0.4);
        border-radius: 50%;
        border-top: unset;
        border-bottom: unset;
        width: 8px;
        height: 8px;
        opacity: 1;
    }
    
    .carousel-indicators {
        right: unset;
        bottom: 1rem;
        left: 0;
        z-index: 999;
        @media (max-width: 525px) {
            bottom: 0;
        } 
    }
    
    .carousel-indicators .active {
    
        width: 40px;
        height: 8px;
        background: rgba(20, 42, 79, 1);
        border-radius: 8px;
    }

    .carousel-item {
        transition: opacity 2s ease-in-out, z-index 0s 1s; /* 1 second fade */
        opacity: 0; /* Start hidden */
    }
    
    .carousel-item.active {
        opacity: 1; /* Fade in the active item */
        z-index: 1; /* Ensure it appears on top */
    }



}

.theme-container {
    padding: 0 80px;
    @media (max-width: 1100px) {
    padding: 0 25px;

    }

    @media (max-width: 992px) {
        padding: 0 15px;
    
        }
}

.blue-color {
    color: rgba(0, 167, 203, 1);
}

.d-md-none {
    @media (max-width: 992px) {
        display: none;
    } 
}

.d-lg-flex {
    @media (min-width: 992px) {
        display: flex;
    } 
} 

.d-md-block {
    @media (max-width: 992px) {
        display: block;
    } 
}



@media (min-width: 1300px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (max-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }

    .navbar-toggler {
        position: absolute;
        right: 0;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1200px;
    }
}

.light-btn {
    border: solid 2px #EFCF00;
    padding: 16px 70px;
    color:#222733;
    font-size: 24px;
    border-radius: 8px;
    width: max-content;

    @media (max-width: 992px) { 
    padding: 5px 20px !important;
    font-size: 20px;

    }


}

.light-btn:hover {
background-color: #EFCF00;
color:#222733;
text-decoration: unset;
}

.light-gray-bg {
    background-color: #F9F9F9;
}

.partners-container {
    .partner-logo {
        padding: 8px;
        img {
            box-shadow: 0px 0px 40px 0px rgba(14, 85, 108, 0.16);
            border-radius: 8px;
			background-color:#fff;
        }
    }
}

.px-12 {
    padding-right: 12px;;
    padding-left: 12px;;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: unset;
}

.mb-30 {
    margin-bottom: 30px;
}

.lang-toggle {
    padding:0 16px;

    .lang-text {
        color: #00A7CB;
        font-size: 24px;
        text-decoration: underline;
        padding-right: .2rem;
    }
    
}

.menu-image-title-after.menu-image-not-hovered img, .menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper, .menu-image-title-before.menu-image-title {
    padding-right: 0;
}


.menu-image-title-before.menu-image-not-hovered img, .menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper, .menu-image-title-after.menu-image-title {
    padding-left: 5px;
    /* color: #00A7CB;
        font-size: 24px; */
}

.dropdown-toggle::after {
display:none
}

.dropdown-menu.show li .dropdown-item:hover, .dropdown-item:active {
    color: var(--main-color-opacity);
    font-weight: 600;
    background-color: unset;
}

.card-white , .main-srv {
	    background-color: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-1);
	padding:40px;
}

#heroSlider {
	box-shadow: 0px 1px 50px 0px rgba(0, 0, 0, 0.05);
}

.form-container {
	background-color: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-1);
	padding:40px;
}