/*
Theme Name: First Supreme Group
Theme URI: https://matebiz.com/
Author: Avinash Chaudhary
Author URI: https://matebiz.com/
Description: Our First Supreme Group Post Consultant theme is clean, blog-focused, and designed for clarity. First Supreme Group Post Consultant's simple, straight forward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: first-supreme-group

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



@font-face {

    font-family: 'Helvetica-Regular';

    src: url('fonts/HelveticaCE-Regular.woff2') format('woff2'),

        url('fonts/HelveticaCE-Regular.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Helvetica_Bold';

    src: url('fonts/HelveticaCE-Bold.woff2') format('woff2'),

        url('fonts/HelveticaCE-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Apolline Std';

    src: url('fonts/ApollineStd-Bold.woff2') format('woff2'),

        url('fonts/ApollineStd-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}





:root {

    --primary-color: #0089c7;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: 'Helvetica_Bold';

}



a {

    font-family: 'Helvetica-Regular';

    text-decoration: none;

}



li,

p {

    font-family: 'Helvetica-Regular';

}



.top-navbar {

    position: relative;

    width: 100%;

    padding: 9px 0;

    background: linear-gradient(174deg, rgba(0, 137, 199, 1) 50%, rgba(0, 0, 0, 1) 100%);

}



.top-navbar-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.top-navbar-left ul {

    display: flex;

    align-items: center;

    gap: 20px;

    margin: 0;

    padding: 0;

}



.top-navbar-left ul li {

    list-style: none;

}



.top-navbar-left ul li a {

    color: #eef7fb;

    font-size: 16px;

}



.top-navbar-right ul {

    display: flex;

    align-items: center;

    gap: 20px;

    margin: 0;

    padding: 0;

}



.top-navbar-right ul li {

    list-style: none;

}



.top-navbar-right ul li:first-child {

    border-right: 1px solid #eef7fb;

    padding-right: 20px;

}



.top-navbar-right ul li a {

    color: #eef7fb;

    font-size: 16px;

}



.main-navbar {

    width: 100%;

    background-color: #fff;

    position: sticky;

    top: 0;

    z-index: 999;

}



.main-navbar-content {

    display: flex;

    align-items: center;

    gap: 60px;

    padding: 8px 0;

}



.navbar-logo img {

    width: 100%;

    height: auto;

}



.navbar-list ul {

    display: flex;

    align-items: center;

    gap: 48px;

    margin: 0;

    padding: 0;

}



.navbar-list ul li {

    list-style-type: none;

}



.navbar-list ul li a {

    color: #000000;

    transition: all 0.3s ease-in-out;

    font-size: 18px;

}



.navbar-list ul li a:hover {

    color: var(--primary-color);

}





/* -------------------Hero section-------------------------- */

.hero-box {

    position: relative;

    width: 100%;

    height: 100%;

    background-image: url('images/hero-bg.jpg');

    background-position: top;

    background-size: cover;

    background-repeat: no-repeat;

}



.hero-circle {

    position: absolute;

    height: 450px;

    width: 450px;

    border-radius: 50%;

    background: linear-gradient(to bottom,

            #006898 100%,

            /* top dark */

            #0089c7 45%,

            /* main blue */

            #0089c7 100%

            /* bottom slightly lighter */

        );

    top: 12%;

    left: 18px;

    z-index: 9;

    animation: float-soft 4s ease-in-out infinite;

}



.hero-squae-boxes {

    position: absolute;

    background-image: url(images/hero-square-boxes.png);

    z-index: 9;

    top: 16%;

    left: 50%;

    width: 150px;

    height: 100px;

    content: '';

    background-size: cover;

    animation: float-rotate 12s ease-in-out infinite;

}



.hero-text {

    position: relative;

    z-index: 999;

    padding-top: 134px;

}



.hero-text h3 {

    font-family: 'Apolline Std';

    font-size: 90px;

    color: #fff;

}



.hero-text-design {

    display: flex;

    align-items: center;

}



.hero-text-design p {

    width: 30%;

    color: #fff;

}



.hero-btn {

    position: relative;

    margin-top: 36px;

    display: flex;

    align-items: center;

}



.hero-btn a {

    background-color: #fff;

    padding: 16px 30px;

    font-size: 18px;

    color: #000000;

    border-radius: 36px;

    margin-left: 24px;

    transition: all 0.3s ease-in-out;

}



.hero-btn a:hover {

    background-color: var(--primary-color);

    color: #fff;

}



.hero-img {

    margin-top: 120px;

    width: 100%;

    height: 100%;

    position: relative;

}



.hero-img img {

    width: 100%;

    height: 100%;

    padding: 6px;

    object-fit: cover;

    object-position: center;

}



.hero-one-icon-img {

    position: absolute;

    width: 80px;

    height: 80px;

    bottom: 30px;

    right: 112px;

    border-radius: 50%;

    animation: float-soft 3s ease-in-out infinite;

}



.hero-two-icon-img {

    position: absolute;

    width: 80px;

    height: 80px;

    bottom: 96px;

    right: 20px;

    border-radius: 50%;

    animation: float-soft 5s ease-in-out infinite;

}



/* hero-section-animation */

@keyframes float-soft {

    0% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-20px);

    }



    100% {

        transform: translateY(0);

    }

}



@keyframes float-rotate {

    0% {

        transform: translateY(0) rotate(0deg);

        opacity: 0.9;

    }



    50% {

        transform: translateY(-20px) rotate(8deg);

        opacity: 1;

    }



    100% {

        transform: translateY(0) rotate(0deg);

        opacity: 0.9;

    }

}



/* ----------------about-section----------------------- */

.padd-sec {

    padding: 60px 0;

}



.about-text {

    width: 88%;

    margin: auto;

}



.about-text h3 {

    font-size: 32px;

    color: #000000;

}



.about-text h3 span {

    color: #013956;

}



.about-img {

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 20px;

}



.about-img img {

    width: 100%;

    height: 100%;

    border-radius: 20px;

    object-fit: cover;

    transition: all 0.3s ease-in-out;

}



.about-img img:hover {

    transform: scale(1.1) rotate(4deg);

    filter: brightness(110%);

}



.about-content {

    position: relative;

    margin-top: 100px;

}





.what-we-do-wrap {

    position: absolute;

    display: flex;

    align-items: center;

    top: 0;

    left: 40%;

}



.what-we-do-text {

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    font-size: 44px;

    font-weight: 700;

    color: #013956;

    letter-spacing: 4px;

    position: relative;

    padding: 20px 30px;

}



.what-we-do-text span {

    color: #000000;

}



.about-right-box-content {

    margin-left: 18px;

    margin-top: -56px;

    position: relative;

}



.about-right-box-content:hover .about-right-box-description h4 {

    color: #013956;

}



.about-right-box-content:hover .about-right-btn a {

    color: #013956;

}



.about-right-box-content:hover .about-circle {

    background-color: #013956;

}



.about-right-box-headings {

    display: flex;

    align-items: start;

    gap: 20px;

    width: 100%;

}



.about-right-box-headings h5 {

    color: #cdcdcd;

    font-size: 44px;

}



.about-right-box-description h4 {

    font-size: 20px;

    color: #000000;

    transition: all 0.3s ease-in-out;

}



.about-right-box-description p {

    font-size: 16px;

    color: #3a3a3a;

    transition: all 0.3s ease-in-out;

}



.about-right-btn a {

    color: #000000;

    transition: all 0.3s ease-in-out;

}



.about-circle {

    position: absolute;

    width: 30px;

    height: 30px;

    background-color: #000000;

    border-radius: 50%;

    z-index: 9;

    top: 21px;

    left: -8px;

    transition: all 0.3s ease-in-out;

}



/* content-two */

.about-right-box-content-two {

    position: relative;

    margin-top: 20px;

    margin-left: 90px;

}



.about-right-box-content-two:hover .about-right-box-description h4 {

    color: #013956;

}



.about-right-box-content-two:hover .about-right-btn a {

    color: #013956;

}



.about-right-box-content-two:hover .about-circle {

    background-color: #013956;

}



/* content-three */

.about-right-box-content-three {

    position: relative;

    margin-top: 20px;

    margin-left: 160px;

}



.about-right-box-content-three:hover .about-right-box-description h4 {

    color: #013956;

}



.about-right-box-content-three:hover .about-right-btn a {

    color: #013956;

}



.about-right-box-content-three:hover .about-circle {

    background-color: #013956;

}



/* -----------------marquee-section----------------------- */

.cyber-security-sec {

    padding-bottom: 0px;

    background-color: #f2f2f2;

    overflow: hidden;

    padding: 60px 0 60px 0;

}



.marquee-main-box {

    display: flex;

    overflow: hidden;

    background: linear-gradient(90deg, #0089c7 0%, #005f8a 100%);

    padding: 20px 0;

    transform: rotate(-2deg) scale(1.1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    width: 105%;

    margin-left: -2.5%;

    z-index: 2;

    position: relative;

}



.marquee-main-box.marquee-black {

    background: #111;

    transform: rotate(-2deg) scale(1.1) translateY(-30px);

    /* Stack below and keep rotation */

    z-index: 1;

    margin-top: -10px;

    /* Overlap slightly or just close */

}



.marquee-box {

    display: flex;

    align-items: center;

    gap: 60px;

    flex-shrink: 0;

    padding-right: 60px;

    animation: slide 20s linear infinite;

}



.marquee-item {

    display: flex;

    align-items: center;

    gap: 30px;

}



.marquee-circle {

    width: 60px;

    height: 60px;

    border: 1px solid #fff;

    border-radius: 50%;

}



.marquee-item h2 {

    font-size: 60px;

    color: #fff;

    margin-bottom: 0;

    text-transform: capitalize;

    white-space: nowrap;

}



.text-stroke {

    -webkit-text-stroke: 1px #fff;

    color: transparent !important;

}



@keyframes slide {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-100%);

    }

}









/* ---------------services-section-------------------- */

.service-sec {

    background-color: #f2f2f2;

}



.service-top-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

}



.service-top-text h2 {

    font-size: 32px;

    width: 70%;

    color: #003e5e;

}



.service-top-text h2 span {

    color: #000000;

}



.service-top-btn a {

    background: linear-gradient(180deg, #005983, #0085c1);

    padding: 16px 30px;

    color: #fff;

    font-size: 18px;

    border-radius: 30px;

    transition: all 0.3s ease-in-out;

}



.service-top-btn a:hover {

    background: var(--primary-color);

}





/* ----------------Expanding Slider---------------- */

.service-slider {

    display: flex !important;

    gap: 20px;

    width: 100%;

    height: 450px;

}



/* Remove slick track styles if still present, but we will disable slick in JS */

/* .service-slider .slick-track,

.service-slider .slick-list {

    display: flex;

    width: 100%;

    height: 100%;

    gap: 20px;

} */

.service-slider .slick-track{
	display: flex !important;
	align-items: center;
	height: 100%;
}

.service-slider .slick-slide{
	margin: 0 10px;
}

.service-box {

    position: relative;

    height: 100%;

    flex: 1;

    /* Default collapsed state */

    border-radius: 30px;

    background-size: cover;

    background-position: center;

    overflow: hidden;

    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);

    cursor: pointer;

    display: flex !important;

    flex-direction: column;

    justify-content: flex-end;

    padding: 30px;

    color: #fff;
	
	transition: all 0.4s ease-in;

    border-bottom-left-radius: 0;

    /* Reset previous */

    border-top-right-radius: 0;

    /* Reset previous */

}

.service-box:hover{
	flex:3;
}

.service-box.active-center{
	flex: 3;
}

/* Overlay for better text readability */

.service-box::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(0, 20, 40, 0) 0%, rgba(0, 20, 40, 0.8) 100%);

    pointer-events: none;

    transition: opacity 0.5s ease;

}



.service-box.active::before {

    background: linear-gradient(180deg, rgba(0, 20, 40, 0) 0%, rgba(0, 89, 131, 0.8) 100%);

}



.service-content {

    position: relative;

    z-index: 2;

    width: 100%;

    transition: all 0.5s ease;

}



.service-icon {

    margin-bottom: 20px;

    font-size: 40px;

    color: #00d4ff;

    /* Bright blue/cyan icon */

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.5s ease 0.1s;

}



/* Show icon only on active? Or always? Design shows icons on all but maybe smaller on inactive. 

   Let's show icons on all but active has them more prominent. 

*/

.service-box .service-icon {

    opacity: 1;

    transform: translateY(0);

}



.service-box h4 {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 0;

    transition: all 0.5s ease;

    white-space: nowrap;

}



.service-hidden-content {

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transition: all 0.5s ease;

}



/* Expanded State */

.service-box.active {

    flex: 3;

    /* Expanded width */

}



.service-box.active h4 {

    font-size: 32px;

    margin-bottom: 10px;

}



.service-box.active .service-hidden-content {

    max-height: 200px;

    /* Enough to show content */

    opacity: 1;

    margin-top: 10px;

}



.service-box p {

    font-size: 16px;

    line-height: 1.5;

    margin-bottom: 8px;

    opacity: 0.9;

}



.service-btn a {

    display: inline-flex;

    align-items: center;

    font-weight: 600;

    color: #fff;

    text-decoration: none;

}



.service-btn a i {

    margin-left: 8px;

    transition: transform 0.3s ease;

}



.service-btn a:hover i {

    transform: translateX(5px);

}



/* Inactive State Visuals */

.service-box:not(.active) h4 {

    transform: rotate(0);

    /* If we wanted vertical text we'd do transform: rotate(-90deg); but design shows horizontal small text at bottom */

}



.service-box:not(.active) .service-icon {

    font-size: 30px;

    margin-bottom: 10px;

}



/* ------------------------blog-section-start-------------------- */

.blog-text-design {

    padding: 8px 6px;

    border: 1px solid #000000;

    border-radius: 30px;

    width: 36%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Helvetica_Bold';

}



.blog-text-design i {

    color: #013956;

    font-size: 12px;

    margin-right: 4px;

}



.blog-text-box h3 {

    font-size: 32px;

    margin-top: 10px;

    color: #003e5e;

}



.blog-text-box h3 span {

    color: #000000;

}



.blog-text-box p {

    color: #3a3a3a;

    font-size: 15px;

}





.blog-btn a {

    background: linear-gradient(180deg, #005983, #0085c1);

    padding: 10px 20px;

    color: #fff;

    font-size: 16px;

    border-radius: 30px;

    transition: all 0.3s ease-in-out;

    margin-top: 16px;

}



.blog-img-box {

    position: relative;

    width: 100%;

    height: 400px;

    border-radius: 10px;

    overflow: hidden;

}



.blog-img-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.blog-img-heading {

    position: absolute;

    z-index: 99;

    bottom: 12px;

    right: 0;

}



.blog-img-heading a {

    background-color: #000000;

    color: #fff;

    padding: 10px 24px;

    transition: all 0.3s ease-in-out;

}



.blog-img-heading a:hover {

    background-color: #003e5e;

}



.blog-list-content span {

    padding: 6px 18px;

    border: 1px solid #d7d7d7;

    border-radius: 30px;

    text-align: center;

    color: #003e5e;

    font-family: 'Helvetica_Bold';

}



.blog-list-content h4 {

    margin-top: 10px;



}



.blog-list-content h4 a {

    color: #2c2b2a;

    font-size: 19px;

    font-family: 'Helvetica_Bold' !important;

}



.blog-lists {

    display: flex;

    gap: 26px;

    flex-direction: column;

}



.blog-list-content:not(:last-child) {

    border-bottom: 2px solid #d7d7d7;

    padding-bottom: 6px;

}





/* -------------testimonail-section---------------------- */

.testimonial-sec {

    background-color: #f2f2f2;

}



.testimonial-text-design {

    padding: 6px 10px;

    border: 1px solid #000000;

    border-radius: 30px;

    width: 42%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Helvetica_Bold';

}



.testimonial-text-design i {

    color: #013956;

    font-size: 12px;

    margin-right: 4px;

}



.testimonial-text-box h3 {

    font-size: 32px;

    margin-top: 10px;

    color: #003e5e;

}



.testimonial-text-box h3 span {

    color: #000000;

}



.testimonial-text-box p {

    color: #3a3a3a;

    font-size: 15px;

}



.tstimonial-slider .slick-slide {

    display: flex !important;

    justify-content: center;

}



.testimonial-img-box {

    display: flex;

    align-items: center;

    gap: 30px;

    width: 100%;

}



.testimonial-img {

    flex: 0 0 340px;

}



.testimonial-img img {

    width: 340px;

    height: 380px;

    object-fit: cover;

    border-radius: 16px;

}



.testimonial-img-icon {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 10px;

}





.testimonial-img-text {

    flex: 1;

}



.testimonial-img-text p {

    color: #4e4e4e;

    font-size: 18px;

}



.testimonial-img-text h5 {

    font-size: 26px;

    margin-bottom: 0;

}



.testimonial-img-text span {

    color: #4b4b4b;

}





/* buttons */

.tstimonial-slider {

    position: relative;

}



/* Common Arrow Style */

.tstimonial-slider .custom-arrow {

    width: 48px;

    height: 48px;

    background-color: #0077b6;

    /* same blue */

    border-radius: 50%;

    border: none;

    display: flex !important;

    align-items: center;

    justify-content: center;

    position: absolute;

    bottom: -20px;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;

}



/* Arrow Icon */

.tstimonial-slider .custom-arrow i {

    color: #ffffff;

    font-size: 18px;

}



/* Hover Effect */

.tstimonial-slider .custom-arrow:hover {

    background-color: #005f8f;

}



/* Left Arrow */

.tstimonial-slider .slick-prev {

    right: 70px;

    left: auto;

    bottom: 14px;

}



/* Right Arrow */

.tstimonial-slider .slick-next {

    right: 10px;

    bottom: 14px;

}



/* -----------------footer-section--------------------------- */

.footer-sec {

    background-image: url('images/footer-bg.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    padding-bottom: 0px;

}



.footer-heading {

    padding: 60px 0;

    border-bottom: 1px solid #fff;

}



.footer-heading h3 {

    font-size: 84px;

    text-align: center;

    color: #fff;

}



.main-footer {

    padding: 60px 0;

    border-bottom: 1px solid #fff;

}



.footer-img img {

    width: 180px;

    height: auto;

}



.footer-logo p {

    color: #fff;

    margin-top: 20px;

}







.quick-links {

    margin-left: 26px;

}



.quick-links h5 {

    font-size: 24px;

    color: #fff;

    margin-bottom: 6px;

}



.quick-links .links-border {

    width: 22%;

    height: 2px;

    background-color: #000000;

}



.quick-links ul {

    margin: 0;

    padding-top: 16px;

}



.quick-links ul li {

    list-style: none;

    position: relative;

    padding: 2px 0;

}



.quick-links ul li::before {

    position: absolute;

    content: url('images/footer-icon.png');

    top: 0;

    left: -20px;

}



.quick-links ul li a {

    color: #fff;

    padding: 4px 0;

    transition: all 0.3s ease-in-out;

}



.quick-links ul li a:hover {

    color: #000000;

}



/* footer-services */



.footer-services h5 {

    font-size: 24px;

    color: #fff;

    margin-bottom: 6px;

}



.footer-services .links-border {

    width: 22%;

    height: 2px;

    background-color: #000000;

}



.footer-services ul {

    margin: 0;

    padding-top: 16px;

}



.footer-services ul li {

    list-style: none;

    position: relative;

    padding: 2px 0;

}



.footer-services ul li::before {

    position: absolute;

    content: url('images/footer-icon.png');

    top: 0;

    left: -20px;

}



.footer-services ul li a {

    color: #fff;

    padding: 4px 0;

    transition: all 0.3s ease-in-out;

}



.footer-services ul li a:hover {

    color: #000000;

}



.contact-details {

    margin-top: 16px;

    display: flex;

    align-items: center;

    gap: 16px;

}



.contact-details i {

    width: 35px;

    height: 35px;

    background-color: #000000;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

}



.contact-details a {

    color: #fff;

    transition: all 0.3s ease-in-out;

}



.contact-details a:hover {

    color: #000000;

}



.footer-btm-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 0;

}



.footer-btm-left p {

    color: #fff;

}



.footer-btm-left p a {

    color: #fff;

}



.social-media-links {

    display: flex;

    align-items: center;

    gap: 10px;

}



.social-media-links i {

    width: 30px;

    height: 30px;

    background-color: #000000;

    color: #fff;

    border-radius: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: all 0.3s ease-in-out;

}



.social-media-links i:hover {

    background-color: #fff;

    color: #000000;

}

.marquee {

  overflow: hidden;

  width: 100%;

}



.marquee-content {

  display: flex;

  gap: 60px;

  white-space: nowrap;

  animation: scroll 15s linear infinite;

}



.marquee-content h3 {

  margin: 0;

}

.marquee-content:hover {

  animation-play-state: paused;

}



@keyframes scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



/* ===== Marquee Base ===== */

.cyber-security-sec {

  overflow: hidden;

}



.marquee-main-box {

  display: flex;

  width: 100%;

  overflow: hidden;

}



.marquee-box {

  display: flex;

  align-items: center;

  gap: 50px;

  white-space: nowrap;

  animation: marquee-left 20s linear infinite;

}



/* ===== Hover Pause ===== */

.marquee-main-box:hover .marquee-box {

  animation-play-state: paused;

}



/* ===== Left to Right ===== */

@keyframes marquee-left {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-100%);

  }

}



/* ===== Right to Left ===== */

.marquee-black .marquee-box {

  animation: marquee-right 20s linear infinite;

}



@keyframes marquee-right {

  0% {

    transform: translateX(-100%);

  }

  100% {

    transform: translateX(0);

  }

}



/* ===== Optional Styling ===== */

.marquee-item {

  display: flex;

  align-items: center;

  gap: 12px;

}



.marquee-main-box:hover .marquee-box {

  animation-play-state: paused;

}













/* ---------------------------------------About-Page-Start--------------------------------- */

        .aboout-pg-sec {

            position: relative;

            background-image: url('images/banner-inner.jpg');

            background-size: cover;

            background-position: center;

            width: 100%;

            height: 300px;

            display: flex;

            justify-content: center;

            align-items: center;

        }



        .aboout-pg-sec .overlay{

            position: absolute;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

            background-color: #0000009e;

        }



        .about-pg-text {

            display: flex;

            flex-direction: column;

            width: 100%;

            justify-content: center;

            align-items: center;

            z-index: 999;

            position: relative;

        }



        .about-pg-text h3{

            font-size: 40px;

            color: #fff;

            text-align: center;

        }



        .about-pg-text ul {

            display: flex;

            align-items: center;

            padding: 0;

            margin: 0;

            gap: 6px;

        }



        .about-pg-text ul li{

            list-style: none;

        }



        .about-pg-text ul li a{

            color: #fff;



        }



        .about-pg-text ul li a:hover{

            color: #0089c7;

        }



        .about-pg-text ul i{

            color: #fff;

        }





        .about-inner-img{

            width: 100%;

            height: 216px;

            overflow: hidden;

            border-radius: 20px;

            animation: img-anim-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);

        }



        .about-inner-img img{

            width: 100%;

            height: 100%;

            border-radius: 20px;

            object-fit: cover;

            transition: all 0.3s ease-in-out;

        }



        .about-inner-img img:hover{

            transform: scale(1.1) rotate(4deg);

            filter: brightness(110%);

        }



        .about-inner-text-design{

            padding: 6px 6px;

            border: 1px solid #000000;

            border-radius: 30px;

            width: 30%;

            display: flex;

            justify-content: center;

            align-items: center;

            font-family: 'Helvetica_Bold' !important;

        }



        .about-inner-text-design i{

            color: #013956;

            font-size: 12px;

            margin-right: 4px;

        }



        .about-inner-right-box h3{

            font-size: 32px;

            margin-top: 14px;

            color: #003e5e;

        }



        .about-inner-right-box h3 span{

            color: #000000;

        }



        .about-inner-right-box p{

            color: #3a3a3a;

            font-size: 16px;

            margin-bottom: 6px;

        }



        .about-inner-btm-text{

            background-color: #ffffff;

            padding: 20px;

            border-radius: 20px;

            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

            transition: all 0.3s ease-in-out;

        }



        .about-inner-btm-text:hover{

            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

            background-color: #003e5e;

            

        }



        .about-inner-btm-text:hover h4{

            color: #fff;

        }



        .about-inner-btm-text:hover .review-content{

            border: 1px solid #ffffff;

        }



        .about-inner-btm-text:hover .review-text h6{

            color: #ffffff;

        }



        .about-inner-btm-text:hover .review-text p{

            color: #ffffff;

        }



        .review-content{

            width: 70px;

            height: 70px;

            display: flex;

            justify-content: center;

            align-items: center;

            border: 1px solid #000000;

            border-radius: 50px;

        }



        .review-content h4{

            margin-bottom: 0;

            font-size: 24px;

            color: #003e5e;

            transition: all 0.3s ease-in-out;

        }



        .review-text{

            margin-top: 10px;

        }



        .review-text h6{

            font-size: 20px;

            color: #003e5e;

            transition: all 0.3s ease-in-out;

        }



        .review-text p{

            font-size: 15px;

            color: #3a3a3a;

            transition: all 0.3s ease-in-out;

        }

        



        @keyframes img-anim-top {

    0% {

      transform: translateY(-5%);

      clip-path: inset(0 0 100% 0);

      opacity: 0;

    }

    100% {

      transform: translateY(0);

      clip-path: inset(0 0 0 0);

      opacity: 1;

    }

  }



  .img-custom-anim-top {

    animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);

    opacity: 0;

  }



  



  /* about-feature-sec */



  .about-features-sec{

    position: relative;

    background: #f2f2f2;

  }



  .features-inner-text-design{

            padding: 6px 6px;

            border: 1px solid #000000;

            border-radius: 30px;

            width: 16%;

            display: flex;

            justify-content: center;

            align-items: center;

            font-family: 'Helvetica_Bold' !important;

        }



        .features-inner-text-design i{

            color: #013956;

            font-size: 12px;

            margin-right: 4px;

        }



        .features-top-text{

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        .features-top-text h3{

            padding-top: 14px;

            width: 90%;

            margin: auto;

            text-align: center;

            color: #003e5e;

            font-size: 32px;

        }



        .features-top-text h3 span{

            color: #000000;

        }



        .about-features-box-one{

            padding: 15px;

            border-radius: 16px;

            background: #f4f8ff;

            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

            transition: all 0.3s ease-in-out;

        }



        .about-features-box-one:hover{

            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

            transform: scale(1.02) translateY(-10px);

        }



        .features-img{

            margin: 10px 0 16px 0;

        }



        .about-features-box-one h4{

            font-size: 24px;

            color: #003e5e;

        }



        .about-features-box-one p{

            color: #3a3a3a;

            font-size: 16px;

            margin-bottom: 6px;

        }



        .about-features-box-one h6{

            padding: 6px;

            border: 1px solid #2a2a2a;

            border-radius: 30px;

            font-family: 'Helvetica-Regular' !important;

        }







        /* --why-choose-sec-- */

        .why-choose-us-inner-text-design{

            padding: 6px 6px;

            border: 1px solid #000000;

            border-radius: 30px;

            width: 33%;

            display: flex;

            justify-content: center;

            align-items: center;

            font-family: 'Helvetica_Bold' !important;

        }



        .why-choose-us-inner-text-design i{

            color: #013956;

            font-size: 12px;

            margin-right: 4px;

        }



        .why-choose-left-box h3{

            margin-top: 14px;

            color: #003e5e;

            font-size: 32px;

        }



        .why-choose-left-box h3 span{

            color: #000000;

        }



        .why-choose-left-box p{

            color: #3a3a3a;

            font-size: 16px;

            margin-bottom: 6px;

        }



        .why-choose-left-box ul{

            margin: 0;

            padding: 0;

        }



        .why-choose-left-box ul li {
    list-style: none;
    margin: 10px 6px;
    background-color: #003e5e;
    padding: 6px 16px;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
}



        .why-choose-btn a{

            background: linear-gradient(180deg, #005983, #0085c1);

            padding: 16px 30px;

            color: #fff;

            font-size: 18px;

            border-radius: 30px;

            transition: all 0.3s ease-in-out;

        }



        .why-choose-img{

            width: 100%;

            height: 100%;

            overflow: hidden;

            border-radius: 20px;

            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

        }



        .why-choose-img img{

            width: 100%;

            height: 100%;

            object-fit: cover;

            border-radius: 20px;

            transition: all 0.3s ease-in-out;

            animation: img-anim-top 2s forwards cubic-bezier(0.645, 0.045, 0.355, 1);

        }



        .why-choose-img img:hover{

            transform: scale(1.1) rotate(4deg);

            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

            filter: brightness(110%);

        }



        /* -------------------logo-sec-------------- */



        .about-logo-sec{

            background-color: #f2f2f2;

        }



        .logo-inner-text-design{

            padding: 6px 6px;

            border: 1px solid #000000;

            border-radius: 30px;

            width: 18%;

            display: flex;

            justify-content: center;

            align-items: center;

            font-family: 'Helvetica_Bold' !important;

        }



        .logo-inner-text-design i{

            color: #013956;

            font-size: 12px;

            margin-right: 4px;

        }



        .about-logo-text{

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        .about-logo-text h3{

            padding-top: 14px;

            width: 90%;

            margin: auto;

            text-align: center;

            color: #003e5e;

            font-size: 32px;

        }



        .about-logo-text h3 span{

            color: #000000;

        }



        .about-logo-img{

            background-color: #f4f8ff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

            transition: all 0.3s ease-in-out;

            width: 90%;

            margin: auto;

        }



        .about-logo-img:hover{

            transform: translateY(-10px);

            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        }



        .about-logo-img img{

            width: 100%;

            height: auto;

            object-fit: cover;

            transition: all 0.3s ease-in-out;

        }



        .about-logo-img img:hover{

            transform: scale(1.1);

        }





        /* ----------------------------blog-page-start----------------------------- */

        .blog-page-top-text{

                display: flex;

                flex-direction: column;

                align-items: center;

        }



        .our-blog-inner-text-design{

            padding: 6px 6px;

            border: 1px solid #000000;

            border-radius: 30px;

            width: 18%;

            display: flex;

            justify-content: center;

            align-items: center;

            font-family: 'Helvetica_Bold' !important;

        }



        .our-blog-inner-text-design i{

                color: #013956;

                font-size: 12px;

                margin-right: 4px;

        }



        .blog-page-top-text h3{

            padding-top: 14px;

            width: 100%;

            margin: auto;

            text-align: center;

            color: #003e5e;

            font-size: 32px;

        }



        .blog-page-box{

            padding: 20px;

            background-color: #ffffff;

            border-radius: 16px;

            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

            transition: all 0.3s ease-in-out;

        }





        .blog-page-box:hover{

            transform: scale(1.01) translateY(-10px);

            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        }



        .blog-page-box:hover .blog-page-img img{

            transform: scale(1.02);

            filter: brightness(50%);

        }





        .blog-page-img{

            width: 100%;

            height: 100%;

            overflow: hidden;

            border-bottom-left-radius: 40px;

            border-top-right-radius: 40px;

            



        }



        .blog-page-img img{

            width: 100%;

            height: auto;

            object-fit: cover;

            transition: all 0.3s ease-in-out;

        }



        .blog-page-admin{

            display: flex;

            align-items: center;

            gap: 20px;

            margin-top: 14px;

        }



        .blog-page-admin h6{

            font-size: 16px;

            color: #003e5e;

            font-family: 'Helvetica-Regular' !important;

        }



        .blog-page-box h3{

            margin-top: 8px;

        }



        .blog-page-box h3 a{

            font-size: 21px;

            color: #2a2a2a;

            font-family: 'Helvetica_Bold' !important;

            transition: all 0.3s ease-in-out;

        }



        .blog-page-box h3 a:hover{

            color: #003e5e;

        }



        .blog-page-btn a{

            color: #000000;

            transition: all 0.3s ease-in-out;

        }



        .blog-page-btn a:hover{

            color: #003e5e;

        }







        /* ---------------------------------------blog-detail-page----------------------- */



        .blog-detail-img{

            width: 100%;

            height: 400px;

            overflow: hidden;

            border-radius: 20px;

            

        }



        .blog-detail-img img{

            width: 100%;

            height: 100%;

            border-radius: 20px;

            object-fit: cover;

            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

            transition: all 0.3s ease-in-out;

            animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);

        }



        .blog-detail-img img:hover{

            transform: scale(1.05);

            filter: brightness(110%);

            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        }



        .blog-icons-content ul{

            margin: 20px 0;

            padding-left: 0;

            padding-bottom: 20px;

            display: flex;

            align-items: center;

            gap: 30px;

            border-bottom: 1px solid #2a2a2a;

        }



        .blog-icons-content ul li{

            list-style: none;

            font-size: 18px;

            color: #003e5e;

            display: flex;

            align-items: center;

        }



        .blog-icons-content ul li i{

            width: 35px;

            height: 35px;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: #003e5e;

            color: #fff !important;

            border-radius: 50px;

        }



        .blog-detail-text h4{

            font-size: 22px;

        }



        .blog-detail-text p{

                color: #3a3a3a;

                font-size: 16px;

                margin-bottom: 6px;

        }



        .blog-detail-box h2{

                color: #003e5e;

                font-size: 32px;

                margin-bottom: 14px;

        }



        .blog-detail-box h2 span{

            color: #000000;

        }



        .blog-detail-post-box{

            padding: 30px;

            background: #003e5e;

            border-radius: 16px;

            position: sticky;

            top: 120px;

        }



        .blog-detail-post-box h5{

            font-size: 24px;

            color: #ffffff;

        }



        .blog-detail-post-box ul{

            padding: 0;

            margin: 0;

        }

        

        .blog-detail-post-box ul li{

            list-style: none;

            padding: 14px;

            margin: 14px 0;

            border: 1px solid #fff;

            border-radius: 6px;

            transition: all 0.3s ease-in-out;

        }



        .blog-detail-post-box ul li a{

            font-size: 16px;

            color: #ffffff;

        }



        .blog-detail-post-box ul li:hover{

            background-color: #000000;

            border: none;

        }



        /* ----------------------------services-detail-page---------------------------- */

        .service-detail-left-box{

            padding: 30px;

            background-color: #f4f8ff;

            border-radius: 16px;

             box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        }



        .service-detail-left-box h5{

            font-size: 24px;

            color: #000000;

        }



        .our-serivce-one-box{

            display: flex;

            justify-content: space-between;

            align-items: center;

            border: 1px solid #003e5e;

            border-radius: 12px;

            padding: 12px;

            margin: 14px 0;

            transition: all 0.3s ease-in-out;

           box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

        }



        .our-serivce-one-box:hover{

            background-color: #003e5e;

        }



        .our-serivce-one-box:hover a{

            color: #fff;

        }



         .our-serivce-one-box:hover i{

            color: #fff;

        }



        .our-serivce-one-box a{

            font-size: 20px;

            margin-bottom: 0;

            color: #003e5e;

        }



        .our-serivce-one-box i{

            font-size: 20px;

            margin-bottom: 0;

            color: #003e5e;

        }



        .quote-form-box {

  background: #ffffff;

  padding: 30px;

  border-radius: 20px;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  margin-top: 26px;

  position: sticky;

  top: 80px;

}



.quote-form-box h4 {

  font-size: 26px;

  color: #003e5e;

  margin-bottom: 6px;

}



.quote-form-box p {

  font-size: 15px;

  color: #5a5a5a;

  margin-bottom: 20px;

}



.quote-form-box .form-label {

  font-size: 14px;

  color: #003e5e;

  font-weight: 600;

}



.quote-form-box .form-control,

.quote-form-box .form-select {

  height: 48px;

  border-radius: 12px;

  border: 1px solid #d7d7d7;

  font-size: 14px;

}



.quote-form-box .form-control:focus,

.quote-form-box .form-select:focus {

  border-color: #0085c1;

  box-shadow: none;

}



.quote-btn {

  width: 100%;

  background: linear-gradient(180deg, #005983, #0085c1);

  border: none;

  padding: 14px;

  color: #ffffff;

  font-size: 16px;

  border-radius: 30px;

  transition: all 0.3s ease-in-out;

}



.quote-btn i {

  margin-left: 6px;

}



.quote-btn:hover {

  background: #0089c7;

  transform: translateY(-2px);

}

 .quote-form-box br{
     display: none;
 }


.service-detail-img{

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 30px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    animation: img-anim-top 2s forwards cubic-bezier(0.645, 0.045, 0.355, 1);

}



.service-detail-right-box h2{

    font-size: 32px;

    margin: 10px 0;

}



.service-detail-right-box p{

    color: #3a3a3a;

    font-size: 16px;

    margin-bottom: 6px;

}



.service-detail-right-box h4{

    font-size: 24px;

    margin: 10px 0;

}



.service-detail-right-box .list{

    padding-left: 0;

    max-width: 650px;

    margin-top: 25px;

    margin-bottom: 0;

}



.service-detail-right-box .list li{

    display: inline-block;

    list-style-type: none;

    background: #F9F8FB;

    border-radius: 30px;

    letter-spacing: 0.02em;

    color: #504E4E;

    position: relative;

    padding: 12px 20px 12px 42px;

    margin-bottom: 20px;

}



.service-detail-right-box .list li i{

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

}





/* -----------------------contact-page-start----------------------------------------- */

.contact-inner-box{

    padding: 30px;

    background-color: #ffffff;

    border-radius: 16px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    transition: all 0.3s ease-in-out;

}



.contact-inner-box:hover{

    background-color: #003e5e;

    cursor: pointer;

    transform: scale(1.02) translateY(-10px);

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}



.contact-inner-box:hover .contact-inner-icons i{

    background-color: #ffffff;

    color: #003e5e;

}



.contact-inner-box:hover h5{

    color: #fff;

}



.contact-inner-box:hover a{

    color: #ffffff;

}



.contact-inner-icons{

    display: flex;

    justify-content: center;

    align-items: center;

}



.contact-inner-icons i{

    width: 60px;

    height: 60px;

    background: #003e5e;

    color: #ffffff;

    border-radius: 6px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

    transition: all 0.3s ease-in-out;

}



.contact-inner-box h5{

    font-size: 24px;

    margin: 10px;

    color: #003e5e;

    transition: all 0.3s ease-in-out;

}



.contact-inner-box a{

    color: #000000;

    transition: all 0.3s ease-in-out;

}



/* --------------------contact-map-sec------------------ */

.contact-map-inner-text-design{

    padding: 6px 6px;

    border: 1px solid #000000;

    border-radius: 30px;

    width: 33%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Helvetica_Bold' !important;

}



.contact-map-inner-text-design i{

    color: #013956;

    font-size: 12px;

    margin-right: 4px;

}



.contact-map-left-box h3{

    padding-top: 14px;

    color: #003e5e;

    font-size: 32px;

}



.contact-map-left-box h3 span{

    color: #000000;

}



.contact-map-left-box p{

    color: #3a3a3a;

    font-size: 16px;

    margin-bottom: 6px;

}



.conact-main-map-box{

    margin-top: 20px;

}



.conact-main-map-box iframe{

    width: 100%;

    height: 500px;

    border-radius: 20px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}



.contact-map-sec .contact-form-box {

  background: #f6f9ff;

  padding: 40px;

  border-radius: 18px;

}



.contact-map-sec .contact-form-box h3 {

  font-size: 28px;

  font-weight: 700;

  color: #0b1f44;

  margin-bottom: 10px;

}



.contact-map-sec .contact-form-box p {

  font-size: 15px;

  color: #6b7280;

  margin-bottom: 30px;

}



.contact-map-sec .contact-form-box .form-label {

  font-size: 14px;

  font-weight: 600;

  color: #0b1f44;

  margin-bottom: 6px;

}



.contact-map-sec .contact-form-box .form-control {

  height: 46px;

  border-radius: 10px;

  border: 1px solid #dbe3f0;

  font-size: 14px;

  padding: 10px 14px;

}



.contact-map-sec .contact-form-box .form-control:focus {

  border-color: #3b82f6;

  box-shadow: none;

}



.contact-map-sec .send-btn {

  background: #2563eb;

  color: #ffffff;

  border: none;

  padding: 12px 26px;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 600;

  transition: 0.3s ease;

}



.contact-map-sec .send-btn:hover {

  background: #1d4ed8;

  transform: translateY(-2px);

}





/* --------------------------career-page-start--------------------------- */

.career-page-sec .job-card {

  background: #ffffff;

  padding: 30px;

  border-radius: 18px;

  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

  height: 100%;

}



.career-page-sec  .job-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 18px;

}



.career-page-sec .job-icon {

  width: 46px;

  height: 46px;

  background: #003e5e;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 18px;

}



.career-page-sec  .job-tags span {

  background: #eef2ff;

  color: #003e5e;

  padding: 5px 12px;

  font-size: 12px;

  border-radius: 20px;

  margin-left: 6px;

  font-weight: 500;

}



.career-page-sec .job-card h4 {

  font-size: 22px;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 10px;

}



.career-page-sec .job-card p {

  font-size: 14px;

  color: #475569;

  margin-bottom: 16px;

}



.career-page-sec .job-card h6 {

  font-size: 14px;

  font-weight: 700;

  margin-bottom: 10px;

  color: #0f172a;

}



.career-page-sec .job-card ul {

  padding-left: 18px;

  margin-bottom: 18px;

}



.career-page-sec .job-card ul li {

  font-size: 14px;

  color: #475569;

  margin-bottom: 6px;

}



.career-page-sec .job-benefits {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 20px;

}



.career-page-sec .job-benefits span {

  background: #003e5e;

  color: #fff;

  padding: 6px 14px;

  font-size: 12px;

  border-radius: 20px;

}



.career-page-sec .apply-btn {

  display: inline-block;

  background: #000000;

  color: #fff;

  padding: 10px 22px;

  border-radius: 24px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition: 0.3s;

}



.career-page-sec .apply-btn:hover {

  background: #003e5e;

  color: #fff;

  transform: translateY(-2px);

}



.career-page-text-design{

    padding: 6px 6px;

    border: 1px solid #000000;

    border-radius: 30px;

    width: 30%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Helvetica_Bold' !important;

}



.career-page-top-text{

    display: flex;

    align-items: center;

    flex-direction: column;

}



.career-page-text-design i{

    color: #013956;

    font-size: 12px;

    margin-right: 4px;

}



.career-page-top-text h3{

    padding-top: 14px;

    text-align: center;

    color: #003e5e;

    font-size: 32px;

}



/* career-application-form */

.career-page-appl-form {

  padding: 80px 0;

  background: #f8fafc;

}



.career-page-appl-form .career-form-box {

  background: #ffffff;

  padding: 45px 50px;

  border-radius: 18px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.08);

}



.career-page-appl-form .career-form-subtitle {

  display: block;

  text-align: center;

  color: #003e5e;

  font-weight: 600;

  margin-bottom: 6px;

}



.career-page-appl-form .career-form-title {

  text-align: center;

  font-size: 30px;

  font-weight: 800;

  color: #003e5e;

  margin-bottom: 30px;

}



.career-page-appl-form .career-input,

.career-page-appl-form .career-textarea {

  width: 100%;

  height: 48px;

  border-radius: 10px;

  border: 1px solid #e2e8f0;

  padding: 10px 14px;

  font-size: 14px;

}



.career-page-appl-form .career-textarea {

  height: auto;

  resize: none;

}



.career-page-appl-form .career-input:focus,

.career-page-appl-form .career-textarea:focus {

  border-color: #003e5e;

  outline: none;

}



.career-page-appl-form .career-upload-label {

  font-size: 14px;

  font-weight: 600;

  display: block;

  margin-bottom: 6px;

}



.career-page-appl-form .career-file {

  width: 100%;

  border: 1px solid #e2e8f0;

  padding: 10px;

  border-radius: 10px;

  font-size: 14px;

}



.career-page-appl-form .career-note {

  display: block;

  font-size: 12px;

  color: #64748b;

  margin-top: 6px;

}



.career-page-appl-form .career-submit-btn {

  background: #003e5e;

  color: #ffffff;

  border: none;

  padding: 12px 30px;

  border-radius: 25px;

  font-size: 15px;

  font-weight: 600;

  margin-top: 20px;

  transition: 0.3s;

}



.career-page-appl-form .career-submit-btn:hover {

  background: #006898;

  transform: translateY(-2px);

}





/* ----------------------------------services-page-start--------------------------------- */

.service-inner-top-text{

    display: flex;

    align-items: center;

    flex-direction: column;

}



.service-inner-text-design{

    padding: 6px 6px;

    border: 1px solid #000000;

    border-radius: 30px;

    width: 16%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Helvetica_Bold' !important;

}



.service-inner-text-design i{

    color: #013956;

    font-size: 12px;

    margin-right: 4px;

}



.service-inner-top-text h3{

    padding-top: 14px;

    color: #003e5e;

    font-size: 32px;

}



.service-inner-top-text h3 span{

    color: #000000;

}



.service-inner-text-box{

    padding: 20px 30px;

    border-radius: 20px;

    background-color: #f4f8ff;

    transition: all 0.3s ease-in-out;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}



.service-inner-text-box:hover{

    transform: scale(1.02) translateY(-10px);

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}



.service-inner-text-box:hover .service-inner-image img{

    transform: scale(1.10);

    filter: brightness(60%);

}



.service-inner-text-box:hover h4{

    color: #003e5e;

}



.service-inner-text-box:hover a{

    color: #000000;

}



.service-inner-image{

    width: 100%;

    height: 250px;

    overflow: hidden;

    border-radius: 15px;

}



.service-inner-image img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 15px;

    transition: all 0.3s ease-in-out;

}



.service-inner-text-box h4{

    font-size: 24px;

    margin: 10px 0;

    transition: all 0.3s ease-in-out;

}



.service-inner-text-box p{

    color: #3a3a3a;

    font-size: 15px;

}



.service-inner-btn a{

    color: #003e5e;

    font-family: 'Helvetica_Bold' !important;

    transition: all 0.3s ease-in-out;

}



/* Scroll To Top Button */

#scrollTopBtn {

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 50px;

    height: 50px;

    background: #0d6efd; /* bootstrap blue */

    color: #fff;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    font-size: 18px;

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    transition: all 0.3s ease;

}



#scrollTopBtn:hover {

    background: #084298;

    transform: translateY(-3px);

}

/* 05.01.2026 */
.about-inner-left-box {
    position: sticky;
    top: 0;
}

.service-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/* RESPONSIVE QUERY______ */


@media only screen and (max-width: 1280px) {

}

@media only screen and (max-width: 1199px) {
	
	.hero-text h3 {
    font-size: 85px;
}
	
	.navbar-list ul {
    gap: 24px;
}
	
	.why-choose-us-inner-text-design {
    width: 36%;
}

}

@media only screen and (max-width: 1140px) {
	
	.hero-two-icon-img {
    position: absolute;
    width: 80px;
    height: 80px;
    bottom: 74px;
    right: 20px;
    border-radius: 50%;
    animation: float-soft 5s ease-in-out infinite;
}
	
	.hero-one-icon-img {
    position: absolute;
    width: 80px;
    height: 80px;
    bottom: 15px;
    right: 112px;
    border-radius: 50%;
    animation: float-soft 3s ease-in-out infinite;
}
	
	.our-team-sec .our-team-content .our-team-box .our-team-btm-text h4 {
    font-size: 21px !important;
}

}

@media only screen and (max-width: 1024px) {
	
	.hero-img {
    margin-top: 66px;
    z-index: 9;
}
	
	.hero-two-icon-img {
        bottom: 56px;
    }
	
	.hero-one-icon-img {
        bottom: 4px;
        right: 92px;
    }
	
	    .hero-text h3 {
        font-size: 76px;
    }

}

@media only screen and (max-width: 991px) {
	
	
	/* Toggle button */
.menu-btn {
    font-size: 26px;
    border: none;
    background: transparent;
    color: #000;
}

/* Offcanvas width */
.offcanvas {
    width: 280px;
}

/* Logo */
.offcanvas-logo img {
    max-width: 150px;
}

/* Menu list */
.offcanvas .navbar-nav {
    margin-top: 30px;
}

/* Menu items */
.offcanvas .nav-link {
    font-size: 18px;
    padding: 10px 0;
    color: #000;
}

/* Hover effect */
.offcanvas .nav-link:hover {
    color: #0d6efd;
}

/* Remove default focus outline */
.menu-btn:focus {
    box-shadow: none;
}
	
	.main-navbar-content {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 8px 0;
    justify-content: space-between;
}
	
	
	.top-navbar-left ul li {
    list-style: none;
    display: none;
}
	
	.top-navbar-content {
    display: flex;
    justify-content: start;
    align-items: center;
}
	
	.hero-img {
        margin-top: 60px;
    }
	
	.hero-text h3 {
        font-size: 54px;
    }
	
	.hero-text-design p {
    width: 100%;
		order: 3;
}
	
	.about-text {
    width: 100%;
}
	
	.what-we-do-wrap {
    display: none;
}
	
	.about-content {
    margin-top: 50px;
}
	
	.about-right-box-content {
    margin-left: 0px;
    margin-top: 40px;
    position: relative;
}
	
	.about-right-box-content-two {
    position: relative;
    margin-top: 30px;
    margin-left: 0px;
}
	
	.about-right-box-content-three {
    position: relative;
    margin-top: 30px;
    margin-left: 0px;
}
	
	.marquee-item h2 {
    font-size: 40px;
}
	
	.service-top-content {
    display: block;
    /* justify-content: space-between; */
    /* align-items: center; */
    margin-bottom: 40px;
}
	
	.service-top-btn.wow.animate__.animate__zoomIn.animated {
    margin-top: 28px;
}
	
	.service-top-text h2 {
    font-size: 26px;
    width: 100%;
    color: #003e5e;
}
	
	.blog-img-box {
    margin-top: 50px;
}
	
	.blog-lists {
    margin-top: 36px;
}
	
	.service-box.active {
    flex: 10;
}
	
	.quick-links {
    margin-left: 0px;
}
	
	.about-text h3 {
    font-size: 26px;
}

	.blog-text-box h3 {
    font-size: 26px;
}
	
	.testimonial-text-box h3 {
    font-size: 26px;
}
	
	.footer-heading h3 {
    font-size: 60px;
}

	.service-box:nth-child(4),
	.service-box:nth-child(5){
		display: none;
	}
	
	.hero-text-design {
    display: flex;
    align-items: start;
    flex-direction: column;
}
	
	.about-inner-text-design {
    margin-top: 30px;
}
	
	.about-inner-right-box h3 {
    font-size: 26px;
}
	
	.features-top-text h3 {
    font-size: 26px;
}
	
	.features-inner-text-design {
    width: 24%;
}
	
	.aboout-pg-sec {
    height: 250px;
}
	
	.why-choose-left-box h3 {
    font-size: 26px;
}
	
	.logo-inner-text-design {
    width: 26%;
}
	
	.about-logo-text h3 {
    font-size: 26px;
}
	
	.service-inner-text-design {
    width: 24%;
}
	
	.service-inner-top-text h3 {
    font-size: 26px;
		text-align: center;
}
	
	.service-detail-right-box h2 {
    font-size: 26px;
    margin: 16px 0;
}
	
	.career-page-text-design {
    width: 42%;
}
	
	.career-page-top-text h3 {
    font-size: 26px;
}
	
	.career-page-appl-form .career-form-title {
    font-size: 26px;
}
	
	.contact-map-left-box h3 {
    font-size: 26px;
}
	
	.blog-page-top-text h3 {
    font-size: 26px;
}
	
	.blog-detail-box h2 {
    font-size: 26px;
}
	
	.our-team-sec .our-team-text-design {
    width: 18% !important;
}
	
	.our-team-sec .our-team-text-box h3 {
    font-size: 26px !important;
}

	
}


@media only screen and (max-width: 980px) {

}

@media only screen and (max-width: 840px) {

	.hero-text h3 {
        font-size: 48px;
    }
	
}


@media only screen and (max-width: 800px) {

}


@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 767px) {
	
	.hero-btn.wow.animate__.animate__zoomIn.animated img {
    display: none;
}
	
	.about-text h3 {
    font-size: 24px;
}
	
	.service-top-text h2 {
        font-size: 24px;
        width: 100%;
        color: #003e5e;
    }
	
	    .blog-text-box h3 {
        font-size: 24px;
    }
	
	.testimonial-text-box h3 {
        font-size: 24px;
    }
	
	    .footer-heading h3 {
        font-size: 46px;
    }
	
	.hero-text-design p {
        width: 100%;
    }
	
	.hero-text h3 {
        font-size: 40px;
    }
	
	.hero-squae-boxes {
    left: 63%;
}
	
	    .hero-one-icon-img {
        bottom: 18px;
        right: 50px;
        width: 60px;
        height: 60px;
    }
	
	    .hero-two-icon-img {
        bottom: 48px;
        right: 0px;
        width: 60px;
        height: 60px;
    }
	
	.hero-text {
    padding-top: 74px;
}
	
	.testimonial-img {
    flex: 0 0 340px;
    display: flex;
    justify-content: center;
    align-items: center;
}
	
	.tstimonial-slider .slick-slide {
    display: block !important;
    justify-content: center;
}
	
	.testimonial-img img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
}
	
	.footer-btm-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    flex-direction: column;
}
	
	.social-media-links {
    margin-top: 10px;
}
	
	.hero-btn {
    margin-top: 12px;
}
	
	.service-top-btn a {
    padding: 12px 20px;
}
	
	.hero-btn a {
    padding: 8px 20px;
    font-size: 16px;
	margin-left: 0px;
}
	
	.about-inner-right-box h3 {
        font-size: 24px;
    }
	
	.features-inner-text-design {
        width: 30%;
    }
	
	.features-top-text h3 {
        font-size: 24px;
    }
	
	.about-features-box-one h4 {
    font-size: 22px;
    color: #003e5e;
}
	
	.why-choose-left-box h3 {
        font-size: 24px;
    }
	
	.logo-inner-text-design {
        width: 35%;
    }
	
	.about-logo-text h3 {
        font-size: 24px;
    }
	
	.aboout-pg-sec {
        height: 220px;
    }
	
	.about-pg-text h3 {
    font-size: 30px;
}
	
	.why-choose-btn a {
    padding: 10px 20px;
}
	
	    .service-inner-text-design {
        width: 30%;
    }
	
	.service-inner-top-text h3 {
        font-size: 24px;
        text-align: center;
    }
	
	.service-detail-right-box h2 {
        font-size: 24px;
        margin: 14px 0;
    }
	
	.service-detail-right-box h4 {
    font-size: 20px;
    margin: 8px 0;
}
	
	.career-page-text-design {
        width: 56%;
    }
	
	    .career-page-top-text h3 {
        font-size: 24px;
    }
	
	.career-page-appl-form .career-form-title {
        font-size: 24px;
    }
	
	.contact-map-left-box h3 {
        font-size: 24px;
    }
	
	.contact-map-sec .contact-form-box h3 {
    font-size: 24px;
}
	
	.our-blog-inner-text-design {
    width: 30%;
}
	
	.blog-page-top-text h3 {
        font-size: 24px;
    }
	
	    .blog-detail-box h2 {
        font-size: 24px;
    }
	
	.blog-detail-text h4 {
    font-size: 20px;
}
	
	.our-team-sec .our-team-content .our-team-box .our-social-media-icons {
    top: 66% !important;
}

}

@media only screen and (max-width: 667px) {
	
	    .footer-heading h3 {
        font-size: 40px;
    }
	
	    .hero-text h3 {
        font-size: 34px;
    }


}

@media only screen and (max-width: 600px) {
	
	.marquee-item h2 {
        font-size: 28px;
    }
	
	    .hero-two-icon-img {
        bottom: 30px;
        right: 0px;
        width: 50px;
        height: 50px;
    }
	
	    .hero-one-icon-img {
        bottom: 6px;
        right: 50px;
        width: 50px;
        height: 60px;
    }
	

}

@media only screen and (max-width: 575.2px){
	.service-box:hover{
	flex:1;
}

.service-box.active-center{
	flex: 1;
}
	
}

@media only screen and (max-width: 500px) {
	
	.hero-text {
        padding-top: 48px;
    }
	
	    .hero-text h3 {
        font-size: 28px;
    }
	
	.about-text h3 {
        font-size: 20px;
    }
	
	.about-right-box-description h4 {
    font-size: 18px;
}
	
	.marquee-item h2 {
        font-size: 24px;
    }
	
	.service-box:nth-child(2),
	.service-box:nth-child(3){
		display: none;
	}
	
	.about-pg-text h3 {
        font-size: 24px;
    }

}

@media only screen and (max-width: 480px) {
	
	    .hero-text h3 {
        font-size: 26px;
    }
	
	    .footer-heading h3 {
        font-size: 30px;
    }
	
	.hero-btn {
        margin-top: 8px;
    }
	
	
	    .hero-one-icon-img {
        display: none;
    }
	
	.hero-circle {
    height: 300px;
    width: 300px;
}
	
	.about-pg-text ul li a {
    color: #fff;
    font-size: 14px;
}
	
	    .our-team-sec .our-team-text-design {
        width: 26% !important;
    }

}

@media only screen and (max-width: 414px) {
	
	.top-navbar-right ul li a {
    font-size: 12px;
}
	
	.features-inner-text-design {
        width: 40%;
    }
	
	.why-choose-us-inner-text-design {
        width: 48%;
    }
	
	.logo-inner-text-design {
        width: 50%;
    }
	
	.about-pg-text h3 {
        font-size: 26px;
    }
	
	.service-inner-text-design {
        width: 42%;
    }
	
	    .career-page-text-design {
        width: 72%;
    }
	
	.career-page-sec .apply-btn {
    padding: 6px 16px;
}
	
	.career-page-appl-form .career-form-box {
    padding: 45px 22px;
}
	
	.contact-map-sec .contact-form-box {
    padding: 30px;
}
	
	    .our-team-sec .our-team-content .our-team-box .our-social-media-icons {
        top: 62% !important;
    }

}

@media only screen and (min-width: 375px) {
	
	.top-navbar {
    display: none;
}
	
	.hero-two-icon-img {
        bottom: 0px;
    }
	
	    .our-blog-inner-text-design {
        width: 38%;
    }
	
	    .our-team-sec .our-team-text-box h3 {
        font-size: 24px !important;
    }


}

@media only screen and (max-width: 360px) {
	
	.hero-img {
        margin-top: 20px;
    }
	
	    .about-inner-right-box h3 {
        font-size: 22px;
    }
	
	.review-text h6 {
    font-size: 18px;
}
	
	    .features-top-text h3 {
        font-size: 22px;
    }
	
	.about-features-box-one h4 {
        font-size: 18px;
    }
	
	.why-choose-left-box h3 {
        font-size: 22px;
    }
	
	.about-logo-text h3 {
        font-size: 22px;
    }
	
	.testimonial-text-box h3 {
        font-size: 22px;
    }
	
	.about-inner-text-design {
    width: 40%;
}
	
	    .service-inner-top-text h3 {
        font-size: 22px;
        text-align: center;
    }
	
	    .service-detail-right-box h2 {
        font-size: 22px;
        margin: 14px 0;
    }
	
	.service-detail-right-box h4 {
        font-size: 18px;
        margin: 8px 0;
    }
	
	.our-serivce-one-box a {
    font-size: 16px;
}
	
	    .career-page-top-text h3 {
        font-size: 22px;
    }
	
	.career-page-sec .job-card h4 {
    font-size: 18px;
}
	
	    .career-page-appl-form .career-form-title {
        font-size: 22px;
    }
	
	.our-team-sec .our-team-content .our-team-box .our-social-media-icons {
        top: 60% !important;
    }
	
	    .our-team-sec .our-team-text-design {
        width: 36% !important;
    }

}


@media only screen and (max-width: 320px) {
	
	    .hero-text h3 {
        font-size: 24px;
    }
	
	.about-text h3 {
        font-size: 18px;
    }
	
	.tstimonial-slider .custom-arrow {
    width: 40px;
    height: 40px;
}
	
	.features-inner-text-design {
        width: 54%;
    }
	
	    .why-choose-us-inner-text-design {
        width: 60%;
    }
	
	.logo-inner-text-design {
        width: 60%;
    }
	
	.service-inner-text-design {
        width: 56%;
    }
	
	    .career-page-text-design {
        width: 90%;
    }
	
	.contact-map-inner-text-design {
    width: 48%;
}
	
	.blog-icons-content ul li {
    font-size: 16px;
}
	
	    .our-team-sec .our-team-content .our-team-box .our-social-media-icons {
        top: 58% !important;
    }

}


/* 10.01.2026 */
.our-team-sec{
    padding: 60px 0;
    position: relative;
}

.our-team-sec .our-team-text-design{
    padding: 6px 10px;
    border: 1px solid #000000;
    border-radius: 30px;
    width: 10%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Helvetica_Bold';
}

.our-team-sec .our-team-text-design i{
    color: #013956;
    font-size: 12px;
    margin-right: 4px;
}

.our-team-sec .our-team-text-box h3{
    font-size: 32px;
    margin-top: 10px;
    color: #003e5e;
    text-align: center;
}

.our-team-sec .our-team-text-box h3 span{
    color: #000000;
}

.our-team-sec .our-team-content .our-team-box{
    position: relative;
}

.our-team-sec .our-team-content .our-team-box:hover .our-social-media-icons{
    display: flex;
}

.our-team-sec .our-team-content .our-team-box .our-team-img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.our-team-sec .our-team-content .our-team-box .our-team-img img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.our-team-sec .our-team-content .our-team-box:hover .our-team-img img{
    transform: scale(1.1);
}

.our-team-sec .our-team-content .our-team-box .our-social-media-icons{
    position: absolute;
    background-color: #fff;
    padding: 20px 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    transition: all 0.5s ease-in-out;
}

.our-team-sec .our-team-content .our-team-box .our-social-media-icons a{
    text-decoration: none
}

.our-team-sec .our-team-content .our-team-box .our-social-media-icons i{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #003e5e;
    color: #fff;
    border-radius: 4px;
    font-size: 20px;
    transition: all 0.3s ease-in-out;
}

.our-team-sec .our-team-content .our-team-box .our-social-media-icons i:hover{
    background-color: #fff;
    color: #003e5e;
    transform: scale(1.1) rotate(4deg);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.our-team-sec .our-team-content .our-team-box .our-team-btm-text{
    margin-top: 20px;
    background-color: #003e5e;
    padding: 20px 30px;
    border-radius: 20px; 
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.our-team-sec .our-team-content .our-team-box:hover .our-team-btm-text{
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.our-team-sec .our-team-content .our-team-box .our-team-btm-text h4{
    color: #fff;
    font-size: 26px;
    margin-bottom: 0;
    transition: all 0.3s ease-in-out;
}

.our-team-sec .our-team-content .our-team-box:hover .our-team-btm-text h4{
    color: #003e5e;
}

.our-team-sec .our-team-content .our-team-box .our-team-btm-text p{
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.our-team-sec .our-team-content .our-team-box:hover .our-team-btm-text p{
    color: #003e5e;
}