/* Default Template Styles */
/* Typography */
body {
background: #fff;
font-family: 'poppins', sans-serif !important;
}
/*p {*/
/* color: #777; */
/* font-size: 0.85rem;*/
/* line-height: 1.6rem;*/
/* color: rgb(255, 255, 255);*/
/*}*/
a,
a:link,
a:visited,
a:hover,
a:active {
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: #000;
margin-bottom: 15px;
margin-top: 0;
}
h1,
.h1 {
font-size: 1.8rem;
}
h2,
.h2 {
font-size: 1.4rem;
}
h3,
.h3 {
font-size: 1.2rem;
}
h4,
.h4 {
font-size: 1.1rem;
}
h5,
.h5 {
font-size: 1rem;
}
h6,
.h6 {
font-size: 0.9rem;
}
h1.headline,
.h1.headline {
font-size: 3.8rem;
letter-spacing: -2.5px;
}
h2.headline,
.h2.headline {
font-size: 3rem;
letter-spacing: -2px;
}
h3.headline,
.h3.headline {
font-size: 2.6rem;
letter-spacing: -2px;
}
h4.headline,
.h4.headline {
font-size: 2.4rem;
letter-spacing: -1.5px;
}
h5.headline,
.h5.headline {
font-size: 2.2rem;
letter-spacing: -1.4px;
}
h6.headline,
.h6.headline {
font-size: 2rem;
letter-spacing: -1.3px;
}
.text-size-12,
.text-xxl-size-12 {
font-size: 12px !important;
line-height: 1.4;
}
.text-size-16,
.text-xxl-size-16 {
font-size: 16px !important;
line-height: 1.4;
}
.text-size-20,
.text-xxl-size-20,
.text-size-25,
.text-xxl-size-25,
.text-size-30,
.text-xxl-size-30,
.text-size-40,
.text-xxl-size-40,
.text-size-50,
.text-xxl-size-50,
.text-size-60,
.text-xxl-size-60,
.text-size-70,
.text-xxl-size-70,
.text-size-80,
.text-xxl-size-80,
.text-size-90,
.text-xxl-size-90,
.text-size-100,
.text-xxl-size-100 {
line-height: 1.4;
}
footer p{
color:#fff !important;
}
.text-size-20,
.text-xxl-size-20 {
font-size: 20px !important;
}
.text-size-25,
.text-xxl-size-25 {
font-size: 25px !important;
}
.text-size-30,
.text-xxl-size-30 {
font-size: 30px !important;
}
.text-size-40,
.text-xxl-size-40 {
font-size: 40px !important;
}
.text-size-50,
.text-xxl-size-50 {
font-size: 50px !important;
}
.text-size-60,
.text-xxl-size-60 {
font-size: 60px !important;
}
.text-size-70,
.text-xxl-size-70 {
font-size: 70px !important;
}
.text-size-80,
.text-xxl-size-80 {
font-size: 80px !important;
}
.text-size-90,
.text-xxl-size-90 {
font-size: 60px !important;
}
.text-size-100,
.text-xxl-size-100 {
font-size: 100px !important;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-thin {
font-weight: 300;
}
b,
strong,
.text-strong {
font-weight: 450;
}
.text-extra-strong {
font-weight: 450;
}
.text-line-height-1 {
line-height: 1 !important;
}
blockquote::before {
color: #e0e0e0;
content: "“";
display: block;
float: left;
font-family: georgia;
font-size: 80px;
height: 30px;
left: -40px;
position: relative;
top: -20px;
width: 0;
}
blockquote {
border: 0;
font-size: 1rem;
padding: 0 0 0 40px;
}
a.text-tag:link {
border: 1px solid #e5e5e5;
display: inline-block;
float: left;
font-size: 0.75rem;
margin: 1px 2px 1px 0;
padding: 6px 9px;
}
a.text-tag:link:hover {
background: #002633 none repeat scroll 0 0;
border: 1px solid #002633;
color: #fff;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
ul.text-list,
ol.text-list {
font-size: 0.85rem;
line-height: 1.8rem;
padding: 0 16px;
}
ul.text-list ul,
ol.text-list ol {
padding: 0 14px;
}
iframe {
display: block;
margin: 0;
}
/* Drop Cap */
.text-drop-cap {
float: left;
font-size: 65px;
line-height: 45px;
padding-right: 10px;
padding-top: 5px;
}
/* Tables */
table {
background: none repeat scroll 0 0 #fff;
border: 0;
font-size: 0.85rem;
line-height: 1.6rem;
}
table tr td,
table tr th {
padding: 10px;
}
table tfoot,
table thead {
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
table tr:nth-of-type(2n) {
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
th {
border-right: 1px solid #fff;
}
td {
border-right: 1px solid #fff;
}
/* Backgrounds */
.background-white-hightlight .top-nav .active-item>a,
.background-white-hightlight .top-nav li a:hover,
.background-white-hightlight .aside-nav li a:hover,
.background-white-hightlight .aside-nav>ul>li.active-item>a:link,
.background-white-hightlight .aside-nav>ul>li.active-item>a:visited,
.primary-color-white .background-primary-hightlight .top-nav .active-item>a,
.primary-color-white .background-primary-hightlight .top-nav li a:hover,
.primary-color-white .background-primary-hightlight .aside-nav li a:hover,
.primary-color-white .background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.primary-color-white .background-primary-hightlight .aside-nav>ul>li.active-item>a:visited {
background: #fff none repeat scroll 0 0;
color: #002633;
}
.background-orange-hightlight .top-nav .active-item>a,
.background-orange-hightlight .top-nav li a:hover,
.background-orange-hightlight .aside-nav li a:hover,
.background-orange-hightlight .aside-nav>ul>li.active-item>a:link,
.background-orange-hightlight .aside-nav>ul>li.active-item>a:visited,
.primary-color-orange .background-primary-hightlight .top-nav .active-item>a,
.primary-color-orange .background-primary-hightlight .top-nav li a:hover,
.primary-color-orange .background-primary-hightlight .aside-nav li a:hover,
.primary-color-orange .background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.primary-color-orange .background-primary-hightlight .aside-nav>ul>li.active-item>a:visited {
background: #E4A600 none repeat scroll 0 0;
color: #fff;
}
.background-primary-hightlight .top-nav .active-item>a,
.background-primary-hightlight .top-nav li a:hover,
.background-primary-hightlight .aside-nav li a:hover,
.background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.background-primary-hightlight .aside-nav>ul>li.active-item>a:visited,
.primary-color-primary .background-primary-hightlight .top-nav .active-item>a,
.primary-color-primary .background-primary-hightlight .top-nav li a:hover,
.primary-color-primary .background-primary-hightlight .aside-nav li a:hover,
.primary-color-primary .background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.primary-color-primary .background-primary-hightlight .aside-nav>ul>li.active-item>a:visited {
background: #ff5317 none repeat scroll 0 0;
color: #fff;
}
.background-dark-hightlight .top-nav .active-item>a,
.background-dark-hightlight .top-nav li a:hover,
.background-dark-hightlight .aside-nav li a:hover,
.background-dark-hightlight .aside-nav>ul>li.active-item>a:link,
.background-dark-hightlight .aside-nav>ul>li.active-item>a:visited,
.primary-color-dark .background-primary-hightlight .top-nav .active-item>a,
.primary-color-dark .background-primary-hightlight .top-nav li a:hover,
.primary-color-dark .background-primary-hightlight .aside-nav li a:hover,
.primary-color-dark .background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.primary-color-dark .background-primary-hightlight .aside-nav>ul>li.active-item>a:visited {
background: #002633 none repeat scroll 0 0;
color: #fff;
}
.background-none {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
border: 0;
}
/* Breaks */
hr.break {
border: 0;
border-top: 1px solid #e5e5e5;
display: block;
margin: 40px 0;
}
hr.break:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
hr.break.break-dashed {
border-top: 1px dashed #e5e5e5;
}
hr.break.break-dotted {
border-top: 1px dotted #e5e5e5;
}
hr.break.break-double {
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
height: 8px;
}
hr.break.break-dashed-double {
border-bottom: 1px dashed #e5e5e5;
border-top: 1px dashed #e5e5e5;
height: 8px;
}
hr.break.break-dotted-double {
border-bottom: 1px dotted #e5e5e5;
border-top: 1px dotted #e5e5e5;
height: 8px;
}
/* Small Breaks */
hr.break-small {
background: #e5e5e5;
border: 0;
display: block;
height: 2px;
margin: 20px 0 35px;
width: 60px;
}
hr.break-small.break-center {
margin: 20px auto 35px;
}
hr.break-small.break-double {
height: 0;
margin-bottom: 39px;
}
hr.break-small.break-double:before {
background: #e5e5e5;
border: 0 none;
content: "";
display: block;
height: 2px;
margin: 5px 0 0;
width: 60px;
}
hr.break.break-small.break-double:after {
background: #e5e5e5;
border: 0 none;
content: "";
display: block;
height: 2px;
margin: 4px 0 35px;
width: 60px;
}
hr.break-small.break-center.break-double:before {
margin: 5px auto 0;
}
hr.break.break-small.break-center.break-double:after {
margin: 4px auto 35px;
}
hr.break-small.break-double.background-white:before,
hr.break-small.break-double.background-white:after,
.primary-color-white hr.break-small.break-double.background-primary:before,
.primary-color-white hr.break-small.break-double.background-primary:after {
background: #fff;
}
hr.break-small.break-double.background-primary:before,
hr.break-small.break-double.background-primary:after,
.primary-color-primary hr.break-small.break-double.background-primary:before,
.primary-color-primary hr.break-small.break-double.background-primary:after {
background: #ff5317;
}
video {
display: block;
}
/* Top Nav */
.top-nav li a,
.background-white .top-nav li a {
color: #002633;
font-size: 0.85rem;
padding: 0.7em 1.25em;
}
nav {
border-bottom: 4px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding: 1.7rem 0;
position: relative;
z-index: 2;
}
.top-nav ul ul {
background: #002633 none repeat scroll 0 0;
}
.top-nav li ul li {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.top-nav li ul li:last-child {
border-bottom: 0;
}
.top-nav li ul li a,
.background-white .top-nav li ul li a,
.top-nav .active-item li a {
background: #002633 none repeat scroll 0 0;
color: rgba(255, 255, 255, 0.75);
}
ul.chevron .submenu>a::after,
ul.chevron .sub-submenu>a::after,
ul.chevron .aside-submenu>a::after,
ul.chevron .aside-sub-submenu>a::after {
margin: 0 0 0 0.625rem;
}
.top-nav ul ul a {
color: #eee;
}
.sticky {
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
.fixed {
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 10;
}
nav.fixed,
.fixed nav {
padding: 1rem 0;
}
/* .logo img {
margin: 0 auto;
max-width: 300px;
width: 100%;
} */
/* Aside Nav */
aside {
border-left: 1px solid #ff5317;
padding-left: 1.25rem;
}
.aside-nav ul {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
margin-left: -1.25rem;
}
.aside-nav ul ul {
margin: 0;
}
.aside-nav li a,
.aside-nav li a:link,
.aside-nav li a:visited {
border-bottom: medium none;
font-size: 0.85rem;
padding: 15px;
border-left: 5px solid rgba(0, 0, 0, 0);
}
.aside-nav>ul>li>a:hover,
.aside-nav>ul>li.active-item>a:link,
.aside-nav>ul>li.active-item>a:visited {
border-style: solid;
border-width: 0 0 0 5px;
border-color: #e5e5e5;
background: none;
color: #333;
}
.aside-nav li ul ul {
background: #e9e9e9 none repeat scroll 0 0;
}
aside.aside-left {
border-left: 0;
border-right: 1px solid #e5e5e5;
padding-right: 1.25rem;
}
.aside-left .aside-nav ul {
margin-right: -1.25rem;
}
.aside-left .aside-nav li a {
border-left: 0;
border-right: 5px solid rgba(0, 0, 0, 0);
}
.aside-left .aside-nav>ul>li>a:hover,
.aside-left .aside-nav>ul>li.active-item>a:link,
.aside-left .aside-nav>ul>li.active-item>a:visited {
border-style: solid;
border-width: 0 5px 0 0;
border-color: #e5e5e5;
}
.aside-nav.background-white-hightlight>ul>li>a:hover,
.aside-nav.background-white-hightlight>ul>li.active-item>a:link,
.aside-nav.background-white-hightlight>ul>li.active-item>a:visited,
.primary-color-white .aside-nav.background-primary-hightlight>ul>li>a:hover,
.primary-color-white .aside-nav.background-primary-hightlight>ul>li.active-item>a:link,
.primary-color-white .aside-nav.background-primary-hightlight>ul>li.active-item>a:visited {
border-color: #fff;
}
.aside-nav.background-primary-hightlight>ul>li>a:hover,
.aside-nav.background-primary-hightlight>ul>li.active-item>a:link,
.aside-nav.background-primary-hightlight>ul>li.active-item>a:visited,
.primary-color-primary .aside-nav.background-primary-hightlight>ul>li>a:hover,
.primary-color-primary .aside-nav.background-primary-hightlight>ul>li.active-item>a:link,
.primary-color-primary .aside-nav.background-primary-hightlight>ul>li.active-item>a:visited {
border-color: #ff5317;
}
.aside-nav.background-dark-hightlight>ul>li>a:hover,
.aside-nav.background-dark-hightlight>ul>li.active-item>a:link,
.aside-nav.background-dark-hightlight>ul>li.active-item>a:visited,
.primary-color-dark .aside-nav.background-primary-hightlight>ul>li>a:hover,
.primary-color-dark .aside-nav.background-primary-hightlight>ul>li.active-item>a:link,
.primary-color-dark .aside-nav.background-primary-hightlight>ul>li.active-item>a:visited {
border-color: #002633;
}
/* Font colors */
.background-white,
.background-white p,
a.background-white,
.background-white a,
.background-white a:link,
.background-white a:visited,
.background-white a:hover,
.background-white a:active {
color: #777;
}
.background-dark,
.background-dark p,
a.background-dark,
a.background-dark:visited,
a.background-dark:link,
.background-dark a,
.background-dark a:link,
.background-dark a:visited,
.background-dark a:hover,
.background-dark a:active,
.primary-color-dark .background-primary,
.primary-color-dark .background-primary p,
.primary-color-dark a.background-primary,
.primary-color-dark a.background-primary:visited,
.primary-color-dark a.background-primary:link,
.primary-color-dark a.background-primary:visited,
.primary-color-dark .background-primary a,
.primary-color-dark .background-primary a:link,
.primary-color-dark .background-primary a:visited,
.primary-color-dark .background-primary a:hover,
.primary-color-dark .background-primary a:active {
color: #ffffff;
}
.background-white h1,
.background-white h2,
.background-white h3,
.background-white h4,
.background-white h5,
.background-white h6,
.background-white .h1,
.background-white .h2,
.background-white .h3,
.background-white .h4,
.background-white .h5,
.background-white .h6,
.primary-color-white .background-primary h1,
.primary-color-white .background-primary h2,
.primary-color-white .background-primary h3,
.primary-color-white .background-primary h4,
.primary-color-white .background-primary h5,
.primary-color-white .background-primary h6,
.primary-color-white .background-primary .h1,
.primary-color-white .background-primary .h2,
.primary-color-white .background-primary .h3,
.primary-color-white .background-primary .h4,
.primary-color-white .background-primary .h5,
.primary-color-white .background-primary .h6 {
color: #002633;
}
.image-hover-overlay-content *,
.background-primary,
.background-primary p,
a.background-primary,
a.background-primary:visited,
a.background-primary:link,
.background-primary a,
.background-primary a:link,
.background-primary a:visited,
.background-primary a:hover,
.background-primary a:active,
.primary-color-primary .background-primary,
.primary-color-primary .background-primary p,
.primary-color-primary a.background-primary,
.primary-color-primary a.background-primary:visited,
.primary-color-primary a.background-primary:link,
.primary-color-primary .background-primary a,
.primary-color-primary .background-primary a:link,
.primary-color-primary .background-primary a:visited,
.primary-color-primary .background-primary a:hover,
.primary-color-primary .background-primary a:active {
color: rgba(255, 255, 255, 0.75);
}
.background-dark h1,
.background-dark h2,
.background-dark h3,
.background-dark h4,
.background-dark h5,
.background-dark h6,
.background-dark .h1,
.background-dark .h2,
.background-dark .h3,
.background-dark .h4,
.background-dark .h5,
.background-dark .h6,
.primary-color-dark .background-primary h1,
.primary-color-dark .background-primary h2,
.primary-color-dark .background-primary h3,
.primary-color-dark .background-primary h4,
.primary-color-dark .background-primary h5,
.primary-color-dark .background-primary h6,
.primary-color-dark .background-primary .h1,
.primary-color-dark .background-primary .h2,
.primary-color-dark .background-primary .h3,
.primary-color-dark .background-primary .h4,
.primary-color-dark .background-primary .h5,
.primary-color-dark .background-primary .h6,
.background-primary h1,
.background-primary h2,
.background-primary h3,
.background-primary h4,
.background-primary h5,
.background-primary h6,
.background-primary .h1,
.background-primary .h2,
.background-primary .h3,
.background-primary .h4,
.background-primary .h5,
.background-primary .h6,
.primary-color-primary .background-primary h1,
.primary-color-primary .background-primary h2,
.primary-color-primary .background-primary h3,
.primary-color-primary .background-primary h4,
.primary-color-primary .background-primary h5,
.primary-color-primary .background-primary h6,
.primary-color-primary .background-primary .h1,
.primary-color-primary .background-primary .h2,
.primary-color-primary .background-primary .h3,
.primary-color-primary .background-primary .h4,
.primary-color-primary .background-primary .h5,
.primary-color-primary .background-primary .h6 {
color: #fff;
}
.text-white,
.text-white *,
.primary-color-white .text-primary,
.primary-color-white .text-primary * {
color: #fff !important;
}
.text-yellow,
.text-yellow *,
.primary-color-yellow .text-primary,
.primary-color-yellow .text-primary * {
color: #ff5317 !important;
}
.text-orange,
.text-orange *,
.primary-color-orange .text-primary,
.primary-color-orange .text-primary * {
color: #E4A600 !important;
}
.text-red,
.text-red *,
.primary-color-red .text-primary,
.primary-color-red .text-primary * {
color: #ff5317 !important;
}
.text-pink,
.text-pink *,
.primary-color-pink .text-primary,
.primary-color-pink .text-primary * {
color: #DE1E5E !important;
}
.text-purple,
.text-purple *,
.primary-color-purple .text-primary,
.primary-color-purple .text-primary * {
color: #913fd9 !important;
}
.text-blue,
.text-blue *,
.primary-color-blue .text-primary,
.primary-color-blue .text-primary * {
color: #005881 !important;
}
.text-light-blue,
.text-light-blue *,
.primary-color-light-blue .text-primary,
.primary-color-light-blue .text-primary * {
color: #28a5df !important;
}
.text-aqua,
.text-aqua *,
.primary-color-aqua .text-primary,
.primary-color-aqua .text-primary * {
color: #00B5A6 !important;
}
.text-green,
.text-green *,
.primary-color-green .text-primary,
.primary-color-green .text-primary * {
color: #49BF4C !important;
}
.text-dark,
.text-dark *,
.primary-color-dark .text-primary,
.primary-color-dark .text-primary * {
color: #002633 !important;
}
.text-primary-hover,
.text-white-hover,
.text-yellow-hover,
.text-orange-hover,
.text-red-hover,
.text-pink-hover,
.text-purple,
.text-blue-hover,
.text-light-blue,
.text-aqua-hover,
.text-green-hover,
.text-dark-hover {
transition: color 0.20s linear 0s;
-o-transition: color 0.20s linear 0s;
-ms-transition: color 0.20s linear 0s;
-moz-transition: color 0.20s linear 0s;
-webkit-transition: color 0.20s linear 0s;
}
.text-white-hover:hover,
.primary-color-white .text-primary-hover:hover {
color: #fff !important;
}
.text-yellow-hover:hover,
.primary-color-yellow .text-primary-hover:hover {
color: #ff5317 !important;
}
.text-orange-hover:hover,
.primary-color-orange .text-primary-hover:hover {
color: #E4A600 !important;
}
.text-red-hover:hover,
.primary-color-red .text-primary-hover:hover {
color: #ff5317 !important;
}
.text-pink-hover:hover,
.primary-color-pink .text-primary-hover:hover {
color: #DE1E5E !important;
}
.text-purple-hover:hover,
.primary-color-purple .text-primary-hover:hover {
color: #913fd9 !important;
}
.text-blue-hover:hover,
.primary-color-blue .text-primary-hover:hover {
color: #005881 !important;
}
.text-light-blue-hover:hover,
.primary-color-light-blue .text-primary-hover:hover {
color: #28a5df !important;
}
.text-aqua-hover:hover,
.primary-color-aqua .text-primary-hover:hover {
color: #00B5A6 !important;
}
.text-green-hover:hover,
.primary-color-green .text-primary-hover:hover {
color: #49BF4C !important;
}
.text-dark-hover:hover,
.primary-color-dark .text-primary-hover:hover {
color: #002633 !important;
}
/* Background Colors */
.background-white,
.primary-color-white .background-primary {
background-color: #fff !important;
}
.background-orange,
.primary-color-orange .background-primary {
background-color: #E4A600 !important;
}
.background-primary,
.primary-color-primary .background-primary {
background-color: #ff5317 !important;
}
.background-dark,
.primary-color-dark .background-primary {
background-color: #002633 !important;
}
/* Background Opacity */
.background-white.background-transparent,
.primary-color-white .background-primary.background-transparent {
background-color: rgba(255, 255, 255, 0.85) !important;
}
.background-primary.background-transparent,
.primary-color-primary .background-primary.background-transparent {
background-color: #ff5317 !important;
}
.background-dark.background-transparent,
.primary-color-dark .background-primary.background-transparent {
background-color: rgba(0, 38, 51, 0.85) !important;
}
.background-grey {
background-color: #f5f5f5 !important;
}
.background-sand {
background-color: #f9f2e2 !important;
}
/* Hover Overlay */
.image-hover-overlay {
bottom: 0;
color: rgba(255, 255, 255, 0.75) !important;
left: 0;
opacity: 0;
padding: 1.25rem;
position: absolute;
right: 0;
top: 0;
z-index: 1;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.image-border-radius .image-hover-overlay {
border-radius: 3px;
}
.image-hover-overlay:hover {
opacity: 1;
}
.image-hover-overlay-content {
position: absolute;
left: 0;
right: 0;
top: 60%;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.image-hover-overlay:hover>.image-hover-overlay-content {
top: 50%;
}
/* Image blocks */
.image-with-hover-overlay {
display: block;
position: relative;
}
.image-border-radius img {
border-radius: 3px;
}
.image-hover-zoom {
display: block;
overflow: hidden;
}
.image-hover-zoom img {
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
.image-with-hover-overlay img {
width: 100%;
}
.image-hover-zoom:hover img {
transform: scale(1.1);
}
/* Buttons */
.button,
a.button,
a.button:link,
a.button:visited {
border-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0) rgba(0, 0, 0, 0.3);
border-style: solid;
border-width: 1px;
color: white;
display: inline-block;
padding: 0.625rem 1.25rem;
text-align: center;
transition: all 0.20s linear 0s !important;
-o-transition: all 0.20s linear 0s !important;
-ms-transition: all 0.20s linear 0s !important;
-moz-transition: all 0.20s linear 0s !important;
-webkit-transition: all 0.20s linear 0s !important;
}
.button:hover,
a.button:hover,
a.button:link:hover,
a.button:visited:hover {
box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.25) inset;
}
/* Stroke Buttons */
.button.button-white-stroke,
a.button.button-white-stroke,
a.button.button-white-stroke:link,
a.button.button-white-stroke:visited,
.primary-color-white .button.button-primary-stroke,
.primary-color-white a.button.button-primary-stroke,
.primary-color-white a.button.button-primary-stroke:link,
.primary-color-white a.button.button-primary-stroke:visited {
background: none;
border: 1px solid #fff;
box-shadow: none;
}
.button.button-white-stroke:hover,
a.button.button-white-stroke:hover,
.primary-color-white .button.button-primary-stroke:hover,
.primary-color-white a.button.button-primary-stroke:hover {
background: #fff none repeat scroll 0 0;
color: #002633;
}
.button.button-primary-stroke,
a.button.button-primary-stroke,
a.button.button-primary-stroke:link,
a.button.button-primary-stroke:visited,
.primary-color-primary .button.button-primary-stroke,
.primary-color-primary a.button.button-primary-stroke,
.primary-color-primary a.button.button-primary-stroke:link,
.primary-color-primary a.button.button-primary-stroke:visited {
background: none;
border: 1px solid #C81010;
box-shadow: none;
color: #C81010;
}
.button.button-primary-stroke:hover,
a.button.button-primary-stroke:hover,
.primary-color-primary .button.button-primary-stroke:hover,
.primary-color-primary a.button.button-primary-stroke:hover {
background: #C81010 none repeat scroll 0 0;
color: #fff;
}
.button.button-dark-stroke,
a.button.button-dark-stroke,
a.button.button-dark-stroke:link,
a.button.button-dark-stroke:visited,
.primary-color-dark .button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke:link,
.primary-color-dark a.button.button-primary-stroke:visited {
background: none;
border: 1px solid #002633;
box-shadow: none;
color: #002633;
}
.button.button-dark-stroke:hover,
a.button.button-dark-stroke:hover,
.primary-color-dark .button.button-primary-stroke:hover,
.primary-color-dark a.button.button-primary-stroke:hover {
background: #002633 none repeat scroll 0 0;
color: #fff;
}
/* Containers */
.section {
padding: 6rem 1.25rem;
}
.section-small-padding {
padding: 2.5rem 1.25rem;
}
.section-top-padding {
padding-top: 6rem;
}
.section-top-small-padding {
padding-top: 2.5rem;
}
.float-left {
float: left;
}
.block-bordered {
border: 1px solid rgba(0, 0, 0, 0.1);
}
.padding {
padding: 1.25rem !important;
}
.padding-2x {
padding: 2.5rem !important;
}
.full-width:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.full-width>.line {
padding: 0 1.875rem;
}
.position-fixed {
position: fixed;
top: 0;
width: 100%;
}
.center {
display: block !important;
}
.border-radius {
border-radius: 3px;
}
.content-center-vertical {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.content-bottom {
bottom: 0;
position: absolute;
}
.grayscale {
filter: url('data:image/svg+xml;utf8,#g');
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
.image-grayscale {
filter: url('data:image/svg+xml;utf8,#g');
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
position: relative;
}
*:hover>.image-grayscale {
filter: none;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=0);
}
/* Margins */
.margin-top {
margin-top: 1.25rem !important;
}
.margin-left {
margin-left: 1.25rem !important;
}
.margin-right {
margin-right: 1.25rem !important;
}
.margin-top-bottom {
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important;
}
.margin-left-right {
margin-left: 1.25rem !important;
margin-right: 1.25rem !important;
}
.margin-top-0 {
margin-top: 0 !important;
display: block;
}
.margin-top-10 {
margin-top: 10px !important;
display: block;
}
.margin-top-15 {
margin-top: 15px !important;
display: block;
}
.margin-top-20 {
margin-top: 20px !important;
display: block;
}
.margin-top-30 {
margin-top: 30px !important;
display: block;
}
.margin-top-40 {
margin-top: 40px !important;
display: block;
}
.margin-top-50 {
margin-top: 50px !important;
display: block;
}
.margin-top-60 {
margin-top: 60px !important;
display: block;
}
.margin-top-70 {
margin-top: 70px !important;
display: block;
}
.margin-top-80 {
margin-top: 80px !important;
display: block;
}
.margin-bottom-0 {
margin-bottom: 0 !important;
display: block;
}
.margin-bottom-10 {
margin-bottom: 10px !important;
display: block;
}
.margin-bottom-15 {
margin-bottom: 15px !important;
display: block;
}
.margin-bottom-20 {
margin-bottom: 20px !important;
display: block;
}
.margin-bottom-30 {
margin-bottom: 30px !important;
display: block;
}
.margin-bottom-40 {
margin-bottom: 40px !important;
display: block;
}
.margin-bottom-50 {
margin-bottom: 50px !important;
display: block;
}
.margin-bottom-60 {
margin-bottom: 60px !important;
display: block;
}
.margin-bottom-70 {
margin-bottom: 70px !important;
display: block;
}
.margin-bottom-80 {
margin-bottom: 80px !important;
display: block;
}
.margin-top-bottom-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
.margin-top-bottom-10 {
margin-top: 10px !important;
margin-bottom: 10px !important;
display: block;
}
.margin-top-bottom-15 {
margin-top: 15px !important;
margin-bottom: 15px !important;
display: block;
}
.margin-top-bottom-20 {
margin-top: 20px !important;
margin-bottom: 20px !important;
display: block;
}
.margin-top-bottom-30 {
margin-top: 30px !important;
margin-bottom: 30px !important;
display: block;
}
.margin-top-bottom-40 {
margin-top: 40px !important;
margin-bottom: 40px !important;
display: block;
text-align: left;
}
.margin-top-bottom-50 {
margin-top: 50px !important;
margin-bottom: 50px !important;
display: block;
}
.margin-top-bottom-60 {
margin-top: 60px !important;
margin-bottom: 60px !important;
display: block;
}
.margin-top-bottom-70 {
margin-top: 70px !important;
margin-bottom: 70px !important;
display: block;
}
.margin-top-bottom-80 {
margin-top: 80px !important;
margin-bottom: 80px !important;
display: block;
}
.margin-left-0 {
margin-left: 0 !important;
}
.margin-left-10 {
margin-left: 10px !important;
}
.margin-left-15 {
margin-left: 15px !important;
}
.margin-left-20 {
margin-left: 20px !important;
}
.margin-left-30 {
margin-left: 30px !important;
}
.margin-left-40 {
margin-left: 40px !important;
}
.margin-left-50 {
margin-left: 50px !important;
}
.margin-left-60 {
margin-left: 60px !important;
}
.margin-left-70 {
margin-left: 70px !important;
}
.margin-left-80 {
margin-left: 80px !important;
}
.margin-right-0 {
margin-right: 0 !important;
}
.margin-right-10 {
margin-right: 10px !important;
}
.margin-right-15 {
margin-right: 15px !important;
}
.margin-right-20 {
margin-right: 20px !important;
}
.margin-right-30 {
margin-right: 30px !important;
}
.margin-right-40 {
margin-right: 40px !important;
}
.margin-right-50 {
margin-right: 50px !important;
}
.margin-right-60 {
margin-right: 60px !important;
}
.margin-right-70 {
margin-right: 70px !important;
}
.margin-right-80 {
margin-right: 80px !important;
}
.margin-left-right-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.margin-left-right-10 {
margin-left: 10px !important;
margin-right: 10px !important;
}
.margin-left-right-15 {
margin-left: 15px !important;
margin-right: 15px !important;
}
.margin-left-right-20 {
margin-left: 20px !important;
margin-right: 20px !important;
}
.margin-left-right-30 {
margin-left: 30px !important;
margin-right: 30px !important;
}
.margin-left-right-40 {
margin-left: 40px !important;
margin-right: 40px !important;
}
.margin-left-right-50 {
margin-left: 50px !important;
margin-right: 50px !important;
}
.margin-left-right-60 {
margin-left: 60px !important;
margin-right: 60px !important;
}
.margin-left-right-70 {
margin-left: 70px !important;
margin-right: 70px !important;
}
.margin-left-right-80 {
margin-left: 80px !important;
margin-right: 80px !important;
}
/* More info button */
a.text-more-info {
display: block;
font-size: 0.85rem;
margin-top: 0.625rem;
}
a.text-more-info:after {
content: "\f006";
font-family: mfg;
font-size: 0.8rem;
margin-left: 0.625rem;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
a.text-more-info:hover:after {
margin-left: 0.825rem;
}
/* Top bar */
.top-bar-contact p {
height: 35px;
line-height: 35px;
}
.top-bar-social li {
border-left: 1px solid rgba(0, 0, 0, 0.05);
float: left;
height: 35px;
line-height: 35px;
list-style: outside none none;
text-align: center;
width: 35px;
}
.top-bar-social li:last-child {
border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.top-bar-social i {
color: rgba(170, 170, 170, 0.20);
font-size: 18px;
}
/* Icon blocks */
i.icon-circle {
border-radius: 100px;
display: block;
height: 100px;
line-height: 100px;
margin-bottom: 0.625rem;
text-align: center;
width: 100px;
}
i.icon-circle-small {
border-radius: 60px;
display: block;
font-size: 1.1rem;
height: 60px;
line-height: 60px;
margin-bottom: 0.625rem;
text-align: center;
width: 60px;
}
/* Carousel */
/*.owl-theme .owl-controls {
margin-top: 0;
/* }*/
.owl-carousel .owl-nav div {
filter: Alpha(Opacity=50);
opacity: 0.5;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
.owl-carousel .owl-nav div:hover {
filter: Alpha(Opacity=100);
opacity: 1;
}
.owl-carousel .owl-dots {
text-align: center;
}
.owl-carousel .owl-dot {
display: inline-block;
}
.owl-carousel .owl-dot span {
background: #7697a2 none repeat scroll 0 0;
border-radius: 0;
display: block;
height: 1px;
margin: 0 1px;
width: 30px;
filter: Alpha(Opacity=50);
opacity: 0.5;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
.owl-carousel .owl-dot.active span {
filter: Alpha(Opacity=100);
opacity: 1;
}
.owl-carousel .owl-nav div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #7697a2 !important;
border: 1px solid #7697a2;
border-radius: 0;
font-family: sli;
height: 40px;
line-height: 40px;
margin-top: -20px;
padding: 0;
position: absolute;
text-align: center;
top: 50%;
width: 40px;
}
.carousel-bottom-arrows.owl-carousel .owl-nav div {
bottom: 0;
top: auto;
}
.owl-carousel .owl-nav .owl-prev {
left: 0;
}
.owl-carousel .owl-nav .owl-next {
right: 0;
}
.carousel-wide-arrows.owl-carousel .owl-nav .owl-prev {
left: -60px;
}
.carousel-wide-arrows.owl-carousel .owl-nav .owl-next {
right: -60px;
}
.carousel-nav-white.owl-carousel .owl-dots span {
background: #fff none repeat scroll 0 0;
}
.carousel-nav-white.owl-carousel .owl-nav div {
color: #fff !important;
border: 1px solid #fff;
}
.carousel-main .carousel-content {
bottom: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.owl-dots {
margin-top: 0.625rem;
}
.carousel-main .owl-dots {
bottom: 0;
padding: 1.25rem 0;
position: absolute;
width: 100%;
}
.carousel-blocks {
padding: 0 3rem;
}
.carousel-blocks .owl-item {
padding: 0 0.625rem;
}
.carousel-hide-arrows .owl-nav,
.carousel-hide-pagination .owl-pagination {
display: none;
}
.carousel-3-blocks {
padding: 0 3rem;
}
.carousel-3-blocks .owl-item {
padding: 0 0.625rem;
}
*/
/* Portfolio Tabs */
.tab-nav.line {
display: table;
padding-bottom: 1.25rem;
}
.tab-item {
padding: 0;
}
a.tab-label,
a.tab-label:link,
a.tab-label:visited,
.background-white a.tab-label,
.background-white a.tab-label:link,
.background-white a.tab-label:visited,
.background-white a.tab-label:hover {
background: #002633 none repeat scroll 0 0;
color: rgba(255, 255, 255, 0.75);
}
a.tab-label,
a.tab-label:link,
a.tab-label:visited,
a.tab-label:hover,
.background-white a.tab-label,
.background-white a.tab-label:link,
.background-white a.tab-label:visited,
.background-white a.tab-label:hover {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #002633;
}
.background-white-hightlight a.tab-label.active-btn,
.background-white-hightlight a.tab-label:hover,
.primary-color-white .background-primary-hightlight a.tab-label.active-btn,
.primary-color-white .background-primary-hightlight a.tab-label:hover {
background: #fff none repeat scroll 0 0;
color: #002633;
}
.background-primary-hightlight a.tab-label.active-btn,
.background-primary-hightlight a.tab-label:hover,
.primary-color-primary .background-primary-hightlight a.tab-label.active-btn,
.primary-color-primary .background-primary-hightlight a.tab-label:hover {
background: #C81010 none repeat scroll 0 0;
color: #fff;
}
.background-dark-hightlight a.tab-label.active-btn,
.background-dark-hightlight a.tab-label:hover,
.primary-color-dark .background-primary-hightlight a.tab-label.activÿ btᆔɟ .primary-color-dark .background-primary-hightlight a.tab-label:hover {
background: #002633 none repeat scroll 0 0;
color: #fff;
}
/* Forms */
form.customform input,
form.customform textarea,
form.customform select {
background: rgba(0, 0, 0, 0.03) none repeat scroll 0 0;
border: 1px solid rgba(0, 0, 0, 0.14);
font-size: 12px;
padding: 0.625rem;
width: 100%;
}
form.customform input:hover,
form.customform textarea:hover,
form.customform select:hover,
form.customform input:focus,
form.customform textarea:focus,
form.customform select:focus {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
p.form-error {
background-color: #ff5317;
color: #fff;
display: none;
font-size: 0.8rem;
margin: -10px 0 15px 0;
padding: 7px;
text-align: center;
}
p.form-success {
background-color: #9bdd42;
color: #fff;
display: none;
font-size: 0.85rem;
padding: 10px;
text-align: center;
}
.required {
border-left: 1px solid #dd442c !important;
}
/* -768px version */
@media screen and (max-width:768px) {
.top-nav .right {
float: none;
}
nav {
padding: 10px 0;
height: 60px;
}
.logo img {
max-width: 172px;
max-height: 40px;
margin: 0 auto;
width: auto;
}
.top-nav li a,
.background-white .top-nav li a {
background: #002633 none repeat scroll 0 0;
color: #fff;
font-size: 1.1em;
padding: 1em;
text-align: center;
}
aside {
border: none;
padding: 0;
}
aside.aside-left {
border-right: 0;
padding-right: 0;
}
.owl-nav {
display: none;
}
.carousel-main .owl-item img,
.carousel-main .owl-item video {
max-width: 250%;
width: auto;
}
.margin-m-top {
margin-top: 1.25rem !important;
display: block;
}
.margin-m-bottom {
margin-bottom: 1.25rem !important;
display: block;
}
.margin-m-left {
margin-left: 1.25rem !important;
}
.margin-m-right {
margin-right: 1.25rem !important;
}
.margin-m-top-bottom {
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important;
display: block;
}
.margin-m-left-right {
margin-left: 1.25rem !important;
margin-right: 1.25rem !important;
}
.margin-m-top-0 {
margin-top: 0 !important;
display: block;
}
.margin-m-top-10 {
margin-top: 10px !important;
display: block;
}
.margin-m-top-15 {
margin-top: 15px !important;
display: block;
}
.margin-m-top-20 {
margin-top: 20px !important;
display: block;
}
.margin-m-top-30 {
margin-top: 30px !important;
display: block;
}
.margin-m-top-40 {
margin-top: 40px !important;
display: block;
}
.margin-m-top-50 {
margin-top: 50px !important;
display: block;
}
.margin-m-top-60 {
margin-top: 60px !important;
display: block;
}
.margin-m-top-70 {
margin-top: 70px !important;
display: block;
}
.margin-m-top-80 {
margin-top: 80px !important;
display: block;
}
.margin-m-bottom-0 {
margin-bottom: 0 !important;
display: block;
}
.margin-m-bottom-10 {
margin-bottom: 10px !important;
display: block;
}
.margin-m-bottom-15 {
margin-bottom: 15px !important;
display: block;
}
.margin-m-bottom-20 {
margin-bottom: 20px !important;
display: block;
}
.margin-m-bottom-30 {
margin-bottom: 30px !important;
display: block;
}
.margin-m-bottom-40 {
margin-bottom: 40px !important;
display: block;
}
.margin-m-bottom-50 {
margin-bottom: 50px !important;
display: block;
}
.margin-m-bottom-60 {
margin-bottom: 60px !important;
display: block;
}
.margin-m-bottom-70 {
margin-bottom: 70px !important;
display: block;
}
.margin-m-bottom-80 {
margin-bottom: 80px !important;
display: block;
}
.margin-m-top-bottom-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
.margin-m-top-bottom-10 {
margin-top: 10px !important;
margin-bottom: 10px !important;
display: block;
}
.margin-m-top-bottom-15 {
margin-top: 15px !important;
margin-bottom: 15px !important;
display: block;
}
.margin-m-top-bottom-20 {
margin-top: 20px !important;
margin-bottom: 20px !important;
display: block;
}
.margin-m-top-bottom-30 {
margin-top: 30px !important;
margin-bottom: 30px !important;
display: block;
}
.margin-m-top-bottom-40 {
margin-top: 40px !important;
margin-bottom: 40px !important;
display: block;
}
.margin-m-top-bottom-50 {
margin-top: 50px !important;
margin-bottom: 50px !important;
display: block;
}
.margin-m-top-bottom-60 {
margin-top: 60px !important;
margin-bottom: 60px !important;
display: block;
}
.margin-m-top-bottom-70 {
margin-top: 70px !important;
margin-bottom: 70px !important;
display: block;
}
.margin-m-top-bottom-80 {
margin-top: 80px !important;
margin-bottom: 80px !important;
display: block;
}
.margin-m-left-0 {
margin-left: 0 !important;
}
.margin-m-left-10 {
margin-left: 10px !important;
}
.margin-m-left-15 {
margin-left: 15px !important;
}
.margin-m-left-20 {
margin-left: 20px !important;
}
.margin-m-left-30 {
margin-left: 30px !important;
}
.margin-m-left-40 {
margin-left: 40px !important;
}
.margin-m-left-50 {
margin-left: 50px !important;
}
.margin-m-left-60 {
margin-left: 60px !important;
}
.margin-m-left-70 {
margin-left: 70px !important;
}
.margin-m-left-80 {
margin-left: 80px !important;
}
.margin-m-right-0 {
margin-right: 0 !important;
}
.margin-m-right-10 {
margin-right: 10px !important;
}
.margin-m-right-15 {
margin-right: 15px !important;
}
.margin-m-right-20 {
margin-right: 20px !important;
}
.margin-m-right-30 {
margin-right: 30px !important;
}
.margin-m-right-40 {
margin-right: 40px !important;
}
.margin-m-right-50 {
margin-right: 50px !important;
}
.margin-m-right-60 {
margin-right: 60px !important;
}
.margin-m-right-70 {
margin-right: 70px !important;
}
.margin-m-right-80 {
margin-right: 80px !important;
}
.margin-m-left-right-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.margin-m-left-right-10 {
margin-left: 10px !important;
margin-right: 10px !important;
}
.margin-m-left-right-15 {
margin-left: 15px !important;
margin-right: 15px !important;
}
.margin-m-left-right-20 {
margin-left: 20px !important;
margin-right: 20px !important;
}
.margin-m-left-right-30 {
margin-left: 30px !important;
margin-right: 30px !important;
}
.margin-m-left-right-40 {
margin-left: 40px !important;
margin-right: 40px !important;
}
.margin-m-left-right-50 {
margin-left: 50px !important;
margin-right: 50px !important;
}
.margin-m-left-right-60 {
margin-left: 60px !important;
margin-right: 60px !important;
}
.margin-m-left-right-70 {
margin-left: 70px !important;
margin-right: 70px !important;
}
.margin-m-left-right-80 {
margin-left: 80px !important;
margin-right: 80px !important;
}
.text-m-size-12 {
font-size: 12px !important;
line-height: 1.4;
}
.text-m-size-16 {
font-size: 16px !important;
line-height: 1.4;
}
.text-m-size-20 {
font-size: 20px !important;
line-height: 1.4;
}
.text-m-size-25 {
font-size: 25px !important;
line-height: 1.4;
}
.text-m-size-30 {
font-size: 30px !important;
line-height: 1.4;
}
.text-m-size-40 {
font-size: 40px !important;
line-height: 1.4;
}
.text-m-size-50 {
font-size: 50px !important;
line-height: 1.4;
}
.text-m-size-60 {
font-size: 60px !important;
line-height: 1.4;
}
.text-m-size-70 {
font-size: 70px !important;
line-height: 1.4;
}
.owl-nav {
display: none;
}
}
/* -480px version */
@media screen and (max-width:480px) {
.top-bar .right .text-white{
color: #000 !important;
}
.top-bar .right {
background-color: rgb(255, 255, 255);
padding-left: 10%;
color: #000 !important;
}
.top-bar .right {
float: none;
}
.top-bar-contact p {
height: auto;
line-height: 1.3rem;
padding: 10px 0;
text-align: center;
}
.top-bar-social.right {
display: table;
float: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
.margin-s-top {
margin-top: 1.25rem !important;
display: block;
}
.margin-s-bottom {
margin-bottom: 1.25rem !important;
display: block;
}
.margin-s-left {
margin-left: 1.25rem !important;
}
.margin-s-right {
margin-right: 1.25rem !important;
}
.margin-s-top-bottom {
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important;
display: block;
}
.margin-s-left-right {
margin-left: 1.25rem !important;
margin-right: 1.25rem !important;
}
.margin-s-top-0 {
margin-top: 0 !important;
display: block;
}
.margin-s-top-10 {
margin-top: 10px !important;
display: block;
}
.margin-s-top-15 {
margin-top: 15px !important;
display: block;
}
.margin-s-top-20 {
margin-top: 20px !important;
display: block;
}
.margin-s-top-30 {
margin-top: 30px !important;
display: block;
}
.margin-s-top-40 {
margin-top: 40px !important;
display: block;
}
.margin-s-top-50 {
margin-top: 50px !important;
display: block;
}
.margin-s-top-60 {
margin-top: 60px !important;
display: block;
}
.margin-s-top-70 {
margin-top: 70px !important;
display: block;
}
.margin-s-top-80 {
margin-top: 80px !important;
display: block;
}
.margin-s-bottom-0 {
margin-bottom: 0 !important;
display: block;
}
.margin-s-bottom-10 {
margin-bottom: 10px !important;
display: block;
}
.margin-s-bottom-15 {
margin-bottom: 15px !important;
display: block;
}
.margin-s-bottom-20 {
margin-bottom: 20px !important;
display: block;
}
.margin-s-bottom-30 {
margin-bottom: 30px !important;
display: block;
}
.margin-s-bottom-40 {
margin-bottom: 40px !important;
display: block;
}
.margin-s-bottom-50 {
margin-bottom: 50px !important;
display: block;
}
.margin-s-bottom-60 {
margin-bottom: 60px !important;
display: block;
}
.margin-s-bottom-70 {
margin-bottom: 70px !important;
display: block;
}
.margin-s-bottom-80 {
margin-bottom: 80px !important;
display: block;
}
.margin-s-top-bottom-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
.margin-s-top-bottom-10 {
margin-top: 10px !important;
margin-bottom: 10px !important;
display: block;
}
.margin-s-top-bottom-15 {
margin-top: 15px !important;
margin-bottom: 15px !important;
display: block;
}
.margin-s-top-bottom-20 {
margin-top: 20px !important;
margin-bottom: 20px !important;
display: block;
}
.margin-s-top-bottom-30 {
margin-top: 30px !important;
margin-bottom: 30px !important;
display: block;
}
.margin-s-top-bottom-40 {
margin-top: 40px !important;
margin-bottom: 40px !important;
display: block;
}
.margin-s-top-bottom-50 {
margin-top: 50px !important;
margin-bottom: 50px !important;
display: block;
}
.margin-s-top-bottom-60 {
margin-top: 60px !important;
margin-bottom: 60px !important;
display: block;
}
.margin-s-top-bottom-70 {
margin-top: 70px !important;
margin-bottom: 70px !important;
display: block;
}
.margin-s-top-bottom-80 {
margin-top: 80px !important;
margin-bottom: 80px !important;
display: block;
}
.margin-s-left-0 {
margin-left: 0 !important;
}
.margin-s-left-10 {
margin-left: 10px !important;
}
.margin-s-left-15 {
margin-left: 15px !important;
}
.margin-s-left-20 {
margin-left: 20px !important;
}
.margin-s-left-30 {
margin-left: 30px !important;
}
.margin-s-left-40 {
margin-left: 40px !important;
}
.margin-s-left-50 {
margin-left: 50px !important;
}
.margin-s-left-60 {
margin-left: 60px !important;
}
.margin-s-left-70 {
margin-left: 70px !important;
}
.margin-s--80 {
margin-left: 80px !important;
}
.margin-s-right-0 {
margin-right: 0 !important;
}
.margin-s-right-10 {
margin-right: 10px !important;
}
.margin-s-right-15 {
margin-right: 15px !important;
}
.margin-s-right-20 {
margin-right: 20px !important;
}
.margin-s-right-30 {
margin-right: 30px !important;
}
.margin-s-right-40 {
margin-right: 40px !important;
}
.margin-s-right-50 {
margin-right: 50px !important;
}
.margin-s-right-60 {
margin-right: 60px !important;
}
.margin-s-right-70 {
margin-right: 70px !important;
}
.margin-s-right-80 {
margin-right: 80px !important;
}
.margin-s-left-right-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.margin-s-left-right-10 {
margin-left: 10px !important;
margin-right: 10px !important;
}
.margin-s-left-right-15 {
margin-left: 15px !important;
margin-right: 15px !important;
}
.margin-s-left-right-20 {
margin-left: 20px !important;
margin-right: 20px !important;
}
.margin-s-left-right-30 {
margin-left: 30px !important;
margin-right: 30px !important;
}
.margin-s-left-right-40 {
margin-left: 40px !important;
margin-right: 40px !important;
}
.margin-s-left-right-50 {
margin-left: 50px !important;
margin-right: 50px !important;
}
.margin-s-left-right-60 {
margin-left: 60px !important;
margin-right: 60px !important;
}
.margin-s-left-right-70 {
margin-left: 70px !important;
margin-right: 70px !important;
}
.margin-s-left-right-80 {
margin-left: 80px !important;
margin-right: 80px !important;
}
.text-s-size-12 {
font-size: 12px !important;
line-height: 1.4;
}
.text-s-size-16 {
font-size: 16px !important;
line-height: 1.4;
}
.text-s-size-20 {
font-size: 20px !important;
line-height: 1.4;
}
.text-s-size-25 {
font-size: 25px !important;
line-height: 1.4;
}
.text-s-size-30 {
font-size: 30px !important;
line-height: 1.4;
}
.text-s-size-40 {
font-size: 40px !important;
line-height: 1.4;
}
.text-s-size-50 {
font-size: 50px !important;
line-height: 1.4;
}
.text-s-size-60 {
font-size: 60px !important;
line-height: 1.4;
}
.text-s-size-70 {
font-size: 70px !important;
line-height: 1.4;
}
}
/* Typography */
.text-uppercase {
/* text-transform: uppercase; */
line-height: 1;
}
.text-line-height-1 {
line-height: 1;
}
/* Containers */
.text-padding {
display: inline-block !important;
padding: 15px 20px;
}
.text-padding-small {
display: inline-block !important;
padding: 7px 10px;
}
/* Custom Template Styles */
/* Containers */
.section-same-height {
display: table;
clear: both;
width: 100%;
}
.block-same-height {
display: table-cell;
height: 100%;
float: none !important
}
.section {
padding: 7rem 1.25rem;
}
.section-top-padding {
padding: 7rem 1.25rem 0 1.25rem;
}
.section-top-bottom-padding {
padding: 7rem 0;
}
.section-head {
/*padding: 14rem 1.25rem 7rem;*/
padding: 9rem 0rem 0rem 0rem;
}
.section-head-post {
padding: 75px 0px;
}
.section-block {
padding: 9rem 2.5rem;
}
.section-block-2x {
padding: 9rem 5rem;
}
.text-padding {
display: inline-block !important;
padding: 15px 20px;
}
.text-padding-small {
display: inline-block !important;
padding: 7px 10px;
}
.contact-image {
background-size: cover;
background-repeat: no-repeat;
display: block;
height: 600px;
width: 100%;
}
/* Timeline */
.timeline-content::before {
display: none;
}
#map {
width: 100%;
height: 600px;
}
.margin-left-150 {
margin-left: 150px;
}
.margin-top-130 {
margin-top: 130px !important;
}
/* Fade Out Overlay */
@keyframes fadeInOut {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
/* body {
padding: 20px;
overflow-x: hidden;
}
p {
margin-bottom: 20px;
}
body,
p {
color: #ffffff;
font-weight: 400;
font-family: "Open Sans", Arial, sans-serif;
font-size: 1rem;
} */
.background-white,
.background-white p,
a.background-white,
.background-white a,
.background-white a:link,
.background-white a:visited,
.background-white a:hover,
.background-white a:active {
color: #999;
}
h1,
.h1 {
font-size: 2.1rem;
}
h2,
.h2 {
font-size: 1.8rem;
}
h3,
.h3 {
font-size: 1.5rem;
}
h4,
.h4 {
font-size: 1.3rem;
}
h5,
.h5 {
font-size: 1rem;
}
h6,
.h6 {
font-size: 0.9rem;
}
h1,
.h1 {
font-weight: 200;
font-family: 'poppins' sans-serif;
font-size: 50px;
line-height: 1.2 !important;
}
h2,
h3,
h4,
h5,
h6,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-weight: 300;
font-family: 'poppins' sans-serif;
line-height: 1.2 !important;
}
h1.headline,
.h1.headline {
letter-spacing: 19px;
text-transform: uppercase;
}
h2.headline,
h3.headline,
h4.headline,
h5.headline,
h6.headline,
.h2.headline,
.h3.headline,
.h4.headline,
.h5.headline,
.h6.headline {
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1.2;
text-align: left;
}
.background-grey h1,
.background-grey h2,
.background-grey h3,
.background-grey h4,
.background-grey h5,
.background-grey h6,
.background-grey .h1,
.background-grey .h2,
.background-grey .h3,
.background-grey .h4,
.background-grey .h5,
.background-grey .h6 {
color: #454545;
}
.text-handwrite {
font-family: "Mrs Saint Delafield" !important;
}
.text-extra-thin {
font-weight: 200;
}
.text-thin {
font-weight: 300;
}
b,
strong,
.text-strong {
font-weight: 600;
}
.text-extra-strong {
font-weight: 700;
text-align: left;
}
a.text-tag:link {
font-size: 0.85rem;
}
.text-drop-cap {
font-size: 75px;
line-height: 55px;
padding-right: 10px;
padding-top: 10px;
font-weight: 700;
color: #454545;
}
blockquote:before {
display: none;
}
blockquote {
border-left: 1px dashed #454545;
padding: 30px;
margin: 40px 0;
color: #454545;
}
blockquote cite {
margin-top: 10px;
color: #999;
}
hr.break {
border-top: 1px dotted #454545;
background: none !important;
background-color: none !important;
}
/* Breaks */
hr.break-small.break-center {
margin: 25px auto;
}
hr.break-small {
background: none !important;
background-color: none !important;
border-top: 2px dashed #454545;
width: 120px;
}
hr.break {
background: none !important;
background-color: none !important;
border-top: 1px dashed #454545;
}
hr.break.background-white,
.primary-color-white hr.break-small.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #fff;
}
hr.break.background-yellow,
.primary-color-yellow hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #ff5317;
}
hr.break.background-orange,
.primary-color-orange hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #E4A600;
}
hr.break.background-red,
.primary-color-red hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #ff5317;
}
hr.break.background-pink,
.primary-color-pink hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #DE1E5E;
}
hr.break.background-purple,
.primary-color-purple hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #913fd9;
}
hr.break.background-blue,
.primary-color-blue hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #005881;
}
hr.break.background-light-blue,
.primary-color-light-blue hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #28a5df;
}
hr.break.background-aqua,
.primary-color-aqua hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #00B5A6;
}
hr.break.background-green,
.primary-color-green hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #49BF4C;
}
hr.break.background-dark,
.primary-color-dark hr.break.background-primary {
background: none !important;
background-color: none !important;
border-top: 1px dashed #454545;
}
header.position-absolute {
position: absolute;
top: 0;
width: 100%;
z-index: 10;
right: 0;
left: 0;
}
.top-bar {
padding: 25px 40px 5px 40px;
}
.top-bar a {
font-size: 0.9rem;
}
.sep {
padding: 0 15px;
}
.top-bar-social li {
border-left: 0 solid;
}
nav {
border-bottom: 0;
padding: 0 20px 20px 20px;
position: relative;
z-index: 2;
border-top: 1px dotted rgba(255, 255, 255, 0.3);
}
.logo-dark {
display: none;
}
nav.fixed,
.fixed nav {
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
padding: 0 2em;
}
nav.fixed .top-nav li a,
.fixed nav .top-nav li a {
color: #444;
}
nav.fixed .logo-white,
.fixed nav .logo-white {
display: none;
}
nav.fixed .logo-dark,
.fixed nav .logo-dark {
display: block;
width: 150px;
margin: 17px 0 0 0;
}
nav.fixed .left-menu,
nav.fixed .right-menu {
padding: 0;
}
.background-transparent {
background: none;
}
.custom-button {
margin-top: 100px;
margin-bottom: -20px;
position: relative;
z-index: 1;
}
/* Custom Dark Color */
a.text-tag:link:hover {
background: #000 none repeat scroll 0 0;
border: 1px solid #000 !important;
}
.background-white-hightlight .top-nav .active-item>a,
.background-white-hightlight .top-nav li a:hover,
.background-white-hightlight .aside-nav li a:hover,
.background-white-hightlight .aside-nav>ul>li.active-item>a:link,
.background-white-hightlight .aside-nav>ul>li.active-item>a:visited,
.primary-color-white .background-primary-hightlight .top-nav .active-item>a,
.primary-color-white .background-primary-hightlight .top-nav li a:hover,
.primary-color-white .background-primary-hightlight .aside-nav li a:hover,
.primary-color-white .background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.primary-color-white .background-primary-hightlight .aside-nav>ul>li.active-item>a:visited {
color: #000 !important;
;
}
.background-yellow-hightlight .top-nav .active-item>a,
.background-yellow-hightlight .top-nav li a:hover,
.background-yellow-hightlight .aside-nav li a:hover,
.background-yellow-hightlight .aside-nav>ul>li.active-item>a:link,
.background-yellow-hightlight .aside-nav>ul>li.active-item>a:visited,
.primary-color-yellow .background-primary-hightlight .top-nav .active-item>a,
.primary-color-yellow .background-primary-hightlight .top-nav li a:hover,
.primary-color-yellow .background-primary-hightlight .aside-nav li a:hover,
.primary-color-yellow .background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.primary-color-yellow .background-primary-hightlight .aside-nav>ul>li.active-item>a:visited {
color: #000 !important;
;
}
.background-dark-hightlight .top-nav .active-item>a,
.background-dark-hightlight .top-nav li a:hover,
.background-dark-hightlight .aside-nav li a:hover,
.background-dark-hightlight .aside-nav>ul>li.active-item>a:link,
.background-dark-hightlight .aside-nav>ul>li.active-item>a:visited,
.primary-color-dark .background-primary-hightlight .top-nav .active-item>a,
.primary-color-dark .background-primary-hightlight .top-nav li a:hover,
.primary-color-dark .background-primary-hightlight .aside-nav li a:hover,
.primary-color-dark .background-primary-hightlight .aside-nav>ul>li.active-item>a:link,
.primary-color-dark .background-primary-hightlight .aside-nav>ul>li.active-item>a:visited {
background: #000 none repeat scroll 0 0 !important;
}
.aside-nav.background-dark-hightlight>ul>li>a:hover,
.aside-nav.background-dark-hightlight>ul>li.active-item>a:link,
.aside-nav.background-dark-hightlight>ul>li.active-item>a:visited,
.primary-color-dark .aside-nav.background-primary-hightlight>ul>li>a:hover,
.primary-color-dark .aside-nav.background-primary-hightlight>ul>li.active-item>a:link,
.primary-color-dark .aside-nav.background-primary-hightlight>ul>li.active-item>a:visited {
border-color: #000 !important;
;
}
.background-white h1,
.background-white h2,
.background-white h3,
.background-white h4,
.background-white h5,
.background-white h6,
.background-white .h1,
.background-white .h2,
.background-white .h3,
.background-white .h4,
.background-white .h5,
.background-white .h6,
.primary-color-white .background-primary h1,
.primary-color-white .background-primary h2,
.primary-color-white .background-primary h3,
.primary-color-white .background-primary h4,
.primary-color-white .background-primary h5,
.primary-color-white .background-primary h6,
.primary-color-white .background-primary .h1,
.primary-color-white .background-primary .h2,
.primary-color-white .background-primary .h3,
.primary-color-white .background-primary .h4,
.primary-color-white .background-primary .h5,
.primary-color-white .background-primary .h6,
.background-yellow h1,
.background-yellow h2,
.background-yellow h3,
.background-yellow h4,
.background-yellow h5,
.background-yellow h6,
.background-yellow .h1,
.background-yellow .h2,
.background-yellow .h3,
.background-yellow .h4,
.background-yellow .h5,
.background-yellow .h6,
.primary-color-yellow .background-primary h1,
.primary-color-yellow .background-primary h2,
.primary-color-yellow .background-primary h3,
.primary-color-yellow .background-primary h4,
.primary-color-yellow .background-primary h5,
.primary-color-yellow .background-primary h6,
.primary-color-yellow .background-primary .h1,
.primary-color-yellow .background-primary .h2,
.primary-color-yellow .background-primary .h3,
.primary-color-yellow .background-primary .h4,
.primary-color-yellow .background-primary .h5,
.primary-color-yellow .background-primary .h6,
.background-yellow,
.background-yellow p,
a.background-yellow,
a.background-yellow:visited,
a.background-yellow:link,
.background-yellow a,
.background-yellow a:link,
.background-yellow a:visited,
.background-yellow a:hover,
.background-yellow a:active,
.primary-color-yellow .background-primary,
.primary-color-yellow .background-primary p,
.primary-color-yellow a.background-primary,
.primary-color-yellow a.background-primary:visited,
.primary-color-yellow a.background-primary:link,
.primary-color-yellow .background-primary a,
.primary-color-yellow .background-primary a:link,
.primary-color-yellow .background-primary a:visited,
.primary-color-yellow .background-primary a:hover,
.primary-color-yellow .background-primary a:active {
color: #353030;
}
.text-dark,
.text-dark *,
.primary-color-dark .text-primary,
.primary-color-dark .text-primary * {
color: #000 !important;
}
.text-dark-hover:hover,
.primary-color-dark .text-primary-hover:hover {
color: #000 !important;
}
.background-dark,
.primary-color-dark .background-primary {
background-color: #000 !important;
color: #fff;
}
.background-dark h1,
.background-dark h2,
.background-dark h3,
.background-dark h4,
.background-dark h5,
.background-dark h6,
.background-dark .h1,
.background-dark .h2,
.background-dark .h3,
.background-dark .h4,
.background-dark .h5,
.background-dark .h6,
.primary-color-dark .background-primary h1,
.primary-color-dark .background-primary h2,
.primary-color-dark .background-primary h3,
.primary-color-dark .background-primary h4,
.primary-color-dark .background-primary h5,
.primary-color-dark .background-primary h6,
.primary-color-dark .background-primary .h1,
.primary-color-dark .background-primary .h2,
.primary-color-dark .background-primary .h3,
.primary-color-dark .background-primary .h4,
.primary-color-dark .background-primary .h5,
.primary-color-dark .background-primary .h6 {
color: #fff;
}
.button.button-white-stroke:hover,
a.button.button-white-stroke:hover,
.primary-color-white .button.button-primary-stroke:hover,
.primary-color-white a.button.button-primary-stroke:hover {
color: #000 !important;
;
}
.button.button-yellow-stroke:hover,
a.button.button-yellow-stroke:hover,
.primary-color-yellow .button.button-primary-stroke:hover,
.primary-color-yellow a.button.button-primary-stroke:hover {
color: #000 !important;
;
}
.button.button-dark-stroke,
a.button.button-dark-stroke,
a.button.button-dark-stroke:link,
a.button.button-dark-stroke:visited,
.primary-color-dark .button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke:link,
.primary-color-dark a.button.button-primary-stroke:visited {
border: 1px solid #000 !important;
;
color: #000 !important;
;
}
.button.button-dark-stroke,
a.button.button-dark-stroke,
a.button.button-dark-stroke:link,
a.button.button-dark-stroke:visited,
.primary-color-dark .button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke:link,
.primary-color-dark a.button.button-primary-stroke:visited {
border: 1px solid #000 !important;
;
color: #000 !important;
}
.button.button-dark-stroke:hover,
a.button.button-dark-stroke:hover,
.primary-color-dark .button.button-primary-stroke:hover,
.primary-color-dark a.button.button-primary-stroke:hover {
background: #000 none repeat scroll 0 0;
}
a.tab-label,
a.tab-label:link,
a.tab-label:visited,
.background-white a.tab-label,
.background-white a.tab-label:link,
.background-white a.tab-label:visited {
color: #ffffff;
}
a.tab-label,
a.tab-label:link,
a.tab-label:visited,
.background-white a.tab-label,
.background-white a.tab-label:link,
.background-white a.tab-label:visited,
.background-white a.tab-label:hover {
background: #fff none repeat scroll 0 0;
}
a.tab-label.active-btn,
a.tab-label:hover,
.background-white-hightlight a.tab-label.active-btn,
.background-white-hightlight a.tab-label:hover,
.primary-color-white .background-primary-hightlight a.tab-label.active-btn,
.primary-color-white .background-primary-hightlight a.tab-label:hover {
color: #000;
}
.background-yellow-hightlight a.tab-label.active-btn,
.background-yellow-hightlight a.tab-label:hover,
.primary-color-yellow .background-primary-hightlight a.tab-label.active-btn,
.primary-color-yellow .background-primary-hightlight a.tab-label:hover {
color: #000 !important;
;
}
.background-dark-hightlight a.tab-label.active-btn,
.background-dark-hightlight a.tab-label:hover,
.primary-color-dark .background-primary-hightlight a.tab-label.active-btn,
.primary-color-dark .background-primary-hightlight a.tab-label:hover {
background: #000 none repeat scroll 0 0;
}
.background-dark,
.background-dark p,
a.background-dark,
a.background-dark:visited,
a.background-dark:link,
.background-dark a,
.background-dark a:link,
.background-dark a:visited,
.background-dark a:hover,
.background-dark a:active,
.primary-color-dark .background-primary,
.primary-color-dark .background-primary p,
.primary-color-dark a.background-primary,
.primary-color-dark a.background-primary:visited,
.primary-color-dark a.background-primary:link,
.primary-color-dark a.background-primary:visited,
.primary-color-dark .background-primary a,
.primary-color-dark .background-primary a:link,
.primary-color-dark .background-primary a:visited,
.primary-color-dark .background-primary a:hover,
.primary-color-dark .background-primary a:active {
color: #ffffff;
}
.background-dark.background-transparent,
.primary-color-dark .background-primary.background-transparent {
background-color: rgba(34, 26, 26, 0.85) !important;
}
.border-dark {
background: #000000 none repeat scroll 0 0;
}
.logo img {
/* margin: 20px 0 0 20px; */
width: 150px;
position: relative;
}
.top-nav li a {
color: #fff;
font-weight: 400;
padding: 1.5rem 1.3rem;
position: relative;
text-transform: uppercase;
font-size: 0.95rem;
letter-spacing: 2px;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s; text-align: left;
}
.top-nav ul ul {
background: #fff none repeat scroll 0 0;
}
.top-nav li ul li {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.top-nav li ul li:last-child {
border-bottom: 0;
}
.top-nav li ul li a,
.background-white .top-nav li ul li a,
.top-nav .active-item li a {
background: #fff none repeat scroll 0 0;
color: rgba(0, 0, 0, 0.75);
}
.top-nav .active-item a,
.top-nav li a:hover {
background: none;
border-bottom: 0;
}
.top-nav li li a {
border-bottom: 0 !important;
}
.top-nav li li.active-item a,
.top-nav li li a:hover {
font-weight: 600;
}
.top-nav li a {
position: relative;
}
.top-nav li a::before {
content: '';
display: block;
margin: 0;
height: 2px;
width: 0px;
background: #ff5317 !important;
transition: all 0.2s linear;
margin-top: 0px;
position: relative;
top: 46px;
}
.top-nav li.active-item a::before {
content: '';
display: block;
margin: 0;
height: 2px;
width: 100%;
background: #fff;
margin-top: 0px;
position: relative;
top: 46px;
}
.top-nav li a:hover::before {
width: 100%;
}
.top-nav li li a::before {
display: none !important;
}
/* Custom form */
.customform input,
.customform textarea {
border: 0 !important;
background: rgba(0, 0, 0, 0) !important;
border-bottom: 1px dashed rgb(130, 130, 130) !important;
color: #fff;
font-size: 15px !important;
}
.customform .required {
border-bottom: 1px dashed #dd442c !important;
}
a.captcha-button {
background: rgba(255, 255, 255, 0.2) !important;
}
form.customform a.captcha-button,
form.customform button {
height: auto;
text-transform: uppercase;
font-size: 17px;
}
/* Aside Navigation */
.aside-nav>ul>li>a:hover,
.aside-nav>ul>li.active-item>a:link,
.aside-nav>ul>li.active-item>a:visited {
border-width: 0 0 0 1px;
left: -1px;
padding-left: 20px;
position: relative;
}
section,
header {
position: relative;
}
.frame-block {
padding: 50px;
border: 10px #fff solid;
}
.arrow-object {
position: absolute;
bottom: -1px;
width: 100%;
left: 0;
}
/* Portfolio Tabs */
.tab-nav.line {
padding-bottom: 2rem;
}
.tab-item {
background: none;
}
a.tab-label,
a.tab-label:link,
a.tab-label:visited,
a.tab-label:hover,
.background-white a.tab-label,
.background-white a.tab-label:link,
.background-white a.tab-label:visited,
.background-white a.tab-label:hover {
background: none;
}
/* Carousel Navigation*/
.owl-dots {
margin-top: 1.25rem;
}
.owl-carousel .owl-dot span {
background: #454545;
height: 1px;
margin: 0 2px;
width: 40px;
border-radius: 0;
filter: Alpha(Opacity=30);
opacity: 0.3;
}
.background-dark .owl-carousel .owl-dot span {
background: #fff;
}
.owl-carousel.text-left .owl-dots {
text-align: left;
}
.owl-carousel .owl-nav div {
border: 0 none;
color: #454545 !important;
font-family: sli;
font-size: 20px;
height: auto;
line-height: 0;
width: auto;
}
.nav-white.owl-carousel .owl-nav div {
color: #fff !important;
}
.nav-white.owl-carousel .owl-dot span {
background: #fff !important;
}
.owl-carousel .owl-nav .owl-prev {
left: 10px;
}
.owl-carousel .owl-nav .owl-next {
right: 10px;
}
.carousel-nav-white.owl-carousel .owl-nav div {
border: 0;
}
.carousel-main .owl-item img.arrow-object {
width: 100% !important;
}
.owl-carousel .background-image-zoom-out {
min-height: 850px;
}
.background-image.background-image-object {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
right: 0;
left: 0;
z-index: -1;
}
/* Parallax background */
.background-parallax-container {
position: relative;
overflow: hidden;
}
.background-parallax {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.owl-item .background-image-zoom-out .background-image.background-image-object {
transform: scale(1.2, 1.2);
transition: all 20s linear 0s;
-o-transition: all 20s linear 0s;
-ms-transition: all 20s linear 0s;
-moz-transition: all 20s linear 0s;
-webkit-transition: all 20s linear 0s;
}
.owl-item.active .background-image-zoom-out .background-image.background-image-object {
transform: scale(1, 1);
transition: all 9s linear 0s;
-o-transition: all 9s linear 0s;
-ms-transition: all 9s linear 0s;
-moz-transition: all 9s linear 0s;
-webkit-transition: all 9s linear 0s;
}
.owl-item .background-image-zoom-in .background-image.background-image-object {
transform: scale(1, 1);
transition: all 20s linear 0s;
-o-transition: all 20s linear 0s;
-ms-transition: all 20s linear 0s;
-moz-transition: all 20s linear 0s;
-webkit-transition: all 20s linear 0s;
}
.owl-item.active .background-image-zoom-in .background-image.background-image-object {
transform: scale(1.2, 1.2);
transition: all 9s linear 0s;
-o-transition: all 9s linear 0s;
-ms-transition: all 9s linear 0s;
-moz-transition: all 9s linear 0s;
-webkit-transition: all 9s linear 0s;
}
.nav-bottom.owl-carousel .owl-nav div {
position: relative;
background: #353030;
left: 0;
right: 0;
opacity: 1;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
bottom: 0;
color: #fff !important;
}
.nav-bottom.owl-carousel .owl-nav {
position: absolute;
bottom: 0;
width: 100px;
left: 50%;
margin-left: -50px;
display: block !important;
}
.nav-bottom.nav-white.owl-carousel .owl-nav div {
background: #fff;
color: #353030 !important;
}
.carousel-blocks {
padding: 0;
}
.background-image-zoom-out {
position: relative;
overflow: hidden;
}
.image-text-overlay {
bottom: 0;
left: 0;
padding: 1.25rem;
position: absolute;
right: 0;
top: 0;
z-index: 1;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.image-text-overlay-content {
position: absolute;
left: 0;
right: 0;
top: 70%;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.image-with-text-overlay {
display: block;
position: relative;
}
.tabs-nav-left .tab-nav.line {
display: block;
}
/* Hover Zoom */
.hover-zoom {
display: inline-block;
width: 100%;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
}
.hover-zoom:hover {
transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
-webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
/* Stroke Buttons */
.button.button-white-stroke,
a.button.button-white-stroke,
a.button.button-white-stroke:link,
a.button.button-white-stroke:visited,
.primary-color-white .button.button-primary-stroke,
.primary-color-white a.button.button-primary-stroke,
.primary-color-white a.button.button-primary-stroke:link,
.primary-color-white a.button.button-primary-stroke:visited,
.button.button-red-stroke,
a.button.button-red-stroke,
a.button.button-red-stroke:link,
a.button.button-red-stroke:visited,
.primary-color-red .button.button-primary-stroke,
.primary-color-red a.button.button-primary-stroke,
.primary-color-red a.button.button-primary-stroke:link,
.primary-color-red a.button.button-primary-stroke:visited,
.button.button-dark-stroke,
a.button.button-dark-stroke,
a.button.button-dark-stroke:link,
a.button.button-dark-stroke:visited,
.primary-color-dark .button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke,
.primary-color-dark a.button.button-primary-stroke:link,
.primary-color-dark a.button.button-primary-stroke:visited {
border-width: 2px;
}
.section-shift-top {
margin-top: -100px;
}
/* Accordion */
.accordion-title {
font-size: 1.1rem;
font-weight: 600;
padding: 15px;
margin: 5px 0;
border-radius: 3px;
}
.accordion-title::before {
background: none !important;
color: #fff;
font-size: 12px;
top: -1px;
border: 2px solid #fff;
}
/* Buttons */
.button,
a.button,
a.button:link,
a.button:visited {
border: 0;
font-size: 16px;
}
.circle-button {
width: 35px;
height: 35px;
line-height: 35px;
display: inline-block;
border-radius: 20px;
text-align: center;
font-size: 15px;
position: relative;
float: right;
margin-bottom: -35px;
right: -35px;
margin-top: -43px;
}
/* Image blocks */
.image-hover-zoom img {
transition: all 0.50s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-o-transition: all 0.50s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-ms-transition: all 0.50s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-moz-transition: all 0.50s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-webkit-transition: all 0.50s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
.owl-carousel .owl-item .image-testimonial-small {
margin: 0 auto 20px;
width: auto;
}
video {
width: 100%;
}
.border-image {
border-bottom: 2px solid;
}
/* Hover Overlay */
.image-hover-overlay {
bottom: 15px;
left: 15px;
right: 15px;
top: 15px;
}
.image-border-radius .image-hover-overlay {
border-radius: 0;
}
/* Tabs */
a.tab-label {
background: none;
border: 2px solid rgba(0, 0, 0, 0);
color: #fff !important;
font-size: 1.1rem;
letter-spacing: 2px;
}
a.tab-label.active-btn,
a.tab-label:hover {
background: none;
border: 2px solid #fff;
color: #fff !important;
}
.background-white a.tab-label,
.background-yellow a.tab-label {
background: none;
border: 2px solid rgba(0, 0, 0, 0);
color: #353030 !important;
}
.background-white a.tab-label.active-btn,
.background-white a.tab-label:hover,
.background-yellow a.tab-label.active-btn,
.background-yellow a.tab-label:hover {
background: none;
border: 2px solid #353030;
color: #353030 !important;
}
/* Icons */
i.icon-circle {
border-width: 2px;
border-style: dotted;
font-size: 32px;
margin-bottom: 25px;
}
.curved-text-container{
display: flex;
align-items: center;
justify-content: center;
padding: 100px 20px;
}
.curved-text-container .left-container{
flex:1;
}
.curved-text-container .right-container{
flex:1;
}
.line-full-width:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
overflow: hidden;
visibility: hidden;
}
/* Fade-in animation for heading */
@keyframes fadeInText {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Fade-in and slide animation for each box */
@keyframes fadeInBox {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated-heading {
animation: fadeInText 1.5s ease-out forwards;
}
.animated-box {
opacity: 0;
animation: fadeInBox 1s ease-out forwards;
}
.animated-h3 {
position: relative;
overflow: hidden;
}
.animated-h3 p {
font-size: 1.3rem !important;
}
.animated-h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #ff5317;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease-in-out;
}
.animated-h3:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Delay for sequential animation */
.animated-box:nth-child(1) {
animation-delay: 0.5s;
}
.animated-box:nth-child(2) {
animation-delay: 1s;
}
.animated-box:nth-child(3) {
animation-delay: 1.5s;
}
.animated-box:nth-child(4) {
animation-delay: 2s;
}
/* Background image parallax effect */
.background-parallax {
background-attachment: fixed;
background-size: cover;
background-position: center;
}
/* Styles for the company section */
.company-section {
padding: 20px;
}
/* Main heading */
.company-title {
font-size: 32px;
font-weight: 700;
color: #333;
text-align: center;
margin-bottom: 45px;
}
/* Category buttons (subheadings) */
.category-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.category-btn {
background-color: #ff5717;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 5px;
font-family: 'poppins', sans-serif;
}
.category-btn:hover {
background-color: #000000;
}
/* Image grid container */
.company-section .image-container {
/* display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
justify-items: center; */
padding: 0 20px;
width: 100%;
}
/* Individual image card */
.company-section .image-card {
position: relative;
overflow: hidden;
border-radius: 10px;
background-color: #f0f0f0;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: transform 0.3s ease-in-out;
width: 100%;
}
.company-section .image-card img {
width: 100%;
height: 100%;
object-fit: cover;
/* Ensures images fill the container */
}
.company-section .image-card:hover {
transform: scale(1.05);
}
.company-section .image-name {
position: absolute;
bottom: 10px;
left: 10px;
color: white;
font-weight: bold;
font-size: 16px;
background: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 5px;
}
/* Initially hide categories when not selected */
.company-section .image-card {
display: none;
}
/* Show only the 'All' image card by default */
.company-section .image-card.all {
display: block;
/* Show the 'All' image */
}
.parall {
color: black;
background-color: white;
line-height: 1.8em;
padding: 2% 1% 2% 1%;
font-weight: 300;
font-family: 'poppins' sans-serif;
margin-bottom: 20px;
opacity: 1;
font-size: 16px;
line-height: 1.8em;
text-align: justify !important;
transition: opacity 1s ease, transform 1s ease
}
/* Container for image and overlay */
.image-container {
position: relative;
width: 100%;
}
/* The overlay effect - hidden by default */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.7);
color: white;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.5s ease;
}
/* The text inside the overlay */
.overlay-text {
font-size: 18px;
text-align: center;
color: white;
text-decoration: none;
}
/* Icon for the link */
.overlay-text i {
margin-right: 8px;
}
/* Show the overlay when hovering over the image */
.image-container:hover .overlay {
opacity: 1;
}
.Imagerow {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gridcolumn {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.gridcolumn img {
margin-top: 8px;
vertical-align: middle;
}
main::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
}
.main {
width: 100%;
height: auto;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: #ffffff;
padding: 2% 0%;
}
.profile-card {
position: relative;
font-family: 'poppins', sans-serif;
width: 220px;
height: 225px;
background: #fff;
padding: 20px;
border-radius: 50%;
box-shadow: 0 0 22px #3336;
transition: .6s;
margin: 0 25px;
}
.profile-card:hover {
border-radius: 30px;
height: 450px;
width: 300px;
}
.profile-card .img {
position: relative;
width: 100%;
height: 100%;
transition: .6s;
z-index: 99;
}
.profile-card:hover .img {
transform: translateY(-60px);
}
.img img {
width: 100%;
border-radius: 50%;
box-shadow: 0 0 22px rgba(255, 255, 255, 0.4);
transition: .6s;
}
.profile-card:hover img {
border-radius: 10px;
}
.caption {
text-align: center;
transform: translateY(-200px);
opacity: 0;
transition: .6s;
}
.profile-card:hover .caption {
opacity: 1;
}
.caption h3 {
font-size: 21px;
font-family: 'poppins', sans-serif;
;
}
.caption p {
font-size: 15px;
color: #ff5317;
font-family: 'poppins', sans-serif;
text-align: justify !important;
margin: 2px 0 9px 0;
}
.caption .social-links a {
color: #333;
margin-right: 15px;
font-size: 21px;
transition: .6s;
}
.social-links a:hover {
color: #ff5317;
}
/* For screens smaller than 420px */
.carousel {
height: 700px;
background-color: #000000;
}
.carousel-item {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.carousel-item img {
width: 100%;
height: auto;
max-height: 100%;
object-fit: cover;
/* This ensures images fill the area while maintaining aspect ratio */
}
.carousel-item h3 {
background-color: rgba(255, 255, 255, 0.8);
color: #000000;
font-size: 2em;
font-weight: bold;
margin: -5px 0 0;
padding: 10px 5px;
}
.carousel-control-prev,
.carousel-control-next {
background-color: rgba(255, 255, 255, 0.5);
/* Optional: Add background to controls */
border-radius: 50%;
}
.carousel-indicators li {
background-color: #ffffff;
/* Change indicator color */
}
.carousel-indicators .active {
background-color: #f44336;
/* Active indicator color */
}
.categories {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.filter-btn {
padding: 10px 20px;
margin: 5px;
border: none;
background-color: #ff5317;
color: white;
cursor: pointer;
}
.filter-btn:hover {
background-color: #ff5317;
}
.image-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 20px;
}
.image-box {
position: relative;
overflow: hidden;
border-radius: 8px;
background-color: white;
margin: 1%;
}
.image-box img {
width: 100%;
display: block;
transition: transform 0.3s ease-in-out;
}
.image-box:hover img {
transform: scale(1.1);
}
.image-box p {
padding: 10px;
background-color: #007bff;
color: white;
margin: 0;
}
/* For screens smaller than 900px */
/* For screens smaller than 420px */
/* ------------------------------------------------- Product Gallery ------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
.animated-title {
opacity: 0;
transform: translateY(-20px);
/* Start position */
animation: fadeInUp 1s forwards;
/* Animation on load */
}
.animated-item {
opacity: 0;
/* Hidden initially */
transform: translateY(20px);
/* Start from below */
animation: fadeInUp 1s forwards;
/* Animation on load */
animation-delay: 0.5s;
/* Delay for each item */
}
.animated-item:nth-child(2) {
animation-delay: 0.7s;
}
.animated-item:nth-child(3) {
animation-delay: 0.9s;
}
.animated-item:nth-child(4) {
animation-delay: 1.1s;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
/* Move up from below */
}
100% {
opacity: 1;
transform: translateY(0);
/* End position */
}
}
.animated-title {
opacity: 0;
transform: translateY(-20px);
/* Start position */
animation: fadeInUp 1s forwards;
/* Animation on load */
}
.animated-item {
opacity: 0;
/* Hidden initially */
transform: translateY(20px);
/* Start from below */
animation: fadeInUp 1s forwards;
/* Animation on load */
animation-delay: 0.5s;
/* Delay for each item */
display: grid;
justify-content: center;
border: 2px white solid;
}
.animated-item:nth-child(2) {
animation-delay: 0.7s;
}
.animated-item:nth-child(3) {
animation-delay: 0.9s;
}
.animated-item:nth-child(4) {
animation-delay: 1.1s;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
/* Move up from below */
}
100% {
opacity: 1;
transform: translateY(0);
/* End position */
}
}
/* ----------------------------------------------------------------------------------------------- */
/* Though process card */
/* ----------------------------------------------------------------------------------------------- */
.wrapperTHOUGHT {
width: 100%;
font-family: 'poppins', sans-serif;
/* background: url('https://24mediafilms.com/victoryprecisionsfinal//thoughtp.jpg') no-repeat center center; */
background-color: white;
background-size: cover;
height: 80vh;
z-index: -1;
}
.colsTHOUGHT {
display: flex;
font-family: 'poppins', sans-serif;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
}
.colTHOUGHT {
width: calc(25% - 2rem);
margin: 1rem;
cursor: pointer;
}
.containerTHOUGHT {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.containerTHOUGHT .frontTHOUGHT,
.backTHOUGHT {
background-size: cover;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
border-radius: 10px;
background-position: center;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
min-height: 280px;
height: auto;
border-radius: 10px;
color: #fff;
font-size: 1.5rem;
}
.backTHOUGHT {
background: #0a0a0a;
background: -webkit-linear-gradient(45deg, #000000 0%, #0a0a0a 100%);
background: -o-linear-gradient(45deg, #0a0a0a 0%, #0a0a0a 100%);
background: linear-gradient(45deg, #0a0a0a 0%, #0a0a0a 100%);
}
.frontTHOUGHT:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: .6;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.containerTHOUGHT:hover .front,
.containerTHOUGHT:hover .back {
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.backTHOUGHT {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.innerTHOUGHT {
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.containerTHOUGHT .backTHOUGHT {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.containerTHOUGHT .frontTHOUGHT {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.containerTHOUGHT:hover .backTHOUGHT {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.containerTHOUGHT:hover .frontTHOUGHT {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.frontTHOUGHT .innerTHOUGHT p {
font-size: 2rem;
margin-bottom: 2rem;
position: relative;
}
.frontTHOUGHT .innerTHOUGHT p:after {
content: '';
width: 4rem;
height: 2px;
position: absolute;
background: #ff5317;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}
.frontTHOUGHT .innerTHOUGHT span {
color: rgba(0, 0, 0, 0.7);
font-family: 'sans-serif';
font-weight: 300;
}
.wrapperTHOUGHT {
width: 100%;
font-family: 'poppins', sans-serif;
background-size: auto;
background-size: cover;
height: 45rem;
z-index: -1;
padding: 20px;
font-size: large;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
.background {
position: fixed;
width: 100%;
height: 100%;
background-image: url('https://24mediafilms.com/victoryprecisionsfinal//images/01.jpg');
background-size: cover;
background-position: center;
text-rendering: optimizeLegibility;
}
.background:after {
content: '';
position: fixed;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
border: 1px solid rgba(255, 255, 255, .2);
}
.wrapper {
display: none;
}
/* 1. Intro Keyframe
--------------------------------------- */
#intro {
position: fixed;
top: 48%;
left: 10%;
width: 80%;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.name {
font-size: 35px;
letter-spacing: 12px;
line-height: 1.5;
font-weight: 900;
}
.byline {
font-size: 15px;
letter-spacing: 4px;
text-align: center;
font-weight: 300;
}
.ampersand {
font-family: 'poppins', sans-serif;
;
font-style: italic;
}
/* https://codepen.io/Patak/pen/QpLpOV nav bar */
/* */
.parallax-view {
display: flex;
background-color: transparent;
background-attachment: fixed;
background-size: cover;
font-family: 'poppins', sans-serif;
text-align: center;
margin-top: 1%;
}
.navtop {
position: relative;
width: 100%;
height: 50px;
margin: 0 auto;
background-color: #000;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-image {
background-color: white;
/* Set a white background */
padding: 5px;
/* Add padding if needed */
border-radius: 5px;
/* Optional: Add rounded corners */
}
.nav-image img {
max-height: 60px;
/* Increase height to make the logo larger */
width: auto;
/* Maintain aspect ratio */
}
.nav-links {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 20px;
}
.nav-links li:hover {
background-color: #000000;
border-color: rgb(255, 255, 255);
color: black;
}
.nav-links li {
flex-grow: 1;
padding: 0px 15px;
text-decoration: none;
color: white;
text-transform: uppercase;
text-align: center;
background-color: rgb(0, 0, 0);
border: 2px solid transparent;
border-radius: 5px;
transition: all 0.3s ease;
transition: all 0.3s ease;
font-size: 16px;
position: relative;
}
/* Hover effect to replace text with icon */
.nav-links li:hover::before {
content: attr(data-icon);
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Hide the original text on hover */
.nav-links li:hover {
color: transparent;
}
.navtop a {
line-height: 50px;
font-size: 15px;
text-decoration: none;
color: white;
text-transform: uppercase;
text-align: center;
}
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-toggle .bar {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
transition: 0.4s;
}
.ktp-about-us-section {
padding: 80px 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
color: white;
height: 100%;
/* Full viewport height */
padding: 0;
/* Ensure no padding affects height */
}
.ktp-container {
display: flex;
width: 100%;
background-color: white;
/*background-image: url(https://24mediafilms.com/victoryprecisionsfinal//g1.jpg);*/
/*background-size: cover;*/
/*background-position: center;*/
/*background-repeat: no-repeat;*/
justify-content: center;
flex-direction: column;
padding: 20px 20px;
margin-bottom: 1%;
align-items: stretch;
/* height: 75vh; */
padding: 0;
/* Ensure no padding affects height */
}
.ktp-row {
display: block !important;
width: 100%;
height: 100%;
min-height: 100%;
}
.ktp-info-column {
flex: 1;
padding: 20px;
height: 100%;
}
.ktp-info-column h2 {
font-size: 36px;
margin-bottom: 15px;
color: white;
font-family: 'poppins', sans-serif;
text-decoration: none;
/* Remove default underline */
}
.ktp-info-column h2:hover {
text-decoration: underline;
/* Add underline on hover */
color: #ffffff;
/* Optionally, change color on hover */
}
.ktp-info-column p {
font-size: 16px;
line-height: 1.8em;
color: #555;
margin-bottom: 20px;
color: black;
font-family: 'poppins', sans-serif;
}
.ktp-animated-text {
font-size: 16px;
line-height: 1.8em;
color: white;
font-family: 'poppins', sans-serif;
margin-bottom: 20px;
opacity: 0;
transform: translateX(-50px);
text-align: justify !important;
transition: opacity 1s ease, transform 1s ease;
}
/* Add animation class when the element is in view */
.ktp-animated-text.animate {
opacity: 1;
transform: translateX(0);
}
.ktp-info-column .ktp-email {
color: #ff5317;
font-weight: bold;
}
.ktp-read-more-btn {
display: inline-block;
padding: 10px 30px;
border: 2px solid #ff5317;
color: #333;
/* font-weight: bold; */
text-transform: capitalize;
background: #fff;
text-decoration: none;
transition: background 0.3s;
font-family: 'poppins', sans-serif;
}
.ktp-read-more-btn:hover {
background: #ff5317;
color: #fff;
}
.ktp-image-column {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
/* padding: 20px; */
height: 100%;
}
.ktp-image-wrapper {
position: relative;
width: 100%;
max-width: 85%;
height: 100%;
}
.ktp-animated-image {
width: 100%;
display: block;
border: 2px solid #ffffff;
animation: fadeIn 1.5s ease-in-out;
height: 100%;
}
.ktp-overlay {
position: absolute;
/* bottom: */
}
.list-check-circle.primary {
display: grid;
/* grid-template-columns: repeat(3, 1fr); */
grid-gap: 20px;
/* Space between items */
list-style: none;
padding: 0;
margin: 0;
font-family: 'poppins', sans-serif;
}
.list-check-circle.primary li {
border: 2px solid #fff;
padding: 9px;
text-align: center;
border-radius: 8px;
display: flex;
flex-direction: row;
background-color: transparent;
text-align: left;
max-width: 40%;
}
.list-check-circle.primary li a {
text-decoration: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.list-check-circle.primary li a i {
margin-right: 10px;
}
.list-check-circle.primary li a i {
margin-right: 10px;
font-size: 24px;
/* Increased icon size */
}
/* Hover effect with border animation */
.list-check-circle.primary li:hover {
border: 2px solid #ff5317
/* Orange border on hover */
}
.list-check-circle.primary li a:hover {
color: #000;
}
/* ----------
------------------------------------ Wall of Fame------------------------------------------------------------------------- */
#carousel-wrapper {
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
width: 800px;
overflow: hidden;
/* Prevent images from overflowing the container */
}
#carousel-wrapper .imagecar {
display: inline-block;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
margin: 0 15px;
border-radius: 10px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}
#carousel-wrapper .imagecar:hover {
transform: scale(1.2);
z-index: 10;
}
#carousel-wrapper .imagecar.active {
transform: scale(1.5);
z-index: 10;
}
/* Images for carousel */
#carousel-wrapper .imagecar:nth-child(1) {
background-image: url('https://24mediafilms.com/victoryprecisionsfinal/Partsnew/Flange.png');
}
#carousel-wrapper .imagecar:nth-child(2) {
background-image: url('https://24mediafilms.com/victoryprecisionsfinal/Partsnew/Flange.png');
}
#carousel-wrapper .imagecar:nth-child(3) {
background-image: url('https://24mediafilms.com/victoryprecisionsfinal/Partsnew/Flange.png');
}
/* Styles for the animated "Victory Precisions" */
.highlight-animation {
font-weight: bold;
color: #000;
;
/* Adjust to your preferred color */
/*animation: glow 1.5s ease-in-out infinite alternate;*/
}
/* Glowing animation effect */
@keyframes glow {
0% {
text-shadow: 0 0 5px #ff9900, 0 0 10px #383838, 0 0 15px #bbbbbb, 0 0 20px #ffffff;
}
100% {
text-shadow: 0 0 10px #ff6f00, 0 0 20px #ff6f00, 0 0 30px #ff9800, 0 0 40px #ff9800;
}
}
.containerlegacy {
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
background-image: url(https://24mediafilms.com/victoryprecisionsfinal/famethead.png);
/* background-image: url(https://24mediafilms.com/victoryprecisionsfinal/famethead.png); */
/*background-color: white;*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
min-height: 61vh;
height: 60rem;
}
/*
.containerlegacy .button {
margin-left: 0 3%;
width: 4rem;
cursor: pointer; margin-bottom: 11%;
/* margin-top: 16%;
}*/
.containerlegacy .button--inactive {
opacity: 0.2;
}
.containerlegacy.button img {
width: 60%;
}
.containerlegacy .cards-wrapper {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.containerlegacy .cards__container {
display: flex;
align-items: center;
justify-content: center;
height: 32rem;
overflow: hidden;
position: relative;
z-index: 2;
/* width: 80rem; */
}
.containerlegacy .box {
width: 32rem;
height: 29rem;
box-shadow: 0px 0px 2rem 0px #000;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
flex-direction: column;
overflow: hidden;
border-radius: 5px;
transition: background 0.3s ease;
border: 6px solid #0000009c;
}
.containerlegacy .box img {
width: 100%;
height: 85%;
object-fit: cover;
}
/* .containerlegacy .box img:hover {
filter: drop-shadow(1px 20px 15px #2d2c2b);
} */
.containerlegacy .image-name {
margin-top: 1rem;
font-size: 1.1rem;
text-align: center;
font-weight: bold;
color: #333;
width: 100%;
font-family: 'poppins', sans-serif;
}
.containerlegacy .box:nth-child(2n) {
transform: scale(0.85);
z-index: -1;
}
.box:nth-child(2) {
left: 2%;
}
.box:nth-child(4) {
left: -2%;
}
.box:nth-child(5) {
left: 6%;
}
.box:nth-child(1) {
left: -6%;
}
/*.box:nth-child(4n + 1) {*/
/* transform: scale(0.75);*/
/* z-index: -2;*/
/*}*/
.containerlegacy .card__text-content {
text-align: center;
width: 75%;
}
.card__title {
padding: 1rem;
}
.box--hide {
display: none;
}
.move-out-from-left {
animation: moveOutLeft 1s ease-in-out;
}
.move-out-from-right {
animation: moveOutRight 1s ease-in-out;
}
.move-to-position5-from-left {
animation: moveToP5Left 1s ease-in-out;
}
.move-to-position4-from-left {
animation: moveToP4Left 1s ease-in-out;
}
.move-to-position3-from-left {
animation: moveToP3Left 1s ease-in-out;
}
.move-to-position2-from-left {
animation: moveToP2Left 1s ease-in-out;
}
.move-to-position1-from-left {
animation: moveToP1Left 1s ease-in-out;
}
.move-to-position5-from-right {
animation: moveToP5Right 1s ease-in-out;
}
.move-to-position4-from-right {
animation: moveToP4Right 1s ease-in-out;
}
.move-to-position3-from-right {
animation: moveToP3Right 1s ease-in-out;
}
.move-to-position2-from-right {
animation: moveToP2Right 1s ease-in-out;
}
.move-to-position1-from-right {
animation: moveToP1Right 1s ease-in-out;
}
@keyframes moveOutLeft {
0% {
transform: scale(0.75) translateX(0%);
opacity: 1;
}
50% {
transform: scale(0.5) translateX(-150%);
opacity: 0.5;
}
100% {
transform: scale(0.25) translateX(0%);
opacity: 0;
}
}
@keyframes moveOutRight {
0% {
transform: scale(0.75) translateX(0%);
opacity: 1;
}
50% {
transform: scale(0.5) translateX(150%);
opacity: 0.5;
}
100% {
transform: scale(0.25) translateX(0%);
opacity: 0;
}
}
@keyframes moveToP5Left {
from {
transform: scale(0.75) translateX(100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP4Left {
from {
transform: scale(0.75) translateX(100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP3Left {
from {
transform: scale(0.85) translateX(100%);
}
to {
transform: scale(1) translateX(0);
}
}
@keyframes moveToP2Left {
from {
transform: scale(1) translateX(100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP1Left {
from {
transform: scale(0.85) translateX(100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP1Right {
from {
transform: scale(0.75) translateX(-100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP2Right {
from {
transform: scale(0.75) translateX(-100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP3Right {
from {
transform: scale(0.85) translateX(-100%);
}
to {
transform: scale(1) translateX(0);
}
}
@keyframes moveToP4Right {
from {
transform: scale(1) translateX(-100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP5Right {
from {
transform: scale(0.85) translateX(-100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@media (max-width: 420px) {
.containerlegacy .box img {
width: 100%;
height: 55%;
object-fit: cover;
}
.containerlegacy .box {
width: 36rem;
height: 21rem;
}
}
@media (max-width: 760px) {
.containerlegacy .box img {
width: 100%;
height: 50%;
object-fit: cover;
}
.containerlegacy .box {
width: 32rem;
height: 23rem;
}
}
.effect3d {
animation-name: effect3d
}
@keyframes effect3d {
to {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15)
}
}
/* --------------------------------------------------- join team ------------------------------------ */
/* Section Styles */
/* Section styling */
.ktp-join-our-team-section, .ktp-partner-supplier-section {
position: relative;
padding: 80px 0;
text-align: center;
overflow: hidden;
margin: 1% 0;
}
/* Background styling */
.ktp-join-our-team-section::before, .ktp-partner-supplier-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://24mediafilms.com/victoryprecisionsfinal/joint/empty-hallway-background.jpg);
background-size: cover;
background-position: center;
z-index: -1;
opacity: 0.5;
}
/* Separate styling for the "Join Our Team" heading */
.ktp-card-headings-join-team {
font-size: 32px;
color: #333;
margin-bottom: 40px;
font-family: 'poppins', sans-serif;
text-align: center;
display: inline-block;
padding: 10px;
}
/* Styling for the two sections: "Join Our Team" and others */
.ktp-card-headings {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}
/* Card Container */
.ktp-card-container, .ktp-card-container-join-team {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
/* Card Styles */
.ktp-card {
width: 25%;
padding: 20px;
border: 2px solid #000000;
background-color: #fff;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
position: relative;
opacity: 0;
}
/* Card Icons and Info */
.ktp-card i {
color: #000000;
margin-bottom: 10px;
}
.ktp-card h3 {
font-size: 24px;
color: #ff5317;
margin: 15px 0;
font-family: 'poppins', sans-serif;
}
.ktp-info {
font-size: 14px;
color: #555;
display: none;
transition: opacity 0.3s ease;
}
/* Hover Effect for Cards */
.ktp-card:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.ktp-card:hover .ktp-info {
display: block;
opacity: 1;
font-family: 'poppins', sans-serif;
color: #000;
}
/* Individual Card Animations */
.ktp-card-hr {
animation: hrSlideIn 1s forwards;
}
.ktp-card-marketing {
animation: marketingSlideIn 1s 0.3s forwards;
}
.ktp-card-purchase {
animation: purchaseSlideIn 1s 0.6s forwards;
}
/* Keyframe Animations for Cards */
@keyframes hrSlideIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes marketingSlideIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes purchaseSlideIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Media Queries for Responsiveness */
/* For devices with width 768px or less (tablets and below) */
@media (max-width: 768px) {
/* Join Our Team section */
.ktp-card-container-join-team {
display: block;
margin: 0 auto;
width: 90%;
}
.ktp-card {
width: 100%;
margin-bottom: 20px;
}
.ktp-card-headings-join-team {
font-size: 28px;
margin-bottom: 20px;
}
/* Partner and Supplier Section */
.ktp-card-container {
display: block;
width: 100%;
margin: 0 auto;
}
.ktp-card-headings {
flex-direction: column;
align-items: center;
}
}
/* For devices with width 480px or less (mobile devices) */
@media (max-width: 480px) {
.ktp-card-headings-join-team {
font-size: 24px;
}
.ktp-card {
width: 100%;
padding: 15px;
}
.ktp-card-container {
width: 100%;
}
.ktp-card-headings {
gap: 20px;
}
}
/* .Famegallery {
position: relative;
width: 760px;
height: 305px;
&:hover:not(div[data-pos='0'], img) {
cursor: pointer;
}
&.item {
position: absolute;
width: 175px;
height: 150px;
overflow: hidden;
transition: transform 0.9s, width 0.9s, height 0.9s;
} */
/* ---------------------------------------- Wall of fame ----------------------------------------------------------- */
.famegal {
display: flex;
width: 100%;
padding: 20px;
box-sizing: border-box;
gap: 20px;
background-image: url('https://24mediafilms.com/victoryprecisionsfinal/walloffame.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.famgalhead h2 {
font-family: 'poppins', sans-serif;
font-size: 48px;
color: #ffffff;
text-align: center;
overflow: hidden;
border-right: .15em solid #ffffff;
/* Add a cursor-like effect */
white-space: nowrap;
width: 0;
animation: typing 4s steps(20) 1s forwards, blink-caret 0.75s step-end infinite;
}
@keyframes typing {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes blink-caret {
50% {
border-color: transparent;
}
100% {
border-color: #000;
}
}
.full-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
max-height: 454px;
}
.full-image galeft {
margin: 25% !important;
}
.full-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.thumbnail-gallery {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.thumbnail {
width: 100%;
height: 150px;
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
background-color: #000;
background-color: transparent;
}
.thumbnail img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.thumbnail:hover {
transform: scale(1.05);
}
/* form---------------------------------- */
/*
.content-inner{
padding-top: 120px;
padding-bottom: 90px;
position: relative;
z-index: 1;
display: block;
}
.content-inner .row {
--bs-gutter-x: 30px;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
}
@media (min-width: 1200px) {
.content-inner {
max-width: 1199px;
}
}
@media (min-width: 1200px) {
.content-inner{
max-width: 1170px;
}
}
@media (min-width: 1200px) {
.content-inner {
max-width: 1199px;
}
}
@media (min-width: 992px) {
.content-inner {
max-width: 960px;
}
}
@media (min-width: 768px) {
.content-inner {
max-width: 720px;
}
}
@media (min-width: 576px) {
.content-inner {
max-width: 540px;
}
}
.content-inner {
width: 100%;
padding-right: var(--bs-gutter-x, 15px);
padding-left: var(--bs-gutter-x, 15px);
margin-right: auto;
margin-left: auto;
}
.content-inner{
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-left: var(--bs-gutter-x,15px);
padding-right: 15px;
padding-right: var(--bs-gutter-x,15px);
width: 100%;
}
.content-inner {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-left: var(--bs-gutter-x,15px);
padding-right: 15px;
padding-right: var(--bs-gutter-x,15px);
width: 100%;
}
@media (min-width: 1200px) {
.content-inner {
max-width: 1140px;
}
}
@media (min-width: 992px) {
.content-inner{
max-width: 960px;
}
}
@media (min-width: 768px) {
.content-inner {
max-width: 720px;
}
}
@media (min-width: 576px) {
.content-inner{
max-width: 540px;
}
}
*/
/*
--------------------------------------------------------- header with u turn deisgn ---------------------------------------------------------
--------------------------------------------------------- header with u turn deisgn --------------------------------------------------------- */
/* General styling for the footer */
.footermain {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 4 equal columns by default */
gap: 20px;
padding: 40px;
font-family: 'poppins', sans-serif;
background-color: #333;
/* Dark background color */
color: white;
}
.footermain-item {
padding: 10px;
}
h4,
h5 {
color: #ff5317;
/* Highlight heading color */
}
.footermain a {
color: white;
text-decoration: none;
}
.footermain a:hover {
color: #ff5317;
/* Highlight color on hover */
}
/* Social media icons */
.footermain .social-icons {
display: flex;
justify-content: space-between;
}
.footermain .social-icons a {
margin: 0 10px;
}
/* Mobile & Tablet responsiveness */
@media (max-width: 1024px) {
.footermain {
grid-template-columns: repeat(2, 1fr);
/* 2 equal columns for medium devices */
}
}
@media (max-width: 768px) {
.footermain {
grid-template-columns: 1fr;
/* Single column layout for small devices */
padding: 20px;
color: white;
}
.social-icons {
flex-direction: column;
/* Stack social icons vertically */
align-items: center;
}
.social-icons a {
margin-bottom: 10px;
}
h4,
h5 {
font-size: 1.2em;
/* Reduce font size for smaller screens */
}
.footermain-item {
margin-bottom: 20px;
}
.footermain p {
color: white;
}
}
.main-container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
max-width: 1200px;
margin: 10px auto;
padding: 0 10px;
}
.gallery-item1,
.gallery-item2,
.gallery-item3,
.gallery-item4,
.gallery-item5,
.gallery-item6,
.gallery-item7,
.gallery-item8,
.gallery-item9,
.gallery-item10 {
align-items: center;
display: flex;
justify-content: center;
}
.gallery-item1>img,
.gallery-item2>img,
.gallery-item3>img,
.gallery-item4>img,
.gallery-item5>img,
.gallery-item6>img,
.gallery-item7>img,
.gallery-item8>img,
.gallery-item9>img,
.gallery-item10>img {
height: 100%;
object-fit: cover;
width: 100%;
}
.gallery-item1 {
grid-column: span 2;
}
.gallery-item4 {
grid-row: span 2;
}
.gallery-item5 {
grid-column: span 2;
}
.calltxthvrog {
text-align: center;
color: white;
font-size: 50px;
font-weight: bold;
position: relative;
cursor: pointer;
text-align: center !important;
margin: 2% 0% !important;
font-family: 'poppins', sans-serif;
}
.calltxthvrog::after {
content: "";
display: block;
width: 0;
height: 3px;
background-color: #ff5317;
transition: width 0.3s ease;
position: absolute;
bottom: -5px;
/* Position of the underline */
left: 50%;
/* Center the underline */
transform: translateX(-50%);
}
.calltxthvrog:hover::after {
width: 10%;
/* Only underline the middle 10% */
}
.calltxthvrog .special-instance {
color: black;
font-size: 50px;
font-weight: bold;
position: relative;
cursor: pointer;
text-align: center !important;
margin: 0% !important;
font-family: 'poppins', sans-serif;
background-color: white;
}
/*
.mapofoffice {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
background-color: #fff;
}
.mapofoffice .section-title {
text-align: center;
padding-bottom: 30px;
}
.videoyt {
width: 60%;
height: 65vh;
}
@media (max-height: 500px) {
.videoyt {
width: 90%;
height: 20vh;
}
} */
/* */
.video-button {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s ease;
}
.video-button:hover {
transform: scale(1.05);
}
.thumbnail {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 4px;
margin-right: 15px;
}
.video-title {
font-size: 16px;
color: #333;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.modal-content {
position: relative;
background-color: #fff;
padding: 20px;
border-radius: 8px;
}
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
color: #333;
background: transparent;
border: none;
cursor: pointer;
}
/** Donna Galletta | LIGHTBOX MARKUP **/
/* Default lightbox style */
.lightbox {
/* Default lightbox hidden */
display: none;
/* Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
/* When lightbox is targeted, it becomes visible */
.lightbox:target {
/* Remove default browser outline */
outline: none;
/* Show lightbox */
display: block;
}
/** Modal styling **/
#videoModal {
/* Centering the modal */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* This centers the modal */
width: 870px;
/* Set a fixed width */
max-width: 90%;
/* Make sure it doesn't overflow on small screens */
height: auto;
/* Let the height adjust to the video */
margin: 0;
border-radius: 10px;
/* Optional: rounded corners for the modal */
}
/* Modal header styling */
#videoModal .modal-header {
background: #000;
border: 0;
color: #fff;
height: 35px;
padding: 5px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}
#videoModal .modal-header h3 {
margin: 0;
}
/* Modal body styling */
#videoModal .modal-body {
padding: 0;
height: 489px;
max-height: none;
overflow: hidden;
}
/* Hide modal footer when empty */
#videoModal .modal-footer:empty {
display: none !important;
}
/* Close button styling */
#videoModal .close {
background: #DB00B8;
color: #fff;
font-size: 24px;
margin: 0;
opacity: 1;
position: absolute;
right: 10px;
/* Adjust the position of the close button */
top: 10px;
/* Adjust the position of the close button */
text-shadow: none;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#videoModal .close:hover {
background: #FF00D6;
/* Hover effect for close button */
}
.ytp-cued-thumbnail-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: opacity .25s cubic-bezier(0, 0, .2, 1);
transition: opacity .25s cubic-bezier(0, 0, .2, 1);
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
/*
.card {
height:300px;
width:270px;
border-radius:0.5rem;
overflow:hidden;
position:relative;
cursor:pointer;
transition: all 0.4s;
background-size:cover;
background-image:url('/cert/Cert1.jpg');
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card:hover .card_content, .card:hover .card_bottom_shadow {
bottom:0
}
.card:hover {
transform:scale(1.1)
}
.card_content {
z-index:2;
color:#fff;
font-family:Arial;
padding:0px 20px 25px;
position:absolute;
bottom:-150px;
left:0;
transition: all 0.25s;
}
.card_title {
font-size:20px;
font-weight:600;
}
.card_desc {
font-size:14px;
margin-top:5px;
}
.card_bottom_shadow {
height:150px;
width:100%;
position:absolute;
bottom:-150px;
left:0;
transition: all 0.1s;
background-image: linear-gradient(
180deg,
transparent,
rgba(37, 37, 37, 0.61),
#111
);
} */
/* Container to align the cards in a row */
.card-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 20px;
padding: 20px;
width: 100%;
background-color: white;
height: 100%;
}
.card {
height: 560px;
width: 380px;
border-radius: 0.5rem;
overflow: hidden;
position: relative;
cursor: pointer;
transition: all 0.4s;
background-size: cover;
background-image: url('/cert/Cert1.jpg');
/* Default background */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
background-repeat: no-repeat;
/* Prevents the image from repeating */
background-size: cover;
/* Ensure image covers the container */
background-position: center center;
/* Keeps the image centered */
}
.card:hover .card_content,
.card:hover .card_bottom_shadow {
bottom: 0;
}
.card:hover {
transform: scale(1.1);
}
.card_content {
z-index: 2;
color: #fff;
font-family: Arial;
padding: 0px 20px 25px;
position: absolute;
bottom: -150px;
left: 0;
transition: all 0.25s;
}
.card_title {
font-size: 20px;
font-weight: 600;
}
.card_desc {
font-size: 14px;
margin-top: 5px;
}
.card_bottom_shadow {
height: 150px;
width: 100%;
position: absolute;
bottom: -150px;
left: 0;
transition: all 0.1s;
background-image: linear-gradient(180deg, transparent, rgba(37, 37, 37, 0.61), #111);
}
/* Additional Styles for each card with different backgrounds */
.card:nth-child(1) {
background-image: url('https://24mediafilms.com/victoryprecisionsfinal/cert/Cert1.jpg');
}
.card:nth-child(2) {
background-image: url('https://24mediafilms.com/victoryprecisionsfinal/cert/Cert2.jpg');
}
.card:nth-child(3) {
background-image: url('https://24mediafilms.com/victoryprecisionsfinal/cert/Cert3.jpg');
}
/* */
.Aboutusboth .AboutusWeb {
width: 100%;
height: auto;
}
@media screen and (min-width: 1660px) {
.Aboutusboth {
padding: 3% 0%;
}
}
/* Default image for larger screens */
.Whychooseusboth .WhychooseusWeb {
width: 100%;
height: auto;
}
@media screen and (min-width: 350px) and (max-width: 748px) {
.Whychooseusboth .WhychooseusWeb {
/* content: url('https://24mediafilms.com/victoryprecisionsfinal/WhychooseusMobile.png'); */
content: url('/WhychooseusMobile.png');
}
}
@media screen and (min-width: 1660px) {
.Whychooseusboth {
padding: 3% 0%;
}
}
/* new Css */
/* Card Section */
.card-section-ceo {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 20px;
background-color: white;
}
/* Card Styles */
.card-ceo {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
max-width: 1200px;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
opacity: 0;
/* Initially hidden for animation */
transform: translateY(50px);
/* Initially translated for animation */
transition: opacity 1s ease-out, transform 1s ease-out;
/* Transition for entrance animation */
}
/* Image Styles */
.card-image-ceo {
flex: 1;
max-width: 100%;
overflow: hidden;
border-radius: 10px 0 0 10px;
}
.card-image-ceo img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.3s ease-out;
}
/* Message Styles */
.card-message-ceo {
flex: 1;
padding: 20px;
text-align: left;
}
.card-message-ceo h2 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
transition: color 0.3s ease-out;
/* Transition for hover effect */
}
.card-message-ceo p {
font-size: 1rem;
color: #555;
transition: color 0.3s ease-out;
/* Transition for hover effect */
}
.ktp-card-headings p {
font-size: 2rem !important;
}
/* Media Queries for responsiveness */
@media screen and (max-width: 768px) {
.card-ceo {
flex-direction: column;
}
.card-image-ceo {
max-width: 100%;
margin-bottom: 20px;
}
.card-message-ceo {
text-align: center;
}
}
@media screen and (max-width: 420px) {
.card-ceo {
padding: 10px;
}
.card-message-ceo h2 {
font-size: 1.2rem;
}
.card-message-ceo p {
font-size: 0.9rem;
}
}
/* ----------------------------------- ----------------------------------- About Us Page ----------------------------------- ----------------------------------- ----------------------------------- */
.Aboupghd {
background-color: white;
}
.Aboupghd p {
font-size: 1.01rem;
line-height: 1.6rem;
color: rgb(0, 0, 0);
padding: 0% 2%;
display: block;
text-align: left;
letter-spacing: 1px;
}
.Aboupghd h3 {
font-size: 1rem;
color: white;
margin: 2%;
text-align: center;
}
.about-highlight {
display: flex;
justify-content: center;
padding: 20px;
font-family: Arial, sans-serif;
background-color: white;
}
.highlight-container {
display: flex;
width: 80%;
justify-content: space-between;
}
.highlight-left {
width: 30%;
}
.year-list {
list-style: none;
padding: 0;
}
.year-list li {
padding: 10px;
cursor: pointer;
background-color: #f4f4f4;
margin-bottom: 5px;
border-radius: 5px;
transition: background-color 0.3s;
font-size: 1.01rem;
line-height: 1.6rem;
color: rgb(0, 0, 0);
}
.year-description.show p {
padding: 10px;
cursor: pointer;
background-color: #f4f4f4;
margin-bottom: 5px;
border-radius: 5px;
transition: background-color 0.3s;
font-size: 1.01rem;
line-height: 1.6rem;
color: rgb(0, 0, 0);
}
.year-list li:hover {
background-color: #e0e0e0;
}
.highlight-right {
width: 85%;
padding-left: 20px;
border-left: 2px solid #ccc;
}
.year-description {
display: none;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
transition: opacity 0.5s ease-in-out;
}
.year-description.show {
display: block;
opacity: 1;
}
.year-description h3 {
margin-top: 0;
}
.aboutvalue {
background-image: url(https://24mediafilms.com/victoryprecisionsfinal/valueaboutweb.png);
background-size: cover;
background-position: center;
height: auto;
}
.curved-text-container p {
color: #000000;
font-size: large;
line-height: 1.6rem;
}
.aboutblood {
background-image: url(https://24mediafilms.com/victoryprecisionsfinal/Bloodaboutmob1.png);
background-size: cover;
background-position: center;
height: 109vh;
}
/* Responsive Design */
@media (max-width: 768px) {
}
@media (max-width: 480px) {
.aboutvalue {
background-image: url(https://24mediafilms.com/victoryprecisionsfinal/valueaboutmob.png) !important;
background-size: cover;
background-position: center;
height: auto;
}
.aboutblood {
background-image: url(https://24mediafilms.com/victoryprecisionsfinal/Bloodaboutweb.png) !important;
background-size: cover;
background-position: center;
height:204vh !important;
}
.aboutblood p{
text-align: justify;
padding: 15% 8% !important;
background: transparent;
color: black;
font-size: large;
margin: 0px !important;
}
.aboutstory{
padding: 0% !important;
}
.enqrsyright-side{
width: 100% !important;
}
.enqrsyright-side .image {
/* New image for screens 420px or smaller */
content: url('https://24mediafilms.com/victoryprecisionsfinal/teammob.png') !important;
width: 100% !important;
}
}
.center-div {
display: flex;
/* Use flexbox for alignment */
justify-content: center;
/* Center horizontally */
align-items: center;
/* Center vertically */
height: 80vh;
/* Full height of the viewport */
background-color: #f0f0f0;
/* Background color */
}
/* Image styling */
.center-div img {
max-width: 100%;
/* Prevent image from overflowing */
max-height: 100%;
/* Ensure the image fits within the div */
}
.aboutstory{
flex-wrap: wrap;
justify-content: center;
background-color: white;
padding: 2rem 2.5rem 2rem;
display: block;
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}
.aboutstory p{
letter-spacing: .01em; font-size: 1.1rem;
z-index: 1;
color: var(--black);
letter-spacing: .01em;
margin-bottom: 1.5rem;
font-size: 1rem;
font-weight: 400;
line-height: 250%;
position: relative;
}
.aboutstorymn{
max-width: 100%;
padding: 0rem 2.5rem 2rem;
display: block;
background-color: white;
}
.aboutcvm-container {
padding: 20px;
background-color: white;
}
.aboutcvm-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.aboutcvm-grid-item {
text-align: center;
padding: 20px;
border: 1px solid #000000;
border-radius: 8px;
}
.aboutcvm-grid-item i {
display: block;
margin-bottom: 10px;
color: #ff5317;
}
.aboutcvm-grid-item p{
/*text-align: center !important; */
color: black;
}
@media (max-width: 768px) {
.aboutcvm-grid {
grid-template-columns: 1fr;
}
}
/* ----------------------------------- ----------------------------------- About Us Page Responsive ----------------------------------- ----------------------------------- ----------------------------------- */
/*
.page-header {
position: relative;
display: block;
padding: 100px 0px 110px;
z-index: 1;
}
.page-header__bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-attachment: scroll;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
}
.page-header__bg::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000001;
opacity: 0.7;
content: "";
z-index: -2;
}
.page-header__bg .containerpg {
padding-left: 15px;
padding-right: 15px;
}
.page-header__inner {
position: relative;
display: block;
text-align: center;
}
.page-header__inner h2 {
color: #ffffff;
font-size: 50px;
line-height: 1em;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 19px;
}
.page-header__inner .thm-breadcrumb {
position: relative;
display: block;
}
.page-header__inner .thm-breadcrumb li {
position: relative;
display: inline-block;
color: #ffffff;
font-size: 20px;
line-height: 30px;
font-weight: 700;
text-transform: capitalize;
}
.page-header__inner .thm-breadcrumb li a {
color: #ffffff;
font-size: 20px;
line-height: 30px;
font-weight: 700;
text-transform: capitalize;
transition: all 200ms linear;
transition-delay: 0s;
transition-delay: 0.1s;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
/* ----------------------------------- ----------------------------------- About Us Page ----------------------------------- ----------------------------------- ----------------------------------- */
.castimage-container {
width: 100%;
/* Ensure the container takes full width */
height: 100%;
/* If you want the height to match the container height */
overflow: hidden;
/* Hide any part of the image that overflows */
}
.castimage-container img {
width: 100%;
/* Make the image stretch to fill the container width */
height: 100%;
/* Make the image stretch to fill the container height */
object-fit: cover;
/* Ensures the image covers the container without distorting */
}
.info-section {
padding: 20px;
background-color: white;
animation: fadeInRight 1.5s ease-in-out;
}
.info-section p {
font-size: 1.01rem;
line-height: 1.6rem;
color: rgb(0, 0, 0);
padding: 0% 2%;
display: block;
text-align: left;
}
.info-section h3 {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
/* Section styling */
.about-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
background-color: white;
padding: 2%;
}
.left-image img {
width: 100%;
max-width: 500px;
/* adjust image size */
height: auto;
border-radius: 8px;
transition: transform 0.5s ease;
}
/* Right content */
.right-content {
flex: 1;
animation: fadeInRight 1.5s ease-in-out;
}
.Aboutdsgn h3 {
font-size: 1.5rem;
line-height: 1.6rem;
color: rgb(0, 0, 0);
padding: 0% 2%;
display: block;
text-align: left;
}
.Aboutdsgn p {
font-size: 1.01rem;
line-height: 1.6rem;
color: rgb(0, 0, 0);
padding: 0% 2%;
display: block;
text-align: left;
}
/* Animation for the right content */
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Hover effect for image */
.left-image img:hover {
transform: scale(1.05);
/* Slight zoom effect on hover */
}
.left-image img {
width: 100%;
max-width: 500px;
/* adjust image size */
height: auto;
border-radius: 8px;
transition: transform 0.5s ease;
}
/* Right content (text) styling */
.right-content {
flex: 1;
animation: fadeInLeft 1.5s ease-in-out;
/* Apply fadeInLeft animation */
}
/* Create the fadeInLeft animation */
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
/* Starts from the left */
}
100% {
opacity: 1;
transform: translateX(0);
/* Ends in the original position */
}
}
/* About enquiry container */
.aboutenqry {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
/* background-image:url(/images/001.jpg);
background-size: cover;
background-position: center;
height: 100%;
width: 100%; */
}
/* Left side (Text and button) */
.enqryleft-side {
width: 50%;
}
.aboutenqry .headline {
font-size: 2em;
font-weight: bold;
margin-bottom: 10px;
}
.enqrydescription {
font-size: 1em;
margin-bottom: 20px;
}
.enqryknow-more-btn {
padding: 10px 20px;
font-size: 1em;
background-color: #ff5317;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.enqryknow-more-btn:hover {
background-color: #000;
}
/* Right side (Image) */
.enqryright-side {
width: 45%;
}
.aboutenqry .image {
width: 100%;
height: auto;
border-radius: 10px;
}
.circle-container {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid black;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.circle-text {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: left;
padding: 20px;
transform-origin: center center;
transform: rotate(-90deg);
white-space: nowrap;
font-family: Arial, sans-serif;
font-size: 14px;
}
.circle-text p {
margin: 0;
padding: 0;
transform: rotate(90deg);
}
.castimage-container {
display: flex;
justify-content: space-evenly;
margin: 0% 2%;
}
.castingimage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
/* max-width: 900px; */
width: 100%;
background-color: white;
padding: 2%;
}
.castingcard {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.castingcard img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.castingcard:hover img {
transform: scale(1.05);
}
.castingcard-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.castingcard:hover .castingcard-title {
opacity: 1;
}
.machinery p{
text-align: left;
}
/* ---------------------------------------------------------- Contact Page ---------------------------------------------------------- */
.containercnt {
background-color: white;
padding: 40px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.containercnt .form-section {
flex: 1;
max-width: 45%;
}
.containercnt .form-section h2 {
text-align: left;
margin-bottom: 20px;
}
.containercnt .form-group {
margin-bottom: 15px;
}
.containercnt label {
display: block;
margin-bottom: 5px;
color: black;
}
.containercnt input[type="text"],
input[type="email"],
textarea,
input[type="file"] {
width: 70%;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
}
.containercnt textarea {
height: 150px;
}
.containercnt .submit-btn {
background-color: #ff5317;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.containercnt .submit-btn:hover {
background-color: #000000;
}
/* Container to wrap both image and cards */
.containercntr {
max-width: 1200px;
margin: 0 0;
padding: 20px;
display: flex;
justify-content: space-between;
/* Aligns the image and cards */
gap: 20px;
text-align: center;
flex-direction: column;
}
.containercntr .image-section {
width: 95%;
/* Image width is set to 45% to fit beside the card */
height: auto;
border-radius: 8px;
}
/* Image section styles */
.containercntr .image-section img {
max-width: 45%;
/* Image width is set to 45% to fit beside the card */
height: auto;
border-radius: 8px;
display: inline !important;
}
/* Cards container (Flexbox for two cards side by side) */
.cards-container {
display: flex;
flex-direction: row;
/* Stack the cards vertically */
gap: 20px;
/* Space between the two cards */
max-width: 100%;
/* Ensure the cards container takes up to 50% of the width */
}
/* Contact Card Styles */
.containercntr .contact-card {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: left;
}
.containercntr .contact-card h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.containercntr .contact-card h3 {
font-size: 20px;
color: #555;
margin-bottom: 20px;
}
.containercntr .contact-info {
margin-bottom: 20px;
}
.containercntr .contact-info h4 {
font-size: 18px;
color: #000000;
}
.containercntr .contact-info p {
font-size: 14px;
margin: 5px 0;
}
.containercntr .contact-info a {
color: #0066cc;
text-decoration: none;
}
.containercntr .contact-info a:hover {
text-decoration: underline;
}
/* Social Media Section */
.social-media h4 {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.social-media ul {
list-style: none;
padding: 0;
display: flex;
justify-content: space-evenly;
gap: 10px;
}
.social-media ul li {
margin-bottom: 10px;
}
.social-media ul li a {
font-size: 16px;
color: #333;
text-decoration: none;
}
.social-media ul li a i {
margin-right: 10px;
}
.social-media ul li a:hover {
color: #0066cc;
}
.social-media ul li a i {
font-size: 20px;
}
.containercnt .popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.containercnt .popup-content {
background-color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
width: 300px;
}
.popup-content h3 {
margin-bottom: 20px;
}
.containercnt button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.containercnt button:hover {
background-color: #000000;
}
/* Responsive Styles */
@media (max-width: 760px) {
.containercnt {
flex-direction: column;
align-items: center;
}
.containercnt .form-section {
max-width: 90%;
}
}
@media (max-width: 420px) {
.containercnt input[type="text"],
input[type="email"],
textarea,
input[type="file"] {
width: 95%;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
}
.containercnt .form-section {
max-width: 100%;
}
.containercnt {
padding: 10px;
}
.containercntr {
max-width: 90%;
padding: 0px;
}
.containercntr .image-section img {
max-width: 100%;
border-radius: 8px;
}
.containercntr .cards-container {
display: flex;
flex-direction: column;
gap: 25px;
max-width: 100%;
}
}
/* ---------------------------------------------------------- Contact Page ---------------------------------------------------------- */
/* ---------------------------------------------------------- Career Page ---------------------------------------------------------- */
.career-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.career-contact-section,
.career-form-section {
flex: 1;
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.career-container h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.career-contact-card {
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.career-contact-info .career-contact-item {
margin-bottom: 15px;
}
.career-contact-info a {
color: #0073e6;
text-decoration: none;
}
.career-contact-info a:hover {
text-decoration: underline;
}
.career-form-field {
margin-bottom: 15px;
}
.career-container label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.career-container input,
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.career-container button {
background-color: #ff5317;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.career-container button:hover {
background-color: #000;
}
.career-popup-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px;
border-radius: 8px;
display: none;
}
.career-popup-message button {
background-color: #ff5733;
color: white;
}
.career-popup-message button:hover {
background-color: #c94e29;
}
@media (max-width: 480px) {
.career-container {
display: flex;
justify-content: space-between;
gap: 20px;
flex-direction: column;
}
.career-container h2 {
font-size: 1.3rem;
/* Even smaller title for very small screens */
}
.career-form-field {
font-size: 0.85rem;
/* Smaller font size for mobile */
}
.career-container input,
select,
textarea {
padding: 8px;
/* Adjust padding for mobile devices */
}
.career-container button {
padding: 12px;
/* Adjust button size */
}
}
/* ---------------------------------------------------------- Career Page ---------------------------------------------------------- */
.crrskill {
display: flex; flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 20px; /* Optional: Adjust space between text and image */
flex-wrap: wrap; /* Ensures responsiveness */
}
.crrskill1, .crrskill2 {
flex: 1 1 50%; /* 50% for each, but they can grow/shrink */
box-sizing: border-box;
}
.crrskill2 img {
width: 100%; /* Ensure the image fits its container */
height: auto;
}
@media screen and (max-width: 768px) {
.crrskill {
flex-direction: column; /* Stack the image and text vertically */
}
.crrskill1, .crrskill2 {
flex: 1 1 100%; /* Each takes full width on smaller screens */
}
.parall {
font-size: 14px; /* Adjust font size for smaller screens */
}
}
.crrskill {
padding: 20px; background-color: white;
}
.crrskill .grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Create two equal columns */
gap: 20px; /* Space between grid items */
}
.crrskill .grid-item {
padding: 20px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.crrskill .grid-item b {
font-size: 36px;
}
.crrskill .title {
display: flex;
align-items: center;
gap: 10px; /* Adds space between icon and text */ color: black;
}
.crrskill .title i {
font-size: 36px; /* Icon size */
color: #3498db; /* Change icon color if needed */
}
.crrskill .title b {
font-size: 36px;
}
/* Media Query for screens smaller than 760px (Tablets and Mobile Portrait) */
@media (max-width: 760px) {
.crrskill .grid-container {
grid-template-columns: 1fr; /* Switch to 1 column for smaller screens */
}
.crrskill .title i {
font-size: 28px; /* Slightly smaller icons on mobile */
}
.crrskill .title b {
font-size: 30px; /* Adjust text size for readability */
}
}
/* Media Query for screens smaller than 420px (Mobile Phones) */
@media (max-width: 420px) {
.crrskill .grid-container {
grid-template-columns: 1fr; /* Ensure 1 column layout on smaller screens */
}
.crrskill .title i {
font-size: 24px; /* Even smaller icons for very small screens */
}
.crrskill .title b {
font-size: 24px; /* Adjust text size further for smaller screens */
}
.crrskill .grid-item {
padding: 15px; /* Reduce padding for small screens */
}
}
/* ---------------------------------------------------------- Quote Page ---------------------------------------------------------- */
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 500px;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-container h1 {
text-align: center;
margin-bottom: 20px;
}
.form-container .form-label {
font-weight: bold;
display: block;
margin: 10px 0 5px;
}
.form-container .form-input,
.form-select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.form-container .form-submit-button {
width: 100%;
padding: 15px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.form-container .form-submit-button:hover {
background-color: #0056b3;
}
.form-container .hidden {
display: none;
}
.form-container .thank-you-message {
text-align: center;
color: #ff5317;
font-size: 18px;
}
/* ---------------------------------------------------------- Sustainability Page ---------------------------------------------------------- */
/* Parallax Section */
.parallax-container {
height: 200vh;
overflow: hidden;
position: relative;
}
.sustain-initiative {
position: relative;
padding: 100px 20px;
text-align: center;
background: rgba(255, 255, 255, 0.5);
transition: transform 0.3s ease-in-out;
}
.sustain-initiative h2 {
font-size: 2.5rem;
margin-bottom: 20px;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s, transform 0.5s; color: rgb(0, 0, 0);
}
.sustain-initiative p {
font-size: 1.2rem;
margin: 0 auto;
max-width: 800px;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s, transform 0.5s; color: rgb(0, 0, 0);
}
/* Background Images for Parallax Effect */
#sustain-carbon-emission {
/* background: url('/carbon.png') no-repeat center center fixed;
background-size: cover; background-repeat: no-repeat; */
}
#sustain-sand-reclamation {
/* background: url('/sustain2s.jpg') no-repeat center center fixed;
background-size: cover; background-repeat: no-repeat; */
}
#sustain-eco-friendly-oils {
/* background: url('/sustains.png') no-repeat center center fixed;
background-size: cover; background-repeat: no-repeat; */
}
#sustain-erp-paperless {
/* background: url('images/erp-system.jpg') no-repeat center center fixed;
background-size: cover; */
}
#sustain-tree-plantation {
/* background: url('/sustains.png') no-repeat center center fixed;
background-size: cover; background-repeat: no-repeat; */
}
/* Parallax Scroll Effects */
.sustain-initiative:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.7);
}
.sustain-initiative:nth-child(even) {
background-color: rgba(95, 95, 95, 0.7);
}
/* Animations for Text */
.sustain-initiative.visible h2,
.sustain-initiative.visible p {
opacity: 1;
transform: translateY(0); color: rgb(255, 255, 255);
}
/* Animating with keyframes */
@keyframes fadeIn {
0% {
opacity: 0 ;
transform: translateY(1000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.sustainability {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 20px; background-color: white; padding: 3%;
}
.sustainability-item {
display: flex;
flex-direction: column;
align-items: center;
}
.sustainability-item h2 {
margin-right: 20px;
font-size: 1.8rem;
}
.sustainability-item p {
font-size: 1rem;
color: #000000;
}
.sustainabilitypd{
width: 100%; justify-content: center;
display: flex;
}
/* Basic styles for the sustainability grid */
.sustainability-grid-section {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns for better layout */
gap: 20px; /* Space between grid items */
padding: 40px; background-color: white;
}
.sustainability-grid-item {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out; /* Smooth transform effect */
}
.sustainability-grid-item:hover {
transform: translateY(-10px); /* Hover effect */
}
.sustainability-grid-item img {
width: 100%;
height: auto;
margin-bottom: 20px;
border-radius: 5px;
}
.sustainability-grid-item h3 {
font-size: 1.6rem;
margin-bottom: 10px;
color: #333;
}
.sustainability-grid-item p {
font-size: 1rem;
color: #666;
margin-bottom: 20px; text-align: left;
}
.sustainability-read-more {
display: inline-block;
padding: 10px 20px;
font-size: 1rem;
text-decoration: none;
background-color: #ff5317;
color: white;
border-radius: 5px;
position: relative;
overflow: hidden;
text-align: center;
}
/* Responsive Design */
@media (max-width: 768px) {
}
@media (max-width: 480px) {
.sustainability-item {
display: flex;
flex-direction: column;
align-items: center;
}
.sustainabilitypd {
width: 80%;
justify-content: center;
display: flex;
}
.sustainability-grid-section {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
padding: 40px;
background-color: white;
}
}
/* .sustainability-read-more::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #ff5317;
transition: left 0.4s ease;
}
.sustainability-read-more::after a { z-index: 1;
}
.sustainability-read-more:hover::after {
left: 0;
}
.sustainability-read-more:hover {
color: white;
transition: color 0.4s ease;
} */
/* ---------------------------------------------------------- Sustainability Page ---------------------------------------------------------- */
/* ---------------------------------------------------------- Insight Page ---------------------------------------------------------- */
/* Blog Section */
section#blog h2, section#news-updates h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 30px;
color: #2e3b4e;
}
.blog-posts, .news-updates {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.post, .update {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.post h3, .update h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.post .date, .update .date {
font-size: 0.9rem;
color: #777;
margin-bottom: 10px;
}
.post .excerpt, .update .excerpt {
font-size: 1rem;
margin-bottom: 15px;
color: #555;
}
.post .read-more, .update .read-more {
font-size: 1rem;
color: #ff5317;
text-decoration: none;
}
.post .read-more:hover, .update .read-more:hover {
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 768px) {
.blog-posts, .news-updates {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.blog-posts, .news-updates {
grid-template-columns: 1fr;
}
}
.blog-container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding-top: 30px;
}
.blog-main-heading {
text-align: center;
font-size: 2em;
margin-bottom: 30px;
}
.blog-post {
margin-bottom: 40px;
}
.blog-heading {
font-size: 1.8em;
margin-bottom: 10px;
}
.blog-summary {
font-size: 1em;
line-height: 1.6;
color: #555;
}
.blog-container button {
margin-top: 15px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border: none;
background-color: #ff5317;
color: white;
border-radius: 5px;
}
.blog-container button:hover {
background-color: #ff5317;
}
.blog-container .blog-popup {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 999;
}
.blog-popup-content {
background-color: white;
padding: 20px;
border-radius: 10px;
position: relative;
}
.blog-close-popup {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5em;
cursor: pointer;
}
.blog-popup iframe {
width: 100%;
height: 400px;
}
#blog-images-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#blog-images-grid img {
width: 100%;
border-radius: 5px;
}
@media (max-width: 768px) {
#blog-images-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
#blog-images-grid {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------- Insight Page ---------------------------------------------------------- */
/* ---------------------------------------------------------- Casting Page ---------------------------------------------------------- */
.css-typing p {
border-right: solid 3px transparent;
white-space: nowrap;
overflow: hidden;
font-size: 28px;
color: black;
margin: 0 auto;
padding-right: 2%;
}
/* Animation */
.css-typing p:nth-child(1) {
width:545px;
-webkit-animation: type 3s steps(60, end);
animation: type 4s steps(60, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; text-align: left; margin-bottom: 10px;
}
.css-typing p:nth-child(2) {
width:545px;
opacity: 0;
-webkit-animation: type2 6s steps(40, end);
animation: type2 6s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;text-align: left; margin-bottom: 10px;
}
.css-typing p:nth-child(3) {
width: 545px;
opacity: 0;
-webkit-animation: type2 4s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;text-align: left; margin-bottom: 10px;
}
.css-typing p:nth-child(4) {
width:545px;
opacity: 0;
-webkit-animation: type2 4s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;text-align: left; margin-bottom: 10px;
}
.css-typing p:nth-child(5) {
width: 545px;
opacity: 0;
-webkit-animation: type2 4s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 8s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;text-align: left; margin-bottom: 10px;
}
.css-typing p:nth-child(6) {
width: 545px;
opacity: 0;
-webkit-animation: type2 4s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 10s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;text-align: left; margin-bottom: 10px;
}
.css-typing p:nth-child(7) {
width: 545px;
opacity: 0;
-webkit-animation: type2 4s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 12s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;text-align: left; margin-bottom: 10px;
}
/*p {
animation: animated-text 4s steps(29,end) 1s 1 normal both,
animated-cursor 800ms steps(29,end) infinite;
}*/
/* text animation */
/*@keyframes animated-text{
from{width: 0;}
to{width: 572px;}
}*/
@keyframes type {
0% {width: 0;}
99.9% {border-right: .15em solid transparent;}
100% {border: none;}
}
@keyframes type2 {
0% {width: 0;}
1% {opacity: 1;}
99.9% {border-right: .15em solid transparent;}
100% {border: none; opacity: 1;}
}
/* cursor animations */
@keyframes animated-cursor{
from{border-right-color: rgba(0,255,0,.75);}
to{border-right-color: transparent;}
}
.logo-slider {
overflow: hidden;
padding: 30px 0 0 0;
white-space: nowrap;
position: relative; background-color: white;
}
.logo-slider:hover .logos-slide {
animation-play-state: paused;
}
.logos-slide {
display: inline-block;
animation: 25s slide infinite linear;
}
.logos-slide .slide {
display: inline-block;
}
.logos-slide img {
max-width: 450px;
max-width: 300px;
margin: 5px 0;
}
.logo-slider .slide h2 {
font-size: 16px;
text-align: left;
font-family:'Arial';
font-style: normal;
margin: 5px 0;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* Responsive Design */
@media (max-width: 768px) {
}
@media (max-width: 480px) {
.css-typing p:nth-child(n+1):nth-child(-n+7) {
text-align: left;
font-size: 20px;
margin: 1%;
}
.css-typing p {
border-right: solid 3px transparent;
white-space: nowrap;
overflow: hidden;
font-size: 24px;
color: black;
margin: 0 auto;
padding-right: 2%;
}
}
/* ---------------------------------------------------------- Casting Page ---------------------------------------------------------- */
/* ---------------------------------------------------------- product success Page ---------------------------------------------------------- */
.product-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
padding: 1%;
}
.product-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
}
.product-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
transform: translateY(50px);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.product-card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.product-info {
padding: 15px;
}
.product-info h3 {
font-size: 18px;
margin-bottom: 10px;
text-align: center;
}
.product-info p {
font-size: 14px;
color: #666;
}
/* Add animation on scroll */
.product-card.visible {
transform: translateY(0);
opacity: 1;
}
/* Add animation on scroll */
.product-card.visible {
transform: translateY(0);
opacity: 1;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2), 0px 18px 36px rgba(0, 0, 0, 0.3), 0px 22px 44px rgba(0, 0, 0, 0.15);
}
/* Responsive Design */
@media (max-width: 1200px) {
.product-cards {
grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
}
}
@media (max-width: 900px) {
.product-cards {
grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
}
}
@media (max-width: 600px) {
.product-cards {
grid-template-columns: 1fr; /* 1 column for very small screens */
padding-left: 10px; /* Add some padding for mobile */
padding-right: 10px;
}
.product-info h3 {
font-size: 16px; /* Adjust font size on small screens */
}
.product-info p {
font-size: 12px; /* Adjust font size for small screens */
}
}
/* ---------------------------------------------------------- product success Page ---------------------------------------------------------- */
/* ---------------------------------------------------------- new mAnufacuring Page ---------------------------------------------------------- */
.sectionmanu {
margin-bottom: 50px;
}
.sectionmanu .item {
display: flex;
align-items: center;
margin-bottom: 30px;
opacity: 0;
transition: opacity 1s ease-out;
}
.sectionmanu .left-image, .right-image {
flex: 1;
}
.sectionmanu .left-image img, .right-image img {
max-width: 100%;
height: auto;
}
.sectionmanu .right-text, .left-text {
flex: 1;
padding: 10px;
font-size: 1.1em;
color: #333;
}
.sectionmanu .image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.sectionmanu .img-item img {
max-width: 100%;
border-radius: 5px;
}
.sectionmanu .bounce {
animation: bounce 1s ease-out;
}
@keyframes bounce {
0% { transform: scale(0.8); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.left-to-right {
animation: slideLeft 1s forwards;
}
.right-to-left {
animation: slideRight 1s forwards;
}
@keyframes slideLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* ---------------------------------------------------------- new mAnufacuring Page
---------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1350px ) {
h4 {
font-size: 1rem !important; /* Adjust to 1rem for laptops */
}
}
@media (max-width: 900px) {
.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
justify-content: center;
}
.image-box {
width: 100%;
/* One image per row */
}
}
/* Responsive for smaller screens */
@media (max-width: 800px) {
.gridcolumn {
flex: 33%;
max-width: 33%;
}
}
/* For screens smaller than 760px */
@media (max-width: 760px) {
.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
width: 100%;
justify-content: center;
}
.image-box {
width: 100%;
/* One image per row */
}
}
@media (max-width: 600px) {
.gridcolumn {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width:768px) {
header.position-absolute {
background: #fff none repeat scroll 0 0;
position: relative;
}
.curved-text-container .left-container{
padding-top:850px;
}
.padding-2x {
padding: 1.25rem !important;
}
.logo img {
max-width: 172px;
max-height: 40px;
margin: 0 auto;
width: auto;
top: 10px;
}
nav.fixed .top-nav li a,
.fixed nav .top-nav li a {
color: #fff;
}
nav.fixed .top-nav li li a,
.fixed nav .top-nav li li a {
color: #444;
}
.top-nav li ul li a:hover {
color: #ff5317;
}
.top-nav li ul li ul li a {
background: none repeat scroll 0 0 #fff;
color: #444;
}
.logo {
height: 59px;
display: block;
}
.nav-text::after {
color: #000;
}
.nav-text {
margin-right: 0;
}
.fixed {
position: relative;
z-index: 10;
}
.fixed .nav-text::after {
color: #000;
}
.top-nav,
.nav-text,
.top-nav li a,
.background-white .top-nav li a {
background: none repeat scroll 0 0 #454545;
}
.logo-menu {
display: none;
}
.logo-white {
display: none !important;
}
nav.fixed .logo-dark,
.fixed nav .logo-dark,
.logo-dark {
display: block;
width: auto;
}
nav {
padding: 0 !important;
height: auto;
}
.left-menu,
.right-menu {
width: 100%;
padding-top: 0;
}
.top-nav.left-menu,
.top-nav.right-menu {
position: relative;
z-index: 10;
left: 0;
width: 100% !important;
}
.top-nav.left-menu {
padding-top: 60px;
}
.margin-top-130 {
margin-top: 0 !important;
}
.carousel-3-blocks {
padding: 0;
}
.padding-3x {
padding: 30px !important;
}
.background-image {
background-position: center;
}
nav.background-transparent.background-transparent-hightlight .s-12.l-2 {
width: 100%;
}
body {
padding-top: 0;
}
.section-head {
padding: 4rem 1.25rem 3rem;
}
}
@media screen and (max-width:768px) {
.section-block-2x {
padding: 7rem 2.5rem;
}
}
@media (max-width: 768px) {
.sectionmanu .image-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width:780px) {
.text-right {
text-align: left !important;
width: 100% !important;
}
.right {
float: left !important;
}
}
@media (max-width: 768px) {
.curved-text-container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0px 20px 100px 20px;
}
}
@media screen and (max-width:480px) {
.aside-nav li a {
text-align: left;
}
}
@media screen and (max-width:480px) {
.text-right {
text-align: left !important;
width: 100% !important;
/*padding: 10%;*/
}
.right {
float: left !important;
}
.lightboxmainytvdo {
display: flex;
justify-content: center;
align-items: center;
height: 60vh !important;
text-align: center;
}
}
@media (max-width: 420px) {
.main {
width: 100%;
height: 150vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
flex-direction: column;
}
.profile-card {
position: relative;
font-family: 'poppins', sans-serif;
;
width: 220px;
height: 220px;
background: #fff;
padding: 30px;
border-radius: 50%;
box-shadow: 0 0 22px #3336;
transition: .6s;
margin: 21px 25px;
}
}
@media (max-width: 420px) {
.categories {
display: flex;
justify-content: center;
margin-bottom: 20px;
flex-direction: column;
}
.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
width: 100%;
justify-content: center;
}
.image-box {
width: 100%;
/* One image per row */
}
}
/* For screens smaller than 420px */
@media (max-width: 420px) {
b,
strong,
.text-strong {
font-weight: 600;
font-weight: 600;
justify-content: center;
display: flex;
}
}
@media screen and (max-width: 64rem) {
.colTHOUGHT {
width: calc(33.333333% - 2rem);
}
}
@media screen and (max-width: 48rem) {
.colTHOUGHT {
width: calc(50% - 2rem);
}
}
@media screen and (max-width: 32rem) {
.colTHOUGHT {
width: 100%;
margin: 0 0 2rem 0;
}
}
@media (max-width: 480px) {
.ktp-card-container {
display: flex;
justify-content: space-evenly;
gap: 20px;
flex-wrap: wrap;
flex-direction: column;
}
.ktp-card {
width: 100% !important;
padding: 20px;
border: 2px solid #000000;
background-color: #fff;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
overflow: hidden;
position: relative;
opacity: 0;
}
}
/* Responsive Styles for 760px and below */
@media screen and (max-width: 760px) {
.nav-links {
display: none;
/* Hide links initially for mobile */
flex-direction: column;
background-color: #000;
position: absolute;
top: 50px;
width: 100%;
}
.nav-links li {
text-align: center;
padding: 10px 0;
}
.menu-toggle {
display: flex;
}
/* Toggle nav links on click */
#mobile-menu.active+.nav-links {
display: flex;
}
}