:root { --main-color: #0196a7; --main-color2: #0196a752; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: fit-content; } a{ color: #000; text-decoration: none; } body { position: relative; font-weight: 400; background: #fff; color: #43484E; } ul { padding: 0; } html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } textarea:focus, input:focus { outline: none; outline-offset: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 700; text-rendering: optimizelegibility; } .btn-primary:focus, .btn-primary:active { outline: none; } .layout_padding2 { padding: 45px 0; } .layout_padding-top { padding-top: 90px; } .hero_area { height: 100vh; position: relative; overflow: hidden; background: #f6f6f652; } .hero_area::before { content: ''; background-color: var(--main-color); border-radius: 100%; position: absolute; left: -250px; top: 30%; width: 350px; height: 353px; z-index: -1; } .hero_area::after { content: ""; position: absolute; top: 0; right: -45%; width: 65%; height: 100%; background: var(--main-color); transform: skewX(40deg); } a, a:hover, a:focus { text-decoration: none; } a:hover, a:focus { color: initial; } .btn, .btn:focus { outline: none !important; -webkit-box-shadow: none; box-shadow: none; } .lg_toggl-btn { background-color: transparent; border: none; outline: none; width: 56px; height: 40px; cursor: pointer; } .lg_toggl-btn:focus { outline: none; } .login_btn-container { padding-top: 30px; } .login_btn-container a { color: var(--main-color); text-transform: uppercase; } .slider_section { height: calc(90% - 70px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slider_section .container { position: relative; z-index: 2; } .slider_section .row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slider_section .detail-box h1 { color: var(--main-color); text-transform: uppercase; padding: 5px; } .slider_section .detail-box h1 span { font-size: 5rem; color: #252525; padding: 10px 0 0 0; display: inline-block; } .slider_section .detail-box p { margin-top: 15px; font-size: larger; color: #737373; } .detail-box .btn-box { margin-top: 45px; } .detail-box .btn-box a { text-transform: uppercase; text-align: center; width: 135px; font-size: 15px; } .detail-box .btn-box .btn-1 { display: inline-block; padding: 10px 5px; background-color: var(--main-color); color: #ffffff; -webkit-transition: all 0.3s; transition: all 0.3s; border: 1px solid transparent; border-radius: 20px; margin-right: 5px; } .detail-box .btn-box .btn-1:hover { background-color: transparent; border-color: var(--main-color); color: var(--main-color); } .detail-box .btn-box .btn-2 { display: inline-block; padding: 10px 5px; background-color: #252525; color: #ffffff; -webkit-transition: all 0.3s; transition: all 0.3s; border: 1px solid transparent; border-radius: 20px; } .detail-box .btn-box .btn-2:hover { background-color: transparent; border-color: #252525; color: #252525; } .slider_section .img-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; z-index: 20; } .slider_section .img-container .img-box { width: 250px; } .slider_section .img-container .img-box img { width: 100%; z-index: 50; } .slider_section .play_btn { background-color: var(--main-color); display: flex; align-items: center; justify-content: center; border-radius: 100%; width: 75px; height: 75px; position: absolute; z-index: 20; top: 56%; right: 35%; transition: 0.3s; } .slider_section .play_btn a { background-color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100%; width: 75px; height: 75px; position: relative; z-index: 5; } .slider_section .play_btn i { font-size: 30px; margin-left: 4px; } .slider_section .play_btn::before { content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; background-color: var(--main-color); opacity: 1; border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .slider_section .play_btn::before { z-index: 1; -webkit-animation: before-animation 1500ms infinite; animation: before-animation 1500ms infinite; } @keyframes before-animation { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 1; } } .slider_section .carousel-indicators { margin: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; bottom: -150px; } .slider_section .carousel-indicators li { width: 15px; height: 15px; border-radius: 100%; background-color: var(--main-color); opacity: 1; border: none; background-clip: unset; } .slider_section .carousel-indicators li.active { background-color: #252525; } .slider_section ol.carousel-indicators.indicator-2 { position: unset; } .slider_section ol.carousel-indicators.indicator-2 li { width: 25px; height: 25px; text-indent: 0px; text-align: center; line-height: 25px; color: #ffffff; margin: 0; background-color: transparent; opacity: 1; border: none; display: none; } .slider_section ol.carousel-indicators.indicator-2 li.active { display: block; } .custom_menu-btn button { margin-top: 12px; outline: none; border: none; background-color: transparent; } .custom_menu-btn button span { display: block; width: 34px; height: 3.5px; background-color: #fff; margin: 8.5px 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .custom_menu-btn .s-2 { -webkit-transition: all 0.1s; transition: all 0.1s; width: 17px; margin-left: auto; } .menu_btn-style button .s-1 { -webkit-transform: rotate(45deg) translate(7px, 10px); transform: rotate(45deg) translate(7px, 10px); } .menu_btn-style button .s-2 { -webkit-transform: translateX(100px); transform: translateX(100px); } .menu_btn-style button .s-3 { -webkit-transform: rotate(-45deg) translate(7px, -10px); transform: rotate(-45deg) translate(7px, -10px); } .carousel-inner .detail-box h1 { text-transform: initial; } ::selection { background-color: var(--main-color); color: #fff; } .slider_section .play_btn { right: 40%; } .about { background: #f1f1f1; text-align: center; } .title_line { margin-top: 100px; color: #060606; font-size: xx-large; position: relative; margin-bottom: 60px; } .title2 { color: var(--main-color); } .title_line::after, .title_line::before { content: ''; bottom: -12px; right: calc(50% - 35px); position: absolute; background: var(--main-color); width: 70px; height: 2px; } .title_line::before { bottom: -20px; right: calc(50% - 20px); width: 40px; } .page-section__paragraph { font-size: 15px; color: #5d5d5d; max-width: 540px; text-align: center; margin-right: auto; margin-left: auto; margin-bottom: 60px; } .gutters-80.row { margin-right: -40px; margin-left: -40px; text-align: left; } .gutters-80>[class^="col-"], .gutters-80>[class^="col-"] { padding-right: 40px; padding-left: 40px; } .row--margin-top { margin-top: 40px; } .page-section__title-style { display: block; margin-right: auto; margin-left: auto; margin-bottom: 30px; } .page-section__paragraph { font-size: 15px; color: #5d5d5d; max-width: 540px; text-align: center; margin-right: auto; margin-left: auto; margin-bottom: 60px; } .page-section__paragraph--white { color: #fff; line-height: 1.8; } .about__container--narrow { max-width: 1245px; margin-right: auto; margin-left: auto; } .about__content { padding-top: 70px; } .about__description { font-size: 16px; color: #636262; padding-bottom: 25px; border-bottom: 1px #C1C1C1 dashed; display: block; } .about__image img { width: 300px; } .about__image { position: relative; z-index: 100; width: fit-content; height: fit-content; } .about__image::after { content: ''; position: absolute; top: 5%; left: 5%; width: 100%; height: 100%; border: solid var(--main-color) 5px; z-index: -10; } .about__bio { font-size: 15px; color: #636262; } .about__bio strong { font-size: 15px; color: #2c4055; } .about .detail-box .btn-box { margin: 40px 30px 200px 0; width: 53%; min-width: fit-content; display: flex; justify-content: space-between; } .about .detail-box .btn-box a { min-width: fit-content; padding: 10px; } .my-skills { background: #FFF; padding-bottom: 40px; } .my-skills .container{ margin-bottom: 30px; } .my-skills .skill { margin: 10px 20px 10px; height: 53px; } .my-skills .skill h5 { display: flex; justify-content: space-between; align-items: center; font-size: 24px; margin-bottom: 3px; } .my-skills .skill h5 span { font-size: 12px; border: 1px solid #ccc; padding: 3px 5px; border-radius: 4px; color: var(--main-color); transition: 0.3s; display: none; } .my-skills .skill:hover>h5 span { display: inline-block; } .my-skills .skill .the-progress { height: 23px; background-color: #eee; position: relative; } .my-skills .skill .the-progress span { position: absolute; left: 0; top: 0; height: 100%; background-color: var(--main-color); } .my-skills .thumbnail { padding: 20px 40px; border-radius: 10px; -webkit-box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 20%); box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 20%); position: relative; transition: 0.3s; overflow: hidden; } .my-skills .thumbnail::after { content: ''; position: absolute; top: 0; right: 100%; background: var(--main-color); height: 4px; transition: 0.3s; } .my-skills .thumbnail:hover{ transform: translateY(-10px); }.my-skills .thumbnail:hover::after{ width: 100%; right: 0; } .my-skills .thumbnail .progress { height: 8px; background-color: #E1E1E1; overflow: visible; position: relative; transition: 0.3s; } .my-skills .thumbnail .progress-bar{ background: var(--main-color); } .my-skills .thumbnail .progress-bar span{ position: relative; position: absolute; font-size: 12px; border: 1px solid #ccc; padding: 3px 5px; border-radius: 4px; color: var(--main-color); right: -15px; height: fit-content; width: fit-content; top: 12px; z-index: 999; display: none; transition: 0.3s; } .my-skills .thumbnail .progress-bar span::after{ content: ''; position: absolute; width: 10px; height: 10px; right: 20%; top: -65%; border: solid 8px; border-color: transparent transparent var(--main-color) transparent; opacity: .5; } .my-skills .thumbnail:hover .progress-bar span{ display: inline-block; } .my-skills .thumbnail > div >svg{ height: 50px; } .my-skills .thumbnail h4{ font-size: 20px; text-transform: uppercase; } .services { background: #f1f1f1; padding-bottom: 130px; } .services .box { box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 12%); transition: 0.3s; margin: 10px 0; height: 350px; position: relative; padding: 50px 10px; border-radius: 20px; overflow: hidden; } .services .box::after{ content: ''; position: absolute; bottom: 0; left: 50%; background: var(--main-color); height: 4px; width: 0%; transition: 0.3s; } .services .box:hover { transform: translateY(-10px); } .services .box:hover::after { width: 100%; left: 0; } .services .box h4 { color: var(--main-color); margin: 0; font-size: 25px; } .services .box blockquote { border-left: none; } .services p { font-size: 18px; } .gallery{ width: 100%; display: block; } .gallery .gallery-filter{ padding: 0 15px; width: 100%; text-align: center; margin-bottom: 20px; } .gallery .gallery-filter .filter-item{ font-size: 18px; font-weight: 600; display: inline-block; margin:0 10px; cursor: pointer; line-height: 1.2; transition: all 0.3s ease; border: 1px solid var(--main-color); border-radius: 25px; padding: 10px 25px; color: var(--main-color); } .gallery .gallery-filter .filter-item.active , .gallery .gallery-filter .filter-item:hover{ background-color: var(--main-color); color: white; } .gallery .gallery-item{ width: calc(100% / 3); padding: 15px; } .gallery .gallery-item-inner img{ width: 100%; height: 212px; border: var(--main-color) solid 1px; } .gallery .gallery-item.show{ animation: fadeIn 0.5s ease; } @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } .gallery .gallery-item.hide{ display: none; } @media(max-width: 991px){ .gallery .gallery-item{ width: 50%; } .gallery .gallery-item-inner img{ height: 200px; } } @media(max-width: 767px){ .gallery .gallery-item{ width: 100%; } .gallery .gallery-filter .filter-item{ margin-bottom: 10px; } .gallery .gallery-item-inner img{ width: 100%; height: 230px; } } .contact-us { padding: 120px 0px; background: #f1f1f1; } .contact-us .section-heading { text-align: center; margin-left: 20px; margin-right: 20px; } .contact-us .contact-info { padding: 40px 30px; border: 2px solid #eee; margin: auto; } .contact-us .contact-info ul li { text-align: center; display: block; margin-bottom: 20px; } .contact-us .contact-info ul li a { font-size: 15px; color: #afafaf; transition: all .5s; } .contact-us .contact-info ul li:hover a { color: var(--main-color); } .contact-us .contact-info ul li:last-child { margin-bottom: 0px; } .contact-us .contact-info ul li .icon { margin-bottom: 15px; } .contact-us .contact-info ul li .icon { margin: 32px auto ; max-width: 32px; height: 20px; } form#contact { position: relative; background-color: #fff; padding: 60px 80px; border-radius: 50px; text-align: center; border: 1px solid var(--main-color); box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 12%); } form#contact input { width: 100%; height: 46px; border-radius: 5px; background-color: transparent; border: 2px solid #efefef; outline: none; font-size: 15px; font-weight: 300; color: #2a2a2a; padding: 0px 20px; margin-bottom: 20px; } form#contact input::placeholder { color: var(--main-color); } form#contact textarea { width: 100%; min-width: 100%; max-width: 100%; max-height: 140px; min-height: 140px; height: 140px; border-radius: 5px; background-color: transparent; border: var(--main-color2) solid 1px; outline: none; font-size: 15px; font-weight: 300; padding: 15px 20px; margin-bottom: 20px; color: var(--main-color); opacity: 0.8; } form#contact textarea:focus{ box-shadow: var(--main-color) 2px; color: var(--main-color); font-size: 15px; border: 1.5px solid var(--main-color); opacity: 1; } form#contact textarea:focus::placeholder { opacity: 0; } form#contact textarea::placeholder { color: var(--main-color); opacity: 0.5; } form#contact button { font-family: inherit; font-size: 20px; background:var(--main-color); color: white; padding: 0.7em 1em; display: flex; align-items: center; border: none; border-radius: 16px; overflow: hidden; transition: all 0.2s; width:400px; outline: none; border: none; } form#contact button span { display: block; margin-left: 0.3em; transition: all 0.3s ease-in-out; } form#contact button svg { display: block; transform-origin: center center; transition: transform 0.3s ease-in-out; } form#contact button:hover .svg-wrapper { animation: fly-1 0.6s ease-in-out infinite alternate; } form#contact button:hover svg { transform: translateX(1.2em) rotate(45deg) scale(1.1); } form#contact button:hover span { transform: translateX(100em); } form#contact button:active { transform: scale(0.95); outline: none; } @keyframes fly-1 { from { transform: translateY(0.1em); } to { transform: translateY(-0.1em); } } form#contact button:hover { background-color: var(--main-color2); color: #fff } form#contact .input-group { position: relative; } form#contact .input { border: solid 1.5px #9e9e9e; border-radius: 1rem; background: none; padding: 1rem; font-size: 15px; color: var(--main-color2); transition: border 150ms cubic-bezier(0.4,0,0.2,1); outline: none; border: var(--main-color2) solid 1px; } form#contact .user-label { position: absolute; left: 15px; color:var(--main-color2); pointer-events: none; transform: translateY(1rem); transition: 150ms cubic-bezier(0.4,0,0.2,1); } form#contact .input:focus,form#contact input:valid { outline: none; border: 1.5px solid var(--main-color); color: var(--main-color); } form#contact .input:focus ~ label,form#contact input:valid ~ label { transform: translateY(-50%) scale(0.8); z-index: 22; padding: 0 .2em; color:var(--main-color); background-color: #fff; } .info_section { background-color: #201f33; color: #ffffff; } .info_section h4 { font-weight: bold; margin-bottom: 20px; } .info_links ul { padding-left: 15px; } .info_links ul .active::before { background-color: var(--main-color) } .info_links ul li { list-style-type: none; position: relative; } .info_links ul li::before { content: ""; left: -15px; top: 50%; position: absolute; width: 8px; height: 8px; background-color: #ffffff; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .info_links ul li a { color: #ffffff; } .info_social .social_container { display: -webkit-box; display: -ms-flexbox; display: flex; } .info_social .social_container a { margin: 0 5px; } .info_social .social_container a i { font-size: 30px; color: #fff; transition: 0.3s; } .info_social .social_container a:hover i { color: var(--main-color); } .info_contact > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .info_contact div i { font-size: 25px; margin-right: 12px; height: auto; } .footer_section { background-color: #201f33; font-weight: 500; font-family: 'Roboto', sans-serif; } .footer_section p { border-top: 1px solid #ffffff; width: fit-content; color: #ffffff; margin: 0 auto; text-align: center; padding: 20px 35px; } .footer_section a { color: #ffffff; } .info_section a:hover,.footer_section a:hover{ color: var(--main-color); } .go-down { color: var(--main-color); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); transition: 0.3s; } .landing .go-down:hover { color: var(--main-color-alt); } .landing .go-down i { animation: bouncing 1.5s infinite; } @keyframes up-and-down { 0%, 100% { top: 0; } 50% { top: -50px; } } .about .detail-box .btn-box a { position: relative; overflow: hidden; height: fit-content; transition: 0.8s; text-align: center; } .about .detail-box .btn-box a p{ display: inline; transition: top 0.5s; } .about .detail-box .btn-box a span{ position: absolute; bottom: -100%; left: 40%; transition: top 0.5s; } .about .detail-box .btn-box .btn-2 span{ left: 40%; font-size: 30px; color: var(--main-color); } .about .detail-box .btn-box a:hover span{ bottom: 20%; transition: top 0.5s; } .about .detail-box .btn-box .btn-2:hover span{ bottom: 0; transition: top 0.5s; } .about .detail-box .btn-box a:hover p{ position: absolute; top: -100%; transition: top 0.5s; visibility: hidden; }