/* rufina-regular - latin */ @font-face { font-family: 'Rufina'; font-style: normal; font-weight: 400; src: url('../fonts/rufina-v8-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/rufina-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/rufina-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/rufina-v8-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/rufina-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/rufina-v8-latin-regular.svg#Rufina') format('svg'); /* Legacy iOS */ } /* rufina-700 - latin */ @font-face { font-family: 'Rufina'; font-style: normal; font-weight: 700; src: url('../fonts/rufina-v8-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/rufina-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/rufina-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/rufina-v8-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/rufina-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/rufina-v8-latin-700.svg#Rufina') format('svg'); /* Legacy iOS */ } /* lato-300italic - latin */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; src: url('../fonts/lato-v20-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-regular - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: url('../fonts/lato-v20-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-300 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: url('../fonts/lato-v20-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-300.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-italic - latin */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; src: url('../fonts/lato-v20-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-700 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: url('../fonts/lato-v20-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-700.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-700italic - latin */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; src: url('../fonts/lato-v20-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-700italic.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-900 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: url('../fonts/lato-v20-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-900.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-900.svg#Lato') format('svg'); /* Legacy iOS */ } /* lato-900italic - latin */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; src: url('../fonts/lato-v20-latin-900italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/lato-v20-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lato-v20-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v20-latin-900italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v20-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v20-latin-900italic.svg#Lato') format('svg'); /* Legacy iOS */ } /* poppins-300 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('../fonts/poppins-v15-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-regular - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-italic - latin */ @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; src: url('../fonts/poppins-v15-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-italic.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-500 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('../fonts/poppins-v15-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-500.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-500italic - latin */ @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; src: url('../fonts/poppins-v15-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-500italic.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-600 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('../fonts/poppins-v15-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-600italic - latin */ @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; src: url('../fonts/poppins-v15-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-600italic.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-700 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('../fonts/poppins-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-700italic - latin */ @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; src: url('../fonts/poppins-v15-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-700italic.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-800 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; src: url('../fonts/poppins-v15-latin-800.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-800.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-800.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-800italic - latin */ @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; src: url('../fonts/poppins-v15-latin-800italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-800italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-800italic.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-900 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; src: url('../fonts/poppins-v15-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/poppins-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v15-latin-900.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v15-latin-900.svg#Poppins') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v23-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v23-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v23-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../fonts/open-sans-v23-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v23-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v23-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v23-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v23-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v23-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v23-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v23-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v23-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v23-latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v23-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v23-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-600italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('../fonts/open-sans-v23-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v23-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v23-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v23-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v23-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v23-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v23-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v23-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v23-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('../fonts/open-sans-v23-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v23-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v23-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v23-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v23-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v23-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-800 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('../fonts/open-sans-v23-latin-800.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v23-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v23-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v23-latin-800.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v23-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v23-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */ } /*============================================== Base Css ===============================================*/ @media (min-width: 1200px) { .container { max-width: 1200px; } } .secpd1{ padding: 100px 0; } .secpd2{ padding: 100px 0 60px; } .secpd3{ padding: 100px 0 70px; } /*============================================== Our Team Css ===============================================*/ .our-team { padding: 30px 10px 30px; } .our-team .team{ position: relative; padding: 10px 0 10px 20px; } .our-team .team:before{ content: ""; width: 40px; height: 100%; position: absolute; top: 0; left: 0; background:#ed2a28; } .our-team .pic{ position: relative; overflow: hidden; } .our-team .pic:after{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s ease 0s; } .our-team:hover .pic:after{ opacity: 1; } .our-team .pic img{ width: 100%; height: auto; } .our-team .social-links{ padding: 0; margin: 0; list-style: none; width: 100%; position: absolute; bottom: -40%; left: 0; text-align: center; z-index: 1; transition: all 0.5s ease 0s; } .our-team:hover .social-links{ bottom: 20px; } .our-team .social-links li{ display: inline-block; margin-right: 5px; } .our-team .social-links li a{ display: block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; border: 1px solid #fdfffc; font-size: 18px; color: #fdfffc; transition: all 0.5s ease 0s; } .our-team .social-links li a:hover{ background: #ed2a28; border: 1px solid #ed2a28; } .our-team .team-info{ padding: 20px 0px; background: #fff; color: #1b1a1c; text-align: center; position: relative; overflow: hidden; z-index: 1; transition: all 0.5s ease 0s; } .our-team .team-info:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: -100%; background: #ed2a28; z-index: -1; transition: all 0.5s ease 0s; } .our-team:hover .team-info:before{ left: 0; } .our-team .title5{ font-size: 22px; font-weight: 700; margin-bottom: 8px; transition: all 0.5s ease 0s; } .our-team:hover .title5 { color: #fff; } .our-team .post{ display: block; font-size: 13px; font-weight: 700; color: #1b1a1c; text-transform: uppercase; margin-bottom: 12px; } .our-team:hover .team-info .description5, .our-team:hover .post{ color: #fdfffc; } .our-team .description5{ font-size: 16px; line-height: 1.6em; color:#1b1a1c; } @media screen and (max-width: 990px){ .our-team{ margin-bottom: 22px; } } /*============================================== Red Button Css ===============================================*/ .btn{ color: #fff; background-color: transparent; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 1px; text-transform: capitalize; border: 2px solid #0f0e0d; padding: 5px 15px; position: relative; z-index: 1; transition: all 0.3s ease 0s; } .btn:hover{ color: #fff; background-color: #fff; } .btn:before, .btn:after{ content: ''; background-color:#0f0e0d; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; transition: all 0.3s ease; } .btn:hover:before{ transform: scale(0); } .btn:after{ height: 100%; width: 100%; transform: translateX(-50%) translateY(-50%) scale(0); left: 50%; top: 50%; } .btn:hover:after{ transform:translateX(-50%) translateY(-50%) scale(1); } .btn.green{ border-color: #10ac84; } .btn.green:before, .btn.green:after{ background-color: #10ac84; } .btn.red{ border-color: #ed2a28; } .btn.red:before, .btn.red:after{ background-color: #ed2a28; } .btn.pink{ border-color: #f368e0; } .btn.pink:before, .btn.pink:after{ background-color: #f368e0; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } } /*============================================== featured-area-box2 Css ===============================================*/ .box2{ background-color: #990000; background-image: linear-gradient(147deg, #990000 0%, #ff0000 74%); font-family: 'Rufina', serif; border-radius: 5px; position: relative; overflow: hidden; transition: all 0.3s ease 0s; margin-top: 60px; } .box2:hover{ box-shadow: 0 0 5px #555; } .box2:before{ content: ''; background: repeating-linear-gradient(45deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03), 10px, transparent 20px, transparent 30px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.08), rgba(0,0,0,0.08), 10px, transparent 20px, transparent 30px); background-color: #fff; height: 565px; width: 520px; border-radius: 50%; box-shadow: 0 0 15px #fff; opacity: 0; position: absolute; left: -600px; top: -600px; z-index: 0; transition: all 0.56s ease 0.1s; } .box2:hover:before{ opacity: 1; left: -240px; top: -300px; } .img-container{ padding-bottom: 48%; position: relative; } .box2 .img-clip{ width: 100%; height: auto; position: absolute; left: 0; top: 0; } .image-clip-1{ clip-path: inset(0 79% 0 0); -moz-clip-path: inset(0 79% 0 0); transition: all 0.3s ease 0.1s; } .image-clip-2{ clip-path: inset(0 60% 0 20%); -moz-clip-path: inset(0 60% 0 20%); transition: all 0.3s ease 0.2s; } .image-clip-3{ clip-path: inset(0 40% 0 39%); -moz-clip-path: inset(0 40% 0 39%); transition: all 0.3s ease 0.3s; } .image-clip-4{ clip-path: inset(0 20% 0 59%); -moz-clip-path: inset(0 20% 0 59%); transition: all 0.3s ease 0.4s; } .image-clip-5{ clip-path: inset(0 0 0 79%); -moz-clip-path: inset(0 0 0 79%); transition: all 0.3s ease 0.5s; } .box2:hover .image-clip-1, .box2:hover .image-clip-2, .box2:hover .image-clip-3, .box2:hover .image-clip-4, .box2:hover .image-clip-5{ opacity: 0; transform: scale(0); } .box2 .box2-content{ opacity: 0; position: absolute; left: 0; top: 0; transition: all 0.3s ease 0.5s; } .box2:hover .box2-content{ opacity: 1; left: 15px; top: 15px; } .box2 .title{ color: #ed2a28; font-size: 25px; font-weight: 600; margin: 0 0 3px; } .box2 .post{ color: #2b59a7; font-size: 16px; letter-spacing: 1px; text-transform: capitalize; } .box2 .icon{ text-align:left; padding: 0; margin: 0; list-style: none; position: absolute; right: -10px; bottom: 20px; transition: all 0.3s ease 0s; } .box2 .icon li{ display: inline-block; margin: 0 3px; transform: rotateY(90deg); transition: transform 0.3s ease 0.5s; } .box2 .icon li:last-child{ transition-delay: 0.7s; } .box2:hover .icon li{ transform: rotateY(0); } .box2 .icon li a{ transition: all 0.3s; } .box2 .icon li a:hover{ color: #fff; box-shadow: 0 0 10px #000; } @media only screen and (max-width:990px){ .box2{ margin-bottom: 30px; } .single-working-box-style2 { width: 50%; margin-bottom: 60px; } .working-style-bottom { padding-top: 24px; } } @media only screen and (max-width:479px){ .box2 .title{ font-size: 20px; } } .btn-one { position: relative; display: inline-block; background: #ed2a28; color: #ffffff; font-size: 17px; line-height: 60px; font-weight: 600; text-transform: capitalize; font-family: 'Poppins', sans-serif; padding: 0 30px 0; transition: all 500ms ease; } .btn-one img { position: relative; display: inline-block; padding-left: 10px; width: auto; } .btn-one span:before { font-size: 26px; line-height: 14px; display: inline-block; padding-left: 10px; position: relative; top: 4px; } .btn-one:hover{ color: #ffffff; background: #27282c; } .btn-two{ color: #27282c; font-size: 15px; line-height: 20px;; font-weight: 500; text-transform: capitalize; font-family: 'Poppins', sans-serif; transition: all 500ms ease; } .btn-two span:before { position: relative; top: 5px; font-size: 26px; line-height: 14px; display: inline-block; padding-left: 10px; } .btn-two:hover{ color: #ed2a28; } .btn-three { position: relative; display: inline-block; background: #ffffff; color: #203260; font-size: 14px; line-height: 62px; font-weight: 700; height: 60px; text-transform: uppercase; font-family: 'Poppins', sans-serif; padding: 0 30px 0; border-radius: 5px; transition: all 500ms ease; } .btn-three span:before { position: relative; display: inline-block; top: 4px; padding-left: 9px; font-size: 20px; font-weight: 400; } .btn-three:hover{ color: #3aa40c; } .sec-title { position: relative; display: block; margin-top: -5px; padding-bottom: 40px; } .sec-title.max-width{ max-width: 650px; margin: -5px auto 0; } .sec-title.with-text{ padding-bottom: 52px; } .sec-title p{ color: #666; font-size: 14px; line-height: 20px; font-weight: 600; text-transform: uppercase; margin: 0 0 7px; font-family: 'Poppins', sans-serif; } .sec-title .title { position: relative; display: block; color: #27282c; font-size: 35px; line-height: 44px; font-weight: 700; text-transform: uppercase; font-family: 'Rufina', serif; } .sec-title .title.clr-white{ color: #ffffff; } .sec-title .title span{ font-weight: 400; } .sec-title .bottom-text{ color: #7c7e84; font-size: 17px; line-height: 27px; font-weight: 400; text-transform: none; margin: 13px 0 0; font-family: 'Rufina', serif; } .parallax-bg-one { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-one::before { background: rgba(18, 32, 0, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .parallax-bg-two { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-two::before { background: rgba(9, 23, 33, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .flex-box { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .flex-box-two { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-three { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-four { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-five { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .owl-nav-style-one{} .owl-nav-style-one .owl-controls { } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { background: #ffffff none repeat scroll 0 0; border-radius: 50%; color: #909090; font-size: 24px; font-weight: 700; height: 50px; line-height: 46px; margin: 0 0 0 0px; padding: 0; width: 50px; border: 1px solid #f3f3f3; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav .owl-next { margin-left: 10px; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #172272; color: #172272; } .owl-nav-style-two{} .owl-nav-style-two .owl-controls { } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"] { background: #fff none repeat scroll 0 0; border-radius: 0%; color: #3740b0; font-size: 24px; font-weight: 700; height: 50px; line-height: 50px; margin: 0 0 0 0px; padding: 0; width: 50px; transition: all 700ms ease 0s; } .owl-nav-style-two.owl-theme .owl-nav .owl-next { margin-left: 0px; } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"]:hover{ color: #ffffff; background: #3740b0; } .accordion-box { position: relative; display: block; overflow: hidden; } .accordion-box .accordion { position: relative; display: block; margin-bottom: 20px; } .accordion-box .accordion .accord-btn { position: relative; display: block; cursor: pointer; background: #ffffff; padding-left: 40px; padding-right: 70px; padding-top: 22px; padding-bottom: 22px; -webkit-box-shadow: 0px 3px 5px 2px #ededed; box-shadow: 0px 3px 5px 2px #ededed; transition: all 500ms ease; } .accordion-box .accordion .accord-btn h4 { color: #27282c; font-size: 18px; line-height: 26px; font-weight: 600; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { font-family: "Flaticon"; position: absolute; top: 22px; right: 40px; color: #b4b4b4; content: "\f10d"; font-size: 25px; line-height: 25px; font-weight: 300; transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active{ background: #27282c; transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 { color: #ffffff; } .accordion-box .accordion .accord-btn.active:after{ color: #ffffff; } .accordion-box .accordion .accord-content { position: relative; display: block; padding-top: 29px; padding-bottom: 7px; padding-left: 0px; padding-right: 40px; display: none; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { margin: 0; } .boxed_wrapper { background: #fff none repeat scroll 0 0; position: relative; margin: 0 auto; width: 100%; min-width: 320px; min-height: 400px; overflow: hidden; } /* Form validation styles */ input:focus, textarea:focus, select:focus { border-color: #43c3ea; outline: none; } #contact-form input[type="text"].error{ border-color: red; } #contact-form input[type="email"].error{ border-color: red; } #contact-form select.error { border-color: red; } #contact-form textarea.error{ border-color: red; } /* Post pagination styles */ .post-pagination{ position: relative; display: block; } .post-pagination.martop20{ margin-top: 20px; } .post-pagination li { display: inline-block; margin: 0 3px; } .post-pagination li a { position: relative; display: block; background: #ffffff; border-radius: 0px; border: 1px solid #ededed; color: #2f2f2f; font-size: 18px; font-weight: 600; height: 50px; width: 50px; padding: 11px 0; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; } .post-pagination li a i { position: relative; font-size: 20px; } .post-pagination li.active a, .post-pagination li:hover a { color: #fff; background: #ed2a28; border: 1px solid #ed2a28; } /* Post pagination styles 2 */ .post-pagination2{ display: block; margin-top: 20px; } .post-pagination2 li { display: inline-block; margin: 0 3px; } .post-pagination2 li a { position: relative; display: block; color: #222222; font-size: 18px; font-weight: 600; height: 32px; width: 32px; line-height: 32px; text-align: center; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; border-radius: 50%; } .post-pagination2 li.active a, .post-pagination2 li:hover a { background: #f36727; color: #ffffff; } .post-pagination2 li a.left { width: auto; height: auto; display: block; color: #868298; padding-right: 10px; transition: all 500ms ease; } .post-pagination2 li:hover a.left{ background: none; } .post-pagination2 li a.left i { position: relative; top: 1px; display: inline-block; padding-right: 8px; font-size: 21px; } .post-pagination2 li a.left:hover{ color: #f36727; } .post-pagination2 li a.right { width: auto; height: auto; display: block; color: #868298; padding-left: 10px; transition: all 500ms ease; } .post-pagination2 li a.right:hover{ color: #f36727; } .post-pagination2 li:hover a.right{ background: none; } .post-pagination2 li a.right i { position: relative; top: 1px; display: inline-block; padding-left: 8px; font-size: 21px; } /* Overlay styles */ .overlay-style-one{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(233, 33, 48, 0.85); transition: all 700ms ease 100ms; opacity: 0; z-index: 2; } .overlay-style-one .box{ display: table; height: 100%; width: 100%; } .overlay-style-one .box .content{ display: table-cell; text-align: center; vertical-align: middle; } .overlay-style-two{ position: absolute; left: 0px; bottom: 0px; right: 0px; top: 0px; z-index: 2; opacity: 0; transition: all 900ms ease; } .overlay-style-two:before{ position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(-90deg); transform-origin: top; transition: all 0.5s; background-color: rgba(0, 0, 0, 0.80); } .overlay-style-two:after{ position: absolute; content: ''; left: 0px; bottom: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(90deg); transform-origin: bottom; transition: all 0.5s; background-color: rgba(0, 0, 0, 0.80); } .review-box { position: relative; display: block; overflow: hidden; line-height: 16px; } .review-box ul { display: block; overflow: hidden; } .review-box ul li { display: inline-block; float: left; margin-right: 4px; } .review-box ul li:last-child{ margin-right: 0px; } .review-box ul li i { font-size: 16px; color: #ed2a28; } .sociallinks-style-one{ } .sociallinks-style-one li{ display: inline-block; float: left; margin-right: 20px; } .sociallinks-style-one li:last-child{ margin-right: 0px; } .sociallinks-style-one li a i{ color: #9491a2; font-size: 15px; font-weight: 400; transition: all 500ms ease; } .sociallinks-style-one li a:hover i{ color: #39345a; } .sociallinks-style-two{ overflow: hidden; } .sociallinks-style-two li { display: inline-block; float: left; margin-right: 20px; } .sociallinks-style-two li:last-child{ margin-right: 0px; } .sociallinks-style-two li a i { position: relative; display: block; width: 50px; height: 50px; background: #203260; border: 1px solid #31426c; border-radius: 50%; color: #ffffff; font-size: 14px; line-height: 48px; text-align: center; transition: all 500ms ease 0s; } .sociallinks-style-two li a:hover i{ color: #3398fd; transform: rotate(360deg); } /* Update header Style */ @keyframes menu_sticky { 0% {margin-top:-90px;} 50% {margin-top: -74px;} 100% {margin-top: 0;} } /*============================================== Top Bar Style1 Css ===============================================*/ .top-bar-style1 { position: relative; display: block; background: #26272b; padding: 19px 0 62px; } .top-style1{ position: relative; display: block; text-align: center; } .top-style1 p{ margin: 0; } .top-style1 p a{ color: #ffffff; transition: all 300ms ease 100ms; } .top-style1 p a:hover{ color: #828282; } .header-lower-style1 { position: relative; display: block; background: #f6f6f6; padding: 30px 0; } .header-lower-style1 .inner-content{ position: relative; display: block; border-right: 1px solid #dddddd; } .header-contact-info { position: relative; display: block; border-left: 1px solid #dddddd; padding-left: 20px; } .header-contact-info li { position: relative; display: inline-block; float: left; border-right: 1px solid #dddddd; padding-right: 30px; margin-right: 30px; } .header-contact-info li:last-child{ margin-right: 0; } .header-contact-info li .single-item{ position: relative; display: block; } .header-contact-info li .single-item .icon{ width: 50px; } .header-contact-info li .single-item .icon span:before { position: relative; top: 2px; color: #b7b7b7; font-size: 50px; line-height: 50px; transition: all 300ms ease 100ms; } .header-contact-info li:hover .single-item .icon span:before{ color: #ed2a28; } .header-contact-info li .single-item .icon, .header-contact-info li .single-item .text{ display: table-cell; vertical-align: middle; } .header-contact-info li .single-item .text{ padding-left: 15px; } .header-contact-info li .single-item .text h3{ font-size: 18px; font-weight: 500; text-transform: capitalize; font-family: 'Rubik', sans-serif; } .header-contact-info li .single-item .text p{ line-height: 18px; margin: 6px 0 0; } .header-social-links-style1 { position: relative; display: block; padding-right: 20px; margin: 2px 0 3px; } .header-social-links-style1 li{ position: relative; display: inline-block; float: left; margin-right: 15px; } .header-social-links-style1 li:last-child{ margin-right: 0; } .header-social-links-style1 li a{} .header-social-links-style1 li a i{ position: relative; display: block; width: 50px; height: 50px; border-radius: 50%; background: #ffffff; color: #7c7e84; font-size: 14px; line-height: 50px; text-align: center; transition: all 700ms ease 100ms; } .header-social-links-style1 li a:hover i{ color: #ffffff; background: #ed2a28; transform: rotate(360deg); } /*** ============================================= About Area style ============================================= ***/ .highlights-area{ position: relative; display: block; background: transparent; margin-top: -135px; z-index: 100; } .single-highlight-box{ position: relative; display: block; background: transparent; padding-top: 55px; margin-bottom: 50px; } .single-highlight-box .icon-holder{ position: absolute; top: 0; left: 0; right: 0; width: 110px; height: 110px; background: #ffffff; margin: 0 auto; border-radius: 50%; border: 3px solid #ed2a28; text-align: center; z-index: 3; } .single-highlight-box .icon-holder::before { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; content: ""; background: #ed2a28; border-radius: 50%; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateY(-90deg) translateZ(0px); opacity: 0; z-index: -1; } .single-highlight-box:hover .icon-holder::before{ transform: perspective(1200px) rotateY(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-highlight-box .icon-holder span:before { display: block; color: #b3b3b3; font-size: 50px; line-height: 104px; transition: all 0.7s ease-in-out 0s; } .single-highlight-box:hover .icon-holder span:before{ color: #ffffff; } .single-highlight-box .inner-content{ position: relative; display: block; background: #ffffff; padding-top: 55px; box-shadow: 0px 4px 11px -1px #ECECEC; } .single-highlight-box .inner-content .text{ position: relative; display: block; padding: 26px 30px 32px; } .single-highlight-box .inner-content h3 { font-weight: 600; margin: 0px 0 18px; } .single-highlight-box .inner-content p{ margin: 0; } .single-highlight-box .inner-content a{ position: relative; display: block; background: #f6f6f6; color: #27282c; } .single-highlight-box:hover .inner-content a{ color: #ed2a28; } /*** ============================================= About Area style ============================================= ***/ .about-area{ position: relative; display: block; padding-top: 60px; padding-bottom: 110px; } .about-image-box { position: relative; display: block; max-width: 470px; width: 100%; background: #f6f6f6; padding-top: 60px; padding-left: 60px; } .about-image-box:before{ position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: #ffffff; content: ""; z-index: 1; } .about-image-box .inner-box{ position: relative; display: block; z-index: 2; } .about-image-box .inner-box img{ width: 100%; } .about-image-box .inner-box .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about-image-box .inner-box .overlay .box{ display: table; width: 100%; height: 100%; } .about-image-box .inner-box .overlay .box .icon{ display: table-cell; vertical-align: middle; text-align: center; } .about-image-box .inner-box .overlay .box .icon img{ width: auto; } .about-image-box .text-box { position: relative; display: block; padding-top: 33px; padding-bottom: 52px; padding-right: 20px; margin-right: 60px; z-index: 1; } .about-image-box .text-box:before { position: absolute; right: 40px; bottom: 30px; font-family: 'icomoon'; content: "\e939"; color: #ebebeb; font-size: 70px; line-height: 70px; transform: perspective(1200px) rotateX(180deg) translateZ(0px); z-index: -1; } .about-image-box .text-box p { color: #828282; font-size: 20px; line-height: 30px; margin: 0 0 17px; } .about-image-box .text-box h3{ color: #3a3a3a; font-size: 18px; font-weight: 600; } .about-image-box .text-box h3 span{ color: #ed2a28; font-size: 15px; font-weight: 400; font-family: 'Rubik', sans-serif; } .about-text{ position: relative; display: block; padding-left: 100px; } .about-text .sec-title { padding-bottom: 44px; } .about-text .inner-content{ position: relative; display: block; } .about-text .inner-content .text { display: block; padding-bottom: 26px; } .about-carousel-box{ position: relative; display: block; background: #ed2a28; padding: 41px 41px 37px; z-index: 1; } .about-carousel-box:before { position: absolute; left: 40px; bottom: -30px; font-family: "Flaticon"; content: "\f103"; color: #ed2a28; font-size: 40px; line-height: 40px; transform: perspective(1200px) rotateY(180deg) translateZ(0px); } .about-carousel-box .single-box{ position: relative; display: block; } .about-carousel-box .single-box .icon-holder{ width: 90px; } .about-carousel-box .single-box .icon-holder span:before{ color: #ffffff; font-size: 90px; line-height: 90px; margin-left: 1px; } .about-carousel-box .single-box .icon-holder, .about-carousel-box .single-box .text-holder{ display: table-cell; vertical-align: middle; } .about-carousel-box .single-box .text-holder{ padding-left: 30px; } .about-carousel-box .single-box .text-holder h3{ color: #ffffff; font-size: 20px; font-weight: 600; margin: 0 0 21px; text-decoration: underline; } .about-carousel-box .single-box .text-holder p{ color: #ffffff; margin: 0; } .about-carousel-box.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; padding-bottom: 0px; } .about-carousel-box .owl-dots { position: absolute; margin-top: 105px !important; height: 25px; line-height: 25px; left: -10px; } .about-carousel-box .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .about-carousel-box .owl-dots .owl-dot span{ display: none; } .about-carousel-box .owl-dots .owl-dot.active{ background: #ed2a28; border-color: #ed2a28; } /*** ============================================= Working Area style ============================================= ***/ .working-area { position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 110px 0 60px; z-index: 1; } .working-area::before { background: rgba(40, 41, 46, 0.97) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .single-working-box{ position: relative; display: block; margin-bottom: 50px; } .single-working-box .img-holder{ position: relative; display: block; } .single-working-box .img-holder .inner{ position: relative; display: block; overflow: hidden; } .single-working-box .img-holder .inner img{ width: 100%; transform: scale(1.01); transition: all 700ms ease 300ms; } .single-working-box:hover .img-holder .inner img{ transform:scale(1.2) rotate(2deg); } .single-working-box .img-holder .inner .overlay-style-one{ background-color: rgba(0, 0, 0, 0.85); } .single-working-box:hover .img-holder .inner .overlay-style-one{ opacity: 1; } .single-working-box .img-holder .inner:before, .single-working-box .img-holder .inner:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; transition: all 700ms ease 500ms; border-radius: 0px; z-index: 3; } .single-working-box .img-holder .inner:before { transform: scale(0, 1); transform-origin: bottom center; border-top: 4px solid #ed2a28; border-bottom: 4px solid #ed2a28; } .single-working-box:hover .img-holder .inner:before { transform: scale(1, 1); } .single-working-box .img-holder .inner:after { transform: scale(1, 0); transform-origin: left center; border-left: 4px solid #ed2a28; border-right: 4px solid #ed2a28; } .single-working-box:hover .img-holder .inner:after{ transform: scale(1, 1); } .single-working-box .text-holder{ position: relative; display: block; background: #ffffff; margin: 0 20px; margin-top: -40px; z-index: 5; } .single-working-box .text-holder .plus-icon-box { position: absolute; right: 30px; top: -25px; width: 50px; height: 50px; background: #ed2a28; border-radius: 50%; text-align: center; display: block; padding: 15px 0; transition: all 300ms ease 100ms; } .single-working-box:hover .text-holder .plus-icon-box { top: -50px; height: 75px; background: #ed2a28; border-radius: 25px 25px 0px 0px; padding: 27px 0; } .single-working-box .text-holder .plus-icon-box span:before{ display: block; color: #ffffff; font-size: 20px; line-height: 20px; } .single-working-box .text-holder .outer-box { position: relative; display: block; padding-left: 70px; padding-top: 35px; padding-bottom: 32px; } .single-working-box .text-holder .outer-box .icon{ position: absolute; top: 0; left: 0; width: 70px; height: 100%; background: rgb(237,237,237); background: linear-gradient(0deg, rgba(237,237,237,1) 0%, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%, rgba(32,50,96,0.6530987394957983) 100%, rgba(80,166,253,1) 100%, rgba(93,173,253,1) 100%); } .single-working-box .text-holder .outer-box .icon .inner { display: table; width: 100%; height: 100%; } .single-working-box .text-holder .outer-box .icon .inner .box{ display: table-cell; vertical-align: middle; text-align: center; } .single-working-box .text-holder .outer-box .icon .inner .box span:before{ color: #ed2a28; font-size: 35px; line-height: 35px; } .single-working-box .text-holder .outer-box .text{ position: relative; display: block; padding-left: 30px; } .single-working-box .text-holder .outer-box .text h3{ color: #27282c; font-weight: 600; margin: 0 0 13px; } .single-working-box .text-holder .outer-box .text p{ margin: 0; } /*** ============================================= Recently Project Area style ============================================= ***/ .recently-project-area{ position: relative; display: block; padding: 110px 0 108px; } .recently-project-area .container-fluid { padding-right: 10px; padding-left: 10px; } .more-project-button { position: relative; display: block; margin-top: 39px; } .single-project-style1{ position: relative; display: block; z-index: 6; } .single-project-style1 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 5; } .single-project-style1 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style1:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style1 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.80); transform: scaleX(0); transition: all 700ms ease 100ms; } .single-project-style1:hover .overlay-content{ transform: scaleY(1); } .single-project-style1 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style1 .overlay-content .inner-content .link-box { display: table-cell; vertical-align: middle; text-align: center; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); transition: all 300ms ease 100ms; } .single-project-style1:hover .overlay-content .inner-content .link-box{ opacity: 1; transform: translate3d(0px, 0px, 0px); transition: all 700ms ease 500ms; } .single-project-style1 .overlay-content .inner-content .link-box a { background: #ffffff; color: #27282c; line-height: 55px; padding: 0 25px 0; } .single-project-style1 .overlay-content .inner-content .link-box a:hover{ color: #ffffff; background: #ed2a28; } .single-project-style1 .img-holder .title-box { position: absolute; left: 0px; bottom: 0px; right: 0px; text-align: center; display: block; padding-bottom: 34px; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); opacity: 0; transition: all 300ms ease 200ms; z-index: 3; } .single-project-style1:hover .img-holder .title-box{ transform: translate3d(0px, 0px, 0px); opacity: 1; transition: all 700ms ease 800ms; } .single-project-style1 .img-holder .title-box span{ color: #95979c; } .single-project-style1 .img-holder .title-box h3{ color: #ffffff; font-weight: 600; margin: 3px 0 0; } .project-carousel.owl-carousel .owl-stage-outer{ padding: 0px; } .project-carousel .owl-dots { position: relative; display: block !important; margin-top: 43px !important; line-height: 14px; text-align: center; } .project-carousel .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .project-carousel .owl-dots .owl-dot span{ display:none; } .project-carousel .owl-dots .owl-dot.active{ background: #ed2a28; border-color: #ed2a28; } /*** ============================================= Working Process area Style ============================================= ***/ .working-process-area{ position: relative; display: block; background: #f6f6f6; padding: 110px 0 50px; z-index: 2; } .single-working-process{ position: relative; display: block; padding-top: 40px; background: transparent; transition:all 500ms ease; margin-bottom: 60px; } .single-working-process:hover{ transform:translateY(-10px); } .single-working-process .top-box { position: absolute; top: 0; left: 0; right: 0; width: 90px; height: 90px; display: block; border: 3px solid #ed2a28; padding: 27px 0; background: #ffffff; border-radius: 50%; text-align: center; margin: 0 auto; z-index: 3; } .single-working-process .top-box::before { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; content: ""; background: #ed2a28; border-radius: 50%; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateY(-90deg) translateZ(0px); opacity: 0; z-index: -1; } .single-working-process:hover .top-box::before{ transform: perspective(1200px) rotateY(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-working-process .top-box span{ color: #27282c; font-size: 24px; line-height: 30px; font-weight: 500; text-transform: uppercase; transition: all 700ms ease 100ms; } .single-working-process:hover .top-box span{ color: #ffffff; transition: all 700ms ease 500ms; } .single-working-process .inner{ position: relative; display: block; padding: 82px 30px 50px; background: #ffffff; border-top: 3px solid #ed2a28; -webkit-box-shadow: 0px 6px 10px 3px #e8e8e8; box-shadow: 0px 6px 10px 3px #e8e8e8; transition: all 300ms ease; } .single-working-process:hover .inner{ box-shadow: none; } .single-working-process .inner h3{ color: #27282c; font-weight: 600; margin: 0 0 18px; } .single-working-process .inner p{ margin: 0; } .single-working-process .inner .icon-holder{ position: relative; display: block; padding-top: 22px; } .single-working-process .inner .icon-holder span:before{ color: #bababa; font-size: 80px; line-height: 80px; transition: all 700ms ease 500ms; } .single-working-process:hover .inner .icon-holder span:before{ color: #ed2a28; transition: all 700ms ease 500ms; } /*** ============================================= Slogan area style ============================================= ***/ .slogan-area { position: relative; display: block; background: #ed2a28; padding: 35px 0; } .slogan-area .title { position: relative; display: block; } .slogan-area .title h3{ color: #ffffff; font-size: 20px; line-height: 30px; font-weight: 700; } .slogan-area .button { position: relative; display: block; } .slogan-area .button a{ color: #27282c; background: #ffffff; } .slogan-area .button a:hover{ color: #ffffff; background: #e11f2c; } /*** ============================================= Testimonial Area Style ============================================= ***/ .testimonial-area { position: relative; display: block; padding: 110px 0 60px; background: #ffffff; } .more-reviews-button { position: relative; display: block; margin-top: 39px; } .single-testimonial-item{ position: relative; display: block; background: #ffffff; -webkit-box-shadow: 0px 2px 10px 3px #f6f6f6; box-shadow: 0px 2px 10px 3px #f6f6f6; margin-bottom: 50px; } .single-testimonial-item .inner-content{ position: relative; display: block; padding: 55px 30px 52px; background: #ffffff; } .single-testimonial-item .inner-content .client-info{ position: relative; display: block; padding-bottom: 22px; } .single-testimonial-item .inner-content .client-info h3{ color: #3a3a3a; font-weight: 600; margin: 0 0 3px; } .single-testimonial-item .inner-content .client-info span{ } .single-testimonial-item .inner-content .img-box{ position: relative; display: block; overflow: hidden; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; z-index: 2; } .single-testimonial-item .inner-content .img-box::before { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; content: ""; background: rgba(0, 0, 0, 0.70); border-radius: 50%; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateY(-90deg) translateZ(0px); opacity: 0; z-index: 4; } .single-testimonial-item:hover .inner-content .img-box::before{ transform: perspective(1200px) rotateY(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-testimonial-item .inner-content .img-box img{ width: 100%; transition: all 700ms ease 800ms; border-radius: 50%; } .single-testimonial-item:hover .inner-content .img-box img{ transform: rotate(360deg); } .single-testimonial-item .inner-content .text-box{ position: relative; display: block; padding-top: 24px; } .single-testimonial-item .inner-content .text-box p{ margin: 0; } .single-testimonial-item .quote-icon{ position: absolute; top: 0; left: 0; width: 60px; height: 70px; background: #ed2a28; z-index: 3; } .single-testimonial-item .quote-icon span:before{ color: #ffffff; font-size: 30px; display: block; padding: 20px 0; } /*** ============================================= appointment Area Style ============================================= ***/ .appointment-area { position: relative; display: block; background: #27282c; background-position: top right; background-attachment: scroll; background-repeat: no-repeat; background-size: auto; padding-top: 110px; padding-bottom: 110px; z-index: 1; } .map-content-box .sec-title .title{ color: #ffffff; } .map-content-box .inner{ position: relative; display: block; max-width: 570px; width: 100%; margin: 0 auto; z-index: 99; } .map-content-box .inner .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .map-content-box .inner .overlay .single-location-box{ position: absolute; } .map-content-box .inner .overlay .single-location-box.one { top: 60px; left: 70px; } .map-content-box .inner .overlay .single-location-box.two{ top: 100px; left: 50%; } .map-content-box .inner .overlay .single-location-box.three{ left: 150px; bottom: 70px; } .map-content-box .inner .overlay .single-location-box.four{ right: 50px; bottom: 60px; } .map-content-box .inner .overlay .marker-box{ display: inline-block; } .map-content-box .inner .overlay .marker-box span:before{ color: #ffffff; font-size: 50px; line-height: 50px; cursor: pointer; } .map-content-box .inner .overlay .location-info { position: absolute; left: -10px; bottom: 100px; width: 270px; opacity: 0; visibility: hidden; padding: 25px 30px 22px; padding-right: 20px; margin-left: 0; border-radius: 0px; background-color: #ffffff; transition: all 0.3s ease; z-index: 9999999999; } .map-content-box .inner .overlay .location-info:before { position: absolute; left: 30px; bottom: -30px; font-family: "Flaticon"; content: "\f103"; color: #ffffff; font-size: 40px; line-height: 40px; transform: perspective(1200px) rotateY(180deg) translateZ(0px); } .map-content-box .inner .overlay .single-location-box:hover .location-info { opacity: 1; visibility: visible; bottom: 90px; } .map-content-box .inner .overlay .single-location-box:hover .marker-box span:before{ color: #ed2a28; transition: all 500ms ease; } .map-content-box .inner .overlay .location-info h3{ color: #27282c; font-weight: 700; margin: 0 0 13px; } .map-content-box .inner .overlay .location-info p{ margin: 0; } .appointment-box{ position: relative; display: block; padding: 44px 50px 50px; max-width: 570px; width: 100%; background: #ffffff; } .appointment-box .title-box{ position: relative; display: block; padding-bottom: 22px; } .appointment-box .title-box h2{ color: #27282c; font-size: 24px; line-height: 34px; font-weight: 600; margin: 0 0 10px; } .appointment-box .title-box span{} .appointment{ position: relative; display: block; } .appointment-form .single-box{ position: relative; display: block; } .appointment-form input[type="text"], .appointment-form input[type="email"], .appointment-form textarea { position: relative; display: block; padding: 0 20px; border: 1px solid #ededed; background: #ffffff; color: #7c7e84; font-size: 15px; font-weight: 400; width: 100%; height: 60px; margin-bottom: 20px; border-radius: 5px; transition: all 500ms ease; } .appointment-form input[type="text"]:focus{ border-color: #ed2a28; } .appointment-form input[type="email"]:focus{ border-color: #ed2a28; } .appointment-form .single-box button{ display: block; width: 100%; background: #ed2a28; color: #ffffff; margin-top: 20px; border-radius: 5px; } .appointment-form input::-webkit-input-placeholder { color: #7c7e84; } .appointment-form input:-moz-placeholder { color: #7c7e84; } .appointment-form input::-moz-placeholder { color: #7c7e84; } .appointment-form input:-ms-input-placeholder { color: #7c7e84; } .appointment-form .single-box .bootstrap-select { position: relative; display: block; } .appointment-form .single-box .bootstrap-select>.dropdown-toggle { outline: none !important; border-radius: 5px; border: 1px solid #edf2f7; height: 60px; background-color: transparent; padding: 0; padding-left: 20px; color: #83888d; line-height: 60px; margin: 0; box-shadow: none !important; } .appointment-form .single-box .bootstrap-select>.dropdown-toggle::after { position: absolute; top: 50%; right: 20px; width: auto; height: auto; font-family: 'FontAwesome'; content: '\f107'; color: #83888d; font-size: 18px; transform: translateY(-50%); margin: 0; border: none; } .appointment-form .single-box .bootstrap-select .dropdown-menu { margin: 0; padding: 0; border-radius: 0; border: 0px solid #ddd; background: #f9f9f9; font-size: 16px; color: #000000; } .appointment-form .single-box .dropdown-item { display: block; width: 100%; padding: 9px 20px 9px; font-weight: 400; color: #222222; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; border-radius: 0; transition: all 500ms ease; } .appointment-form .single-box .dropdown-item.active, .appointment-form .single-box .dropdown-item:active { background: #ed2a28; color: #fff; } .appointment-form .single-box .dropdown-item:hover { background: #ed2a28; color: #fff; } /*** ============================================= Latest blog Area style ============================================= ***/ .latest-blog-area { position: relative; display: block; background: #ffffff; padding-top: 110px; padding-bottom: 50px; } .single-blog-post { position: relative; display: block; margin-bottom: 52px; } .single-blog-post .img-holder { position: relative; display: block; overflow: hidden; } .single-blog-post:hover .overlay-style-two{ opacity: 1; } .single-blog-post:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .single-blog-post:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .single-blog-post .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-blog-post:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-blog-post .img-holder .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; transform: translate3d(0px, -100%, 0px); transition: all 700ms ease 300ms; } .single-blog-post:hover .img-holder .overlay{ transition: all 700ms ease 500ms; transform: translate3d(0px, 0px, 0px); } .single-blog-post .img-holder .overlay .box{ display: table; width: 100%; height: 100%; } .single-blog-post .img-holder .overlay .box .link-icon{ display: table-cell; vertical-align: middle; text-align: center; } .single-blog-post .img-holder .overlay .box .link-icon a span:before{ display: inline-block; color: #ffffff; font-size: 35px; line-height: 35px; transition: all 500ms ease; } .single-blog-post .img-holder .overlay .box .link-icon a:hover span:before{ color: #ed2a28; } .single-blog-post .text-holder { position: relative; display: block; padding-top: 20px; } .single-blog-post .text-holder .post-date { position: relative; display: inline-block; height: 45px; border-bottom: 3px solid #dadada; transition: all 700ms ease 500ms; } .single-blog-post .text-holder .post-date h3 { position: relative; display: block; color: #ed2a28; font-size: 36px; line-height: 38px; font-weight: 600; text-transform: uppercase; } .single-blog-post .text-holder .post-date h3 span{ color: #27282c; font-size: 14px; } .single-blog-post .meta-box { position: relative; display: block; overflow: hidden; min-height: 30px; margin-top: 16px; margin-bottom: 10px; } .single-blog-post .meta-box .meta-info { position: relative; display: block; overflow: hidden; } .single-blog-post .meta-box .meta-info li { position: relative; display: inline-block; float: left; line-height: 20px; padding-right: 16px; margin-right: 14px; font-weight: 500; } .single-blog-post .meta-box .meta-info li:before{ position: absolute; top: 3px; right: 0px; width: 1px; height: 12px; background: #d3d9e0; content: ""; } .single-blog-post .meta-box .meta-info li:last-child{ padding-right: 0; margin-right: 0; } .single-blog-post .meta-box .meta-info li:last-child:before{ display: none; } .single-blog-post .meta-box .meta-info li a{ color: #ed2a28; font-size: 15px; font-weight: 400; text-transform: capitalize; transition: all 500ms ease; } .single-blog-post .meta-box .meta-info li a:hover{ color: #828282; } .single-blog-post .text-holder .blog-title { position: relative; display: block; font-size: 20px; line-height: 28px; font-weight: 600; } .single-blog-post .text-holder .blog-title a{ color: #27282c; transition: all 500ms ease; } .single-blog-post .text-holder .blog-title a:hover{ color: #ed2a28; } .single-blog-post .text-holder .text{ display: block; margin-top: 12px; } .single-blog-post .text-holder .text p{ margin: 0 0 26px; } /*** ============================================= Brand Area Style ============================================= ***/ .brand-area { position: relative; display: block; background: #f6f6f6; padding-top: 110px; padding-bottom: 90px; } .brand-items{ position: relative; display: block; } .single-brand-item { position: relative; display: block; } .single-brand-item a { display: block; background: #ffffff; text-align: center; transition: all 700ms ease 200ms; } .single-brand-item a:hover{ -webkit-box-shadow: 0px 5px 10px 2px #ebebeb; box-shadow: 0px 5px 10px 2px #ebebeb; } .single-brand-item a img{ width: auto; transition: all 900ms ease 200ms; transform: perspective(1200px) rotateY(0deg) translateZ(0px); } .single-brand-item:hover a img{ filter: brightness(0%); transform: perspective(1200px) rotateY(360deg) translateZ(0px); } .single-brand-item .overlay-content { position: absolute; left: 0px; right: 0; bottom: -35px; width: 130px; margin: 0 auto; opacity: 0; visibility: hidden; padding: 3px 0px 2px; text-align: center; background-color: #ed2a28; transition: all 300ms ease 100ms; z-index: 999; } .single-brand-item:hover .overlay-content{ bottom: -15px; visibility: visible; opacity: 1; } .single-brand-item .overlay-content:before { font-family: FontAwesome; content: "\f0de"; position: absolute; top: -8px; left: 0; right: 0; text-align: center; color: #ed2a28; font-size: 30px; } .single-brand-item .overlay-content p{ color: #ffffff; font-size: 16px; font-weight: 600; font-family: 'Poppins', sans-serif; margin: 0; } .brand-items-carousel.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; padding-bottom: 20px; } .brand-items-carousel.owl-carousel .owl-nav { position: absolute; right: 0; top: -115px; margin: 0; display: block; } .brand-items-carousel.owl-carousel .owl-nav [class*="owl-"] { position: relative; display: inline-block; background: #f6f6f6; width: 55px; height: 55px; border: 1px solid #dddddd; line-height: 54px; margin: 0; padding: 0; transition: all 700ms ease 100ms; border-radius: 50%; } .brand-items-carousel.owl-carousel .owl-nav [class*="owl-"] i:before{ color: #ababab; font-size: 20px; font-weight: 400; } .brand-items-carousel.owl-carousel .owl-nav .owl-next { margin-left: 10px; } .brand-items-carousel.owl-carousel .owl-nav [class*="owl-"]:hover{ border-color: #ed2a28; } /*** ============================================= Footer area style ============================================= ***/ .footer-area { position: relative; display: block; background: #27282c; padding-top: 110px; padding-bottom: 110px; z-index: 1; background-color: #597ACF; } .footer-shape-bg{ position: absolute; top: 0; right: 0; background-repeat: no-repeat; background-position: top right; height: 695px; width: 695px; background-image: url(../images/footer/footer-shape.png); z-index: -1; } .single-footer-widget { position: relative; display: block; overflow: hidden; } .single-footer-widget .title { position: relative; display: block; padding-bottom: 27px; margin-top: -1px; margin-bottom: 40px; z-index: 1; } .single-footer-widget .title:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #404043; content: ""; z-index: -1; } .single-footer-widget .title:after{ position: absolute; left: 0; bottom: 0; width: 50px; height: 1px; background: #ed2a28; content: ""; z-index: 1; } .single-footer-widget .title h3 { color: #ffffff; font-size: 24px; line-height: 24px; font-weight: 600; text-transform: capitalize; } .single-footer-widget .contact-info-box{ position: relative; display: block; } .single-footer-widget .contact-info-box .footer-logo { position: relative; display: block; padding-bottom: 33px; } .single-footer-widget .contact-info-box .footer-logo a{ display: inline-block; } .single-footer-widget .contact-info-box ul { position: relative; display: block; } .single-footer-widget .contact-info-box ul li { position: relative; display: block; margin-bottom: 15px; } .single-footer-widget .contact-info-box ul li:last-child{ margin-bottom: 0; } .single-footer-widget .contact-info-box ul li h6{ position: relative; display: inline-block; color: #ffffff; font-size: 14px; line-height: 20px; font-weight: 600; text-transform: uppercase; border-bottom: 2px solid #404043; } .single-footer-widget .contact-info-box ul li p{ color: #7c7e84; margin: 13px 0 0; } .single-footer-widget .services-links{ position: relative; display: block; } .single-footer-widget .services-links ul { position: relative; display: block; overflow: hidden; margin-top: -19px; } .single-footer-widget .services-links ul li { position: relative; display: block; border-bottom: 1px solid #333438; line-height: 50px; } .single-footer-widget .services-links ul li a{ color: #7c7e84; font-size: 15px; font-weight: 400; padding-left: 20px; transition: all 500ms ease; } .single-footer-widget .services-links ul li a:hover{ color: #ffffff; } .single-footer-widget .services-links ul li a:before { position: absolute; top: 0px; left: 0; content: "\f107"; font-family: "Flaticon"; color: #7c7e84; font-size: 10px; transition: all 500ms ease; font-weight: 600; line-height: 20px; margin: 14px 0 16px; } .single-footer-widget .services-links ul li a:hover:before{ content: "\f108"; color: #ffffff; transition: all 500ms ease; } .single-footer-widget .recent-news { position: relative; display: block; overflow: hidden; } .single-footer-widget .recent-news li { position: relative; display: block; padding-left: 75px; min-height: 75px; margin-bottom: 30px; } .single-footer-widget .recent-news li:last-child{ margin-bottom: 0; } .single-footer-widget .recent-news li .img-holder { position: absolute; top: 0; left: 0; width: 75px; height: 75px; display: block; overflow: hidden; } .single-footer-widget .recent-news li .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; transform: scale(1.0, 1.0); } .single-footer-widget .recent-news li:hover .img-holder img{ transform: scale(1.2, 1.2); } .single-footer-widget .recent-news li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-footer-widget .recent-news li .img-holder .overlay-style-one .content a span:before{ position: relative; display: inline-block; width: 25px; height: 25px; color: #ffffff; font-size: 25px; line-height: 25px; font-weight: 400; filter: alpha(opacity=0); opacity: 0; transform: perspective(1200px) rotateY(-90deg) scale(5); transition: all 0.5s ease-in-out 0.3s; } .single-footer-widget .recent-news li:hover .img-holder .overlay-style-one .content a span:before{ filter: alpha(opacity=100); opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1.0); transition-delay: 0.1s; } .single-footer-widget .recent-news li .title-holder{ position: relative; display: block; padding-left: 20px; } .single-footer-widget .recent-news li .title-holder p{ color: #7c7e84; line-height: 16px; margin: 0 0 9px; } .single-footer-widget .recent-news li .title-holder h5{ font-size: 16px; line-height: 22px; font-weight: 600; } .single-footer-widget .recent-news li .title-holder h5 a{ color: #ffffff; } .single-footer-widget .brochures-carousel-box{ position: relative; display: block; max-width: 270px; width: 100%; background: #ffffff; } .single-footer-widget .brochures-carousel-box .img-holder{ position: relative; display: block; overflow: hidden; } .single-footer-widget .brochures-carousel-box .img-holder img{} .single-footer-widget .brochures-carousel-box .title-holder{ position: relative; display: block; padding: 24px 30px 22px; z-index: 1; } .single-footer-widget .brochures-carousel-box .title-holder:before{ position: absolute; right: 15px; bottom: 20px; font-family: "Flaticon"; content: "\f109"; color: #ececec; font-size: 80px; line-height: 80px; z-index: -1; } .single-footer-widget .brochures-carousel-box .title-holder h3{ color: #27282c; font-size: 18px; line-height: 26px; font-weight: 600; margin: 0 0 17px; } .single-footer-widget .brochures-carousel-box .title-holder h3 a{} .brochures-carousel-box .owl-dots { position: absolute; margin-top: -177px !important; height: 25px; line-height: 25px; right: 15px; } .brochures-carousel-box .owl-dots .owl-dot{ background-image: none; width: 12px; height: 12px; margin: 0px 5px; background: transparent; border: 2px solid #ffffff; padding: 0px; border-radius: 50%; transition: all 500ms ease; display: inline-block; } .brochures-carousel-box .owl-dots .owl-dot span{ display: none; } .brochures-carousel-box .owl-dots .owl-dot.active{ background: #ffffff; } /*** ============================================= Footer Bottom Area Style ============================================= ***/ .footer-bottom-area { position: relative; display: block; padding: 20px 0; background: #ffffff; z-index: 10; } .footer-bottom-area .copyright-text { margin: 0; } .footer-bottom-area .copyright-text p { color: #fff; font-size: 15px; line-height: 24px; font-weight: 400; margin: 0; } .footer-bottom-area .copyright-text p a { color: #F90; font-weight: 500; transition: all 500ms ease; } .footer-bottom-area .copyright-text p a:hover{ color: #fff; } .footer-social-links { position: relative; display: block; } .footer-social-links span{ position: relative; display: inline-block; float: left; padding-right: 15px; color: #27282c; font-size: 14px; line-height: 30px; font-weight: 600; } .footer-social-links .sociallinks-style-one{ position: relative; display: inline-block; line-height: 30px; float: left; } .footer-social-links .sociallinks-style-one li a i { color: #7c7e84; font-size: 14px; font-weight: 400; transition: all 500ms ease; } .footer-social-links .sociallinks-style-one li a:hover i{ color: #ed2a28; } /*** ============================================= About Style2 Area style ============================================= ***/ .about-style2-area{ position: relative; display: block; padding: 85px 0 85px; } .about-style2-text{ position: relative; display: block; } .about-style2-text .sec-title { padding-bottom: 0px; } .about-style2-text .sec-title p{ margin: 0 0 27px; } .about-style2-text .text { position: relative; display: block; border-top: 1px dashed #cccccc; padding-top: 44px; padding-bottom: 35px; } .about-style2-text .text p{ margin: 0; } .about-style2-text .authorised-info{ position: relative; display: block; } .about-style2-text .authorised-info .signature{ width: 185px; } .about-style2-text .authorised-info .signature, .about-style2-text .authorised-info .name{ display: table-cell; vertical-align: middle; } .about-style2-text .authorised-info .name{ border-left: 1px solid #ededed; padding-left: 20px; } .about-style2-text .authorised-info .name h3{ color: #27282c; font-weight: 600; margin: 0 0 5px; } .about-style2-text .authorised-info .name p{ color: #ed2a28; line-height: 20px; margin: 0; } .about-style2-text .button{ position: relative; display: block; padding-top: 40px; } .about-style2-image-box{ position: relative; display: block; } .about-style2-image-box .pattern{ position: absolute; top: -60px; left: 0px; right: 0; bottom: -60px; background: #f0f0f0; background-repeat: no-repeat; width: 567px; height: 719px; content: ""; } .about-style2-image-box .image{ position: relative; display: block; max-width: 460px; width: 100%; margin: 0 auto; z-index: 3; } .about-style2-image-box img{ width: 100%; } .about-style2-image-box .overlay-box{ position: absolute; left: 40px; bottom: 30px; right: 40px; background: #ffffff; } .about-style2-image-box .overlay-box:before { font-family: FontAwesome; position: absolute; top: -20px; left: 30px; color: #ffffff; font-size: 50px; } .about-style2-image-box .overlay-box .title { position: relative; display: block; float: left; padding: 23px 0 20px; padding-left: 30px; } .about-style2-image-box .overlay-box .title h1{ color: #555555; font-size: 48px; font-weight: 500; filter: alpha(opacity=50); font-family: 'Rubik', sans-serif; } .about-style2-image-box .overlay-box .title h1 span{ position: relative; display: inline-block; font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase; font-family: 'Poppins', sans-serif; } .about-style2-image-box .overlay-box .button{ position: relative; display: block; float: right; } .about-style2-image-box .overlay-box .button a span:before { position: relative; display: block; width: 80px; background: #ed2a28; color: #ffffff; font-size: 30px; line-height: 100px; text-align: center; transform: rotate(180deg); } /*** ============================================= Working Style2 Area style ============================================= ***/ .working-style2-area { position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 0px 0 60px; margin-top: 0px; z-index: 1; } .working-style2-area::before { background: rgba(0, 0, 0, 0.80) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .working-style2-content { margin-top: -65px; } .single-working-box-style2{ position: relative; display: block; width: 25%; float: left; } .single-working-box-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-working-box-style2 .img-holder img{ width: 100%; transform: scale(1.0); transition: all 700ms ease; } .single-working-box-style2:hover .img-holder img { transform: scale(1.2); } .single-working-box-style2 .static-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; visibility: visible; opacity: 1; transform: translateY(0px); transition: all 500ms ease 100ms; } .single-working-box-style2:hover .static-content{ opacity: 0; visibility: hidden; transform: translateY(100%); transition: all 900ms ease 100ms; } .single-working-box-style2 .static-content .box{ display: table; width: 100%; height: 100%; } .single-working-box-style2 .static-content .box .inner{ display: table-cell; vertical-align: middle; text-align: center; } .single-working-box-style2 .icon-holder{ position: relative; display: block; width: 110px; height: 110px; margin: 0 auto 60px; text-align: center; border: 2px solid #ffffff; border-radius: 50%; } .single-working-box-style2 .icon-holder span:before { display: block; color: #ffffff; font-size: 55px; line-height: 106px; } .single-working-box-style2 .text-holder{ position: relative; display: block; } .single-working-box-style2 .text-holder .title{ position: relative; display: block; } .single-working-box-style2 .text-holder .title h3{ color: #ffffff; font-size: 20px; line-height: 70px; font-weight: 600; z-index: 1; } .single-working-box-style2 .text-holder .title .count { position: absolute; top: 0; left: 0; right: 0; color: #505050; font-size: 100px; line-height: 70px; font-weight: 500; font-family: 'Rubik', sans-serif; z-index: -1; } .single-working-box-style2 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; transform: translateY(100%); transition: all 300ms ease 100ms; } .single-working-box-style2:hover .overlay-content{ opacity: 1; transform: translateY(-10px); transition: all 900ms ease 300ms; } .single-working-box-style2 .overlay-content .box{ display: table; width: 100%; height: 100%; } .single-working-box-style2 .overlay-content .box .inner{ display: table-cell; vertical-align: middle; text-align: center; } .single-working-box-style2 .overlay-content .icon-holder { margin: 0 auto 50px; border: 2px solid #ed2a28; background: #ed2a28; } .single-working-box-style2 .text-holder .text{ position: relative; display: block; padding: 0 20px; margin-top: 34px; } .single-working-box-style2 .text-holder .text p{ color: #fff; margin: 0; } .single-working-box-style2 .read-more a span:before { position: absolute; left: 0; bottom: 24px; right: 0; width: 60px; height: 60px; margin: 0 auto; background: #ed2a28; border-radius: 50%; color: #ffffff; font-size: 20px; line-height: 60px; text-align: center; opacity: 0; transform: scale(0.5); transition: all 200ms ease 100ms; } .single-working-box-style2:hover .read-more a span:before{ opacity: 1.0; transform: scale(1.0); transition: all 900ms ease 900ms; } .working-style-bottom{ position: relative; display: block; padding-top: 20px; } .working-style-bottom p{ color: #ffffff; font-size: 18px; font-weight: 500; line-height: 28px; margin: 0 0 42px; font-family: 'Poppins', sans-serif; } .working-style-bottom a{ padding: 12px 30px; } .working-style-bottom2{ position: relative; display: block; padding-top: 40px; } .working-style-bottom2 p{ color: #ffffff; font-size: 18px; font-weight: 500; line-height: 28px; margin: 0 0 40px; font-family: 'Poppins', sans-serif; } .working-style-bottom2 a{ padding: 12px 30px; } /*** ============================================= Services Style1 Area Style ============================================= ***/ .services-style1-area { position: relative; display: block; padding: 110px 0 120px; } .single-service-style1 { position: relative; display: block; margin-bottom: 50px; } .single-service-style1 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-service-style1 .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-service-style1:hover .img-holder img { transform: scale(1.2); } .single-service-style1:hover .overlay-style-two{ opacity: 1; } .single-service-style1 .img-holder .overlay-style-two:before{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style1:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .single-service-style1 .img-holder .overlay-style-two:after{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style1:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .single-service-style1 .overlay-content-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; } .single-service-style1 .overlay-content-box .box{ display: table; width: 100%; height: 100%; } .single-service-style1 .overlay-content-box .box .inner{ display: table-cell; vertical-align: middle; text-align: center; } .single-service-style1 .overlay-content-box .icon { position: relative; display: block; margin: 0 0 11px; opacity: 0; transform: translate3d(0px, -50%, 0px); transition: all 300ms ease 100ms; } .single-service-style1:hover .overlay-content-box .icon{ opacity: 1; transform: translate3d(0px, 0%, 0px); transition: all 700ms ease 800ms; } .single-service-style1 .overlay-content-box .icon span:before{ display: inline-block; color: #ed2a28; font-size: 60px; line-height: 60px; } .single-service-style1 .overlay-content-box .title{ position: relative; display: block; opacity: 0; transform: translate3d(0px, 50%, 0px); transition: all 300ms ease 100ms; } .single-service-style1:hover .overlay-content-box .title{ opacity: 1; transform: translate3d(0px, 0%, 0px); transition: all 700ms ease 900ms; } .single-service-style1 .overlay-content-box .title h3{ color: #ffffff; font-weight: 600; } .single-service-style1 .text-holder{ position: relative; display: block; border: 1px solid #ededed; padding: 35px 30px 28px; } .single-service-style1 .text-holder .inner-content{ position: relative; display: block; -webkit-transform: translateY(0%); transform: translateY(0%); transition: all 700ms ease 800ms; } .single-service-style1:hover .text-holder .inner-content{ opacity: 0; -webkit-transform: translateY(-40%); transform: translateY(-40%); transition: all 700ms ease 500ms; } .single-service-style1 .text-holder .top { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .single-service-style1 .text-holder .top .icon{} .single-service-style1 .text-holder .top .icon span:before{ color: #b3b3b3; font-size: 60px; line-height: 60px; } .single-service-style1 .text-holder .top .count{} .single-service-style1 .text-holder .top .count h1{ font-size: 48px; line-height: 40px; font-weight: 500; background: -moz-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(65,94,82,1)), color-stop(1%, rgba(255,0,0,1)), color-stop(100%, rgba(77,0,0,1))); /* safari4+,chrome */ background: -webkit-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* ie10+ */ background: linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D0000', endColorstr='#415E52',GradientType=1 ); /* ie6-9 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Rubik', sans-serif; } .single-service-style1 .text-holder .bottom { padding-top: 7px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .single-service-style1 .text-holder .bottom .title{} .single-service-style1 .text-holder .bottom .title h3{ color: #27282c; font-weight: 600; } .single-service-style1 .text-holder .bottom .read-more{} .single-service-style1 .text-holder .bottom .read-more a span:before { color: #b3b3b3; font-size: 25px; line-height: 36px; } .single-service-style1 .text-holder .overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; display: block; padding: 28px 30px 0; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: all 700ms ease 100ms; } .single-service-style1:hover .text-holder .overlay-content { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition: all 700ms ease 500ms; } .single-service-style1 .text-holder .overlay-content .text { position: relative; display: block; } .single-service-style1 .text-holder .overlay-content .text p{ margin: 0; } .single-service-style1 .text-holder .overlay-content .read-more{} .single-service-style1 .text-holder .overlay-content .read-more a span:before { position: absolute; left: 0; bottom: -30px; right: 0; width: 60px; height: 60px; margin: 0 auto; background: #ed2a28; display: block; text-align: center; border-radius: 50%; color: #ffffff; font-size: 24px; line-height: 60px; } /*** ============================================= Slogan Style2 Area style ============================================= ***/ .slogan-style2-area{ position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 102px 0 110px; z-index: 1; } .slogan-style2-area .icon-holder{ position: absolute; top: -60px; left: 0; right: 0; width: 120px; height: 120px; background: #ed2a28; margin: 0 auto; border-radius: 50%; text-align: center; animation: fa-spin 9s ease infinite; } .slogan-style2-area .icon-holder span:before { position: relative; display: block; color: #ffffff; font-size: 80px; line-height: 120px; } .slogan-style2-area .inner-content { display: flex; align-items: center; flex-direction: column; text-align: center; } .slogan-style2-area .inner-content .title{ display: block; padding-bottom: 40px; } .slogan-style2-area .inner-content .title h1{ color: #ffffff; font-size: 36px; line-height: 44px; font-weight: 700; text-transform: uppercase; } .slogan-style2-area .inner-content .title h1 span{ font-weight: 400; } .slogan-style2-area .inner-content .button{} .slogan-style2-area .inner-content .button a{ color: #27282c; background: #ffffff; margin: 0 13px; padding: 0 40px 0; } .slogan-style2-area .inner-content .button a:hover{ color: #ffffff; background: #27282c; } .slogan-style2-area .inner-content .button a.call-us{ color: #ffffff; background: #ed2a28; } .slogan-style2-area .inner-content .button a.call-us i:before { position: relative; top: 2px; display: inline-block; padding-right: 10px; font-size: 20px; line-height: 20px; } /*** ============================================= Why Choose Area style ============================================= ***/ .why-choose-area{ position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 85px 0 145px; z-index: 1; } .why-choose-title{ position: relative; display: block; padding-bottom: 70px; background: #27282c; width: 100%; } .why-choose-title .sec-title { margin: 0; padding-top: 50px; padding-left: 40px; padding-bottom: 28px; } .why-choose-title .sec-title .icon { position: relative; display: block; margin-bottom: 32px; } .why-choose-title .sec-title .title { color: #ffffff; font-size: 30px; line-height: 40px; } .why-choose-title ul{ position: relative; display: block; padding-left: 4px; } .why-choose-title ul li{ position: relative; display: block; padding-left: 35px; color: #ffffff; font-size: 16px; margin-bottom: 17px; } .why-choose-title ul li:last-child{ margin-bottom: 0; } .why-choose-title ul li:before{ font-family: 'icomoon'; position: absolute; top: 2px; left: 0; color: #ed2a28; font-size: 20px; line-height: 20px; } .why-choose-title .button{ position: relative; display: block; margin-top: 52px; z-index: 1; } .why-choose-title .button:before{ position: absolute; top: 0; left: -10px; bottom: 0; width: 10px; background: #ed2a28; content: ""; z-index: -1; } .why-choose-title .button:after { position: absolute; top: -15px; left: -10px; width: 10px; height: 15px; content: ""; background: url(../images/icon/button-shape.png); z-index: -1; } .why-choose-title .button a { position: relative; display: block; background: #ed2a28; color: #ffffff; line-height: 70px; padding: 0 40px 0; } .why-choose-title .button a:hover{ background: #d51723; } .why-choose-content{ position: relative; max-width: 780px; width: 100%; display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .why-choose-content .single-box{ position: relative; display: block; padding: 50px 40px 42px; padding-right: 30px; width: 50%; } .why-choose-content .single-box.redbg{ background-image: url(../images/p1.jpg); } .why-choose-content .single-box.whitebg{ background: #ffffff; } .why-choose-content .single-box.blackbg{ background-image: url(../images/p2.jpg); } .why-choose-content .single-box .icon-holder{ position: relative; display: block; padding: 10px; width: 70px; height: 70px; z-index: 1; } .why-choose-content .single-box .icon-holder:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #ed4d58; border-radius: 50%; z-index: -1; } .why-choose-content .single-box .icon-holder span:before{ color: #ffffff; font-size: 50px; line-height: 50px; } .why-choose-content .single-box .text-holder{ position: relative; display: block; padding-top: 16px; } .why-choose-content .single-box .text-holder h3{ color: #ffffff; font-size: 20px; font-weight: 600; margin: 0 0 18px; } .why-choose-content .single-box .text-holder p{ color: #ffffff; margin: 0; } .why-choose-content .single-box.whitebg .text-holder h3{ color: #ed2a28; } .why-choose-content .single-box.whitebg .text-holder p{ color: #828282; } .why-choose-content .single-box.whitebg .icon-holder:before{ background:#ffeced; } .why-choose-content .single-box.whitebg .icon-holder span:before{ color: #ed2a28; } .why-choose-content .single-box.blackbg .text-holder p{ color: #ffff; } .why-choose-content .single-box.blackbg .icon-holder:before{ background: #ed4d58; } .why-choose-content .single-box.blackbg .icon-holder span:before{ color: #ffffff; } /*** ============================================= Recently Project Style2 Area style ============================================= ***/ .recently-project-style2-area{ position: relative; display: block; padding: 110px 0 108px; } .single-project-style2{ position: relative; display: block; } .single-project-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style2 .img-holder:before{ position: absolute; left: 0; bottom: 0; right: 0; height: 40%; content: ""; transition: all 300ms ease 100ms; z-index: 2; background: rgb(39,40,44); background: linear-gradient(180deg, rgba(39,40,44,0) 40%, rgba(39,40,44,0.8407738095238095) 78%, rgba(39,40,44,1) 94%, rgba(39,40,44,1) 100%, rgba(39,40,44,1) 100%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%); } .single-project-style2:hover .img-holder:before{ opacity: 0; } .single-project-style2 .img-holder:after{ position: absolute; left: 0; bottom: 0; right: 0; height: 100%; content: ""; opacity: 0; transition: all 300ms ease 100ms; z-index: 2; background: rgb(39,40,44); background: linear-gradient(0deg, rgba(39,40,44,0) 0%, rgba(39,40,44,0.8407738095238095) 0%, rgba(39,40,44,1) 0%, rgba(39,40,44,0.7959558823529411) 100%, rgba(39,40,44,1) 100%, rgba(39,40,44,1) 100%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%); } .single-project-style2:hover .img-holder:after{ opacity: 1; } .single-project-style2 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style2:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style2 .read-more{ position: absolute; top: 40px; left: 40px; z-index: 3; } .single-project-style2 .read-more a span:before{ position: relative; display: block; width: 60px; height: 60px; background: #ffffff; border-radius: 50%; color: #858585; font-size: 20px; line-height: 60px; text-align: center; transition: all 700ms ease 400ms; } .single-project-style2:hover .read-more a span:before{ color: #ffffff; background: #ed2a28; transform: perspective(400px) rotate(360deg); } .single-project-style2 .title-box{ position: absolute; left: 40px; bottom: 34px; z-index: 3; } .single-project-style2 .title-box span{ color: #7c7e84; } .single-project-style2 .title-box h3{ color: #ffffff; font-weight: 600; margin: 3px 0 0; } .project-carousel-v2 .owl-dots { position: relative; display: block !important; margin-top: 43px !important; line-height: 14px; } .project-carousel-v2 .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .project-carousel-v2 .owl-dots .owl-dot span{ display:none; } .project-carousel-v2 .owl-dots .owl-dot.active{ background: #ed2a28; border-color: #ed2a28; } /*** ============================================= Working Process Style2 Area style ============================================= ***/ .working-process-style2-area{ position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 110px 0 110px; z-index: 1; } .single-working-process-style2{ position: relative; display: block; max-width: 370px; min-width: 370px; width: 100%; margin: 0 auto; background: #ffffff; } .single-working-process-style2 .top-box { position: relative; display: block; padding: 30px 40px 20px; z-index: 2; } .single-working-process-style2 .top-box:before{ position: absolute; top: 11px; right: 0; width: 370px; height: 113px; background: url(../images/pattern/working-process-item-bg.png); content: ""; z-index: -1; opacity: 1; transition: all 300ms ease 100ms; } .single-working-process-style2:hover .top-box:before{ opacity: 0; transition: all 900ms ease 500ms; } .single-working-process-style2 .top-box:after{ position: absolute; top: 0px; left: 0; width: 370px; height: 99px; background: url(../images/pattern/working-process-item-hover-bg.png); content: ""; z-index: -1; transition: all 900ms ease 100ms; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-45px); opacity: 0; } .single-working-process-style2:hover .top-box:after{ opacity: 1; transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition: all 900ms ease 300ms; } .single-working-process-style2 .top-box .count{ position: relative; display: block; float: left; } .single-working-process-style2 .top-box .count h1 { color: #ed2a28; font-size: 60px; line-height: 46px; font-weight: 500; font-family: 'Rubik', sans-serif; transition: all 700ms ease 500ms; } .single-working-process-style2:hover .top-box .count h1{ color: #ffffff; } .single-working-process-style2 .top-box .icon{ position: relative; display: block; float: right; } .single-working-process-style2 .top-box .icon span:before{ color: #d0d0d0; font-size: 70px; line-height: 70px; } .single-working-process-style2 .inner { position: relative; display: block; overflow: hidden; padding: 35px 40px 52px; width: 100%; } .single-working-process-style2 .inner h3 { color: #27282c; font-weight: 600; margin: 0 0 18px; } .single-working-process-style2 .inner p { margin: 0; } .working-process-carousel.owl-carousel .owl-nav { position: absolute; right: 0; top: -115px; margin: 0; display: block; } .working-process-carousel.owl-carousel .owl-nav [class*="owl-"] { position: relative; display: inline-block; background: transparent; width: 55px; height: 55px; border: 1px solid #dddddd; line-height: 54px; margin: 0; padding: 0; transition: all 700ms ease 100ms; border-radius: 50%; } .working-process-carousel.owl-carousel .owl-nav [class*="owl-"] i:before{ color: #ababab; font-size: 20px; font-weight: 400; } .working-process-carousel.owl-carousel .owl-nav .owl-next { margin-left: 10px; } .working-process-carousel.owl-carousel .owl-nav [class*="owl-"]:hover{ border-color: #ed2a28; } /*** ============================================= Testimonial Style2 area style ============================================= ***/ .testimonial-style2-area{ position: relative; display: block; padding: 110px 0 108px; } .testimonial-style2-area .sec-title{ padding-bottom: 40px; } .single-testimonial-style2 { position: relative; display: block; border: 1px solid transparent; transition: all 700ms ease 300ms; } .single-testimonial-style2 .inner-content{ position: relative; display: block; overflow: hidden; } .single-testimonial-style2 .static-content { position: relative; display: block; padding: 55px 40px 62px; transform: translateY(0%); transition: all 700ms ease 100ms; } .single-testimonial-style2:hover .static-content{ opacity: 0; transform: translateY(-10%); transition: all 900ms ease 100ms; } .single-testimonial-style2 .static-content .quote-icon{ position: relative; display: block; padding-bottom: 11px; } .single-testimonial-style2 .static-content .quote-icon span:before{ color: #ed2a28; font-size: 63px; line-height: 63px; } .single-testimonial-style2 .text-box{} .single-testimonial-style2 .text-box p{ margin: 0; } .single-testimonial-style2 .static-content .client-info{ position: relative; display: block; padding-top: 32px; } .single-testimonial-style2 .client-info .review-box{} .single-testimonial-style2 .client-info .review-box ul{} .single-testimonial-style2 .client-info .review-box ul li { float: none; margin: 0 1px; } .single-testimonial-style2 .client-info .review-box ul li i{} .single-testimonial-style2 .client-info h3{ color: #27282c; font-size: 18px; font-weight: 600; margin: 8px 0 0; } .single-testimonial-style2 .client-info { position: relative; display: block; } .single-testimonial-style2 .overlay-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ffffff; display: block; padding: 50px 40px 0; opacity: 0; transform: translateY(-10%); transition: all 700ms ease 100ms; } .single-testimonial-style2:hover .overlay-content{ opacity: 1; transform: translateY(0%); transition: all 900ms ease 100ms; } .single-testimonial-style2 .overlay-content .img-box{ position: relative; display: block; width: 80px; height: 80px; margin: 0 auto; } .single-testimonial-style2 .overlay-content .img-box img{ border-radius: 50%; } .single-testimonial-style2 .overlay-content .text-box { position: relative; display: block; padding: 10px 0 10px; margin: 14px 0 0; z-index: 2; } .single-testimonial-style2 .overlay-content .text-box .quote-icon{ position: absolute; top: -18px; left: 0; right: 0; z-index: -1; } .single-testimonial-style2 .overlay-content .text-box .quote-icon span:before{ color: #f6f6f6; font-size: 128px; line-height: 128px; } .single-testimonial-style2 .overlay-content .client-info { position: relative; display: block; padding-top: 22px; } .testimonial-style2-content{ overflow: hidden; } .testimonial-style2-content .owl-carousel{ display: block; max-width: 370px; width: 100%; margin: 0 auto; } .testimonial-style2-content .owl-carousel .owl-stage-outer{ overflow: visible; padding: 10px 0px 43px; } .testimonial-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2{ -webkit-box-shadow: 0px 2px 5px 4px #f6f6f6; box-shadow: 0px 2px 5px 4px #f6f6f6; transition: all 700ms ease 800ms; } .testimonial-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2 .static-content{ opacity: 0; transform: translateY(-10%); transition: all 900ms ease 300ms; } .testimonial-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2 .overlay-content{ opacity: 1; transform: translateY(0%); transition: all 900ms ease 300ms; } .testimonial-carousel .owl-dots { position: relative; display: block !important; margin-top: 0px !important; line-height: 14px; text-align: center; } .testimonial-carousel .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .testimonial-carousel .owl-dots .owl-dot span{ display:none; } .testimonial-carousel .owl-dots .owl-dot.active{ background: #ed2a28; border-color: #ed2a28; } /*** ============================================= Contact Details Area style ============================================= ***/ .contact-details-area{ position: relative; display: block; padding: 110px 0 0; z-index: 4; } .contact-details-area .sec-title { z-index: 3; } .contact-details-area .parallax-background{ position: absolute; top: 0; left: 0; width: 100%; min-height: 550px; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; z-index: 1; } .contact-details-content{ position: relative; display: block; background: #f6f6f6; z-index: 3; } .content-info-box{ position: relative; display: block; background-attachment: scroll; background-position: left top; background-repeat: no-repeat; background-size: auto; min-height: 650px; margin-right: 30px; } .content-info-box .inner-content { display: flex; flex-direction: column; align-items: flex-end; flex-wrap: wrap; padding: 70px 0 70px; } .content-info-box .inner-content .inner{ -webkit-box-shadow: 3px 0px 5px 0px #ededed; box-shadow: 3px 0px 5px 0px #ededed; } .content-info-box .inner-content .single-info-box{ max-width: 270px; width: 100%; background: #ed2a28; text-align: center; padding: 50px 30px 42px; } .content-info-box .inner-content .single-info-box .icon{ margin-bottom: 20px; } .content-info-box .inner-content .single-info-box .icon span:before{ color: #f6f6f6; font-size: 50px; line-height: 50px; } .content-info-box .inner-content .single-info-box .text{} .content-info-box .inner-content .single-info-box .text h3{ color: #f6f6f6; font-size: 18px; font-weight: 600; margin: 0 0 12px; } .content-info-box .inner-content .single-info-box .text p{ color: #f6f6f6; margin: 0; } .content-info-box .inner-content .single-info-box.white-bg{ background: #f4f4f4; } .content-info-box .inner-content .single-info-box.white-bg .icon span:before{ color: #ed2a28; } .content-info-box .inner-content .single-info-box.white-bg .text h3{ color: #27282c; } .content-info-box .inner-content .single-info-box.white-bg .text p{ color: #828282; } .contact-details-form-box { position: relative; display: block; padding: 65px 60px 0px; width: 100%; padding-left: 0; } .contact-details-form-box .title-box{ position: relative; display: block; padding-bottom: 42px; } .contact-details-form-box .title-box h2{ color: #27282c; font-size: 30px; line-height: 36px; font-weight: 600; } .contact-details-box{ position: relative; display: block; } .contact-details-form .single-box{ position: relative; display: block; } .contact-details-form input[type="text"], .contact-details-form input[type="email"], .contact-details-form textarea { position: relative; display: block; padding: 0 20px; border: 1px solid #e0e0e0; background: #f6f6f6; color: #7c7e84; font-size: 15px; font-weight: 400; width: 100%; height: 55px; margin-bottom: 30px; border-radius: 0px; transition: all 500ms ease; } .contact-details-form textarea { padding: 15px 20px; height: 120px; margin-top: 30px; margin-bottom: 50px; } .contact-details-form input[type="text"]:focus{ border-color: #ed2a28; } .contact-details-form input[type="email"]:focus{ border-color: #ed2a28; } .contact-details-form textarea:focus{ border-color: #ed2a28; } .contact-details-form .single-box button{ padding: 0 40px; } .contact-details-form input::-webkit-input-placeholder { color: #7c7e84; } .contact-details-form input:-moz-placeholder { color: #7c7e84; } .contact-details-form input::-moz-placeholder { color: #7c7e84; } .contact-details-form input:-ms-input-placeholder { color: #7c7e84; } .contact-details-form .single-box .bootstrap-select { position: relative; display: block; } .contact-details-form .single-box .bootstrap-select>.dropdown-toggle { position: relative; display: block; outline: none !important; border-radius: 0px; background-color: #f6f6f6; border: 1px solid #e0e0e0; height: 55px; line-height: 55px; padding: 0; padding-left: 20px; color: #7c7e84; margin: 0; box-shadow: none !important; } .contact-details-form .single-box .bootstrap-select>.dropdown-toggle::after { position: absolute; top: 50%; right: 20px; width: auto; height: auto; font-family: 'FontAwesome'; content: '\f107'; color: #7c7e84; font-size: 18px; transform: translateY(-50%); margin: 0; border: none; } .contact-details-form .single-box .bootstrap-select .dropdown-menu { position: static; margin: 0; padding: 0; border-radius: 0; border: 0px solid #ddd; background: #f9f9f9; font-size: 16px; color: #000000; } .contact-details-form .single-box .dropdown-item { display: block; width: 100%; padding: 9px 20px 9px; font-weight: 400; color: #222222; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; border-radius: 0; transition: all 500ms ease; } .contact-details-form .single-box .dropdown-item.active, .contact-details-form .single-box .dropdown-item:active { background: #ed2a28; color: #fff; } .contact-details-form .single-box .dropdown-item:hover { background: #ed2a28; color: #fff; } /*** ============================================= Latest Blog Area Style2 style ============================================= ***/ .latest-blog-area.style2{} .more-blog-button { position: relative; display: block; margin-top: 39px; } /*** ============================================= Instagram area style ============================================= ***/ .instagram-area { position: relative; display: block; background: #ed2a28; } .instagram-title { position: relative; display: block; margin-right: -30px; padding: 43px 0; z-index: 3; } .instagram-title .pattern-bg { position: absolute; top: 0; left: -500px; bottom: 0; right: 0; background: url(../images/pattern/instagram-title-bg.png); z-index: -1; background-repeat: no-repeat; } .instagram-title h3{ color: #ffffff; font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 17px; } .instagram-title a{ color: #ffffff; } .instagram-title a:hover{ color: #27282c; } .instagram-items { position: relative; display: block; margin-right: -375px; z-index: 3; } .instagram-items li{ position: relative; display: inline-block; float: left; } .instagram-items li .img-holder { position: relative; display: block; overflow: hidden; } .instagram-items li:hover .overlay-style-two{ opacity: 1; } .instagram-items li .img-holder .overlay-style-two:before { background-color: rgba(40, 41, 46, 0.95); } .instagram-items li:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .instagram-items li .img-holder .overlay-style-two:after { background-color: rgba(40, 41, 46, 0.95); } .instagram-items li:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .instagram-items li .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .instagram-items li:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .instagram-items li .img-holder .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; transform: translate3d(0px, -100%, 0px); transition: all 700ms ease 300ms; } .instagram-items li:hover .img-holder .overlay{ transition: all 700ms ease 500ms; transform: translate3d(0px, 0px, 0px); } .instagram-items li .img-holder .overlay .box{ display: table; width: 100%; height: 100%; } .instagram-items li .img-holder .overlay .box .link-icon{ display: table-cell; vertical-align: middle; text-align: center; } .instagram-items li .img-holder .overlay .box .link-icon a span:before{ display: inline-block; color: #ffffff; font-size: 30px; line-height: 30px; transition: all 500ms ease; } .instagram-items li .img-holder .overlay .box .link-icon a:hover span:before{ color: #ed2a28; } /*** ============================================= Footer Area Style2 style ============================================= ***/ .footer-area.style2 { padding: 110px 0 100px; z-index: 10; } .single-footer-widget .title-style2 { position: relative; display: block; margin-top: 38px; padding-bottom: 35px; } .single-footer-widget .title-style2 h3 { color: #ffffff; font-size: 24px; line-height: 30px; font-weight: 600; text-transform: capitalize; } .single-footer-widget .our-info-box{} .single-footer-widget .our-info-box .footer-logo{ position: relative; display: block; padding-bottom: 34px; } .single-footer-widget .our-info-box .footer-logo a{ display: inline-block; } .single-footer-widget .our-info-box .text{ position: relative; display: block; padding-bottom: 23px; } .single-footer-widget .our-info-box .text p{ color:#fff; margin: 0; } .single-footer-widget .our-info-box .follow-us-social-links{ position: relative; display: block; } .single-footer-widget .our-info-box .follow-us-social-links span{ position: relative; display: inline-block; padding-right: 6px; color: #ffffff; font-size: 15px; line-height: 30px; float: left; } .single-footer-widget .our-info-box .follow-us-social-links ul{ position: relative; display: inline-block; float: left; line-height: 30px; } .single-footer-widget .our-info-box .follow-us-social-links ul li{ position: relative; display: inline-block; float: left; padding-right: 11px; margin-right: 10px; } .single-footer-widget .our-info-box .follow-us-social-links ul li:before { position: absolute; top: 10px; right: 0; width: 1px; height: 11px; background: #404146; content: ""; transform: rotate(15deg); } .single-footer-widget .our-info-box .follow-us-social-links ul li:last-child{ padding-right: 0; margin-right: 0; } .single-footer-widget .our-info-box .follow-us-social-links ul li a{ color: #fff; font-size: 15px; transition: all 300ms ease 100ms; } .single-footer-widget .our-info-box .follow-us-social-links ul li a:hover{ color: #ed2a28; } .single-footer-widget .usefull-links { position: relative; display: block; overflow: hidden; margin-top: -12px; } .single-footer-widget .usefull-links ul { position: relative; display: block; overflow: hidden; } .single-footer-widget .usefull-links ul.marleft30{ margin-left: 30px; } .single-footer-widget .usefull-links ul.borders-left { position: relative; margin-left: 60px; padding-left: 30px; } .single-footer-widget .usefull-links ul li { position: relative; display: block; line-height: 36px; } .single-footer-widget .usefull-links ul li a{ color: #fff; font-size: 15px; font-weight: 400; padding-left: 20px; transition: all 500ms ease; } .single-footer-widget .usefull-links ul li a:hover{ color: #ed2a28; } .single-footer-widget .usefull-links ul li a:before { position: absolute; top: 0px; left: 0; content: "\f108"; font-family: "Flaticon"; color: #fff; font-size: 10px; transition: all 500ms ease; font-weight: 600; line-height: 36px; margin: 0px 0 0px; } .single-footer-widget .usefull-links ul li a:hover:before{ color: #ed2a28; content: "\f108"; transition: all 500ms ease; } .single-footer-widget .usefull-links ul.borders-left:before{ position: absolute; top: 12px; left: 0; bottom: 7px; width: 1px; background: #404043; content: ""; } .single-footer-widget .subscribe-box{ position: relative; display: block; } .single-footer-widget .subscribe-form { position: relative; display: block; max-width: 370px; width: 100%; } .single-footer-widget .subscribe-form input[type="email"]{ position: relative; display: block; background: #fff; border: 1px solid #fff; color: #62656f; font-size: 15px; font-weight: 400; width: 100%; height: 52px; margin-bottom: 0px; padding: 0 20px; transition: all 500ms ease; } .single-footer-widget .subscribe-form input::-webkit-input-placeholder { color: #62656f; } .single-footer-widget .subscribe-form input:-moz-placeholder { color: #62656f; } .single-footer-widget .subscribe-form input::-moz-placeholder { color: #62656f; } .single-footer-widget .subscribe-form input:-ms-input-placeholder { color: #62656f; } .single-footer-widget .subscribe-form button { margin-top: 20px; line-height: 40px; } .single-footer-widget .subscribe-form input[type="email"]:focus { border: 1px solid #ffffff; background: #ffffff; color: #222222; } .single-footer-widget .subscribe-form input[type="email"]:focus + button, .single-footer-widget .subscribe-form button:hover { background: #fff; color:#fff; } .single-footer-widget .subscribe-box .text{ position: relative; display: block; padding-top: 14px; } .single-footer-widget .subscribe-box .text p{ color: #ffff; font-size: 15px; margin: 0; } .single-footer-widget .subscribe-box .text p span{ color: #ed2a28; } /*** ============================================= Topbar Style3 Area style ============================================= ***/ .topbar-style3-area { position: relative; display: block; border-bottom: 1px solid #ededed; padding: 12px 0; } .topbar-style3-content { position: relative; display: flex; justify-content: space-between; flex-direction: row; align-items: center; flex-wrap: wrap; } .topbar-style3-left{ position: relative; display: block; } .topbar-style3-left ul{} .topbar-style3-left ul li{ display: inline-block; float: left; margin-right: 30px; line-height: 28px; } .topbar-style3-left ul li:last-child{ margin-right: 0; } .topbar-style3-left ul li a{ color: #7c7e84; font-size: 15px; font-weight: 400; transition: all 500ms ease; } .topbar-style3-left ul li a:hover{ color: #ed2a28; } .topbar-style3-right { position: relative; display: block; max-width: 270px; width: 100%; } .topbar-style3-right ul { position: relative; display: block; overflow: hidden; float: left; border-right: 1px solid #dadada; padding-right: 20px; } .topbar-style3-right ul li{ position: relative; display: inline-block; float: left; margin-right: 20px; line-height: 28px; } .topbar-style3-right ul li:last-child{ margin-right: 0; } .topbar-style3-right ul li a{ color: #7c7e84; font-size: 14px; font-weight: 400; } .topbar-style3-right ul li a:hover{ color: #ed2a28; } /*** ============================================= Header Style3 Area style ============================================= ***/ .header-style3-area{ position: relative; display: block; } .header-style3-content{ position: relative; display: block; overflow: hidden; } .logo-box-style3 { position: relative; display: block; margin: 30px 0; } .logo-box-style3 a{ display: inline-block; } .header-contact-info.style2 { position: relative; display: block; padding-left: 90px; border-left: none; margin: 27px 0 28px; } .header-contact-info.style2 li:last-child { margin-right: 0; padding-right: 0; border: none; } .header-call-button { position: relative; display: block; width: 270px; background: #ed2a28; text-align: right; padding: 30px 30px 30px; z-index: 1; } .header-call-button:before{ position: absolute; left: 30px; bottom: 0; right: 30px; height: 1px; background: #ea5f68; content: ""; } .header-call-button .inner{ position: relative; display: block; padding-right: 60px; } .header-call-button .inner .icon { position: absolute; top: 0; right: 0; transform: rotateY(180deg); } .header-call-button .inner .icon span:before { color: #ffffff; font-size: 40px; line-height: 50px; } .header-call-button .inner .title{ position: relative; display: block; } .header-call-button .inner .title span{ color: #ffffff; font-size: 15px; font-weight: 400; } .header-call-button .inner .title h3{ color: #ffffff; font-size: 18px; line-height: 22px; font-weight: 500; margin: 3px 0 0; font-family: 'Rubik', sans-serif; } /*** ============================================= Mainmenu Style3 Area style ============================================= ***/ .mainmenu-style3-area{ position: relative; display: block; background: #27282c; } .mainmenu-style3-area.stricky-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999999; background: #27282C; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.10); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.10); -ms-box-shadow: 0 0 15px rgba(0,0,0,0.10); -o-box-shadow: 0 0 15px rgba(0,0,0,0.10); box-shadow: 0 0 15px rgba(0,0,0,0.10); } .main-menu.style3 { position: relative; display: inline-block; border-left: 1px solid #1a1b1f; } .main-menu.style3 .navigation > li { position: relative; display: inline-block; float: left; margin-right: 0; border-left: 1px solid #3d3e42; border-right: 1px solid #1a1b1f; } .main-menu.style3 .navigation > li:last-child{ border-right: none; } .main-menu.style3 .navigation > li > a { color: #ffffff; padding: 30px 35px 26px; } .main-menu.style3 .navigation > li:last-child > a{ padding-right: 0; } .main-menu.style3 .navigation > li:hover > a, .main-menu.style3 .navigation > li.current > a { color: #ed2a28; } .mainmenu-right.style3 { position: relative; display: inline-block; float: right; margin: 0; } .mainmenu-right.style3 .button a { line-height: 70px; width: 270px; padding: 0; text-align: center; } .mainmenu-right.style3 .button a:hover{ background: #232427; } /*** ============================================= Featured Area style ============================================= ***/ .featured-area { position: relative; display: block; margin-top: -160px; z-index: 10; background: transparent; padding: 0px 0 85px; } .single-featured-box{ position: relative; display: block; padding-top: 50px; max-width: 370px; width: 100%; margin: -50px auto; overflow: hidden; } .single-featured-box .inner{ position: relative; display: block; background: #ed2a28; transition: all 300ms ease 100ms; } .single-featured-box .inner .img-holder { position: relative; display: block; width: 255px; height: 270px; float: right; } .single-featured-box .inner .static-content { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; padding-top: 125px; padding-left: 30px; opacity: 1; visibility: visible; z-index: 1; transform: translateY(0px); transition: all 500ms ease 100ms; } .single-featured-box:hover .inner .static-content{ opacity: 0; visibility: hidden; transform: translateY(50%); transition: all 900ms ease 100ms; } .single-featured-box .icon{ position: relative; display: block; padding-bottom: 19px; } .single-featured-box .icon span:before{ color: #ffffff; font-size: 60px; line-height: 60px; } .single-featured-box .title{ position: relative; display: block; } .single-featured-box .title h3{ color: #ffffff; font-weight: 600; } .single-featured-box .inner .overlay-content { position: absolute; top: -50px; left: 0; bottom: 0; right: 0; display: block; padding-top: 50px; padding-left: 30px; padding-right: 30px; z-index: 3; background: #27282c; transition: all 300ms ease 100ms; opacity: 0; visibility: hidden; transform: translateY(100%); transition: all 500ms ease 100ms; } .single-featured-box:hover .inner .overlay-content{ opacity: 1; visibility: visible; transform: translateY(0%); transition: all 900ms ease 100ms; } .single-featured-box .inner .overlay-content .icon span:before{ color: #ed2a28; } .single-featured-box .inner .overlay-content .text{ position: relative; display: block; padding-top: 18px; padding-bottom: 0px; } .single-featured-box .inner .overlay-content .text p{ color: #ffffff; margin: 0 0 26px; } .single-featured-box .inner .overlay-content .text a{ color: #ffffff; } .single-featured-box .overlay-content .overlay-image{ position: absolute; bottom: 0; right: 0; width: 255px; height: 00px; opacity: 0; transform: scale(0.5); transition: all 500ms ease 100ms; } .single-featured-box:hover .overlay-content .overlay-image{ opacity: 1; height: 270px; transform: scale(1.0); transition: all 900ms ease 500ms; } .about-style3-content{ position: relative; display: block; padding-top: 110px; padding-bottom: 110px; } .about-style3-content .sec-title{ padding-bottom: 40px; margin: 0; } .about-style3-content .sec-title p { margin: 15px 0 27px; } .about-style3-content .button{} .about-style3-content .button a{ padding: 0 40px; margin: 0 13px; } .about-style3-content .button a.black{ background: #27282c; } .about-style3-bg { position: absolute; left: 0; top: -60px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; opacity: 1; } @-webkit-keyframes banner-animate { 0% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } } @keyframes banner-animate { 0% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } } .banner-animate { animation-name: banner-animate; animation-duration: 70s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: banner-animate; -webkit-animation-duration: 70s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: banner-animate; -moz-animation-duration: 70s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: banner-animate; -ms-animation-duration: 70s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: banner-animate; -o-animation-duration: 70s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } /*** ============================================= Services Style2 Area style ============================================= ***/ .services-style2-area { position: relative; display: block; background: #f6f6f6; padding: 110px 0 108px; z-index: 1; } .services-style2-area:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 407px; background: #ffffff; content: ""; z-index: -1; } .single-service-style2 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-service-style2 .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-service-style2:hover .img-holder img { transform: scale(1.2); } .single-service-style2:hover .overlay-style-two{ opacity: 1; } .single-service-style2 .img-holder .overlay-style-two:before{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style2:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .single-service-style2 .img-holder .overlay-style-two:after{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style2:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .single-service-style2 .text-holder{ position: relative; display: block; background: transparent; z-index: 10; } .single-service-style2 .text-holder .icon-holder { position: relative; display: block; width: 110px; height: 110px; border-radius: 50%; margin: -55px auto 0; border: 4px dotted #c9c9c9; background: #ffffff; text-align: center; z-index: 2; } .single-service-style2 .text-holder .icon-holder span:before { display: block; color: #b3b3b3; font-size: 50px; line-height: 102px; } .single-service-style2 .text-holder .inner{ position: relative; display: block; padding: 26px 0px 0px; text-align: center; background: #ffffff; z-index: 1; } .single-service-style2 .text-holder .inner:before { position: absolute; top: -55px; left: 0; bottom: 0; right: 0; background: #ffffff; content: ""; z-index: -1; } .single-service-style2 .text-holder .inner h3{ color: #27282c; font-weight: 600; margin: 0 0 18px; } .single-service-style2 .text-holder .inner .text { position: relative; display: block; padding: 0 30px 32px; } .single-service-style2 .text-holder .inner .text p{ margin: 0; } .single-service-style2 .text-holder .inner .read-more a{ color: #27282c; background: #f6f6f6; display: block; } .services-style2-content{ overflow: hidden; } .services-style2-content .owl-carousel{ display: block; max-width: 370px; width: 100%; margin: 0 auto; } .services-style2-content .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 43px; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .overlay-style-two{ opacity: 1; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 500ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-service-style2 .text-holder .icon-holder { border: 4px dotted #ed2a28; transition: all 700ms ease 700ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-service-style2 .text-holder .icon-holder span:before { color: #ed2a28; transition: all 700ms ease 800ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-service-style2 .text-holder .inner .read-more a{ color: #ffffff; background: #ed2a28; transition: all 700ms ease 900ms; } .services-carousel .owl-dots { position: relative; display: block !important; margin-top: 0px !important; line-height: 14px; } .services-carousel .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .services-carousel .owl-dots .owl-dot span{ display:none; } .services-carousel .owl-dots .owl-dot.active{ background: #ed2a28; border-color: #ed2a28; } /*** ============================================= Latest Projects Area style ============================================= ***/ .latest-projects-area{ position: relative; display: block; background: #27282c; width: 100%; padding: 110px 60px 104px; } .latest-projects-v3{ padding: 0; } .single-project-style3 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 10; } .single-project-style3 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style3:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style3 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.70); transform: scaleX(0); border: 4px solid #ed2a28; transition: all 700ms ease 100ms; z-index: 3; } .single-project-style3:hover .overlay-content{ transform: scaleY(1); } .single-project-style3 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style3 .overlay-content .inner-content .links-icons{ display: table-cell; vertical-align: middle; text-align: center; transform: scale(0); transition: all 700ms ease 500ms; } .single-project-style3:hover .overlay-content .inner-content .links-icons{ transform: scale(1.0); } .single-project-style3 .overlay-content .inner-content .links-icons a span:before{ position: relative; display: block; width: 35px; height: 35px; margin: 0 auto; color: #ffffff; font-size: 35px; line-height: 35px; font-weight: 400; transition: all 500ms ease; } .single-project-style3 .overlay-content .inner-content .links-icons a:hover span:before{ color: #ed2a28; } .single-project-style3 .title-holder{ position: relative; display: block; padding-top: 24px; } .single-project-style3 .title-holder span{ color: #7c7e84; } .single-project-style3 .title-holder h3{ color: #ffffff; font-weight: 600; margin: 3px 0 0; } .project-carousel-v3.owl-carousel .owl-nav { position: absolute; top: -115px; display: block; left: 0; right: 0; max-width: 1170px; width: 100%; margin: 0 auto; } .project-carousel-v3.owl-carousel .owl-nav [class*="owl-"] { position: absolute; right: 0; display: inline-block; background: transparent; width: 55px; height: 55px; border: 1px solid #3f3f42; line-height: 54px; margin: 0; padding: 0; transition: all 700ms ease 100ms; border-radius: 50%; } .project-carousel-v3.owl-carousel .owl-nav .owl-prev { right: 65px; } .project-carousel-v3.owl-carousel .owl-nav [class*="owl-"] i:before{ color: #5e5e5e; font-size: 20px; font-weight: 400; } .project-carousel-v3.owl-carousel .owl-nav .owl-next { margin-left: 10px; } .project-carousel-v3.owl-carousel .owl-nav [class*="owl-"]:hover{ border-color: #ed2a28; } /*** ============================================= Team Area style ============================================= ***/ .team-area { position: relative; display: block; padding-top: 40px; padding-bottom: 40px; } /*** ============================================= brand style ============================================= ***/ .brand-style3{ padding-top: 30px; } .single-brand-item.style3{ max-width: 170px; width: 100%; float: left; margin-right: 30px; } .single-brand-item.style3 a { display: block; background: transparent; text-align: center; transition: all 700ms ease 200ms; } .single-brand-item.style3:last-child{ margin-right: 0; } .single-brand-item.style3 a:hover{ box-shadow: none; } /*** ============================================= Latest Blog Area Style3 style ============================================= ***/ .latest-blog-area.style3{ padding-top: 110px; padding-bottom: 70px; } .single-blog-post.style2{ margin-bottom: 40px; -webkit-box-shadow: 0px 3px 9px 2px #ebebeb; box-shadow: 0px 3px 9px 2px #ebebeb; } .single-blog-post.style2 .text-holder{ padding: 25px 30px 20px; } .single-blog-post.style2 .meta-box { min-height: 30px; margin-top: 16px; margin-bottom: 0px; } .single-blog-post.style2 .img-holder{ z-index: 1; } .single-blog-post.style2 .img-holder:before{ position: absolute; left: 0; bottom: 0; right: 0; height: 40%; content: ""; transition: all 300ms ease 100ms; z-index: 2; background: rgb(39,40,44); background: linear-gradient(180deg, rgba(39,40,44,0) 40%, rgba(39,40,44,0.8407738095238095) 78%, rgba(39,40,44,1) 94%, rgba(39,40,44,1) 100%, rgba(39,40,44,1) 100%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%); } .single-blog-post.style2 .overlay-title{ position: absolute; left: 30px; bottom: 23px; right: 30px; z-index: 3; } .single-blog-post.style2 .overlay-title .blog-title{ position: relative; display: block; font-size: 20px; line-height: 28px; font-weight: 600; } .single-blog-post.style2 .overlay-title .blog-title a{ color: #ffffff; transition: all 500ms ease; } .single-blog-post.style2 .overlay-title .blog-title a:hover{ color: #ed2a28; } /*** ============================================= Home Google Map Area style ============================================= ***/ .home-google-map-area{ position: relative; display: block; } .home-google-map-area .container-fluid{ padding: 0; } #home-google-map { height: 550px; width: 100%; } /*** ============================================= Footer Area style3 style ============================================= ***/ .footer-area.style3 { padding: 110px 0 100px; } .single-footer-widget .our-info-box.style2 .text{ padding: 0; } .single-footer-widget .our-info-box .more-info-about-company { color: #ffffff; margin-top: 26px; display: inline-block; } .single-footer-widget .work-gallery { position: relative; display: block; overflow: hidden; margin-left: -7.5px; margin-right: -7.5px; } .single-footer-widget .work-gallery li { position: relative; display: inline-block; float: left; margin: 0 7.5px 15px; } .single-footer-widget .work-gallery li .img-holder { position: relative; display: block; overflow: hidden; } .single-footer-widget .work-gallery li .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; transform: scale(1.1, 1.1); } .single-footer-widget .work-gallery li:hover .img-holder img{ transform: scale(1.2, 1.2); } .single-footer-widget .work-gallery li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-footer-widget .work-gallery li .img-holder .overlay-style-one .content a i{ color: #ffffff; font-size: 18px; filter: alpha(opacity=0); opacity: 0; transform: scale(3); transition: all 0.3s ease-in-out 0.3s; } .single-footer-widget .work-gallery li:hover .img-holder .overlay-style-one .content a i{ filter: alpha(opacity=100); opacity: 1; transform: scale(1); transition-delay: 0.1s; } .single-footer-widget .work-gallery li .img-holder .overlay-style-one .content a:hover i{ color: #222222; } /*** ============================================= Footer Bottom Area Style2 Style ============================================= ***/ .footer-bottom-area.style2 { background: #1f1f23; } .footer-social-links.clr-white span{ color: #ffffff; } /*** ============================================= Breadcrumb area style ============================================= ***/ .breadcrumb-area { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 0px 0 0px; z-index: 10; } .breadcrumb-area::before { background: #000 none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.1; position: absolute; top: 0; width: 100%; } .breadcrumb-area .inner-content { position: relative; display: block; padding: 360px 0 0; bottom:80px; } .breadcrumb-area .title { position: relative; display: block; padding-top: 24px; padding-bottom: 47px; } .breadcrumb-area .title:before{ position: absolute; top: 0; left: 0; background: #ffffff; content: ""; } .breadcrumb-area .title h1{ color: #ffffff; font-size: 55px; line-height: 60px; font-weight: 700; text-transform: capitalize; margin: 0; text-align: center; } .breadcrumb-area .breadcrumb-menu { position: relative; display: inline-block; line-height: 10px; top:55px; } .breadcrumb-area .breadcrumb-menu ul { position: relative; display: inline-block; line-height: 30px; padding-bottom: 20px; } .breadcrumb-area .breadcrumb-menu ul li { position: relative; display: inline-block; float: left; color: #ffffff; font-size: 15px; line-height: 30px; font-weight: 400; text-transform: capitalize; transition: all 500ms ease; margin-right: 6px; padding-right: 6px; } .breadcrumb-area .breadcrumb-menu ul li:before { position: absolute; top: 0; bottom: 0; right: 0px; width: 7px; height: 2px; background: url(../images/icon/arrow.png); content: ""; margin: 14px 0; } .breadcrumb-area .breadcrumb-menu ul li:last-child:before{ display: none; } .breadcrumb-area .breadcrumb-menu ul li:last-child{ margin-right: 0; padding-right: 0; } .breadcrumb-area .breadcrumb-menu ul li a{ color: #ed2a28; font-size: 17px; font-weight: 500; text-transform: capitalize; transition: all 500ms ease; } .breadcrumb-area .breadcrumb-menu ul li.active{ font-size: 17px; font-weight: 500; } .breadcrumb-area .breadcrumb-menu ul li a:hover{ color: #ed2a28; } /*** ============================================= Breadcrumb Area style2 Style ============================================= ***/ .breadcrumb-area.style2{} .breadcrumb-area .inner-content-box .title-s2 { position: relative; display: block; padding: 143px 0 86px; } .breadcrumb-area .inner-content-box .title-s2 span{ color: #ed2a28; font-size: 14px; line-height: 18px; font-weight: 600; text-transform: uppercase; font-family: 'Poppins', sans-serif; } .breadcrumb-area .inner-content-box .title-s2 h1{ color: #ffffff; font-size: 48px; line-height: 62px; font-weight: 700; margin: 14px 0 0; text-transform: capitalize; } /*** ============================================= Company Overview Area Style ============================================= ***/ .company-overview-area{ position: relative; display: block; padding: 105px 0 116px; z-index: 1; } .company-overview-area:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 580px; background: #f6f6f6; content: ""; z-index: -1; } .intro-box { position: relative; display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 70px; } .intro-box .sec-title{ position: relative; display: block; max-width: 530px; width: 100%; margin: 0; padding: 0; } .intro-box .text{ position: relative; display: block; max-width: 640px; width: 100%; } .intro-box .text p{ margin: 0; } /*** ============================================= team Area Style ============================================= ***/ .view-all-member.style2 { margin: 0px 0 0; } .view-all-member.style2 a{ line-height: 24px; } /*** ============================================= Footer Area Style4 Style ============================================= ***/ .footer-area.style4 { padding: 65px 0 115px; z-index: 10; } /*** ============================================= Footer Contact Info Area Style ============================================= ***/ .footer-contact-info-area { position: relative; display: block; background: transparent; margin: -82px 0 -60px; z-index: 100; } .footer-contact-info{ position: relative; display: block; background: #ffffff; } li .footer-contact-info{} li .single-footer-contact-info { position: relative; display: inline-block; float: left; width:480px; border-right: 1px solid #ededed; } li:last-child .single-footer-contact-info { border-right: 0px solid; } li .single-footer-contact-info .inner { position: relative; display: block; padding: 30px 30px 30px; } li .single-footer-contact-info .icon{ width: 60px; } li .single-footer-contact-info .icon span:before{ color: #2f3033; font-size: 50px; transition: all 500ms ease; } li .single-footer-contact-info:hover .icon span:before{ color: #ed2a28; } li .single-footer-contact-info .icon, li .single-footer-contact-info .text{ display: table-cell; vertical-align: middle; } li .single-footer-contact-info .text p{ color: #27282c; margin: 0; } li .single-footer-contact-info .text p span{ color: #27282c; } /*** ============================================= Footer bottom Area Style3 Style ============================================= ***/ .footer-bottom-area.style3 { position: relative; display: block; z-index: 10; background-color: #2791d8; padding-top: 55px; padding-right: 0; padding-bottom: 28px; padding-left: 0; } /*** ============================================= Error Page Area Style ============================================= ***/ .error-page-area{ position: relative; display: block; background: #f6f6f6; padding: 145px 0 150px; } .error-content{ position: relative; display: block; z-index: 3; } .error-content span{ color: #828282; font-size: 14px; font-weight: 700; text-transform: uppercase; } .error-content .title{ position: relative; display: block; color: #ed2a28; font-size: 180px; line-height: 150px; font-weight: 700; text-transform: uppercase; margin: 13px 0 14px; } .error-content p{ font-size: 18px; line-height: 28px; margin: 0 0 32px; } .error-content .button{} .error-content .button a { width: 270px; } .demo{ background: #6c6a6a; } .testimonial .pic{ width: 22%; padding: 20px 0; margin: 0 6% 0 2%; float: left; position: relative; z-index: 1; } .testimonial .pic:before, .testimonial .pic:after{ content: ""; width: 130px; height: 150px; background: #ed2a28; position: absolute; z-index: -1; } .testimonial .pic:before{ top: 0; right: -20px; } .testimonial .pic:after{ bottom: 0; left: -20px; } .testimonial .pic img{ width: 100%; height: auto; border: 3px solid #ed2a28; } .testimonial .testimonial-content{ width: 70%; float: right; } .testimonial .title1{ display: block; font-size: 18px; font-weight: 600; color: #ed2a28; margin: 0; text-transform: uppercase; padding-top: 65px; padding-left: 15px; } .testimonial .post{ display: block; font-size: 14px; font-weight: 400; line-height: 27px; color: #323232; text-transform: capitalize; margin-bottom: 25px; padding-left: 15px; } .testimonial .description{ font-size: 16px; color: #323232; padding: 0 15px; margin: 0; position: relative; } .testimonial .description:before, .testimonial .description:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 17px; color: #ed2a28; position: relative; } .testimonial .description:before{ content: "\f10d"; margin-right: 5px; top: 0; left: 0; } .testimonial .description:after{ content: "\f10e"; margin-left: 5px; position: relative; bottom: 0; right: 0; } .owl-theme .owl-controls{ width: 70%; margin: 0; text-align: left; position: absolute; bottom: 0; right: 0; } .owl-theme .owl-controls .owl-buttons div{ width: 70px; height: 90px; line-height: 90px; background: transparent; border-radius: 0; opacity: 1; position: relative; } .owl-prev:before, .owl-next:before{ font-family: "fontawesome"; font-size: 45px; font-weight: 900; color: #ddd; position: absolute; top: 0; left: 25%; } @media only screen and (max-width: 990px){ .testimonial{ text-align: center; } .testimonial .pic{ width: 200px; margin: 0 auto; float: none; } .testimonial .pic:before, .testimonial .pic:after{ width: 80px; height: 100px; } .testimonial .testimonial-content{ width: 100%; float: none; } .testimonial .title1{ padding: 15px 0 0 0; } .testimonial .post{ padding: 0; margin-bottom: 10px; } .owl-theme .owl-controls{ width: 100%; position: static; text-align: center; } .owl-theme .owl-controls .owl-buttons div{ height: 50px; line-height: 50px; } } /*** ============================================= Services Style2 Service Page Style ============================================= ***/ .services-style2-service-page{ position: relative; display: block; padding-top: 85px; padding-bottom: 85px; } .services-style2-service-page .sec-title{ position: relative; display: block; } .services-style2-service-page .text { position: relative; display: block; margin-top: 10px; } .services-style2-service-page .text p{ font-size: 17px; line-height: 27px; margin: 0; } .single-service-style2{ margin-bottom: 40px; } .single-service-style2:hover .text-holder .icon-holder { border: 4px dotted #ed2a28; transition: all 700ms ease 700ms; } .single-service-style2:hover .text-holder .icon-holder span:before { color: #ed2a28; transition: all 700ms ease 800ms; } .single-service-style2:hover .text-holder .inner .read-more a{ color: #ffffff; background: #ed2a28; transition: all 700ms ease 900ms; } /*** ============================================= Services Style1 Service Page Style ============================================= ***/ .services-style1-service-page{ position: relative; display: block; background: #f6f6f6; padding: 110px 0 60px; } .single-service-style1 .text-holder.bg-white { position: relative; display: block; border: 1px solid #ededed; padding: 35px 30px 28px; background: #ffffff; } .single-service-style1 .text-holder.bg-white .overlay-content .read-more a span:before { position: absolute; left: auto; right: 30px; transform: scale(0); transition: all 300ms ease 100ms; } .single-service-style1:hover .text-holder.bg-white .overlay-content .read-more a span:before{ transform: scale(1.0); transition: all 900ms ease 900ms; } /*** ============================================= Single Service Area style ============================================= ***/ .single-service-area{ position: relative; display: block; padding: 110px 0 110px; } .single-service-top { position: relative; display: block; } .single-service-image-box{ position: relative; display: block; } .single-service-image-box img{ width: 100%; } .single-service-top .text { position: relative; display: block; padding-top: 41px; padding-bottom: 26px; } .single-service-top .text h2{ color: #27282c; font-size: 30px; line-height: 40px; font-weight: 700; text-transform: uppercase; } .single-service-top .text .inner{ position: relative; display: block; padding-top: 14px; } .advantages-content{ position: relative; display: block; } .single-advantages-box{ position: relative; display: block; border: 1px solid #ededed; text-align: center; transition: all 700ms ease 500ms; } .single-advantages-box:hover{ -webkit-box-shadow: 0px 4px 13px 0px #D4D4D4; box-shadow: 0px 4px 13px 0px #D4D4D4; } .single-advantages-box .inner { position: relative; display: block; padding: 29px 0 23px; overflow: hidden; } .single-advantages-box .static-content{ position: relative; display: block; -webkit-transform: translateY(0%); transform: translateY(0%); transition: all 700ms ease 200ms; } .single-advantages-box:hover .static-content{ opacity: 0; transform: translateY(-40%); transition: all 700ms ease 200ms; } .single-advantages-box .icon-holder{ position: relative; display: block; padding-bottom: 26px; } .single-advantages-box .icon-holder span:before{ color: #ed2a28; font-size: 65px; line-height: 65px; } .single-advantages-box .title{ position: relative; display: block; } .single-advantages-box .title h3{ color: #27282c; font-size: 18px; line-height: 24px; font-weight: 600; } .single-advantages-box .overlay-text{ position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: #ed2a28; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: all 700ms ease 200ms; } .single-advantages-box:hover .overlay-text{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition: all 700ms ease 200ms; } .single-advantages-box .overlay-text .box{ display: table; width: 100%; height: 100%; } .single-advantages-box .overlay-text .box .inner-text{ display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } .single-advantages-box .overlay-text .box .inner-text p{ color: #ffffff; margin: 0; } .how-work-box{ position: relative; display: block; padding-top: 80px; } .how-work-box .image-box{ position: relative; display: block; } .how-work-box .image-box img{ width: 100%; } .how-work-box .how-works-content{ position: relative; display: block; } .how-work-box .how-works-content h2{ color: #27282c; font-size: 24px; font-weight: 700; margin-top: -5px; text-transform: uppercase; } .how-work-box .how-works-content ul{ position: relative; display: block; overflow: hidden; padding-top: 28px; } .how-work-box .how-works-content ul li{ position: relative; display: block; padding-left: 20px; margin-bottom: 26px; } .how-work-box .how-works-content ul li:last-child{ margin-bottom: 0; } .how-work-box .how-works-content ul li .icon { position: absolute; top: 6px; left: 1px; } .how-work-box .how-works-content ul li .icon span:before{ color: #ed2a28; font-size: 20px; } .how-work-box .how-works-content ul li .text{ position: relative; display: block; padding-left: 20px; } .how-work-box .how-works-content ul li .text span{ color: #ed2a28; font-size: 14px; font-weight: 600; text-transform: uppercase; } .how-work-box .how-works-content ul li .text h3{ color: #27282c; font-size: 20px; line-height: 28px; font-weight: 600; margin: 2px 0 12px; } .how-work-box .how-works-content ul li .text p{ margin: 0; } .concept-design-pricing-box { position: relative; display: block; padding-top: 64px; } .concept-design-pricing-box .title{ display: block; padding-bottom: 32px; } .concept-design-pricing-box .title h2{ color: #27282c; font-size: 24px; line-height: 32px; font-weight: 700; text-transform: uppercase; } .concept-design-pricing-box .inner-content{ position: relative; display: block; } .single-pricing-box{ position: relative; display: block; max-width: 370px; width: 100%; margin: 0 auto 30px; } .single-pricing-box .inner{ position: relative; display: block; overflow: hidden; } .single-pricing-box .inner .img-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .single-pricing-box .inner .img-box:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(40, 41, 46, 0.95); z-index: 1; } .single-pricing-box .inner .img-box img{ width: 100%; height: 100%; } .single-pricing-box .static-content{ position: relative; display: block; overflow: hidden; z-index: 3; opacity: 1; transform: translateX(0%) translateY(0%) scale(1.0); transition: all 700ms ease 100ms; } .single-pricing-box:hover .static-content{ opacity: 0; transform: translateX(0%) translateY(70%) scale(0.5); transition: all 900ms ease 100ms; } .single-pricing-box .static-content .table-header { position: relative; display: block; padding-top: 46px; } .single-pricing-box .static-content .table-header .top { position: relative; display: block; padding-bottom: 25px; } .single-pricing-box .static-content .table-header .top h3{ color: #ffffff; font-size: 20px; font-weight: 600; margin: 0 0 3px; } .single-pricing-box .static-content .table-header .top span{ color: #ffffff; } .single-pricing-box .static-content .table-header .top span b{ color: #ed2a28; } .single-pricing-box .static-content .table-header .package { position: relative; display: block; } .single-pricing-box .static-content .table-header .package h1 { color: #ed2a28; font-size: 60px; line-height: 50px; font-weight: 500; font-family: 'Rubik', sans-serif; } .single-pricing-box .static-content .table-header .package span { position: relative; top: -17px; display: inline-block; font-size: 32px; line-height: 32px; padding-right: 2px; } .single-pricing-box .static-content .table-header .package p{ color: #ffffff; font-size: 14px; font-weight: 600; text-transform: uppercase; margin: 8px 0 0; font-family: 'Poppins', sans-serif; } .single-pricing-box .static-content .button{ position: relative; display: block; padding-top: 32px; padding-bottom: 50px; } .single-pricing-box .static-content .button a{} .single-pricing-box .inner .overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: block; z-index: 10; padding: 40px 40px 0px; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateY(90deg) translateX(-1200px); transition: all 700ms ease 100ms; } .single-pricing-box:hover .inner .overlay-content{ opacity: 1; transform: perspective(1200px) rotateY(0deg) translateX(0px); transition: all 900ms ease 100ms; } .single-pricing-box .overlay-content ul { position: relative; display: block; padding-bottom: 33px; } .single-pricing-box .overlay-content ul li{ position: relative; display: block; color: #ffffff; line-height: 42px; padding-left: 30px; } .single-pricing-box .overlay-content ul li:before{ position: absolute; top: 0; left: 0; font-family: FontAwesome; content: "\f058"; color: #b3b9c8; font-size: 16px; } .single-pricing-box .overlay-content a{ color: #ffffff; } .additional-information-box { position: relative; display: block; padding-top: 43px; } .additional-information-box .title{ display: block; padding-bottom: 32px; } .additional-information-box .title h2{ color: #27282c; font-size: 24px; line-height: 32px; font-weight: 700; text-transform: uppercase; } .additional-information-box .additional-info-content-box { position: relative; display: block; background: #f6f6f6; padding: 40px 30px 20px; } .additional-info-content-box .accordion-box .accordion .accord-btn h4{ font-size: 17px; } .single-service-sidebar { position: relative; display: block; max-width: 340px; width: 100%; z-index: 1; } .single-service-sidebar:before { position: absolute; top: -300px; right: -30px; bottom: -5000px; width: 1px; background: #ededed; content: ""; z-index: -1; } .single-service-sidebar .single-sidebar{ position: relative; display: block; margin-bottom: 50px; } .single-service-sidebar .service-pages{ position: relative; display: block; border: 1px solid #ededed; border-bottom: none; } .single-service-sidebar .service-pages li{ position: relative; display: block; height: 64px; border-bottom: 1px solid #ededed; transition: all 500ms ease; z-index: 5; } .single-service-sidebar .service-pages li.active, .single-service-sidebar .service-pages li:hover{ -webkit-box-shadow: 0px 4px 7px 0px #ededed; box-shadow: 0px 4px 7px 0px #ededed; } .single-service-sidebar .service-pages li:before { position: absolute; top: 20px; left: -1px; bottom: 20px; width: 3px; background: #ed2a28; content: ""; z-index: 3; opacity: 0; transition: all 700ms ease 300ms; transform: translateX(0%) translateY(0%) scaleY(0.1); } .single-service-sidebar .service-pages li.active:before, .single-service-sidebar .service-pages li:hover:before{ opacity: 1; transform: translateX(0%) translateY(0%) scaleY(1.0); transition: all 700ms ease 100ms; } .single-service-sidebar .service-pages li a { position: relative; display: block; padding-left: 30px; color: #27282c; font-size: 15px; font-weight: 600; text-transform: capitalize; transition: all 500ms ease; font-family: 'Poppins', sans-serif; } .single-service-sidebar .service-pages li a .title{ position: relative; display: block; z-index: 1; } .single-service-sidebar .service-pages li a .title .overlay-title { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; } .single-service-sidebar .service-pages li a .title .overlay-title h3 { color: #ed2a28; font-size: 20px; line-height: 63px; transform: scale(0.5); opacity: 0; transition: all 300ms ease 100ms; } .single-service-sidebar .service-pages li a .title h3.static { font-size: 15px; transform: scale(1.0); line-height: 63px; transition: all 300ms ease 100ms; } .single-service-sidebar .service-pages li.active a .title .overlay-title h3, .single-service-sidebar .service-pages li:hover a .title .overlay-title h3 { opacity: 1; transform: scale(1.0); } .single-service-sidebar .service-pages li.active a .title h3.static, .single-service-sidebar .service-pages li:hover a .title h3.static{ opacity: 0; } .sidebar-contact-box{ position: relative; display: block; padding-bottom: 50px; } .sidebar-contact-box .inner-content{ position: relative; display: block; padding: 48px 40px 50px; background: #27282c; z-index: 1; } .sidebar-contact-box .inner-content .icon-holder{ position: relative; display: block; padding-bottom: 22px; } .sidebar-contact-box .inner-content .icon-holder span:before{ color: #ed2a28; font-size: 65px; line-height: 65px; } .sidebar-contact-box .inner-content h3{ color: #ffffff; font-size: 20px; line-height: 30px; font-weight: 600; margin: 0 0 22px; } .sidebar-contact-box .inner-content .bottom-box{ position: relative; display: block; border-top: 1px solid #404043; padding-top: 25px; } .sidebar-contact-box .inner-content .bottom-box h2{ color: #ffffff; font-size: 24px; font-weight: 400; margin: 0 0 3px; font-family: 'Rubik', sans-serif; } .sidebar-contact-box .inner-content .bottom-box span{ color: #ffffff; } .sidebar-contact-box .inner-content .button { position: relative; display: block; padding-top: 32px; } .sidebar-contact-box .inner-content .button a { display: block; } .single-service-sidebar .service-pack-download { position: relative; display: block; } .single-service-sidebar .service-pack-download li { position: relative; display: block; background: #ed2a28; transition: all 500ms ease; padding: 17px 30px 17px; } .single-service-sidebar .service-pack-download li .title-holder{ position: relative; display: block; float: left; } .single-service-sidebar .service-pack-download li .title-holder a{ color: #ffffff; font-size: 15px; font-weight: 600; font-family: 'Poppins', sans-serif; } .single-service-sidebar .service-pack-download li .title-holder a span{ font-size: 14px; font-weight: 400; } .single-service-sidebar .service-pack-download li .icon-holder { position: relative; display: block; float: right; } .single-service-sidebar .service-pack-download li .icon-holder i { position: relative; top: 2px; color: #ffffff; font-size: 18px; line-height: 26px; } /*** ============================================= Main Project Area Style5 style ============================================= ***/ .main-project-area.style5{ position: relative; display: block; padding-top: 110px; padding-bottom: 60px; z-index: 1; } .main-project-area.style5:before{ position: absolute; top: -150px; left: 50%; bottom: -500px; width: 1px; content: ""; z-index: -1; } .main-project-style5{ position: relative; display: block; z-index: 1; } .main-project-style5:before{ position: absolute; top: -150px; left: -80px; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style5:after{ position: absolute; top: -150px; right: -80px; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style5 .row { margin-left: -20px; margin-right: -20px; } .main-project-style5 .row [class*=col-] { padding-left: 20px; padding-right: 20px; } .single-project-style8{ position: relative; display: block; margin-bottom: 40px; } .single-project-style8 .img-holder { position: relative; display: block; overflow: hidden; z-index: 10; } .single-project-style8 .img-holder:before, .single-project-style8 .img-holder:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; transition: all 700ms ease 100ms; border-radius: 0px; z-index: 3; } .single-project-style8 .img-holder:before { transform: scale(0, 1); transform-origin: bottom center; border-top: 40px solid #ffffff; border-bottom: 40px solid #ffffff; } .single-project-style8:hover .img-holder:before { transform: scale(1, 1); transition: all 700ms ease 100ms; } .single-project-style8 .img-holder:after { transform: scale(1, 0); transform-origin: left center; border-left: 40px solid #ffffff; border-right: 40px solid #ffffff; } .single-project-style8:hover .img-holder:after{ transform: scale(1, 1); transition: all 700ms ease 100ms; } .single-project-style8 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style8:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style8 .overlay-content{ position: absolute; top: 40px; left: 40px; bottom: 40px; right: 40px; content: ""; background: rgba(40, 41, 46, 0.95); transform: scaleX(0); transition: all 700ms ease 100ms; z-index: 5; } .single-project-style8:hover .overlay-content{ transform: scaleY(1); } .single-project-style8 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style8 .overlay-content .inner-content .title-box { display: table-cell; vertical-align: middle; text-align: center; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); transition: all 300ms ease 100ms; z-index: 3; } .single-project-style8:hover .overlay-content .inner-content .title-box{ opacity: 1; transform: translate3d(0px, 0px, 0px); transition: all 700ms ease 500ms; } .single-project-style8 .overlay-content .inner-content .title-box span{ color: #7c7e84; } .single-project-style8 .overlay-content .inner-content .title-box h3{ font-size: 20px; font-weight: 600; margin: 3px 0 0; } .single-project-style8 .overlay-content .inner-content .title-box a { color: #ffffff; transition: all 500ms ease; } .single-project-style8 .overlay-content .inner-content .title-box a:hover{ color: #ed2a28; } /*** ============================================= Blog Default Area style ============================================= ***/ #blog-area{ position: relative; display: block; padding: 85px 0 85px; } #blog-area.blog-default-area { position: relative; display: block; padding: 85px 0 85px; } .single-blog-colum-style1{ position: relative; display: block; padding: 0px 29px 0px; z-index: 1; top:35px; } .single-blog-colum-style1:before{ position: absolute; top: -300px; left: 0; bottom: -2000px; content: ""; z-index: -1; } .single-blog-post.style3{ margin-bottom: 62px; } .single-blog-post.style3 .img-holder .overlay { transform: translate3d(0px, 0%, 0px); } .single-blog-post.style3 .post-date { position: absolute; top: 20px; right: 20px; width: 65px; height: 75px; text-align: center; background: #ed2a28; display: block; padding: 13px 0 6px; transition: all 700ms ease 500ms; z-index: 3; } .single-blog-post.style3 .post-date h3{ color: #ffffff; font-size: 14px; line-height: 24px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .single-blog-post.style3 .post-date h3 span{ font-size: 24px; } .single-blog-post.style3 .text-holder { position: relative; display: block; padding-top: 24px; } .single-blog-post.style3 .text-holder:before { position: absolute; top: 30px; left: -29px; width: 3px; height: 20px; background: #ed2a28; content: ""; z-index: 99; } .single-blog-post.style3 .text-holder:after { position: absolute; top: 30px; left: -29px; width: 3px; background: #ed2a28; content: ""; z-index: 99; bottom: 8px; transform: scaleY(0); transition: all 700ms ease 400ms; } .single-blog-post.style3:hover .text-holder:after{ transform: scaleY(1); } .single-blog-post.style3 .meta-box { margin-top: 14px; margin-bottom: 0px; } .single-blog-post.style3 .text-holder .text { margin-top: 9px; } .single-blog-post.style3 .text-holder .text p { margin: 0 0 26px; } /*** ============================================= Blog Area Blog Large style ============================================= ***/ #blog-area.blog-large-area{ position: relative; display: block; } .single-blog-post.style4{ position: relative; display: block; padding-left: 30px; padding-right: 35px; margin-bottom: 80px; z-index: 1; } .single-blog-post.style4:before{ position: absolute; top: -300px; left: 0; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .single-blog-post.style4 .img-holder .overlay .box .link-icon a span:before { font-size: 55px; line-height: 55px; } .single-blog-post.style4 .text-holder { position: relative; display: block; padding-top: 32px; } .single-blog-post.style4 .text-holder:before { position: absolute; top: 40px; left: -29px; width: 3px; height: 20px; background: #ed2a28; content: ""; z-index: 99; } .single-blog-post.style4 .text-holder:after { position: absolute; top: 0px; left: -29px; width: 3px; background: #ed2a28; content: ""; z-index: 99; bottom: 0px; transform: scaleY(0); transition: all 700ms ease 400ms; } .single-blog-post.style4:hover .text-holder:after{ transform: scaleY(1); } .single-blog-post.style4 .text-holder .blog-title { font-size: 30px; line-height: 40px; } .single-blog-post.style4 .meta-box { margin-top: 11px; margin-bottom: 0px; border-bottom: 1px solid #ededed; padding-bottom: 25px; } .single-blog-post.style4 .text-holder .text { margin-top: 24px; } .single-blog-post.style4 .text-holder .text p { margin: 0 0 32px; } #blog-area .sidebar-wrapper { position: relative; display: block; max-width: 300px; margin-left: -30px; } /*** ============================================= Main Header Blog Single style ============================================= ***/ .main-header.blog-single{ -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.10); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.10); -ms-box-shadow: 0 0 15px rgba(0,0,0,0.10); -o-box-shadow: 0 0 15px rgba(0,0,0,0.10); box-shadow: 0 0 15px rgba(0,0,0,0.10); }