html,
body,
div,
span,
applet,
object,
iframe,
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;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
overflow-x: hidden;
text-rendering: optimizeSpeed;
background: #FFF;
font-family: UniNeueRegular, Inter, sans-serif;
}
html {
font-size: 16px;
}
/*====================================================
2. TYPOGRAPHY.
====================================================*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
margin-top: 0;
margin-bottom: 1rem;
font-family: UniNeueRegular, Inter, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
line-height: 1.5;
}
h1,
.h1 {
font-size: 2.5rem;
}
h2,
.h2 {
font-size: 2rem;
}
h3,
.h3 {
font-size: 1.75rem;
}
h4,
.h4 {
font-size: 1.5rem;
}
h5,
.h5 {
font-size: 1.25rem;
}
h6,
.h6 {
font-size: 1rem;
}
p {
font-size: 15px;
color: #000;
font-family: UniNeueRegular, Inter, sans-serif;
}
a {
color: #000;
text-decoration: none;
transition: 0.3s;
}
a:hover {
color: #1F71FA;
text-decoration: none;
}
/*====================================================
3. SPACE AND ALIGMENT.
====================================================*/
.mt-5,
.my-5 {
margin-top: 5rem !important;
}
.mb-5,
.my-5 {
margin-bottom: 5rem !important;
}
.mt-4,
.my-4 {
margin-top: 3rem !important;
}
.mb-4,
.my-4 {
margin-bottom: 3rem !important;
}
/*====================================================
4. SECTIONS.
====================================================*/
section {
overflow-x: hidden;
position: relative;
}
.pages-hero {
background-image: url(../img/brd-banner.jpg);
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.pages-hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002642, #002642);
opacity: 0.6;
}
.pages-title {
position: absolute;
bottom: 50px;
color: #FFF;
}
.pages-title span {
font-weight: 700;
font-size: 2rem;
}
.pages-title h1 {
font-size: 2.5rem;
color: #FFF;
font-weight: 600;
margin-bottom: 5px;
}
.page-nav {
width: 100%;
z-index: 1;
}
.page-nav p {
font-size: 13px;
color: #FFF;
margin-bottom: 0px;
}
.pages-title a {
color: #fff;
text-decoration: none;
transition: 0.3s;
}
.pages-title a:hover {
color: #B4E602;
text-decoration: none;
}
.section-title {
margin-bottom: 3rem;
}
.section-title h2 {
text-align: center;
color: #212529;
font-weight: 600;
font-family: UniNeueRegular;
color: #000;
}
.section-title h2:after {
background: #307fe2;
content: '';
display: block;
height: 5px;
margin: 15px auto;
width: 80px;
}
.section-title p {
text-align: center;
}
.side-title {
width: 100%;
margin-bottom: 1.5rem;
border-left: solid 6px #FFA600;
}
.side-title h5 {
color: #8C8C9E;
margin-left: 20px;
margin-bottom: 5px;
line-height: 1;
}
.side-title h2 {
margin-left: 20px;
line-height: 1.2;
}
hr.separator {
margin: 2rem auto 2rem;
border-top: 1px solid rgba(221, 221, 221, 0.9);
}
/*====================================================
5. BUTTONS.
====================================================*/
.btn {
font-family: UniNeueRegular, Inter, sans-serif;
display: inline-block;
padding: 6px 18px;
border-radius: 4px;
font-size: 1rem;
}
.btn-tags {
font-size: 13px;
color: #0E377B;
background-color: transparent;
border-color: #0E377B;
border-radius: 0px;
}
.btn-tags:hover {
color: #fff;
background-color: #0E377B;
border-color: #0E377B;
}
.btn-tags:focus,
.btn-tags.focus {
color: #fff;
background-color: #0E377B;
border-color: #0E377B;
box-shadow: none;
}
.btn-tags.disabled,
.btn-tags:disabled {
color: #fff;
background-color: #0E377B;
border-color: #0E377B;
}
.btn-contact {
color: #FFF;
transition: 0.9s;
padding: 12px 20px !important;
font-size: 1rem;
background: #0E377B;
border: solid 2px #0E377B;
width: 100%;
margin-top: 15px;
font-weight: 600;
margin-top: 10px;
}
.btn-contact:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-contact:focus,
.btn-contact.focus {
box-shadow: none;
}
.btn-contact.disabled,
.btn-contact:disabled {
color: #fff;
background-color: #0E377B;
border-color: #0E377B;
opacity: 1;
}
.btn-contact:not(:disabled):not(.disabled):active,
.btn-contact:not(:disabled):not(.disabled).active,
.show>.btn-contact.dropdown-toggle {
color: #fff;
background-color: #0E377B;
border-color: #0E377B;
}
.btn-contact:not(:disabled):not(.disabled):active:focus,
.btn-contact:not(:disabled):not(.disabled).active:focus,
.show>.btn-contact.dropdown-toggle:focus {
box-shadow: none;
}
.btn-quote {
width: auto;
padding: 0.5rem 1rem;
font-size: 15px;
}
.cargoy-btn {
background-color: #1F71FA;
border: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: UniNeueRegular, Inter, sans-serif;
font-size: 0.90rem;
line-height: 1em;
outline: none;
padding: 12px 25px;
position: relative;
}
.cargoy-btn:before,
.cargoy-btn:after {
border-color: transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
border-style: solid;
border-width: 0;
content: "";
height: 24px;
position: absolute;
width: 24px;
}
.cargoy-btn:before {
border-color: #1F71FA;
border-left-width: 2px;
border-top-width: 2px;
left: -5px;
top: -5px;
}
.cargoy-btn:after {
border-bottom-width: 2px;
border-color: #1F71FA;
border-right-width: 2px;
bottom: -5px;
right: -5px;
}
.cargoy-btn:hover,
.cargoy-btn.hover {
background-color: #1F71FA;
}
.cargoy-btn:hover:before,
.cargoy-btn.hover:before,
.cargoy-btn:hover:after,
.cargoy-btn.hover:after {
height: 100%;
width: 100%;
}
.cargoy-btn-white {
background-color: #307fe2;
border: none;
color: #fff;
font-weight: 600;
cursor: pointer;
display: inline-block;
font-family: UniNeueRegular, Inter, sans-serif;
font-size: 0.90rem;
line-height: 1em;
outline: none;
padding: 14px 45px;
position: relative;
text-transform: uppercase;
border-radius: 30px;
}
/*.cargoy-btn-white:before,
.cargoy-btn-white:after {
border-color: transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
border-style: solid;
border-width: 0;
content: "";
height: 24px;
position: absolute;
width: 24px;
}*/
/*.cargoy-btn-white:before {
border-color: #FFF;
border-left-width: 2px;
border-top-width: 2px;
left: -5px;
top: -5px;
}*/
/*.cargoy-btn-white:after {
border-bottom-width: 2px;
border-color: #FFF;
border-right-width: 2px;
bottom: -5px;
right: -5px;
}*/
.cargoy-btn-white:hover,
.cargoy-btn-white.hover {
background-color: #1F71FA;
}
.cargoy-btn-white:hover:before,
.cargoy-btn-white.hover:before,
.cargoy-btn-white:hover:after,
.cargoy-btn-white.hover:after {
height: 100%;
width: 100%;
}
/*====================================================
6. ICONS.
====================================================*/
ul.social-network {
list-style: none;
justify-content: center;
}
ul.social-network li {
display: inline-block;
margin: 0px 5px;
}
li.circle-icon {
width: 40px;
height: 40px;
border: solid 1px #000;
border-radius: 50%;
line-height: 45px;
transition: 0.3s;
}
li.circle-icon:hover {
background-color: #000;
border: solid 1px #000;
}
li.circle-icon .fab {
font-size: 25px;
}
/*====================================================
7. SCROLLING TOP.
====================================================*/
@media only screen and (min-width: 1024px) {
main p {
font-size: 20px;
font-size: 1.25rem;
}
}
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #307fe2;
visibility: hidden;
border-radius: 5px;
z-index: 4;
}
.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.no-touch .cd-top:hover {
background-color: #B4E602;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 40px;
width: 40px;
right: 10px;
bottom: 10px;
}
}
/*====================================================
8. PRELOADER
====================================================*/
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1031;
background-color: #FFF;
z-index: 999999;
}
#loader-wrapper .loader {
position: absolute;
/*Setting position of element according to the next parent element with position anything other then default*/
top: 50%;
/*50% down on the parent element*/
left: 50%;
/*50% right on the parent element*/
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*50% of element width (50px) left, 50% of element height (50px) up*/
width: 100px;
/*Element is 100px wide*/
height: 100px;
/*Element is 100px tall*/
animation: spin .6s linear infinite reverse;
/*
Animation is using the spin keyframes
Animation is 0.8 seconds long
Aniamtion tweening/easing is linear (no acceleration)
The animation loops forever
The animation goes the opposite way than defines
*/
}
#loader-wrapper .loader .ball {
position: absolute;
/*Same deal with centering the element like with .loader, but the parent of .ball is .loader*/
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 100%;
/*Height is 100% of the parent not 100% of the screen height (that's 100vh)*/
-webkit-animation: spin 1s infinite ease-in-out;
animation: spin 1s infinite ease-in-out;
/*
Animation is using the spin keyframes (in the way it is defines)
Animation is 1 second long
Animation loops forever
Animation tweening/easing is ease-in-out, which has symetrical acceleration at the start as at the end
*/
/*Here I am using the selector `:nth-child(n)` to select certain elements*/
}
#loader-wrapper .loader .ball:after {
/*Pseudo-class, there is also :before*/
position: absolute;
/*Pseudoclasses for use as shapes need to be position absolute*/
content: '';
/*And content defined (Add some text into it)*/
background-color: #0E377B;
/*SCSS variable using the white from line 8*/
width: 5px;
/*Width 5 pixels*/
height: 5px;
/*Height 5 pixels*/
border-radius: 100%;
/*Corners will be rounded into an oval*/
top: 0px;
/*Put this element at the top of the parent*/
}
#loader-wrapper .loader .ball:nth-child(1) {
/*The first .ball in the parent*/
-webkit-animation-delay: -0s;
animation-delay: -0s;
}
#loader-wrapper .loader .ball:nth-child(2) {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
/*Start the animation 0.1s before*/
}
#loader-wrapper .loader .ball:nth-child(3) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
/*Start the animation 0.2s before*/
}
#loader-wrapper .loader .ball:nth-child(4) {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
#loader-wrapper .loader .ball:nth-child(5) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
#loader-wrapper .loader .ball:nth-child(6) {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
#loader-wrapper .loader .ball:nth-child(7) {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
#loader-wrapper .loader .ball:nth-child(8) {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
#loader-wrapper .loader .ball:nth-child(9) {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#loader-wrapper .loader .ball:nth-child(10) {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
/*I am a fan of negative delays*/
}
@-webkit-keyframes spin {
/*The keyframes for the animation `spin`*/
0% {
/*At 0% of the animation whatever elements have these keyframes set as an animation will have these properties*/
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
/*The balls do not change colour because the animation is set to their parent and not themselves*/
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spin {
/*The keyframes for the animation `spin`*/
0% {
/*At 0% of the animation whatever elements have these keyframes set as an animation will have these properties*/
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
/*The balls do not change colour because the animation is set to their parent and not themselves*/
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
/*====================================================
9. FILTER GALLERY.
====================================================*/
/** {-webkit-transform-origin:center!important;transform-origin:center!important;}*/
.filter-container {
width: 100%;
margin: 0 auto;
text-align: right;
}
.filter {
padding: 0;
list-style: none;
}
.filter li {
font-size: 15px;
font-family: UniNeueRegular, Inter, sans-serif;
display: inline-block;
text-transform: uppercase;
cursor: pointer;
line-height: 2;
padding: 0 10px;
position: relative;
color: #999999;
font-weight: 500;
}
.filter li.active {
color: #262626;
}
#kehl-grid {
position: relative;
text-align: center;
margin: 0 auto;
padding: 0;
width: 100%;
/* max-width:1920px; */
}
#kehl-grid:after {
content: '';
display: block;
clear: both;
}
.grid-box {
position: relative;
float: left;
display: inline-block;
overflow: hidden;
width: calc(100% / 3);
margin: 0;
padding: 5px;
/* box-sizing: border-box;
-webkit-transform: translate3d(1px,0,0);
transform: translate3d(1px,0,0); */
clear: both;
}
#kehl-grid h3 {
color: #262626;
font-family: UniNeueRegular, Inter, sans-serif;
font-weight: 800;
font-size: 15px;
line-height: 25px;
letter-spacing: 4px;
text-transform: uppercase;
}
#kehl-grid p {
color: #333;
z-index: 4;
font-size: 12px;
letter-spacing: 3px;
font-family: UniNeueRegular, Inter, sans-serif;
font-weight: 400;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-box {
width: 33.333%;
}
.grid-box {
float: left;
}
.grid-box img {
display: block;
width: 100%;
}
.grid-box .image-mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(256, 256, 256, 0);
z-index: 2;
transition: all 300ms linear;
}
.grid-box:hover .image-mask {
background: rgba(256, 256, 256, .8);
}
.grid-box h3 {
position: absolute;
width: 100%;
bottom: 30%;
left: 0;
margin-bottom: -16px;
line-height: 26px;
text-align: center;
z-index: 4;
opacity: 0;
transition: all 300ms linear;
}
.grid-box:hover h3 {
bottom: 50%;
opacity: 1;
}
.grid-box p {
position: absolute;
top: 15px;
left: 25px;
opacity: 0;
font-style: italic;
line-height: 18px;
transition: all 300ms linear;
}
.grid-box:hover p {
top: 60px;
left: 25px;
opacity: 0;
}
/*====================================================
10. MAGNIFIC POPUP.
====================================================*/
.magnific-img {
width: 100%;
height: 100%;
}
.magnific-img img {
width: 100%;
height: 100%;
border-radius: 0px;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
/* ideally, transition speed should match zoom duration */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
.mfp-arrow-left:before {
border-right: none !important;
}
.mfp-arrow-right:before {
border-left: none !important;
}
button.mfp-arrow,
.mfp-counter {
opacity: 0 !important;
transition: opacity 200ms ease-in, opacity 2000ms ease-out;
}
.mfp-container:hover button.mfp-arrow,
.mfp-container:hover .mfp-counter {
opacity: 1 !important;
}
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.9;
}
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none;
}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress;
}
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.mfp-loading.mfp-figure {
display: none;
}
.mfp-hide {
display: none !important;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-preloader a {
color: #CCC;
}
.mfp-preloader a:hover {
color: #FFF;
}
.mfp-s-ready .mfp-preloader {
display: none;
}
.mfp-s-error .mfp-content {
display: none;
}
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: UniNeueRegular, Inter, sans-serif;
}
.mfp-close:hover,
.mfp-close:focus {
opacity: 1;
}
.mfp-close:active {
top: 1px;
}
.mfp-close-btn-in .mfp-close {
color: #333;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
font-family: UniNeueRegular, Inter, sans-serif;
font-weight: 500;
}
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7;
}
.mfp-arrow-left {
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F;
}
.mfp-arrow-right {
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F;
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000;
}
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
line-height: 0;
}
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444;
}
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px;
}
.mfp-image-holder .mfp-content {
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px;
}
}
.magnific-img .image-popup-vertical-fit img a:link {
text-decoration: none;
border: solid 2px #000;
}
.magnific-img .image-popup-vertical-fit img a:visited {
text-decoration: none;
border: solid 2px #000;
}
.magnific-img .image-popup-vertical-fit img a:hover {
text-decoration: none;
border: solid 2px #000;
}
.magnific-img .image-popup-vertical-fit img a:active {
text-decoration: none;
color: #000;
border: solid 2px #000;
}
.mfp-figure button.mfp-close {
cursor: pointer;
}
.popup-gallery a {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mfp-figure figure {
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
/*====================================================
11. YOUTUBE POPUP.
====================================================*/
.popup-youtube .video-image {
position: relative;
display: inline-block;
}
.popup-youtube .video-image img {
width: 100%
}
.popup-youtube .video-image:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background: transparent url(../img/master/play-button.html) center center no-repeat;
}
.popup-youtube .video-image img a:link {
text-decoration: none;
color: #FFF;
}
.popup-youtube .video-image img a:visited {
text-decoration: none;
color: #FFF;
}
.popup-youtube .video-image img a:hover {
text-decoration: none;
color: #FFF;
}
.popup-youtube .video-image img a:active {
text-decoration: none;
color: #FFF;
}
/*====================================================
12. MODAL POPUP.
====================================================*/
.modal-box {
text-align: center;
}
.modal-box p {
margin: 15px 0px 15px 0px;
}
.modal-sm .modal-content {
background: #FFF;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
padding: 10px 20px 10px 20px;
}
.close {
color: #000;
}
@media (min-width: 992px) {
.modal-md {
width: 600px;
}
}
/*====================================================
13. PULSE BUTTON EFFECTS.
====================================================*/
.pulse-button {
width: 60px;
height: 60px;
border: none;
box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.7);
border-radius: 50%;
cursor: pointer;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
background: transparent url(../img/master/play-arrow.html) center center no-repeat;
background-color: #FFA600;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.pulse-button:hover {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
@-webkit-keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
}
@-moz-keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
}
@-ms-keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
}
@keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
}
.organic-pulsing-video .popup-youtube .video-image:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background: none;
}
.youtube-popup {
position: relative;
}
.video-image img {
width: 100%
}
.hhhdhytrgfttr{
background: #f5f5f5 url(../img/transparent-map.png) no-repeat center top;
}
.pasco-about-pro {
background: #ffffff;
}
.about-tag {
font-size: 13px;
letter-spacing: 2px;
font-weight: 600;
color: #0d6efd;
display: inline-block;
margin-bottom: 12px;
font-family: UniNeueRegular;
}
.about-title {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #111;
font-family: UniNeueRegular;
}
.about-title span {
color: #0d6efd;
}
.about-text {
font-size: 16px;
line-height: 1.75;
color: #444;
margin-bottom: 14px;
}
/* RIGHT SIDE */
.highlight-list {
border-left: 3px solid #0d6efd;
padding-left: 25px;
}
.highlight-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
}
.highlight-item i {
font-size: 22px;
color: #0d6efd;
margin-top: 4px;
}
.highlight-item h5 {
font-size: 17px;
font-weight: 600;
margin-bottom: 4px;
color: #111;
}
.highlight-item p {
font-size: 14.5px;
color: #666;
margin: 0;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.about-title {
font-size: 30px;
}
.journey-hero h2 {
font-size: 30px !important;
}
.map-iframe {
height: 300px !important;
}
.tab-buttons .nav-item {
margin: 6px 4px !important;
}
}
.award-card {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 24px;
background: #ffffff;
border-left: 4px solid #0d6efd;
border-radius: 10px;
margin-bottom: 20px;
/* PREMIUM SHADOW */
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.award-card:hover {
transform: translateY(-4px);
box-shadow:
0 14px 35px rgba(0, 0, 0, 0.12),
0 4px 10px rgba(0, 0, 0, 0.08);
}
.award-icon {
width: 52px;
height: 52px;
background: rgba(13,110,253,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.award-icon i {
font-size: 22px;
color: #0d6efd;
}
.award-content h5 {
font-size: 17px;
font-weight: 600;
margin-bottom: 5px;
color: #111;
}
.award-content p {
font-size: 14.5px;
color: #666;
margin: 0;
}
.org-ds {
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
padding: 80px 0;
}
/* Wrapper */
.org-wrapper {
background: #ffffff;
border-radius: 16px;
padding: 50px 40px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}
/* Heading */
.org-header {
margin: 0 auto 40px;
}
.org-tag {
display: inline-block;
font-size: 13px;
letter-spacing: 2px;
font-weight: 600;
color: #0d6efd;
margin-bottom: 10px;
font-family: UniNeueRegular;
}
.org-header h2 {
font-size: 34px;
font-weight: 700;
margin-bottom: 12px;
color: #111;
font-family: UniNeueRegular;
}
.org-header p {
font-size: 16px;
line-height: 1.7;
color: #555;
}
/* Image Box */
.org-image-box {
background: #f8f9fa;
padding: 25px;
border-radius: 14px;
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.04),
0 10px 25px rgba(0,0,0,0.06);
text-align: center;
}
.org-image-box img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
/* Responsive */
@media (max-width: 768px) {
.org-wrapper {
padding: 35px 25px;
}
.org-header h2 {
font-size: 28px;
}
}
.management-card {
background: #fff;
padding: 30px;
box-shadow: 0 12px 35px rgba(0,0,0,0.12);
margin-bottom: 30px;
}
/* LEFT */
.image-frame {
padding: 8px;
border: 1px solid #e5e5e5;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.image-frame img {
width: 100%;
}
.profile-meta {
margin-top: 20px;
border-left: 4px solid #0d47a1;
padding-left: 15px;
}
.profile-meta h4 {
margin-bottom: 3px;
font-weight: 600;
}
.designation {
font-size: 13px;
letter-spacing: 1px;
color: #666;
font-family: UniNeueRegular;
}
/* RIGHT */
.profile-right p {
font-size: 15px;
line-height: 1.8;
color: #333;
text-align: justify;
}
/* ACCORDION */
.custom-accordion {
margin-top: 30px;
}
.acc-item {
margin-bottom: 15px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.acc-header {
padding: 15px 20px;
background: #f8f9fa;
cursor: pointer;
display: flex;
justify-content: space-between;
font-weight: 600;
font-family: UniNeueRegular;
}
.acc-item.active .acc-header {
background: #0d47a1;
color: #fff;
}
.acc-body {
display: none;
padding: 20px;
font-size: 14px;
color: #555;
}
.acc-item.active .acc-body {
display: block;
}
.acc-icon {
font-size: 22px;
}
/* ACCORDION */
.custom-accordion {
margin-top: 30px;
}
.acc-item {
margin-bottom: 18px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.acc-header {
padding: 16px 22px;
background: #ffffff;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
letter-spacing: 0.3px;
position: relative;
transition: all 0.3s ease;
font-family: UniNeueRegular;
}
/* LEFT ACCENT BAR */
.acc-header::before {
content: "";
width: 4px;
height: 100%;
background: #0d47a1;
position: absolute;
left: 0;
top: 0;
}
/* ACTIVE STATE */
.acc-item.active .acc-header {
background: linear-gradient(90deg, #0d47a1, #1565c0);
color: #fff;
}
/* ICON */
.acc-icon {
width: 28px;
height: 28px;
background: rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 18px;
transition: all 0.3s ease;
}
.acc-item.active .acc-icon {
background: rgba(255,255,255,0.25);
}
/* BODY */
.acc-body {
display: none;
padding: 22px;
font-size: 14px;
line-height: 1.7;
color: #555;
background: #fff;
}
.acc-item.active .acc-body {
display: block;
}
/* LEFT PROFILE WRAPPER */
.profile-left {
text-align: center;
}
/* IMAGE */
.profile-image-wrapper {
position: relative;
background: #fff;
padding: 8px;
box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.profile-image-wrapper img {
width: 100%;
display: block;
}
/* NAME & DESIGNATION */
.profile-meta {
margin-top: 20px;
padding-top: 12px;
position: relative;
}
.profile-meta::before {
content: "";
width: 50px;
height: 2px;
background: #0d47a1;
display: block;
margin: 0 auto 12px;
}
.profile-meta h4 {
font-weight: 600;
margin-bottom: 4px;
letter-spacing: 0.4px;
}
.profile-meta .designation {
font-size: 13px;
letter-spacing: 1.2px;
color: #555;
text-transform: uppercase;
}
.profile-meta {
margin-top: 20px;
padding: 16px 10px;
background: #f6f7f9; /* pastel grey */
border-radius: 6px;
position: relative;
}
.profile-meta::before {
content: "";
width: 40px;
height: 2px;
background: #333;
display: block;
margin: 0 auto 10px;
}
.management-team {
background: #f7f8fa;
}
.divider {
display: block;
width: 70px;
height: 3px;
background: #0d6efd;
margin: 10px auto 0;
border-radius: 2px;
}
/* CARD */
.team-vertical-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
margin: 10px;
}
.team-vertical-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
/* IMAGE */
.team-image img {
width: 100%;
}
/* BODY */
.team-body {
padding: 16px 18px 20px;
text-align: left;
}
.team-body h5 {
margin-bottom: 6px;
font-weight: 600;
}
.designation {
font-size: 0.85rem;
color: #666;
margin-bottom: 12px;
}
/* CONTACT */
.team-body p {
font-size: 0.85rem;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
color: #333;
}
.team-body i {
color: #0a0a5f;
font-size: 13px;
}
.team-image{
padding: 5px;
}
.tab-buttons .nav-item {
margin: 0 4px;
}
.tab-buttons .nav-link {
background: #fff;
color: #333;
font-weight: 500;
padding: 10px 36px 10px 22px; /* extra right space for arrow */
border-radius: 6px;
border: 1px solid #e1e1e1;
box-shadow: 0 5px 12px rgba(0,0,0,0.08);
position: relative;
transition: all 0.25s ease;
}
.tab-buttons .nav-link:hover {
transform: translateY(-1px);
}
/* RIGHT ARROW (COMMON ICON) */
.tab-buttons .nav-link::before {
content: "→";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%) translateX(-5px);
font-size: 14px;
opacity: 0;
transition: all 0.3s ease;
}
/* show arrow only on active */
.tab-buttons .nav-link.active::before {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* active button */
.tab-buttons .nav-link.active {
background: #007bff;
color: #fff;
border-color: #007bff;
box-shadow: 0 10px 22px rgba(0,123,255,0.35);
}
/* underline */
.tab-buttons .nav-link::after {
content: "";
position: absolute;
left: 20%;
bottom: -6px;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
.tab-buttons .nav-link.active::after {
width: 60%;
}
.tab-text {
max-width: 720px;
margin: auto;
font-size: 16px;
line-height: 1.8;
color: #444;
}
.main-nujhjsj-dnjjd {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,0.08);
transition: all 0.3s ease;
height: 100%;
}
.main-nujhjsj-dnjjd:hover {
transform: translateY(-6px);
box-shadow: 0 14px 35px rgba(0,0,0,0.15);
}
/* Image */
.image-nhhfgf img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
/* Content */
.image-conteny-sss {
padding: 20px;
text-align: center;
}
.image-conteny-sss h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
color: #222;
}
.image-conteny-sss p {
font-size: 14.5px;
color: #666;
line-height: 1.6;
margin-bottom: 18px;
}
/* Button */
.new-fbhhvgfb {
background: #007bff;
color: #fff;
border: none;
padding: 10px 26px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
}
.new-fbhhvgfb:hover {
background: #0056b3;
}
.bv-fff{
margin: 10px;
}
.commercial-content {
background-color: #f5f7fa; /* very light pastel gray-blue */
padding: 50px 0px;
font-family: UniNeueRegular, Inter, sans-serif;
color: #333;
background: #f5f5f5;
}
/* Headings */
.commercial-content h2 {
font-size: 25px;
font-weight: 700;
color: #111; /* strong black */
margin-bottom: 20px;
position: relative;
padding-bottom: 4px;
font-family: UniNeueRegular;
}
/* Subtle underline accent */
.commercial-content h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: #007bff; /* subtle corporate blue */
border-radius: 2px;
}
/* Paragraphs */
.commercial-content p {
font-size: 16px;
line-height: 28px;
color: #555;
margin-bottom: 15px;
}
/* Divider between sections */
/* Responsive */
@media (max-width: 767px) {
.commercial-content {
padding: 60px 15px;
}
.commercial-content h2 {
font-size: 26px;
}
.commercial-content h2::after {
width: 35px;
height: 3px;
}
.commercial-content p {
font-size: 16px;
}
}
/* Owl Carousel Prev Button */
.snn-fnhf-ann .owl-prev {
position: absolute;
top: 50%;
left: -25px; /* adjust distance from carousel */
transform: translateY(-50%);
width: 45px;
height: 45px;
background-color: #007bff; /* corporate blue */
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.snn-fnhf-ann .owl-prev:hover {
background-color: #0056b3; /* darker blue on hover */
transform: translateY(-50%) scale(1.1);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
/* Icon inside the button */
.snn-fnhf-ann .owl-prev span {
font-size: 20px;
}
.snn-fnhf-ann .owl-next {
position: absolute;
top: 50%;
right: -25px; /* adjust distance from carousel */
transform: translateY(-50%);
width: 45px;
height: 45px;
background-color: #007bff; /* corporate blue */
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.snn-fnhf-ann .owl-next:hover {
background-color: #0056b3; /* darker blue on hover */
transform: translateY(-50%) scale(1.1);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
/* Icon inside the button */
.snn-fnhf-ann .owl-next span {
font-size: 20px;
}
/* Optional: for smaller screens */
@media (max-width: 767px) {
.owl-prev {
width: 35px;
height: 35px;
left: -15px;
}
.owl-prev span {
font-size: 16px;
}
.owl-next {
width: 35px;
height: 35px;
left: -15px;
}
.owl-next span {
font-size: 16px;
}
}
/* Main card container */
.main-nujhjsj-dnjjdasw {
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover effect */
.main-nujhjsj-dnjjdasw:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}
/* Image container */
.image-nhhfgf-sss img {
width: 100%;
height: auto;
display: block;
border-bottom: 1px solid #eee;
transition: transform 0.3s ease;
}
/* Zoom image on hover */
.main-nujhjsj-dnjjdasw:hover .image-nhhfgf-sss img {
transform: scale(1.05);
}
/* Content container */
.image-conteny-sssaccc {
padding: 10px 10px;
text-align: center;
}
/* Clean heading */
.image-conteny-sssaccc h3 {
font-size: 17px;
font-weight: 700;
color: #111;
margin-bottom: 12px;
position: relative;
display: inline-block;
padding-bottom: 6px;
font-family: 'UniNeueRegular', sans-serif;
}
/* Underline accent under heading */
.image-conteny-sssaccc h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50%;
height: 3px;
background-color: #007bff; /* corporate blue underline */
border-radius: 2px;
}
/* Read More link */
.image-conteny-sssaccc p a {
text-decoration: none;
color: #007bff;
font-weight: 500;
position: relative;
transition: all 0.3s ease;
}
/* Underline animation for link */
.image-conteny-sssaccc p a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background-color: #007bff;
transition: width 0.3s ease;
}
.image-conteny-sssaccc p a:hover::after {
width: 100%;
}
/* Responsive */
@media (max-width: 767px) {
.image-conteny-sssaccc h3 {
font-size: 20px;
}
.image-conteny-sssaccc p a {
font-size: 15px;
}
}
.wh-white{
background: #fff !important;
}
/* Features Heading */
.nbspe h4 {
font-size: 20px;
font-weight: 700;
color: #111;
margin-bottom: 15px;
position: relative;
padding-left: 14px;
font-family: UniNeueRegular, Inter, sans-serif;
}
/* Left accent line */
.nbspe h4::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 4px;
height: 80%;
background-color: #007bff;
border-radius: 2px;
}
/* List reset */
.nbspe ul {
list-style: none;
padding: 0;
margin: 0;
}
/* List items */
.nbspe ul li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 16px;
color: #444;
line-height: 1.7;
}
/* Small arrow bullet */
.nbspe ul li::before {
content: "›";
position: absolute;
left: 6px;
top: 0;
font-size: 20px;
line-height: 1.2;
color: #007bff;
font-weight: 700;
}
.auto-industry-section {
background: #F5F9FF;
padding: 70px 0;
color: #333;
}
/* Main heading */
/* Left headings */
.auto-industry-section h4 {
font-size: 20px;
font-weight: 700;
color: #111;
margin-bottom: 15px;
position: relative;
padding-left: 12px;
}
.auto-industry-section h4::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 4px;
height: 80%;
background: #007bff;
}
/* Sub headings */
.auto-industry-section h5 {
font-size: 17px;
font-weight: 600;
color: #222;
margin-top: 25px;
margin-bottom: 8px;
}
/* Paragraphs */
.auto-industry-section p {
font-size: 16px;
line-height: 1.85;
color: #555;
margin-bottom: 18px;
}
/* Responsive */
@media (max-width: 767px) {
.industry-main-heading {
font-size: 26px;
}
.auto-industry-section {
padding: 50px 15px;
}
}
/* Main Card */
.mhcv-main-card {
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
height: 100%;
}
/* Main heading */
.mhcv-main-card h4 {
font-size: 20px;
font-weight: 700;
color: #111;
margin-bottom: 16px;
position: relative;
padding-left: 14px;
}
.mhcv-main-card h4::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 4px;
height: 80%;
background: #007bff;
border-radius: 2px;
}
/* Paragraph */
.mhcv-main-card > p {
font-size: 16px;
line-height: 1.85;
color: #555;
margin-bottom: 22px;
}
/* Inner cards */
.mhcv-inner-card {
background: #f7f9fc;
padding: 18px 20px;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
/* Inner headings */
.mhcv-inner-card h5 {
font-size: 16px;
font-weight: 600;
color: #222;
margin-bottom: 6px;
}
/* Inner text */
.mhcv-inner-card p {
font-size: 15px;
line-height: 1.75;
color: #555;
margin: 0;
}
/* Responsive */
@media (max-width: 767px) {
.mhcv-main-card {
padding: 22px;
}
}
.mhcv-main-card .mhcv-inner-card p {
font-size: 15px;
}
.mhcv-main-card p {
font-size: 16px;
line-height: 1.9;
color: #555;
margin-bottom: 18px;
}
.mhcv-inner-card {
background: #ffffff;
padding: 22px 24px;
border-radius: 10px;
margin-bottom: 18px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
/* Text */
.mhcv-inner-card p {
font-size: 15.5px;
line-height: 1.85;
color: #444;
margin: 0;
}
/* Subtle hover lift */
.mhcv-inner-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.related-pro{
background: linear-gradient(to bottom,#fefeff80,#e2f2fcc2,#e2f2fc99,#e2f2fcba,#e2f2fc1c);
padding: 50px 0px;
}
/* Image container */
.hebnnnndu-mkks-dnhhf {
background: #ffffff;
padding: 14px;
border-radius: 12px;
box-shadow: 0 14px 34px rgba(0,0,0,0.06);
margin-bottom: 24px;
}
.hebnnnndu-mkks-dnhhf img {
width: 100%;
border-radius: 8px;
display: block;
}
/* Button wrapper */
.buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
/* Primary button */
.anp-1 {
background: #007bff;
color: #ffffff;
border: none;
padding: 13px 26px;
font-size: 15px;
font-weight: 600;
border-radius: 30px;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 26px rgba(0,123,255,0.25);
font-family: UniNeueRegular, Inter, sans-serif;
}
/* Outline button */
.anp-outline {
background: #ffffff;
color: #007bff;
border: 1.5px solid #007bff;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
/* Icon */
.anp-1 i {
font-size: 16px;
}
/* Hover */
.anp-1:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0,123,255,0.3);
}
.anp-outline:hover {
background: #007bff;
color: #ffffff;
}
/* Responsive */
@media (max-width: 767px) {
.buttons {
justify-content: center;
}
}
.anp-1 {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Prevent underline on hover */
.anp-1:hover,
.anp-1:focus {
text-decoration: none;
}
.section-title h4 {
font-size: 28px;
font-weight: 600;
position: relative;
padding-bottom: 5px;
}
.section-title h4::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 70px;
height: 1.5px;
background: #333;
}
.section-title h4::before {
content: "";
position: absolute;
left: 75px;
bottom: -2px;
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
}
.new-model-dnhh{
padding: 50px 0px;
}
/* Card */
.auto-card {
background: #ffffff;
border: 1px solid #e6e6e6;
height: 100%;
transition: border-color 0.3s ease;
}
/* Image */
.auto-img {
display: block;
background: #f5f5f5;
padding: 10px;
}
.auto-img img {
width: 100%;
}
/* Content */
.auto-body {
padding: 18px 20px 22px;
border-top: 1px solid #eee;
}
.auto-body h3 {
font-size: 16px;
font-weight: 700;
color: #111;
margin-bottom: 10px;
font-family: UniNeueRegular, Inter, sans-serif;
}
/* Link */
.auto-link {
font-size: 14px;
font-weight: 600;
color: #000;
text-decoration: none;
border-bottom: 2px solid #000;
padding-bottom: 3px;
font-family: UniNeueRegular, Inter, sans-serif;
}
/* Hover (very subtle) */
.auto-card:hover {
border-color: #000;
}
.top-single-imagesnn {
background: linear-gradient(to bottom,#fefeff80,#e2f2fcc2,#e2f2fc99,#e2f2fcba,#e2f2fc1c);
}
/* Image card */
.image-box {
background: #ffffff;
padding: 16px;
border-radius: 14px;
border: 1px solid #e4e4e4;
transition: all 0.35s ease;
}
/* Image */
.image-box img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 10px;
}
/* Hover effect – subtle */
.image-box:hover {
transform: translateY(-6px);
border-color: #000;
}
/* Section background */
.book-vehicle-section {
background: linear-gradient(135deg, #e8efff, #fdfefe);
}
/* Card */
.book-card {
background: #ffffff;
border-radius: 20px;
padding: 40px 35px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(0, 0, 0, 0.04);
position: relative;
}
/* Decorative top bar */
.book-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 6px;
width: 100%;
background: linear-gradient(90deg, #000, #555);
border-radius: 20px 20px 0 0;
}
/* Header */
.form-header {
text-align: center;
margin-bottom: 30px;
}
.form-header h2 {
font-size: 30px;
font-weight: 800;
color: #111;
margin-bottom: 6px;
font-family: UniNeueRegular, Inter, sans-serif;
}
.form-header p {
font-size: 15px;
color: #666;
}
/* Inputs */
.fancy-input {
height: 45px;
border-radius: 12px;
border: 1px solid #dcdcdc;
padding: 12px 16px;
font-size: 15px;
transition: all 0.25s ease;
font-family: UniNeueRegular, Inter, sans-serif;
background: #f6f6f6;
}
.fancy-input:focus {
border-color: #000;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
/* Button */
.submit-btn {
background: #0a0a5f;
color: #fff;
font-weight: 700;
padding: 14px;
border-radius: 12px;
border: none;
letter-spacing: 0.4px;
transition: all 0.3s ease;
font-family: UniNeueRegular, Inter, sans-serif;
}
.submit-btn:hover {
background: linear-gradient(135deg, #111, #000);
transform: translateY(-2px);
color: #fff;
}
/* Modal Card */
.book-modal-card {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
background: #ffffff; /* card body */
}
/* Modal Header */
.book-modal-header {
background: #f3f6ff; /* pastel header */
padding: 20px 25px;
border-bottom: 1px solid #e0e0e0;
}
/* Header Title */
.form-title {
font-size: 24px;
font-weight: 800;
color: #111;
}
/* Close Button */
.book-modal-header .close {
font-size: 26px;
font-weight: 700;
color: #333; /* visible */
opacity: 1;
}
/* Modal Body */
.modal-body {
padding: 30px 25px;
background: #fdfefe; /* pastel card body */
}
/* Inputs */
.fancy-input {
height: 48px;
border-radius: 12px;
border: 1px solid #ddd;
padding: 10px 14px;
font-size: 15px;
transition: all 0.25s ease;
}
.fancy-input:focus {
border-color: #000;
box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}
/* Button */
.submit-btn {
background: #0a0a5f;
color: #fff;
font-weight: 700;
padding: 12px;
border-radius: 12px;
border: none;
letter-spacing: 0.4px;
transition: all 0.3s ease;
}
.submit-btn:hover {
background: linear-gradient(135deg, #111, #000);
transform: translateY(-2px);
}
/* Modal Header – reduce excessive gap */
.book-modal-header {
background: #f3f6ff; /* pastel header */
padding: 12px 20px; /* reduce top-bottom padding */
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center; /* vertical center for title and close */
justify-content: space-between;
}
/* Header Title */
.form-title {
font-size: 22px;
font-weight: 800;
color: #111;
margin: 0 !important; /* remove default margin */
}
/* Close Button */
.book-modal-header .close {
font-size: 24px;
font-weight: 700;
color: #333; /* visible */
opacity: 1;
}
.new-fbhhvgfb a{
color: #fff;
}
/*---new showrooms css-----*/
/* Card wrapper */
.new-showroom-content {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
transition: all 0.35s ease;
cursor: pointer;
position: relative;
background: #fff;
}
/* Hover effect */
.new-showroom-content:hover {
transform: translateY(-6px);
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}
/* Image */
.image-shw img {
width: 100%;
display: block;
height: 220px;
object-fit: cover;
transition: transform 0.35s ease, filter 0.35s ease;
filter: brightness(0.92);
}
.new-showroom-content:hover .image-shw img {
transform: scale(1.03);
filter: brightness(1);
}
/* City name overlay */
.contant-dbggdg {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.6);
padding: 10px 28px; /* thoda aur padding */
border-radius: 50px;
text-align: center;
min-width: 150px; /* minimum width */
max-width: 90%; /* responsive maximum width */
white-space: nowrap; /* single line */
overflow: hidden;
text-overflow: ellipsis; /* long text ke liye ... */
}
/* City heading */
.contant-dbggdg h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #fff;
letter-spacing: 1px;
position: relative;
}
/* Luxury underline */
.contant-dbggdg h3::after {
content: "";
display: block;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #c9a24d, #f1d27a); /* gold gradient */
margin: 6px auto 0;
border-radius: 10px;
transition: width 0.3s ease;
}
/* Hover effect on underline (optional) */
.new-showroom-content:hover .contant-dbggdg h3::after {
width: 50px;
}
/* Mobile responsiveness */
@media(max-width: 767px){
.image-shw img {
height: 180px;
}
.contant-dbggdg h3 {
font-size: 16px;
}
.contant-dbggdg {
padding: 6px 16px;
}
.contant-dbggdg h3::after {
width: 30px;
}
}
@media(max-width: 767px){
.contant-dbggdg {
padding: 8px 20px;
min-width: 120px;
}
}
.contant-dbggdg h3 a{
color: #fff;
}
/*-----showrooms detail------*/
/* Section Wrapper */
.showroom-section.luxury {
background: #fdfdfd;
padding: 60px 0;
}
/* ROW Flex for equal height columns */
.showroom-row {
display: flex;
gap: 20px;
align-items: stretch; /* important: equal height */
}
/* LEFT COLUMNS (image + info) */
.left-columns {
display: flex;
flex: 3;
gap: 20px;
background: #fff;
border-radius: 16px;
padding: 15px;
box-shadow: 0 12px 25px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Image Column */
.image-column, .info-column {
flex: 1;
display: flex;
flex-direction: column;
}
/* Main Image */
.main-image-wrapper {
position: relative;
flex: 1;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}
.main-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
transition: all 0.5s ease;
}
.main-image-wrapper:hover .main-img {
filter: grayscale(0%) brightness(1);
transform: scale(1.05);
}
/* Image Overlay */
.image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.02));
pointer-events: none;
}
/* Thumbnails */
.thumbnail-images .thumb {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 12px;
border: 2px solid #f5f5f5;
cursor: pointer;
transition: transform 0.3s ease, border 0.3s ease;
}
.thumbnail-images .thumb:hover {
transform: scale(1.1);
border-color: #0d6efd;
}
/* Showroom Info */
.info-column {
justify-content: flex-start;
gap: 20px;
}
.showroom-title {
font-size: 28px;
font-family: UniNeueRegular, Inter, sans-serif;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 1px;
position: relative;
}
.showroom-title::after {
content: "";
display: block;
width: 70px;
height: 3px;
background: linear-gradient(90deg, #c9a24d, #f1d27a);
margin-top: 10px;
border-radius: 10px;
}
/* Info Cards */
.info-card {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.info-card:last-child {
border-bottom: none;
}
.info-card i {
font-size: 16px;
color: #1F71FA;
margin-top: 2px;
/* Round box styling */
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #eef4ff; /* light pastel blue */
}
.info-card p {
margin: 0;
font-size: 16px;
color: #333;
font-family: UniNeueRegular, Inter, sans-serif;
}
.info-card a {
color: #111;
text-decoration: none;
transition: color 0.3s ease;
}
.info-card a:hover {
color: #0d6efd;
}
/* Map Card */
.map-column {
flex: 1;
display: flex;
flex-direction: column;
}
.map-card {
flex: 1;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
padding: 15px;
box-shadow: 0 12px 25px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.map-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}
.map-card-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 12px;
color: #333;
text-align: center;
position: relative;
}
.map-card-title::after {
content: "";
display: block;
width: 50px;
height: 3px;
background: #0d6efd;
margin: 8px auto 0;
border-radius: 10px;
}
.map-card iframe {
/* flex: 1;*/
border-radius: 12px;
}
/* Responsive */
@media(max-width: 991px){
.showroom-row {
flex-direction: column;
}
.left-columns, .map-column {
flex: unset;
}
.main-img {
height: 250px;
}
.thumbnail-images .thumb {
width: 50px;
height: 50px;
}
.info-card p {
font-size: 15px;
}
}
/* =======================
MOBILE RESPONSIVE FIXES
======================= */
@media (max-width: 991px) {
/* Main section padding */
.showroom-section.luxury {
padding: 40px 0;
}
/* Stack layout */
.showroom-row {
flex-direction: column;
gap: 25px;
}
/* Left container stack */
.left-columns {
flex-direction: column;
padding: 15px;
gap: 25px;
}
/* Image + info full width */
.image-column,
.info-column,
.map-column {
width: 100%;
}
/* Main image height fix */
.main-image-wrapper {
height: 260px;
}
.main-img {
height: 100%;
object-fit: cover;
}
/* Thumbnails center align */
.thumbnail-images {
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.thumbnail-images .thumb {
width: 55px;
height: 55px;
}
/* Info column spacing */
.info-column {
gap: 16px;
}
.showroom-title {
font-size: 22px;
}
.showroom-title::after {
width: 55px;
height: 2px;
}
/* Info cards compact */
.info-card {
gap: 12px;
padding: 10px 0;
}
.info-card i {
font-size: 18px;
}
.info-card p,
.info-card a {
font-size: 15px;
line-height: 1.4;
}
/* Map card fix */
.map-card {
padding: 12px;
}
.map-card-title {
font-size: 16px;
}
.map-card iframe {
height: 240px;
border-radius: 12px;
}
}
/* EXTRA SMALL DEVICES */
@media (max-width: 575px) {
.main-image-wrapper {
height: 220px;
}
.thumbnail-images .thumb {
width: 48px;
height: 48px;
}
.showroom-title {
font-size: 20px;
letter-spacing: 0.5px;
}
.info-card p,
.info-card a {
font-size: 14px;
}
.map-card iframe {
height: 200px;
}
}
.th-container{
max-width: 1250px;
}
/*---team-css----*/
.team-card {
background: #ffffff;
border-radius: 16px;
padding: 20px 15px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
}
.team-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.team-image {
width: 170px;
height: 170px;
margin: 0 auto 15px;
overflow: hidden;
border: 4px solid #eef4ff;
margin-top: 15px;
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-name {
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
color: #1f2937;
}
.team-designation {
font-size: 14px;
color: #6b7280;
margin-bottom: 10px;
}
.team-designation span {
font-size: 13px;
color: #9ca3af;
}
.team-contact p {
margin-bottom: 10px;
font-size: 14px;
}
.team-contact i {
color: #0d6efd;
margin-right: 8px;
}
.team-contact a {
color: #374151;
text-decoration: none;
}
.team-contact a:hover {
color: #0d6efd;
}
.team-contact{
border-top: 2px dotted #ccc;
padding-top: 10px;
}
.new-asca {
background-color: #f4f9ff;
padding: 60px 0;
}
.new-nsdfjsjf {
text-align: center;
margin-bottom: 40px;
}
.new-nsdfjsjf h2 {
display: inline-block;
font-size: 30px;
font-weight: 700;
color: #111827;
letter-spacing: 0.4px;
position: relative;
padding-bottom: 12px;
}
/* Accent underline */
.new-nsdfjsjf h2::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 70px;
height: 4px;
background-color: #0d6efd;
border-radius: 4px;
}
/*---location css------*/
/* SECTION */
.new-location-dfhhf {
background: #f8fafc;
padding: 60px 0;
}
/* HEADING */
.location-heading {
text-align: center;
margin-bottom: 50px;
}
.location-heading h2 {
font-size: 34px;
font-weight: 700;
color: #111827;
margin-bottom: 12px;
letter-spacing: 0.4px;
}
.heading-underline {
display: inline-block;
width: 90px;
height: 4px;
background: linear-gradient(90deg, #0d6efd, #60a5fa);
border-radius: 6px;
}
/* CARD WRAPPER */
.vd-gbhdggdf {
padding: 12px;
}
/* CARD */
.main-bdfgdfgdg {
background: #ffffff;
border-radius: 16px;
padding: 35px 28px;
text-align: center;
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
transition: all 0.35s ease;
}
/* HOVER */
.main-bdfgdfgdg:hover {
transform: translateY(-8px);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.15);
}
/* ICON */
.icon-dvggdf {
width: 100px;
height: 100px;
margin: 0 auto 18px;
background: #eef4ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-dvggdf img {
/* width: 42px;*/
height: 52px;
object-fit: contain;
}
/* CONTENT */
.content-dfbashasdhsa h3 {
font-size: 22px;
font-weight: 700;
color: #111827;
margin-bottom: 12px;
position: relative;
}
/* underline */
.content-dfbashasdhsa h3::after {
content: "";
display: block;
width: 45px;
height: 3px;
background: linear-gradient(90deg, #0d6efd, #60a5fa);
margin: 8px auto 0;
border-radius: 4px;
}
.content-dfbashasdhsa p {
font-size: 14px;
color: #6b7280;
margin: 0;
font-weight: 600;
}
.content-dfbashasdhsa p a {
color: #6b7280;
font-weight: 600;
}
.new-location-dfhhf .owl-carousel .owl-nav.disabled {
display: block !important;
}
/* Prev / Next Buttons */
.new-location-dfhhf .truchvs-carousel .owl-prev,
.new-location-dfhhf .truchvs-carousel .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
}
/* Left & Right placement */
.new-location-dfhhf .truchvs-carousel .owl-prev {
left: -26px;
}
.new-location-dfhhf .truchvs-carousel .owl-next {
right: -26px;
}
/* Hover */
.new-location-dfhhf .truchvs-carousel .owl-prev:hover,
.new-location-dfhhf .truchvs-carousel .owl-next:hover {
background: #0d6efd;
box-shadow: 0 18px 40px rgba(13, 110, 253, 0.4);
}
/* Icons */
.new-location-dfhhf .truchvs-carousel .owl-prev .fa-angle-left,
.new-location-dfhhf .truchvs-carousel .owl-next .fa-angle-right {
font-size: 26px;
color: #0d6efd;
transition: color 0.3s ease;
}
/* Icon hover */
.new-location-dfhhf .truchvs-carousel .owl-prev:hover .fa-angle-left,
.new-location-dfhhf .truchvs-carousel .owl-next:hover .fa-angle-right {
color: #ffffff;
}
/* Disabled state */
.new-location-dfhhf .truchvs-carousel .owl-prev.disabled,
.new-location-dfhhf .truchvs-carousel .owl-next.disabled {
opacity: 0.4;
pointer-events: none;
}
/*---location-detail----*/
.location-card {
height: 100%;
background: linear-gradient(145deg, #ffffff, #f5f7fa);
border-radius: 18px;
padding: 28px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
/* soft glow */
.location-card::before {
content: "";
position: absolute;
top: -40%;
right: -40%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(13,110,253,0.18), transparent 70%);
}
/* Hover effect */
.location-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 65px rgba(0, 0, 0, 0.15);
}
/* Header */
.location-header h3 {
font-size: 22px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
}
.location-badge {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: #0d6efd;
background: rgba(13,110,253,0.12);
padding: 6px 12px;
border-radius: 50px;
margin-bottom: 10px;
}
/* Body */
.location-body {
margin-top: 16px;
}
.location-address,
.location-phone {
font-size: 14.5px;
color: #475569;
display: flex;
gap: 10px;
line-height: 1.6;
margin-bottom: 14px;
}
.location-address i,
.location-phone i {
color: #0d6efd;
margin-top: 3px;
}
/* Phone link */
.location-phone a {
color: #0f172a;
font-weight: 600;
text-decoration: none;
}
.location-phone a:hover {
color: #0d6efd;
}
/* Footer */
.location-footer {
margin-top: 22px;
}
.map-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #0d6efd, #0047d4);
padding: 12px 22px;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
}
.map-btn i {
transition: transform 0.3s ease;
}
.map-btn:hover {
box-shadow: 0 10px 25px rgba(13,110,253,0.35);
}
.map-btn:hover i {
transform: translateX(4px);
}
.state-content {
display: none;
}
/*----contact us page----*/
/* ===== MODERN CONTACT HERO ===== */
.contact-hero-modern {
padding: 60px 0;
background: linear-gradient(135deg, #eef3ff 0%, #fdfbff 100%);
position: relative;
overflow: hidden;
}
/* LEFT INFO CARD */
.contact-info-modern {
background: #ffffff;
border-radius: 28px;
padding: 50px 40px;
box-shadow: 0 30px 70px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
gap: 25px;
z-index: 2;
position: relative;
}
.contact-info-modern h2 {
font-size: 32px;
font-weight: 800;
margin-bottom: 10px;
}
.contact-info-modern .subtitle {
color: #6b7280;
font-size: 15px;
margin-bottom: 30px;
}
.info-item-modern {
display: flex;
align-items: flex-start;
gap: 18px;
background: #f6f9ff;
padding: 18px 20px;
border-radius: 18px;
transition: transform 0.3s;
}
.info-item-modern:hover {
transform: translateY(-5px);
}
.info-item-modern .icon {
background: linear-gradient(135deg,#0d6efd,#2563eb);
color: #fff;
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.info-item-modern .info-text h4 {
margin: 0 0 4px 0;
font-size: 14px;
font-weight: 600;
}
.info-item-modern .info-text p, .info-item-modern .info-text a {
font-size: 13px;
margin: 0;
color: #374151;
text-decoration: none;
}
.info-item-modern .info-text a:hover {
color: #0d6efd;
}
/* RIGHT FORM CARD */
.contact-form-modern {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
border-radius: 28px;
padding: 50px 45px;
box-shadow: 0 30px 70px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-form-modern h2 {
font-size: 30px;
font-weight: 800;
margin-bottom: 25px;
}
.contact-form-modern .form-control {
border-radius: 16px;
padding: 15px 18px;
border: 1px solid #e5e7eb;
font-size: 14px;
transition: 0.3s ease;
}
.contact-form-modern .form-control:focus {
box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
border-color: #0d6efd;
}
/* BUTTON */
.submit-btn-modern {
background: linear-gradient(135deg,#0d6efd,#2563eb);
color: #fff;
border: none;
padding: 16px 40px;
font-size: 15px;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s ease;
}
.submit-btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(13,110,253,0.35);
}
/* FLOATING SHAPES */
.floating-shape {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(13,110,253,0.07);
z-index: 0;
}
.shape-left { top: -40px; left: -40px; }
.shape-right { bottom: -40px; right: -40px; }
/* ===== MAP SECTION ===== */
.contact-map-section {
position: relative;
padding: 80px 0;
}
.map-iframe iframe {
width: 100%;
height: 450px;
border: 0;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
/* CENTERED CARD ON MAP */
.map-card-wrapper {
position: relative;
margin-bottom: -150px; /* Pull card on top of the map */
z-index: 2;
display: flex;
justify-content: center;
}
.map-card {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
padding: 30px 20px 10px 20px;
border-radius: 22px;
box-shadow: 0 25px 60px rgba(0,0,0,0.08);
max-width: 500px;
text-align: center;
z-index: 99;
}
.map-card h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 12px;
}
.map-card p {
font-size: 14px;
color: #4b5563;
margin-bottom: 18px;
}
.map-card .map-btn {
display: inline-block;
background: linear-gradient(135deg,#0d6efd,#2563eb);
color: #fff;
padding: 12px 30px;
border-radius: 28px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}
.map-card .map-btn i {
margin-left: 6px;
}
.map-card .map-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(13,110,253,0.35);
}
/* ===== MOBILE RESPONSIVE ===== */
/* Tablet and below */
@media (max-width: 991px) {
.contact-hero-modern .col-lg-5,
.contact-hero-modern .col-lg-7 {
flex: 0 0 100%;
max-width: 100%;
}
.contact-info-modern,
.contact-form-modern {
padding: 35px 25px;
}
.map-card-wrapper {
margin-bottom: -80px; /* Reduce overlap for smaller screens */
padding: 0 15px;
}
}
/* Mobile devices */
@media (max-width: 576px) {
.contact-info-modern,
.contact-form-modern {
padding: 25px 20px;
}
.contact-info-modern h2,
.contact-form-modern h2 {
font-size: 24px;
}
.contact-form-modern .submit-btn-modern {
width: 100%;
text-align: center;
}
.info-item-modern {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.info-item-modern .icon {
width: 45px;
height: 45px;
font-size: 18px;
}
.map-card {
max-width: 90%;
padding: 25px 20px;
}
.map-iframe iframe {
height: 350px;
}
}
/* Extra small devices */
@media (max-width: 400px) {
.contact-info-modern h2,
.contact-form-modern h2 {
font-size: 22px;
}
.info-item-modern .info-text h4 {
font-size: 13px;
}
.info-item-modern .info-text p,
.info-item-modern .info-text a {
font-size: 12px;
}
.submit-btn-modern {
padding: 14px 20px;
font-size: 14px;
}
.map-card h3 {
font-size: 20px;
}
.map-card p {
font-size: 13px;
}
}
.industry-main-heading h2 {
font-size: 32px;
font-weight: 800;
color: #111;
text-align: center;
position: relative;
padding-bottom: 14px;
margin-bottom: 10px;
font-family: UniNeueRegular, Inter, sans-serif;
}
/* underline */
.industry-main-heading h2::after {
content: "";
width: 70px;
height: 4px;
background: #007bff;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
border-radius: 2px;
}
/*----page manager css-----*/
.new-about-page{
padding: 60px 0;
background: #f5f7fa;
}
/* Card wrapper */
.abhh-rnhhdg-dnhhf{
background: #ffffff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 15px 40px rgba(0,0,0,0.08);
color: #333;
font-size: 15px;
line-height: 30px;
overflow: hidden; /* float fix */
transition: all 0.3s ease;
}
/* Subtle hover (optional) */
.abhh-rnhhdg-dnhhf:hover{
transform: translateY(-4px);
box-shadow: 0 25px 55px rgba(0,0,0,0.12);
}
/* Image */
.abhh-rnhhdg-dnhhf img{
float: right;
max-width: 360px;
width: 100%;
height: auto;
margin: 0 0 20px 30px;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* Heading h2 */
.abhh-rnhhdg-dnhhf h2{
font-size: 30px;
font-weight: 700;
margin-bottom: 18px;
color: #1f2937;
}
/* Heading h3 */
.abhh-rnhhdg-dnhhf h3{
font-size: 25px;
font-weight: 600;
margin: 35px 0 15px;
color: #111827;
position: relative;
padding-left: 16px;
}
/* Accent bar */
.abhh-rnhhdg-dnhhf h3::before{
content: "";
position: absolute;
left: 0;
top: 4px;
width: 5px;
height: 22px;
background: linear-gradient(180deg, #1F71FA, #1F71FA);
border-radius: 3px;
}
/* Paragraph */
.abhh-rnhhdg-dnhhf p{
margin-bottom: 15px;
color: #374151;
line-height: 30px;
}
/* List */
.abhh-rnhhdg-dnhhf ul{
padding-left: 0;
margin: 20px 0;
}
.abhh-rnhhdg-dnhhf ul li{
list-style: none;
padding-left: 30px;
margin-bottom: 12px;
position: relative;
color: #374151;
}
/* Custom check icon */
.abhh-rnhhdg-dnhhf ul li::before{
content: "✔";
position: absolute;
left: 0;
top: 2px;
color: #22c55e;
font-weight: bold;
}
/* Responsive */
@media (max-width: 768px){
.abhh-rnhhdg-dnhhf{
padding: 25px;
}
.abhh-rnhhdg-dnhhf img{
float: none;
margin: 0 0 20px 0;
max-width: 100%;
}
.abhh-rnhhdg-dnhhf h2{
font-size: 26px;
}
.abhh-rnhhdg-dnhhf h3{
font-size: 20px;
}
}
/*----mission and vission csss---*/
/* SECTION */
.new-about-dnjj-egdffdv {
padding: 60px 0;
background: #f4f7fb;
}
/* EACH ROW AS SINGLE CARD */
.new-about-dnjj-egdffdv .row {
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 45px rgba(0,0,0,0.08);
padding: 45px;
margin-bottom: 60px;
align-items: center;
}
/* REMOVE INNER CARD LOOK */
.abhh-rnhhdg-fbggv {
background: transparent;
padding: 0;
box-shadow: none;
}
/* Remove extra gap from last card */
.new-about-dnjj-egdffdv .row:last-child {
margin-bottom: 0;
}
/* TYPOGRAPHY */
.abhh-rnhhdg-fbggv h1,
.abhh-rnhhdg-fbggv h2,
.abhh-rnhhdg-fbggv h3 {
font-weight: 700;
color: #1f2937;
margin-bottom: 18px;
position: relative;
padding-bottom: 10px;
font-family: UniNeueRegular, Inter, sans-serif;
}
.abhh-rnhhdg-fbggv h2 {
font-size: 30px;
font-family: UniNeueRegular, Inter, sans-serif;
}
.abhh-rnhhdg-fbggv h2::after {
content: "";
width: 60px;
height: 4px;
background: #1e40af;
position: absolute;
left: 0;
bottom: 0;
border-radius: 3px;
}
.abhh-rnhhdg-fbggv p {
font-size: 15px;
line-height: 30px;
color: #4b5563;
}
/* LIST */
.abhh-rnhhdg-fbggv ul {
padding-left: 0;
margin-top: 20px;
}
.abhh-rnhhdg-fbggv ul li {
list-style: none;
padding-left: 34px;
margin-bottom: 14px;
position: relative;
color: #374151;
font-family: UniNeueRegular, Inter, sans-serif;
}
.abhh-rnhhdg-fbggv ul li::before {
content: "✔";
position: absolute;
left: 0;
color: #16a34a;
font-weight: 700;
}
/* IMAGE (PART OF SAME CARD) */
.buyjndfjdj {
padding-left: 30px;
}
.buyjndfjdj img {
width: 100%;
border-radius: 16px;
}
/* ================= RESPONSIVE ================= */
/* TABLET */
@media (max-width: 991px) {
.new-about-dnjj-egdffdv .row {
padding: 35px;
}
.buyjndfjdj {
padding-left: 0;
margin-top: 30px;
}
.abhh-rnhhdg-fbggv h2 {
font-size: 26px;
}
}
/* MOBILE */
@media (max-width: 576px) {
.new-about-dnjj-egdffdv {
padding: 50px 0;
}
.new-about-dnjj-egdffdv .row {
padding: 25px;
margin-bottom: 40px;
}
/* STACK ORDER */
.new-about-dnjj-egdffdv .row > div {
margin-bottom: 20px;
}
.buyjndfjdj img {
border-radius: 14px;
}
.abhh-rnhhdg-fbggv h2 {
font-size: 22px;
}
.abhh-rnhhdg-fbggv p,
.abhh-rnhhdg-fbggv ul li {
font-size: 15.5px;
}
}
@media (max-width: 576px) {
.new-about-dnjj-egdffdv .row:last-child {
margin-bottom: 0;
}
}
/*----pasco journey-----*/
.pasco-journey {
background: #ffffff;
padding: 70px 0;
font-family: UniNeueRegular, Inter, sans-serif;
}
/* ===== HEADING ===== */
.journey-hero {
text-align: center;
margin-bottom: 35px;
}
.legacy-tag {
display: inline-block;
background: #eef2ff;
color: #4f46e5;
font-size: 13px;
padding: 6px 14px;
border-radius: 50px;
margin-bottom: 14px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
}
.journey-hero h2 {
font-size: 45px;
font-weight: 800;
margin: 0;
}
.journey-hero p {
font-size: 16px;
color: #666;
margin-top: 10px;
}
/* ===== TRACK ===== */
/* ===== TRACK ===== */
.journey-track {
display: flex;
gap: 40px;
overflow-x: auto;
padding: 20px 60px;
scroll-snap-type: x mandatory;
}
/* ===== CARD ===== */
.journey-item {
scroll-snap-align: start;
min-width: 260px;
padding: 28px 26px 36px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
transition: transform 0.35s ease, box-shadow 0.35s ease;
position: relative;
}
/* Wide */
.journey-item.wide {
min-width: 380px;
}
/* Hover */
.journey-item:hover {
transform: translateY(-6px);
box-shadow: 0 18px 45px rgba(0,0,0,0.1);
}
/* ===== YEAR ===== */
.journey-year {
font-size: 36px;
font-weight: 800;
color: #111;
margin-bottom: 12px;
letter-spacing: 1px;
}
/* ===== TEXT ===== */
.journey-text {
font-size: 15px;
color: #444;
line-height: 1.7;
}
/* ===== TRUCK ICON (AUTO) ===== */
.journey-item::after {
content: "🚚";
position: absolute;
bottom: 16px;
right: 20px;
font-size: 20px;
opacity: 0.35;
animation: truck-move 2.8s ease-in-out infinite;
}
@keyframes truck-move {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
/* ===== COLORS ===== */
.pastel-1 { background: #f1f5ff; }
.pastel-2 { background: #fdf4f8; }
.pastel-3 { background: #f0fdf4; }
.pastel-4 { background: #fff7ed; }
/* ===== MOBILE ===== */
@media (max-width: 768px) {
.journey-track {
padding: 20px;
gap: 25px;
}
.journey-item {
min-width: 220px;
}
.journey-year {
font-size: 30px;
}
}
/*----gallery css-----*/
/* Gallery Section */
.new-gall{
padding: 60px 0;
background: #f8f9fb;
}
/* Card */
.main-gallery-ff{
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: all 0.35s ease;
height: 100%;
}
.main-gallery-ff:hover{
transform: translateY(-6px);
box-shadow: 0 18px 45px rgba(0,0,0,0.15);
}
/* Image wrapper */
.image-bhdgd{
position: relative;
overflow: hidden;
}
.image-bhdgd img{
width: 100%;
transition: transform 0.5s ease;
}
/* Zoom effect */
.main-gallery-ff:hover img{
transform: scale(1.08);
}
/* Title */
.content-fbahash{
padding: 18px 20px;
font-size: 16px;
font-weight: 600;
color: #333;
text-align: center;
background: #fff;
}
/* Fancybox link */
.z-mines{
text-decoration: none;
color: inherit;
display: block;
}
/* Responsive */
@media (max-width: 768px){
.image-bhdgd img{
height: 220px;
}
}
@media (max-width: 576px){
.image-bhdgd img{
height: 200px;
}
}
/*----career page css----*/
/* Career Page Wrapper */
.career-details-area{
padding: 70px 0;
background: #f7f9fc;
}
/* Career intro content */
.anbhhdfhdh-dbgsfd{
background: #ffffff;
padding: 35px;
border-radius: 14px;
box-shadow: 0 12px 35px rgba(0,0,0,0.08);
margin-bottom: 50px;
font-size: 16px;
line-height: 28px;
color: #444;
}
/* Job card */
.anns-dhhuu{
background: #ffffff;
padding: 26px 30px;
border-radius: 16px;
box-shadow: 0 12px 35px rgba(0,0,0,0.08);
transition: all 0.35s ease;
}
.anns-dhhuu:hover{
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
/* Job title */
.annn-hdhdfh h3{
font-size: 20px;
font-weight: 700;
color: #222;
margin-bottom: 10px;
}
/* Tags */
.annn-hdhdfh ul{
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
}
.annn-hdhdfh ul li{
background: #eef3ff;
color: #2f5cff;
padding: 6px 14px;
font-size: 13px;
border-radius: 50px;
font-weight: 500;
}
/* View Info button */
.ahhghbdfhdh{
text-align: right;
}
.njhhbnsduerj{
display: inline-block;
padding: 12px 26px;
background: linear-gradient(135deg, #1F71FA, #1F71FA);
color: #ffffff;
font-size: 14px;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
transition: all 0.35s ease;
margin-right: 13px;
margin-top: 15px;
}
.njhhbnsduerj:hover{
background: linear-gradient(135deg, #1d45e3, #5578ff);
transform: translateY(-2px);
color: #fff;
}
/* No jobs */
.career-details-area h6{
text-align: center;
font-size: 18px;
color: #777;
margin-top: 40px;
}
/* Responsive */
@media (max-width: 768px){
.ahhghbdfhdh{
text-align: left;
margin-top: 15px;
}
.anns-dhhuu{
padding: 22px;
}
.annn-hdhdfh h3{
font-size: 18px;
}
}
/*---career detail-----*/
/* Job Details Section */
.service-details-area-2{
padding: 80px 0;
background: #f7f9fc;
}
/* Apply Button (Top Right) */
.service-details-area-2 .njhhbnsduerj{
margin-bottom: 25px;
}
/* Job Info Card */
.abnnjdfeirtkek{
background: #ffffff;
padding: 35px;
border-radius: 18px;
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
/* Job Title */
.abnnjdfeirtkek h2{
font-size: 28px;
font-weight: 800;
color: #222;
margin-bottom: 20px;
}
/* Job Meta */
.abnnjdfeirtkek ul{
list-style: none;
padding: 0;
margin: 0;
}
.abnnjdfeirtkek ul li{
font-size: 15px;
color: #555;
margin-bottom: 10px;
}
.abnnjdfeirtkek ul li strong{
color: #111;
}
/* Job Description */
.abnnjdfeirtkek p{
font-size: 16px;
line-height: 30px;
color: #444;
}
/* Modal Header */
.anjgbydfhdh{
background: linear-gradient(135deg, #2f5cff, #6a8cff);
color: #fff;
border-radius: 6px 6px 0 0;
}
.anjgbydfhdh h4{
font-weight: 700;
}
.anjgbydfhdh .close{
color: #fff;
opacity: 1;
}
/* Modal Body */
.modal-content{
border-radius: 18px;
border: none;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
/* Form Field Wrapper */
.anjjjbyhdfh{
margin-bottom: 15px;
}
/* Inputs */
.abs-new,
.abs-new-2{
width: 100%;
padding: 14px 18px;
border-radius: 10px;
border: 1px solid #ddd;
font-size: 14px;
transition: all 0.3s ease;
}
.abs-new:focus,
.abs-new-2:focus{
outline: none;
border-color: #2f5cff;
box-shadow: 0 0 0 3px rgba(47,92,255,0.15);
}
/* Textarea */
.abs-new-2{
min-height: 110px;
resize: none;
}
/* Submit Button */
.modal-body .njhhbnsduerj{
width: 100%;
padding: 14px;
border-radius: 50px;
background: linear-gradient(135deg, #2f5cff, #6a8cff);
color: #fff;
font-weight: 700;
border: none;
transition: all 0.35s ease;
}
.modal-body .njhhbnsduerj:hover{
background: linear-gradient(135deg, #1d45e3, #5578ff);
transform: translateY(-2px);
}
/* File input */
.abs-new[type="file"]{
padding: 10px;
background: #fafafa;
}
/* Responsive */
@media (max-width: 768px){
.abnnjdfeirtkek{
padding: 25px;
}
.abnnjdfeirtkek h2{
font-size: 22px;
}
}
.abnnjdfeirtkek{
background: #ffffff;
padding: 35px;
border-radius: 18px;
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
/* Paragraphs */
.abnnjdfeirtkek p{
font-size: 16px;
line-height: 30px;
color: #444;
margin-bottom: 18px;
}
/* Headings */
.abnnjdfeirtkek h4{
font-size: 18px;
font-weight: 700;
margin: 30px 0 15px;
color: #222;
position: relative;
padding-left: 14px;
}
/* Left border accent */
.abnnjdfeirtkek h4::before{
content: "";
position: absolute;
left: 0;
top: 4px;
width: 4px;
height: 18px;
background: #2f5cff;
border-radius: 2px;
}
/* Lists */
.abnnjdfeirtkek ul{
padding-left: 20px;
margin-bottom: 10px;
}
.abnnjdfeirtkek ul li{
font-size: 15px;
color: #444;
margin-bottom: 10px;
line-height: 26px;
position: relative;
}
/* Responsive */
@media (max-width: 768px){
.abnnjdfeirtkek{
padding: 25px;
}
}
.abnnjdfeirtkek ul{
list-style: none;
padding-left: 0;
margin-bottom: 10px;
}
.abnnjdfeirtkek ul li{
padding-left: 28px;
position: relative;
}
/* Icon */
.abnnjdfeirtkek ul li::before{
content: "✔";
position: absolute;
left: 0;
top: 2px;
font-size: 14px;
color: #2f5cff;
}
/* =========================
MOBILE OPTIMIZATION
========================= */
@media (max-width: 768px){
/* Section padding */
.service-details-area-2{
padding: 45px 0;
}
/* Apply button */
.service-details-area-2 .njhhbnsduerj{
float: none !important;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
/* Card */
.abnnjdfeirtkek{
padding: 22px;
border-radius: 14px;
}
/* Job Title */
.abnnjdfeirtkek h2{
font-size: 22px;
line-height: 30px;
}
/* Paragraph text */
.abnnjdfeirtkek p{
font-size: 15px;
line-height: 28px;
}
/* Headings */
.abnnjdfeirtkek h4{
font-size: 16px;
margin: 24px 0 12px;
padding-left: 12px;
}
.abnnjdfeirtkek h4::before{
height: 16px;
top: 3px;
}
/* List items */
.abnnjdfeirtkek ul li{
font-size: 14px;
line-height: 24px;
padding-left: 26px;
}
.abnnjdfeirtkek ul li::before{
font-size: 13px;
top: 3px;
}
/* Modal */
.modal-dialog{
margin: 15px;
}
/* Inputs */
.abs-new,
.abs-new-2{
font-size: 14px;
padding: 12px 14px;
border-radius: 8px;
}
/* Submit button */
.modal-body .njhhbnsduerj{
padding: 13px;
font-size: 15px;
}
}
/*---offer section-----*/
/* Offer Section */
.offer-section{
padding: 80px 0;
background: linear-gradient(135deg, #f7f9ff, #eef2ff);
}
/* SINGLE MAIN BOX */
.offer-single-box{
background: #ffffff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 25px 70px rgba(0,0,0,0.12);
}
/* Image */
.image-bgsdfshdh{
overflow: hidden;
}
.image-bgsdfshdh img{
width: 100%;
height: auto;
display: block;
}
/* Content */
.content-bgghsdhsdh{
padding: 25px;
font-size: 16px;
line-height: 30px;
color: #444;
}
/* Headings */
.content-bgghsdhsdh h2,
.content-bgghsdhsdh h3{
font-weight: 800;
color: #1e293b;
margin-bottom: 18px;
}
.content-bgghsdhsdh h4{
font-size: 20px;
font-weight: 700;
margin: 30px 0 14px;
position: relative;
padding-left: 14px;
color: #1e293b;
}
.content-bgghsdhsdh h4::before{
content: "";
position: absolute;
left: 0;
top: 4px;
width: 4px;
height: 18px;
background: #2f5cff;
border-radius: 2px;
}
/* Paragraph */
.content-bgghsdhsdh p{
margin-bottom: 18px;
}
/* List */
.content-bgghsdhsdh ul{
list-style: none;
padding-left: 0;
margin-bottom: 20px;
}
.content-bgghsdhsdh ul li{
padding-left: 30px;
margin-bottom: 12px;
position: relative;
}
.content-bgghsdhsdh ul li::before{
content: "✔";
position: absolute;
left: 0;
top: 2px;
color: #2f5cff;
font-weight: 700;
}
/* CTA */
.content-bgghsdhsdh a{
display: inline-block;
margin-top: 25px;
padding: 14px 34px;
border-radius: 50px;
background: linear-gradient(135deg, #2f5cff, #6a8cff);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.content-bgghsdhsdh a:hover{
transform: translateY(-2px);
background: linear-gradient(135deg, #1d45e3, #5578ff);
}
/* Responsive */
@media (max-width: 768px){
.offer-section{
padding: 50px 0;
}
.content-bgghsdhsdh{
padding: 30px;
font-size: 15px;
line-height: 28px;
}
.content-bgghsdhsdh h4{
font-size: 18px;
}
}
.content-dfbashasdhsa p a{
color: #6b7280;
}
.content-dfbashasdhsa h3 a{
color: #111827;
}
/*----page css-----*/
/* ================================
MAIN SECTION
================================ */
.abhh-rnjbyuiwemw {
padding: 70px 0;
background: linear-gradient(135deg, #f9fafb, #ffffff);
}
/* ================================
CARD WRAPPER
================================ */
.main-ds-hhf {
background: #ffffff;
padding: 45px;
border-radius: 18px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
/* ================================
TOP IMAGE
================================ */
.image-bhdggfh {
width: 100%;
margin-bottom: 35px;
}
.image-bhdggfh img {
width: 100%;
max-height: 420px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
/* ================================
CONTENT AREA
================================ */
.content-dbfasyash {
width: 100%;
}
/* HEADINGS */
.content-dbfasyash h2,
.content-dbfasyash h3 {
font-size: 25px;
font-weight: 700;
margin-bottom: 20px;
color: #1f2937;
position: relative;
}
/* UNDERLINE ACCENT */
.content-dbfasyash h3::after {
content: "";
width: 60px;
height: 4px;
background: #2563eb;
display: block;
margin-top: 8px;
border-radius: 10px;
}
/* PARAGRAPHS */
.content-dbfasyash p {
font-size: 16px;
line-height: 1.8;
color: #4b5563;
margin-bottom: 16px;
}
/* LIST */
.content-dbfasyash ul {
padding-left: 18px;
margin-top: 15px;
}
.content-dbfasyash ul li {
margin-bottom: 10px;
color: #374151;
position: relative;
padding-left: 20px;
list-style: none;
}
.content-dbfasyash ul li::before {
content: "✔";
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
}
/* ================================
TABLE DESIGN
================================ */
.content-dbfasyash table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
margin-top: 25px;
}
/* HEADER ROW */
.content-dbfasyash table tr:first-child {
background: #2563eb;
}
.content-dbfasyash table tr:first-child td {
color: #ffffff;
font-weight: 600;
font-size: 15px;
}
/* CELLS */
.content-dbfasyash table td {
padding: 14px 16px;
font-size: 14.5px;
color: #374151;
border-bottom: 1px solid #e5e7eb;
vertical-align: top;
}
/* SERIAL COLUMN */
.content-dbfasyash table td:first-child {
width: 80px;
text-align: center;
font-weight: 600;
color: #111827;
}
/* HOVER */
.content-dbfasyash table tr:not(:first-child):hover {
background: #f9fafb;
transition: background 0.3s ease;
}
/* LAST ROW */
.content-dbfasyash table tr:last-child td {
border-bottom: none;
}
/* ================================
RESPONSIVE TABLE
================================ */
@media (max-width: 768px) {
.main-ds-hhf {
padding: 25px;
}
.image-bhdggfh img {
max-height: 260px;
}
.content-dbfasyash h2,
.content-dbfasyash h3 {
font-size: 24px;
}
.content-dbfasyash table,
.content-dbfasyash tbody,
.content-dbfasyash tr,
.content-dbfasyash td {
display: block;
width: 100%;
}
.content-dbfasyash table tr:first-child {
display: none;
}
.content-dbfasyash table tr {
margin-bottom: 15px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
padding: 12px;
}
.content-dbfasyash table td {
border: none;
padding: 8px 10px;
}
.content-dbfasyash table td:first-child {
text-align: left;
font-size: 13px;
color: #2563eb;
}
}
/*---new-css---*/
.mn-center {
margin-top: 25px;
}
/* Card wrapper */
.mn-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px; /* proper spacing between cards */
}
/* Card base */
.mn-card {
padding: 26px 24px;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}
/* Pastel colors */
.mn-card-blue {
background: #f1f5ff;
}
.mn-card-green {
background: #eefaf4;
}
/* Headings */
.mn-card h3 {
font-size: 17px;
font-weight: 600;
color: #111827;
margin: 0 0 12px;
}
/* List reset */
.mn-card ul {
list-style: none; /* ❌ bullets removed */
padding-left: 0;
margin-bottom: 18px;
}
/* Custom bullet look */
.mn-card ul li {
position: relative;
padding-left: 22px;
font-size: 14.5px;
color: #374151;
line-height: 1.65;
margin-bottom: 8px;
}
/* Soft dot bullet */
.mn-card ul li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #6366f1; /* pastel indigo */
}
/* Last list spacing fix */
.mn-card ul:last-child {
margin-bottom: 0;
}
.mt-fbnhhdn{
margin-top: 20px;
}
.new-service-bfhhf {
padding: 70px 0;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
position: relative;
}
/* Optional subtle pattern effect */
.new-service-bfhhf::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(
rgba(99, 102, 241, 0.08) 1px,
transparent 1px
);
background-size: 18px 18px;
pointer-events: none;
}
/* Keep content above overlay */
.new-service-bfhhf > .container {
position: relative;
z-index: 1;
}
/*----value added services----*/
.news-detail-section {
padding: 60px 0;
background: #f5f7fa;
}
/* Card */
.news-detail-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* Image */
.news-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Content */
.news-content {
padding: 35px 40px;
font-size: 16px;
line-height: 1.8;
color: #444;
}
/* Typography inside description */
.news-content h1,
.news-content h2,
.news-content h3 {
margin-bottom: 15px;
font-weight: 700;
color: #222;
}
.news-content p {
margin-bottom: 18px;
}
.news-content ul {
padding-left: 20px;
margin-bottom: 20px;
}
.news-content ul li {
margin-bottom: 10px;
}
/* Responsive */
@media (max-width: 768px) {
.news-content {
padding: 25px 20px;
font-size: 15px;
}
}
.new-design-fbhhfg {
margin: 60px 0;
padding: 48px 50px;
background: #f7f9fc;
border-radius: 18px;
border: 1px solid #e2e8f0;
}
/* Heading */
.new-design-fbhhfg h3 {
font-size: 26px;
font-weight: 700;
color: #243b53;
margin-bottom: 36px;
}
/* Divider */
.new-design-fbhhfg h3::after {
content: "";
display: block;
margin-top: 12px;
width: 70px;
height: 3px;
background: #c7d2fe;
border-radius: 3px;
}
/* Grid */
.new-design-fbhhfg ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px 26px;
}
/* Card */
.new-design-fbhhfg ul li {
position: relative;
padding: 22px 22px 22px 54px;
background: #ffffff;
border-radius: 14px;
border: 1px solid #edf2f7;
transition: background 0.25s ease;
}
.new-design-fbhhfg ul li:hover {
background: #f1f5ff;
}
/* ✔ Common check icon (NO library needed) */
.new-design-fbhhfg ul li::before {
content: "✓";
position: absolute;
left: 18px;
top: 22px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #e0e7ff;
color: #1F71FA;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Text */
.new-design-fbhhfg ul li p {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: #334e68;
}
/* Responsive */
@media (max-width: 992px) {
.new-design-fbhhfg {
padding: 36px 32px;
}
.new-design-fbhhfg ul {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.new-design-fbhhfg h3 {
font-size: 22px;
}
.new-design-fbhhfg ul li p {
font-size: 15px;
}
}
.news-content blockquote {
position: relative;
margin: 60px 0;
padding: 40px 44px;
background: linear-gradient(180deg, #f9fbff 0%, #f3f6fd 100%);
border-radius: 18px;
border-left: 8px solid #a5b4fc;
box-shadow: 0 14px 40px rgba(30, 64, 175, 0.08);
}
/* Large opening quote (typographic, NOT icon) */
.news-content blockquote::before {
content: "“";
position: absolute;
top: -18px;
left: 24px;
font-size: 96px;
line-height: 1;
color: #dbe2ff;
font-family: Georgia, serif;
}
/* Text */
.news-content blockquote p {
margin: 0;
font-size: 17px;
line-height: 1.9;
color: #243b53;
position: relative;
z-index: 1;
}
/* Slight emphasis on first line */
.news-content blockquote p::first-line {
font-weight: 600;
color: #1e3a8a;
}
/* Mobile */
@media (max-width: 576px) {
.news-content blockquote {
padding: 30px 26px;
}
.news-content blockquote p {
font-size: 15.5px;
line-height: 1.8;
}
.news-content blockquote::before {
font-size: 72px;
top: -12px;
}
}
.news-content h3 {
font-size: 22px;
font-weight: 700;
color: #1f2d3d;
margin-bottom: 22px;
position: relative;
}
/* UL Reset */
.news-content ul {
list-style: none;
padding: 0;
margin: 0;
}
/* LI Design */
.news-content ul li {
position: relative;
padding-left: 36px;
margin-bottom: 16px;
font-size: 15px;
line-height: 1.7;
color: #4a5568;
}
/* Icon (Font Awesome) */
.news-content ul li::before {
content: "\f058"; /* fa-check-circle */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 2px;
color: #6c9cff;
font-size: 16px;
}
.ms-form-ff{
width: 100%;
}
.ts-card-bhhd{
background:#ffffff;
border-radius:14px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
overflow:hidden;
margin:30px 0;
}
/* Table */
.ts-card-bhhd table{
width:100%;
border-collapse:collapse;
}
/* Header */
.ts-card-bhhd thead td{
background:linear-gradient(135deg,#0d6efd,#3a7bff);
color:#fff;
font-size:20px;
font-weight:600;
text-align:center;
padding:10px;
letter-spacing:0.5px;
}
/* Body */
.ts-card-bhhd tbody td{
padding:14px 18px;
font-size:14px;
color:#444;
border-bottom:1px solid #f1f1f1;
transition:all .2s ease;
}
/* alternate rows */
.ts-card-bhhd tbody tr:nth-child(even){
background:#f8faff;
}
/* hover */
.ts-card-bhhd tbody tr:hover{
background:#eef4ff;
transform:scale(1.01);
}
/* model style */
.ts-card-bhhd tbody td{
font-weight:500;
letter-spacing:0.3px;
}
/* empty cell */
.ts-card-bhhd td:empty{
background:#fafafa;
}
/* responsive */
@media(max-width:768px){
.ts-card-bhhd tbody td{
padding:12px;
font-size:13px;
}
.ts-card-bhhd thead td{
font-size:18px;
}
}
/*---new team css---*/
.hod-section {
background: #0f172a;
padding: 60px 20px;
display: flex;
justify-content: center;
}
.hod-container {
max-width: 1100px;
width: 100%;
}
/* Card */
.hod-card {
position: relative;
display: flex;
align-items: center;
gap: 50px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 50px;
overflow: hidden;
transition: 0.4s;
}
/* Gradient Border Glow */
.hod-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(120deg, #1F71FA, #1F71FA, #7c3aed);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none; /* 🔥 THIS FIX */
}
/* Hover */
.hod-card:hover {
transform: translateY(-10px) scale(1.01);
}
/* Image */
.hod-image {
flex: 0 0 300px;
position: relative;
}
.hod-image img {
width: 100%;
border-radius: 20px;
transform: rotate(-3deg);
transition: 0.4s;
}
.hod-card:hover .hod-image img {
transform: rotate(0deg) scale(1.05);
}
/* Content */
.hod-content {
color: #fff;
}
.hod-content .tag {
display: inline-block;
background: linear-gradient(90deg, #1F71FA, #1F71FA);
color: #000;
padding: 5px 12px;
font-size: 12px;
border-radius: 50px;
margin-bottom: 15px;
font-weight: 600;
}
.hod-content .tag a{
color: #fff;
}
.hod-content h2 {
font-size: 32px;
margin-bottom: 5px;
}
.hod-content h4 {
font-size: 18px;
color: #aaa;
margin-bottom: 15px;
}
.hod-content p {
font-size: 15px;
line-height: 1.6;
color: #ddd;
}
/* Responsive */
@media(max-width: 768px) {
.hod-card {
flex-direction: column;
text-align: center;
padding: 30px;
}
.hod-image img {
transform: none;
}
}
/* Modal base */
.hod-modal .modal-content {
background: rgba(15, 23, 42, 0.97);
border-radius: 20px;
padding: 40px 30px;
border: none;
backdrop-filter: blur(20px);
position: relative;
color: #fff;
}
/* Gradient border */
.hod-modal .modal-content::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(120deg, #00f5a0, #00d9f5, #7c3aed);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Close */
.custom-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
color: #fff;
opacity: 1;
}
.custom-close:hover {
color: #00f5a0;
}
/* Header */
.modal-header-custom {
margin-bottom: 25px;
}
.modal-header-custom h2 {
font-size: 32px;
margin: 10px 0 5px;
}
.designation {
color: #aaa;
font-size: 16px;
}
/* Badge */
.badge-role {
display: inline-block;
background: linear-gradient(90deg, #00f5a0, #00d9f5);
color: #000;
padding: 5px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
}
/* Content */
.modal-content-box {
font-size: 15px;
line-height: 1.7;
color: #ddd;
}
/* Lead paragraph */
.lead-text {
font-size: 17px;
color: #fff;
margin-bottom: 15px;
}
/* Highlight box */
.highlight-box {
margin-top: 20px;
padding: 12px 15px;
border-left: 3px solid #00f5a0;
background: rgba(255,255,255,0.05);
border-radius: 8px;
font-size: 14px;
}
/* Animation */
.hod-modal .modal-dialog {
transform: scale(0.85);
transition: 0.3s ease;
}
.hod-modal.show .modal-dialog {
transform: scale(1);
}
.modal-content-box h4{
font-size: 18px;
font-weight: 600;
color: #333;
margin-top: 25px;
margin-bottom: 12px;
letter-spacing: 0.5px;
position: relative;
padding-left: 12px;
}
/* Subtle underline glow */
.modal-content-box h4::after{
content: "";
position: absolute;
bottom: -4px;
left: 12px;
width: 35px;
height: 2px;
background: #1F71FA;
opacity: 0.6;
}
@media (max-width: 992px) {
.hod-card {
gap: 30px;
padding: 40px;
}
.hod-image {
flex: 0 0 220px;
}
.hod-content h2 {
font-size: 26px;
}
.hod-content h4 {
font-size: 16px;
}
}
@media (max-width: 768px) {
.hod-section {
padding: 40px 15px;
}
.hod-card {
flex-direction: column;
text-align: center;
padding: 25px;
gap: 20px;
}
.hod-image {
flex: unset;
width: 100%;
max-width: 250px;
margin: auto;
}
.hod-image img {
transform: none;
}
.hod-content h2 {
font-size: 22px;
}
.hod-content h4 {
font-size: 14px;
}
.hod-content p {
font-size: 14px;
}
.hod-content .tag {
font-size: 11px;
padding: 4px 10px;
}
}
@media (max-width: 480px) {
.hod-card {
padding: 20px 15px;
border-radius: 15px;
}
.hod-content h2 {
font-size: 20px;
}
.hod-content p {
font-size: 13.5px;
line-height: 1.5;
}
}
@media (max-width: 768px) {
.hod-modal .modal-content {
padding: 25px 20px;
}
#hodModal .modal-body{
max-height: auto !important;
}
.modal-header-custom h2 {
font-size: 22px;
}
.designation {
font-size: 14px;
}
.modal-content-box {
font-size: 14px;
}
.modal-content-box h4 {
font-size: 16px;
color: #fff; /* 🔥 FIX (dark bg pe readable) */
}
}
/*--new team css bottome--*/
.management-team-snhh {
background: #f3f6fb;
padding: 80px 0;
}
/* Card */
.team-verti-dnjushhd {
position: relative;
background: #ffffff;
border-radius: 18px;
overflow: hidden;
padding-top: 70px;
text-align: center;
transition: 0.3s;
box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}
/* TOP GRADIENT STRIP */
.team-verti-dnjushhd::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 90px;
width: 100%;
background: linear-gradient(135deg, #4f46e5, #3b82f6);
}
/* IMAGE */
.team-image-snjj {
position: absolute;
top: 35px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 6px solid #fff;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
z-index: 2;
}
.team-image-snjj img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* BODY */
.team-body-ammm {
padding: 70px 20px 20px;
}
/* NAME */
.team-body-ammm h5 {
font-size: 17px;
font-weight: 600;
margin-bottom: 5px;
color: #111;
padding-top: 30px;
}
/* DESIGNATION */
.designation-ss {
font-size: 13px;
color: #4f46e5;
margin-bottom: 15px;
display: block;
}
/* CONTACT BOX */
.team-body-ammm p {
font-size: 13px;
color: #555;
margin: 6px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}
/* ICON STYLE */
.team-body-ammm i {
width: 28px;
height: 28px;
background: #eef2ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #4f46e5;
font-size: 12px;
}
/* HOVER EFFECT */
.team-verti-dnjushhd:hover {
transform: translateY(-8px);
box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}
/* IMAGE HOVER */
.team-verti-dnjushhd:hover .team-image-snjj {
transform: translateX(-50%) scale(1.05);
}
/* SLIDER GAP */
.team-carousel .team-verti-dnjushhd {
margin: 15px;
}
/*--product box css---*/
.vehicle-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
transition: 0.3s;
box-shadow: 0 4px 12px #78787840;
padding: 12px 16px 16px;
height: 100%;
position: relative;
}
.vehicle-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.vehicle-image img {
width: 100%;
height: 200px;
object-fit: contain;
}
.vehicle-body {
padding: 15px 12px 20px;
text-align: center;
}
.vehicle-name {
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
color: #111;
}
.vehicle-price {
font-size: 15px;
color: #333;
margin-bottom: 10px;
font-weight: 600;
}
.vehicle-price .ex-showroom {
font-size: 13px;
color: #777;
font-weight: 400;
margin-right: 5px;
}
.vehicle-rating i {
color: #facc15;
margin-right: 2px;
font-size: 13px;
}
.vehicle-rating i.active {
color: #f59e0b;
}
.enquire-btn {
display: inline-block;
width: 100%;
background: linear-gradient(135deg, #4f46e5, #3b82f6);
color: #fff;
padding: 8px 0;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: 0.3s;
}
.enquire-btn:hover {
background: linear-gradient(135deg, #3b82f6, #4f46e5);
}
.new-product-snhhdg{
padding: 50px 0px;
background: #f6f6f6;
}
/*--product detail css--*/
.product-detail-section {
background: #fff;
}
/* Gallery */
.product-gallery {
display: flex;
gap: 15px;
}
/* Thumbnails */
.thumb-slider {
width: 70px;
position: relative;
}
/* ✅ FIX: exact 5 thumbs visible */
.thumb-wrapper {
height: 375px; /* 5 * (70px thumb + 5px gap approx) */
overflow: hidden;
position: relative;
}
/* ✅ IMPORTANT (slider move hoga ispe) */
.thumb-inner {
transition: transform 0.3s ease;
}
/* ✅ FIX: fixed height so calculation perfect */
.thumb-item {
height: 70px;
margin-bottom: 5px;
cursor: pointer;
border: 1px solid #ccc;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 6px;
}
.thumb-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 🔥 professional look */
}
.thumb-item.active {
border-color: #1F71FA;
}
/* Thumb arrows */
.thumb-up,
.thumb-down {
position: absolute;
width: 100%;
background: #fff;
border: none;
cursor: pointer;
z-index: 2;
font-weight: bold;
border: 1px solid #ccc;
height: 30px;
line-height: 30px;
}
.thumb-up { top: 0; }
.thumb-down { bottom: 0; }
/* Main Image */
.main-image-box {
flex: 1;
position: relative;
background: #f6f6f6;
padding: 10px;
border-radius: 10px;
}
.main-image {
display: none;
}
.main-image.active {
display: block;
}
.main-image img {
width: 100%;
border-radius: 10px;
object-fit: contain;
}
/* Arrows */
.main-prev,
.main-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.6);
color: #fff;
border: none;
padding: 10px 12px;
cursor: pointer;
border-radius: 50%;
}
.main-prev { left: 10px; }
.main-next { right: 10px; }
/* Right placeholder */
.product-details-placeholder {
background: #fff;
padding: 30px;
border-radius: 10px;
height: 100%;
}
/* Title */
.product-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 15px;
}
/* Price */
.product-price {
font-size: 26px;
font-weight: bold;
color: #1F71FA;
}
.product-price span {
display: block;
font-size: 14px;
color: #777;
font-weight: normal;
}
.price-note {
font-size: 14px;
color: #333;
margin-top: 10px;
font-weight: 600;
}
/* Fuel Section */
.product-fuel label {
display: block;
font-weight: 600;
margin-bottom: 10px;
}
.fuel-options {
display: flex;
gap: 10px;
}
.fuel-options ul{
padding: 0;
margin: 0;
}
.fuel-options ul li{
list-style: none;
padding: 6px 12px;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 6px;
transition: 0.3s;
font-size: 13px;
background-color: #d6e5f9;
color: #000;
border-color: #d6e5f9;
display: inline-block;
}
.fuel-btn {
padding: 6px 12px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
border-radius: 6px;
transition: 0.3s;
font-size: 13px;
}
.fuel-btn:hover {
border-color: #1F71FA;
color: #fff;
}
.fuel-btn.active {
background-color: #d6e5f9;
color: #000;
border-color: #d6e5f9;
}
/* Buttons */
.product-actions .btn-primary {
background: #1F71FA;
border: none;
font-weight: 500;
}
.product-actions .btn-primary:hover {
background: #1557c0;
}
.an-dmhhf{
background: #1F71FA !important;
width: 60%;
}
.an-dmhhf a{
color: #fff !important;
}
.product-actions{
padding-top: 25px;
}
/* =========================
TABLET (<= 991px)
========================= */
@media (max-width: 991px) {
.product-gallery {
flex-direction: column;
}
.thumb-slider {
width: 100%;
order: 2;
margin-top: 10px;
}
.thumb-wrapper {
height: auto;
overflow-x: auto;
overflow-y: hidden;
}
.thumb-inner {
display: flex;
gap: 8px;
transform: none !important;
}
.thumb-item {
min-width: 70px;
height: 70px;
margin-bottom: 0;
}
.thumb-up,
.thumb-down {
display: none;
}
.main-image-box {
order: 1;
}
.product-details-placeholder {
margin-top: 20px;
}
}
/* =========================
MOBILE (<= 767px)
========================= */
@media (max-width: 767px) {
.product-title {
font-size: 22px;
}
.product-price {
font-size: 22px;
}
.product-price span {
font-size: 12px;
}
.price-note {
font-size: 13px;
}
.product-details-placeholder {
padding: 20px;
}
.fuel-options {
flex-wrap: wrap;
}
.fuel-btn {
font-size: 12px;
padding: 5px 10px;
}
.main-prev,
.main-next {
padding: 8px 10px;
}
.an-dmhhf {
width: 100%;
}
}
/* =========================
SMALL MOBILE (<= 480px)
========================= */
@media (max-width: 480px) {
.product-title {
font-size: 20px;
}
.product-price {
font-size: 20px;
}
.thumb-item {
min-width: 60px;
height: 60px;
}
.main-image-box {
padding: 5px;
}
}
/*--product tab--*/
.product-tabs-section {
background: #f9f9f9;
}
/* Tabs */
.tabs-header {
display: flex;
gap: 10px;
margin-bottom: 25px;
}
.tab-btn {
padding: 10px 20px;
border: none;
background: #eee;
cursor: pointer;
border-radius: 6px;
font-weight: 500;
transition: 0.3s;
}
.tab-btn.active {
background: #1F71FA;
color: #fff;
}
/* Content */
.tab-content.ann-ddddd {
display: none;
}
.tab-content.active {
display: block;
}
/* Image */
.spec-image img {
border-radius: 10px;
}
/* Spec List */
.spec-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.spec-item {
background: #fff;
padding: 15px;
border-radius: 8px;
border: 1px solid #eee;
}
.spec-item span {
display: block;
font-size: 13px;
color: #777;
}
.spec-item strong {
font-size: 16px;
color: #000;
}
/* Description */
.description-box {
background: #fff;
padding: 25px;
border-radius: 10px;
}
.description-box h3 {
margin-bottom: 15px;
}
.description-box h3 {
font-size: 22px;
font-weight: 600;
position: relative;
display: inline-block;
margin-bottom: 20px;
}
.description-box h3::after {
content: "";
width: 60px;
height: 3px;
background: #1F71FA;
position: absolute;
left: 0;
bottom: -8px;
border-radius: 2px;
}
.spec-item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.spec-item i {
font-size: 18px;
color: #1F71FA;
margin-top: 3px;
}
.new-nhhsdhsh {
margin-bottom: 25px;
}
/* Heading */
.new-nhhsdhsh h3 {
font-size: 24px;
font-weight: 600;
color: #222;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
/* Main underline */
.new-nhhsdhsh h3::after {
content: "";
width: 70px;
height: 3px;
background: #1F71FA;
position: absolute;
left: 0;
bottom: 0;
border-radius: 2px;
}
/* Light background line */
.new-nhhsdhsh h3::before {
content: "";
width: 120%;
height: 1px;
background: #e5e5e5;
position: absolute;
left: 0;
bottom: 1px;
z-index: -1;
}