/* landing smooth */
.html{
scroll-behavior: smooth;
}
#scrollUp {
bottom: 30px;
color: #fff;
font-size: 34px;
height: 60px;
line-height: 60px;
right: 30px;
text-align: center;
width: 60px;
border-radius: 100%;
background: #279e64;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.header-top-menu {
padding-top: 11px;
background: #303133;
z-index: 2;
position: relative;
padding-bottom: 11px;
}
.header-top-addres-icon i {
color: #fff;
font-size: 24px;
display: inline-block;
}
.header-top-address {
float: right;
}
.header-top-address ul {
display: inline-block;
}
.header-top-address ul li a {
color: #CDCDCD;
font-size: 14px;
font-weight: 400;
}
.header-top-address ul li {
display: inline-block;
margin-left: 37px;
color: #fff;
font-size: 14px;
margin-bottom: 0px;
}
.header-top-address ul li a span {
margin-right: 9px;
font-size: 20px;
display: inline-block;
color: #CCCCCC;
}
.header-top-address ul li span i {
margin-right: 8px;
}
.header-top-social span {
color: #fff;
font-size: 14px;
letter-spacing: 0.7px;
}
/*top*/
.country-thumb {
display: inline-block;
}
.top-thumb-box {
position: relative;
margin-left: 10px;
padding: 0 0 0 31px;
}
.top-thumb-box select {
width: 98px;
color: #fff;
background: transparent;
border: none;
text-transform: uppercase;
margin-left: 7px;
}
option {
background: #01A2FD;
}
a.top-menu {
position: relative;
}
a.top-menu:before {
content: "";
top: -18px;
left: -17px;
height: 51px;
width: 2px;
background: #434446;
position: absolute;
}
a.top-menu:after {
content: "";
top: -18px;
right: -26px;
height: 51px;
width: 2px;
background: #434446;
position: absolute;
}
/*=================================//
style-two-header-top-area
===================================*/
.header-top-social-address ul {
display: inline-block;
margin-left: 26px;
}
.header-top-social-address ul li a i {
font-size: 20px;
display: block;
margin-right: 19px;
border-radius: 3px;
transition: .5s;
color: #fff;
}
.header-top-social-address ul li a i:hover {
color: #d0312c;
}
.header-top-social {
float: right;
display: inline-block;
margin-top: 3px;
}
.header-top-icon i {
color: #CDCDCD;
}
.header-top-social-time span {
margin-left: 11px;
color: #CCCCCC;
}
.header-top-social-address ul li {
display: inline-block;
}
.header-top-social-address p {
display: inline-block;
color: #fff;
font-size: 15px;
margin-left: 46px;
}
.header-top-social-address span {
letter-spacing: 1.1px;
font-size: 14px;
}
/*style-two*/
.header-top-menu.style-two {
background: #0973D7;
}
.header-top-menu.style-two .top-thumb-box select {
color: #fff;
}
.header-top-menu.style-two a.top-menu:before {
width: 1px;
background: #2281DB;
}
.header-top-menu.style-two a.top-menu:after {
width: 1px;
background: #2281DB;
}
.header-top-menu.style-two .header-top-icon i {
color: #fff;
}
.header-top-menu.style-two .header-top-social-time span {
color: #fff;
}
.header-top-menu.style-two .header-top-address ul li a span {
color: #fff;
}
.header-top-menu.style-two .header-top-address ul li a {
color: #fff;
}
/*--=====================================
----------start sub menu---------------
-========================================*/
.header-menu .sub-menu {
height: auto;
width: 230px;
background: #fff;
box-shadow: 0 0 5px rgba(0,0, 0,0.2);
position: absolute;
text-align: left;
top: 80px;
transition: .3s;
opacity: 0;
left: 0;
visibility: hidden;
border-radius: 7px;
padding: 15px 20px;
border-top: 4px solid#2D4B8B;
border-bottom: 4px solid#0973D7;
}
.header-area .sub-menu ul li {
display: block;
margin-bottom: -40px;
}
.header-area .sub-menu ul li a {
position: relative;
color: #616161!important;
margin: 5px 8px 5px 20px;
font-weight: 500;
font-size: 14px;
padding-top: 10px;
}
.header-menu ul li:hover .sub-menu {
top: 63px;
opacity: 1;
visibility: visible;
z-index: 9;
}
.header-menu ul li{
padding-bottom:40px;
}
.header-area .sub-menu ul li a::before {
content: "";
position: absolute;
height: 2px;
width: 15px;
background-color: #01A2FD;
left: -18px;
top:18px;
opacity: 0;
visibility: hidden;
}
.header-area .sub-menu ul li a:hover {
margin-left: 30px;
color: #01A2FD!important;
}
.sticky-nav.header-area .sub-menu ul li a:hover {
margin-left: 30px;
color: #01A2FD!important;
}
.header-area .sub-menu ul li a:hover::before {
opacity: 1;
visibility: visible;
}
/*--==========================================
start-header-area-------------------------
-=========================================*/
.header-area {
position: relative;
z-index: 2;
}
.header-menu {
text-align: right;
}
.sticky-nav .header-button a {
background: transparent;
border: 1px solid #fff;
}
.header-menu ul {
display: inline-block;
}
.header-menu ul li {
list-style: none;
display: inline;
position: relative;
}
.header-menu ul li a {
display: inline-block;
font-size: 16px;
margin: 41px 18px;
text-transform: capitalize;
font-weight: 600;
color: #57575b;
transition: .5s;
}
.header-menu ul li a:hover {
color: #fd010181;
}
.sticky-nav .header-menu ul li a{
color:#fff;
}
.sticky-nav .header-menu .sub-menu ul li a{
color:#000;
}
.header-menu ul li a i {
opacity: 0.5;
font-size: 10px;
}
.header-button {
display: inline-block;
margin-left: 69px;
}
.header-button a {
color: #fff;
display: inline-block;
font-size: 16px;
margin-bottom: 0;
text-align: center;
text-transform: capitalize;
transition: all 0.5s;
margin-left: 2px;
background: #d0312c;
padding: 20px 47px;
font-weight: 500;
}
.header-button a:hover {
background: #00247E;
color: #fff;
}
.header-icon-box {
float: right;
border-left: 1px solid#e6eefc;
padding-left: 24px;
}
.header-icon {
margin: 20px 0 0 34px;
}
.header-content {
margin-left: 12px;
}
.header-content h5 {
margin: 0 0 6px;
font-size: 12px;
font-weight: 500;
}
.header-content a h3 {
margin: 0;
font-size: 16px;
text-transform: uppercase;
color: #028BFE;
font-weight: 600;
}
.sticky-nav .header-content h5 {
color: #fff;
}
.sticky-nav .header-content a h3 {
color: #fff;
}
.sticky-nav {
left: 0;
margin: auto;
top: 0;
width: 100%;
position: fixed!important;
box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
-webkit-animation: 300ms running fadeInDown;
animation: 500ms running fadeInUp;
-webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
transition: .5s !important;
background: #710101f0;
z-index: 333;
}
.sticky-nav .header-button a {
color: #279e64;
display: inline-block;
font-size: 16px;
margin-bottom: 0;
text-align: center;
text-transform: capitalize;
transition: all 0.5s;
margin-left: 2px;
background: #fff;
padding: 20px 47px;
font-weight: 500;
transition: .5s;
}
.sticky-nav .header-button a:hover{
background:#00247E;
color: #fff;
}
.header-area.transparent{
position: relative;
z-index: 2;
margin-bottom: -88px;
}
.transparent .header-menu ul li a {
color: #fff;
}
.stiky-logo {
display: none;
}
.sticky-nav .stiky-logo {
display: block;
}
.sticky-nav .main-logo {
display: none;
}
.header-thumb2 {
display: none;
}
.sticky-nav .header-thumb2 {
display: block;
}
.sticky-nav .header-thumb {
display: none;
}
/* Mobile Menu */
/* Logo móvil */
.m-logo {
display:none;
}
@media(max-width:991px){
.header-area {
position:relative;
min-height:75px;
}
.m-logo {
display:block;
position:absolute;
left:15px;
top:50%;
transform:translateY(-50%);
z-index:20;
}
.m-logo img {
width:45px;
height:45px;
object-fit:contain;
}
.menu-toggle {
display:block;
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
z-index:30;
}
}
.menu-toggle{
display: none;
}
.menu-toggle .open_bar,
.menu-toggle .close_bar {
color: #fff;
font-size: 20px;
font-weight: 900;
right: 30px;
position: absolute;
top: 16px;
cursor: pointer;
}
.menu-toggle .close_bar{
display: none;
}
.menu-toggle.closee .open_bar{
display: none !important;
}
.menu-toggle.closee .close_bar{
display: block !important;
}
span.mobile-menu-icon {
display: none;
}
/* ==========================================
start search Popup Css
=========================================*/
.search-popup{
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: 99999;
margin-top: -540px;
transform: translateY(-100%);
background-color: rgba(0,0,0,0.90);
-webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
-moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
-o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}
.search-popup{
width: 100%;
}
.search-active .search-popup{
transform: translateY(0%);
margin-top: 0;
}
.search-popup .close-search {
position: absolute;
left: 0;
right: 0;
top: 75%;
margin: 0 auto;
margin-top: -200px;
border-radius: 50%;
text-align: center;
background-color: #01A2FD;
width: 70px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
border-bottom: 3px solid #ffffff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
opacity: 0;
visibility: hidden;
height: 70px;
line-height: 70px;
text-align: center;
}
.search-popup .close-search i{
position: relative;
font-size: 30px;
color: #ffffff;
}
.search-active .search-popup .close-search{
visibility: visible;
opacity: 1;
top: 50%;
-webkit-transition-delay: 1500ms;
-moz-transition-delay: 1500ms;
-ms-transition-delay: 1500ms;
-o-transition-delay: 1500ms;
transition-delay: 1500ms;
}
.search-popup form{
position: absolute;
max-width: 700px;
top: 50%;
left: 15px;
right: 15px;
margin:-35px auto 0;
transform: scaleX(0);
transform-origin: center;
background-color: #111111;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.search-active .search-popup form{
transform: scaleX(1);
-webkit-transition-delay: 1200ms;
-moz-transition-delay: 1200ms;
-ms-transition-delay: 1200ms;
-o-transition-delay: 1200ms;
transition-delay: 1200ms;
}
.search-popup .form-group{
position:relative;
margin:0px;
overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
position:relative;
display:block;
font-size:18px;
line-height: 50px;
color:#000000;
height:70px;
width:100%;
padding: 10px 30px;
background-color: #ffffff;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
font-weight:500;
text-transform:capitalize;
}
.search-popup .form-group input[type="submit"], .search-popup .form-group button {
position: absolute;
right: 30px;
top: 0px;
height: 70px;
line-height: 70px;
background: transparent;
text-align: center;
font-size: 24px;
color: #000000;
padding: 0;
cursor: pointer;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
border: none;
}
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
color: #000000;
}
.search-popup input::placeholder,
.search-popup textarea::placeholder{
color:#000000;
}
.search-popup .close-search.style-two{
position: absolute;
right: 25px;
left: auto;
color:#ffffff;
width:auto;
height:auto;
top:25px;
margin:0px;
border:none;
background:none !important;
box-shadow:none !important;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
.search-popup .close-search.style-two i{
font-size:20px;
color:#ffffff;
}
.header-src-btn {
float: right;
position: relative;
margin-top: 0px;
}
.search-box-btn.search-box-outer {
margin-top: 27px;
margin-left: 25px;
}
.search-box-btn.search-box-outer i {
font-size: 16px;
display: inline-block;
background: transparent;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 3px;
color: #0281ff;
cursor: pointer;
border-radius: 100%;
}
.search-box-btn.search-box-outer i {
background: rgb(242,247,253);
}
/*--==============================================->
==================================================-*/
.slider-area {
background: url(assets/images/1.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 790px;
position: relative;
background-position: center center;
}
.slider-content {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);
background: #fff;
padding: 50px 0 54px 49px;
border-radius: 7px;
}
.slider-content h4 {
margin: 0;
font-size: 24px;
font-weight: 500;
}
.slider-content h1 {
font-size: 55px;
margin: 0;
font-weight: 800;
text-transform: capitalize;
}
.slider-content h2 {
margin: 0;
font-size: 45px;
color: #2F3032;
}
.slider-content span {
color: #01A2FD;
}
.slider-content p {
width: 72%;
line-height: 1.6;
font-size: 16px;
color: #545454;
margin: 13px 0 43px;
}
.slider-button a {
background-image: linear-gradient( to right, #0088ff, #33b8ff);
display: inline-block;
padding: 18px 23px;
font-size: 16px;
text-transform: uppercase;
color: #fff;
border-radius: 3px;
margin-right: 15px;
transition: .5s;
overflow: hidden;
position: relative;
z-index: 1;
}
.slider-button a:before {
position: absolute;
content: "";
top: 0;
left: 101px;
background: #028BFF;
height: 80px;
width: 91px;
transform: skewX(-58deg);
z-index: -1;
}
.slider-button a:hover {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
}
.slider-button a:hover:before {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
}
a.slider-active {
border: 1px solid #028bfe;
background: inherit;
color: #028bfe;
transition: .5s;
position: relative;
}
a.slider-active:before{
position: absolute;
content: '';
width: 0;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: #01A2FD;
opacity: 0;
visibility: hidden;
z-index: -1;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
border-radius: 30px;
}
a.slider-active:hover:before{
opacity: 1;
visibility: visible;
width: 100%;
}
a.slider-active:hover{
color: #fff;
}
/*slider-two*/
.slider-area.style-two{
background: url(assets/images/two.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 790px;
position: relative;
background-position: center center;
}
.slider-area.style-two .about-video-icon a, .about-icon a {
background: #01A2FD;
}
/*video*/
.rs-video {
display: inline-block;
position: relative;
top: -66px;
left: 60px;
}
.rs-video .animate-border a {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.animate-border a i {
color: #fff;
display: inline-block;
}
.rs-video .animate-border .video-vemo-icon {
background-image: linear-gradient(55deg, #01A2FD 0%, #0C90FE 100%);
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
display: inline-block;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.rs-video .animate-border .video-vemo-icon:before {
content: "";
border: 2px solid#01A2FD;
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 180px;
height: 180px;
border-radius: 50%;
animation: zoomBig 3.25s linear infinite;
-webkit-animation-delay: .75s;
animation-delay: .75s;
}
.rs-video .animate-border .video-vemo-icon:after {
content: "";
border: 2px solid #01A2FD;
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 180px;
height: 180px;
border-radius: 50%;
animation: zoomBig 3.25s linear infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
@keyframes zoomBig {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
border-width: 3px;
}
40% {
opacity: .5;
border-width: 2px;
}
65% {
border-width: 1px;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
border-width: 1px;
}
}
@keyframes zoomBig {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
border-width: 3px;
}
40% {
opacity: .5;
border-width: 2px;
}
65% {
border-width: 1px;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
border-width: 1px;
}
}
/*slider three */
.slider-area.style-three {
background: url(assets/images/slider.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 803px;
position: relative;
background-position: center center;
overflow: hidden;
z-index: 1;
}
.slider-area.style-three .slider-content h1 {
font-size: 56px;
margin: 0;
font-weight:700;
text-transform: capitalize;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
}
.slider-area.style-three .slider-content h4 {
margin: 0 0 10px;
color: #2D4B89;
}
.slider-area.style-three .slider-content p {
margin: 3px 0 39px;
width: 65%;
}
.slider-area.style-three .slider-button a {
background: #2D4B8B;
padding: 19px 23px;
border-radius: 0;
transition: .5s;
}
.slider-area.style-three .slider-button a::before {
display: none;
}
.slider-area.style-three .slider-button a:hover {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
}
.slider-area.style-three a.slider-active:hover {
border-color:#2D4B8B;
background: #2D4B8B;
color: #fff;
}
.slider-area.style-three a.slider-active {
border: 1px solid #2D4B8B;
background: inherit;
color: #028bfe;
transition: .5s;
}
.slider-thumb{
position: relative;
z-index: 1;
}
.Client-Satisffation-content {
text-align: center;
height: 174px;
width: 174px;
line-height: 174px;
background: #2D4B8B;
display: inline-block;
position: absolute;
bottom: 108px;
left: -61px;
border-radius: 100%;
}
.Client-Satisffation-icon {
margin-top: -26px;
}
.Client-Satisffation-icon i {
font-size: 53px;
display: inline-block;
color: #fff;
}
.Client.Satisffation h2 {
font-size: 18px;
margin: -63px 0 0;
color: #fff;
}
.shape-img {
position: absolute;
}
.shape-img.shape1 {
top: -19px;
left: 275px;
}
.shape-img.shape2 {
right: -151px;
bottom: 268px;
}
.shape-img.shape3 {
top: -188px;
right: -388px;
}
.shape-img.shape4 {
top: -153px;
right: -427px;
}
.shape-img.shape5 {
top: -79px;
right: -461px;
}
.shape-img.shape6 {
position: absolute;
top: 0;
right: -200px;
}
.slider-shape {
position: absolute;
}
.slider-shape.one {
left: 100px;
top: 83%;
}
.slider-shape.two {
top: 11%;
left: 165px;
}
.slider-shape.three {
left: 205px;
top: 56%;
}
.slider-shape.four {
left: 211px;
top: 34%;
}
.slider-shape.five {
left: 400px;
top: 78%;
}
.slider-shape.six {
top: 2%;
left: 347px;
}
/* home page two slider video */
.slider-video {
display: inline-block;
position: relative;
top: -20px;
left: 10px;
}
.rotateme {
animation-name: rotateme;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotateme {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes alltuchtopdown{
0%{
-webkit-transform:rotateX(0deg) translateY(0px);
-ms-transform:rotateX(0deg) translateY(0px);
transform:rotateX(0deg) translateY(0px)
}
50%{
-webkit-transform:rotateX(0deg) translateY(-20px);
-ms-transform:rotateX(0deg) translateY(-20px);
transform:rotateX(0deg) translateY(-20px)
}
100%{
-webkit-transform:rotateX(0deg) translateY(0px);
-ms-transform:rotateX(0deg) translateY(0px);
transform:rotateX(0deg) translateY(0px)
}
}
.alltuchtopdown {
-webkit-animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;
animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
}
/*slider-four*/
.slider-area.style-four {
background: url(assets/images/four.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 790px;
position: relative;
background-position: center center;
}
.slider-area.style-four .slider-content p {
width: 65%;
}
.slider-area.style-four .shape-img.shape1 {
top: 12px;
right: -200px;
}
canvas.particles-js-canvas-el {
position: absolute;
top: 0;
z-index: -1;
}
/*Slider style five*/
.slider-area.style-five {
background: url(assets/images/slider2.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 790px;
position: relative;
background-position: center center;
z-index: 1;
}
.slider-area.style-three .slider-content,
.slider-area.style-four .slider-content,
.slider-area.style-five .slider-content,
.slider-area.style-six .slider-content {
box-shadow: none;
background: none;
padding: 0;
border-radius: 0;
}
.slider-area.style-five .slider-content h4 {
margin: 0 0 12px;
color: #25A8FF;
}
.slider-area.style-five .slider-content h1 {
font-size: 55px;
margin: 0;
font-weight: 800;
line-height: 1.3;
}
.slider-content h1 span {
color: #00A2FF;
}
.slider-area.style-five .slider-content h1 span {
color: #00A2FF;
font-style: italic;
}
.slider-area.style-five .slider-content p {
width: 33%;
color: #6B6B6B;
margin: 6px 0 40px;
}
.slider-area.style-five .bd-video {
position: inherit;
}
.slider-button {
display: inline-block;
}
.slider-button a span {
color: #fff;
}
.bd-video {
display: inline-block;
}
.slider-area.style-five .about-video-icon {
position: relative;
top: -23px;
left: 9px;
}
.slider-area.style-five .slider-video {
display: inline-block;
position: relative;
top: 4px;
left: 10px;
}
.slider-area.style-five .slider-button a {
background: #0973D7;
font-size: 14px;
border-radius: 0px;
}
.slider-area.style-five .slider-button a::before {
opacity: 0;
}
.slider-area.style-five .slider-button a:hover:before{
opacity: 1;
}
.slider-area.style-five .slider-button a:hover {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
}
.slider-area.style-five .about-video-icon a, .about-icon a {
background: #0973D7;
}
/*slider six*/
.slider-area.style-six {
background: url(assets/images/six.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 790px;
position: relative;
background-position: center center;
}
.slider-area.style-six .slider-content h4 {
margin: 0 0 11px;
color: #01A1FF;
}
.slider-area.style-six .slider-content p {
width: 33%;
line-height: 1.6;
font-size: 16px;
color: #545454;
margin: 13px 0 43px;
}
/*resulation slider area*/
.tp-caption a {
font-size: 17px !important;
color: #fff;
background: #01A2FD;
padding: 12px 32px !important;
margin-right: 16px;
display: inline-block;
border-radius: 5px;
transition: .5s;
margin-top: 40px;
position: relative;
z-index: 1;
}
.tp-caption a:before {
position: absolute;
content: '';
width: 0;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: #00247e;
opacity: 0;
visibility: hidden;
z-index: -1;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
border-radius: 5px;
}
.tp-caption a:hover:before {
opacity: 1;
visibility: visible;
width: 100%;
}
.tp-caption a:hover {
color: #fff;
}
.resulation-video {
display: inline-block;
position: absolute;
top: 61%;
left: 31%;
}
/*owl nav*/
.owl-nav {
position: relative;
}
.owl-prev, .owl-next {
position: absolute;
top: -451px;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
border-radius: 100%;
font-size: 0;
border: 2px solid#0973D7;
transition: .5s;
background: url(assets/images/Untitled-2.jpg);
background-position: center;
background-size: cover;
}
.owl-next {
float: right;
position: relative;
transition: .5s;
background: url(assets/images/Untitled-4.jpg);
background-position: center;
background-size: cover;
}
.owl-next {
right: -77px;
transition: .5s;
}
.owl-prev {
left: -79px;
transition: .5s;
}
.slider_list:hover .owl-next{
right:50px;
}
.slider_list:hover .owl-prev{
left:50px;
}
.slider_list .owl-prev:hover{
left:50px;
background: url(assets/images/mobi.jpg);
background-position: center;
background-size: cover;
}
.slider_list .owl-next:hover {
right:50px;
background: url(assets/images/port8.jpg);
background-position: center;
background-size: cover;
}
/*slider-list three*/
.slider_list3 .owl-prev, .owl-next {
position: absolute;
top: -451px;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
border-radius: 100%;
font-size: 0;
border: 2px solid#0973D7;
transition: .5s;
background: url(assets/images/post.jpg);
background-position: center;
background-size: cover;
}
.slider_list3 .owl-next {
float: right;
position: relative;
transition: .5s;
background: url(assets/images/port8.jpg);
background-position: center;
background-size: cover;
}
.slider_list3 .owl-next {
right: -77px;
transition: .5s;
}
.slider_list3 .owl-prev {
left: -79px;
transition: .5s;
}
.slider_list3:hover .owl-next{
right:50px;
}
.slider_list3:hover .owl-prev{
left:50px;
}
.slider_list3 .owl-prev:hover{
left:50px;
background: url(assets/images/blog4.jpg);
background-position: center;
background-size: cover;
}
.slider_list3 .owl-next:hover {
right:50px;
background: url(assets/images/blog5.jpg);
background-position: center;
background-size: cover;
}
/*
Lines Area Style
======================================================*/
.lines {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
margin: auto;
width: 90vw;
z-index: -1;
}
.lines .line {
position: absolute;
width: 1px;
height: 100%;
top: 0;
left: 50%;
background: rgba( 181, 194, 226, 0.5);
border-radius: 50%;
}
.lines .line::after {
content: "";
display: block;
position: absolute;
height: 13px;
width: 15px;
top: 0;
left: -7px;
background-color: #9FB0CE;
-webkit-animation: moveLeftBounces-one 20s linear infinite;
animation: moveLeftBounces-one 20s linear infinite;
border-radius: 100%;
}
.lines .line:nth-child(1) {
margin-left: -25%;
}
.lines .line:nth-child(1)::after {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.lines .line:nth-child(3)::after {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.lines .line:nth-child(3) {
margin-left: 25%;
}
.lines .line-two {
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.lines .line-two::after {
content: "";
display: block;
position: absolute;
height: 10px;
width: 20px;
top: 0;
left: 0;
background-color: #d80650;
-webkit-animation: moveLeftBounces-two 20s linear infinite;
animation: moveLeftBounces-two 20s linear infinite;
}
.lines .line-two:nth-child(1) {
margin-left: -25%;
}
.lines .line-two:nth-child(1)::after {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.lines .line-two:nth-child(3)::after {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.lines .line-two:nth-child(3) {
margin-left: 25%;
}
.lines .line-three {
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.lines .line-three::after {
content: "";
display: block;
position: absolute;
height: 10px;
width: 20px;
top: 0;
left: 0;
background-color: #d80650;
-webkit-animation: moveLeftBounces-one 20s linear infinite;
animation: moveLeftBounces-one 20s linear infinite;
}
.lines .line-three:nth-child(1) {
margin-left: -25%;
}
.lines .line-three:nth-child(1)::after {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.lines .line-three:nth-child(3)::after {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.lines .line-three:nth-child(3) {
margin-left: 25%;
}
@-webkit-keyframes moveLeftBounces-one {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes moveLeftBounces-one {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/*--==============================================->
==================================================-*/
.feature-area {
background: #F8F8F8;
padding: 0 0 108px;
}
.row.margin-topper {
border: 11px solid#fff;
position: relative;
margin-top: -47px;
z-index: 1;
}
.single-feature-box {
background: #2D4B8B;
padding: 36px 30px 23px;
}
.single-feature-box.two {
background: #253E74;
}
.feature-icon {
margin-top: 31px;
margin-left: 9px;
}
.feature-icon i {
font-size: 50px;
display: inline-block;
color: #fff;
}
.feature-content {
margin-left: 31px;
}
.feature-title h2 {
font-size: 24px;
margin: 0 0 15px;
color: #fff;
font-weight: 600;
}
.feature-content-text p {
color: #fff;
line-height: 1.5;
}
/*--==============================================->
==================================================-*/
.about-area {
background: url(assets/images/about.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.about-thumb {
position: relative;
margin-left: -303px;
}
.bd-video {
position: absolute;
top: 65%;
left: 70%;
}
.about-area .dreamit-section-sub-title h5 {
color: #2C4C89;
text-transform: capitalize;
font-size: 18px;
margin-bottom: 15px;
}
.dreamit-section-title{
position: relative;
z-index: 1;
}
.about-area .dreamit-section-main-title h2 {
font-size: 32px;
margin-left: 20px;
}
.dreamit-section-main-title h1 {
position: absolute;
content: "";
top: -42px;
left: -6px;
color: #F0F1F6;
font-size: 70px;
text-transform: uppercase;
z-index: -1;
opacity: 1;
font-weight: 800;
}
.about-bg-bar {
position: relative;
}
.about-bg-bar:before {
position: absolute;
content: "";
top: 47px;
left: 0;
height: 57px;
width: 6px;
background: #1C2842;
}
.about-bg-bar:after {
position: absolute;
content: "";
top: 108px;
left: 0;
height: 9px;
width: 6px;
background: #1C2842;
}
.dreamit-section-content-text p {
line-height: 1.5;
width: 90%;
font-size: 16px;
color: #707070;
margin: 27px 0 0px;
font-weight: 500;
letter-spacing: 0.1px;
}
.about-single-box {
margin-bottom: 10px;
}
.about-icon {
margin: 0px 12px 0 0;
float: left;
}
.about-icon i {
font-size: 16px;
color: #2D4B8B;
display: inline-block;
}
.about-content {
margin-left: 19px;
}
.about-content h2 {
font-size: 18px;
color: #1B2741;
margin: 0 0 12px;
}
.about-content p {
width: 90%;
}
.row.topper2 {
border-top: 1px solid#E8E9ED;
margin: 20px 0 0;
padding: 26px 0 0;
}
.signature-content h2 {
font-size: 18px;
margin: 0 0 6px 30px;
position: relative;
}
.signature-content h2:before {
position: absolute;
content: "";
top: 10px;
left: -30px;
height: 1px;
width: 25px;
background: #1C2842;
}
.video-icon {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
padding-top: 8px;
}
.about-video-icon a, .about-icon a {
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
border-radius: 100%;
position: relative;
color: #fff;
-webkit-animation: ripple-white 1s linear infinite;
animation: ripple-blue 1s linear infinite;
-webkit-transition: .5s;
background: #2D4B8B;
font-size: 28px;
z-index: 1;
}
.about-video-icon a {
color: #fff;
}
@-webkit-keyframes ripple-blue {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(69,130,169, 0.3), 0 0 0 10px rgba(69,130,169, 0.3), 0 0 0 20px rgba(69,130,169, 0.3);
box-shadow: 0 0 0 0 rgba(69,130,169, 0.3), 0 0 0 10px rgba(69,130,169, 0.3), 0 0 0 20px rgba(69,130,169, 0.3)
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(69,130,169, 0.3), 0 0 0 20px rgba(69,130,169, 0.3), 0 0 0 30px rgba(69,130,169, 0.3)
}
}
/*about style two*/
.about-area.style-two {
background: none;
}
.about-area.style-two .about-thumb {
margin-left: -106px;
position: relative;
z-index: 1;
}
.about-area.style-two .dreamit-section-sub-title h5 {
color: #0874D7;
}
.about-shape {
position: absolute;
top: 62px;
left: -147px;
}
.about-shape img {
width: 100%;
}
.about-area.style-two .bd-video {
position: absolute;
top: 69%;
left: 58%;
}
.about-shape2 {
position: absolute;
top: 45px;
left: 32px;
}
.about-area.style-two .about-video-icon a, .about-icon a {
background: #0973D7;
}
/*--==========================================
Start servicve area
-=========================================*/
.dreamit-section-sub-title h5 {
color: #000000;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
margin: 0 0 13px;
}
.dreamit-section-main-title h2 {
font-size: 40px;
margin: 3px 0 0;
}
.dreamit-single-service-box {
text-align: center;
padding: 22px 18px 33px;
box-shadow: 0 2px 15px 0 rgb(0 0 0 / 12%);
background: #fff;
margin-bottom: 30px;
position: relative;
transition: .5s;
overflow: hidden;
z-index: 1;
border-radius: 5px;
}
.dreamit-single-service-box:hover{
background: rgba(254, 7, 3, 0.815);
}
.dreamit-single-service-box:hover .service-icon span{
border-right: 3px solid #fff;
border-bottom: 3px solid#fff;
background: #fff;
color: #0297FE;
}
.dreamit-single-service-box:hover .service-icon i{
background: #fff;
color: #fda501;
}
.dreamit-single-service-box:hover .service-title h2,
.dreamit-single-service-box:hover .service-content-text p {
color: #fff;
}
.service-icon {
border-right: 3px solid #fd0101c4;
border-radius: 50%;
display: inline-block;
border-left: outset transparent;
border-top: outset transparent;
}
.dreamit-single-service-box:hover .service-icon{
border-right: 3px solid #fff;
}
.service-icon span {
display: inline-block;
height: 118px;
width: 118px;
line-height: 118px;
background: #01a2fd;
color: #fff;
font-size: 56px;
border-radius: 100%;
margin: 5px;
transition: .5s;
}
.service-number {
position: relative;
margin: -41px 0 0 82px;
}
.service-number h1 {
font-size: 18px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 100%;
margin: auto;
background: #fff;
color: #0282FD;
}
.service-title h2 {
font-size: 24px;
margin: 27px 0 18px;
transition: .5s;
}
.shape {
position: absolute;
right: 0;
bottom: 0;
}
.shape span{
position: relative;
}
.shape span:nth-child(1)::before {
content: "";
position: absolute;
bottom: -45px;
right: -45px;
height: 55px;
width: 55px;
background: #c10000e2;
border-radius: 50%;
transition: .5s;
opacity: 0;
z-index: 6;
}
.dreamit-single-service-box:hover .shape span:nth-child(1)::before {
bottom: -20px;
right: -20px;
opacity: 1;
}
.shape span:nth-child(1)::after {
content: "";
position: absolute;
bottom: -100px;
right: -100px;
height: 109px;
width: 109px;
background: #c10000e5;
border-radius: 50%;
transition: .7s;
opacity: 0;
z-index: 5;
}
.dreamit-single-service-box:hover .shape span:nth-child(1)::after {
bottom: -35px;
right: -35px;
opacity: 1;
}
.shape span:nth-child(2)::before {
content: "";
position: absolute;
bottom: -145px;
right: -145px;
height: 173px;
width: 173px;
background: #c10000e2;
border-radius: 50%;
transition: .9s;
opacity: 0;
z-index: 4;
}
.dreamit-single-service-box:hover .shape span:nth-child(2)::before {
bottom: -55px;
right: -55px;
opacity: 1;
}
.shape span:nth-child(2)::after {
content: "";
position: absolute;
bottom: -200px;
right: -200px;
height: 225px;
width: 225px;
background: #c10000e2;
border-radius: 50%;
transition: 1.1s;
opacity: 0;
z-index: 3;
}
.dreamit-single-service-box:hover .shape span:nth-child(2)::after {
bottom: -60px;
right: -60px;
opacity: 1;
}
.shape span:nth-child(3)::after {
content: "";
position: absolute;
bottom: -250px;
right: -250px;
height: 297px;
width: 306px;
background: #c10000e2;
border-radius: 50%;
transition: 1.3s;
opacity: 0;
z-index: 2;
}
.dreamit-single-service-box:hover .shape span:nth-child(3)::after {
bottom: -70px;
right: -70px;
opacity: 1;
}
.service-content {
padding: 0 22px;
z-index: 999;
position: relative;
}
.service-content-text p {
line-height: 1.6;
margin-bottom: 23px;
transition: .5s;
}
.service-icon-button a {
height: 36px;
width: 71px;
text-align: center;
background: #F6F6F6;
display: inline-block;
line-height: 36px;
border-radius: 3px;
position: relative;
font-size: 24px;
}
.dreamit-service-button a {
background-image: linear-gradient( to right, #0088ff, #33b8ff);
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 18px 36px;
border-radius: 3px;
transition: .5s;
display: inline-block;
position: relative;
z-index: 1;
transition: .5s;
overflow: hidden;
}
.dreamit-service-button a span {
font-size: 16px;
top: 1px;
position: relative;
left: 8px;
}
.dreamit-service-button a:before {
position: absolute;
content: "";
top: 0;
left: 101px;
background: #028BFF;
height: 143px;
width: 93px;
transform: skewX( -58deg);
z-index: -1;
}
.dreamit-service-button a:hover:before {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
}
.dreamit-service-button a:hover{
background-image: linear-gradient( to right, #028bfe, #b3e4ff)
}
/*style two*/
.service-area.style-two {
background: #F0F3F8;
}
.service-area.style-two .dreamit-section-main-title h2 {
font-size: 38px;
}
.single-service-box {
text-align: center;
margin-bottom: 30px;
background: #fff;
padding: 24px 8px 12px;
position: relative;
z-index: 1;
transition: .5s;
margin-right: 30px;
}
.single-service-box:before {
position: absolute;
content: "";
top: 0;
left: 0;
background: rgba(210, 2, 2, 0.8);
height: 100%;
width: 100%;
z-index: -1;
opacity: 0;
transition: .5s;
}
.single-service-box:hover:before{
opacity: 1;
}
.single-service-box:hover .single-service-icon i,
.single-service-box:hover .service-title h2,
.single-service-box:hover .service-content-text p{
color: #fff;
}
.dreamit-section-bar {
background: #0874D7;
height: 2px;
width: 100px;
border-radius: 30px;
position: relative;
margin-top: 16px;
}
.dreamit-section-bar::before {
content: '';
position: absolute;
left: 0;
top: -4.7px;
height: 10px;
width: 10px;
border-radius: 50%;
background: #0974D6;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: MOVE-BG;
animation-name: MOVE-BG;
}
@-webkit-keyframes MOVE-BG {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(88px);
transform: translateX(88px);
}
}
.dreamit-section-bar.mb-20 {
position: relative;
left: 0;
right: 0;
margin: auto;
top: 6px;
}
.service-area.style-two .dreamit-section-content-text p {
width: 39%;
margin: 26px auto 0px;
}
.single-service-icon i {
font-size: 60px;
color: #0B73D6;
display: inline-block;
}
.service-area.style-two .service-title h2 {
font-size: 24px;
margin: 0px 0 10px;
transition: .5s;
}
.service-icon-btn {
position: absolute;
top: 39%;
right: -19px;
}
.service-icon-btn a {
height: 50px;
width: 50px;
line-height: 50px;
background: #fff;
display: inline-block;
border-radius: 100%;
font-size: 14px;
}
.shape-icon i {
font-size: 120px;
position: absolute;
top: 50px;
left: 34px;
z-index: -1;
opacity: 0;
transition: .5s;
}
.single-service-box:hover .shape-icon i{
opacity: 0.5;
}
/*style three*/
.service-area.style-three .single-service-box {
text-align: left;
padding: 0px 8px 26px 40px;
border-radius: 5px;
position: relative;
overflow: hidden;
box-shadow: 0 0px 19px rgb(0 0 0 / 8%);
border: 1px solid#EFF3F7;
}
.service-area.style-three .shape-icon {
position: absolute;
right: 205px;
top: -21px;
}
.service-area.style-three .service-content {
padding: 0 22px 0 95px;
}
.service-area.style-three .service-content-text p {
margin-bottom: 19px;
}
.service-area.style-three .service-title h2 {
margin: 27px 0 12px;
}
.service-area.style-three .single-service-icon {
margin-top: 75px;
float: left;
margin-right: 24px;
}
.service-btn a {
color: #303132;
text-transform: uppercase;
font-size: 14px;
display: inline-block;
margin-top: 2px;
}
.single-service-box:hover .service-btn a {
color: #fff;
}
.service-area.style-three .single-service-box:before {
background-image: linear-gradient( to right, #028bfe, #1EB9FC);
}
.mission-area .dreamit-section-main-title h2 {
font-size: 35px;
margin: 3px 0 0;
color: #fff;
}
/*--==========================================
bigfox service area
-=========================================*/
.bigfox-single-box {
position: relative;
transition: .5s;
}
.bigfox-single-service-box {
padding: 17px 61px 35px;
margin-bottom: 30px;
position: relative;
z-index: 1;
overflow: hidden;
text-align: center;
border-radius: 7px;
}
.bigfox-single-service-box:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient( to right, #028bfe, #1EB9FC);
z-index: -1;
opacity: 0;
transition: .5s;
}
.bigfox-single-box:hover .bigfox-single-service-box:before{
opacity: 1;
}
.bigfox-single-box:hover .bigfox-single-service-icon:before{
background: #fff;
color: #3DA9FD;
}
.bigfox-single-box:hover .bigfox-single-service-icon i{
color: #3DA9FD;
}
.bigfox-single-box:hover .bigfox-service-title h2,
.bigfox-single-box:hover .bigfox-service-content-text p,
.bigfox-single-box:hover .bigfox-shape-icon{
color: #fff;
}
.bigfox-single-box:hover .bigfox-service-btn a{
color: #88D4FE;
box-shadow: 0 0 27px rgb(0 0 0 /23%);
}
.bigfox-single-box:hover{
box-shadow: 0 0 27px rgb(0 0 0 /23%);
}
.bigfox-single-service-icon {
position: relative;
z-index: 1;
}
.bigfox-single-service-icon:before {
position: absolute;
content: "";
top: -93px;
left: -109px;
height: 140px;
width: 140px;
background: #01A9FC;
z-index: -1;
border-radius: 100%;
}
.bigfox-single-service-icon:after {
position: absolute;
content: "";
top: -81px;
left: -110px;
height: 140px;
width: 140px;
background: rgb(76,202,253,0.7);
z-index: -2;
border-radius: 100%;
}
.bigfox-single-service-icon span {
font-size: 34px;
color: #fff;
position: relative;
left: -168px;
top: -11px;
}
.bigfox-single-box:hover .bigfox-shape-icon{
opacity: 1;
opacity: 0.3;
}
.bigfox-service-title h2 {
font-size: 24px;
margin: 19px 0 15px;
transition: .5s;
}
.bigfox-service-content-text p {
color: #7A7A7A;
line-height: 1.5;
transition: .5s;
}
.bigfox-shape-icon {
position: absolute;
right: 43px;
top: 48%;
font-size: 80px;
opacity: 0;
transition: .5s;
}
.bigfox-service-btn {
position: absolute;
right: 0;
left: 46%;
bottom: -21px;
z-index: 1;
}
.bigfox-service-btn a {
height: 47px;
width: 47px;
line-height: 47px;
background: #F0F6F9;
display: inline-block;
text-align: center;
border-radius: 100%;
font-size: 13px;
transition: .5s;
}
/*--==========================================
Start why choose area
-=========================================*/
.why-choose-us-area {
background: #F0F3F8;
}
.single-choose-box {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);
background: #fff;
padding: 0px 0px 9px 15px;
margin-bottom: 30px;
border-bottom: 3px solid#0396fe;
position: relative;
border-radius: 3px;
margin-right: 28px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.choose-us-content {
margin-left: 31px;
}
.choose-title h2 {
font-size: 22px;
margin: 10px 0 8px;
}
.choose-number {
position: relative;
left: -55px;
top: 92px;
}
.choose-number h1{
position: relative;
z-index: 1;
}
.choose-number h1:before {
position: absolute;
content: "";
left: -12px;
top: -12px;
background: #0395fe;
height: 46px;
width: 46px;
z-index: -1;
transition: .5s;
border-radius: 3px;
}
.choose-number h1{
font-size: 16px;
color: #fff;
}
.single-choose-box :hover .choose-number h1:before {
transform: rotate(45deg);
}
.choose-content-text p {
line-height: 1.6;
margin-top: 12px;
}
/*style-two*/
.why-choose-us-area.style-two {
background: url(assets/images/red.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.why-choose-us-area.style-two .dreamit-section-main-title h1 {
top: -36px;
z-index: -1;
opacity: 0.1;
}
.why-choose-us-area.style-two .dreamit-section-sub-title h5 {
text-transform: capitalize;
font-size: 18px;
}
.why-choose-us-area.style-two .about-bg-bar:before {
background: #fff;
}
.why-choose-us-area.style-two .about-bg-bar:after {
background: #00AFFF;
}
.why-choose-us-area.style-two .dreamit-section-main-title h2 {
font-size: 32px;
margin-left: 20px;
}
.why-choose-us-area.style-two .dreamit-section-content-text p {
line-height: 1.5;
width: 80%;
font-size: 16px;
color: #fff;
margin: 27px 0 36px;
}
.dreamit-section-main-title h2 span {
color: #00AFFF;
}
.choose-us-box {
margin-bottom: 7px;
}
.why-choose-us-area.style-two .choose-icon {
margin-top: -6px;
position: relative;
}
.choose-content {
margin-left: 11px;
}
.choose-icon i {
font-size: 28px;
display: inline-block;
color: #00AFFF;
}
.why-choose-us-area.style-two .single-choose-box {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);
background: #fff;
padding: 5px 20px 17px 10px;
margin-bottom: 30px;
border-bottom: 0;
border-radius: 0;
margin-right: 10px;
transition: .5s;
}
.why-choose-us-area.style-two .single-choose-box:hover{
box-shadow: 0 0 20px 0 rgb(0 0 0 /20%);
transform:translateY(-10px);
}
.choose-content p {
color: #fff;
}
.why-choose-us-area.style-two .single-choose-box :hover .choose-number h1:before {
transform: rotate(0deg);
}
.why-choose-us-area.style-two .choose-number {
position: absolute;
right: 21px;
top: 6px;
}
.why-choose-us-area.style-two .choose-number h1 {
float: right;
}
.why-choose-us-area.style-two .choose-number h1 {
font-size: 80px;
color: #F3F4F6;
}
.why-choose-us-area.style-two .choose-number h1:before {
display: none;
}
.choose-us-icon i {
font-size: 60px;
display: inline-block;
margin: 22px 0 0px;
color: #1F3871;
}
.why-choose-us-area.style-two .choose-content-text p {
letter-spacing: 1px;
margin-top: 7px;
color: #888888;
}
/*--==========================================
Start counter area
-=========================================*/
.choose-us-area {
background: #F0F3F8;
}
.choose-us-area .dreamit-section-content-text p {
width: 41%;
margin: 27px auto 0px;
}
.single-choose-us-box {
margin-bottom: 30px;
}
.choose-us-number h1 {
font-size: 20px;
color: #0974D6;
margin: 0;
position: relative;
margin-top: 5px;
}
.choose-us-number h1:before {
position: absolute;
content: "";
top: 14px;
left: 30px;
height: 1px;
width: 63px;
background: #313131;
}
.choose-us-title h2 {
font-size: 24px;
margin: 0 0 16px;
}
.choose-us-content-text p {
color: #707070;
width: 80%;
line-height: 1.5;
}
.choose-us-area .choose-us-content {
margin-left: 77px;
}
/*--==========================================
Start counter area
-=========================================*/
.dreamit-single-counter {
margin-bottom: 30px;
padding: 47px 0;
}
.counter-icon {
float: right;
}
.counter-icon i {
height: 85px;
width: 85px;
line-height: 85px;
text-align: center;
background: #aa0505;
color: #fff;
border-radius: 100%;
font-size: 35px;
display: inline-block;
}
.counter-content {
float: right;
margin-right: 29px;
}
.counter-title h1 {
margin: 0;
color: #aa0505;
font-size: 40px;
font-weight: 700;
position: relative;
margin-left: 155px;
}
.counter-title h2 {
font-size: 24px;
margin: 0;
line-height: 1.3;
}
.single-counter {
text-align: center;
border-radius: 100%;
height: 375px;
width: 375px;
margin: 0 auto 30px;
position: relative;
z-index: 1;
}
.single-counter:before {
position: absolute;
top: -45px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
content: "";
height: 385px;
width: 385px;
background: #E6F2FF;
border-radius: 100%;
z-index: -1;
box-shadow: 0 0 40px #cce5ff;
}
.single-cunter-inner {
background: #fff;
border-radius: 100%;
overflow: hidden;
height: 330px;
width: 330px;
margin:auto;
}
.dreamit-counter-content {
background: #aa0505;
padding: 40px 0px 49px;
}
.counter-content-text h1 {
font-size: 100px;
color: #000000;
margin: 42px 0 0;
}
.dreamit-counter-title h2 {
font-size: 24px;
color: #fff;
}
.dreamit-single-counter.two .counter-icon {
float: left;
}
.dreamit-single-counter.two .counter-content {
float: left;
margin-left: 29px;
}
.dreamit-single-counter.two .counter-title h1 {
margin-left: 0;
}
/*--==============================================->
==================================================-*/
.bigfox-counter-area {
background: url(assets/images/counte.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.bigfox-single-counter {
margin-bottom: 40px;
}
.bigfox-counter-content {
margin-left: 139px;
}
.bigfox-counter-title h2 {
font-size: 24px;
color: #fff;
margin: 0 0 14px;
}
.counter-content-text p {
color: #fff;
width: 60%;
}
.counter-number h1 {
float: left;
height: 89px;
width: 89px;
line-height: 89px;
text-align: center;
border-radius: 100%;
background: #2C53A8;
display: inline-block;
color: #fff;
position: relative;
text-align: center;
z-index: 3;
font-size: 35px;
}
.counter-number h1:before {
position: absolute;
content: "";
top: -11px;
left: -12px;
background: rgb(41,78,156,0.7);
height: 113px;
width: 113px;
z-index: -1;
text-align: center;
border-radius: 100%;
}
.counter-number h1:after {
position: absolute;
content: "";
top: -19px;
left: -21px;
background: rgb(37,70,140,0.5);
height: 130px;
width: 130px;
z-index: -1;
text-align: center;
border-radius: 100%;
}
.counter-thumb {
position: relative;
margin-left: -180px;
top: -22px;
}
/*style two*/
.bigfox-counter-area.style-two {
background: url(assets/images/fox.png);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.bigfox-counter {
background: #fff;
padding: 13px 0 0px 38px;
border-bottom: 4px solid#0973D7;
}
.bigfox-counter-area.style-two .bigfox-counter-content {
margin-left: 162px;
}
.bigfox-counter-area.style-two .bigfox-single-counter {
margin-bottom: 2px;
border-bottom: 1px solid#F5F5F5;
position: relative;
padding: 19px 0 17px;
}
.bigfox-counter-area.style-two .bigfox-counter-title h2 {
color: #343233;
}
.bigfox-counter-area.style-two .counter-number h1:before {
display: none;
}
.bigfox-counter-area.style-two .counter-number h1:after {
display: none;
}
.bigfox-counter-area.style-two .counter-number h1 {
background: inherit;
color: #0876D8;
font-size: 50px;
}
.bigfox-counter-area.style-two .counter-content-text p {
color: #717171;
width: 68%;
}
.counter-shape-icon i {
font-size: 80px;
position: absolute;
top: 16px;
opacity: 0.2;
left: -12px;
}
.bigfox-counter-area.style-two .bigfox-counter-title h2 {
margin: 0 0 11px;
}
.bigfox-counter-area.style-two .bigfox-single-counter.two {
border-bottom: none;
}
/*--==============================================->
==================================================-*/
/* Portfolio Nav */
div#portfolio {
background: #F0F3F8;
}
.portfolio_nav {
margin-bottom: 48px;
}
.portfolio_menu ul {
list-style: none;
}
.fortfolio-addrees ul li {
display: inline-block;
}
.portfolio_menu ul li {
display: inline-block;
margin: 0 14px;
cursor: pointer;
}
.portfolio_menu ul li a{
display: block;
color:#fff;
text-transform:uppercase;
position:relative;
transition:.5s;
}
.portfolio_menu ul li a:before {
position: absolute;
content: "";
left: 0;
top: 24px;
height: 2px;
width: 0%;
background: #fff;
transition:.5s;
}
.portfolio_nav ul li {
background: transparent;
border: medium none;
font-size: 14px;
line-height: 1;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
cursor: pointer;
text-transform: uppercase;
padding: 16px 25px;
font-weight: 700;
letter-spacing: 0;
position: relative;
margin: 0 3px;
margin-bottom: 7px;
display: inline-block;
border-radius: 5px;
color: #001d23;
}
.portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
color: #fff;
background: #0286ff;
border-radius: 5px;
}
.dreamit-single-portfolio {
margin-bottom: 30px;
overflow: hidden;
}
.dreamit-single-portfolio {
margin-bottom: 30px;
overflow: hidden;
transition: .5s;
}
.dreamit-portfolio-thumb {
position: relative;
z-index: 1;
transition: .5s;
overflow: hidden;
}
.dreamit-portfolio-thumb img {
width: 100%;
transition: .5s;
border-radius: 5px;
}
.dreamit-forfolio-content {
margin: auto;
padding: 45% 53px 0;
border-radius: 5px;
position: relative;
z-index: 1;
text-align: center;
}
.dreamit-forfolio-content:before {
position: absolute;
content: "";
top: 0;
right: 0;
height: 100%;
width: 100%;
background: rgb(28,166,255,0.9);
z-index: -1;
border-radius: 5px;
transition: .5s;
}
.portfolio-icon i {
font-size: 68px;
color: #fff;
display: inline-block;
}
.fortfolio-title h3 a {
font-size: 25px;
color: #fff;
font-weight: 600;
}
.portfolio-content-text p {
color: #fff;
line-height: 1.5;
}
.fortfolio-title h3 {
margin: 12px 0 13px;
}
.dreamit-single-portfolio:hover .dreamit-forfolio-content{
opacity: 1;
}
.dreamit-forfolio-content {
position: absolute;
left: 0;
right: 0;
content: "";
bottom: 0;
z-index: 1;
opacity: 0;
transition: .5s;
height: 100%;
width: 100%;
}
.portfolio-thumb img {
width: 100%;
}
.port-icon-button a {
height: 44px;
width: 44px;
line-height: 45px;
background: #fff;
display: inline-block;
border-radius: 100%;
font-size: 20px;
color: #55aafe;
margin-top: 5px;
}
.dreamit-single-portfolio.two .dreamit-forfolio-content {
padding: 18% 108px 0;
}
.port-button a {
padding: 17px 35px;
background-image: linear-gradient( to right, #0088ff, #33b8ff);
color: #fff;
text-transform: uppercase;
font-size: 14px;
display: inline-block;
transition: .5s;
border-top-left-radius: 3px;
margin-top: 46px;
position: relative;
z-index: 1;
overflow: hidden;
transition: .5s;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.port-button a:hover {
background-image: linear-gradient( to right, #33b8ff, #0088ff);
}
.port-button a:hover:before {
background: #33b8ff;
}
.port-button a::before {
content: "";
position: absolute;
right: -126px;
bottom: 0;
height: 70px;
width: 165px;
background: #028BFF;
z-index: -1;
transform: skewX(-60deg);
transition: .5s;
}
.port-button span {
font-size: 18px;
position: relative;
left: 6px;
top: 1px;
}
/*style two*/
div#portfolio.style-two {
background: none;
}
.portfolio_area.style-two .dreamit-single-portfolio {
box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
}
.portfolio_area.style-two .dreamit-portfolio-thumb img {
border-radius: 0;
}
.portfolio_area.style-two .portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
color: #fff;
background: #2D4B8B;
}
.portfolio_area.style-two .portfolio_nav ul li {
border-radius: 0;
}
.portfolio_area.style-two .dreamit-portfolio-thumb img {
border-radius: 0;
}
.portfolio_area.style-two .dreamit-section-content-text p {
line-height: 1.5;
margin: 0px 0 0px;
width: 100%;
}
.portfolio_area.style-two .dreamit-section-main-title h2 {
font-size: 32px;
}
.port-content-icon span {
font-size: 16px;
color: #137AD7;
}
.portfolio_area.style-two .dreamit-section-sub-title h5 {
color: #6C7BA6;
text-transform: capitalize;
}
.portfolio_area.style-two .dreamit-section-main-title h2 span {
color: #01A2FD;
}
.dreamit-portfolio-thumb:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(121,110,153,0.6);
opacity: 0;
transition: .5s;
}
.portfolio_area.style-two .dreamit-single-portfolio:hover .dreamit-portfolio-thumb{
transform:scale(1.2);
}
.portfolio_area.style-two .dreamit-single-portfolio:hover .dreamit-portfolio-thumb:before{
opacity: 1!important;
}
.portfolio-content{
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 12%);
background: #fff;
padding: 22px 0 22px 31px;
position: relative;
z-index: 1;
}
.portfolio-content:before {
position: absolute;
content: "";
top: 0;
right: 0;
background: #1C376E;
height: 96px;
width: 85px;
opacity: 0;
transition: .5s;
}
.portfolio-content:after {
position: absolute;
content: "";
top: 0;
left: 0;
background: #2d4989;
height: 108px;
width: 332px;
opacity: 0;
transition: .5s;
z-index: -1;
}
.dreamit-single-portfolio.three .portfolio-content:after {
position: absolute;
content: "";
top: 0;
left: 0;
background: #2d4989;
height: 108px;
width: 552px;
opacity: 0;
transition: .5s;
z-index: -1;
}
.dreamit-single-portfolio:hover .portfolio-content:before{
opacity: 1;
}
.dreamit-single-portfolio:hover .portfolio-content:after{
opacity: 1;
}
.dreamit-single-portfolio:hover .portfolio-title h2,
.dreamit-single-portfolio:hover .port-content-icon i,
.dreamit-single-portfolio:hover .portfolio-title span i,
.dreamit-single-portfolio:hover .portfolio-title span{
color: #fff;
}
.portfolio-title h2 {
font-size: 20px;
color: #1A2940;
margin: 0 0 6px;
transition: .5s;
}
.portfolio-title span{
transition: .5s;
}
.portfolio-title span i {
font-size: 14px;
color: #6C7BA6;
}
.port-content-icon {
float: right;
position: relative;
top: -40px;
right: 23px;
}
/*portfolio style three*/
div#portfolio.style-three {
background: #fff;
position: relative;
}
.portfolio_area.style-three .portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
color: #fff;
background: #0973D7;
border-radius: 5px;
}
.portfolio_area.style-three .dreamit-single-portfolio {
box-shadow: 0 3px 12px rgb(0 0 0 / 10%);
}
.portfolio_area.style-three .dreamit-section-content-text p {
line-height: 1.5;
margin: 21px auto 0px;
width: 38%;
}
.portfolio_area.style-three .portfolio-content {
padding: 22px 0 24px 31px;
}
.portfolio_area.style-three .dreamit-portfolio-thumb:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(25,90,177,0.7);
opacity: 0;
transition: .5s;
}
.fortfolio-addrees ul li a {
height: 50px;
width: 50px;
line-height: 50px;
border: 1px solid#fff;
display: inline-block;
text-align: center;
border-radius: 100%;
color: #fff;
z-index: 1;
transition: .5s;
opacity: 0;
}
.fortfolio-addrees {
position: absolute;
top: 39%;
left: 48%;
}
.portfolio_area.style-three .dreamit-single-portfolio:hover .fortfolio-addrees ul li a{
opacity: 1;
}
.portfolio_area.style-three .dreamit-single-portfolio .fortfolio-addrees ul li a:hover{
background:#fff;
color: #1CA2FE;
}
.portfolio_area.style-three .dreamit-single-portfolio:hover .dreamit-portfolio-thumb:before{
opacity: 1;
}
.portfolio_area.style-three .portfolio-content:before {
display: none;
}
.portfolio_area.style-three .portfolio-content:after {
display: none;
}
.portfolio_area.style-three .dreamit-single-portfolio:hover .portfolio-title h2{
color: #0B73D6;
}
.portfolio_area.style-three .dreamit-single-portfolio:hover .port-content-icon i{
color: #353334;
}
.portfolio_area.style-three .dreamit-single-portfolio:hover .portfolio-title span{
color: #7C7C7C;
}
.portfolio_area.style-three .portfolio_menu ul {
text-align: center;
}
.portfolio_area.style-three .dreamit-single-portfolio:hover .portfolio-title span i{
color:#6C7BA6;
}
.port-shape {
position: absolute;
left: 0;
top: -10px;
}
/*--==============================================->
==================================================-*/
.port-folio-details-single-box {
margin-right: 2px;
}
.port-details-thumb img {
width: 100%;
}
.prtfolio-details-area .dreamit-section-main-title h2 {
font-size: 30px;
margin: 3px 0 0;
text-transform: capitalize;
color: #232323;
}
.prtfolio-details-area .dreamit-section-content-text p {
width: 85%;
}
.portfolio-details-content {
background: #F0F3F8;
padding: 26px 28px 5px;
}
.fotfolio-details-body ul li {
margin-bottom: 18px;
color: #01A2FD;
text-transform: capitalize;
}
.port-folio-details-btn {
margin-top: 32px;
}
.port-folio-details-btn a {
display: block;
border:1px solid#0E91FF;
background:#0874D7;
padding: 11px 4px;
transition: .5s;
text-align: center;
text-transform: capitalize;
color: #fff;
border-radius: 4px;
position: relative;
z-index: 1;
}
.port-folio-details-btn a:hover{
color: #fff;
}
.port-folio-details-btn a:before {
position: absolute;
content: '';
width: 0;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient( to right, #0088ff, #33b8ff);
opacity: 0;
visibility: hidden;
z-index: -1;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
border-radius: 4px;
}
.port-folio-details-btn a:hover:before {
opacity: 1;
visibility: visible;
width: 100%;
}
.portfolio-details-social-address {
margin-top: 28px;
}
.portfolio-details-social-address ul li {
display: inline-block;
margin-right: 3px;
}
.portfolio-details-social-address ul li a {
height: 45px;
width: 45px;
line-height: 47px;
border: 1px solid#078FFF;
display: inline-block;
text-align: center;
transition: .5s;
border-radius: 4px;
font-size: 26px;
}
.portfolio-details-social-address ul li a:hover {
border-color: #0890FF;
background: #0890FF;
color: #fff;
}
.porfolio-details-content-text p {
color: #313035;
line-height: 1.6;
width: 94%;
}
/*owl dot*/
.prtfolio-details-area .owl-dot {
height: 21px;
width: 21px;
background: #69bcfa;
margin: 21px 4px 8px 5px;
display: inline-block;
border-radius: 100%;
transition: .5s;
}
.prtfolio-details-area .owl-dot.active {
width: 21px;
height: 21px;
background: #0393fd;
}
/*--==============================================->
==================================================-*/
.team-member-single-box {
margin-bottom: 30px;
transition: .5s;
position: relative;
}
.team-member-thumb{
position: relative;
overflow: hidden;
transition: .5s;
}
.team-member-thumb img {
width: 100%;
}
.team-social-address {
position: absolute;
left: 50px;
top: 92%;
opacity: 0;
transition: .5s;
}
.team-social-address ul li a {
height: 35px;
width: 35px;
line-height: 35px;
background: #0398fe;
color: #fff;
display: inline-block;
margin: 0 0 6px;
text-align: center;
border-radius: 100%;
transition: .5s;
}
.team-member-single-box:hover .team-social-address {
top: 48%;
opacity: 1;
}
.team-content {
background: #fff;
text-align: center;
position: relative;
margin: -30px auto 0;
width: 85%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 0px 0 25px;
transition: .5s;
}
.team-content span.active {
position: relative;
z-index: 1;
left: -89px;
top: -6px;
opacity: 0;
transition: .5s;
}
span.active i {
color: #0281ff;
}
.team-member-single-box:hover .team-content span.active{
opacity: 1;
}
.team-content span.active:before {
position: absolute;
content: "";
left: -11px;
top: -9px;
background: #fff;
height: 36px;
width: 35px;
z-index: -1;
text-align: center;
transform: rotate(45deg);
}
.team-member-single-box:hover .team-content {
box-shadow: 0 9px 31px rgb(12 12 12 / 16%);
}
.team-title h2 {
font-size: 20px;
margin-bottom: 5px;
transition: .5s;
}
.team-title h2:hover {
color: #0281ff;
}
/*team style two*/
.team-member-area.style-two {
background: #F0F3F8;
}
.team-member-area.style-two .dreamit-section-content-text p {
width: 100%;
margin: 0px 0 0px;
}
.team-member-area.style-two .dreamit-section-main-title h2 {
font-size: 32px;
}
.team-member-area.style-two .dreamit-section-sub-title h5 {
color: #304A85;
text-transform: capitalize;
}
.team-member-area.style-two .dreamit-section-main-title h2 span {
color: #01A2FD;
font-weight: 800;
}
.team-member-area.style-two .team-member-thumb:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(126,140,167,0.6);
transition: .5s;
opacity: 0;
}
.team-member-area.style-two .team-member-single-box:hover .team-member-thumb:before{
opacity: 1;
}
.team-member-area.style-two .team-social-address ul li a {
border-radius: 0;
}
.team-social-address ul li a:hover {
background: #fff;
color: #2C4B8B;
}
.team-member-area.style-two .team-content {
text-align: left;
border-radius: 0;
padding: 0px 27px 25px;
width: 100%;
transition: .5s;
position: relative;
z-index: 1;
}
.team-member-area.style-two span.active i {
color: #fff;
}
.team-member-area.style-two .team-content span.active {
position: relative;
z-index: 1;
left: 245px;
top: 4px;
opacity: 0;
transition: .5s;
color: #fff;
}
.team-member-area.style-two .team-social-address {
position: absolute;
right: 10px;
top: 92%;
opacity: 0;
transition: .5s;
left: inherit;
}
.team-member-area.style-two .team-member-single-box:hover .team-social-address{
opacity: 1;
top: 50%;
}
.team-member-area.style-two .team-member-single-box:hover .team-content span.active {
opacity: 1;
}
.team-member-area.style-two .team-content:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #2D4B8B;
z-index: -1;
opacity: 0;
transition: .5s;
}
.team-member-area.style-two .team-content span.active:before {
background: #2D4B8B;
z-index: -1;
}
.team-member-area.style-two .team-member-single-box:hover .team-content:before{
opacity: 1;
}
.team-member-area.style-two .team-member-single-box:hover .team-title h2,
.team-member-area.style-two .team-member-single-box:hover .team-content span.active,
.team-member-area.style-two .team-member-single-box:hover .team-title span{
color: #fff;
}
/*style three*/
.team-member-area.style-three .team-member-single-box {
margin-right: 23px;
}
.team-member-area.style-three .dreamit-section-content-text p {
width: 42%;
margin: 27px auto 0px;
color: #4F4F4F;
}
.team-member-area.style-three .team-content {
width: 100%;
margin:0;
}
.team-member-area.style-three .team-member-thumb:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(115,168,217,0.7);
border-radius: 100%;
opacity: 0;
transition: .5s;
}
.team-member-area.style-three .team-member-single-box:hover .team-member-thumb:before {
opacity: 1;
}
.team-member-area.style-three .team-member-thumb img {
border-top: 0px solid#0874D7;
border-radius: 50%;
border-right: 13px solid#0874D7;
border-left: outset transparent;
border-bottom: outset transparent;
}
.team-member-area.style-three .team-member-single-box:hover .team-content {
box-shadow:none;
}
.team-member-area.style-three .team-social-address ul li {
display: inline-block;
}
.team-member-area.style-three .team-social-address {
left: 69px;
}
.team-member-area.style-three span.active i {
color: #fff;
}
.team-title span {
color: #707070;
}
.team-member-area.style-three .team-social-address {
position: absolute;
right: -109px;
top: 47%;
opacity: 0;
transition: .5s;
left: inherit;
}
.team-member-area.style-three .team-member-single-box:hover .team-social-address {
right: 50px;
opacity: 1;
}
.team-member-area.style-three span.active {
color: #fff;
font-size: 17px;
margin: 0;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
background: #0973D7;
border-radius: 100%;
position: relative;
z-index: 1;
}
.team-member-area.style-three span.active:before {
position: absolute;
content: "";
top: -5px;
left: -5px;
height: 50px;
width: 50px;
background: rgb(9,115,215,0.7);
border-radius: 100%;
z-index: -1;
}
.team-member-area.style-three span.active {
position: absolute;
top: 34%;
right: -16px;
}
.team-member-area.style-three .team-title h2 {
font-size: 24px;
margin-bottom: 3px;
margin-top: 18px;
}
span.top {
color: #fff;
font-size: 17px;
margin: 0;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
background: #0973D7;
border-radius: 100%;
position: relative;
z-index: 1;
}
span.top:before {
position: absolute;
content: "";
top: -5px;
left: -5px;
height: 50px;
width: 50px;
background: rgb(9,115,215,0.7);
border-radius: 100%;
z-index: -1;
}
.team-member-area.style-three .team-member-single-box:hover span.active{
opacity: 0;
}
.team-member-area.style-three .team-member-single-box:hover span.top{
opacity: 1;
}
span.top {
position: absolute;
top: 34%;
right: 0;
opacity: 0;
right: -16px;
}
/*--==============================================->
==================================================-*/
.client-reivew-area {
background: url(assets/images/client.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.client-reivew-area .dreamit-section-main-title h2 {
font-size: 32px;
color: #fff;
}
.client-reivew-area .dreamit-section-sub-title h5 {
color: #CCCAD5;
text-transform: capitalize;
}
.client-reivew-area .dreamit-section-content-text p {
width: 24%;
font-size: 15px;
margin: 28px auto 0px;
color: #fff;
line-height: 1.6;
}
.review-button a {
padding: 19px 25px;
background: #fff;
font-size: 14px;
display: inline-block;
transition: .5s;
color: #6A7BA6;
margin-top: 31px;
position: relative;
z-index: 1;
overflow: hidden;
}
.review-button a:before {
position: absolute;
content: "";
top: 0;
left: 101px;
background: #028BFF;
height: 85px;
width: 91px;
transform: skewX(-58deg);
z-index: -1;
opacity: 0;
}
.review-button a:hover {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
color: #fff;
}
.review-button a:hover:before {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
opacity: 1;
}
/*--==============================================->
==================================================-*/
.testimonial-area {
background: #eff3f7;
}
.testimonial-single-box {
text-align: center;
margin-bottom: 30px;
margin-right: 30px;
}
.testomonial-content {
background: #fff;
padding: 41px 49px 100px;
border-radius: 5px;
}
.testimonial-icon i {
color: #0399fe;
font-size: 40px;
display: inline-block;
}
.testimonial-content-text p {
line-height: 1.6;
margin: 31px 0 0;
}
.testimonial-thumb {
position: relative;
margin-top: -54px;
}
.testimonial-title h2 {
font-size: 18px;
margin: 15px 0 5px;
}
/*owl dots*/
.owl-dots {
text-align: center;
transition: .5s;
}
.owl-dot {
height: 6px;
width: 35px;
background: #69bcfa;
margin: 15px 4px 8px 5px;
display: inline-block;
border-radius: 5px;
transition: .5s;
}
.owl-dot.active {
width: 50px;
background: #0393fd;
height: 7px;
}
/*style-two*/
.testimonial-area.style-two {
background: none;
}
.row.upper {
position: relative;
margin-top: -99px;
}
.testimonial-area.style-two .testimonial-single-box {
background: #fff;
padding: 31px 0 37px;
border: 1px solid#EEEEEE;
}
.testimonial-area.style-two .testimonial-thumb {
position: relative;
margin-top: 0;
}
.testimonial-area.style-two .testomonial-content {
padding: 8px 49px 0px;
border-radius:0;
}
.testimonial-area.style-two .testimonial-content-text p {
line-height: 1.5;
margin: 21px 0 0;
color: #707070;
font-size: 16px;
letter-spacing: 0.1px;
}
.testi-icon-menu {
margin-top: 20px;
}
.testi-icon-menu ul li {
display: inline-block;
}
.testi-icon-menu ul li i {
font-size: 13px;
color: #30498B;
display: inline-block;
}
/*owl dot style two*/
.testimonial_list2 .owl-dot {
height: 20px;
width: 20px;
background: #30498B;
margin: 4px 4px 8px 5px;
border-radius: 100%;
}
.testimonial_list2 .owl-dot.active {
width: 20px;
background: #30498B;
height: 20px;
border: 3px solid#01A2FD;
}
/*--==============================================->
==================================================-*/
.blog-single-box {
transition: .5s;
margin-bottom: 22px;
}
.blog-thumb{
position: relative;
overflow: hidden;
}
.blog-thumb img {
width: 100%;
}
.post-catagories {
height: 80px;
width: 67px;
background: #04a0ff;
text-align: center;
position: absolute;
top: 0;
border-top-left-radius: 10px;
border-bottom-right-radius: 7px;
}
.post-title h2 {
color: #fff;
font-size: 28px;
margin: 10px 0 0;
transition: .5s;
}
.blog-area .post-title span {
font-size: 16px;
font-weight: 400;
}
.blog-title a h2:hover {
color: #028bfe;
}
span.month {
color: #fff;
font-size: 16px;
}
.blog-content {
box-shadow: 0 1px 15px rgb(0 0 0 / 7%);
padding: 24px 47px 31px 30px;
width: 83%;
margin: auto;
position: relative;
margin-top: -39px;
background: #fff;
transition: .5s;
border-radius: 5px;
}
.blog-single-box:hover .blog-content{
box-shadow: 0 9px 31px rgb(12 12 12 / 16%);
}
.blog-title h2 {
font-size: 20px;
margin: 0 0 12px;
}
.blog-content-text p {
line-height: 1.6;
color: #717171;
}
.blog-button a {
height: 40px;
width: 40px;
line-height: 40px;
background: #47b7fe;
display: inline-block;
color: #fff;
font-size: 22px;
border-radius: 100%;
margin-top: 6px;
transition: .5s;
}
.blog-button a:hover {
background-image: linear-gradient( to right, #0088ff, #33b8ff);
}
/*blog style two*/
.blog-area.style-two {
background: #F0F3F8;
}
.blog-area.style-two .dreamit-section-sub-title h5 {
color: #2C4A88;
text-transform: capitalize;
}
.blog-area.style-two .dreamit-section-main-title h2 {
font-size: 32px;
margin: 3px 0 0;
}
.blog-area.style-two .blog-thumb:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(31,105,170,0.7);
transform: scale(0);
transition: .5s;
}
.blog-area.style-two .blog-single-box:hover {
box-shadow: 0 8px 18px rgb(12 12 12 / 7%);
}
.blog-area.style-two .blog-single-box:hover .blog-thumb:before{
transform: scale(1.1);
opacity: 1;
}
.blog-area.style-two .blog-title h2 {
margin: 6px 0 10px;
}
.blog-area.style-two .blog-content {
box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
padding: 17px 47px 0px 32px;
width: 100%;
border-radius: 0;
}
.blog-area.style-two .blog-content-text p {
line-height: 1.6;
margin-top: 13px;
margin-bottom: 0;
color: #7C7C7C;
letter-spacing: 0.1px;
}
.blog-area.style-two .blog-title a h2:hover {
color: #2C4A88;
}
.blog-area.style-two .blog-button {
position: relative;
top: 16px;
}
.blog-meta-box span i {
color: #1CA2FE;
margin-right: 6px;
}
.blog-meta-box span {
margin-right: 13px;
color: #B3B3B3;
}
.blog-meta-box a {
color: #A5A5A5;
}
.blog-meta-box a i {
margin-right: 6px;
color: #1CA2FE;
}
.blog-area.style-two .blog-button a {
background: #2D4B8B;
opacity: 0;
font-size: 16px;
}
.blog-single-box:hover .blog-button a {
opacity: 1;
}
.blog-area.style-two .blog-button a:hover {
background-image: linear-gradient( to right, #0088ff, #33b8ff);
}
.blog-area.style-two .port-button a {
background: #2D4B8B;
border-radius: 0;
margin-top: 41px;
}
.blog-area.style-two .port-button a::before {
opacity: 0
}
.blog-area.style-two .blog-button a:hover {
background-image: linear-gradient( to right, #0088ff, #33b8ff);
}
.blog-area.style-two .port-button a:hover:before{
opacity: 1;
}
.blog-area.style-two .port-button a:hover {
background-image: linear-gradient( to right, #33b8ff, #0088ff);
}
/*style-three*/
.blog-area.style-three {
background: #F0F3F8;
}
.blog-area.style-three .dreamit-section-content-text p {
margin: 21px auto 7px;
width: 41%;
}
.blog-area.style-three .blog-single-box {
transition: .5s;
margin: 0 12px 31px 20px;
}
.blog-area.style-three .blog-thumb:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(31,105,170,0.7);
transform: scale(0);
transition: .5s;
}
.blog-area.style-three .blog-single-box:hover {
box-shadow: 0 8px 18px rgb(12 12 12 / 7%);
}
.blog-area.style-three .blog-single-box:hover .blog-thumb:before{
transform: scale(1.1);
opacity: 1;
}
.blog-area.style-three .blog-content {
box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
padding: 17px 47px 0px 32px;
width: 100%;
border-radius: 0;
}
.blog-area.style-three .blog-content-text p {
line-height: 1.6;
margin-top: 13px;
margin-bottom: 0;
color: #7C7C7C;
letter-spacing: 0.1px;
}
.blog-area.style-three .blog-button a {
background: #2D4B8B;
opacity: 0;
}
.blog-single-box:hover .blog-button a {
opacity: 1;
}
.blog-area.style-three .blog-button a:hover {
background-image: linear-gradient( to right, #0088ff, #33b8ff);
}
.blog-area.style-three .port-button a {
background: #0973D7;
border-radius: 0;
}
.blog-area.style-three .port-button a::before {
opacity: 0
}
.blog-area.style-three .blog-button a:hover {
background-image: linear-gradient( to right, #0088ff, #33b8ff);
}
.blog-area.style-three .port-button a:hover:before{
opacity: 1;
}
.blog-area.style-three .port-button a:hover {
background-image: linear-gradient( to right, #33b8ff, #0088ff);
}
.blog-area.style-three .blog-button {
position: relative;
top: 15px;
}
/*blog grid*/
.blog-area.style-three.topper .blog-content {
padding: 17px 47px 28px 32px;
}
.blog-area.style-three.topper .blog-single-box:hover .blog-thumb:before{
transform: scale(0.0);
opacity: 0;
}
.blog-area.style-three.topper .blog-single-box {
margin-right: 0px;
margin-left: 0px;
}
.blog-area.style-three.topper .blog-single-box:hover {
box-shadow: 0 16px 26px rgb(12 12 12 / 20%);
}
/*--==============================================->
==================================================-*/
/*animation dance*/
.dance3 {
-webkit-animation: dance3 8s alternate infinite;
}
@keyframes dance3 {
0% {
-webkit-transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
}
}
.dance {
-webkit-animation: dance 2s alternate infinite;
}
@keyframes dance {
0% {
-webkit-transform: scale(0.5);
}
100% {
-webkit-transform: scale(1.2);
}
}
.dance2 {
-webkit-animation: dance2 4s alternate infinite;
}
@keyframes dance2 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(25px, -25px, 0);
}
100% {
-webkit-transform: translate3d(0, -25px, 25px);
}
}
.watermark-animate {
-webkit-animation: watermark-animate 8s infinite;
animation: watermark-animate 8s infinite;
animation-direction: alternate-reverse;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes watermark-animate {
0% {
left: 0;
}
100% {
left: 100%;
}
}
/*--==============================================->
==================================================-*/
.bigfox-subscribe-area {
background: #018bfd;
}
.subscribe-title h2 {
color: #fff;
font-size: 32px;
font-weight: 700;
margin: 0 0 8px;
}
.subscribe-content-text p {
color: #fff;
}
.subscribe-icon {
position: relative;
z-index: 1;
top: -2px;
left: 59px;
background: #2C53A8;
height: 90px;
width: 90px;
text-align: center;
border-radius: 100%;
}
.subscribe-icon:before {
position: absolute;
content: "";
top: -11px;
left: -11px;
background: rgb(41,78,156,0.5);
height: 113px;
width: 113px;
z-index: -1;
text-align: center;
border-radius: 100%;
}
.subscribe-icon:after {
position: absolute;
content: "";
top: -19px;
left: -20px;
background: rgb(37,70,140,0.3);
height: 130px;
width: 130px;
z-index: -1;
text-align: center;
border-radius: 100%;
}
.subscribe-icon i {
color: #fff;
font-size: 47px;
display: inline-block;
margin-top: 21px;
}
/*style-two*/
.bigfox-subscribe-area.style-two {
background: #1C376E;
}
.bigfox-subscribe-area.style-two .subscribe-icon:before {
display: none;
}
.bigfox-subscribe-area.style-two .subscribe-icon:after {
display: none;
}
.bigfox-subscribe-area.style-two .subscribe-icon i {
transform: rotate(-44deg);
margin-top: 32px;
}
.bigfox-subscribe-area.style-two .subscribe-icon {
top: -6px;
left: 36px;
background: #fff;
height: 112px;
width: 112px;
border-radius: 0;
transform: rotate(45deg);
}
.bigfox-subscribe-area.style-two input.subscribe-mail-box {
border-radius: 0;
}
.bigfox-subscribe-area.style-two .subscribe-area button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.bigfox-subscribe-area.style-two .subscribe-icon i {
color: #01A2FD;
}
/*style three*/
.bigfox-subscribe-area.style-three {
background: #0973D7;
}
.bigfox-subscribe-area.style-three input.subscribe-mail-box {
border-radius: 0;
}
.bigfox-subscribe-area.style-three .subscribe-area button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/*--==============================================->
==================================================-*/
.breatcome-area {
background: url(assets/images/newsback.jpg);
height: 370px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.breatcome-content-title h1 {
font-size: 50px;
margin: 0 0 15px;
text-transform: capitalize;
}
.breatcome-content-text ul li a {
color: #fff;
text-transform: uppercase;
display: inline-block;
font-weight: 700;
}
.breatcome-content-text ul li i {
color: #fff;
margin: 0 8px;
}
.breatcome-content-text ul li span {
color: #fff;
text-transform: uppercase;
font-weight: 700;
}
/*====================================================
--< bigfox why-join-us Css -->
======================================================*/
.why-join-us {
padding: 110px 0 70px;
}
.dreamit-section-title p {
font-size: 16px;
margin: 15px 5px 0 0;
}
.join-content h4 {
font-size: 20px;
color: #133344;
position: relative;
margin: 0;
}
.join-content h4::before {
position: absolute;
content: "";
top: 21px;
left: 172px;
height: 1px;
width: 37px;
background: #D00A2B;
}
.join-content h2 {
font-size: 55px;
color: #0A2C3D;
line-height: 1.2;
margin: 6px 0 10px;
}
.join-content h2 span {
color: #D00A2B;
}
.join-content p {
font-size: 16px;
color: #5c727d;
margin: 0;
line-height: 1.5;
}
.join-button {
margin-top: 33px;
}
.join-button a {
display: inline-block;
font-size: 16px;
text-decoration: none;
background: #35A5FE;
color: #fff;
text-transform: uppercase;
padding: 11px 26px;
transition: .5s;
border-radius: 5px;
}
.join-button a:hover{
background: #1C3A76;
}
.singles-joins-box {
background: #fff;
text-align: center;
padding: 35px 74px;
box-shadow: 1px 4px 15px 8px rgb(0 0 0 / 10%);
margin-bottom: 30px;
border-radius: 5px;
}
.joins-titles h3 {
font-size: 20px;
color: #333;
margin: 0;
line-height: 1.3;
}
.singles-joinss-box {
background: #fff;
text-align: center;
padding: 35px 74px;
box-shadow: 1px 4px 15px 8px rgb(0 0 0 / 10%);
margin-bottom: 30px;
border-radius: 5px;
position: relative;
top: -40px;
}
/*====================================================
--< bigfox .circular-area Css -->
======================================================*/
.circular-area {
padding: 100px 0 0;
background: #F6F7F9;
}
.circular-area .section-title {
text-align: center;
margin-bottom: 50px;
}
.circular-area .section-title h5 {
font-size: 20px;
color: #d00a2b;
font-family: Nunito;
font-weight: 800;
text-transform: uppercase;
}
.circular-area .section-title h1 {
font-size: 50px;
color: #0A2C3D;
}
.circular-area .section-title h1 span {
color: #D00A2B;
}
.single-circular-box {
background: #FFFFFF;
padding: 20px 32px 0;
border-radius: 10px;
margin-bottom: 30px;
transition: .5s;
}
.circular-thumb {
float: left;
margin: 2px 25px 20px 0;
}
.circular-thumb img {
background: #F6F7F9;
padding: 22px 24px;
border-radius: 5px;
}
.circular-title {
position: relative;
top: 15px;
}
.circular-title h3 {
font-size: 26px;
color: #333;
margin: 0;
transition: .5s;
}
.circular-title p {
font-size: 16px;
color: #5c727d;
margin: 0;
transition: .5s;
}
.circular-btn {
text-align: right;
position: relative;
top: -42px;
}
.circular-btn a {
display: inline-block;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #01A2FD;
padding: 12px 22px;
border-radius: 5px;
color: #333;
font-weight: 600;
}
.single-circular-box:hover {
background: #1CA2FE;
}
.single-circular-box:hover .circular-title h3{
color: #fff;
}
.single-circular-box:hover .circular-title p{
color: #fff;
}
.single-circular-box:hover .circular-btn a{
color: #0A2C3D;
background: #fff;
}
/*====================================================
--< bigfox calls-do-actions Css -->
======================================================*/
.calls-do-actions {
padding: 65px 0 165px;
background: #F6F7F9;
margin: 0 0 -67px;
}
.calls-do-actions .section-title {
text-align: center;
}
.calls-do-actions .section-title h1 {
font-size: 55px;
font-weight: bold;
font-family: Rajdhani;
margin-bottom: 15px;
margin-top: 16px;
color: #0A2C3D;
}
.calls-do-actions .section-title h5 {
font-size: 32px;
color: #5c727d;
font-family: Nunito;
font-weight: 600;
}
.calls-do-button {
text-align: center;
position: relative;
top: 27px;
}
.calls-do-button a {
display: inline-block;
font-size: 16px;
text-decoration: none;
background: #01A2FD;
color: #fff;
text-transform: uppercase;
padding: 11px 26px;
transition: .5s;
border-radius: 5px;
}
.calls-do-button a:hover {
background: #1C3A76;
}
/*====================================================
--< ITplot .career-details Css -->
======================================================*/
.career-details {
padding: 100px 0 90px;
}
.details-title h2 {
font-size: 46px;
color: #000000;
margin: 0;
}
.details-title h3 {
font-size: 26px;
color: #000000;
font-weight: 600;
margin: 15px 0;
}
.details-title p {
font-size: 16px;
margin: 0;
color: #5c727d;
line-height: 1.4;
}
.details-text {
margin-top: 30px;
}
.details-text h4 {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px;
}
.details-text p {
margin: 0 0 5px 30px;
position: relative;
}
.details-text p::before {
position: absolute;
content: "";
top: 14px;
left: -33px;
height: 1px;
width: 15px;
background: #D00A2B;
}
.details-text p::after {
position: absolute;
content: "";
top: 12px;
left: -18px;
height: 6px;
width: 6px;
border-radius: 5px;
background: #D00A2B;
}
.details-text h3 {
font-size: 26px;
color: #000000;
font-weight: 600;
margin: 16px 0 0;
}
.singles-details-box {
box-shadow: 1px 4px 15px 8px rgb(0 0 0 / 10%);
padding: 25px 30px 20px;
position: relative;
border-radius: 5px;
}
.singles-details-box::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 4px;
width: 100%;
background: #D00A2B;
}
.singles-details-box h4 {
font-weight: 600;
font-size: 25px;
color: #000000;
font-family: 'Rajdhani', sans-serif;
}
.details-thumb {
margin: 20px 0 0;
}
.details-thumb img {
float: left;
margin: 6px 20px 25px 0;
}
.deta-title span {
font-size: 16px;
color: #5c727d;
}
.deta-title h5 {
margin: 0;
font-size: 17px;
color: #333;
}
.deta-title {
margin-left: 37px;
}
.details-button {
margin-top: 40px;
}
.details-button a {
display: inline-block;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
background: #0973D7;
padding: 12px 20px;
color: #fff;
border-radius: 5px;
transition: .5s;
}
.details-button a:hover{
background: #01A2FD;
}
/*
*/
.bd-video.upper {
position: absolute;
top: 15%;
left: 61%;
}
.video-area .video-bg {
background: url(assets/images/CD2025-2026.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 200px 0;
border-radius: 10px;
position: relative;
margin-bottom: -101px;
}
.video-title h4 {
font-size: 30px;
color: #fff;
text-align: right;
margin-right: 35px;
}
.video-button a {
display: inline-block;
padding: 16px 35px;
background: #fff;
color: #262729;
font-size: 18px;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
font-family: 'Rajdhani';
margin: 18px 0 0 110px;
position: relative;
z-index: 1;
transition: .5s;
text-decoration: none;
}
.video-button a::before {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
content: '';
z-index: -1;
-webkit-transition: 0.5s;
transition: 0.5s;
transform: scale(0.0, 1);
opacity: 0;
border-radius: 3px;
}
.video-button span {
margin-left: 6px;
}
.video-button i {
display: inline-block;
color: #ED411D;
font-size: 23px;
transition: .5s;
}
.video-button a:hover::before {
transform: scale(1, 1);
opacity: 1;
background: #67B3FE;
color: #fff;
}
.video-button a:hover {
color: #fff;
}
.video-button:hover i{
color: #fff;
}
/*
*/
.mission-area {
background: url(assets/images/vission.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 105px 0 108px;
}
.col-lg-6.col-md-6.mission {
padding: 0 0 0 46px;
}
.mission-area .dreamit-section-title p {
margin: 15px 0 0;
color: #bec6cc;
}
.mission-area .dreamit-section-title {
margin-bottom: 25px;
}
.mission-area .dreamit-section-title:after {
left: 25px;
}
.mission-area .elementor-about-title p {
padding-bottom: 5px;
}
/*mission single box*/
.col-lg-6.mission-box {
position: relative;
z-index: 1;
}
.mission-area .section-title h1 {
color: #fff;
}
.mission-area .section-title p {
width: 100%;
}
.mission-single-box {
position: absolute;
z-index: 1;
bottom: -108px;
right: -1px;
background: url(assets/images/mission-bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 30px 50px 25px;
}
.mission-title h2 {
font-size: 18px;
line-height: 34px;
color: #fff;
}
/*
*/
.planing-area {
background: #F4F7F8;
}
.planing-area .dreamit-section-title {
margin-bottom: 50px;
}
.dreamit-single-planing-box {
margin-bottom: 30px;
}
.single-planing-thumb img {
width: 100%;
}
.planing-content {
background: #fff;
padding: 25px 40px 15px;
}
.planing-title h3 {
font-size: 20px;
padding: 0 0 10px;
}
/*
*/
.vission-area {
background: url(assets/images/ssion.jpg);
background-position: center;
background-repeat: no-repeat;
padding: 58px 0 105px;
}
.vission-area .elementor-about-title p {
padding-bottom: 5px;
}
/*--==============================================->
==================================================-*/
.contact-area {
background: #F0F4F8;
}
.single-contact-box {
box-shadow: 0 14px 19px rgb(0 0 0 / 8%);
padding: 42px 0 38px 40px;
margin-bottom: 30px;
transition: .5s;
}
.bigfox-contact-address {
margin-bottom: 27px;
}
.bigfox-contact-address p {
margin: 0 0 6px;
}
.bigfox-contact-address span {
font-size: 20px;
color: #303036;
}
.contact-social-address ul li {
margin: 0 11px 0 0;
display: inline-block;
}
select.select-your-service.form-box-input {
width: 100%;
height: 56px;
border: none;
padding: 0 0px 0 27px;
}
.form-control {
display: block;
width: 100%;
padding: 0 0 0 29px;
font-size: 1rem;
font-weight: 400;
line-height: 3.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
textarea.form-control {
min-height: calc(1.5em + .75rem + 2px);
height: 144px;
}
.quote_btn.text_center.pt-3 {
text-align: center;
}
.contact-area .dreamit-section-content-text p {
width: 33%;
margin: 7px auto 0px;
}
.quote_btn button {
background: #019BFD;
display: inline-block;
width: 100%;
height: 54px;
text-transform: uppercase;
font-size: 14px;
color: #fff;
margin-top: 29px;
position: relative;
z-index: 1;
overflow: hidden;
transition: .5s;
}
.quote_btn button:before {
position: absolute;
content: "";
top: -1px;
right: -88px;
background:#028BFF;
height: 63px;
width: 387px;
transform: skewX(-76deg);
z-index: -1;
opacity:0;
transition: .5s;
}
.quote_btn button:hover{
background-image:linear-gradient( to right, #028bfe, #b3e4ff);
color: #fff;
}
.quote_btn button:hover:before{
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
opacity: 1;
}
/*--==========================================
Start mobile app area
-=========================================*/
.mobile-app-thumb img {
width: 100%;
}
.app-content p {
color: #303036;
font-size: 16px;
margin: 25px 0 39px 0;
line-height: 1.5;
}
.app-content-text-inner p {
color: #303036;
line-height: 1.5;
}
.mobile-app-key-content h2 {
font-size: 24px;
font-weight: 700;
margin: 30px 0 22px;
}
.app-icon i {
color: #018BFD;
font-size: 24px;
margin-right: 14px;
display: inline-block;
}
/*--==========================================
Start mobile app area
-=========================================*/
.priching-area {
background: #EFF3F7;
}
.priching-single-box {
position: relative;
background: #fff;
margin-bottom: 30px;
border-bottom: 4px solid#03AFFB;
padding: 0 0 29px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
transition: .5s;
}
.priching-content {
background: #06A8FA;
text-align: center;
padding: 28px 0 41px 0;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.priching-content h2 {
font-size: 28px;
font-weight: 500;
color: #fff;
}
.priching-content span {
color: #B0DFFC;
font-size: 13px;
}
.priching-content-text {
text-align: center;
background: #fff;
height: 102px;
width: 162px;
margin: -28px auto 0;
position: relative;
box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
}
span.price-dolor {
position: relative;
top: -12px;
}
span.tk {
font-size: 35px;
}
.priching-content-inner {
padding: 45px 39px 0;
}
.priching-body {
margin-bottom: 6px;
}
.priching-body ul li {
margin-bottom: 11px;
}
.priching-body ul li i{
height: 30px;
width: 30px;
line-height: 33px;
display: inline-block;
text-align: center;
background: #BFBDBD;
border-radius: 100%;
margin: 0px 10px 0 0px;
transition: .5s;
}
.priching-body ul li i:hover{
background: #0999F7;
color: #fff;
}
.priching-icon i {
font-size: 17px;
}
.priching-btn{
text-align: center;
}
.priching-btn a {
text-align: center;
border: 1px solid#0C95F6;
display: inline-block;
color: #0C95F6;
text-transform: uppercase;
font-size: 14px;
padding: 12px 36px;
border-radius: 30px;
margin-top: 6px;
transition: .5s;
}
.priching-btn a:hover{
background: #0999F7;
color: #fff;
border-color: #0999F7;
}
.priching-single-box:hover .priching-btn a{
background: #0999F7;
color: #fff;
border-color: #0999F7;
}
.priching-single-box:hover{
transform: translateY(-10px);
}
.priching-body ul li span{
transition: .5s;
}
.priching-body ul li span:hover {
color: #3A3A3F;
}
/*service area*/
.big-fox-single-service-box {
text-align: center;
margin-bottom: 30px;
}
.bigfox-thumb{
position: relative;
}
.bigfox-thumb img {
width: 100%;
}
.big-fox-service-content {
padding: 57px 49px;
position: absolute;
top: 0%;
background-image: linear-gradient( to top, #03B5FD, #0C93F6);
height: 100%;
border-radius: 5px;
transition: .5s;
opacity: 0;
}
.big-fox-single-service-box:hover .big-fox-service-content{
opacity: 1;
}
.big-fox-single-service-box:hover .fox-title h2,
.big-fox-single-service-box:hover .fox-content-text p{
color: #fff;
}
.fox-title h2 {
font-size: 24px;
margin: 0 0 20px;
}
.fox-content-text p {
line-height: 1.5;
}
.fox-btn a {
height: 40px;
width: 40px;
line-height: 40px;
display: inline-block;
background: #fff;
text-align: center;
border-radius: 100%;
margin-top: 6px;
}
/*--==========================================
blog details
-=========================================*/
.blog-detail-single-box {
box-shadow: 0 1px 15px rgb(0 0 0 / 7%);
border: 1px solid#F0F0F0;
margin-bottom: 30px;
padding: 0 0 39px;
border-radius: 5px;
}
.blog-detail-meta-box {
padding: 30px 0 10px 33px;
}
.blog-detail-meta-box span i {
color: #038CFE;
margin-right: 9px;
}
.blog-detail-meta-box a {
margin-left: 11px;
font-weight: 600;
color: #0388FE;
}
.blog-detail-thumb img {
width: 100%;
}
.blog-detail-content {
padding: 0 11px 0px 30px;
}
.blog-detail-title h2 {
font-size: 24px;
margin-bottom: 24px;
}
.blog-detail-conent-text p {
color: #313035;
line-height: 1.5;
}
.blog-detail-content-inner p {
color: #302F35;
line-height: 1.5;
}
.blogquote-title h2 {
font-size: 20px;
color: #313131;
line-height: 1.6;
}
.blogquote-box {
padding: 0 32px 0;
border-left: 4px solid#028BFF;
}
.blogquote-icon {
margin-top: 12px;
}
.blogquote-icon i {
color: #02A6FF;
font-size: 35px;
}
.blog-quote-content {
padding: 0 25px 0 31px;
}
.blogquote-title h3 {
color: #908F8F;
font-size: 20px;
margin-top: 13px;
}
.detail-title h2 {
font-size: 24px;
margin: 0 0 22px;
}
.blog-detail-body ul li {
margin-bottom: 21px;
}
.blog-detail-body ul li i {
color: #65B7FF;
margin-right: 8px;
}
.softwere-title h5 {
font-size: 15px;
color: #40A7FE;
font-weight: 500;
}
.blog-detail-social-address {
float: right;
}
.blog-detail-social-address ul li {
display: inline-block;
margin-right: 6px;
}
.blog-detail-social-address ul li a {
height: 40px;
width: 40px;
line-height: 40px;
border: 1px solid#CCCCCC;
display: inline-block;
text-align: center;
border-radius: 5px;
transition: .5s;
}
.blog-detail-social-address ul li a:hover{
background:#028BFF;
border-color: #028BFF;
color: #fff;
}
.blog-detail-area .dreamit-section-main-title h2 {
font-size: 24px;
margin: 3px 0 0;
text-transform: capitalize;
}
.blogquote-title h3 {
position: relative;
}
.blogquote-title h3:before {
position: absolute;
content: "";
top: 11px;
left: -40px;
height: 1px;
width: 30px;
background: #028BFF;
}
/*blog*/
.blog-detail-area .blog-content {
box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
padding: 17px 47px 0px 24px;
position: relative;
margin-top: -39px;
}
.blog-detail-area .blog-button.text-center {
position: relative;
top: 12px;
}
.blog-detail-area .blog-content-text p {
margin-bottom: 0;
}
/*comment*/
.post-comment-box {
box-shadow: 0 6px 17px rgb(0 0 0 / 4%);
padding: 41px 34px 10px 30px;
border: 1px solid#F0F0F0;
margin-bottom: 30px;
}
.comment-single-box {
margin-bottom: 34px;
border-bottom: 1px solid#F0F0F0;
padding-bottom: 27px;
}
.comment-single-box.two {
border-bottom: none;
padding-bottom: 0;
padding-left: 64px;
}
.blog-comment-content {
margin-left: 25px;
overflow: hidden;
}
.comment-content h2 {
font-size: 18px;
margin: 0 0 22px;
position: relative;
}
.comment-content h2:before {
position: absolute;
content: "";
top: 2px;
left: 124px;
height: 18px;
width: 1px;
background: #989898;
}
.comment-thumb {
float: left;
margin-right: 24px;
}
.comment-content-text p {
line-height: 1.6;
}
.comment-btn {
padding-top: 8px;
}
.comment-btn a {
border: 1px solid#E3E3E3;
padding: 6px 20px;
display: inline-block;
}
.comment-content span {
font-size: 18px;
margin-left: 25px;
font-weight: 600;
color: #313133;
}
.comment-single-box.three {
margin-bottom: 30px;
border-bottom: none;
padding-bottom: 0;
}
/*contact form*/
.blog-detail-area .form-control {
border: 1px solid#EBEBEB;
}
.blog-detail-area .quote_btn.text_center.pt-3 {
text-align: left;
}
.blog-detail-area .quote_btn button {
padding: 0 46px;
height: 55px;
margin-top: 11px;
width: 24%;
}
.blog-detail-area .quote_btn button:before {
position: absolute;
content: "";
top: -1px;
right: -50px;
background: #028BFF;
height: 80px;
width: 194px;
transform: skewX(-76deg);
z-index: -1;
opacity: 0;
transition: .5s;
border-radius: 5px;
}
.quote_btn button:hover:before{
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
opacity: 1;
}
.form-control:focus {
color: #212529;
outline: 0;
box-shadow: 0 0px 0 0.25rem rgb(1 162 253 / 34%);
border: 1px solid#01A2FD;
}
/*--==========================================
Sideber left news area
-=========================================*/
.single-news-box {
padding: 22px;
box-shadow: 0 13px 11px rgb(0 0 0 / 3%);
border-radius: 5px;
margin-bottom: 30px;
transition: .5s;
}
.news-thumb {
float: left;
margin-right: 32px;
}
.news-content {
padding: 11px 30px;
}
.news-title h2 {
font-size: 24px;
margin: 0 0 13px;
transition: .5s;
}
.news-meta-box span i {
color: #038BFB;
margin-right: 9px;
margin-bottom: 25px;
}
.news-content-text p {
line-height: 1.5;
width: 100%;
}
.news-btn a {
color: #2A95FD;
font-size: 14px;
text-transform: uppercase;
transition: .5s;
display: inline-block;
margin-top: 3px;
}
.single-news-box:hover {
box-shadow: 0 8px 22px rgb(0 0 0 / 21%);
}
.news-title h2:hover {
color: #028BFD;
}
.news-area .sidebar-search {
border: 1px solid#E5E5E5;
}
.news-button a {
background-image:linear-gradient( to right, #028bfe, #02B4FE);
border-radius: 5px;
color: #028bfe;
position: relative;
color: #fff;
display: inline-block;
padding: 14px 87px;
z-index: 1;
}
.news-button a:before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 100%;
width: 0%;
opacity: 0;
z-index: -1;
visibility: hidden;
margin-left: auto;
margin-right: auto;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
border-radius: 5px;
background: #f00;
background: #3B5999;
}
.news-button a:hover:before{
opacity: 1;
visibility: visible;
width: 100%;
}
.news-button a:hover{
color: #fff;
}
/*--==========================================
product-list
-=========================================*/
.product-icon {
float: right;
}
.product-icon ul li {
display: inline-block;
margin-left: 6px;
}
.product-icon ul li a {
height: 35px;
width: 34px;
text-align: center;
border: 1px solid#B7B7B7;
display: inline-block;
line-height: 36px;
border-radius: 4px;
color: #C0C0C0;
}
/*left site*/
.product-iteam-content h4 {
font-size: 16px;
color: #303030;
font-weight: 500;
}
.product-list-left-side-box {
border: 1px solid#ECF0F3;
margin-bottom: 30px;
padding: 26px 9px 43px 20px;
border-radius: 7px;
}
.product-left-site-title h2 {
font-size: 20px;
margin-bottom: 25px;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #7D7D7D!important;
text-decoration: none;
background: transparent!important;
}
#accordion h3 a i {
color: #333333;
}
#accordion h3 a i {
position: relative;
float: right;
margin-right: 12px;
font-size: 15px;
color: #018CFF;
}
.ui-state-active a i{
transform:rotate(180deg);
}
#accordion .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
border: transparent;
background: transparent;
font-weight: normal;
color: #fff;
margin-bottom: 7px;
}
#accordion.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
font-size: 100%;
margin-bottom: 0;
padding: 0;
margin-left: -16px;
margin-top: 16px;
border: none;
background: transparent;
}
#accordion.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
color: #454545;
text-decoration: none;
font-weight: 700;
}
.ui-accordion .ui-accordion-content {
border: none!important;
}
.product-catagories-body ul li {
margin-bottom: 6px;
color: #7D7D7D;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
color: #454545;
text-decoration: none;
font-weight: 500;
}
..ui-accordion .ui-accordion-content.style {
height: 120px!important;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
height:auto!important;
}
.filter-single-box {
border: 1px solid#ECF0F3;
margin-bottom: 30px;
padding: 27px 21px 35px;
border-radius: 4px;
}
.filter-title h2 {
font-size: 20px;
margin-bottom: 23px;
}
.catagories-menu ul li {
position: relative;
margin-left: 32px;
margin-bottom: 18px;
}
.filter-price-bar {
height: 5px;
width: 100%;
background: #028BFF;
position: relative;
z-index: 1;
}
.filter-price-bar:before {
position: absolute;
content: "";
height: 23px;
width: 23px;
background: #028BFF;
top: -9px;
border-radius: 100%;
}
.filter-price-bar:after {
position: absolute;
content: "";
height: 23px;
width: 23px;
background: #028BFF;
top: -9px;
border-radius: 100%;
right: 0;
}
.filter-price-content span {
margin-left: 15px;
color: #313131;
}
span.dolars {
float: right;
margin-right: 14px;
}
.filter-size-title h2 {
font-size: 20px;
}
.filter-size-body ul li {
height: 38px;
width: 36px;
line-height: 42px;
border: 1px solid#B3B3B3;
text-align: center;
display: inline-block;
border-radius: 4px;
margin-right: 6px;
margin-top: 15px;
transition: .5s;
}
.filter-size-body ul li a{
font-size: 16px;
display: inline-block;
}
/*right site*/
.single-product-list-box {
margin-bottom: 30px;
border: 1px solid#E0E7EF;
border-radius: 5px;
transition: .5s;
z-index: 1;
}
.product-thumb {
position: relative;
overflow: hidden;
z-index: 1;
}
.product-thumb img {
width: 100%;
}
.product-catagories {
position: absolute;
top: 0;
left: 0px;
height: 39px;
width: 56px;
background: #EA2627;
text-align: center;
border-top-left-radius: 9px;
transition: .5s;
}
.catagories-title h3 {
font-size: 14px;
position: relative;
top: 10px;
color: #fff;
}
.product-list-icon {
position: absolute;
right: -39px;
top: 76px;
transition: .5s;
}
.single-product-list-box:hover .product-catagories{
background: #16C157;
}
.single-product-list-box:hover .product-list-icon{
right: 20px;
}
.product-list-icon ul li {
height: 39px;
width: 38px;
text-align: center;
line-height: 40px;
background: #fff;
margin-bottom: 12px;
border-radius: 5px;
}
.product-list-content {
padding: 23px 0 22px 27px;
position: relative;
}
.product-list-content span {
font-size: 14px;
color: #707070;
}
.product-list-title h2 a {
font-size: 20px;
margin: 0px 0 0px;
font-weight: 700;
display: inline-block;
}
.product-list-icon-menu ul li {
display: inline-block;
}
.product-list-icon-menu ul li i {
color: #FFC700;
font-size: 12px;
display: inline-block;
}
.product-price {
position: absolute;
top: 48%;
left: 80%;
}
.product-price span {
font-size: 20px;
font-weight: 700;
color: #028BFF;
}
.single-product-list-box.two .product-price {
left: 89%;
}
/*pagition*/
.pagition-number ul li {
display: inline-block;
margin-right: 6px;
}
.pagition-number ul li i {
color: #0492FE;
}
.pagition-number ul li a {
height: 40px;
width: 38px;
line-height: 41px;
text-align: center;
border: 1px solid#DADBDD;
display: inline-block;
border-radius: 4px;
transition: .5s;
color: #7C7C7C;
}
.pagition-number ul li a:hover {
border-color: #0293FE;
color: #0293FE;
}
/*single list*/
.single-product-thumb {
position: relative;
float: left;
}
.single-product-list-area .product-list-icon {
opacity: 0;
}
.single-product-list-box:hover .product-list-icon{
opacity: 1;
}
.product-list-title h2 a:hover {
color: #0089FE;
}
.single-product-list-area .product-list-content {
padding: 11px 0 33px 30px;
position: relative;
overflow: hidden;
}
.single-product-list-area .product-list-icon-menu {
display: inline-block;
margin-left: 15px;
}
.single-product-list-area .product-list-content span.active {
display: inline-block;
position: relative;
}
.single-product-list-area .product-list-content span.active:before {
position: absolute;
content: "";
top: 1px;
right: -11px;
height: 14px;
width: 1px;
background: #B2B2B2;
}
.single-product-list-area .product-price {
top: 35%;
left: 4%;
}
.single-product-list-content-text p {
margin: 23px 0 0 0;
width: 92%;
line-height: 1.5;
color: #707070;
}
.proiduct-list-btn a {
border: 1px solid#BABABA;
padding: 11px 11px;
display: inline-block;
border-radius: 4px;
transition: .5s;
text-transform: uppercase;
color: #6F6F6F;
}
.proiduct-list-btn a:hover {
background: #018AFE;
color: #fff;
border-color: #018AFE;
}
.single-product-list-area .product-list-title h2 a {
margin: 8px 0 7px;
}
.product-icon ul li a.active {
border-color: #78BFFD;
color: #78BFFD;
}
/*filter*/
.contact-area button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 100%;
}
.header h1 {
font-size: 20px;
}
/*--==========================================
product thumb
-=========================================*/
.product-details-area.style-two .product-details-thumb {
float: left;
margin-right: 30px;
margin-bottom: 20px;
}
.product-list-title h2 {
margin: -10px 0 8px 0;
}
/*--==========================================
Sideber area
-=========================================*/
.product-details-thumb img {
width: 100%;
}
.product-details-content {
margin-left: 7px;
}
.product-details-title h2 {
font-size: 24px;
margin: 0 0 20px;
}
.product-catagory p {
display: inline-block;
}
.size-title {
display: inline-block;
margin-right: 15px;
}
.filter-size-body ul {
display: inline-block;
}
.size-title h3 {
font-size: 18px;
}
.product-content-text p {
margin-bottom: 10px;
margin-top: 16px;
line-height: 1.5;
}
.product-details-price span {
font-size: 24px;
color: #028bfe;
font-weight: 700;
}
span.dole {
text-decoration: line-through;
color: #797979;
margin-left: 16px;
}
.product-details-list-icon ul li {
display: inline-block;
margin-right: 18px;
}
.product-details-list-icon ul li a i {
height: 35px;
width: 35px;
line-height: 35px;
border: 1px solid#B3B3B3;
text-align: center;
display: inline-block;
border-radius: 4px;
transition: .5s;
margin-top: 27px;
margin-bottom: 28px;
}
.product-catagory p b {
color: #474747;
}
.product-details-list-icon ul li span {
color: #484848;
}
.product-details-btn a {
border: 1px solid#D4D4D4;
padding: 14px 40px;
margin-right: 14px;
display: inline-block;
transition: .5s;
border-radius: 5px;
color: #B2B2B2;
}
.product-details-area .active {
padding: 15px 19px;
text-transform: uppercase;
color: #B2B2B2;
transition: .5s;
}
a.active:hover {
background: #028BFF;
color: #fff;
}
.product-details-area .product-details-list-icon ul li a i {
color: #6F6F6F;
}
.product-details-area .filter-size-body ul li:hover {
background: #EDF0F5;
}
/*dots*/
.product_list .owl-dot {
height: 60px;
width: 60px;
background: url(assets/images/product.jpg);
margin: 46px 4px 8px 5px;
display: inline-block;
border-radius: 100%;
transition: .5s;
background-position: center center;
background-size: cover;
}
.product_list .owl-dot.active {
height: 60px;
width: 60px;
border-radius: 100%;
background: url(assets/images/product6.jpg);
background-position: center center;
background-size: cover;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
border-bottom: 1px solid#CCCCCC;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #0d6efd;
background-color: transparent;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #0d6efd;
background-color: transparent;
text-transform: capitalize;
padding: 6px 7px;
}
.nav-pills .nav-link {
background: 0 0;
border: 0;
border-radius: .25rem;
padding: 6px 7px;
margin-right: 22px;
border: 1px solid#01A2FD;
background: #01A2FD;
color: #fff;
}
.review-single-box {
padding: 30px 14px 15px 30px;
margin-bottom: 30px;
border-radius: 5px;
transition: .5s;
}
.review-single-box:hover{
box-shadow: 0 0 30px rgb(0 0 0 /15%);
}
.review-thumb {
float: left;
margin-right: 24px;
}
.review-content {
overflow: hidden;
}
.review-title h2 {
font-size: 20px;
text-transform: capitalize;
}
.review-title span {
text-transform: capitalize;
}
.review-icon-menu {
margin-top: 8px;
}
.review-icon-menu ul li {
display: inline-block;
font-size: 12px;
color: #FDCD07;
}
.review-content-text-inner p {
text-transform: capitalize;
font-size: 16px;
color: #9D9D9D;
line-height: 1.5;
margin-top: 18px;
letter-spacing: 0.1px;
}
/*contact_form*/
.form-title h2 {
font-size: 24px;
text-transform: capitalize;
margin-bottom: 23px;
}
.product-details-area .contact_from.style-two {
background: none;
padding-left: 0;
}
.product-details-area .form-control {
display: block;
width: 100%;
padding: 0 0 0 29px;
font-size: 1rem;
font-weight: 400;
line-height: 3.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid#CECECE;
}
.ratting-box {
margin: 17px 0 0 0;
}
.ratting-content {
display: inline-block;
}
.review-icon-menu {
margin-top: 8px;
display: inline-block;
}
.ratting-content p b {
font-size: 16px;
text-transform: capitalize;
}
.product-details-area .quote_btn.text_center.pt-3 {
text-align: left;
}
.product-details-area .contact_from.style-two .quote_btn button {
width: 13%;
margin-top: 5px;
border: 0;
}
.product-details-area .quote_btn button:before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 100%;
width: 0%;
opacity: 0;
z-index: -1;
visibility: hidden;
margin-left: auto;
margin-right: auto;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
border-radius: 5px;
background: #f00;
background: #3B5999;
}
.product-details-area .quote_btn button:hover:before {
opacity: 1;
visibility: visible;
width: 100%;
}
.product-details-area .quote_btn button:hover {
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
color: #fff;
}
/*section-title*/
.product-details-area .dreamit-section-main-title h2 {
font-size: 24px;
margin: 3px 0 13px;
}
/*description*/
.description-content-text p {
text-transform: capitalize;
letter-spacing: 0.1px;
color: #707070;
}
.description-body {
margin: 34px 0 34px;
}
.description-body ul li {
text-transform: capitalize;
margin-bottom: 5px;
margin-left: 30px;
color: #707070;
font-family: italic;
}
.description-content-text-inner p {
text-transform: capitalize;
letter-spacing: 0.1px;
color: #707070;
}
/*additional*/
.additional-box {
border: 1px solid#EFEFEF;
}
.additional-menu ul li {
margin-bottom: 6px;
border-bottom: 1px solid#EFEFEF;
padding: 19px 0 15px 42px;
text-transform: capitalize;
}
.additional-menu ul li:last-child {
border: none;
}
li.activ {
background: #F9F9F9;
}
.additional-menu ul li span {
color: #303132;
font-weight: 700;
margin-right: 48px;
}
ul#pills-tab li {
margin-right: 19px;
}
/*product details two*/
.row.margin-upper {
box-shadow: 0 2px 20px rgb(0 0 0 / 28%);
padding: 31px 0 30px 22px;
}
/*--==========================================
start acordion
-=========================================*/
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #F0F3F8;
border-radius: 0;
border-bottom: none;
}
.accordion-button.collapsed {
border-bottom-width: 0;
margin-bottom: 20px;
border: 1px solid#CCCCCC;
height: 60px;
border-radius: 5px;
}
.accordion-body {
padding: 0 0 0 18px;
border: none!important;
background: #F0F3F8;
}
.accordion-button:focus {
z-index: 3;
border-color: transparent;
outline: 0;
box-shadow: none;
}
/*--==========================================
Sideber error page
-=========================================*/
.search-area input.subscribe-mail-box {
background: rgb(62,95,132,0.5);
border: 1px solid#CCCCCC;
background: #fff;
}
.search-area .subscribe-area button {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
padding: 0px 27px;
background: transparent;
}
.search-area .subscribe-area i {
position: absolute;
right: 18px;
top: 20px;
color: #707070;
font-size: 17px;
}
.search-area .dreamit-section-sub-title h5 {
font-size: 15px;
margin-bottom: 6px;
}
.search-for {
margin-top: 60px;
}
.search-for p b span {
color: #038AFD;
}
.search-form-box {
background: #F6F7FB;
padding: 30px 0 8px 28px;
position: relative;
margin-bottom: 30px;
}
.search-content {
margin-left: 30px;
}
.search-title h2 {
color: #038AFD;
font-size: 16px;
font-weight: 700;
}
.search-number h1 {
position: absolute;
left: 27px;
top: 28px;
color: #008CFF;
font-size: 17px;
}
.search-content-text p {
line-height: 1.6;
width: 85%;
margin-top: 14px;
}
/*============================================*
voundoun area
/*============================================*/
.countdown-area li {
font-size: 60px;
height: 150px;
width: 150px;
line-height: 125px;
text-align: center;
background: #fff;
border-radius: 10px;
margin: 0 10px;
display: inline-block;
position: relative;
box-shadow: 0 20px 25px rgb(0 0 0 /12%);
}
.countdown-area li p {
position: absolute;
bottom: -25px;
left: 0;
right: 0;
font-size: 16px;
margin-bottom: 0;
}
div#countdown ul li span {
color: #353537;
font-weight: 700;
}
.breatcome-area.style-three .breatcome-content-title h1 {
margin: 128px 0 57px;
text-transform: capitalize;
font-size: 40px;
color: #353535;
}
/*============================================*
breatcome comming soon area
/*============================================*/
.breatcome-area.style-three{
background: url(assets/images/soon.jpg);
height: 750px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.breatcome-area.style-three input.subscribe-mail-box {
width: 52%;
}
.breatcome-area.style-three .subscribe-area button {
right: 206px;
top: 0px;
width: 14%;
text-transform: capitalize;
background: #028BFF;
}
.breatcome-area.style-three input.subscribe-mail-box {
border: 1px solid#BEBEBE;
background: transparent;
}
/*--==========================================
Sideber error page
-=========================================*/
.breatcome-area.style-two {
background: url(assets/images/404.jpg);
height: 370px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.error-area input.subscribe-mail-box {
border: 1px solid#E0E0E0;
padding: 17px 36px;
width: 100%;
border-radius: 5px;
background: #fff;
}
.error-area .dreamit-section-main-title h1 {
top: -30px;
left: -90px;
color: #F0F1F6;
font-size: 300px;
}
.error-area .subscribe-area button {
background: #028BFF;
width: 18%;
font-size: 14px;
}
.error-area button i {
position: relative;
left: 6px;
top: 0;
}
.error-area .dreamit-section-content-text p {
width: 100%;
margin: 14px 0 55px;
}
.error-btn a {
border: 1px solid#028BFF;
padding: 17px 36px;
display: inline-block;
border-radius: 5px;
margin-top: 82px;
transition: .5s;
position: relative;
}
.error-btn a:before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 100%;
width: 0%;
opacity: 0;
z-index: -1;
visibility: hidden;
margin-left: auto;
margin-right: auto;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
border-radius: 5px;
background: #f00;
background: #3B5999;
}
.error-btn a:hover:before {
opacity: 1;
visibility: visible;
width: 100%;
}
.error-btn a:hover {
background: #028BFF;
color: #fff;
border-color: #028BFF;
}
/*--==========================================
brand area
-=========================================*/
.brand-single-box {
border-right: 1px solid#D9D9D9;
}
.brand-thumb img {
width: 100%;
}
.brand-single-box.two {
border-right: none;
}
.brand-single-box.three {
border-bottom: none;
}
.brand-single-box.four{
border-bottom: none;
border-right: none;
}
.row.margin-topper2 {
border-top: 1px solid#D9D9D9;
}
/*style two brand area*/
.brand-area.style-two {
background: #F0F3F8;
}
.brand-area.style-two .brand-single-box {
border-right: none;
margin-right: 30px;
transition: .5s;
}
/*dots*/
.brand_list .owl-dots {
margin-top: 32px;
}
.brand_list .owl-dot {
height: 15px;
width: 15px;
background: #C0DFFB;
border-radius: 50%;
transition: .5s;
}
.brand_list .owl-dot.active {
background: #048BFF;
}
.brand_list .brand-single-box:hover {
box-shadow: 0px 12px 23px rgb(0 0 0 / 29%);
}
/*--==========================================
Sideber area
-=========================================*/
.sidebar-title h2 {
font-size: 20px;
position: relative;
left: 10px;
}
.sidebar-title h2:before {
position: absolute;
content: "";
top: 4px;
left: -11px;
background: #028BFF;
height: 20px;
width: 3px;
}
.sidebar-search {
position: relative;
}
.sidebar-box {
margin-bottom: 30px;
overflow: hidden;
margin-left: 10px;
}
.sidebar-search button {
position: absolute;
right: 20px;
top: 21px;
}
.sidebar-category {
margin-top: 25px;
}
.sidebar-search button {
background: transparent;
border: none;
color: #6FADFF;
}
.sidebar-thumb img {
border-radius: 5px;
}
/*sideber resent*/
.resent-iteam {
border-bottom: 1px solid#EAEAEA;
padding-bottom: 24px;
margin-top: 21px;
}
.resent-iteam.two {
border-bottom:none;
padding-bottom: 24px;
margin-top: 21px;
}
.sidebar-thumb-content {
padding: 0 0px 0 19px;
}
.sidebar-thumb-title a h2 {
font-size: 16px;
margin-left: 0px;
line-height: 1.6;
}
.sidebar-thumb-title span i {
color: #0289FE;
}
.sidebar-search-box {
margin-bottom: 30px;
overflow: hidden;
margin-left: 10px;
}
.contact_from.style-two {
background: #F0F3F8;
padding: 26px 32px 18px 34px;
border-radius: 5px;
}
.contact_from.style-two .dreamit-section-main-title h2 {
font-size: 20px;
}
.contact_from.style-two .quote_btn button {
width: 99%;
margin-top: 5px;
border: 0;
text-transform: capitalize;
font-size: 16px;
}
.blog-detail-area .sidebar-search.quote_btn button {
padding: 0 46px;
height: 55px;
margin-top: 11px;
width: 100%;
}
.blog-detail-area .dreamit-section-content-text p {
margin: 14px 0 26px;
width: 82%;
}
.contact_from.style-two .dreamit-section-content-text p {
margin: 15px 0 24px;
width: 85%;
}
/*catogories*/
.sidebar-category ul li {
margin-bottom: 23px;
}
.sidebar-category ul li a {
color: #5E5E5E;
font-weight: 600;
}
.sidebar-category ul li a:hover {
color: #1CA2FE;
}
.sidebar-category ul li a span {
color: #CFCFCF;
margin-left: 6px;
}
.gallery-single-box {
margin-bottom: 20px;
}
/*archive*/
.archive-menu ul li {
margin-bottom: 22px;
}
.archive-menu {
margin-top: 24px;
}
.archive-menu ul li span {
color: #939595;
font-size: 16px;
font-weight: 600;
margin-left: 6px;
}
/*follow us*/
.follow-us-social-address {
margin-top: 12px;
}
.follow-us-social-address ul li {
display: inline-block;
margin: 0 5px 0 0;
}
.follow-us-social-address ul li a {
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border: 1px solid#67686A;
display: inline-block;
border-radius: 5px;
transition: .5s;
margin-top: 17px;
background: #0177B5;
color: #fff;
}
.follow-us-social-address ul li a.blue{
background: #3B5999;
border-color: #3B5999;
color: #fff;
}
.follow-us-social-address ul li a.blue:hover{
background: #01A2FD;
color: #fff;
border-color: #01A2FD;
}
.follow-us-social-address ul li a.blue2{
background: #1DA1F3;
border-color: #1DA1F3;
color: #fff;
}
.follow-us-social-address ul li a.blue3:{
background: #0177B5;
border-color: #0177B5;
color: #fff;
}
.follow-us-social-address ul li a.blue3:hover{
background: #01A2FD;
color: #fff;
border-color: #01A2FD;
}
.follow-us-social-address ul li a.blue4{
background: #BD071D;
border-color: #BD071D;
color: #fff;
}
.follow-us-social-address ul li a.blue4:hover{
background: #01A2FD;
color: #fff;
border-color: #01A2FD;
}
.follow-us-social-address ul li a.blue5{
background: #DC4437;
border-color: #DC4437;
color: #fff;
}
.follow-us-social-address ul li a.blue5:hover{
background: #01A2FD;
color: #fff;
border-color: #01A2FD;
}
/*tag*/
.sidebar-popular-tag {
margin-top: 22px;
}
.sidebar-popular-tag ul li {
display: inline-block;
}
.sidebar-popular-tag ul li a {
border: 1px solid#DCDDE1;
padding: 11px 30px;
margin: 7px 3px;
display: inline-block;
border-radius: 30px;
color: #313133;
transition: .5s;
position: relative;
}
.sidebar-popular-tag ul li a:before{
position: absolute;
content: '';
width: 0;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: #01A2FD;
opacity: 0;
visibility: hidden;
z-index: -1;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
border-radius: 30px;
}
.sidebar-popular-tag ul li a:hover:before {
opacity: 1;
visibility: visible;
width: 100%;
}
.sidebar-popular-tag ul li a:hover{
color: #fff!important;
}
.comment-btn a {
color: #313036;
text-transform: uppercase;
padding: 9px 15px;
position: relative;
transition: .5s;
overflow: hidden;
z-index: 1;
}
.blog-detail-area .comment-btn a:before {
position: absolute;
content: "";
top: -10px;
right: -50px;
background: #028BFF;
height: 84px;
width: 121px;
transform: skewX(-76deg);
z-index: -1;
opacity: 0;
transition: .5s;
border-radius: 5px;
}
.comment-btn a:hover:before{
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
opacity: 1;
}
.comment-btn a:hover{
background-image: linear-gradient( to right, #028bfe, #b3e4ff);
color: #fff;
}
/*--==========================================
Start------Footer-----area------------
-=========================================*/
.bigfox-footer-area {
background: #303133;
padding: 120px 0 22px;
position: relative;
}
.bigfox-footer-content h3 {
font-size: 24px;
font-weight: 800;
margin: 0 0 30px;
color: #fff;
}
.subscribe-area i {
position: absolute;
right: 3px;
top: 16px;
font-size: 24px;
display: inline-block;
color: #fff;
}
input.subscribe-mail-box {
background: rgb(62,95,132,0.5);
border: none;
padding: 15px 36px;
width: 100%;
border-radius: 27px;
}
.subscribe-area input:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}
.bigfox-footer-content-text p {
color: #fff;
margin-top: 32px;
font-size: 16px;
width: 87%;
margin: 30px 0 17px;
line-height: 1.5;
}
.footer-menu ul li {
margin-bottom: 18px;
}
.footer-menu ul li a i {
color: #0876e4;
margin-right: 8px;
display: inline-block;
}
.bigfox-social-address ul li {
display: inline-block;
margin-right: 5px;
}
.bigfox-social-address ul li a {
height: 36px;
width: 36px;
line-height: 36px;
border: 1px solid#fff;
display: inline-block;
text-align: center;
border-radius: 3px;
color: #fff;
font-size: 18px;
margin-top: 36px;
transition: .5s;
}
.bigfox-social-address ul li a:hover{
border-color: #04a3ff;
background: #04a3ff;
color: #fff;
}
.footer-adderss span {
color: #616161;
font-size: 14px;
line-height: 1.7;
}
.footer-title h2 {
font-size: 24px;
color: #fff;
margin: 0 0 45px;
position: relative;
font-weight: 700;
}
.footer-title h2:before {
position: absolute;
content: "";
left: 0;
top: 37px;
height: 1px;
width: 74px;
background: #018bfd;
}
.footer-menu ul li a {
color: #fff;
}
.footer-menu ul li a:hover {
color: #028bfe;
}
.text-footer {
display: inline-block;
}
.footer-adderss p {
color: #fff;
font-size: 14px;
color: #616161;
margin: 9px 0 5px;
}
.contact-icon span {
color: #d9d9d9;
font-size: 43px;
display: inline-block;
margin-top: 0;
}
.bigfox-footer-address {
margin-left: 25px;
}
.bigfox-footer-address p {
margin: 0 0 6px;
color: #fff;
}
.bigfox-footer-address span {
color: #fff;
}
.popular-post-box {
border-bottom: 1px solid#595A5C;
padding: 0px 0 25px;
margin-bottom: 26px;
}
.popular-post-box.two {
border-bottom: none;
}
.post-thumb img {
border-radius: 5px;
}
.popular-post-content {
margin-left: 23px;
}
.popular-post-title h2 {
font-size: 16px;
color: #fff;
font-weight: 600;
line-height: 1.5;
transition: .5s;
}
.popular-post-title h2:hover {
color: #04A3FF;
}
.popular-post-title span {
color: #979898;
font-size: 14px;
}
.contact-box {
margin-bottom: 22px;
}
.dreamit-post-box {
margin-bottom: 25px;
}
.dreamit-post-thumb img {
width: 100%;
border-radius: 5px;
}
.post-content {
margin-left: 25px;
}
.post-title a h2 {
font-size: 17px;
line-height: 1.3;
margin: 0 0 3px;
}
.post-title span {
font-size: 13px;
font-weight: 400;
}
.text-footer p {
color: #e3e3e3;
font-size: 14px;
color: #d0312c;
font-weight: 700;
}
.footer-icon i {
color: #5a49f8;
font-size: 50px;
}
/*footer style two*/
.bigfox-footer-area.style-two .bigfox-social-address ul li a{
border-color: #04a3ff;
background: #04a3ff;
color: #fff;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li a:hover{
background: #01A2FD;
border-color: #01A2FD;
color: #fff;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li a {
border-radius: 0;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li.icon2 a {
border-color: #0CD5E7;
background: #0CD5E7;
color: #fff;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li.icon2 a:hover{
background: #01A2FD;
border-color: #01A2FD;
color: #fff;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li.icon3 a{
border-color: #0E66BF;
background: #0E66BF;
color: #fff;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li.icon3 a:hover{
background: #01A2FD;
border-color: #01A2FD;
color: #fff;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li.icon4 a {
border-color: #E60CA9;
background: #E60CA9;
color: #fff;
}
.bigfox-footer-area.style-two .bigfox-social-address ul li.icon4 a:hover{
background: #01A2FD;
border-color: #01A2FD;
color: #fff;
}
/*style three*/
.footer-shape {
position: absolute;
top: -11px;
}
/*footer bottom area*/
.bigfox-footer-bottom-area {
background: #242424;
border-top: 1px solid#028bfe;
padding: 39px 0 24px;
}
.footer-bottom-menu ul li {
display: inline-block;
margin-left: 28px;
float: right;
}
.footer-bottom-menu ul li a {
color: #fff;
}
.footer-bottom-menu ul li a:hover {
color: #1CA2FE;
}
.footer-bottom-content p {
color: #fff;
}
.footer-bottom-content p span {
color: #028bfe;
}
.footer-bottom-content.text-center p {
float: right;
}
input.subscribe-mail-box:focus{
outline:0;
}
.subscribe-area {
position: relative;
}
button.subscribe-button button {
color: #fff;
}
.subscribe-area button {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
padding: 0px 0px;
background: #01A2FD;
font-weight: 500;
font-size: 14px;
border-color: inherit;
margin: auto;
bottom: 0;
border-top-right-radius: 5px;
border: none;
color: #fff;
height: 56px;
border-bottom-right-radius: 5px;
text-transform: uppercase;
width: 28%;
}
button:focus {
outline-color: transparent;
}
/* placeholder-area----*/
.subscribe-area input::-moz-placeholder {
color: #a0a1a2;
font-size: 17px;
}
input.subscribe-mail-box {
background: rgb(62,95,132,0.5);
border: none;
padding: 18px 36px;
width: 100%;
border-radius: 5px;
background: #fff;
}
.subscribe-area ::-moz-placeholder {
/* Firefox 19+ */
color: #a0a1a2!important;
font-size: 16px;
font-weight:400;
}
.subscribe-area :-ms-input-placeholder {
/* IE 10+ */
color: #fff !important;
font-size: 16px;
font-weight:400;
}
.subscribe-area :-moz-placeholder {
color: #a0a1a2!important;
font-size: 16px;
font-weight:400;
}
.footer-text-menu {
text-align: right;
}
.footer-text-menu ul li {
list-style: none;
display: inline-block;
}
.footer-text-menu ul li a {
display: inline-block;
margin-left: 19px;
color: #f8f9fe;
}
/*----------To Top---*/
#to-top {
position: fixed;
bottom: 13px;
color: #fff;
right: 80px;
font-size: 28px;
width: 60px;
height: 60px;
line-height: 50px;
text-align: center;
background: #1CA2FE;
border: none;
cursor: pointer;
display: none;
z-index: 99999;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
border-radius: 50%;
}
/*Loader*/
.loader-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
transition: 0.8s 1s ease;
z-index: 666;
}
.loader {
position: relative;
display: block;
z-index: 201;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border-radius: 50%;
transition: all 1s 1s ease;
border: 3px solid transparent;
border-top-color: #84CDFF;
-webkit-animation: spin 1.5s linear infinite;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
.loader:before {
position: absolute;
content: '';
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border-radius: 50%;
border: 3px solid transparent;
border-left-color: #028BFE;
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader:after {
position: absolute;
content: '';
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-right-color: #fff;
-webkit-animation: spin 2.5s linear infinite;
-moz-animation: spin 2.5s linear infinite;
-o-animation: spin 2.5s linear infinite;
animation: spin 2.5s linear infinite;
}
.history-text{
text-align: justify;
}
/* Here comes the Magic */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader-wrapper .loder-section {
position: fixed;
top: 0;
width: 50%;
height: 100%;
background: #111;
z-index: 2;
}
.loader-wrapper .loder-section.left-section {
left: 0;
transition: 1s 1.4s ease;
}
.loader-wrapper .loder-section.right-section {
right: 0;
transition: 1s 1.4s ease;
}
/* When page loaded */
.loaded .loder-section.left-section {
left: -100%;
}
.loaded .loder-section.right-section {
right: -100%;
}
.loaded .loader-wrapper {
visibility: hidden;
}
.loaded .loader {
top: -100%;
opacity: 0;
}
/*particles js*/
div#particles {
position: relative;
}
#webcoderskull {
position: absolute;
left: 0;
top: 0;
padding: 0 20px;
width: 100%;
}
div#particles .slider-area.style-two {
background: inherit;
height: 790px;
}
.whatsapp-float{
position:fixed;
width:60px;
height:60px;
bottom:20px;
right:20px;
background:#25D366;
color:#fff;
border-radius:50%;
text-align:center;
font-size:35px;
line-height:60px;
box-shadow:2px 2px 10px rgba(0,0,0,.3);
z-index:99999;
transition:.3s;
}
.whatsapp-float:hover{
transform:scale(1.1);
}
.video-thumb{
position:relative;
max-width:800px;
margin:auto;
cursor:pointer;
}
.video-thumb img{
width:100%;
border-radius:10px;
display:block;
}
.play-btn{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:80px;
height:80px;
background:#aa0505;
border-radius:50%;
color:#fff;
font-size:30px;
display:flex;
justify-content:center;
align-items:center;
transition:.3s;
}
.play-btn:hover{
transform:translate(-50%,-50%) scale(1.1);
}
.video-modal{
display:none;
position:fixed;
z-index:9999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.85);
}
.video-content{
position:relative;
width:80%;
max-width:1000px;
margin:4% auto;
}
.video-content video{
width:100%;
border-radius:10px;
}
.close-video{
position:absolute;
top:-40px;
right:0;
color:#fff;
font-size:40px;
cursor:pointer;
}
.servicios-row{
column-gap: 80px;
}
.header-menu ul li:hover .sub-menu {
top: 63px;
opacity: 1;
visibility: visible;
z-index: 9;
}
/* Submenu interno Reglamento */
.submenu-reglamento-items {
position: absolute;
left: 100%;
top: 0;
width: 260px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.15);
border-radius: 7px;
padding: 10px 15px !important;
opacity: 0;
visibility: hidden;
transition: .3s;
z-index: 99;
}
/* Oculto por defecto */
.header-menu .sub-menu ul li .submenu-reglamento-items {
display: block;
}
/* Mostrar solamente cuando paso por Reglamento */
.header-menu .sub-menu ul li:hover > .submenu-reglamento-items {
opacity: 1;
visibility: visible;
}
/* Ajuste de los enlaces internos */
.submenu-reglamento-items li {
display: block !important;
margin-bottom: 10px !important;
}
.submenu-reglamento-items li a {
color: #616161 !important;
padding: 10px;
display: block;
text-transform: none !important;
}
.submenu-reglamento-items li a:hover {
color: #01A2FD !important;
}
/* Ajuste submenu Reglamento */
.submenu-reglamento-items li {
margin-bottom: 0 !important;
padding: 0 !important;
}
.submenu-reglamento-items li a {
padding: 10px 15px !important;
margin: 0 !important;
display: block;
}
.m-logo img {
width: 45px;
height: 45px;
object-fit: contain;
}
/* Logo móvil oculto en escritorio */
.m-logo {
display: none;
}
/* Solo mostrar en celular */
@media (max-width: 991px) {
.m-logo {
display: block;
}
.m-logo img {
width: 45px;
height: 45px;
object-fit: contain;
}
.header-logo {
display: none;
}
}
/* Logo móvil oculto por defecto */
.m-logo {
display: none;
}
@media (max-width: 991px) {
.m-logo {
display: flex;
align-items: center;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.m-logo img {
width: 45px;
height: 45px;
object-fit: contain;
}
.menu-toggle {
display: block;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
z-index: 20;
}
}
/* LOGO MOVIL CCPTUMBES */
@media (max-width: 991px){
.header-area {
position: relative;
height: 80px;
}
.m-logo {
display: block !important;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.m-logo img {
width: 45px;
height: 45px;
display: block;
object-fit: contain;
}
}
.btn-vermas{
display:inline-block;
padding:12px 35px;
background:#B22222; /* rojo ladrillo */
color:white;
text-decoration:none;
font-size:18px;
font-weight:bold;
border-radius:4px;
border-bottom:4px solid #7A1515;
transition:0.3s;
}
.btn-vermas:hover{
background:#8B1A1A;
transform:translateY(-3px);
}
.contenedor-boton{
text-align:center;
margin-top:25px;
}
.btn-vermas{
display:inline-block;
padding:10px 35px;
color:#B22222; /* rojo ladrillo */
border:2px solid #B22222;
border-radius:25px;
text-decoration:none;
font-size:16px;
font-weight:600;
transition:0.3s;
}
.btn-vermas:hover{
background:#B22222;
color:white;
transform:translateY(-3px);
}
.btn-vermas{
background:#B22222;
color:white;
border-radius:5px;
padding:12px 30px;
border:none;
}
.contenedor-boton{
text-align:center;
margin-top:25px;
}
.btn-vermas{
display:inline-block;
width:300px; /* ancho del botón */
padding:12px 0;
text-align:center;
color:#B22222;
border:2px solid #B22222;
border-radius:5px;
text-decoration:none;
font-size:17px;
font-weight:600;
transition:.3s;
}
.btn-vermas:hover{
background:#B22222;
color:white;
}
/* =====================================================
FRANJA INSTITUCIONAL - COLEGIO DE CONTADORES
===================================================== */
.feature-area .single-feature-box {
background: #A52A2A !important;
color: #ffffff;
}
.feature-area .single-feature-box.two {
background: #8F1D1D !important;
}
.feature-area .single-feature-box:last-child {
background: #A52A2A !important;
}
/* Títulos */
.feature-area .single-feature-box .feature-title h2 {
color: #ffffff !important;
font-weight: 700;
}
/* Texto */
.feature-area .single-feature-box .feature-content-text p {
color: #ffffff !important;
}
/* Iconos */
.feature-area .single-feature-box .feature-icon,
.feature-area .single-feature-box .feature-icon i,
.feature-area .single-feature-box .feature-icon span {
color: #ffffff !important;
}
/* Logo del Colegio en la franja institucional */
.feature-area .feature-icon img {
width: 70px;
height: 70px;
object-fit: contain;
}
.btn-ver-mas {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 15px;
padding: 8px 18px;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 25px;
color: #fff; /* AQUÍ está el color blanco */
text-decoration: none;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
transition: all 0.3s ease;
}
.btn-ver-mas span {
font-size: 17px;
line-height: 1;
color: #fff; /* Flecha blanca */
transition: transform 0.3s ease;
}
.btn-ver-mas:hover {
background: #fff;
color: #a9282b; /* Al pasar el mouse se vuelve rojo */
border-color: #fff;
transform: translateY(-2px);
}
.btn-ver-mas:hover span {
color: #a9282b; /* Flecha roja al pasar el mouse */
transform: translateX(4px);
}
/* =========================================================
AJUSTE RESPONSIVE DEL BANNER PRINCIPAL
Colegio de Contadores Públicos de Tumbes
========================================================= */
/* PC */
.slider-area.style-five,
.slider-area.style-six {
height: 790px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
/* TABLET */
@media (max-width: 991px) {
.slider-area.style-five,
.slider-area.style-six {
height: 560px;
background-size: cover;
background-position: center center;
}
}
/* CELULAR */
@media (max-width: 767px) {
.slider-area.style-five,
.slider-area.style-six {
height: 420px !important;
min-height: 420px !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* Ajustamos el punto de enfoque */
background-position: center center !important;
}
}
/* CELULAR PEQUEÑO */
@media (max-width: 480px) {
.slider-area.style-five,
.slider-area.style-six {
height: 360px !important;
min-height: 360px !important;
background-position: center center !important;
}
}
/* =========================================================
FOOTER INSTITUCIONAL
COLEGIO DE CONTADORES PÚBLICOS DE TUMBES
========================================================= */
.ccpt-footer {
width: 100%;
background: #101820;
color: #ffffff;
position: relative;
}
/* =========================================================
PARTE PRINCIPAL
========================================================= */
.ccpt-footer-main {
padding: 70px 0 60px;
background: #101820;
}
/* =========================================================
LOGO
========================================================= */
.ccpt-footer-logo {
margin-bottom: 28px;
}
.ccpt-footer-logo img {
width: 360px;
max-width: 100%;
height: auto;
display: block;
}
/* =========================================================
DESCRIPCIÓN
========================================================= */
.ccpt-footer-about p {
max-width: 390px;
margin: 0;
color: #d9dde1;
font-size: 16px;
line-height: 1.8;
text-align: left;
}
/* =========================================================
TÍTULOS
========================================================= */
.ccpt-footer-column h3 {
position: relative;
margin: 0 0 35px;
padding-bottom: 15px;
color: #ffffff;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
}
/* Línea roja */
.ccpt-footer-column h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 58px;
height: 3px;
background: #b52a2f;
border-radius: 3px;
}
/* =========================================================
REDES SOCIALES
========================================================= */
.ccpt-footer-social {
display: flex;
gap: 13px;
margin-top: 32px;
}
.ccpt-footer-social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff;
font-size: 18px;
text-decoration: none;
transition: all 0.3s ease;
}
.ccpt-footer-social a:hover {
transform: translateY(-5px);
}
.ccpt-social-facebook {
background: #1877f2;
}
.ccpt-social-x {
background: #000000;
}
.ccpt-social-linkedin {
background: #0a66c2;
}
.ccpt-social-instagram {
background: linear-gradient(
135deg,
#833ab4,
#fd1d1d,
#fcb045
);
}
/* =========================================================
ENLACES
========================================================= */
.ccpt-footer-column ul {
margin: 0;
padding: 0;
list-style: none;
}
.ccpt-footer-column ul li {
margin-bottom: 19px;
}
.ccpt-footer-column ul li a {
display: flex;
align-items: center;
gap: 12px;
color: #dfe3e7;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
}
.ccpt-footer-column ul li a i {
color: #b52a2f;
font-size: 12px;
transition: transform 0.3s ease;
}
.ccpt-footer-column ul li a:hover {
color: #ffffff;
transform: translateX(5px);
}
.ccpt-footer-column ul li a:hover i {
transform: translateX(3px);
}
/* =========================================================
SERVICIOS DESTACADOS
========================================================= */
.ccpt-footer-services li {
margin-bottom: 22px !important;
}
.ccpt-footer-services li a {
gap: 15px !important;
}
.ccpt-service-icon {
width: 42px;
min-width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(181, 42, 47, 0.7);
border-radius: 50%;
color: #c7353b;
font-size: 17px;
transition: all 0.3s ease;
}
.ccpt-footer-services li a:hover .ccpt-service-icon {
background: #b52a2f;
color: #ffffff;
}
/* =========================================================
CONTACTO
========================================================= */
.ccpt-contact-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding-bottom: 19px;
margin-bottom: 19px;
border-bottom: 1px solid rgba(255,255,255,0.13);
}
.ccpt-contact-item:last-child {
border-bottom: none;
}
.ccpt-contact-icon {
width: 45px;
min-width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #b52a2f;
border-radius: 50%;
color: #ffffff;
font-size: 17px;
}
.ccpt-contact-text {
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 2px;
}
.ccpt-contact-text strong {
color: #ffffff;
font-size: 15px;
font-weight: 700;
}
.ccpt-contact-text span {
color: #d5d9dd;
font-size: 14px;
line-height: 1.5;
}
/* =========================================================
BARRA INFERIOR
========================================================= */
.ccpt-footer-bottom {
background: #0b1117;
border-top: 1px solid #b52a2f;
padding: 24px 0;
}
/* =========================================================
COPYRIGHT
========================================================= */
.ccpt-copyright {
display: flex;
align-items: center;
gap: 15px;
}
.ccpt-copyright > i {
color: #b52a2f;
font-size: 35px;
}
.ccpt-copyright div {
display: flex;
flex-direction: column;
gap: 4px;
}
.ccpt-copyright strong {
color: #ffffff;
font-size: 14px;
}
.ccpt-copyright span {
color: #969da5;
font-size: 13px;
}
/* =========================================================
FRASE INSTITUCIONAL
========================================================= */
.ccpt-footer-motto {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 55px;
padding: 5px 20px;
border-left: 1px solid rgba(255,255,255,0.13);
border-right: 1px solid rgba(255,255,255,0.13);
color: #e1e4e7;
text-align: center;
font-size: 14px;
line-height: 1.6;
}
.ccpt-footer-motto i {
color: #b52a2f;
font-size: 10px;
}
/* =========================================================
DESARROLLADOR
========================================================= */
.ccpt-developer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: #969da5;
font-size: 14px;
}
.ccpt-developer strong {
color: #c7353b;
font-size: 15px;
}
.ccpt-developer > i {
margin-left: 7px;
color: #b52a2f;
font-size: 20px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.ccpt-footer-main {
padding: 55px 25px 45px;
}
.ccpt-footer-main .row > div {
margin-bottom: 35px;
}
.ccpt-footer-logo img {
width: 320px;
}
.ccpt-footer-bottom {
padding: 25px;
}
.ccpt-copyright {
justify-content: center;
margin-bottom: 20px;
}
.ccpt-footer-motto {
border-left: none;
border-right: none;
border-top: 1px solid rgba(255,255,255,0.13);
border-bottom: 1px solid rgba(255,255,255,0.13);
margin-bottom: 20px;
padding: 18px;
}
.ccpt-developer {
justify-content: center;
}
}
/* =========================================================
CELULAR
========================================================= */
@media (max-width: 575px) {
.ccpt-footer-main {
padding: 45px 20px 25px;
}
.ccpt-footer-logo {
text-align: center;
}
.ccpt-footer-logo img {
width: 285px;
margin: 0 auto;
}
.ccpt-footer-about p {
font-size: 15px;
line-height: 1.7;
text-align: center;
}
.ccpt-footer-social {
justify-content: center;
}
.ccpt-footer-column h3 {
font-size: 21px;
margin-bottom: 28px;
}
.ccpt-footer-column ul li a {
font-size: 15px;
}
.ccpt-contact-text span {
font-size: 13px;
}
.ccpt-footer-bottom {
padding: 22px 15px;
}
.ccpt-copyright {
flex-direction: column;
text-align: center;
}
.ccpt-copyright > i {
font-size: 30px;
}
.ccpt-footer-motto {
font-size: 13px;
}
.ccpt-developer {
flex-wrap: wrap;
font-size: 13px;
text-align: center;
}
}
/* =========================================================
EL COLEGIO EN CIFRAS
========================================================= */
.ccpt-cifras {
position: relative;
width: 100%;
padding: 90px 0 100px;
background: #f7f8fa;
overflow: hidden;
}
/* =========================================================
ENCABEZADO
========================================================= */
.ccpt-cifras-header {
text-align: center;
margin-bottom: 55px;
}
.ccpt-cifras-subtitle {
display: block;
margin-bottom: 10px;
color: #b00000;
font-size: 14px;
font-weight: 800;
letter-spacing: 3px;
}
.ccpt-cifras-header h2 {
margin: 0;
color: #111c28;
font-size: 46px;
font-weight: 800;
line-height: 1.15;
}
.ccpt-cifras-line {
width: 115px;
height: 4px;
margin: 18px auto;
background: #b00000;
border-radius: 10px;
}
.ccpt-cifras-header p {
max-width: 650px;
margin: 0 auto;
color: #56606b;
font-size: 17px;
line-height: 1.7;
}
/* =========================================================
GRID
========================================================= */
.ccpt-cifras-grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns:
1fr
1fr
320px
1fr
1fr;
grid-template-rows:
1fr
1fr;
gap: 25px;
align-items: center;
}
/* =========================================================
TARJETAS
========================================================= */
.ccpt-cifra-card {
min-height: 180px;
padding: 28px 25px;
display: flex;
align-items: center;
gap: 22px;
background: #ffffff;
border: 1px solid #e8ebef;
border-radius: 15px;
box-shadow:
0 8px 30px rgba(17, 28, 40, 0.07);
transition:
transform .3s ease,
box-shadow .3s ease;
}
.ccpt-cifra-card:hover {
transform: translateY(-6px);
box-shadow:
0 18px 40px rgba(17, 28, 40, 0.12);
}
/* =========================================================
POSICIÓN DE LAS TARJETAS
========================================================= */
.ccpt-cifra-card:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1;
}
.ccpt-cifra-card:nth-child(2) {
grid-column: 1 / 3;
grid-row: 2;
}
.ccpt-cifra-central {
grid-column: 3;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
}
.ccpt-cifra-card:nth-child(4) {
grid-column: 4 / 6;
grid-row: 1;
}
.ccpt-cifra-card:nth-child(5) {
grid-column: 4 / 6;
grid-row: 2;
}
/* =========================================================
ICONO
========================================================= */
.ccpt-cifra-icon {
width: 82px;
min-width: 82px;
height: 82px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #b00000;
color: #ffffff;
font-size: 31px;
box-shadow:
0 8px 20px rgba(176, 0, 0, 0.20);
}
/* =========================================================
INFORMACIÓN
========================================================= */
.ccpt-cifra-number {
color: #b00000;
font-size: 43px;
font-weight: 800;
line-height: 1;
}
.ccpt-cifra-info h3 {
margin: 8px 0 5px;
color: #111c28;
font-size: 21px;
font-weight: 700;
line-height: 1.2;
}
.ccpt-cifra-info p {
margin: 0;
color: #68727c;
font-size: 14px;
line-height: 1.5;
}
/* =========================================================
CÍRCULO CENTRAL
========================================================= */
.ccpt-years-circle {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: #ffffff;
border: 10px solid #ffffff;
border-radius: 50%;
box-shadow:
0 18px 50px rgba(17, 28, 40, 0.12);
}
/* =========================================================
PARTE SUPERIOR DEL CÍRCULO
========================================================= */
.ccpt-years-number {
width: 100%;
height: 58%;
display: flex;
align-items: center;
justify-content: center;
color: #111111;
font-size: 80px;
font-weight: 800;
line-height: 1;
}
/* =========================================================
PARTE ROJA
========================================================= */
.ccpt-years-bottom {
width: 100%;
height: 42%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #b00000;
color: #ffffff;
text-align: center;
}
.ccpt-years-bottom strong {
font-size: 27px;
font-weight: 800;
line-height: 1.1;
}
.ccpt-years-bottom span {
margin-top: 5px;
font-size: 17px;
font-weight: 700;
letter-spacing: .5px;
}
.ccpt-years-bottom i {
margin-top: 10px;
font-size: 17px;
}
/* =========================================================
DETALLE DECORATIVO
========================================================= */
.ccpt-cifras::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(176, 0, 0, .12);
}
.ccpt-cifras::after {
content: "";
position: absolute;
left: -5%;
bottom: -120px;
width: 110%;
height: 180px;
background: #ffffff;
border-radius: 50% 50% 0 0 / 35% 35% 0 0;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.ccpt-cifras-grid {
grid-template-columns:
1fr
280px
1fr;
grid-template-rows:
auto
auto;
gap: 20px;
}
.ccpt-cifra-card:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.ccpt-cifra-card:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
.ccpt-cifra-central {
grid-column: 2;
grid-row: 1 / 3;
}
.ccpt-cifra-card:nth-child(4) {
grid-column: 3;
grid-row: 1;
}
.ccpt-cifra-card:nth-child(5) {
grid-column: 3;
grid-row: 2;
}
}
/* =========================================================
CELULAR
========================================================= */
@media (max-width: 767px) {
.ccpt-cifras {
padding: 65px 20px 80px;
}
.ccpt-cifras-header {
margin-bottom: 40px;
}
.ccpt-cifras-header h2 {
font-size: 31px;
}
.ccpt-cifras-header p {
font-size: 15px;
}
.ccpt-cifras-grid {
display: flex;
flex-direction: column;
gap: 20px;
align-items: stretch;
}
.ccpt-cifra-central {
order: 1;
margin-bottom: 10px;
}
.ccpt-cifra-card:nth-child(1) {
order: 2;
}
.ccpt-cifra-card:nth-child(2) {
order: 3;
}
.ccpt-cifra-card:nth-child(4) {
order: 4;
}
.ccpt-cifra-card:nth-child(5) {
order: 5;
}
.ccpt-years-circle {
width: 250px;
height: 250px;
}
.ccpt-years-number {
font-size: 65px;
}
.ccpt-years-bottom strong {
font-size: 23px;
}
.ccpt-years-bottom span {
font-size: 14px;
}
.ccpt-cifra-card {
min-height: 135px;
padding: 22px;
gap: 17px;
}
.ccpt-cifra-icon {
width: 65px;
min-width: 65px;
height: 65px;
font-size: 24px;
}
.ccpt-cifra-number {
font-size: 34px;
}
.ccpt-cifra-info h3 {
font-size: 18px;
}
}
/* =========================================================
CELULAR PEQUEÑO
========================================================= */
@media (max-width: 420px) {
.ccpt-cifras-header h2 {
font-size: 27px;
}
.ccpt-years-circle {
width: 225px;
height: 225px;
}
.ccpt-years-number {
font-size: 58px;
}
.ccpt-cifra-card {
padding: 18px;
}
.ccpt-cifra-icon {
width: 57px;
min-width: 57px;
height: 57px;
font-size: 21px;
}
.ccpt-cifra-info h3 {
font-size: 16px;
}
.ccpt-cifra-info p {
font-size: 12px;
}
}
/* =========================================================
EVENTOS Y CURSOS - CCPTUMBES
========================================================= */
.ccpt-eventos {
position: relative;
padding: 105px 0 100px;
background:
radial-gradient(circle at 10% 20%, rgba(180, 0, 0, .035), transparent 28%),
radial-gradient(circle at 90% 80%, rgba(180, 0, 0, .035), transparent 28%),
#ffffff;
overflow: hidden;
}
/* DETALLES DECORATIVOS */
.ccpt-eventos::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
left: -100px;
top: 120px;
border: 1px solid rgba(180, 0, 0, .08);
border-radius: 50%;
}
.ccpt-eventos::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
right: -140px;
bottom: 50px;
border: 1px solid rgba(180, 0, 0, .08);
border-radius: 50%;
}
/* =========================================================
ENCABEZADO
========================================================= */
.ccpt-eventos-header {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: 45px;
}
.ccpt-eventos-icon {
width: 58px;
height: 58px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff3f3;
color: #c40000;
font-size: 25px;
box-shadow: 0 8px 25px rgba(180, 0, 0, .10);
}
.ccpt-eventos-header h2 {
margin: 0;
font-size: 48px;
line-height: 1.15;
font-weight: 800;
color: #151515;
}
.ccpt-title-line {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 18px auto 17px;
}
.ccpt-title-line span {
width: 38px;
height: 3px;
background: #c40000;
border-radius: 10px;
}
.ccpt-title-line b {
width: 12px;
height: 12px;
background: #c40000;
border-radius: 50%;
display: block;
}
.ccpt-eventos-header p {
max-width: 650px;
margin: auto;
color: #777;
font-size: 17px;
line-height: 1.7;
}
/* =========================================================
FILTROS
========================================================= */
.ccpt-filtros {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 42px;
}
.ccpt-filtro {
min-width: 170px;
padding: 17px 28px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background: #ffffff;
color: #151515;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
cursor: pointer;
transition: all .3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,.035);
}
.ccpt-filtro i {
color: #c40000;
font-size: 17px;
transition: .3s ease;
}
.ccpt-filtro:hover {
transform: translateY(-3px);
border-color: #c40000;
color: #c40000;
box-shadow: 0 10px 25px rgba(196,0,0,.10);
}
.ccpt-filtro.active {
background: #c40000;
border-color: #c40000;
color: #ffffff;
box-shadow: 0 10px 25px rgba(196,0,0,.25);
}
.ccpt-filtro.active i {
color: #ffffff;
}
/* =========================================================
GRID
========================================================= */
.ccpt-eventos-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 1180px;
margin: auto;
}
/* =========================================================
TARJETAS
========================================================= */
.ccpt-evento-card {
background: #ffffff;
border-radius: 14px;
overflow: hidden;
border: 1px solid #eeeeee;
box-shadow:
0 8px 25px rgba(0,0,0,.07);
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
opacity: 0;
transform: translateY(35px);
animation: ccptCardEntrada .7s ease forwards;
}
.ccpt-evento-card:nth-child(2) {
animation-delay: .12s;
}
.ccpt-evento-card:nth-child(3) {
animation-delay: .24s;
}
.ccpt-evento-card:nth-child(4) {
animation-delay: .36s;
}
@keyframes ccptCardEntrada {
to {
opacity: 1;
transform: translateY(0);
}
}
.ccpt-evento-card:hover {
transform: translateY(-10px);
border-color: rgba(196,0,0,.25);
box-shadow:
0 20px 45px rgba(0,0,0,.14);
}
/* =========================================================
IMAGEN
========================================================= */
.ccpt-evento-imagen {
position: relative;
width: 100%;
height: 330px;
overflow: hidden;
background: #f5f5f5;
}
.ccpt-evento-imagen img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform .7s cubic-bezier(.2,.7,.2,1),
filter .5s ease;
}
.ccpt-evento-card:hover .ccpt-evento-imagen img {
transform: scale(1.08);
filter: brightness(.78);
}
/* =========================================================
OVERLAY
========================================================= */
.ccpt-imagen-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
rgba(196,0,0,.78),
rgba(110,0,0,.65)
);
opacity: 0;
transition: opacity .4s ease;
}
.ccpt-evento-card:hover .ccpt-imagen-overlay {
opacity: 1;
}
/* =========================================================
BOTÓN VER
========================================================= */
.ccpt-ver-evento {
width: 58px;
height: 58px;
border-radius: 50%;
background: #ffffff;
color: #c40000;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
text-decoration: none !important;
transform: scale(.6) rotate(-15deg);
transition: all .35s ease;
box-shadow: 0 8px 25px rgba(0,0,0,.25);
}
.ccpt-evento-card:hover .ccpt-ver-evento {
transform: scale(1) rotate(0deg);
}
.ccpt-ver-evento:hover {
background: #c40000;
color: #ffffff;
transform: scale(1.08) !important;
}
/* =========================================================
ETIQUETA
========================================================= */
.ccpt-etiqueta {
position: absolute;
left: 16px;
top: 16px;
padding: 8px 13px;
border-radius: 30px;
background: #c40000;
color: #ffffff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
box-shadow: 0 5px 15px rgba(0,0,0,.18);
}
.ccpt-etiqueta i {
margin-right: 5px;
}
/* =========================================================
INFORMACIÓN
========================================================= */
.ccpt-evento-info {
padding: 25px 25px 27px;
}
.ccpt-evento-categoria {
color: #c40000;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}
.ccpt-evento-info h3 {
margin: 8px 0 10px;
font-size: 23px;
line-height: 1.25;
font-weight: 800;
color: #161616;
}
.ccpt-evento-info p {
margin: 0 0 19px;
color: #777;
font-size: 14px;
line-height: 1.7;
}
.ccpt-evento-link {
display: inline-flex;
align-items: center;
gap: 9px;
color: #c40000 !important;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition: gap .3s ease;
}
.ccpt-evento-link i {
font-size: 12px;
transition: transform .3s ease;
}
.ccpt-evento-link:hover {
gap: 14px;
}
.ccpt-evento-link:hover i {
transform: translateX(3px);
}
/* =========================================================
CURSO PLACEHOLDER
========================================================= */
.ccpt-curso-placeholder {
background:
linear-gradient(
135deg,
#870000,
#c40000,
#e52a2a
);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #ffffff;
}
.ccpt-curso-placeholder > span:not(.ccpt-etiqueta) {
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
}
.ccpt-curso-icon {
width: 90px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.35);
margin-bottom: 18px;
font-size: 40px;
animation: ccptCursoFloat 3s ease-in-out infinite;
}
@keyframes ccptCursoFloat {
0%,100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* =========================================================
FILTRO - OCULTAR
========================================================= */
.ccpt-evento-card.oculto {
display: none;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.ccpt-eventos {
padding: 80px 20px;
}
.ccpt-eventos-grid {
grid-template-columns: repeat(2, 1fr);
}
.ccpt-eventos-header h2 {
font-size: 40px;
}
}
@media (max-width: 767px) {
.ccpt-eventos {
padding: 35px 15px 60px;
}
.ccpt-eventos-header h2 {
font-size: 34px;
}
.ccpt-eventos-header p {
font-size: 15px;
}
.ccpt-filtros {
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.ccpt-filtro {
min-width: auto;
flex: 1;
padding: 14px 12px;
font-size: 13px;
}
.ccpt-eventos-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.ccpt-evento-imagen {
height: auto;
aspect-ratio: 16 / 10;
}
}
@media (max-width: 480px) {
.ccpt-filtro {
width: 100%;
flex: none;
}
.ccpt-eventos-header h2 {
font-size: 30px;
}
}
/* =========================================
FILTRO DE EVENTOS Y CURSOS
========================================= */
.ccpt-evento-card.oculto {
display: none !important;
}
/* Animación al mostrar */
@keyframes ccptFiltroEntrada {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ccpt-evento-card.mostrando {
animation: ccptFiltroEntrada .45s ease forwards;
}
/* =========================================
BARRA SUPERIOR
========================================= */
/* =========================================
BARRA SUPERIOR
========================================= */
.top-info {
width: 100%;
height: 62px;
background: #0878d1;
display: flex;
align-items: center;
padding: 0 25px;
margin: 0;
box-sizing: border-box;
color: #fff;
}
/* Cada bloque */
.top-info-item {
display: flex;
align-items: center;
height: 100%;
padding: 0 25px;
box-sizing: border-box;
}
/* Horario */
.top-info-item.horario {
flex: 1;
}
/* Separadores */
.top-info-item + .top-info-item {
border-left: 1px solid rgba(255,255,255,0.25);
}
/* Iconos */
.top-info-item i {
font-size: 20px;
color: #fff;
margin-right: 12px;
}
/* Contenido */
.top-info-item div {
display: flex;
align-items: center;
gap: 8px;
}
/* Títulos */
.top-info-item strong {
font-size: 13px;
font-weight: 700;
color: #fff;
}
/* Texto */
.top-info-item span {
font-size: 14px;
color: #fff;
white-space: nowrap;
}
/* =========================================
CELULAR
========================================= */
@media (max-width: 768px) {
.top-info {
height: auto;
padding: 5px 10px;
flex-direction: column;
align-items: stretch;
}
.top-info-item,
.top-info-item.horario {
width: 100%;
height: auto;
min-height: 40px;
padding: 6px 5px;
border-left: none !important;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.top-info-item:last-child {
border-bottom: none;
}
.top-info-item i {
width: 25px;
min-width: 25px;
font-size: 17px;
margin-right: 10px;
}
.top-info-item div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.top-info-item strong {
font-size: 11px;
}
.top-info-item span {
font-size: 12px;
white-space: normal;
}
}
/* =========================================
OCULTAR BARRA SUPERIOR EN CELULARES
========================================= */
@media (max-width: 768px) {
.top-info {
display: none !important;
}
}
/* =========================================
NEWSLETTER - CCP TUMBES
========================================= */
.ccpt-newsletter {
position: relative;
width: 100%;
overflow: hidden;
padding: 42px 0;
background:
linear-gradient(
120deg,
#073b91 0%,
#0648b5 45%,
#0878d1 100%
);
color: #fff;
}
/* =========================================
DECORACIÓN SUPERIOR
========================================= */
.ccpt-newsletter::before {
content: "";
position: absolute;
top: -70px;
left: -100px;
width: 420px;
height: 120px;
background: linear-gradient(
135deg,
transparent 20%,
rgba(0,174,255,.85) 21%,
rgba(0,174,255,.85) 35%,
transparent 36%
);
transform: rotate(-8deg);
opacity: .8;
}
/* =========================================
DECORACIÓN INFERIOR
========================================= */
.ccpt-newsletter::after {
content: "";
position: absolute;
right: -100px;
bottom: -65px;
width: 550px;
height: 130px;
border-top: 5px solid rgba(0,174,255,.8);
border-radius: 50%;
transform: rotate(-7deg);
box-shadow:
0 -15px 0 rgba(255,193,7,.8);
}
/* =========================================
CONTENEDOR
========================================= */
.ccpt-newsletter-container {
position: relative;
z-index: 2;
width: 90%;
max-width: 1250px;
margin: auto;
display: flex;
align-items: center;
gap: 45px;
}
/* =========================================
TEXTO
========================================= */
.ccpt-newsletter-content {
flex: 1;
}
.ccpt-newsletter-line {
display: block;
width: 110px;
height: 4px;
margin-bottom: 14px;
background: linear-gradient(
90deg,
#ffc107,
#fff
);
border-radius: 5px;
}
.ccpt-newsletter-content h2 {
margin: 0 0 12px;
font-size: 36px;
line-height: 1.15;
font-weight: 700;
color: #fff;
}
.ccpt-newsletter-content p {
max-width: 540px;
margin: 0;
font-size: 17px;
line-height: 1.6;
color: rgba(255,255,255,.92);
}
/* =========================================
ICONO DE CORREO
========================================= */
.ccpt-newsletter-mail {
position: relative;
width: 150px;
height: 150px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
/* Anillos */
.ccpt-newsletter-mail::before,
.ccpt-newsletter-mail::after {
content: "";
position: absolute;
border-radius: 50%;
border: 2px solid rgba(0,200,255,.65);
}
.ccpt-newsletter-mail::before {
width: 145px;
height: 145px;
animation: ccptMailRotate 8s linear infinite;
}
.ccpt-newsletter-mail::after {
width: 120px;
height: 120px;
border-color: rgba(255,193,7,.7);
animation: ccptMailRotateReverse 6s linear infinite;
}
/* Círculo */
.ccpt-mail-circle {
position: relative;
z-index: 2;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle at 35% 30%,
#18b8ff,
#0878d1 55%,
#06409a
);
border: 3px solid rgba(255,255,255,.8);
box-shadow:
0 0 25px rgba(0,190,255,.65),
inset 0 0 20px rgba(255,255,255,.15);
animation: ccptMailFloat 3s ease-in-out infinite;
}
/* Icono */
.ccpt-mail-circle i {
color: #fff;
font-size: 40px;
filter: drop-shadow(
0 3px 4px rgba(0,0,0,.25)
);
}
/* =========================================
FORMULARIO
========================================= */
.ccpt-newsletter-form {
width: 500px;
display: flex;
align-items: center;
background: #fff;
border-radius: 14px;
padding: 5px;
box-shadow:
0 10px 30px rgba(0,0,0,.18);
}
/* INPUT */
.ccpt-newsletter-input {
flex: 1;
display: flex;
align-items: center;
padding-left: 18px;
}
.ccpt-newsletter-input i {
color: #0757b9;
font-size: 17px;
margin-right: 12px;
}
.ccpt-newsletter-input input {
width: 100%;
height: 48px;
border: none;
outline: none;
background: transparent;
font-size: 15px;
color: #333;
}
.ccpt-newsletter-input input::placeholder {
color: #999;
}
/* =========================================
BOTÓN
========================================= */
.ccpt-newsletter-form button {
height: 48px;
padding: 0 25px;
border: none;
border-radius: 10px;
background:
linear-gradient(
135deg,
#ffc107,
#e8a900
);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: all .3s ease;
box-shadow:
0 5px 15px rgba(0,0,0,.15);
}
.ccpt-newsletter-form button i {
transition: transform .3s ease;
}
.ccpt-newsletter-form button:hover {
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(0,0,0,.25);
}
.ccpt-newsletter-form button:hover i {
transform: translateX(5px);
}
/* =========================================
ANIMACIONES
========================================= */
@keyframes ccptMailFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
}
@keyframes ccptMailRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ccptMailRotateReverse {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1050px) {
.ccpt-newsletter-container {
gap: 25px;
}
.ccpt-newsletter-content h2 {
font-size: 30px;
}
.ccpt-newsletter-mail {
width: 125px;
height: 125px;
min-width: 125px;
}
.ccpt-newsletter-form {
width: 420px;
}
}
/* =========================================
CELULAR
========================================= */
@media (max-width: 768px) {
.ccpt-newsletter {
padding: 35px 0;
}
.ccpt-newsletter-container {
width: 90%;
flex-direction: column;
text-align: center;
gap: 25px;
}
.ccpt-newsletter-content {
width: 100%;
}
.ccpt-newsletter-line {
margin-left: auto;
margin-right: auto;
}
.ccpt-newsletter-content h2 {
font-size: 27px;
}
.ccpt-newsletter-content p {
font-size: 14px;
}
.ccpt-newsletter-form {
width: 100%;
flex-direction: column;
background: transparent;
box-shadow: none;
gap: 10px;
}
.ccpt-newsletter-input {
width: 100%;
box-sizing: border-box;
background: #fff;
border-radius: 10px;
padding-left: 15px;
}
.ccpt-newsletter-input input {
height: 50px;
}
.ccpt-newsletter-form button {
width: 100%;
}
}
/* =========================================
CELULAR PEQUEÑO
========================================= */
@media (max-width: 480px) {
.ccpt-newsletter-content h2 {
font-size: 24px;
}
.ccpt-newsletter-content p {
font-size: 13px;
}
.ccpt-newsletter-mail {
transform: scale(.85);
}
}
/* =========================================
BANNER INTERNO - CCP TUMBES
========================================= */
.ccpt-page-banner {
position: relative;
width: 100%;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-image: url("../img/banner-institucion.jpg");
background-size: cover;
background-position: center;
}
/* =========================================
OVERLAY AZUL
========================================= */
.ccpt-banner-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
120deg,
rgba(2, 39, 91, .94),
rgba(0, 76, 166, .84),
rgba(2, 35, 82, .92)
);
z-index: 1;
}
/* =========================================
CONTENIDO
========================================= */
.ccpt-banner-content {
position: relative;
z-index: 5;
width: 90%;
max-width: 1100px;
text-align: center;
color: #fff;
}
/* =========================================
ICONO
========================================= */
.ccpt-banner-icon {
width: 50px;
height: 50px;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 25px;
}
.ccpt-banner-icon i {
filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
}
/* =========================================
ETIQUETA
========================================= */
.ccpt-banner-section {
display: inline-flex;
align-items: center;
gap: 15px;
color: #ffc107;
font-size: 17px;
font-weight: 700;
letter-spacing: 5px;
}
.ccpt-banner-section::before,
.ccpt-banner-section::after {
content: "";
width: 55px;
height: 1px;
background: rgba(255,193,7,.7);
}
/* =========================================
TÍTULO
========================================= */
.ccpt-banner-content h1 {
margin: 10px 0 12px;
color: #fff;
font-size: 58px;
line-height: 1.1;
font-weight: 700;
letter-spacing: -1px;
text-shadow:
0 5px 20px rgba(0,0,0,.25);
}
/* =========================================
DIVISOR
========================================= */
.ccpt-banner-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0 auto 22px;
}
.ccpt-banner-divider span {
width: 55px;
height: 3px;
background: #fff;
}
.ccpt-banner-divider b {
width: 14px;
height: 14px;
margin: 0 5px;
background: #ffc107;
transform: rotate(45deg);
}
/* =========================================
BREADCRUMB
========================================= */
.ccpt-banner-breadcrumb {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 12px 22px;
border: 1px solid rgba(255,255,255,.25);
border-radius: 50px;
background: rgba(3,35,80,.55);
backdrop-filter: blur(8px);
box-shadow:
0 8px 25px rgba(0,0,0,.18);
font-size: 14px;
}
.ccpt-banner-breadcrumb a {
display: flex;
align-items: center;
gap: 8px;
color: #fff;
text-decoration: none;
transition: .3s ease;
}
.ccpt-banner-breadcrumb a:hover {
color: #ffc107;
}
.ccpt-banner-breadcrumb a:first-child i {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0878d1;
color: #fff;
font-size: 12px;
}
.ccpt-banner-breadcrumb .separator {
color: #fff;
font-size: 11px;
}
.ccpt-banner-breadcrumb strong {
color: #ffc107;
}
/* =========================================
DECORACIÓN DE PUNTOS
========================================= */
.ccpt-banner-dots {
position: absolute;
width: 90px;
height: 90px;
z-index: 2;
opacity: .45;
background-image: radial-gradient(
rgba(255,255,255,.6) 1.5px,
transparent 1.5px
);
background-size: 16px 16px;
}
.ccpt-dots-left {
left: 30px;
top: 45px;
}
.ccpt-dots-right {
right: 30px;
bottom: 65px;
}
/* =========================================
CÍRCULOS DECORATIVOS
========================================= */
.ccpt-page-banner::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
left: -170px;
bottom: -190px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
box-shadow:
0 0 0 35px rgba(255,255,255,.04),
0 0 0 70px rgba(255,255,255,.025);
z-index: 2;
}
.ccpt-page-banner::after {
content: "";
position: absolute;
width: 250px;
height: 250px;
right: -130px;
top: -150px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
z-index: 2;
}
/* =========================================
FORMA INFERIOR
========================================= */
.ccpt-banner-bottom {
position: absolute;
z-index: 4;
left: -2%;
bottom: -35px;
width: 104%;
height: 70px;
background: #fff;
clip-path: polygon(
0 35%,
50% 70%,
100% 35%,
100% 100%,
0 100%
);
border-top: 3px solid #ffc107;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.ccpt-page-banner {
height: 310px;
}
.ccpt-banner-content h1 {
font-size: 46px;
}
.ccpt-banner-section {
font-size: 14px;
}
}
/* =========================================
CELULAR
========================================= */
@media (max-width: 600px) {
.ccpt-page-banner {
height: 260px;
background-position: center;
}
.ccpt-banner-icon {
width: 40px;
height: 40px;
font-size: 20px;
}
.ccpt-banner-section {
font-size: 11px;
letter-spacing: 3px;
gap: 8px;
}
.ccpt-banner-section::before,
.ccpt-banner-section::after {
width: 25px;
}
.ccpt-banner-content h1 {
font-size: 34px;
margin: 8px 0 10px;
}
.ccpt-banner-divider {
margin-bottom: 16px;
}
.ccpt-banner-divider span {
width: 35px;
}
.ccpt-banner-divider b {
width: 10px;
height: 10px;
}
.ccpt-banner-breadcrumb {
max-width: 90%;
padding: 9px 15px;
gap: 10px;
font-size: 11px;
}
.ccpt-banner-breadcrumb a:first-child i {
width: 23px;
height: 23px;
}
.ccpt-dots-left,
.ccpt-dots-right {
opacity: .2;
}
}
/* =========================================================
BARRA SOCIAL LATERAL
COLEGIO DE CONTADORES PÚBLICOS DE TUMBES
========================================================= */
.social-sidebar {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 82px;
padding: 20px 11px;
background: linear-gradient(
180deg,
#005b9f 0%,
#004b87 100%
);
border-radius: 42px 0 0 42px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
z-index: 999990;
box-shadow:
-5px 0 18px rgba(0, 0, 0, 0.15),
0 5px 25px rgba(0, 0, 0, 0.10);
transition: all 0.3s ease;
}
/* =========================================================
BOTONES
========================================================= */
.social-item {
position: relative;
width: 56px;
height: 56px;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.18);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
/* =========================================================
EFECTO HOVER
========================================================= */
.social-item:hover {
transform: scale(1.12) translateX(-4px);
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.25);
}
/* =========================================================
FACEBOOK
========================================================= */
.social-item.facebook i {
color: #1877F2;
font-size: 27px;
}
/* =========================================================
GOOGLE MAPS / UBICACIÓN
========================================================= */
.social-item.maps {
overflow: hidden;
}
.social-item.maps i {
font-size: 27px;
background: linear-gradient(
135deg,
#4285F4 20%,
#34A853 45%,
#FBBC05 70%,
#EA4335 90%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* =========================================================
YOUTUBE
========================================================= */
.social-item.youtube i {
color: #FF0000;
font-size: 27px;
}
/* =========================================================
LOGO DEL COLEGIO
========================================================= */
.social-item.colegio {
overflow: hidden;
}
.social-item.colegio img {
width: 38px;
height: 38px;
object-fit: contain;
display: block;
}
/* =========================================================
PEQUEÑO EFECTO DE ENTRADA
========================================================= */
.social-sidebar {
animation: socialEntrada 0.7s ease-out;
}
@keyframes socialEntrada {
from {
opacity: 0;
transform:
translateY(-50%)
translateX(70px);
}
to {
opacity: 1;
transform:
translateY(-50%)
translateX(0);
}
}
/* =========================================================
LÍNEA DECORATIVA
========================================================= */
.social-sidebar::before {
content: "";
position: absolute;
left: 18px;
right: 18px;
top: 10px;
height: 2px;
background: rgba(255,255,255,0.18);
border-radius: 10px;
}
.social-sidebar::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 10px;
height: 2px;
background: rgba(255,255,255,0.18);
border-radius: 10px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.social-sidebar {
width: 70px;
padding: 16px 9px;
gap: 13px;
border-radius: 35px 0 0 35px;
}
.social-item {
width: 50px;
height: 50px;
}
.social-item.facebook i,
.social-item.maps i,
.social-item.youtube i {
font-size: 24px;
}
.social-item.colegio img {
width: 34px;
height: 34px;
}
}
/* =========================================================
CELULAR
========================================================= */
@media (max-width: 600px) {
.social-sidebar {
width: 60px;
padding: 12px 6px;
gap: 10px;
border-radius: 30px 0 0 30px;
}
.social-item {
width: 43px;
height: 43px;
}
.social-item.facebook i,
.social-item.maps i,
.social-item.youtube i {
font-size: 21px;
}
.social-item.colegio img {
width: 29px;
height: 29px;
}
}
/* =========================================================
AJUSTE DE ESPACIO ENTRE COMUNICADOS Y SERVICIOS
========================================================= */
.feature-area.pb-80 {
padding-bottom: 20px !important;
}
.ccpt-servicios {
margin-top: 0 !important;
padding-top: 35px !important;
}
/* =========================================================
EVENTOS Y CURSOS - CCPTUMBES
========================================================= */
.ccpt-eventos {
position: relative;
padding: 45px 0 80px;
background:
radial-gradient(circle at 10% 20%, rgba(180, 0, 0, .035), transparent 28%),
radial-gradient(circle at 90% 80%, rgba(180, 0, 0, .035), transparent 28%),
#ffffff;
overflow: hidden;
}