*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'DM sans';
}
.contact-button{
    color: #00ADEE;
    font-weight: 700;
}

html, body {
    overflow-x: clip; /* Safer than hidden, doesn't break sticky */
}

@media (max-width: 768px) {
    .icon-show{
       margin-top: 0 !important;
       padding-top: 0 !important;
    }
    .core_values{
        font-size: 45px !important;
    }
}
/* Hide the horizontal scrollbar but keep scrolling functional */
::-webkit-scrollbar:horizontal {
    height: 0px;  /* Hide scrollbar height */
    display: none;  /* Completely hide scrollbar in WebKit browsers */
}

/* Keep vertical scrollbar visible */
::-webkit-scrollbar {
    width: 10px;  /* Width of the vertical scrollbar */
}

/* Custom styling for vertical scrollbar */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For Firefox: Hide only the horizontal scrollbar */
body {
    scrollbar-width: thin; /* Keeps vertical scrollbar visible */
}

body::-webkit-scrollbar:horizontal {
    display: none;
}



.nav-text{
    color: #000 !important;
}
.nav-text:hover{
    color: #114986 !important;
}
.show-header:hover .dropdown-menu{
    display: block !important;
    transition: 0.1s !important;
    transform: translateY(20px); /* Start from below */
    animation: fadeIn 0.5s forwards; /* Apply animation */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start from 0 opacity */
        transform: translateY(20px);
    }
    to {
        opacity: 1; /* End at full opacity */
        transform: translateY(0); /* End position at original */
    }
}


.video-home{
    width: 100%;
    height: 100%;
    position: relative;
    
}
.sticky-element {
    position: sticky !important;
    top: 0 !important; /* or bottom: 0; left: 0; right: 0; */
}
/* navbar  */

nav {
    background-color: #333;
    padding: 1rem;
    text-align: right;
    z-index: 1000;
    /* Ensure navbar is below sliding section */
    position: relative;
    /* Required for z-index to work */
}

#toggle-button {
    background-color: #008cba;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

#sliding-section {
    position: fixed;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background-color: rgb(241, 240, 240);
    /* Half white color */
    transition: left 1s ease-in-out;
    padding: 20px;
    z-index: 2000;
    /* Ensure sliding section is on top of navbar */
}

#sliding-section.show {
    left: 0;
}
/* navbar end */
.poster{
    background: #14416B;
    padding: 7px;
    font-size: 16px;
    color: #ffffff;
}
.about-heading{
font-size: 80px;
color: #14416b;
}
.text-gray{
    color : #838694;

}
.cust-color{
    color: #14416b;
}
.cust_line{
    width: 25% !important;
    height: 5px;
    background: #838694;
}
.text-16{
    font-size: 16px;
}
.text-20{
    font-size: 20px;
}
.text-18{
    font-size: 18px;
}
.text-22{
    font-size: 22px;
}
.text-80{
    font-size: 80px;
}
.text-17{
    font-size: 17px;
}
.left-border{
    border-left: #00ADEE 3px solid;
    padding-left: 25px;
}
.cust_btn{
    background: #00ADEE;
    color: #fff;
    text-decoration: none;
}
.cust_btn:hover{
    background: #14416b;
    color: #fff;
    transition: 1s;
}
.sec-3{
    background: #f8f8f8f8;
    height: auto !important;
}
.text-blue{
    color: #00ADEE;
}
.text-dark-blue{
    color: #14416b;
}
.text-25{
    font-size: 25px;
}
.w-15{
    width: 20% !important;
    border: none !important;
}
.list-unstyled{
    list-style-type: none !important;
}

.footer-color-small{
    background-color: #0f1425;
}
.footer-color{
    background-color: #000d36;
}




.input-container {
    position: relative;
    display: inline-block;
}

.myinput1 {
    padding: 10px;
    border: none;
    border-bottom: 2px solid gray ; /* Initial border */
    outline: none;
    background: transparent;
    width: 100%;
    margin-bottom: 10%;
    position: relative;
    padding-left: 50px !important;
}

.myinput1.focused {
    border-bottom: 2px solid red; /* Border color when clicked */
}
.special{
    position: absolute;
    right: 29%;
    background: #14416b !important;
    color: #fff;
    border: none;
}

.special:hover{
    background: #00ADEE !important;
    color: #fff;
    transition: 1.6s;
}
.hover1:hover{
    color: #00ADEE;
}
.hover2:hover{
    color: #f60010;
}
.hover3:hover{
    color: #00ADEE;
}
.hover4:hover{
    color: #ee0083;
}
.special1{
    position: absolute;
    color: #00ADEE;
}

.container1 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card1 {
    border: none;
    overflow: hidden;
    width: 19%;
    height: 30% !important;
    transition: transform 0.3s;
}

.card1 video {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.card1:hover {
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .card1 {
        width: calc(25% - 20px);
    }
}

@media (max-width: 992px) {
    .card1 {
        width: calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .card1 {
        width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .card1 {
        width: calc(100% - 20px);
    }
}


.clients {
    position: relative;
    padding-bottom: 20px; /* Adjust based on your needs */
    margin-bottom: 30px; /* Space below the section */
}

.clients::after {
    content: "";
    display: block;
    position: absolute;
    left: 48%;
    bottom: 0;
    width: 5%;
    height: 5px; /* Thickness of the line */
    background-color: #a8a8a8; /* Line color */
}
.text-30{
    font-size: 30px;
}
.light-black{
    color: #212529;
}

/* CAROUSEL SLIDER */

@media (min-width: 768px){

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}
.box1{
    margin-top: 30%!important;
    height: 35vh !important;

}
.mycust-width{
    height: 20% !important;
    width: 60%;
}
.dark-blue:hover{
    background: #14416B !important;
    color: #fff;
    transition: 1s;
}
.cust-margin{
    margin-top: 150px !important;
}
.white-color{
    background-color: #fff;
}
.line{
    width: 7%;
    border: 5px solid rgb(210, 210, 210);
}
.mycustlink{
    background: #14416b;
    
}
.cust-responsive{
    left: 5px; font-size: 14px; top: 47%;
}

.cust-responsive3{
    left: 15px; font-size: 14px; top: 44%;
}


@media only screen and (max-width: 360px) {
    .cust-responsive {
      left: 5%;
      top: 38%;
    }
  }
  .height-fixed{
    height: 38vh;
    border: 2px solid #f7f7f7 !important;
  }
.inputplaceholder::placeholder{
    color: #000 !important;
    font-weight: 500;
    font-size: 19px;
}
.inputselected{
    color: #000 !important;
    font-weight: 500!important;
    font-size: 19px !important;
}
/* country code selection css */

.flag-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: 0;
    height: 100%; /* Make the height equal to the input field */
    border: 1px solid #ced4da;
    border-radius: 0.375rem 0 0 0.375rem; /* Match the border-radius with the input field */
    background-color: white; /* Set background color to white */
}

.flag-dropdown img {
    width: 20px;
    height: auto;
    margin-right: 5px;
}

.flag-dropdown .form-control {
    max-width: 80px;
    border-left: 0;
    text-align: right;
}

.input-group .form-control:focus {
    z-index: 3;
}

.input-group .form-control:not(:first-child) {
    border-radius: 0 0.375rem 0.375rem 0;
}

.input-group .dropdown-toggle {
    border-radius: 0.375rem 0 0 0.375rem;
}
/* country code selection css end */
.bg-white{
    background-color: #fff;
}
.cust-checkbox[type="checkbox"]{
    width: 18px;
    height: 15px;
}
.cust-radio[type="radio"]{
    width: 18px;
    height: 15px;
}
.darkbluebtn{
background-color: #14416b;
color: #fff;
}
.darkbluebtn:hover{
background-color: #00ADEE;
transition: 1s;
color: #fff;
}
.text-60{
    font-size: 60px !important;
}
.inputplaceholder::placeholder {
    color: #6c757d;
}
/* mymap */

.mapouter {
    position: relative;
    text-align: right;
    height: 500px; /* Adjust height as needed */
    width: 100%;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    height: 100%;
    width: 100%;
}

.view{
justify-content: space-around;
    
}

.abc1{
    color: wheat;
}
.btn_dark{
background-color: #14416b;
padding-left: 20px;
padding-right: 20px;
}
.padding-top-btn{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.dark-blue-background{
    background: #14416BBD !important;
    color: #fff;
}

.hoverwebcolor:hover{
    background: #14416B !important;
    color: #fff !important;
}
.dark-link:hover{
    background: #00ADEE;
    transition: 1s;
}
.my-round{
    border-radius: 30px !important;
}
.bg-white{
    background: #fff;
}
/* office image */
.office-image{
    width: 100%;
    height: 70vh;
    background: url(../assets/office.jpg);
    background-size: cover;
    background-color: #14416B;
    opacity: 0.88;
    transition: 0.3s;
     border-radius: 0.3s;
      opacity : 0.3s;
}
.office-image {
    position: relative;
    width: 100%;
    height: 70vh;
    background: url('../assets/office-2360063.jpg') no-repeat center center;
    background-size: cover;
    border-radius: 0.3s;
    overflow: hidden;
}

.office-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 86, 142, 0.88); /* Adjust color and opacity */
    z-index: 1;
    transition: opacity 0.3s;
}
.office-image-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    padding: 20px;
}
.btn-dark-blue{
    background: #14416b !important;
    color: #fff !important;
}
.btn-dark-blue:hover{
    background: #00ADEE !important;
    color: #fff !important;
    transition: 1s;
}
/* digital transformation */

.first{
    height: 100%;
}
.vertical-align-center{
    vertical-align: middle;
}
.text-70{
    font-size: 70px;
}

.cstm-card:hover {
        transform: scale(1.05);
        transition: 0.8s;
    }

    /* image parallex effect */
    /* .second-sec1{
        background: url(../assets/Customer-centric-Digital.webp) no-repeat;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
    } */
    .second-sec1 {
        background: url(../assets/Customer-centric-Digital.webp) no-repeat center center; /* Center the background */
        background-size: 40%; /* Resize the image to fit the container */
        background-position: left;
        height: 900px; /* Set the height of the section */
        position: relative;
        overflow: hidden;
        background-attachment: fixed; /* Enable parallax effect */
        display: flex; /* Use flexbox for content alignment */
        align-items: center; /* Center content vertically */
        padding: 20px; /* Optional padding */
    }
    
    @media (max-width: 768px) {
        .second-sec1 {
            flex-direction: column; /* Stack elements vertically */
            height: auto; /* Allow height to adjust based on content */
            position: relative; /* Ensure stacking context */
        }
    
        .second-sec1::before {
            content: "";
            background: url(../assets/Customer-centric-Digital.webp) no-repeat center center;
            background-size: contain; /* Keep the image responsive */
            height: 300px; /* Set height for image on mobile */
            width: 100%; /* Full width */
            position: absolute; /* Position image */
            bottom: 0; /* Position image at the bottom */
            left: 0;
            z-index: -1; /* Send background image behind content */
        }
    
        .second-sec1 .container {
            position: relative; /* Ensure container is above the background */
            z-index: 1; /* Bring the text content above the background */
        }
    }

    .second-sec2{
        background: url(../assets/IMPROVEMENT.webp) no-repeat;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
        height: 100vh;
    }
    .second-sec3{
        background: url(../assets/EXCELLENCE.webp) no-repeat;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
        height: 100vh;
    }
    /* parallex effect end */
    /* training center page */
    .line-banner{
        background: url(../assets/slider-line.png);
        height: 60vh;
    }
    /* training center page end */
.text-14{
    font-size: 14px;
}
/* btn active */
/* Base styling for buttons */
.btnact {
    position: relative;
    background: none; /* Remove default background */
    border: none; /* Remove default border */
    color: #000; /* Text color */
    padding-bottom: 10px; /* Space for border */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 1.5rem; /* Adjust font size as needed */
    font-weight: normal;
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Styling for border animation */
.btnact::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: #114986; /* Border color */
    transition: width 1s ease; /* Smooth width transition */
}

/* Hover effect */
.btnact:hover::after {
    width: 100%; /* Expand the border on hover */
}

/* Active button effect */
.btnact.active::after {
    width: 100%; /* Ensure full width when active */
}

/* Optional: Adjust text color when active */
.btnact.active {
    color: #007bff; /* Active text color */
}

.display{
    display: block;
}

.hidden{
    display: none !important;
}
.text-15{
    font-size: 15px ;
}
.myimg{
    width: 35%; 
    height: 35%; 
    background-color: #fff;
}

/* .myimg1:hover {
background: url(../assets/Untitled\ design.png);
color: #fff;
} */

.myimg1 {
    transition: 0.5s ease-in; /* Adjust the duration and timing function as needed */
}

.myimg1:hover {
    background: url('../assets/hand-shake.png') no-repeat center center;
    background-size: cover; /* Ensure the background image covers the element */
    color: #fff; /* This will apply to text color as well */
    transition: 0.5s ease-out; /* Adjust the duration and timing function as needed */

}

.myimg2 {
    transition: 0.5s ease-in; /* Adjust the duration and timing function as needed */
}

.myimg2:hover {
    background: url('../assets/exami.png') no-repeat center center;
    background-size: cover; /* Ensure the background image covers the element */
    color: #fff; /* This will apply to text color as well */
    transition: 0.5s ease-out; /* Adjust the duration and timing function as needed */

}

.myimg3 {
    transition: 0.5s ease-in; /* Adjust the duration and timing function as needed */
}

.myimg3:hover {
    background: url('../assets/sir.png') no-repeat center center;
    background-size: cover; /* Ensure the background image covers the element */
    color: #fff; /* This will apply to text color as well */
    transition: 0.5s ease-out; /* Adjust the duration and timing function as needed */

}

.myimg4 {
    transition: 0.5s ease-in; /* Adjust the duration and timing function as needed */
}

.myimg4:hover {
    background: url('../assets/lecture2.png') no-repeat center center;
    background-size: cover; /* Ensure the background image covers the element */
    color: #fff; /* This will apply to text color as well */
    transition: 0.5s ease-out; /* Adjust the duration and timing function as needed */

}

.myimg5 {
    transition: 0.5s ease-in; /* Adjust the duration and timing function as needed */
}

.myimg5:hover {
    background: url('../assets/Untitled\ design.png') no-repeat center center;
    background-size: cover; /* Ensure the background image covers the element */
    color: #fff; /* This will apply to text color as well */
    transition: 0.5s ease-out; /* Adjust the duration and timing function as needed */

}
/* modal start */
/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    max-width: 80%;
    max-height: 80%;
}

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

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

.modal-controls {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.modal-controls button {
    background: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.fullscreen {
    position: absolute;
    bottom: 10px;
    right: 10px;
}


/* modal end */
.text-45{
    font-size: 45px;
}
.card-3-image{
    background: url(../assets/card-group.jpg);
    background-size: cover;
    height: 40vh;
}
.card-3-button{
    position: absolute;
    bottom: 5px;
    left: 15px;
}
.card-img1 {
    width: 100% !important;  /* Ensures the image takes up the full width of the card */
    height: 300px !important; /* Set a fixed height for the images */
    object-fit: cover !important; /* Ensures the image covers the area without distortion */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.card-img1:hover {
    transform: scale(1.05); /* Slight zoom-in effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}
.input-hide-border{
    border-left: none;
    border-right: none;
    border-top: none;
    background: transparent;
    border-bottom: 1px solid black;
}
.input-hide-border:focus{
   outline: none;
}
/* select box */
.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%
}

.custom-select {
    display: none; /* Hide the default select */
}

.select-box {
    position: relative;
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 1px solid black;
    padding: 10px;
    cursor: pointer;
}

.select-box .select-text {
    flex: 1;
}

.select-icon {
    margin-left: 10px;
}

.options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    background-color: white;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.options .option {
    padding: 10px;
    cursor: pointer;
}

.options .option:hover {
    background-color: #f1f1f1;
}

.show .options {
    display: block;
}
.error-message {
    color: red;
    font-size: 12px;
    margin-top: 0.5rem;
}
/* slider row */
.content-section {
    display: none !important;
}

.content-section.active {
    /* display: block; */
    display: block !important;
}

.category-content {
    display: none !important;
    /* Hide all sections by default */
}

.category-content.active {
    display: flex !important;
    /* Show the active section */
}
.overlay-img{
    background: url(../assets/1.JPG);
    height: 60vh !important;
    background-repeat: no-repeat;
    background-size: cover;
    
}
@media (max-width: 576px) {
    .text-custom-start {
        text-align: start; /* Align text to the start on small screens */
    }
}
.bg-footer{
    background: #323641 !important;
   
   }
  .card-img-miss-palwasha{
    background: url(../assets/blogs-image/copy-img.jpg);
    width: 100%;
    height: 40vh;
    background-size: cover;
    background-position:inherit;
  }
  .text-30{
    font-size: 30px;
  }