/*===================================================template name : grapholio | photography portfolio HTML template Author: erramixVersion: 1.0====================================================*//* start global classes */:root{/* body bg color */ --bodyColor :#fbfbfb; /* Primary Color */ --primaryColor : #2D2E2F; /* Secondary Color */ --secendaryColor :#666666; /* border radius */ --border-radius : 5px;}*{padding: 0; margin: 0; box-sizing: border-box;}body{font-family: 'Open Sans', sans-serif; color: var(--primaryColor); background-color: var(--bodyColor); text-align: left; position: relative; overflow-x: hidden;}html{scroll-behavior: smooth;}::selection{color: var(--bodyColor); background-color: var(--primaryColor);}.title{color: var(--primaryColor); font-size: 55px; text-transform: uppercase; font-weight: bold; position: relative;}.sub-title{color:var(--primaryColor) ; font-size: 26px; font-weight: bold; position: relative; text-transform: capitalize;}a, a:hover, a:focus{text-decoration: none; color: unset;}.logo{font-size: 30px; font-weight: bold; text-transform: uppercase; color: var(--primaryColor);}.logo.dark{color: var(--bodyColor);}/* start buttons style */.btn{background-color: var(--primaryColor); border: #2D2E2F solid 2px; color: var(--bodyColor); font-weight: 800; border-radius: var(--border-radius); padding: 8px 20px; font-size: 14px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; text-transform: capitalize; align-items: center; text-align: center; letter-spacing: .5px; outline: none; font-weight: 600; cursor: pointer; z-index: 1;}.btn:hover{color: var(--primaryColor); border: var(--primaryColor) solid 2px;}.btn-outline{border: var(--primaryColor) solid 2px; color: var(--primaryColor); background-color: var(--bodyColor); font-weight: 800; border-radius: var(--border-radius); padding: 8px 20px; font-size: 14px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; text-transform: capitalize; align-items: center; text-align: center; letter-spacing: .5px; outline: none; font-weight: 600; cursor: pointer; z-index: 1;}.btn-outline:hover{color: var(--bodyColor); background-color: var(--primaryColor);}.learn-more{text-transform: capitalize; color: var(--secendaryColor); font-size: 20px; font-weight: bold; cursor: pointer; border: none; background-color: transparent; display: flex; align-items: center;}.learn-more:hover{color: var(--primaryColor);}.learn-more .bi{font-size: 22px; margin-inline: 5px;}/* end main button style */@media (max-width: 768px){.btn{padding: 6px 18px; font-size: 16px;}.title{font-size: 35px;}.title-2{font-size: 20px;}.pretitle{font-size: 14px;}p{font-size: 14; line-height: 28;}}p{color: var(--secendaryColor); font-size: 16px; line-height: 32px; font-weight: 400;}ul{list-style: none;}img{width: 100%;}/* end global classes *//*====start preloader style=====*/#preloader{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bodyColor); z-index: 9999;}.spinner{position: absolute; top: 45%; left: 45%; border: 16px solid #e6e6e6; border-top: 16px solid var(--secendaryColor); border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear infinite;}@keyframes spin{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}/*====end preloader style=====*//*========start scroll-to-top button style===========*/#progress{position: fixed; bottom: 20px; right: 10px; height: 70px; width: 70px; display: none; place-items: center; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 800;}#progress-value{display: block; height: calc(100% - 15px); width: calc(100% - 15px); border-radius: 50%; display: grid; background-color: var(--bodyColor); place-items: center; font-size: 35px; color: var(--blueColor);}/*========end scroll-to-top button style===========*//*======start breadcrumbs style=========*/.breadcrumbs{background: var(--primaryColor); min-height: 40px; margin-top: 82px; color: var(--bodyColor);}@media (max-width: 992px){.breadcrumbs{margin-top: 57px;}}.breadcrumbs ol{display: flex; flex-wrap: wrap; list-style: none; padding: 0 0 10px 0; margin: 0; font-size: 14px; text-transform: uppercase;}.breadcrumbs h2{color: var(--bodyColor);}.breadcrumbs ol a{color: #e6e6e6; transition: 0.3s;}.breadcrumbs p{color: #ddd7d7;}.breadcrumbs ol li+li{padding-left: 10px; color: #F9F9F9;}.breadcrumbs ol li+li::before{display: inline-block; padding-right: 10px; color: #F8F6F4; content: "/";}/*======end breadcrumbs style=========*//*==================start navbar section==================*/.navbar{z-index: 900;}.navbar ul li .dropdown-item , .navbar ul li .dropdown-item:hover{background-color: transparent !important;}.navbar ul li a{font-weight: 600; margin-inline: 10px; color: var(--secendaryColor);}.navbar ul li a:hover, .navbar ul li a.active{color: var(--primaryColor) !important;}/*==================End navbar section==================*//*==================start hero section==================*/.hero{min-height: 100vh; position: relative; overflow: hidden;}.hero .hero-text .title{font-size: 50px; line-height: 65px; margin-top: 18%;}.hero .hero-box{position: relative;}.hero .hero-box i{font-size: 30px;}.hero .hero-box::before{content: ""; position: absolute; top: 0; bottom: 0; left: -1rem; width: 4px; font-size: var(--border-radius); height: 100%; background-color: var(--primaryColor);}/*==================end hero section=====================*//*==============Start About section==========*/.about .box i{color: var(--secendaryColor); font-size: 32px;}.about .numbers .box{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%;}.about .numbers h2{color: var(--primaryColor); font-size: 50px; font-weight: bold;}.about .numbers h6{font-size: 20px; font-weight: 400; color: var(--secendaryColor);}.about .about-headline{font-size: 40px; font-weight: bold; color: var(--primaryColor); text-transform: uppercase;}.about .bars{margin: 0; padding: 0;}@keyframes load{from{width: 0%;}}@-webkit-keyframes load{from{width: 0%;}}@-o-keyframes load{from{width: 0%;}}@-moz-keyframes load{from{width: 0%;}}.progress-bar{width: 100%; height: 8px; background-color: #EEEEEE; border-radius: 5px; overflow: hidden;}.progress-bar-fill{height: 100%; background-color: var(--secendaryColor); border-radius: 5px; transition: width 0.2s ease-in-out; animation: load 3s 0s; -webkit-animation: load 3s 0s; -moz-animation: load 3s 0s; -o-animation: load 3s 0s;}.progress-bar-fill.progress-bar-fill-1{width: 70%;}.progress-bar-fill.progress-bar-fill-2{width: 20%;}.progress-bar-fill.progress-bar-fill-3{width: 55%;}/*==============End About section==========*//*==============Start Services section==========*/.services .box .img{width: 100px; height: 100px;}#services2 .box{display: flex; flex-direction: row; justify-content: center;}#services2 .box .img{flex: .20;}#services2 .box .text{margin-left: 2rem; flex: .70;}/*==============End Services section==========*//*==============Start portfolio section==========*/.portfolio ul{margin: 0 !important; padding: 1rem 0 !important;}.portfolio-box{height: 300px;}.portfolio .portfolio-item.portfolio-grid{height: 300px;}.portfolio .portfolio-item img{object-fit: cover; overflow: hidden; width: 100%;}.portfolio-btn a{text-transform: capitalize; font-size: 20px; font-weight: 600; cursor: pointer; color: var(--secendaryColor); border: none; background-color: var(--bodyColor);}.portfolio-btn a:hover{color: var(--primaryColor);}.portfolio-item img{width: 100%; height: 100%; border-radius: var(--border-radius);}.portfolio-item{transition: ease-in-out 50ms; position: relative;}@media screen and (max-width: 768px){.portfolio ul li a{font-size: 17px;}}.portfolio .img-overlay{position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.7); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.50s; backdrop-filter: blur(4px);}.portfolio .img-overlay > *{transform: translateY(40px); transition: transform 25ms;}.portfolio .img-overlay:hover > *{transform: translateY(0);}.portfolio .img-overlay:hover{opacity: 1;}.portfolio .img-overlay h3{font-size: 25px; font-weight: bold; text-transform: uppercase;}.portfolio .img-overlay h4{padding: 7px 10px; color: var(--primaryColor); display: flex; justify-content: center; align-items: center; background-color: #C4C0E6; cursor: pointer;}.portfolio-btn .active, .portfolio-btn:hover{color: var(--brand-color) !important;}/*==============End portfolio section==========*//*==============Start testimonials section==========*/.testimonials .box h2{font-size: 22px; font-weight: bold; margin: 0; padding: 0;}.testimonials .box h4{font-size: 16px; font-weight: 500; margin-block: 5px;}/*==============End testimonials section==========*//*==============start Blog section==========*/.blog{position: relative;}.blog h6{color: #555555; font-size: 16px; font-weight: lighter;}.blog hr{color: #555555;}.blog .box img{height: 225px; border-radius: var(--border-radius);}.blog .box{display: flex; flex-direction: column; justify-content: space-between; height: 455px; margin-top: 2rem;}.blog h2{font-size: 28px; font-weight: bold; color: var(--primaryColor);}.blog .modal .btn-close{position: absolute; z-index: 9; padding: 10px; color: var(--bodyColor); background-color: var(--primaryColor); border-radius: 50%; right: 0; top: 0; margin: 10px;}.blog .modal .share i{font-size: 18px;}.blog .modal p{font-weight: 400; color: #555555;}.blog .modal .quote{position: relative; padding-left: 2rem;}.blog .modal .quote h6{font-size: 22px; font-weight: 600; color: #2D2E2F; line-height: 38px; position: relative; /* padding-left: 1rem; */}.blog .modal .quote::before{content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; font-size: var(--border-radius); height: 100%; background-color: var(--primaryColor);}/*==============End Blog section==========*/ /*==============Start newsletter section==========*/ .newsletter{display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center; background-color: #f7f7f7; border-radius: var(--border-radius);}.newsletter .form{display: flex; justify-content: space-between; height: 45px; border: 2px solid var(--primaryColor); border-radius: var(--border-radius);}.newsletter .form input{border: 0; outline: 0; font-size: 20px; flex: 0.75; padding-left: 10px;}.newsletter .form button{color: var(--bodyColor); background-color: var(--primaryColor); height: 100%; flex: 0.25; border: 0; outline: 0;}/*==============End newsletter section==========*//*==============start FAQ section==========*/.faq .box{border-bottom: 2px solid var(--secendaryColor); padding-block: 1rem;}.faq .box i{font-size: 20px; color: var(--primaryColor);}/*==============End FAQ section==========*//*==============Start contact section==========*/ .contact .info{display: flex; align-items: center;}.contact .info i{color: var(--bodyColor); background-color: var(--primaryColor); font-size: 30px; width: 70px; height: 70px; display: flex; align-items: center; border-radius: 50%; justify-content: center; aspect-ratio: 1/1; flex: 0.10;}.contact .info .text{flex: 0.90;}.contact .info .text h3{font-size: 20px; font-weight: bold;}.contact .info .text h5{font-size: 16px; font-weight: 500; color: var(--secendaryColor);}.contact .main-form input, .contact .main-form textarea{width: 100%; padding: 15px; border: none; border-bottom: 2px solid var(--secendaryColor); outline: none; background-color: var(--bodyColor);}.contact .main-form input:focus, .contact .main-form textarea:focus{border-bottom: 2px solid var(--primaryColor);}/*==============End contact section==========*/ /*==============End Footer section==========*/ .footer{background-color: var(--primaryColor); color: var(--bodyColor);}.footer .box p{color: #ddd7d7; font-weight: 400;}.footer .box .logo img{width: 50% ;}.footer .box i{color: var(--bodyColor); font-size: 25px;}.footer h4{color: var(--bodyColor); font-size: 18px; font-weight: 600;}.footer ul{margin: 0; padding: 0;}.footer ul li{margin: 1rem 0; color: var(--bodyColor); cursor: pointer;}.footer ul li a{font-size: 14px; font-weight: 400; text-transform: capitalize; color: var(--bodyColor);}.footer ul li a i{font-size: 12px; color: var(--bodyColor);}.footer .copyrights a{color: var(--bodyColor);}.footer .copyrights p{color: #ddd7d7;}/*==============End Footer section==========*//*==============other pages==========*//*=====start 404 page======*/.fzf{height: 100vh; display: flex; justify-content: center; align-items: center;}.fzf .content{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}.fzf .content h1{font-size: 180px; font-weight: bold; color: var(--primaryColor);}/*=====end 404 page======*/