.wow {
    visibility: hidden;
}

@-webkit-keyframes fade_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fade_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fade_top {
    -webkit-animation-name: fade_top;
    animation-name: fade_top;
}

.swiper-pagination-progressbar {
    background: rgb(0 0 0 / 3%);
}




@-webkit-keyframes slide_left {
    0% {
        left: 0%;
    }

    100% {
        left: -30%;
    }
}

@keyframes slide_left {
    0% {
        left: 0%;
    }

    100% {
        left: -30%;
    }
}

.slide_left {
    -webkit-animation-name: slide_left;
    animation-name: slide_left;
}

@-webkit-keyframes slide_right {
    0% {
        right: 0%;
    }

    100% {
        right: -30%;
    }
}

@keyframes slide_right {
    0% {
        right: 0%;
    }

    100% {
        right: -30%;
    }
}

.slide_right {
    -webkit-animation-name: slide_right;
    animation-name: slide_right;
}












@font-face {
    font-family: 'Gilroy-Thin';
    src: url('../fonts/gilroyGilroy-Thin.woff2') format('woff2'),
        url('../fonts/gilroyGilroy-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Gilroy-Light';
    src: url('../fonts/gilroy/Gilroy-Light.woff2') format('woff2'),
        url('../fonts/gilroy/Gilroy-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Gobold-Regular';
    src: url('../fonts/Gobold-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-Bold';
    src: url('../fonts/gilroy/Gilroy-Bold.woff2') format('woff2'),
        url('../fonts/gilroy/Gilroy-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}






@font-face {
    font-family: 'Gilroy-SemiBold';
    src: url('../fonts/gilroy/Gilroy-SemiBold.woff2') format('woff2'),
        url('../fonts/gilroy/Gilroy-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}





@font-face {
    font-family: 'Gilroy-Medium';
    src: url('../fonts/gilroy/Gilroy-Medium.woff2') format('woff2'),
        url('../fonts/gilroy/Gilroy-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-Regular';
    src: url('../fonts/gilroy/Gilroy-Regular.woff2') format('woff2'),
        url('../fonts/gilroy/Gilroy-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root {
    /* colors */
    --primary-color: #231F20;
    --secondary-color: #C36224;
    --white-color: #FFFFFF;
    --highlight-color: #1A4C54;
    --secondary-highlight-color: #F18C4B;
    --font-lightblack-color: #5A5A5A;
    /* font-sizes */
    --section-big-title-font-size: 6rem;
    --banner-title-font-size: 5rem;
    --section-title-font-size: 4rem;
    --section-subtitle-font-size: 2.5rem;
    --section-subpragraph-font-size: 2rem;
    --paragraph-font-size: 1.25rem;
    --content-font-size: 1rem;
    --link-font-size: 1rem;

    /* font-families */
    --light-font-family: "Gilroy-Light";
    --regular-font-family: "Gilroy-Regular";
    --medium-font-family: "Gilroy-Medium";
    --semibold-font-family: "Gilroy-SemiBold";
    --bold-font-family: "Gilroy-Bold";
    --gobold-Regular: "Gobold-Regular";
    /* --black-font-family: "Poppins-Black"; */
    /* other */
    --common-transition: all 0.6s ease;
    --web-border-radius: 0.625rem;
    --mobile-border-radius: 0.6rem;
    --common-gap-size: 1rem;
    --small-gap-size: 1.5rem;
    --medium-gap-size: 2.5rem;
    --big-gap-size: 5rem;
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 4px;
    /* Width of the vertical scrollbar */
    height: 4px;
    /* Height of the horizontal scrollbar */
}

/* Remove the up/down arrow buttons on the scrollbar */
::-webkit-scrollbar-button {
    display: none;
}

/* The scrollbar track (background of the scrollbar) */
::-webkit-scrollbar-track {
    background-color: transparent;
    /* Transparent background */
}

/* The draggable part of the scrollbar (thumb) */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    /* Color of the scrollbar thumb */
    border-radius: 2px;
    /* Rounded corners */
}

/* Scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
    /* Darker color when hovered */
}

/* Custom scrollbar for Firefox */
* {
    scrollbar-width: thin;
    /* Thin scrollbar */
    scrollbar-color: var(--primary-color) transparent;
    /* Thumb color and track color */
}

.semibold-fonts {
    font-family: var(--semibold-font-family) !important;
}

.bold-fonts {
    font-family: var(--bold-font-family) !important;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: var(--regular-font-family);
    color: var(--primary-color);
}

html {
    height: auto;
    font-size: 16px;
    scroll-behavior: smooth;
}

* {
    line-height: 1.2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    line-height: 1.2;
    width: 100%;
}


body.no-scroll-body {
    overflow-y: hidden;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    background-color: transparent;
    color: unset;
    outline: none;
    text-decoration: none;
    -webkit-transition: all ease-in-out 0.4s;
    -moz-transition: all ease-in-out 0.4s;
    -ms-transition: all ease-in-out 0.4s;
    -o-transition: all ease-in-out 0.4s;
    transition: all ease-in-out 0.4s;
}

a:focus,
a:hover {
    outline: 0;
    text-decoration: unset;
    color: unset;
}

img {
    max-width: 100%;
    transition: var(--common-transition);
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.d.f {
    display: flex;
}

.relative {
    position: relative;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.text-center {
    text-align: center;
}

.p0 {
    padding: 0 !important;
}

.pt0 {
    padding-top: 0 !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.main-container-fluid {
    width: 96%;
    margin: 0 auto;
}

.main-container {
    width: 82%;
    margin: 0 auto;
}


.mini-container {
    width: 65%;
    margin: 0 auto;
}

.content_accordian {
    display: none;
}

.section-padding {
    padding: 8rem 0;
}

.section-padding-small {
    padding: 2rem 0;
}

.hover-enable {
    display: none;
}

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

.mobile-image {
    display: none;
}

.web-image {
    display: block;
}

div:focus-visible,
img:focus-visible,
button:focus-visible {
    outline: none;
    border: none;
}

.visible-tab-mobile {
    display: none !important;
}



.visible-mobile-only {
    display: none !important;
}


.flex-row {
    display: flex;
    gap: 0.5rem;
}

.inner-flex {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inner-flex-small {
    gap: var(--small-gap-size);
}

.inner-flex-smallest {
    gap: 0.25rem;
}

.inner-flex-medium {
    gap: var(--medium-gap-size);
}

.inner-flex-big {
    gap: var(--big-gap-size);
}

.big-gap {
    gap: var(--big-gap-size) !important;
}

.inner-flex-large {
    gap: 10rem;
}

.inner-flex-common {
    gap: var(--common-gap-size);
}

.inner-flex-center {
    text-align: center;
    align-items: center;
}

.white-color {
    color: var(--white-color) !important;
}

.black-color {
    color: var(--pure-black-color) !important;
}

.highlight-color {
    color: var(--highlight-color) !important;
}

.secondary-color {
    color: var(--secondary-color) !important;
}

.secondary-highlight-color {
    color: var(--secondary-highlight-color) !important;
}

/* fonts css */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

.gobold-fonts {
    font-family: var(--gobold-Regular) !important;
}



.banner-title h1,
.banner-title h1 span,
.banner-title h2,
.banner-title h2 span {
    font-size: var(--banner-title-font-size);
    font-family: var(--gobold-Regular);
}

.banner-title h1 span,
.banner-title h2 span {
    color: var(--secondary-color);
}

.section-title h1,
.section-title h1 span,
.section-title h2,
.section-title h2 span {
    font-size: var(--section-title-font-size);
    font-family: var(--gobold-Regular);
}

.section-pragraph-big-fonts p {
    font-size: var(--section-subpragraph-font-size);
}

.section-title h1 span,
.section-title h2 span {
    color: var(--secondary-color);
}



.section-content p,
.section-content p span {
    font-size: var(--content-font-size);
    line-height: 1.5;
}

/* .section-content p span {
    color: var(--secondary-color);
} */


.section-paragraph p,
.section-paragraph p span {
    font-size: var(--paragraph-font-size);
    line-height: 1.5;
}

/* .section-paragraph p span {
    color: var(--secondary-color);
} */


.section-text p,
.section-text span,
.section-text p span {
    font-size: 1rem !important;
    line-height: 1.25;
}

.section-text p span {
    color: var(--secondary-color);
}

.section-subtitle h4,
.section-subtitle h4 span {
    font-size: var(--section-subtitle-font-size);
    font-family: var(--semibold-font-family);
    color: var(--primary-color);
}

.section-pragraph-font-size p {
    font-size: var(--section-subtitle-font-size);
    color: var(--primary-color);
}

.section-subtitle h4 span {
    color: var(--secondary-color);
}

.smallest-font p {
    font-size: 0.85rem;
}

.link-font-size a p,
.link-font-size a p span.material-symbols-outlined,
.link-font-size p {
    font-size: var(--link-font-size);
}

.wide-angle-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    transition: var(--common-transition);
    border-radius: 0.5rem;
    width: fit-content;
    align-items: center;
    justify-content: center;
}

.wide-angle-button p,
.wide-angle-button span {
    line-height: 1 !important;
}

.button-style-primary {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
}

.button-style-primary span,
.button-style-primary p {
    color: var(--white-color);
    transition: var(--common-transition);
    font-size: 1.15rem;
}

.button-style-primary:hover {
    border: 1px solid var(--primary-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-primary:hover span,
.button-style-primary:hover p {
    color: var(--primary-color);
    transition: var(--common-transition);
}

.button-style-secondary {
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
}

.button-style-secondary span,
.button-style-secondary p {
    color: var(--white-color);
    transition: var(--common-transition);
    font-size: 1.15rem;
}

.button-style-secondary:hover {
    border: 1px solid var(--secondary-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-secondary.white-hover-border:hover {
    border: 1px solid var(--white-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-secondary.white-hover-border:hover span,
.button-style-secondary.white-hover-border:hover p {
    color: var(--white-color);
    transition: var(--common-transition);
}

.button-style-secondary:hover span,
.button-style-secondary:hover p {
    color: var(--secondary-color);
    transition: var(--common-transition);
}

.button-style-white {
    border: 1px solid var(--white-color);
    background-color: var(--white-color);
}

.button-style-white span,
.button-style-white p {
    color: var(--primary-color);
    transition: var(--common-transition);
    font-size: 1.15rem;
}

.button-style-transparent span,
.button-style-transparent p {
    color: white;
    transition: var(--common-transition);
    font-size: 1.15rem;

}

.button-style-transparent.secondary-text span,
.button-style-transparent.secondary-text p {
    color: var(--secondary-color);
}

.button-style-transparent.secondary-text:hover span,
.button-style-transparent.secondary-text:hover p {
    color: var(--white-color);
}

.button-style-transparent:hover span,
.button-style-transparent:hover p {
    color: white;
    transition: var(--common-transition);


}

.button-style-transparent.secondary-text {
    border: 1px solid var(--secondary-color);
    background-color: transparent;
}

.button-style-transparent.secondary-text:hover {
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);

}

.button-style-transparent {
    background-color: transparent;
    transition: var(--common-transition);
    border: 1px solid var(--white-color);

}

.button-style-transparent:hover {
    background-color: var(--secondary-color);
    transition: var(--common-transition);
    border: 1px solid var(--secondary-color);



}

.button-style-white:hover {
    border: 1px solid var(--white-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-white:hover span,
.button-style-white:hover p {
    color: var(--white-color);
    transition: var(--common-transition);
}


.alc {
    align-items: center;
}

.j-c-c {
    justify-content: center;
}

.j-c-end {
    justify-content: end;
}

.medium-fonts {
    font-family: var(--medium-font-family) !important;
}

/* CSS STarts here */


.header-wrapper-1 {
    position: fixed;

    transition: var(--common-transition);
    top: 0rem;
    border-bottom: 0px solid var(--primary-color);
    left: 0;
    width: 100%;
    backdrop-filter: blur(18px);
    padding: 1.5rem 0;
    z-index: 99999;
    background-color: #1e1e1e90;
    transition: var(--common-transition);

}

.header-wrapper-1.webmenu_hidden, .header-wrapper-1.inquiry-active {
    top: -100%;
}

.header-wrapper-1.black-header {

    background-color: #231F20;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    gap: var(--small-gap-size);
    align-items: center;
    padding-right: 0;
}

.header-links-ul ul {
    display: flex;
    align-items: center;
    gap: var(--medium-gap-size);
}

.header-links-ul ul li a,
.header-links-ul ul li span,
.header-links-ul ul li p {
    color: var(--white-color);
    position: relative;

}

.header-links-ul ul li span::before,
.header-links-ul ul li p::before {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background-color: var(--white-color);
    bottom: 0;
    left: 0;
    transition: var(--common-transition);

}


.header-links-ul ul li:hover span::before,
.header-links-ul ul li:hover p::before {
    width: 100%;
    transition: var(--common-transition);
}

.header-links-ul ul li.active span::before,
.header-links-ul ul li.active p::before {
    width: 100%;
    transition: var(--common-transition);
}

.header-links-ul ul li a {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--white-color);
}

.header-logo {
    width: 15.5rem;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}


.nav-toggle {
    cursor: pointer;
    display: none;
}

.mob-link-font-size {
    display: none;
}

.mobile-navigation-wrapper {
    display: none;
}



.form-input-icon.form-input-icon-left {
    left: 1rem;
}

.form-title-label {
    margin-bottom: 0.5rem;
}

.form-input-icon.form-input-icon-right {
    right: 1rem;
}



.form-control-wide-angle {
    padding: 1rem 2rem 1rem 3.5rem;
    border: 1px solid var(--highlight-color);
    resize: none;
    background-color: var(--white-color);
    margin: 0 !important;
    outline: none;
    line-height: 1;
    font-size: 1rem;
    width: 100%;
    font-family: var(--medium-font-family);
    border-radius: 0.5rem;
}

.form-control-wide-angle.form-control-wide-angle-search {
    padding: 1rem 3.5rem 1rem 2rem;
}

.form-input-icon {
    height: 24px;
    width: 24px;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 1rem;
    transform: unset;
}

.form-input-icon.form-input-icon-search {
    right: 1rem;
}

.form-control-wide-angle:focus,
.form-control-wide-angle:focus-visible {
    border-color: var(--primary-color);
}

.footer-link a p {
    color: var(--white-color);
    position: relative;
}

.footer-link a span::before,
.footer-link a p::before {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background-color: var(--white-color);
    bottom: 0;
    left: 0;
    transition: var(--common-transition);

}


.footer-link a:hover span::before,
.footer-link a:hover p::before {
    width: 100%;
    transition: var(--common-transition);
}

.footer-link a.active span::before,
.footer-link a.active p::before {
    width: 100%;
    transition: var(--common-transition);
}

.header-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.footer-logo {
    width: 18.15rem;
}

.footer-wrapper {
    background-color: var(--white-color);
    transition: var(--common-transition);

}

.footer-wrapper.active {
    background-color: var(--primary-color);
}


.footer-wrapper .footer-logo,
.footer-wrapper p, .footer-wrapper .footer-icon img {
    filter: invert(1);
    transition: var(--common-transition);
}

.footer-wrapper .footer-icon.social-icon {
    filter: invert(1) contrast(0);
}

.footer-wrapper.active .footer-logo,
.footer-wrapper.active .footer-icon.social-icon,
.footer-wrapper.active p, .footer-wrapper.active .footer-icon img {
    filter: unset;
    transition: var(--common-transition);
}

.footer-wrapper.active .footer-icon.social-icon {
    filter: brightness(7);
}

.footer-wrapper.active .footer-icon.social-icon:hover {
    filter: unset;
}

.footer-icon,
.footer-icon img {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
}

.j-c-sb {
    justify-content: space-between;
}



.footer-text p {
    color: var(--white-color);
}

.salt_hover a:hover {
    color: #e20613;
}

.w100 {
    width: 100%;
}

.alend {
    align-items: end;
}

.wmc {
    width: max-content;
}

.social-icon {
    filter: brightness(7);
}

.banner-img, .banner-img img {
    height: 92svh;
}

.wfc {
    width: fit-content;
}

.banner-text-abs {
    position: absolute;
    left: 0;
    bottom: 8rem;
    width: 100%;
}

.material-button-flex {
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.material-button {
    padding: 1.25rem 2.5rem;
    border: 1px solid var(--primary-color);
    width: max-content;

}

.border-radius {
    border-radius: 0.75rem;
}

.material-text {
    padding: 1.5rem 4rem 1.5rem 1.5rem;
    border-bottom: 1px solid #231F2020;
}

.material-subtext {
    padding: 1rem 4rem 1rem 1.5rem;
    border-bottom: 1px solid #231F2020;
}

/* .material-subtext */
.material-title {
    padding: 1.5rem 0;


}

.two-grid.border-top {
    border-top: 1px solid #231F2020;
    margin-top: 1rem;
}

.two-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--medium-gap-size);
}

.applications-grid {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 1.25rem;
    width: 100%;
    padding: 1.5rem 0;
    /* list-style: disc; */
}

ul.applications-grid li p {
    padding-left: 1.5rem;
}

ul.applications-grid li p::before {
    position: absolute;
    content: '';
    background-color: var(--primary-color);
    height: 5px;
    width: 5px;
    top: 0.75rem;
    border-radius: 50%;
    left: 0.5rem;
}

.section-big-title {
    font-size: var(--section-big-title-font-size);
}

.swiper-btn>div {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
}

.swiper-btn>div img {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
}

.swiper-btn>div {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid #000000;
    position: relative;
    top: unset;
    right: unset;
    left: unset;
    bottom: unset;
    transform: unset;
    background-image: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: unset;
}

.section-content-small p {
    font-size: 0.875rem;
}

.lightblack-color {
    color: var(--font-lightblack-color);
}

.readmore_click {
    padding-top: 2rem;
    color: var(--secondary-color);
    display: block;
    text-transform: capitalize;
    width: fit-content;
}

.industry_swiper_box {
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
}

.industry_swiper_box .industry-img img {
    height: 46vh;
    width: 100%;
}

.industry_swiper_wrapper .swiper-slide:hover .industry_swiper_box {
    box-shadow: 1px 0px 8px #00000006, 1px 0px 8px #00000006, 1px 0px 8px #00000006, 1px 0px 8px #00000006;

}

.industry_swiper_contant {
    height: 0%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

.industry_swiper_wrapper .swiper-slide:hover .industry_swiper_contant {
    max-height: 35vh;
    transition: max-height 0.6s ease;

}


.flex_30 {
    flex-basis: calc(100% - 75% - 1.25rem);
}

.flex_70 {
    flex-basis: calc(100% - 25% - 1.25rem);
}

#wide-angle-detail-section-3 .flex_30 {
    flex-basis: 30%;
    width: 30%;
}

#wide-angle-detail-section-3 .flex_70 {
    flex-basis: 70%;
    width: 70%;
}

.material-button:hover {
    background-color: var(--primary-color);
    transition: var(--common-transition);

}

.material-button:hover p {
    color: var(--white-color);
    transition: var(--common-transition);


}


.conatct_number_input {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}

.country_code_list_data li>div {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.search_c-code {
    padding: 0 1rem;
    padding-bottom: 0.5rem;
}

/* .contact_lable input {
    font-family: var(--erode-italic-font-family);
} */

.country_code_list_data {
    position: absolute;
    top: 100%;
    left: 0;
    height: 40vh;
    overflow-y: scroll;
    width: 300px;
    z-index: 99999;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #ffffff;
    border: 1px solid #999999;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
}

.search_c-code {
    padding: 0 1rem;
    padding-bottom: 0.5rem;
}

.country_code_list_data ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.country_code_list_data.active {
    display: block;
}

.country_code_data {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 5px;
    font-size: var(--moblink-size);
    font-family: var(--regular-font-family);
}

.country_code_list_data ul li {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: all ease 0.2s;
}

.search_c-code input {
    position: relative;
    border-radius: var(--border-radius);
    border: 1px solid #999999;
    width: 100%;
    padding: 0.8rem;
}


.contact_country_flag img,
.country_code_list_data img {
    width: 25px !important;
}

.md-label.contact_code {
    left: 8.5rem;
}

.inquiry-label.contact_lable .contact_code_input {
    padding-left: 8.5rem;
}

.country_code_list_data {
    display: none;
}

.inquiry-label {
    position: relative;
}

.md-label {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    font-size: 1rem;
    font-family: var(--semibold-font-family);
    color: #1B1B1B30;
}

.inquiry-label textarea~.md-label {
    top: 1.25rem;
    transform: translateY(0);
}

.inquiry-label input,
.inquiry-label textarea,
.inquiry-label select {
    width: 100%;
    background-color: transparent !important;
    border-radius: 4px;
    padding: 1.25rem 1.5rem;

    border: 1px solid #21418316;
    outline: none;
    resize: none;
    font-size: 1rem;
    font-family: var(--semibold-font-family);

}

/* input:-internal-autofill-selected {
  

}
.inquiry-label input:-webkit-autofill,
.inquiry-label input:-webkit-autofill:hover, 
.inquiry-label input:-webkit-autofill:focus, 
.inquiry-label input:-webkit-autofill:active{
    background-color: transparent !important;
  } */
.inquiry-label input.error {
    border: 1px solid #f00;

}

/* .inquiry-label input.error~.md-label {
    color: #f00;
} */

.inquiry-label input.ng-not-empty~.md-label,
.inquiry-label input:focus~.md-label,
.inquiry-label textarea:focus~.md-label,
.inquiry-label textarea.ng-not-empty~.md-label,
.inquiry-label input:focus-visible~.md-label,
.inquiry-label textarea:focus-visible~.md-label,
.inquiry-label select.ng-not-empty~.md-label,
.inquiry-label select:focus-visible~.md-label,
.inquiry-label select:focus-visible~.md-label {
    /* position: absolute;
    top: 0%;
    left: 1.5rem;
    font-size: 12px;
    transition: var(--common-transition); */
    display: none;



}

.get-in-touch-wrapper {
    padding: 3rem;
    border: 1px solid var(--secondary-color);
    border-radius: 0.75rem;
}

.inquiryWrapper form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'cal1 cal2''cal3 cal4''cal5 cal5 ''cal6 .';
    gap: 2.5rem;

}

.cal1 {
    grid-area: cal1;
}

.cal2 {
    grid-area: cal2;
}

.cal3 {
    grid-area: cal3;
}

.cal4 {
    grid-area: cal4;
}

.cal5 {
    grid-area: cal5;
}

.cal6 {
    grid-area: cal6;
    margin-right: auto;
}


.inquiry-btn {
    margin-top: 1.5rem;
}

label.error {
    position: absolute;
    left: 0;
    bottom: -1.5rem;
    color: #f00;
    font-size: 1rem;
}

.wide-angle-button .btn-img-hover,
.wide-angle-button:hover .btn-img {
    display: none;
}

.wide-angle-button:hover .btn-img-hover,
.wide-angle-button .btn-img {
    display: block;
}

.black-overly {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #00000055;
}

.contact-banner-img,
.contact-banner-img img {
    height: 70svh;
    width: 100%;
    object-fit: cover;
}

.conatct-banner-text-abs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contact-flex-30 {
    flex-basis: 30%;
    width: 30%;
    padding: 3rem;
    border-radius: 0.75rem;
    border: 1px solid var(--secondary-color);
}

.contact-flex-70 {
    flex-basis: 70%;
    width: 70%;
    padding: 3rem;
    border-radius: 0.75rem;
    border: 1px solid var(--secondary-color);
}

.wide-angle-icon {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
}

.location-div {
    border: 1px solid var(--secondary-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.location-iframe iframe {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
}

.location-iframe {
    height: 40vh;
    width: 100%;
}

.swiper-left-padding {
    padding-left: 7.5rem;
}

.wide-angle-about-section-2 .sectwo-bgimg {
    margin-left: -5%;
    width: 100%;
    flex-basis: 50%;
    margin-top: 0;
}

.wide-angle-about-section-2 .sectwo-bgimg>svg {
    width: 100%;
}




.wide-angle-about-section-2 .sectwo-img {
    position: absolute;
    width: 53%;
    right: 0;
    bottom: 0;
    top: unset;

}

.wide-angle-about-section-2 .aboutsect1-grid {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 48% 60%;
}

.wide-angle-about-section-2 .sectwo-pragraph {
    width: 100%;
}

.counter-value~span,
.sec3-main .section-subtitle h4 span,
.sec3-grid .section-subtitle h4 span {
    font-size: 1.5rem;
}

.strength-number {
    position: relative;
}

.strength-number::after {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #A4A4A4;
}

.strength-number:last-child:after {
    width: 0;
}

.sec3-bg {
    background: rgb(57, 120, 131);
    background: linear-gradient(299deg, rgba(57, 120, 131, 1) 12%, rgba(26, 76, 84, 1) 100%);
}


#wide-angle-about-section-5 {
    background-color: var(--primary-color);
    overflow: hidden;
}

.aboutsect5-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 7rem;
    row-gap: 5rem;
}

.plus-border {
    width: 100%;
    height: 1px;
    background-color: #82828230;
}

.about-sect5-logo {
    position: absolute;
    right: -3rem;
    bottom: -8rem;
    width: 60%;
}

.header-inquiryWrapper.active {
    right: 0;
    transition: var(--common-transition);
}

.header-inquiryWrapper {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100svh;
    width: 25%;
    z-index: 99;
    padding: 4rem 2rem 2rem 2rem;
    background-color: var(--white-color);
    transition: var(--common-transition);

}


.header-inquiryWrapper .inquiryWrapper form {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
        'cal1'
        'cal2'
        'cal3'
        'cal4'
        'cal5'
        'cal6';
    gap: var(--medium-gap-size);
}

.button-style-secondary.close-button.close-button img {
    filter: brightness(7);
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    transform: rotate(45deg);
}

.button-style-secondary.close-button.close-button:hover img {
    filter: unset;
}

.click-overly.active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000055;
    z-index: 9;
}

.industry_swiper_wrapper .swiper-slide {
    align-items: start;
}

.our-clients-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--medium-gap-size);
    align-items: center;
    justify-content: center;
}

.home-product-img,
.home-product-img img {
    height: 45vh;
    object-fit: cover;
}

.swiper-scrollbar.range-of-product-scrollbar {
    height: 2px;
    margin-top: 5rem;
    background-color: var(--white-color);
}

.swiper-scrollbar.range-of-product-scrollbar .swiper-scrollbar-drag {

    background: var(--secondary-color);

}

.wide-angle-div {

    flex-basis: 60%;

}

.home-sec6-contant {
    flex-basis: 40%;
    justify-content: end;
}

.overflow {
    overflow: hidden;
}

.youtube_div {
    overflow: hidden;
    border-radius: 0.75rem;
}

.youtube_div:hover .sec4-img {
    transform: scale(1.2);
}



.wide-angle-fill-triangle {
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    overflow: hidden;
    transition: all 1s ease;
}

/* .wide-angle-fill-triangle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32%;
    height: 40%;
    background: white;
    /* background: rgb(255, 255, 255); 
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%); 
    transition: top 4s linear;
} */
/* 
.wide-angle-fill-triangle.active {
    top: 0%;
    left: 0%;
} */

/* .wide-angle-about-wrapper .wide-angle-about-section-2 .aboutsect1-grid {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 48% 55%;
}

.wide-angle-about-wrapper .wide-angle-about-section-2 .sectwo-bgimg {
    margin-left: 0%;
    width: 90%;
    flex-basis: 50%;
    margin-top: 6rem;
} */

/* SVG Animation */


@keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 3628.041259765625px;
        stroke-dasharray: 3628.041259765625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 3628.041259765625px;
    }
}

.svg-elem-1 {
    -webkit-animation: animate-svg-stroke-1 2s linear 0s both;
    animation: animate-svg-stroke-1 2s linear 0s both;
}

@keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 3628.041259765625px;
        stroke-dasharray: 3628.041259765625px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 3628.041259765625px;
    }
}

.sect-six-element-1 {
    -webkit-animation: animate-svg-stroke-1 2s linear 0.5s both;
    animation: animate-svg-stroke-1 2s linear 0.5s both;
}


@keyframes animate-svg-stroke-2 {
    0% {
        stroke-dashoffset: 987.8048095703125px;
        stroke-dasharray: 987.8048095703125px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 987.8048095703125px;
    }
}

.sect-six-element-2 {
    -webkit-animation: animate-svg-stroke-2 2s linear 0.62s both;
    animation: animate-svg-stroke-2 2s linear 0.62s both;
}
.header-links-ul{
    height: 100%;
    justify-content: space-between;
}
.wide-angle-bannerSection#home-video-section-1 {
    height: auto;
    min-height: auto;
}
.widangle_stone_img {
    flex-basis: 20%;
    align-self: center;
}

.widangle_stone_img .wild-stone-one-img,
.widangle_stone_img .wild-stone-text-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;

}

.widangle_stone_img>img {
    animation: rotateImg 45s linear infinite forwards;
}

.widangle_stone_img .wild-stone-text-img {
    animation: rotateImgReverse 20s linear infinite reverse;
}

.widangle_stone_img .wild-stone-one-img {
    width: 55%;

}


@keyframes rotateImg {
    0% {
        transform: rotate(0deg);
    }

    100% {

        transform: rotate(3600deg);
    }
}

@keyframes rotateImgReverse {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);

    }
}

.readmore_click:focus-visible{
    outline:unset;
}
.wide-angle-about-section-2 .sectwo-img {
    position: absolute;
    width: 68%;
    right: 10%;
    bottom: 0;

    top: unset;
}
.sectwo-img img{
    height: 40svh;
    object-position: 100% 20%;
}
.videosect-div{
    object-fit: cover;
    height: 100svh;
    width: 100%;
     display: block;
}
.text-animation-span{
    transition: var(--common-transition);
}