@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
:root {
    
    --fi: Inter;
    --fo: "DM Sans"," sans-serif";
    --light-blue: rgba(1, 158, 191, 1);
    --blue: rgba(22, 52, 80, 1);
    --black: #000;
    --fpmd: 'paralucent-mediumuploadedfile';
    --fpli: 'paralucent-lightuploaded_file';
    --fphy: 'paralucent-heavyuploaded_file';
    --fphy: 'paralucent-heavyuploaded_file';
    --fpeli:'paralucent-extraluploadedfile';
    --fpbld: 'paralucent-bolduploaded_file';
    --fpthin: 'paralucent-bolduploaded_file';
  
}

@font-face {
    font-family: 'paralucent-mediumuploadedfile';
    src: url('../fonts/paralucent-medium-webfont.woff2') format('woff2');   
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'paralucent-lightuploaded_file';
    src: url('../fonts/paralucent-light-webfont.woff2') format('woff2');
        
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'paralucent-heavyuploaded_file';
    src: url('../fonts/paralucent-heavy-webfont.woff2') format('woff2');
        
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'paralucent-extraluploadedfile';
    src: url('../fonts/paralucent-extralight-webfont.woff2') format('woff2');
       
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'paralucent-bolduploaded_file';
    src: url('../fonts/paralucent-bold-webfont.woff2') format('woff2');
        
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'paralucent-thinuploaded_file';
    src: url('../fonts/paralucent-thin-webfont.woff2') format('woff2');
    
    font-weight: normal;
    font-style: normal;

}







::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--blue)
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--fpmd);
}

h6,
p {
    font-family: var(--fi);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

.para {
    position: absolute;
    width: 30%;
    bottom: -110px;
    /* height: 215px; */
    /* overflow-y: hidden; */
}

.para p {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: white;
}

p {
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
}

header {
    position: absolute;
    width: 100%;
    z-index: 4;
    padding: 20px 70px;
}
.home.ul li a {
    color: #fff;
    font-size: 20px;
}
.nav-header {
    /* padding: 20px 70px; */
}

.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Full viewport height */
    display: flex;
    color: white;
    bottom: 0;
    align-items: end;
    bottom: 110px;
}

.transparent-heading {
    font-size: 170px;
    font-weight: 700;
    line-height: 180px;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.blue-heading {
    font-size: 170px;
    font-weight: 700;
    line-height: 200px;
    letter-spacing: 0.05em;
    /* margin: 50px 0; */
    text-align: left;
    color: var(--light-blue);
    text-transform: uppercase;
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    border-radius: 0 0px 40px 40px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #163450eb;
    /* Black with 50% opacity */
    z-index: 1;
    border-radius: 0 0px 40px 40px;
}

.content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 70px;
    /* overflow: hidden; */
}

.nav-toggle span {
    display: table;
    height: 4px;
    width: 39px;
    background: white;
    border-radius: 4px;
    position: relative;
    transition: 0.9s ease;
}

.nav-toggle span:before {
    content: "";
    display: table;
    width: 39px;
    height: 4px;
    background: white;
    top: -11px;
    position: absolute;
    border-radius: 5px;
    transition: 0.9s ease;
}

.nav-toggle span:after {
    content: "";
    display: table;
    width: 39px;
    height: 4px;
    background: white;
    top: 11px;
    position: absolute;
    border-radius: 5px;
    transition: 0.9s ease;
}

.nav-toggle {
    display: table;
    padding: 15px 3px;
    width: 45px;
}

.nav-toggle:hover span {
    width: 30px;
}

.nav-toggle:hover span:before {
    width: 39px;
    transform: translateY(22px);
}

.nav-toggle:hover span:after {
    transform: translateY(-22px);
    width: 39px;
}

.fullscreen-nav {
    position: fixed;
    z-index: 6;
    padding: 80px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/menu-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease;
}

.fullscreen-nav .nav-content {
    position: relative;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.fullscreen-nav .nav-content a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: white;
    display: block;
    transition: 0.3s;
}

.fullscreen-nav .nav-content a:hover {
    color: #f1f1f1;
}

.fullscreen-nav .closebtn {
    font-size: 60px;
    color: white;
    text-decoration: none;
    transition: all 0.5s;
}

.weather-content h6 {
    font-size: 24px;
    font-weight: 400;
    line-height: 29.05px;
    letter-spacing: 0.05em;
    text-align: left;
    color: var(--light-blue);
}

.weather {
    padding: 70px 0 70px 70px;
}

.weather-heading {
    font-size: 82px;
    font-weight: 500;
    line-height: 110.2px;
    text-align: left;
    color: var(--blue);
    text-transform: uppercase;
}

.link {
    background: var(--light-blue);
    padding: 15px 30px;
    color: white;
    font-family: var(--fi);
    font-size: 22.18px;
    font-weight: 600;
    line-height: 33.28px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.7s;
    border: 2px solid var(--light-blue);
}

.link:hover {
    background: white;
    color: var(--light-blue);
}

.who-content {
    background-color: rgb(32 48 64);
    position:relative;
    overflow:hidden;
}


.who-content h6 {
    font-size: 24px;
    font-weight: 400;
    line-height: 29.05px;
}

.who-content .transparent-heading {
    font-size: 70px;
    font-weight: 500;
    line-height: 98.2px;
    text-align: center;
}

.who-content p,
.who-content h6 {
    font-size: clamp(16px, 2vw, 28px);
    /* color: white; */
    line-height: 1.5;
    text-align: center;
    /* padding: 0 140px; */
    font-family: 'DM Sans';
}

.who-content .link,
.work-sec .link {
    padding: 12px 30px 12px 0;
}

.who-content .link:hover {
    background: transparent;
    color: var(--blue);
    border: none;
}

.who-img img {
    height: 840px;
    object-fit: cover;
}

.how-we-work {
    padding: 50px;
    background: var(--blue);
    position: relative;
}

.how-we-work h4 {
    text-align: center;
    color: white;
    font-size: 81px;
    font-weight: 500;
    line-height: 148.2px;
    /* text-align: center; */
}

.work-sec {
    position: relative;
    overflow: hidden;
    height: 600px;
    z-index: 2;
    transition: all 0.7s;
    cursor: pointer;
}

.work-sec .img img {
    display: block;
    width: 100%;
    transition: all 0.7s ease;
    filter: grayscale(100%) brightness(40%);
    height: 100%;
    object-fit: cover;
    height: 100%;
}

.work-sec:hover img {
    filter: grayscale(0%) brightness(80%) blur(10px);
}

.work-sec .work-heading {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px;
    font-size: 70px;
    font-weight: 400;
    line-height: 103.74px;
    text-align: left;
    color: white;

}

.work-sec .link-div {
    position: absolute;
    top: 72%;
    transition: all 0.7s ease;
    z-index: 2;
    opacity: 1;
    width: 100%;
    left: -39px;
}


.work-sec p {
    /* position: absolute; */
    top: 20%;
    transition: all 0.7s ease;
    z-index: 2;
    opacity: 1;
    color: white;
    padding: 20px;
    width: 100%;
}



.work-sec:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, #005162, #3499AC, #085C6D);
    opacity: 0.9;
    transition: all 0.7s ease;
}

.work-sec .link {
    color: white;
    border: none;
    background: transparent;
    text-transform: capitalize;
}

.testimonial {
    padding: 70px 0;
}

.testimonial h6 {
    font-size: 24px;
    font-weight: 400;
    line-height: 29.05px;
    color: var(--light-blue);
    text-transform: uppercase;
    width: 80%;

}

.testimonial P {
    width: 80%;
}

.swiper-button-next,
.swiper-button-prev {
    top: 97%;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    width: 40px;
    height: 40px;
}

.swiper-button-prev {
    right: 60px !important;
    left: auto !important;
    top: 97%;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 22px !important;

}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    color: #959595;
    background: #E4E2E2 !important;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    opacity: 0.7 !important;
}

.brands-logo img {
    width: 80%;
    object-fit: contain;
    height: 120px;
}

.view-articles {
    font-size: 48px;
    font-weight: 400;
    color: var(--blue);

}

.article-div {
    height: 800px;
    margin-top: 40px;
}

.article-img img {
    height: 500px;
    object-fit: cover;
}

.article-content {
    height: 300px;
    overflow-y: scroll;

}

.article-content .date {
    font-size: 19px;
    font-weight: 400;
    line-height: 36px;
}

.article-content h5 {
    font-size: 36px;
    font-weight: 400;
    line-height: 64px;
}

footer {
    background: var(--black);
    position: relative;
    background-size: cover;
    overflow: hidden;
}

.footer-heading {
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    color: white;

}
.footer-nav li {
    display:flex;
    margin-top: 10px;
    gap:10px
    
}.footer-nav li i{
    color:white;
    margin-top:3px;
}
.footer-nav li a {
    font-family: var(--fi);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.5px;
    text-align: left;
    font-family: 'DM Sans';
    color: white;
    display: table;
    transition: all 0.7s;
}
.footer-nav li a:hover{
    color:var(--light-blue);
}
.socials a {
    font-size: 32px;
    color: white;
    transition:all 0.7s;
}
.socials a:hover{
color:var(--light-blue);
}

.footer-nav .input-group input {
    color: white;
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
}

.footer-nav .input-group input::placeholder {
    color: white;
}

.footer-nav .input-group-text {
    color: white;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid white;
    border-radius: 0;
}

.form-check-label {
    color: white;
}

.form-check-label a {
    text-decoration: underline;
    display: inline !important;
}

.footer-nav .form-check-input {
    margin: 0 10px;
}

.lowe-div {
    /* border-top: 1px solid white; */
}

.lowe-div p {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    font-family: 'DM Sans';
}

.banner-image img {
    position: absolute;
    height: 500px;
    width: 100%;
    z-index: 2;
    top: 0;
    object-fit: fill;
}

.overlay.other {
    height: 100%;
    background: #163450;
}

.banner.about {
    height: 500px;
}

h3.transparent-heading.about {
    font-size: 75px;
    text-align: center;
    font-family: var( --fpmd);
}

h4.weather-heading.about {
    font-size: 80px;
    font-weight: 600;
    text-align: center;
}

.about-con p {
    font-size: 22px;
    line-height: 33px;
}

section.Content-Section {
    padding: 280px 0 0;
}

section.locate-sec .container-fluid {
    padding: 0 85px;
}

.main-packeges {
    border: 1px solid #0000002e;
    padding: 80px 30px;
    border-radius: 5px;
}

.fiter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #0000002e;
    padding-bottom: 21px;
    margin-bottom: 20px;
}

.inner-filter a {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    font-family: var(--fo);
}

.clear a {
    color: #01A2C4;
    font-size: 20px;
    text-decoration: underline;
    font-weight: 400;
    font-family: var(--fi);
}

h6.location-hed {
    color: #000000;
    font-weight: 700;
    font-family: var(--fo);
    font-size: 24px;
}

.location-search select {
    border: 1px solid #00000059;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    font-size: 18px;
    font-family: var(--fi);
    padding: 8px;
}

.location {
    border-bottom: 1px solid #0003;
    padding-bottom: 30px;
}

.checkbox span {
    font-size: 20px;
    color: #5D5D5D;
    font-family: var(--fi);
    padding-left: 15px;
}

.checkbox input[type="checkbox"] {
    width: 27px;
    height: 16px;
    margin-bottom: 20px;
}

.exp-level {
    padding-bottom: 30px;
    border-bottom: 1px solid #00000040;
}

.checkbox input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-bottom: 20px;
}

section.locate-sec {
    padding: 100px 0 70px;
}

h4.weather-heading.meta {
    font-size: 30px;
    color: #000;
    line-height: 28px;
    text-transform: capitalize;
}

.main-goes-air {
    border: 1px solid #00000042;
    padding: 35px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.copy-ul ul {
    display: flex;
    padding: 0;
    gap: 60px;
    list-style: disc;
}

.copy-ul li {
    color: #5D5D5D;
    font-family: var(--fi);
    font-size: 20px;
}

.main-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.main-copy i {
    border: 1px solid #0006;
    padding: 19px;
    border-radius: 12px;
    font-size: 34px;
    color: #000;
}

h6.naming-city {
    color: #A1A9B9;
    font-style: italic;
    font-size: 19px;
}

.cpoy-para p {
    font-size: 20px;
    font-weight: 400;
    color: #7B7B7B;
    line-height: 33px;
    width: 1230px;
}

.copy-tit {
    text-align: end;
    font-family: var(--fi);
    font-size: 18px;
    font-style: italic;
    color: #78849A;
}

.load-anc {
    text-align: center;
    width: 220px;
    margin: 0px auto;
}

.load-anc a {
    background: #02A0BD;
    padding: 15px 32px;
    font-size: 20px;
    color: #fff;
    border-radius: 11px;
    font-family: var(--inter);
    font-weight: 500;
    display: block;
    margin: 50px 0 0;
    transition: all .7s;
    border: 3px solid;
}

.who-content.about {
    background: none;
    padding: 60px 0px;
}

.who-content.about h6 {
    color: #019EBF;
}

.sidebar-main-links .transparent-heading {
    display: block;
    font-size: clamp(50px, 6vw + 1rem, 105.28px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-align: left;
    margin-top: 0px;
    color: #fff;
    transition: all 0.7s;
}
.sidebar-main-links .transparent-heading:hover{color: var(--blue);}
.sidebar-navigation {
    position: relative;
    top: 8%;
    /* left: 10px; */
}
ul.mobile-res {
    padding: 0;
    display: flex;
    gap: 1rem;
}

.sidebar-main-links {
    position: relative;
    top: 5%;
    /* left: 50px; */
}

.sidebar-nav li a {
    font-family: var(--fo);
    font-size: 28px;
    font-weight: 600;
    line-height: 32.32px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.7s;


}

.side-bar-socials li a {
    color: white;
    font-size: 30px;
    transition: all 0.7s;

}

.sidebar-nav li a:hover,
.side-bar-socials li a:hover {
    color: var(--blue);
    transform: scale(1.05);
}

h4.transparent-heading.about {
    color: var(--black);
    text-transform: math-auto;
    font-weight: 500;
    /* letter-spacing: 0px; */
    line-height: 1.3;
    -webkit-text-stroke: 0;
    font-size: clamp(25px, 5vw, 64px);
}

p.mt-4.about {
    color: #000;
}

section.con-pge {
    background: #163450;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

h6.mission {
    font-size: 50px;
    font-family: var(--fo);
    color: #fff;
    text-align: center;
    font-weight: 400;
}

.con-hig p {
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    font-family: var(--fi);
}

h3.transparent-heading.about.vision {
    text-transform: capitalize;
    font-size: 100px;
}

.who-content.about.verd {
    /* padding: 72px 121px 0 19px; */
}

.con-hig {
    padding: 0 120px;
}

section.What-we-do.about {
    background: #163450;
    padding: 70px 100px;
}

.about-con h6 {font-size: clamp(1.5rem, 5vw + 1rem, 70px);}

h6.home-g {
    font-size: 40px;
    font-family: var(--fo);
    color: #fff;
    font-weight: 400;
    /* width: 631px; */
    margin-bottom: 50px;
}

p.para-con {
    font-size: 24px;
    font-family: var(--fi);
    color: #fff;
    /* width: 690px; */
    margin-bottom: 30px;
}

.home.ul ul {
    color: #fff;
    list-style: disc;
    font-family: var(--fi);
    font-size: 24px;
    font-weight: 300;
}

.main-serv {
    position: relative;
}

.home-con {
    position: absolute;
    top: 62px;
    left: 20px;
    /* padding: 30px; */
    z-index: 5;
}

.overlay-serve {
    background: #005162;
    width: 100%;
    height: 635px;
}

.home-img img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-serv:hover::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, #005162, #3499AC, #085C6D);
    opacity: 0.9;
    transition: all 0.7s ease;
}

h6.mission.mb-5.vregision {
    color: #163450;
    font-weight: 500;
}

.hed-con p {
    text-align: center;
    margin: 0 auto;
}

section.hed-about {
    padding: 80px 0;
}

.hed-anc {
    display: flex;
    gap: 11px;
    justify-content: center;
    margin-top: 60px;
    flex-wrap: wrap;
}

.hed-iner a {
    background: var(--light-blue);
    color: #fff;
    display: inline-block;
    padding: 15px 44px;
    border-radius: 2px;
    text-transform: uppercase;
    font-family: var(--fi);
    border: 3px solid var(--light-blue);
    transition: all .7s;
}

.hed-iner.call a {
    background: none;
    color: #000;
    border: 3px solid #00000094;
}

.hed-iner a:hover {
    background: transparent;
    color: var(--light-blue);
}

.hed-iner.call:hover a {
    color: #fff;
    background: var(--blue);
}


/* contact start here */
.contact-form {
    padding: 5rem;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(129, 129, 129, 0.5);
    background: #f3f3f3;
}

.contact-form label {
    font-family: var(--fi);
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    text-align: left;

}

.contact-form input,
.contact-form textarea {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(202, 202, 202, 1);
    background: transparent;
}

.contact-form input:focus,
.contact-form textarea:focus {
    background: transparent;
    box-shadow: none;
    border-color: var(--light-blue);
}

.drop-area {
    width: 100%;
    border: 2px dashed #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.drop-area span,
.drop-area i {
    color: #fff;
}

.dropbox-button {
    background: transparent;
    border: 1px solid rgba(124, 124, 124, 1);
    padding: 10px 40px;
    text-align: center;
    color: #fff;
}

.drop-area.dragover {
    border-color: #666666;
    background-color: #f7f7f7;
}


.file-list {
    margin-top: 20px;
}

.file-list li {
    list-style: none;
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.grey {
    /* color: rgba(124, 124, 124, 1); */
}

/* employers starts here */
.employers .weather-heading {
    text-transform: capitalize;
}
#staffingForm{
    border: 2px solid rgba(198, 198, 198, 1);
    padding: 50px;
    margin: 100px 0;
    background: white;
    box-shadow: 0 0 25px #80808069;
}
#staffingForm button{
background:#1b354f;
    border:2px solid #1b354f;
    color:white;
    padding:7px 40px;
    font-size:24px;
    transition: all 0.7s;
}
#staffingForm button:hover{
color:#1f364e;
background:transparent;
border-radius:10px;
}
#staffingForm .form-group {
    margin-bottom: 20px;
}

#staffingForm label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#staffingForm label {
    font-family: var(--fi);
    color: var(--blue);
    font-size: 20px;
    font-weight: 500;
    line-height: 24.2px;


}

#staffingForm select,
#staffingForm textarea,
#staffingForm input[type="file"], input[type="text"],
input[type="submit"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(198, 198, 198, 1);
    font-family: var(--fi);
    font-size: 18.3px;
    font-weight: 400;
    line-height: 22.14px;



}

#staffingForm .breaker {
    border-top: 2px solid #ccc;
    margin: 30px 0;
    padding-top: 10px;
    position: relative;
}
#staffingForm span{
    position:absolute;
    top:-15px;
    padding: 0 10px;
    background:white;
    font-family:var(--fi);
}
.Privacy-con h6 {
    font-family: var(--fo);
    letter-spacing: 0px;
    font-size: clamp(1.5rem, 3.5vw + 1rem, 42px);
    color: #132745;
    font-weight: 500;
    line-height: 1.3;
}
.Privacy-con {
    padding: 0 80px;
}
section.Privacy-pol {
    padding: 27px 0 100px 0;
    position: relative;
    overflow: hidden;
}
.Privacy-con p {
    font-weight: 400;
    font-size: clamp(0.875rem, 1vw + 0.5rem, 18px);
}
section.What-we-do.about.Service {
    background: none;
}
h6.mission.mb-5.Service {
    color: var(--blue);
    font-weight: 500;
}
p.service {
    text-align: center;
    padding: 0 330px;
    margin-bottom: 50px;
}
section.testimonial.Service {
    background: var(--blue);
}
h4.weather-heading.Service {
    color: white;
    font-weight: 400;
    font-size: 90px;
    text-transform: capitalize;
}
h6.Service {
    color: #fff;
    font-size: 18px;
}
p.Srevice {
    color: #fff;
    /* border-bottom: 1px solid; */
    /* padding-bottom: 41px; */
}
span.Service {
    color: #fff;
    font-size: 20px;
}
section.brands-logo {
    margin: 90px 0;
}
section.slider {
    padding: 100px 0;
    position: relative;
    /* overflow: hidden; */
}
.slider-mian {
    position: relative;
}
 section.slider .swiper-slide img {
    display: block;
    object-fit: cover;
  }
  .slider-main .swiper-slider {
    justify-content: start;
}

.test-image img {
    width: 295px;
    height: 295px;
    border-radius: 190px;
}

.slider-inner {
    display: flex;
    gap: 40px;
}

h5.footer-heading.slid {
    color: #132745;
    text-align: start;
    font-weight: 500;
    font-size: 48px;
    line-height: 71.14px;
}

.slider-content span {text-align: start;display: block;font-weight: 600;}

.slider-main .swiper-slide {
    border: 1px solid #0000;
    padding: 90px;
    border-radius: 5px;
    box-shadow: 0px 21px 31px #0000;
    background: #fff;
    height: 490px;
}
.hexagon {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    clip-path: polygon(
      50% 0%,   /* Top center */
      100% 25%, /* Top right */
      100% 75%, /* Bottom right */
      50% 100%, /* Bottom center */
      0% 75%,   /* Bottom left */
      0% 25%    /* Top left */
    );
    margin: 20px;
  }
  .hex-main {
    position: relative;
}

.hex-box {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    clip-path: polygon(
      50% 0%,   /* Top center */
      100% 25%, /* Top right */
      100% 75%, /* Bottom right */
      50% 100%, /* Bottom center */
      0% 75%,   /* Bottom left */
      0% 25%    /* Top left */
    );
    position: absolute;
    top: 22px;
    left: 46px;
}
h6.mission.mb-5.Service.mak {
    font-size: 80px;
}
html,body{
    overflow-x: hidden;
}
.load-anc a:hover {
    background: transparent;
    color: #02A0BD;
}
.home-anc {
    position: absolute;
    bottom: 80px;
    right: 30px;
    z-index: 5;
}

.home-anc a {
    color: #fff;
    font-family: var(--inter);
    font-size: 24px;
    font-weight: 300;
}
.home-anc a i {
    padding-left: 27px;
    font-size: 24px;
}
ul.footer-nav input:focus{
    box-shadow:none;
}
.hexa-image {
    position: absolute;
    top: 10px;
    right: 200px;
    /* width: 223px; */
    /* height: 247px; */
}
.hea-small {
    position: absolute;
    top: 220px;
    right: 130px;
}
.hed-inner {
    position: absolute;
    top: 330px;
    right: 200px;
}
.slider-main {
    box-shadow: 0px 0px 122px #e7e7e7;
    position: relative;
    z-index: 5;
}
.job-details {
    background-color: #ececec;
    padding: 20px 40px;
    margin: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  .job-details .link{
    font-size: 17px;
    padding: 10px 30px;
  }
  .job-details .weather-heading {
    font-size: 24px;
    margin:0;
    line-height: 59.2px;
    text-transform: capitalize;
    
  }
  
  .job-details p {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.5;
  }
  
  .job-details ul {
    padding-left: 20px;
    margin-bottom: 20px;
    list-style: disc;
  }
  
  .job-details ul li {
    margin-bottom: 10px;
  }
  
  .weather-content ul li {
    font-size: 19px;
    font-family: var(--fi);
}

.weather-content ul {
    list-style: disc;
}
.weather-iner {
    display: flex;
    gap: 28px;
    margin-bottom: 15px;
    overflow-y: scroll;
    height: 100%;
}

.weather-iner i {
    color: #fff;
    font-size: 21px;
    border: 3px solid;
    height: 39px;
    padding: 7px 7px;
    border-radius: 38px;
    opacity: 0;
    margin-top: 20px;
}
p.para-first {
    color: #fff;
    /* padding: 0 100px; */
    /* text-align: center; */
    /* text-align: center; */
}

p.serv-para {
    color: #fff;
    /* margin-left: 30px; */
    /* padding: 0 140px; */
    /* text-align: center; */
}
h6.hed-require {
    font-size: 36px;
    color: #fff;
    /* padding: 0 100px; */
    /* text-align: center; */
}
.weather-iner.require {
    display: inherit;
}

.prof-con p {
    /* position: inherit; */
    /* position: absolute; */
    top: 20px;
    left: 0;
}

.wetaher-prof.require {
    position: absolute;
    top: 50px;
    left: 42px;
    display: flex;
    z-index: 2;
}
.weather-iner.sp i {
    opacity: 1;
}

.weather-iner.sp h6 {
    opacity: 1;
}
.prof-con {
    margin-top: 15px;
}
.prof-con {
    margin-top: 15px;
    text-align: start !important;
    /* height: 154px !important; */
    /* overflow-x: hidden; */
    overflow-y: scroll;
}

.prof-con p {
    font-size: 17px;
    line-height: 26px;
}
.prof-con h6 {
    font-size: 26px;
    color: #Fff;
    padding: 0;
    text-align: start;
    opacity: 0;
}

ul.footer-nav.mt-3.m-0.p-0 li a {
    color: white;
}
.wetaher-prof.require.inner {
    top: 289px;
}
.prof-con p {
    padding: 0;
}
.who-img.req img {
    width: 1427px;
}
.wetaher-prof {
    /* padding: 53px 80px; */
}
.prof-con p {
    text-align: start;
    color: #fff;
}
.link-div {
    margin-left: 40px;
}
.team-section h6 {
    font-family: var(--fpbld);
    color: var(--black);
    text-align: center;
    font-size: clamp(32px, 4vw + 1rem, 65px);
    margin-bottom: 10px;
}
    .our-Team {
      width: 100%;
      /* height: 100vh; */
      position: relative;
      /* background-color: #f0f0f0; */
      overflow: hidden;
    }
   .first-angle {
        position: absolute;
        top: -37px;
        left: -93px;
        width: 300px;
        height: 100px;
        /* background: var(--blue); */
        transform: rotate(-45deg);
    }
    .second-angle {
        position: absolute;
        top: -37px;
        right: -93px;
        width: 300px;
        height: 100px;
        /* background: var(--blue); */
        transform: rotate(45deg);
    }
.triangle {
    width: 100%;
    height: 100%;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 60px solid black;
    position: absolute;
    top: 50%;
    left: -100px; /* Initially off-screen */
    transform: translateY(-50%) rotate(90deg); /* Rotate it to point right */
    transition: left 1s ease; /* Smooth transition for left position */
}

.scrolled .triangle {
    left: calc(100% - 100px); /* Move the triangle to the right */
}
    .wave-effect {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
      transform: translate(-100%, 100%) rotate(45deg);
      opacity: 0;
      pointer-events: none;
    }
    
    .team-section.aos-init.aos-animate {
    position: relative;
}

    .who-content.active .wave-effect {
      animation: waveAnimation 2s ease-in-out forwards;
    }
    
    
    
    @keyframes waveAnimation {
      0% {
        transform: translate(-100%, 100%) rotate(45deg);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translate(100%, -100%) rotate(45deg);
        opacity: 0;
      }
    }
    
    
   /* Define the wave animation */
@keyframes waveAnimation {
  0% {
    transform: translate(-100%, 100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, -100%) rotate(45deg);
    opacity: 0;
  }
}

/* Default state without animation */
.wave-effect-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  background: rgb(1 158 191 / 24%); /* Example background color */
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* Hide by default */
  transition: opacity 0.5s; /* Smooth transition for opacity */
}

/* Apply animation when parent section has the 'active' class */
.our-Team.active .wave-effect-area {
  animation: waveAnimation 2s ease-in-out forwards;
  opacity: 1; /* Show when active */
}

section.our-Team {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
/* Define the wave animation */
@keyframes waveAnimation {
  0% {
    transform: translate(-100%, 100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, -100%) rotate(45deg);
    opacity: 0;
  }
}

/* Ensure the wave effect is hidden by default */
.wave-effect-sen {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%); /* Adjust as needed */
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.5s; /* Smooth transition */
}

/* When the section is active, show the wave effect */
.con-pge.active .wave-effect-sen {
  animation: waveAnimation 2s ease-in-out forwards;
  opacity: 1; /* Show when active */
}

/* Style for the section */
.con-pge {
  position: relative;
  padding: 20px;
  border: 1px solid #ccc;
}

.wetaher-prof.weat:hover {
    background: linear-gradient(to top right, #005162, #3499AC, #085C6D);
}
/* Keyframes for wave animation */
@keyframes waveAnimation {
  0% {
    transform: translate(-100%, 100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, -100%) rotate(45deg);
    opacity: 0;
  }
}
section#we-content {
    position: relative;
    overflow: hidden;
}

.wave-effect-den {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  background: #1ab5ed2e; /* Adjust as needed */
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.5s; /* Smooth transition */
}
/* Style for wave effect when active */
.wave-effect-den {
  /* Ensure the element starts hidden */
  opacity: 0;
  transition: opacity 0.5s;
}

.wave-effect-den.active {
  /* Apply the wave animation when the class is active */
  animation: waveAnimation 2s ease-in-out forwards;
}

.team-section p {
    text-align: center;
    /* width: 1200px; */
    padding: 0 190px;
}
.main-para {
    padding: 70px 160px;
}
.work-sec h6 {
    opacity: 1;
}




.work-sec i {
    opacity: 1;
}
h3.testimon {
    font-size: 75px;
    text-align: center;
    padding-top: 70px;
    color: #132745;
}
h3.transparent-heading.about.contect {
    font-size: 51px;
    width: 1000px;
    margin: 0 auto;
    line-height: 81px;
}
h1.weather-heading.cont {
    font-size: 53px;
    line-height: 80px;
}
.test-image i {
    font-size: 46px;
    border: 1px solid;
    padding: 26px;
    border-radius: 60px;
}
.inner-div {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: end;
}

.Weather-content {
    position: absolute;
    right: -100%;
}

.weather-icon:hover.Weather-content {
    left: 0;
}


.weather-icon:hover .Weather-content {
    cursor: pointer;
    right: 0;
}
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      /* text-align: center; */
      font-size: 18px;
      /* background: #fff; */
      /* display: flex; */
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      /* width: 100%; */
      height: 100%;
      object-fit: cover;
    }
    .weather-icon {
    background: #000;
    border-radius: 42px;
    cursor: pointer;
    position: relative;
    right: -31%;
}

.weather-icon i {
    color: #fff;
    font-size: 30px;
    padding: 15px;
}
.we-con {
    text-align: center;
}

.we-con p {
    text-align: center;
    margin-bottom: 50px;
}
.main-weather {position: fixed;top: 760px;right: 50px;width: 100%;z-index: 12;}

.werather-con {
    position: relative;
    right: -100%;
    transition: all .7s;
}

.inner-div:hover .werather-con {
    right: 82px;
    /* width: 100%; */
    cursor: pointer;
}
.main-work {
    display: flex;
    gap: 49px;
    padding: 0 60px;
}
/*.swiper {*/
/*      width: 100%;*/
/*      height: 100%;*/
/*    }*/

/*    .swiper-slide {*/
/*      text-align: center;*/
/*      font-size: 18px;*/
/*      background: #fff;*/
/*      display: flex;*/
/*      justify-content: center;*/
/*      align-items: center;*/
/*    }*/

/*    .swiper-slide img {*/
/*      display: block;*/
/*      width: 100%;*/
/*      height: 100%;*/
/*      object-fit: cover;*/
/*    }*/
    section.who-we-serve {
    background: #00000085;
}
.we-con h6 {
    font-size: 50px;
    font-family: var(--fo);
}
.werather-con h6 {
    color: #fff;
    background: #000;
    padding: 10px;
}
.social-main {
    position: relative;
    overflow: hidden;
    width: 122px;
    height: 75px;
    transition: all .7s;
    background: transparent;
}
.social-main:hover{
    width:530px;
}
.social-icons {
    position: absolute;
    top: 0;
    right: -430px;
    /* transform: translate(-50%, -50%); */
    z-index: 4;
    background: transparent;
}
.social-icons ul {
    padding:0;
    margin:0;
    background: transparent;
}
.social-icons a img {
    width: 46px;
}

.social-icons ul li {
    /* background: #fff; */
    padding: 10px 0 0 30px;
    border-radius: 30px 0 0 30px;
    /* transform: translateX(337px); */
    transition: all .7s;
}
.social-icons a img {
    width: 77px;
    padding-right: 10px;
}

.social-icons ul li {
    /* background: #fff; */
    padding: 0px 12px 0px 12px;
    border-radius: 16px 0 0 16px;
    /* transform: translateX(337px); */
    transition: all .7s;
}

.social-icons li:hover {
    transform: translatex(-427px);
}
.social-icons a {
    font-family: var(--fi);
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
}
    .swiper-container {
      width: 100%;
      height: 200px;
      margin-bottom: 50px;
    }

    .swiper-slide {
      /* display: flex; */
      justify-content: center;
      align-items: center;
      /* background-color: #ddd; */
      font-size: 20px;
      height: 100%;
    }
.comma.my-4.user img {
    width: 100%;
    border-radius: 0px;
    height: 430px;
    object-fit: cover;
}
    /*/ Additional styling for buttons /*/
    .swiper-button-next, .swiper-button-prev {
      /* color: #000; */
    }
    li.man-con {
    list-style: disc;
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
}
    .wetaher-prof.weat {
    background: #163450eb;
    width: 100%;
    height: 280px;
    padding: 19px;
    border-radius: 50px 0;
    transition: all .7s;
    /* overflow-y: scroll; */
}
section.who-we.serve-section {
    padding: 60px 30px;
}
a.user-email {
    color: var(--blue);
    font-family: var(--fpmd);
}
.comma.my-4 img {
    /* width: 300px; */
}
h6.who-are.aos-init.aos-animate {
    font-size: 60px;
    font-family: var(--fo);
    margin-bottom: 40px;
}
.step {
      display: none;
    }
    .step.active {
      display: block;
    }
    .prof-con.more.sop {
    height: 160px;
    overflow-x: hidden;
}
h1.hed-prt {
    font-size: 100px;
    text-transform: uppercase;
    color: #163450;
    text-align: center;
    margin-bottom: 50px;
}
span.team-para {
    /* font-size: 18px; */
}
a.user-email i {
    font-size: 22px;
    margin-right: 10px;
}

a.user-email {
    display: flex;
    align-items: center;
}

a.user-email h6 {
    margin-bottom: 0;
    font-size: 17px;
}
span#location-info {
    /* position: absolute; */
    /* top: 48px; */
    /* left: 103px; */
}


/* Define keyframes for the wave animation */
@keyframes waveAnimation {
  0% {
    transform: translate(-100%, 100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, -100%) rotate(45deg);
    opacity: 0;
  }
}

/* Initial state for the wave effect */
.wave-effect-fen {
  opacity: 0;
  transition: opacity 0.5s;
}

/* Animation applied when active */
.wave-effect-fen.active {
  animation: waveAnimation 2s ease-in-out forwards;
  z-index: -1;
}
.wave-effect-fen {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  background: rgb(1 158 191 / 24%); /* Example background color */
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* Hide by default */
  transition: opacity 0.5s; /* Smooth transition for opacity */
}





/* Define the keyframes for the wave animation */
@keyframes waveAnimation {
  0% {
    transform: translate(-100%, 100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, -100%) rotate(45deg);
    opacity: 0;
  }
}

/* Style for wave effect element */
.wave-effect-test {
  /* Initially hidden */
  opacity: 0;
  /* You can adjust the size and position as needed */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Optionally add a background color or other styles */
  background: rgba(0, 0, 0, 0.1);
}

/* Apply animation when 'active' class is added */
.wave-effect-test.active {
  animation: waveAnimation 2s ease-in-out forwards;
}


.wave-effect-test {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  background: rgb(1 158 191 / 24%); /* Example background color */
  pointer-events: none;
  z-index: 1;
  opacity: 0; /* Hide by default */
  transition: opacity 0.5s; /* Smooth transition for opacity */
}
header.header-job {
    background: #163450;
}
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
z-index: 2;
  }
  .who-content .content{
    position: relative;
    z-index: 1;
    padding: 2.5rem 3rem;
  }
  
  /* ---- stats.js ---- */
  
  .count-particles{
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
  }
  
  .js-count-particles{
    font-size: 1.1em;
  }
  
  #stats,
  .count-particles{
    -webkit-user-select: none;
  }
  
  #stats{
    border-radius: 3px 3px 0 0;
    overflow: hidden;
  }
  
  .count-particles{
    border-radius: 0 0 3px 3px;
  }
  .particles-js-section {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.contact-form {
    background: var(--blue);
    color: #fff;
}

.contact-form input {
    border-bottom: 1px solid #fff !important;
    border: unset;
    padding-bottom: 0;
    color: #fff;
    height: 50px;
}

.contact-form input::placeholder {
    color: #fff;
}