/**/ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap'); @font-face { font-family: 'CenturyGothicPaneuropeanRegular'; src: url('../fonts/CenturyGothicPaneuropeanRegular.eot'); src: url('../fonts/CenturyGothicPaneuropeanRegular.eot') format('embedded-opentype'), url('../fonts/CenturyGothicPaneuropeanRegular.woff2') format('woff2'), url('../fonts/CenturyGothicPaneuropeanRegular.woff') format('woff'), url('../fonts/CenturyGothicPaneuropeanRegular.ttf') format('truetype'), url('../fonts/CenturyGothicPaneuropeanRegular.svg#CenturyGothicPaneuropeanRegular') format('svg'); } @font-face { font-family: 'CenturyGothicPaneuropeanBold'; src: url('../fonts/CenturyGothicPaneuropeanBold.eot'); src: url('../fonts/CenturyGothicPaneuropeanBold.eot') format('embedded-opentype'), url('../fonts/CenturyGothicPaneuropeanBold.woff2') format('woff2'), url('../fonts/CenturyGothicPaneuropeanBold.woff') format('woff'), url('../fonts/CenturyGothicPaneuropeanBold.ttf') format('truetype'), url('../fonts/CenturyGothicPaneuropeanBold.svg#CenturyGothicPaneuropeanBold') format('svg'); } @font-face { font-family: 'CenturyGothicPaneuropeanBlack'; src: url('../fonts/CenturyGothicPaneuropeanBlack.eot'); src: url('../fonts/CenturyGothicPaneuropeanBlack.eot') format('embedded-opentype'), url('../fonts/CenturyGothicPaneuropeanBlack.woff2') format('woff2'), url('../fonts/CenturyGothicPaneuropeanBlack.woff') format('woff'), url('../fonts/CenturyGothicPaneuropeanBlack.ttf') format('truetype'), url('../fonts/CenturyGothicPaneuropeanBlack.svg#CenturyGothicPaneuropeanBlack') format('svg'); } @font-face { font-family: 'CenturyGothicPaneuropeanSemiBold'; src: url('../fonts/CenturyGothicPaneuropeanSemiBold.eot'); src: url('../fonts/CenturyGothicPaneuropeanSemiBold.eot') format('embedded-opentype'), url('../fonts/CenturyGothicPaneuropeanSemiBold.woff2') format('woff2'), url('../fonts/CenturyGothicPaneuropeanSemiBold.woff') format('woff'), url('../fonts/CenturyGothicPaneuropeanSemiBold.ttf') format('truetype'), url('../fonts/CenturyGothicPaneuropeanSemiBold.svg#CenturyGothicPaneuropeanSemiBold') format('svg'); } html { scroll-behavior: smooth;} .bodyhidden { overflow-x: hidden;} /*body { font-family: "Cal Sans", sans-serif;}*/ body { font-family: 'CenturyGothicPaneuropeanRegular'; background: #f2f2f2;} * { padding:0px; margin:0px;} img { max-width:100%; height:auto;} p { margin-bottom:0px;} h1 {} h2 {} h3 {} h4 {} h5 {} a { text-decoration:none !important;} a:hover {color: #fff;} ul { list-style:none;} li { list-style: none} input,select,button:focus { box-shadow: none;outline: none;} .form-control:focus { box-shadow: none;background: #f4f4f4;border-color:#ced4da; } .btn.focus, .btn:focus { outline: 0; box-shadow:none;} .my-container {max-width:84%; margin:auto;} .header-top {background:#222222;padding: 10px 0px;font-size: 14px;line-height: 30px; color:#fff;} .top-right { text-align:right;} .logo {padding-top: 23px;} .logo img {width: 225px; } .my-header { position: relative;} .header { padding: 10px 0px;position: absolute;width: 100%;margin: auto;z-index: 10;background: #ffffff;background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(94, 94, 94, 0) 0%, rgba(0, 0, 0, 1) 100%);} .slick-arrow {display: none !important;} .my-menu { padding-top: 19px;} .my-menu .nav-item .nav-link { font-size: 15px;line-height: 30px;font-weight: 600;color:#fff;} .nav-but {background: #0082ff; color:#fff !important; padding:8px 30px !important; border-radius: 30px;margin-left: 30px;} .navbar .active a {color: #0082ff !important; } .navbar-nav .dropdown-menu { border-radius: 0px; margin-top: 10px; } .navbar-nav .dropdown-item:hover{background: url(../images/menu-border.jpg) bottom left no-repeat;background-position: 16px 30px;} .logo-right {text-align:right} .top-right a{font-size:20px; padding-left: 10px;} .vision {position: relative;padding:45px 0px;background:url("../images/skyline.png") #f1f1f1 no-repeat bottom; top: -10px;} .vision h2 { font-size: 36px;line-height: 1.25em;color: #222222;font-weight: 700;margin-bottom: 10px; text-align: center;} .vision p {font-size: 15px;line-height: 1.6em;font-weight: 500;color: #757575; text-align: center; } .vision-head {margin-bottom:30px;} .quote { max-width:1200px; margin: auto; padding: 30px 0px; margin: auto; text-align: center; } .quote p { background: url(../images/quote.png) no-repeat right center; background-position: 9px 3px; padding: 26px 58px 26px 58px; font-size: 22px; color: #6a280b; font-family: "Cinzel", serif; font-weight: 400; background-size: 36px;} .play-button { background: #e0d4be; position: absolute;width: 90px;height: 90px;position: absolute;bottom: 0px;right: 0px;} .play-button a {border:none !important;padding: 28px 34px !important; font-size: 26px;} .play-button a i {color:#414141; font-size: 30px;} .inner-bg {background: url(../images/innerslide.jpg) no-repeat center;height: 235px; background-size:cover;} .inner-banner { position: absolute;bottom: 0px;padding-bottom: 20px; color:#fff; text-align: center; width:100%; } .inner-banner p { font-size: 30px; text-transform: uppercase;} .breadcrumb-item {color:#e0d4be !important;font-size:16px;} .breadcrumb-item i {font-size:14px;} .breadcrumb a {font-size: 16px; color:#fff; } .about-section { position: relative; padding: 45px 0px; background: url("../images/blue.jpg") no-repeat center; color: #ffffff; top: -10px; } .about-section .sec-title { margin-bottom: 20px; } .about-section .content-box { position: relative; } .about-section .content { position: relative; } .about-section .image-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: right top; background-size: cover; } .ab-image img { object-fit: cover; width: 100%; height: 100%;} .about-section .pattern-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; } .about-section .upper-text { position: relative; margin-bottom: 20px; line-height: 1.6em; } .about-section .upper-text .big-letter { position: relative; display: block; color: #ffffff; background: #0082ff; float: left; font-family: 'Manjari', sans-serif; font-size: 60px; width: 72px; height: 72px; font-weight: 700; line-height: 72px; padding-top: 12px; text-align: center; margin: 0px 30px 10px 0px; } .about-section .text { position: relative; margin-bottom: 45px; line-height: 1.6em; } .about-section .signature { position: relative; margin-bottom: 35px; } .about-section .info { position: relative; font-size: 15px; color: #a7a7a7; line-height: 1.5em; } .about-section .info .name { position: relative; font-family: 'Manjari', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 700; color: #ffffff; } .about-section .quote-box { position: absolute; right: 100px; bottom: 100px; width: 60px; height: 60px; } .about-section .quote-box .round-point { position: absolute; left: 0%; top: 0%; width: 60px; height: 60px; font-size: 40px; line-height: 60px; text-align: center; background: #0082ff; color: #ffffff; font-weight: 300; cursor: pointer; border-radius: 50%; } .about-section .quote-box .round-point:before { content: ''; position: absolute; left: -8px; top: -8px; right: -8px; bottom: -8px; background: #0082ff; opacity: 0.30; border-radius: 50%; } .about-section .quote-box .inner { position: absolute; right: 0px; bottom: 100%; margin-bottom: 60px; width: 350px; padding: 35px 30px 30px; line-height: 24px; color: #ffffff; background: #0082ff; -ms-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05), 0px 20px 30px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05), 0px 20px 30px 0px rgba(0, 0, 0, 0.05); -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0; visibility: hidden; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .about-section .quote-box .inner:before { content: ''; position: absolute; right: 30px; top: 100%; border: 20px solid transparent; border-top: 20px solid #0082ff; border-right: 20px solid #0082ff; } .about-section .quote-box:hover .inner { -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; visibility: visible; z-index: 1; } .about-section .quote-box .icon-one { position: absolute; right: -20px; top: 0px; line-height: 1em; font-size: 224px; color: rgba(0, 0, 0, 0.07); } .about-section .quote-box .icon-two { position: relative; line-height: 1em; font-size: 48px; color: #ffffff; margin-bottom: 15px; } .about-section .quote-box .text { position: relative; font-family: 'Manjari', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4em; margin: 0; } .rlogo {text-align: right;} .rlogo img {width:95px;} /* .banner { background: url("../images/design2.png") no-repeat center; padding: 50px 0px; height: 760px; position: relative;-webkit-box-shadow: 0px 7px 19px -4px rgba(0,0,0,0.32); -moz-box-shadow: 0px 7px 19px -4px rgba(0,0,0,0.32); box-shadow: 0px 7px 19px -4px rgba(0,0,0,0.32); } */ /*.banner { height: 920px; overflow: hidden}*/ .banner img {width:100%; height:100%; object-fit: cover;} /*.block-container {max-width: 1320px; margin: auto;} .c1 { background: #207fb7;padding: 50px;color: #fff;content: "";position: absolute;left: 35px;right: 0;top: -20px; } .c1 a i { color: #fff;background: #ffffff3b;padding: 12px 15px 10px 15px; border-radius: 50%;font-size: 24px;border: 1px solid;} .custom-about-box a i {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} .custom-about-box a:hover i {-webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3);transform: scale(1.3);} .c1 h3 { margin-top: 20px;color: #fff;font-size: 28px;letter-spacing: 0.5px; font-family: "PT Serif", serif;font-weight: 700; } .c2 { background: #db0c22;padding: 97px 69px;color: #fff;margin-top: -28px;box-shadow: 0px 0px 30px 3px #41414130;z-index: 1;content: "";position: absolute;bottom: -20px; left: 0;right: 0;top: -37px; } .c2 a i { color: #fff;background: #ffffff3b;padding: 12px 15px 10px 15px; border-radius: 50%;font-size: 24px;border: 1px solid;} .c2 h3 { margin-top: 20px;color: #fff; font-size: 28px; letter-spacing: 0.5px; font-family: "PT Serif", serif;font-weight: 700; } .c3 { background: #08b749;padding: 50px;color: #fff;content: "";position: absolute;top: -20px;left: -24px;right: 0;} .c3 a i { color: #fff;background: #ffffff3b;padding: 12px 15px 10px 15px; border-radius: 50%;font-size: 24px;border: 1px solid;} .c3 h3 { margin-top: 20px;color: #fff;font-size: 28px;letter-spacing: 0.5px; font-family: "PT Serif", serif; font-weight: 700; } */ .go { position: relative;top: -18px; } .t-cup {font-size:50px;} .link-btn { margin-top:20px;} .block {background-image:url(../images/sideeffect-right.jpg); background-repeat: no-repeat; background-position:top right;} .layer-outer { position: absolute; left: 0; top: 0; height: 100%; width: 50%; } .gradient-layer { position: absolute; left: -143px; width: 100%; height: 140%; top: -21%; border-radius: 0%; -webkit-transform: skew(200deg); -moz-transform: skew(200deg); -ms-transform: skew(200deg); -o-transform: skew(200deg); transform: skew(200deg); background:url("../images/design2.png") no-repeat; /* background: -moz-linear-gradient(to left, rgba(247, 0, 104, 1) 0%, rgba(68, 16, 102, 1) 100%); background: -webkit-linear-gradient(to left, rgba(247, 0, 104, 1) 0%, rgba(68, 16, 102, 1) 100%); background: linear-gradient(to left, #f70068 0%, #441066 100%); */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F70068",endColorstr="#441066",GradientType=1); opacity: 2; } .banner-img img { width: 600px;} .banner-img { text-align: center;} .reg-details { padding-top: 90px; top: 0px;left:13%; z-index: 99; max-width: 1400px; margin: auto; width: 100%; position: absolute;} .reg-details img { width: 210px;} .reg-details h2 { font-size: 30px; font-weight: 500;color:#203975;font-weight: 700;font-family: 'Eras Bold ITC';} .reg-details h4 { font-size: 55px; font-weight: 700;color:#e8a614; font-weight: 800;font-family: 'Eras Bold ITC';} .reg-details p { font-size: 22px; font-weight: 700;font-family: 'Eras Bold ITC';} .reg-details a { background: #203975; color: #fff; padding: 10px 39px; border-radius: 50px; margin-top: 18px; font-size: 22px; font-family: 'Eras Bold ITC'; display: inline-block;} .coun {position: relative;top: -230px;} .coun-img{max-width: 880px; margin: auto;} .image-column { position: relative; margin-bottom: 50px;margin-left: 80px; } .about-section .image-column .image-box { position: relative; padding-left: 80px; } .about-section .image-column .image-box1 { position: relative; padding-left: 80px; } .about-section .image-column .image { position: relative; margin-bottom: 0; } .image-column .image:before { position: absolute; right: -11%; top: 0%; height: 470px; width: 470px; background: #207fb7;border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 100%; -webkit-animation: dizzling 10s infinite; -moz-animation: dizzling 10s infinite; -ms-animation: dizzling 10s infinite; -o-animation: dizzling 10s infinite; animation: dizzling 10s infinite; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; content: ""; } .image-box {margin: auto;} .image-column .image-box img { position: relative; z-index: 1; border-radius: 50%; border: 10px solid #ffffff; box-shadow: 0 0 20px #4141411a; } .image-box1 { width: 400px;} .image-column .image-box1 img { position: relative; z-index: 1; border: 10px solid #ffffff; box-shadow: 0 0 20px #4141411a; } .bird3 { position: absolute; left: 23px; z-index: 1; top: 306px; } @keyframes dizzling { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0) } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg) } to { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0) } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } @keyframes float-bob-y { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } .coun-inner { position: absolute; top: -22px;} .i-left { float:left; width:15%;} .i-right {float:right;width:85%; } .i-right h3 { font-size: 24px;font-family: "PT Serif", serif;font-weight: 700;} i-right p {} .about {padding:60px 0px; padding-top: 22px; padding-bottom: 30px;background: #F1E9D8; background: linear-gradient(0deg,rgba(241, 233, 216, 0) 0%, rgba(241, 233, 216, 0.45) 50%, rgba(241, 233, 216, 0) 100%); } .about ul { margin-top: 20px; padding-left: 0px;} .about ul li {margin-bottom: 20px;} .about h4 { font-size: 16px;color:#6a280b; padding-top: 12px; text-transform: uppercase; font-weight:700;} .about h2 { margin-bottom: 20px;padding-top: 16px;font-size: 35px; color: #414141;font-family: "Cinzel", serif;} .about h2 span { font-size: 32px;font-weight: 800; } .about p { font-size: 16px; font-weight: 300; line-height: 32px; color: #414141;margin-bottom: 20px;} .about a { color: #414141; border:1px solid #414141; padding: 10px 39px; border-radius: 50px; font-size: 18px; display: inline-block; } .pad {padding: 0px;} .count { padding: 30px 0px;} /* .tj_services_section { padding-top: 40px; } .tj_services_section .service-item { margin-bottom: 40px; padding-bottom: 0; margin-top: 0; gap: 25px; } */ .service-item .service-content .service-icon img { -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .tj_services_section { padding-top: 40px; @media #{$lg, $md} { padding-top: 0; } @media #{$sm, $xs} { padding-top: 0; } .grid-item { &:nth-child(even) { .service-item { flex-direction: column-reverse; } } &:nth-child(2) { .service-item { margin-top: -65px; } } &:nth-child(3) { .service-item { /* margin-top: -175px;*/ } } &:nth-child(4) { .service-item { margin-top: -65px; } } @media #{$lg, $md} { .service-item { flex-direction: column-reverse; gap: 0; } &:nth-child(even) { .service-item { flex-direction: column-reverse; } } &:nth-child(2) { .service-item { margin-top: 0; } } &:nth-child(3) { .service-item { margin-top: 0; } } &:nth-child(4) { .service-item { margin-top: 0; } } } @media #{$sm, $xs} { .service-item { flex-direction: column-reverse; gap: 0; } &:nth-child(even) { .service-item { flex-direction: column-reverse; } } &:nth-child(2) { .service-item { margin-top: 0; } } &:nth-child(3) { .service-item { margin-top: 0; } } &:nth-child(4) { .service-item { margin-top: 0; } } } } .service-item { margin-bottom: 40px; padding-bottom: 0; margin-top: 0; gap: 25px; .service-content { margin-bottom: 0; } .service-images { margin-bottom: 0; } } } .tj-service-section-two { .services-grid-item { &:nth-child(1) { margin-top: -160px; } &:nth-child(2) { margin-top: 60px; } &:nth-child(3) { margin-top: 20px; } &:nth-child(4) { margin-top: -405px; .service-item-two { right: 30px; } } &:nth-child(5) { margin-top: 0px; } } .service_image { max-width: 500px; height: 405px; width: 100%; mask-image: url(../images/shapes/service-shape.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; position: relative; z-index: 1; margin-bottom: 30px; img { width: 100%; height: 100%; object-fit: cover; } } .tj-heading-area { margin-bottom: 60px; .title { margin-bottom: 25px; .tj-reveal-line { overflow: hidden; } } .desc { p { line-height: 1.8; &:last-child { margin-bottom: 0; } } } } @media #{$xl} { .service_image { max-width: 410px; } } @media #{$lg, $md, $sm, $xs} { .top-conrent { align-items: end; } .service_image { height: auto; } .services-grid-item { &:nth-child(1) { margin-top: 0px; } &:nth-child(2) { margin-top: 0px; } &:nth-child(3) { margin-top: 0px; } &:nth-child(4) { margin-top: 0px; .service-item-two { right: 0px; } } &:nth-child(5) { margin-top: 0px; } } } @media #{$sm} { .tj-heading-area { margin-bottom: 50px; } .service_image { height: auto; margin-left: auto; margin-right: auto; margin-bottom: 50px; } } @media #{$xs} { .tj-heading-area { margin-bottom: 40px; text-align: center; } .service_image { height: auto; margin-left: auto; margin-right: auto; margin-bottom: 40px; } } } .tj-service-section-three { background-color: var(--tj-color-theme-bg); padding-top: 120px; padding-bottom: 120px; position: relative; z-index: 2; overflow: hidden; .service-bg-shapes { position: absolute; top: -25%; right: 0; z-index: -1; max-width: 725px; width: 100%; img { width: 100%; } } .tj-heading-area { .title { margin-bottom: 35px; } .desc { max-width: 370px; width: 100%; margin-bottom: 10px; p { line-height: 1.8; &:last-child { margin-bottom: 0; } } } } @media #{$md, $sm, $xs} { padding-top: 80px; padding-bottom: 80px; .tj-heading-area { margin-bottom: 40px; .title { margin-bottom: 15px; } .desc { max-width: 100%; } } } } .service-item { padding-bottom: 30px; position: relative; z-index: 2; display: flex; flex-direction: column; .title { margin-bottom: 40px; } .service-content { text-align: center; border: 1px solid #cacaca; margin-bottom: 25px; padding: 35px 18px 0; position: relative; z-index: 2; .item-shapes { position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: -1; } .service-title { margin-bottom: 25px; font-size: 22px; a {color:#6a280b;font-weight: 600; &:hover { color: #414141; } } } .desc { margin-bottom: 0; line-height: 1.6; } .service-icon { display: inline-flex; align-items: center; justify-content: center; margin-top: 45px; width: 110px; height: 110px; border: 1px solid #cacaca; font-size: 50px; line-height: 1; color: #b99a80; position: relative; top: 1px; i { transition(all 0.5s ease-in-out 0s); } svg, img { transition(all 0.5s ease-in-out 0s); max-width: 45px; width: 100%; display: inline-flex; line-height: 1; } } } .service-images { margin-bottom: 25px; position: relative; overflow: hidden; img { width: 100%; } } .service-images::before { background: rgba(255, 255, 255, 0.2); bottom: 0; content: ""; left: 50%; position: absolute; right: 50%; top: 0; opacity: 1; pointer-events: none; z-index: 1; transition(all 0.3s ease-in-out 0s); } @media #{$lg} { .service-content { padding: 35px 15px 35px; margin-bottom: 0; border-top: none; } .service-images { margin-bottom: 0; } } @media #{$md, $sm, $xs} { .title { margin-bottom: 35px; } .service-content { padding: 35px 15px 35px; margin-bottom: 0; border-top: none; .service-title { margin-bottom: 15px; } .service-icon { margin-top: 30px; width: 90px; height: 90px; font-size: 45px; } } .service-images { margin-bottom: 0; } } @media #{$sm, $xs} { max-width: 306px; width: 100%; margin: 0 auto; } @media #{$xs} { .service-content { .service-title { font-size: 20px; } } } &:hover { .service-images { &::before { left: 0; right: 0; opacity: 0; } } .service-content { .service-icon { i, img, svg { transform: scale(1.2); } } } } } .service-page { .service-item { @media #{$lg, $md, $sm, $xs} { .service-content { border: 1px solid var(--tj-color-border-1); } } } } .service-masonry { .grid-item { display: inline-flex; float: left; } } .service-item-two { text-align: center; max-width: 375px; width: 100%; padding: 35px 20px; position: relative; z-index: 2; border: 2px solid var(--tj-color-border-8); margin-bottom: 30px; &::after, &::before { content: ""; background: radial-gradient( circle, rgba(50, 52, 59, 1) 32%, rgba(110, 99, 93, 1) 99% ); position: absolute; z-index: -1; bottom: -2px; left: 50%; transform: translateX(-50%); height: 2px; width: 75%; transition: transform 0.3s; } &::after { top: -2px; } &:hover { &::after, &::before { transform: translateX(-50%) scaleX(0); } } .service-inner { position: relative; z-index: 2; &::after, &::before { content: ""; background: radial-gradient( circle, rgba(50, 52, 59, 1) 32%, rgba(110, 99, 93, 1) 99% ); position: absolute; z-index: 2; top: 0; left: -22px; height: 250px; width: 2px; transition: transform 0.3s; } &::after { right: -22px; bottom: 0; left: auto; } .item-shapes { position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: -1; opacity: 0.6; } .service-title { margin-bottom: 30px; a { &:hover { color: #b99a80; } } } .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 110px; height: 110px; line-height: 1; font-size: 45px; background: var(--tj-color-theme-secondary); color: var(--tj-color-common-white); border-radius: 50%; margin-bottom: 25px; transition: 0.4s; i { transition: 0.5s; } } .desc { p { line-height: 1.8; &:last-child { margin-bottom: 0; } } } } &:hover { .service-inner { &::after, &::before { transform: scaleX(0); } } .service-icon { background-color: var(--tj-color-theme-primary); i { transform: scale(1.2); } } } @media #{$md, $sm, $xs} { margin: 0 auto 30px; } } .service-accordion { gap: 35px; align-items: end; flex-wrap: wrap; .tabs-content-area { .tabs-item { display: flex; flex-wrap: wrap; align-items: center; max-width: 450px; width: 100%; background-color: transparent; padding: 0; gap: 20px; border-bottom: 1px solid var(--tj-color-border-3); border-radius: 0; padding-bottom: 15px; margin-bottom: 10px; &:last-child { margin-bottom: 0px; padding-bottom: 0px; border-bottom: none; } .service-number { color: var(--tj-color-text-body-4); font-size: 95px; font-weight: var(--tj-fw-medium); font-family: var(--tj-ff-heading); line-height: 1; } .title { font-size: 22px; font-weight: var(--tj-fw-medium); font-family: var(--tj-ff-heading); color: var(--tj-color-common-white); } .service-arrow { color: var(--tj-color-theme-primary); font-size: 30px; line-height: 1; opacity: 0; visibility: hidden; } &.active { .service-number { color: var(--tj-color-theme-primary); } .service-arrow { opacity: 1; visibility: visible; } } } } .tab-content { max-width: 400px; width: 100%; .tabs-wrapper { position: relative; z-index: 1; bottom: 0; width: 100%; img { width: 100%; } .service-text { position: absolute; right: 0; bottom: 25px; background: var(--tj-color-theme-secondary); display: flex; flex-wrap: wrap; align-items: center; max-width: 80%; padding: 35px 15px 35px 70px; .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; line-height: 1; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); font-size: 40px; position: absolute; left: -50px; top: 50%; transform: translateY(-50%); } .desc { width: 100%; margin-bottom: 15px; p { &:last-child { margin-bottom: 0; } } } } .read-more { a { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--tj-color-theme-primary); font-weight: var(--tj-fw-medium); line-height: 1; @include transition(all 0.3s ease-in-out 0s); span { line-height: 1; animation: none; color: var(--tj-color-theme-primary); transition: 0.4s; } &:hover { color: var(--tj-color-theme-primary); span { color: var(--tj-color-theme-primary); padding-left: 5px; } } } } } } @media #{$xl} { .tabs-content-area { .tabs-item { gap: 15px; .service-number { font-size: 62px; } } } .tab-content { .tabs-wrapper { .service-text { .service-icon { width: 90px; height: 90px; left: -40px; } } } } } @media #{$lg} { gap: 30px; .tabs-content-area { .tabs-item { gap: 15px; .service-number { font-size: 45px; } .title { font-size: 18px; } } } .tab-content { max-width: 330px; .tabs-wrapper { .service-text { padding: 25px 15px 25px 50px; .service-icon { width: 70px; height: 70px; left: -35px; } } } } } @media #{$md} { .tabs-content-area { .tabs-item { gap: 15px; .service-number { font-size: 45px; } .title { font-size: 18px; } } } .tab-content { .tabs-wrapper { .service-text { padding: 25px 15px 25px 50px; .service-icon { width: 70px; height: 70px; left: -35px; } } } } } @media #{$sm, $xs} { flex-direction: column; align-items: start; .tabs-content-area { .tabs-item { gap: 15px; .service-number { font-size: 45px; } .title { font-size: 20px; } } } .tab-content { margin-left: auto; margin-right: auto; .tabs-wrapper { img { width: auto; } .service-text { padding: 25px 15px 25px 50px; .service-icon { width: 70px; height: 70px; left: -30px; } } } } } } .tj-service-section { &.service-page { padding-top: 120px; padding-bottom: 80px; .service-item { padding-bottom: 0; margin-bottom: 30px; .service-content { margin-bottom: 0; } } @media #{$md} { padding-top: 100px; padding-bottom: 60px; } @media #{$sm, $xs} { padding-top: 80px; padding-bottom: 40px; } } } .in-box { padding: 30px 30px 30px 30px; background-color: #fff; position: relative; transition: all .5s ease; border-right: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee;} .in-box i { display: block; margin-bottom: 30px; font-size: 42px; color:#414141; position: relative; z-index: 1; } .in-box img { display: block; margin-bottom: 30px; font-size: 42px; color: #414141; position: relative; z-index: 1; } .in-box h4 {font-size: 24px; font-family: "PT Serif", serif; font-weight: 700; color:#333; background: url("../images/heading-border.png") no-repeat left bottom; padding-bottom: 16px;} .in-box p {font-size: 18px; font-weight: 300; line-height: 32px; color: #858585;} .in-box:after { position: absolute; left: 8%; top: 4%; height: 60px; width: 57px; background: url("../images/game-shape.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; content: "";} .in-box:hover::after {transform: rotate(90deg);transition: all .3s ease;} .n-div .in-box:nth-child(3n)( border:none;) .img_flip {position: relative;} .bird2 { position: absolute; left: 23px; z-index: 99; top: -47px;} .sports-inner { padding: 40px 0px;background-image: url(../images/sideeffect-right.jpg),url(../images/sideeffect-left.jpg); background-repeat: no-repeat,no-repeat;background-position: top right,bottom left;} .services { padding-top: 20px; padding-bottom: 30px;background: #ffffff; background: linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(241, 233, 216, 0.34) 50%, rgba(255, 255, 255, 0.09) 100%);} .ser-head h4 {font-size: 18px;color: #ffaa00;padding-top: 30px; text-transform: uppercase;text-align: center; } .ser-head h2 {font-size: 39px;font-family: "PT Serif", serif;font-weight: 700;text-align: center;} .ser-head1 h4 {font-size: 18px;color: #ffaa00;padding-top: 30px; text-transform: uppercase; } .ser-head1 h2 {font-size: 39px;font-family: "PT Serif", serif;font-weight: 700;} .service-head {padding-left: 40px; padding-top: 30px;} .service-head h4 { font-size: 18px;color: #e8a614;padding-top: 13px;text-transform: uppercase;} .service-head h2 {font-size: 39px; font-weight: 700; font-family: 'Eras Bold ITC';} .ratings {background: url("../images/rating.jpg") no-repeat center; padding: 40px 0px; text-align: center; } .ratings i {width: 100px; height: 100px; border-radius: 50%; color: #fff; font-size: 40px; padding-top: 28px;} .ratings h2 { font-size: 53px; color: #fff; font-weight: 700; margin: 10px 0px; } .ratings p {font-size: 22px; text-transform: uppercase; color:#fff;} .view {text-align: center;} .view a {background: #ffaa00; color: #fff; padding: 10px 39px; border-radius: 50px;margin-top: 18px; font-size: 24px; font-family: "PT Serif", serif; display: inline-block;} .login {background:#fff; max-width:1240px; margin: auto; border-radius: 40px;} .w-bg { border-radius:10px;position: relative; padding: 30px 30px 30px 457px; position: relative;} .f-border label {display:block; font-weight: 600; color:#414141; font-size:20px;padding-bottom: 7px; } .f-border{border:1px solid #cacaca; border-radius:10px; padding: 12px; margin-bottom: 10px;} .f-border input[type="text"] {border:none; border-radius:0px; width:100%;} .f-width {max-width:600px; margin: auto;} .f-width a { color:#203975; text-align: right; display: block; padding:12px 0px;} .f-width submit {background: #203975; color:#fff; padding:20px; width:100%;display:block; text-align:center;font-size: 22px;font-weight: 700;font-family: 'Eras Bold ITC'; cursor: pointer;} .w-height {height: 610px;} .f-button { max-width: 608px; margin: auto;} .f-button ul li { float: left; padding: 15px 52px; color: #fff; background: #203975; margin: 2px; width: 300px;text-align: center;font-size:22px; } .f-button ul li:hover {background:#e8a614; cursor: pointer;} .f-button ul li a {color:#fff;} .f-button ul li i { padding-right: 20px; } .f-button ul {padding-left:0px;} .f-border select {border: none;border-radius: 0px;width: 100%;} .container-radio { position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .container-radio input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } /* On mouse-over, add a grey background color */ .container-radio:hover input ~ .checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .container-radio input:checked ~ .checkmark { background-color: #2196F3; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .container-radio input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .container-radio .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; } .player-det { } .player-det h2 {font-size: 28px; font-weight: 700; font-family: 'Eras Bold ITC'; margin-bottom:20px; float:left;} .player-det a{float: right; font-size: 19px; color: #e8a614; padding-top: 5px;} .form-plus i { padding: 11px; background: #e8a614; font-size: 20px; margin-top: 43px;} .form-scroll {height:800px; overflow-y:scroll; padding:20px;} .f-border1 label {display:block; font-weight: 300; color:#666; font-size:16px;padding-bottom: 7px; } .f-border1 {padding: 5px; margin-bottom: 10px;} .f-border1 p{display:block; font-weight: 500; color:#414141; font-size:20px;} .pre-submit {text-align:center; padding:20px;} .pre-submit a { padding: 10px 20px; background: #273e6f; color: #fff; border-radius: 10px;} .wh-text { background: #203975; width: 30%;float: left; text-align: right; padding-right: 20px;position: relative; } .wh-text p { padding: 10px 0px;font-size: 20px; color: #fff; font-weight: 600;padding-right: 55px;} .wh-shape { width: 0;height: 0; border-top: 50px solid #203975;border-right: 50px solid #fff;position: absolute;right: 0px;} .my-marquue { width: 70%;float: left;} .my-marquue ul { margin-bottom:0px;} .my-marquue ul li { display: inline-block;padding-top: 13px;margin-right: 15px;} .my-marquue a { color: #333;} .my-marquue a:hover { color: #00ca3c;} .my-marquue a span { display: inline-block; background: #cc0000; color: #fff; padding: 0px 8px; border-radius: 5px; margin-right: 5px;font-size: 12px;} .news { padding: 30px 0px; padding-top: 60px; background:#f6f6f6;} .news h2 { } .news-left { float: left; width: 120px; } .news-pic { background: #414141; width: 110px; height: 80px; border-radius: 5px; } .news-right {float: right;width: 77%;} .news-right p {font-size: 18px !important; line-height: 26px !important; font-weight: 400;padding-top: 10px;color:#333;} .latest-news { margin:10px; background: #fff;padding: 10px 0px;} .latest-news li { margin: 10px 20px;border-bottom: 1px solid #cacaca;padding: 10px;} .latest-news li:nth-child(3) { border-bottom:0px;} .news-right h3 { color:#333; font-size:24px; font-weight:600; margin-bottom: 0px;} .news-date { font-size:16px; font-weight:400;color:#974b3f; font-style:italic} .newsevents-date { height: 120px;overflow: hidden; width: 100%;border-radius: 20px;} .newsevents-date img {object-fit: cover; width: 100%; height: 100%;} .news-left1 {float: left; width: 170px;} .newsevents-date { font-size:22px; color:#fff;box-shadow: 0px 0px 5px 3px #41414120; } .n-year { font-size: 18px;color: #fff;background: #224db5;padding: 8px 0px;} .upcoming-news { padding-top: 0px;} .upcoming-news li { padding: 15px;background:rgba(255,255,255,0.3); margin-bottom: 20px;} .upcoming-news li:nth-child(2) { margin-bottom:0px;} .r-more {background: #006a1f;height: 30px;display: inline-block;color: #00ca3c;vertical-align: middle;text-align: center;padding: 2px 10px; margin-top: 15px;} .r-more:hover {} #myTabContent { background: rgba(255,255,255,0.3); height:319px;} .nav-tabs .nav-link.active { background-color: rgba(255,255,255,0.3); border:none; border-radius:0px;color:#fff;} .nav-tabs { border-bottom:0px;} .nav-tabs .nav-link {color:#fff;font-weight:700;} .nav-tabs .nav-link:hover { border:none;background:rgba(255,255,255,0.3) ; } .tab-pane p a {color:#fff; font-weight:600; padding:7px 20px;display: inline-block;} .holder { overflow:hidden; padding:10px; font-family:Helvetica; } .holder .mask { position: relative; left: 0px; top: 10px; width:568px; height:285px; overflow: hidden; } .holder ul { list-style:none; margin:0; padding:0; position: relative; } .holder ul li { padding:10px; margin-bottom: 10px; } .holder ul li a { color:darkred; text-decoration:none; } #gallery{ position:relative; width:100%; height:100%; min-height:100%; display:table; transition: all ease 1s; overflow-x: hidden; } #gallery .item{ width:20%; display:block; float: left; transition: all ease 400ms; position: relative; } #gallery .item:hover, #gallery .item:focus{ transform:scale(1); z-index:50; box-shadow:0 0 10px black;} #gallery .item figure{ transition: all ease 1s; overflow:hidden; height:210px; padding:0; margin:5px; position: relative; } #gallery .item figure img{ transform: scale(1.4); transition: all ease 1s;object-fit: cover; height: 100%; width: 100%; } #gallery .item:hover figure, #gallery .item:focus figure{ transition: all ease 400ms; } #gallery .item:hover figure img, #gallery .item:focus figure img{ transform:scale(1.4); transition: all ease 1s; } #gallery.hover{ transition: all ease 1s; /* opacity:.7; */ } #gallery.hover .item{ opacity:.9; filter: blur(1px); } #gallery.hover .item:hover, #gallery.hover .item:focus{ opacity:1; filter: blur(0); } #gallery .item figcaption{ position:absolute; font-size:18px; color:#fff; width:100%; height:100%; padding:10%; display:flex; justify-content:center; align-items:center; text-align:center; top:0; left:0; transform:scale(1.3); filter: blur(4px); opacity:0; transition:500ms; background-color: rgba(0,154,178,.6); text-transform:uppercase; font-weight:bold; } #gallery .item:hover figcaption, #gallery .item:focus figcaption{ transform:scale(1); filter: blur(0); opacity:1; transition:300ms;} @media (max-width:1368px){ #gallery .item{width:25%;} } @media (max-width:1080px){ #gallery .item{width:33.3%;} } @media (max-width:800px){ #gallery .item{width:50%;} #gallery .item figure{ height:250px; } #gallery .item figure img{ transform:rotate(0) scale(1); transition: all ease 1s; width:auto; min-width:100%; height:100%; min-height:250px; } #gallery .item:hover figure img{ transform:rotate(0) scale(1); } } @media (max-width:500px){ #gallery .item{width:100%;} #gallery .item figure{ height:250px; } } .main-footer { position: relative; background: #222222; color: #999999;top: -10px; } .main-footer .widgets-section { position: relative; padding: 50px 0px 20px; } .main-footer .footer-widget { position: relative; margin-bottom: 40px; } .main-footer .widget-title { position: relative; margin-bottom: 20px; } .main-footer .widget-content { position: relative; } .widget-content ul {padding-left:0px;} .main-footer .widget-title h4 { position: relative; color: #ffffff; text-transform: capitalize; font-weight: 700; margin: 0 0; } .main-footer .about-widget .logo { position: relative; display: block; margin-bottom: 20px; } .main-footer .about-widget h5 { font-weight: 700; color: #ffffff; margin-bottom: 5px; } .main-footer .about-widget .address { position: relative; margin-bottom: 20px; } .main-footer .links-widget { position: relative; } .main-footer .links-widget .column { position: relative; margin-bottom: 30px; } .main-footer .links-widget .links li { position: relative; margin-bottom: 8px; line-height: 24px; font-size: 15px; } .main-footer .links-widget .links li:last-child { margin-bottom: 0; } .main-footer .links-widget .links li a { position: relative; display: block; color: #999999; line-height: 24px; font-size: 15px; text-transform: none; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .main-footer .links-widget .links li a:before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -1px; width: 0px; border-bottom: 2px solid #0082ff; opacity: 0; transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } .main-footer .links-widget .links li:hover a:before { opacity: 1; width: 15px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .main-footer .links-widget .links li a:hover { color: #ffffff; padding-left: 20px; } .main-footer .num-links li { position: relative; margin-bottom: 7px; line-height: 24px; font-size: 15px; } .main-footer .num-links li:last-child { margin-bottom: 0; } .main-footer .num-links li a { position: relative; display: block; color: #999999; line-height: 24px; font-size: 15px; text-transform: capitalize; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .main-footer .num-links li .hvr-info { position: relative; display: inline-block; vertical-align: middle; padding-left: 20px; opacity: 0; visibility: hidden; transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } .main-footer .num-links li a:hover .hvr-info { opacity: 1; visibility: visible; margin-left: 5px; } .main-footer .num-links li a .hvr-info:before { content: "\f1be"; font-family: "Flaticon"; position: absolute; left: 0; top: 0; color: #0082ff; } .main-footer .num-links li:hover a:before { opacity: 1; width: 15px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .main-footer .num-links li a:hover { color: #ffffff; } .main-footer .footer-bottom { position: relative; line-height: 24px; } .main-footer .footer-bottom .inner { position: relative; display: block; text-align: center; padding: 40px 0px; border-top: 1px solid #e2eef2; } .main-footer .footer-bottom .inner { position: relative; padding: 30px 0px; border-top: 1px solid rgba(255, 255, 255, 0.10); } .main-footer .footer-bottom .copyright { position: relative; } .main-footer .footer-bottom .copyright strong { color: #222222; } .main-footer .footer-bottom .copyright a { text-transform: capitalize; color: #0082ff; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .main-footer .footer-bottom .copyright a:hover { text-decoration: underline; } .main-footer .social-links { position: relative; padding-top: 20px; text-align: center; } .main-footer .social-links ul { position: relative; } .main-footer .social-links li { position: relative; display: inline-block; vertical-align: top; margin: 0px 7px; line-height: 24px; } .main-footer .social-links li a { color: #999999; font-size: 14px; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .main-footer .social-links li a:hover { color: #0082ff; } .vip {padding:60px 0px; background: url("../images/vip-bg.jpg") no-repeat center;height: 550px;} .vip img {width:120px;} .vip-inner {background: url("../images/cm-bg.png") no-repeat center; text-align: center; padding: 70px 0px; border-radius: 20px;} .vip-inner h3 { font-size:30px;font-family: "PT Serif", serif;font-weight: 700; color:#ffaa00; margin-top: 30px;} .vip-inner p {font-size:20px; color:#fff;} .vip-minister { margin-left:30px;} .vip-minister h4 {font-size: 18px;color: #ffaa00; padding-top: 30px; text-transform: uppercase;} .vip-minister h2 {font-size: 39px;font-family: "PT Serif", serif;font-weight: 700; color:#fff; margin-bottom: 20px;} .vip-inner img {width: 280px;border: 4px solid #ffaa00;border-radius: 50%;} .heading-vip {} .heading-vip h2 { color:#fff; font-size: 26px; margin-top: 10px;} .heading-vip p { color:#dadada;} .arrow-list li { padding: 15px; margin-bottom: 12px !important;border-radius:15px;} .arrow-list { padding-left: 0px;} .widged-box { height: 500px; overflow: hidden; box-sizing: border-box; } .widged-box1 { height: 314px; overflow: hidden; box-sizing: border-box; } .minister { margin-left: 30px; position: relative;} .my-arrows { position: absolute; top: -70px; right: 0px;} .bird {position:absolute;left:-53px;bottom:0px;width: 304px;} .reg-details { padding-top: 45px; top: 0px;left:13%; z-index: 99; max-width: 1400px; margin: auto; width: 100%; position: absolute;} .reg-details img { width: 400px;} .icon-circle-blue { width: 300px; height: 300px; background-image: url(../images/circle-blue.png); } .anim-icons .icon { position: absolute; background-position: center; background-repeat: no-repeat; } .icon-circle-blue { right: -150px; top: 60%; opacity: .7; -webkit-animation: fa-spin 30s infinite; -moz-animation: fa-spin 30s infinite; -ms-animation: fa-spin 30s infinite; -o-animation: fa-spin 30s infinite; animation: fa-spin 30s infinite; } #countdown { background: #0e4092; max-width: 830px; margin: auto; text-align: center; } #countdown ul li { display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase;text-align: center;color: #fff;font-weight: 700; } #countdown ul li span { display: block; font-size: 45px; color: #fff; } .l-inner {position: absolute; left: 6px; top: 22px;width:500px;} .form-align{max-width: 1400px; margin: auto;} .form-scroll { height: 800px; overflow-y: scroll; padding: 20px; max-width: 1022px; } .header-innerbanner {background:url(../images/inner-banner.jpg) no-repeat bottom; padding:80px 0px; } .header-innerbanner h2 {color:#fff; text-align:center; font-weight:600; font-size:46px;} .header-innerbanner p {color:#fff; text-align:center;} .header-innerbanner a {color:#fff;} .bread {color:#e8a614 !important;} .inner-conten{ padding:50px 0px;} .inner-conten h2 { margin-bottom: 22px;} .inner-conten ul { padding-left: 0px;} .inner-conten ul li { margin-bottom: 12px; color: #868686; font-size: 18px; padding-left: 30px; background: url(../images/checked.png) no-repeat left; background-size: 20px; } /* @-webkit-keyframes zoom { from { -webkit-transform: scale(1, 1); } to { -webkit-transform: scale(1.1, 1.1); } } @keyframes zoom { from { transform: scale(1, 1); } to { transform: scale(1.1, 1.1); } } .carousel-inner .carousel-item > img { -webkit-animation: zoom 5s; animation: zoom 5s; }*/ .about-inner {padding:120px 0px;background-image: url(../images/sideeffect-right.jpg),url(../images/sideeffect-left.jpg); background-repeat: no-repeat,no-repeat; background-position: top right,bottom left;} .s-new {padding:40px 0px;} .about-inner ul { padding-left:0px;padding-top: 20px;} .about-inner ul li {margin-bottom: 12px; color: #868686; font-size: 18px; padding-left: 30px; background: url(../images/checked.png) no-repeat left top; background-size: 20px;} .c-box { background: #2a417e; padding:40px 60px; margin-top: 40px;} .c-box h2 { font-size: 24px; color:#fff;font-family: "PT Serif", serif;} .c-box p { font-size: 18px;font-weight: 300; padding-bottom: 15px;min-height: 153px; margin-top: 30px;color:#b0b0b0;} .c-box h1 { font-size: 28px; font-weight:700;color:#ffaa10;} .c-box a { color: #ffaa10; border: 2px solid #ffaa10; padding: 12px 30px; margin-top: 20px; display: inline-block; border-radius: 39px; font-size: 18px;} .c-box a:hover {color:#fff;border: 2px solid #fff;} .c-form { max-width: 740px; margin: auto; margin-top: 40px; } .c-form input[type="text"] {width: 100%; font-size: 14px; color: #737687; padding: 1em; margin-bottom: 10px;border-radius: 8px;} .c-form input[type="email"] {width: 100%; font-size: 14px; color: #737687; padding: 1em; margin-bottom: 10px;border-radius: 8px;} .c-form input[type="tel"] {width: 100%; font-size: 14px; color: #737687; padding: 1em; margin-bottom: 10px;border-radius: 8px;} .f-submit { padding: 15px 34px; background: #0082ff; color:#fff; border: none; border-radius: 34px; font-size: 20px; margin-top: 20px;} .bg { background: url(../images/login-bg.jpg) no-repeat center; height:100vh;padding-top: 110px; box-sizing: border-box;} .iactive {background: url(../images/checked1.png) #e8a614 no-repeat !important; background-size: 21px !important; background-position: 268px 10px !important; } .link-btn1 {margin-top:8px;} .link-btn1 a i {color: #fff; background: #c2c2c23b; padding: 12px 15px 10px 15px; border-radius: 50%; font-size: 24px; border: 1px solid;display:inline-block; } .resnav-img { text-align: right; display: inline-block;} .responsive-header {position: absolute; top: 0px; padding: 10px 0px;width: 100%; z-index: 999;} #mySidenav .dropdown { text-align: left;} .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; right: 0; background-color: #303030 !important; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } .closebtn i { font-size: 27px; width: 50px; height: 50px; background: #b3b3b32e; text-align: center; padding-top: 11px; border-radius: 50%;} /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 18px; color: #fff; display: block; transition: 0.3s; text-align: left; font-weight: 400; } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus{ color: #caa05c; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; border: none; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main {transition: margin-left .5s;padding: 20px;} .side-nav-login { color: #fff; font-size: 30px; float:right; width: 20%; text-align: right;padding-top: 28px;} .side-nav-login:hover { color: #fd750f;} .side-nav-logo {width: 60%; float:left; text-align: center;} .side-nav-logo img {} .nav-bar { } .nav-bar a { display: inline-block; width: 20%; float: left;padding-top: 37px;} .nav-bar a i {color: #fff;} .nav-bar i { display: inline-block;font-size: 30px;} .nav-bar a:hover i {color: #fd750f;} .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } @-webkit-keyframes bounce { 0%,100%,20%,50%,80% { -webkit-transform: translateY(0); transform: translateY(0) } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px) } } @keyframes bounce { 0%,100%,20%,50%,80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce } @-webkit-keyframes flash { 0%,100%,50% { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { 0%,100%,50% { opacity: 1 } 25%,75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0%,100% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1.1); transform: scale(1.1) } } @keyframes pulse { 0%,100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes shake { 0%,100% { -webkit-transform: translateX(0); transform: translateX(0) } 10%,30%,50%,70%,90% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 20%,40%,60%,80% { -webkit-transform: translateX(10px); transform: translateX(10px) } } @keyframes shake { 0%,100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 10%,30%,50%,70%,90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px) } 20%,40%,60%,80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0); transform: rotate(0) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1) } 10%,20% { -webkit-transform: scale(.9) rotate(-3deg); transform: scale(.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0) } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 10%,20% { -webkit-transform: scale(.9) rotate(-3deg); -ms-transform: scale(.9) rotate(-3deg); transform: scale(.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0%,100% { -webkit-transform: translateX(0); transform: translateX(0) } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg) } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg) } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg) } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg) } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg) } } @keyframes wobble { 0%,100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg) } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg) } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg) } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg) } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg) } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3) } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05) } 70% { -webkit-transform: scale(.9); transform: scale(.9) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3) } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05) } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px) } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px) } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px) } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px); transform: translateX(10px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px) } 80% { -webkit-transform: translateY(10px); transform: translateY(10px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px) } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px) } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1) } 25% { -webkit-transform: scale(.95); transform: scale(.95) } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3) } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95) } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .fadeInUp { -webkit-animation-name:fadeInUp; animation-name:fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px) } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px) } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px) } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) } 100% { -webkit-transform: perspective(400px) rotateX(0); transform: perspective(400px) rotateX(0); opacity: 1 } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) } 100% { -webkit-transform: perspective(400px) rotateX(0); -ms-transform: perspective(400px) rotateX(0); transform: perspective(400px) rotateX(0); opacity: 1 } } .flipInX { -webkit-backface-visibility: visible!important; -ms-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInX; animation-name: flipInX } .flipInY,.flipOutX { -webkit-backface-visibility: visible!important; -ms-backface-visibility: visible!important } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg) } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg) } 100% { -webkit-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); opacity: 1 } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg) } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg) } 100% { -webkit-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); opacity: 1 } } .flipInY { backface-visibility: visible!important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0); transform: perspective(400px) rotateX(0); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0); -ms-transform: perspective(400px) rotateX(0); transform: perspective(400px) rotateX(0); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; backface-visibility: visible!important } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible!important; -ms-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1 } 80% { -webkit-transform: translateX(0) skewX(-15deg); transform: translateX(0) skewX(-15deg); opacity: 1 } 100% { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); opacity: 1 } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1 } 80% { -webkit-transform: translateX(0) skewX(-15deg); -ms-transform: translateX(0) skewX(-15deg); transform: translateX(0) skewX(-15deg); opacity: 1 } 100% { -webkit-transform: translateX(0) skewX(0); -ms-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); opacity: 1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); opacity: 1 } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0) skewX(0); -ms-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); opacity: 1 } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { from { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } @keyframes zoomOut { from { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.32,1); animation-timing-function: cubic-bezier(0.175,0.885,0.32,1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } /* ---- Section wrapper ---- */ .projects-section{ padding:30px 20px; position:relative; padding-top: 60px; } /* ---- Scroll row ---- */ .projects-scroll{ display:flex; gap:34px; overflow-x:auto; /* enable horizontal scroll */ scroll-behavior:smooth; padding:18px 60px; /* left/right inset like screenshot */ align-items:flex-start; -webkit-overflow-scrolling:touch; /* smoother on iOS */ } /* hide native scrollbar but keep scrolling */ .projects-scroll::-webkit-scrollbar{height:0;display:none} .projects-scroll{ scrollbar-width:none; -ms-overflow-style:none; } /* ---- Card ---- */ .project-card{ flex:0 0 23%; /* approximately 4 cards per viewport */ min-width:315px; /* ensure cards don't shrink too small on narrow screens */ max-width:330px; cursor:pointer; } .project-img{ position:relative; overflow:hidden; height: 390px; /* fixed visual height like screenshot */ background:#eee; } .project-img img{ width:100%; height:100%; object-fit:cover; display:block; } .tag{ position:absolute; top:18px; left:16px; background: rgba(255,244,208,0.95); color:#111; padding:8px 14px; border-radius:18px; font-weight:600; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,0.08); z-index: 999; } .project-card h3{ margin:18px 6px 8px; font-size:23px; color:#0b0b0b; line-height:1.1;font-family: 'CenturyGothicPaneuropeanBold'; } .project-meta{ margin:0 6px 6px !important; color:#6a280b !important; font-size:15px !important; line-height:1.4 !important; } .project-meta li { float: left; width: 25%; margin-bottom: 23px; padding: 10px; box-sizing: border-box;} .project-details-content h2 {font-family: 'CenturyGothicPaneuropeanSemiBold'; margin-top: 20px;} /* ---- Arrows ---- */ .arrow { position: absolute; top:50%; transform:translateY(-50%); z-index:10; width:48px; height:48px; border-radius:50%; background: #fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(2,6,23,0.12); cursor:pointer; user-select:none; } .arrow.left{ left:12px; } .arrow.right{ right:12px; } .arrow svg{ width:18px;height:18px; color:#222; } /* small screens: 2 cards per view */ @media (max-width:900px){ .project-card{ flex:0 0 45%; min-width:280px; } .project-img{ height:360px; } } @media (max-width:520px){ .project-card{ flex:0 0 80%; min-width:260px; } .project-img{ height:300px; } .projects-scroll{ padding:18px 20px; gap:18px; } .arrow{ display:none } /* hide arrows on tiny screens (touch) */ } /* Hover animation */ .proj-card{ transition:transform .35s ease; } .proj-card:hover{ transform:translateY(-10px); } /* Image zoom on hover */ .proj-card .img img{ transition:transform .45s ease; } .proj-card:hover .img img{ transform:scale(1.05); } /* .projects-scroll .project-card:nth-child(2n) {margin-top:30px;}*/ .slider-container{ position:relative; height:450px; display:flex; overflow:hidden; } .bg-slide{ position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; z-index:-1; transition:opacity .5s ease, background-image .8s ease; } /* 🔥 Black opacity overlay on top of the background */ .bg-slide::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); /* Adjust opacity (0.3–0.7 recommended) */ } .slide{ flex:1; padding:30px; color:#fff; cursor:pointer; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; opacity:0.6; transition:0.4s; border-right: 1px solid #fff; } .slide h2 { font-weight: 700; font-size: 66px; position: absolute; top: 30px; right: 30px; } .slide.active{ opacity:1; } .slide:hover{ opacity:1; } /* arrows */ .arrows{ position:absolute; bottom:30px; right:50px; display:flex; gap:15px; z-index:3; } .arrows span{ font-size:40px; cursor:pointer; color:#fff; } /* dots */ .dots{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:3; } .dots span{ width:12px;height:12px; border-radius:50%; background:#ffffff50; cursor:pointer; } .dots span.active{ background:#fff; } /* .slide p{ opacity:0; visibility:hidden; transform:translateY(20px); transition:0.4s ease; } .slide:hover p{ opacity:1; visibility:visible; transform:translateY(0px); } */ .slide h3 {font-family: 'CenturyGothicPaneuropeanBold';font-size: 26px;} .slide p{ transition: opacity 1s ease-out; opacity: 0; height: 0; overflow: hidden; } .slide:hover p{ opacity: 1; height: auto; } .blog-section{ padding:60px 0; } .blog-grid{ display:grid; grid-template-columns: 50% 48%; gap:3%; } .blog-left .big-img{ position: relative; height: 334px; overflow: hidden; } .big-img img{ width:100%; height:auto; object-fit:cover; } .cat-tag{ position:absolute; top:15px; left:15px; background:#c68e2c; color:#fff; font-size:14px; padding:6px 14px; border-radius:20px; font-weight:600; } .blog-meta{ margin-top:15px; color:#555; } .blog-title{ font-size:30px; margin:10px 0; font-weight:700; } .blog-desc{ font-size:18px; color:#666; max-width:90%; } /* Right Small Cards */ .small-post{ display:flex; align-items:flex-start; margin-bottom:30px; } .small-img{ min-width:180px; max-width:180px; height:150px; position:relative; overflow: hidden; } .small-img img{ width:100%; height:100%; object-fit:cover; } .small-content{ margin-left:18px; max-width:70%; } .small-meta{ margin-bottom:5px; color:#777; font-size:14px; } .small-title{ margin:0 0 6px 0; font-size:22px; font-weight:700; } .small-content p{ font-size:15px; color:#555; overflow:hidden; text-overflow:ellipsis; } @media(max-width:992px){ .blog-grid{ grid-template-columns:1fr; } .small-post{ max-width:450px; } } /* Brightness-zoom Container */ .img-hover-zoom--brightness img { transition: transform 2s, filter 1.5s ease-in-out; transform-origin: center center; filter: brightness(75%); } /* The Transformation */ .img-hover-zoom--brightness:hover img { filter: brightness(100%); transform: scale(1.3); } .about_lineimg { background: url(../images/line.png) no-repeat top left;padding-left: 78px;padding-top: 55px;background-size: 277px;background-position: 22px -3px;} .con-line { background: url(../images/line.png) no-repeat top left;padding-left: 78px;padding-top: 55px;background-size: 277px;background-position: 22px -3px;margin-left: -70px;} .about_lineimg { padding-left: 78px;} .footer { font-weight: 400;border-top:1px solid #cacaca;;} .footer-links { text-align:right; } .footer-links a {color:#414141; display:inline-block; margin-left:10px;} .footer-in { padding:15px 0px; } .web_count {} .web_count li {width:25%; padding:15px; box-sizing:border:box; float:left; text-align:center;} .web_count h2 { font-size: 34px; font-family: 'CenturyGothicPaneuropeanBlack';color: #414141; margin-bottom: 20px;} .web_count p { font-size: 20px; font-weight: 500; line-height: 32px; color: #6a280b; margin-bottom: 20px;font-family: "Cinzel", serif; margin-bottom: 0px;} .service-images {height:350px; overflow:hidden;} .service-images img {width:100%; height:100%; object-fit:cover;} .fulview {padding:40px 0px;} /*.testimonial { padding:50px 0px;}*/ .tes { background: rgb(237 237 237);width: 100%;padding: 0px;/* border: 1px solid #cecece; */min-height: 230px;} .tes img { margin-top: -80px;} .tes p { font-size:16px; font-weight:300; color:#414141; text-align: center; padding: 20px; min-height:160px; } .tes i { font-size: 22px;text-align: left !important;display: inline-block;float: left;padding-left: 24px;padding-top: 30px;} .arr {width: 0;height: 0;border-style: solid;border-width: 0 15px 15px 0;border-color: transparent #ffffff transparent transparent;position: relative;top: 15px;left: -15px;} .test-text p { font-size:22px; font-weight:400; color:#414141; margin-bottom:30px;} .test-text h2 { font-size:40px; font-weight:500; color:#414141; text-transform: uppercase; padding-bottom: 15px; margin-bottom: 20px;} .testimonial h5 {font-size:20px; font-weight:500; color:#6a280b; margin-top:14px;} #owl-demo .item {margin:10px; float:left; text-align: center; width: 98%;} .owl-carousel img { max-width:100%; height:auto;} .sec_heading {padding-bottom: 70px; text-align: center;} .sec_heading h4 {font-size: 18px;color:#6a280b; text-transform: uppercase;font-weight: 700;} .sec_heading h2 {font-size: 35px;margin-bottom: 20px;color: #414141;font-family: "Cinzel", serif;} /*28-12-2025*//*28-12-2025*//*28-12-2025*//*28-12-2025*/ /*28-12-2025*//*28-12-2025*//*28-12-2025*//*28-12-2025*/ /*.quin { background:#e0d4be; }*/ .slide_heading { } .slide_heading h4 { font-size: 16px; color: #6a280b; text-transform: uppercase;font-weight: 700; } .slide_heading h2 { font-size: 28px; font-family: "Cinzel", serif; margin-bottom: 20px; color: #414141;} .ourteam {padding:40px 0px;} .ourteam h4 { font-size: 18px; color: #6a280b; text-transform: uppercase; font-weight: 700; text-align: center; } .ourteam h2 { font-size: 30px; font-weight: 700; margin-bottom: 40px; color: #414141;text-align: center;font-family: 'CenturyGothicPaneuropeanBold';} .ourteam_heading p { padding-top: 10px; font-size: 16px; font-weight: 300; line-height: 32px; color: #414141; margin-bottom: 20px; } .project_heading h4 { font-size: 16px; color: #6a280b;font-weight: 700; text-transform: uppercase; } .project_heading h2 { font-size: 30px; font-weight: 700; color: #414141;font-family: "Cinzel", serif;} .test-text h4 { font-size: 16px; color: #6a280b;text-transform: uppercase;font-weight: 700; } .test-text h2 { font-size: 30px; font-weight: 700; color: #414141;font-family: "Cinzel", serif;} .test-text1 h4 { font-size: 16px; color: #6a280b; } .test-text1 h2 { font-size: 30px; font-weight: 700; color: #414141;} .ab-image1 img { object-fit: cover; height: 100vh; padding-top: 15px;} .co-image img { object-fit: cover; padding-top: 15px;} .mgg input { color: #fff; border: none; padding: 10px 39px; border-radius: 50px; font-size: 18px; display: inline-block;background: #6a280b} .contact_lineimg { padding-left: 40px } .contact_lineimg label { color: #414141; } .contact { margin-top:20px; } .contact p { font-size: 16px; font-weight: 300; line-height: 32px; color: #414141; margin-bottom: 20px; } .addr { border: 1px solid #3f6b92; padding: 26px; background: #3f6b92; color: #fff; border-radius: 5px;} .addr p { margin-bottom: 0px; color: #fff} .addr i { font-size: 30px;} .addr h3 { border-bottom: 2px solid; width: 102px; margin-top: 15px; font-size: 20px; letter-spacing: 2px; font-weight: 600; } .mail { border: 1px solid #4cc7d6; padding: 26px; background: #4cc7d6; color: #fff; border-radius: 5px; padding-bottom: 58px;} .mail i { font-size: 30px; } .mail p { font-size: 16px; letter-spacing: 0.5px; color: #fff; margin-bottom:0px; } .mail h3 { border-bottom: 2px solid; width: 149px; margin-top: 15px; font-size: 20px; letter-spacing: 1px; font-weight: 600; } .cont { border: 1px solid #dc4549; padding: 26px; background: #dc4549; color: #fff; border-radius: 5px; padding-bottom: 58px;} .cont i { font-size: 30px; } .cont h3 { border-bottom: 2px solid; width: 149px; margin-top: 15px; font-size: 20px; letter-spacing: 1px; font-weight: 600; } .cont p { font-size: 16px; letter-spacing: 0.5px; color: #fff; margin-bottom:0px; } .loac { margin-top: 69px; margin-bottom: 21px; } .ba {padding-bottom: 20px} .ba h2 { font-weight: 600;color:#6a280b; } .testimonial {padding:60px 0px;background: linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(241, 233, 216, 0.34) 50%, rgba(255, 255, 255, 0.09) 100%);padding-top:30px} .ab-image {width:100%; height: 510px; overflow: hidden; position: relative;} @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .contact-head { padding:60px 0px;} .contact-head h4 {font-size: 16px;color: #6a280b;text-transform: uppercase;} .contact-head h2 {font-size: 26px;font-weight: 500;margin-bottom: 20px;color: #414141;font-family: "Cinzel", serif;} .con_details { } .support {padding-left: 40px;} .con_details a {display:block; color:#6a280b; font-size:18px; font-weight:600;font-family: 'CenturyGothicPaneuropeanSemiBold'; } .con_details p {font-size:18px;font-family: 'CenturyGothicPaneuropeanSemiBold'; color:#6a280b;} /*.con-phone { color:#6a280b !important}*/ /*.con-mail { color:#414141 !important;}*/ .con-in { height: 50px;border-radius: 5px; border:1px solid #dfdfdf; margin-bottom:10px; margin-top:4px;} .con-num {float: left;width: 50%; padding-left:15px }