: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:0;padding:0;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:0;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:0 2px 10px 0 rgb(0 0 0 / 20%);box-shadow:0 2px 10px 0 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 - 30px);margin: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 0;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:0;}
.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:0 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;}
.gallery-item{position:relative;}
.gallery-item-inner{display:block;}
.overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.7);color:white;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity 0.3s;}
.gallery-item:hover .overlay{opacity:1;}
.text{text-align:center;padding:10px;}