/*
  Theme Name: Proloy - Personal Portfolio/CV HTML Template
  Author: theme_group
  Support: robiulislamfree@gmail.com
  Description: Proloy is a HTML5 template that fits all kinds of Personal Portfolio, CV, Resume, Business Card, and Onepage website for all your needs. This template comes with 01 home page.
  Tags: agency, business, company, creative portfolio, dark agency, digital, digital agency, freelancer, light dark theme, marketing, one-page, personal, resume, proloy HTML5 template, proloy service
  Version: 1.0.0
*/
/* CSS Index
-----------------------------------
 /* 
01. Google Fonts area
02. theme default area css
03. preloader area css
04. header area css
05. nav menu area css
    i. sub menu
06. hero area css
07. about area css
08. services area css
09. work education resume area css
10. portfolio area css
11. team area css
12. pricing area css
13. video area css
14. special bg area css
15. blog area css
    i. blog details area css
    ii. Blog Quote Area Css Style
    iii. Blog tags Area Css Style
    iv. Blog Comments Area Css Style
    v. Blog Comments Form Area Css Style
16. map area css
17. contact info area css
18. Contact Form Area Css Style
19. footer area css
20. breadcrumb area css
 */

/* Google Fonts area */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Kanit:wght@100;200;300;400;500;600;700;800&display=swap');

/* theme default area css */
* {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
    font-size: 100%;
    line-height: inherit;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

body {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-style: normal;
}

img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease-out 0s;
}

a,
.button,
.btn {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus,
.btn:focus {
    text-decoration: none;
    outline: none;
}

a,
a:focus,
a:hover {
    text-decoration: none;
    color: inherit;
}

.btn:focus,
button:focus,
input:focus,
textarea,
textarea:focus,
.form-control:focus {
    outline: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Kanit', sans-serif;
    color: #0e121d;
    font-style: normal;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    margin-bottom: 10px;
}

p {
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #838694;
}

hr {
    border-bottom: 1px solid #eceff8;
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}

label {
    color: #7e7e7e;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

*::-moz-selection {
    background: #C29D50;
    color: #fff;
    text-shadow: none;
}
021
::-moz-selection {
    background: #444;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #106ad2;
    color: #fff;
    text-shadow: none;
}

*::-moz-placeholder {
    color: #555555;
    font-size: 14px;
    opacity: 1;
}

*::placeholder {
    color: #555555;
    font-size: 14px;
    opacity: 1;
}

.section-title-wrape h3 {
    font-size: 60px;
    font-weight: 600;
    text-transform: capitalize;
}

.section-title-wrape h4 {
    font-size: 24px;
    font-weight: 400;
    text-transform: capitalize;
    color: #838694;
}

.section-image {
    position: absolute;
    right: 30%;
    top: -60%;
}

/* preloader area css */

.preloader {
    background: #070707;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 99999;
}

.preloader .lds-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
}

.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* header area css */

.proloy-main-manu-content {
    background: #fff;
    border-radius: 30px;
    padding: 0px 50px;
    height: 100px;
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    box-shadow: 0px 0 15px 0px rgba(0, 0, 0, 0.14);
    background: #fff;
    transition: .3s;
}

.proloy-header-wrape {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    z-index: 99;
}

.header-logo {
    padding: 20px 0;
    display: inline-block;
    float: left;
}

.proloy-language-wrape {
    margin: 38px 0;
}

.proloy-language-wrape select {
    cursor: pointer;
    text-transform: capitalize;
}

ul.header-top-social-wrape {
    margin: 25px 0;
}


ul.header-top-social-wrape li {
    display: inline-block;
    margin: 0 15px 0 0;
    transition: all .3s;
}

ul.header-top-social-wrape li:hover a i {
    background: #929141;
    color: #fff;
}

ul.header-top-social-wrape li a i {
    font-size: 18px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #f1f1f1;
    border-radius: 50%;
    color: #838694;
}

/* nav menu area css */

.main-menu-area {
    display: inline-block;
    position: relative;
}

.main-menu ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.main-menu nav>ul>li {
    display: inline-block;
    position: relative;
    margin: 0;
}

.main-menu nav>ul>li.active:after,
.main-menu nav>ul>li:after {
    /* content: url('assets/img/common/arrow.png'); */
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
}

.main-menu nav>ul>li.active::after,
.main-menu nav>ul>li:hover::after {
    width: 100%;
    visibility: visible;
    opacity: 1;
    bottom: -7px;
}

.main-menu nav>ul>li>a {
    color: #838694;
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: 40px 32px;
    transition: all 0.3s ease 0s;
    line-height: 1.25;
    font-family: 'Kanit', sans-serif;
    text-transform: capitalize;
}

.main-menu nav>ul>li:hover>a,
.main-menu nav>ul>li.active>a {
    color: #0c1239;
    border-bottom: 3px solid #929141;
}

/* sub menu */

.main-menu nav>ul>li .sub-menu {
    background: #ffffff none repeat scroll 0 0;
    border-top: 3px solid #929141;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: all 0.4s ease-out;
    visibility: hidden;
    width: 220px;
    z-index: 9;
    transform-origin: top;
    transform: scaleY(0);
}

.main-menu nav>ul>li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}

.main-menu nav>ul>li .sub-menu li {
    display: block;
    position: relative;
    margin: 0;
}

.main-menu nav>ul>li .sub-menu li a {
    color: #666666;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    padding: 13px 20px;
    text-transform: capitalize;
    display: block;
    font-family: 'Kanit', sans-serif;
}

.main-menu nav>ul>li:hover>.sub-menu li>a:hover {
    color: #fff;
    background: #090909;
}

.main-menu nav>ul>li>.sub-menu>li>.sub-menu {
    background: #ffffff none repeat scroll 0 0;
    border-top: 3px solid #929141;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    left: 100%;
    opacity: 0;
    position: absolute;
    top: 120%;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 220px;
    z-index: 9;
}

.main-menu nav>ul>li>.sub-menu>li:hover .sub-menu {
    top: 0 !important;
    opacity: 1;
    top: 100%;
    visibility: visible
}

.header-top-btn {
    margin: 24px 0 0 35px;
    display: inline-block;
}

/* hero area css */

.hero-bg {
    background-position: center center;
    background-size: cover;
    background-attachment: inherit;
    background-color: #f9f7ff;
    background-repeat: no-repeat;
    z-index: 1;
}

.proloy-hero-content-wrape {
    padding: 240px 0;
}

.proloy-hero-content-wrape h4 {
    text-transform: capitalize;
    font-size: 28px;
    position: relative;
    display: inline-block;
}

.proloy-hero-content-wrape h4:after {
    content: '';
    position: absolute;
    width: 70px;
    height: 2px;
    right: -80px;
    top: 18px;
    background: #000;
}

.proloy-hero-content-wrape h1 {
    font-size: 100px;
    text-transform: capitalize;
    font-weight: 500;
}

.proloy-hero-content-wrape h1 span {
    -webkit-text-stroke: 4px #7b7a3e;
    color: transparent;
}

.proloy-hero-content-wrape .hero-desig-title {
    font-size: 30px;
    font-weight: 600;
    /* font-family: 'Caveat', cursive; */
    letter-spacing: 8px;
    margin-bottom: 15px;
}

.hero-btn-wrape {
    margin-top: 30px;
}

.hero-btn-wrape a:first-child {
    margin-right: 35px;
}

ul.hero-personal-info-wrape {
    position: absolute;
    bottom: 40px;
}

ul.hero-personal-info-wrape li {
    background: #fff;
    padding: 20px;
    margin-right: 15px;
    border-radius: 5px;
    border-left: 5px solid #929141;
}

ul.hero-personal-info-wrape li h4 {
    font-size: 16px;
    text-transform: capitalize;
    color: #838694;
}

ul.hero-personal-info-wrape li h3 {
    font-size: 22px;
    text-transform: capitalize;
    margin: 0;
}

ul.hero-personal-info-wrape li:last-child {
    margin-right: 0;
}

img.hero-style-img-1 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

img.hero-style-img-2 {
    position: absolute;
    left: 5%;
    bottom: 10%;
    z-index: -1;
}

img.hero-style-img-3 {
    position: absolute;
    bottom: 0;
    right: 10%;
    z-index: -1;
    border-radius: 50%;
}

img.hero-style-img-4 {
    position: absolute;
    left: 50%;
    top: 17%;
    z-index: -1;
}

/* about area css */
ul.social-wrape {}

ul.social-wrape li {
    display: inline-block;
    margin: 0 0 0 15px;
    transition: all .3s;
}

ul.social-wrape li a {
    font-size: 16px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    color: #212123;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    transition: all .3s;
}

ul.social-wrape li a:hover {
    background: #929141;
    color: #fff;
    border-color: #929141;
}

ul.proloy-about-resume-wrape li {
    padding: 15px;
    margin: 0;
    border: 1px solid #e1e1e1;
    transition: all .3s;
}

ul.proloy-about-resume-wrape li:hover {
    margin-left: 10px;
}

.about-resume-icon {
    width: 15%;
}

.about-resume-title {
    width: 30%;
}

.about-resume-info,
.about-resume-title {
    font-size: 24px;
    text-transform: capitalize;
}

.about-resume-icon span {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    background: #f7faff;
    justify-content: center;
    transition: all .3s;
}

.about-resume-icon span svg {
    fill: #0e121d;
    width: 40px;
    height: 40px;
}

ul.proloy-about-resume-wrape li:hover .about-resume-icon span svg {
    fill: #fff;
}

ul.proloy-about-resume-wrape li:nth-child(odd) {
    background: #f7faff;
    border-color: #f7faff;
}

ul.proloy-about-resume-wrape li:nth-child(odd) .about-resume-icon span svg {
    fill: #ffffff;

}

ul.proloy-about-resume-wrape li:nth-child(odd) .about-resume-icon span {
    background: #505050;
    transition: all .3s;
}

ul.proloy-about-resume-wrape li:hover .about-resume-icon span {
    background: #929141;
    border-radius: 10px;
}

.single-progress-content h3 {
    font-size: 30px;
    text-transform: capitalize;
    font-weight: 500;
}

.single-progress-wrape {
    margin: 0 0 30px 30px;
}

.single-progress-content {
    width: 60%;
    margin-left: 30px;
}

.proloy-about-progress-wrape .single-progress-wrape:nth-child(even) {
    margin-left: -30px;
}

.proloy-about-progress-wrape .single-progress-wrape:nth-child(1) h3,
.proloy-about-progress-wrape .single-progress-wrape:nth-child(1) .proloy-progress-bar div span {
    color: #6864ed;
}

.proloy-about-progress-wrape .single-progress-wrape:nth-child(2) h3,
.proloy-about-progress-wrape .single-progress-wrape:nth-child(2) .proloy-progress-bar div span {
    color: #33cc79;
}

.proloy-about-progress-wrape .single-progress-wrape:nth-child(3) h3,
.proloy-about-progress-wrape .single-progress-wrape:nth-child(3) .proloy-progress-bar div span {
    color: #929141;
}

/* services area css */

.services-bg {
    background-position: center center;
    background-size: cover;
    background-attachment: inherit;
    position: relative;
    height: 400px;
    background-image: url(assets/img/services/bg.jpg);
    background-color: #1a2b3c;
    background-repeat: no-repeat;
    z-index: -1;
}

.services-style {
    position: absolute;
    right: 0;
    top: 0;
}

.proloy-services-wrape {
    margin-top: -300px;
}

.single-services-wrape {
    z-index: 1;
    margin: 70px 12px 136px;
}

.single-services-content {
    background: #fff;
    padding: 35px 15px 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 15px 0px rgba(199, 199, 199, 0.4);
    z-index: 1;
}

.single-services-wrape:after {
    content: '';
    border-radius: 20px;
    position: absolute;
    left: 20px;
    right: 20px;
    top: -20px;
    bottom: -20px;
    z-index: -1;
    background: rgb(235 158 26 / 15%);
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transition: all .3s;
}

.single-blog-img img {
    border-radius: 15px;
    transition: all .3s;
    height: 500px;
    object-fit: cover;
}

.services-icon span {
    display: block;
    border: 1px solid #505050;
    border-radius: 20px;
    position: relative;
    background: #fff;
    width: 120px;
    height: 100px;
    line-height: 100px;
    transition: all .3s;
}

.services-icon span svg {
    width: 70px;
    height: 70px;
    z-index: 1;
    fill: #505050;
    transition: all .3s;
}

.services-icon span:after {
    content: '';
    border: 1px solid #505050;
    border-radius: 20px;
    position: absolute;
    left: 10px;
    right: 10px;
    top: -10px;
    bottom: -10px;
    z-index: -1;
    background: #fff;
    transition: all .3s;
}

.single-services-wrape h3 {
    font-size: 28px;
    text-transform: capitalize;
    margin: 25px 0;
}

.services-hvr {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.services-hvr img.shi1 {
    position: absolute;
    left: -5px;
    top: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.services-hvr img.shi2 {
    position: absolute;
    right: -5px;
    bottom: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.services-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -80px;
    transition: all .3s;
    opacity: 0;
    visibility: hidden;
}

.proloy-all-servicess-wrape .active.center .services-hvr img.shi1,
.single-services-wrape:hover .services-hvr img.shi1 {
    left: 0;
    top: 0;
    opacity: 1;
    visibility: visible;
}

.proloy-all-servicess-wrape .active.center .services-hvr img.shi2,
.single-services-wrape:hover .services-hvr img.shi2 {
    right: 0;
    bottom: 0;
    opacity: 1;
    visibility: visible;
}

.proloy-all-servicess-wrape .active.center .services-icon span,
.single-services-wrape:hover .services-icon span {
    background: #929141;
    border-color: #929141;
}

.proloy-all-servicess-wrape .active.center .services-icon span:after,
.single-services-wrape:hover .services-icon span:after {
    background: #ddd;
    border-color: #ddd;
}

.proloy-all-servicess-wrape .active.center .single-services-wrape:after,
.single-services-wrape:hover:after {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.proloy-all-servicess-wrape .active.center .services-btn,
.single-services-wrape:hover .services-btn {
    visibility: visible;
    bottom: -120px;
    opacity: 1;
}

.proloy-all-servicess-wrape .active.center .services-icon span svg,
.single-services-wrape:hover .services-icon span svg {
    fill: #fff;
}

.proloy-all-servicess-wrape .active.center .single-services-wrape {
    margin-top: 22px;
}

/* work education resume area css */

.proloy-work-education-resume-bg-img1 {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 0;
    height: 650px;
    width: 41%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -3;
}

.proloy-work-education-resume-bg-img1 img {
    width: 100%;
    height: 100%;
}

.proloy-work-education-resume-bg-img2 {
    position: absolute;
    right: 0;
    top: 100px;
    bottom: 0;
    height: 600px;
    width: 72%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.proloy-work-education-resume-bg-img2 img {
    width: 100%;
    height: 100%;
}

.proloy-work-resume-wrape {
    padding: 50px 0;
}

.proloy-work-resume-heading h3 {
    font-size: 36px;
    font-weight: 500;
    text-transform: capitalize;
}

.proloy-work-resume-heading span {
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #e1e1e1;
    position: relative;
    margin-left: 20px;
}

.proloy-work-resume-heading span:before {
    content: '';
    left: 0;
    top: -2px;
    position: absolute;
    width: 100px;
    height: 5px;
    background: #929141;
}

ul.proloy-work-resume-content {}

ul.proloy-work-resume-content li {
    padding: 25px 20px;
    border: 1px solid #f8f8f8;
    background: #fff;
    transition: all .3s;
}

.proloy-work-education-time {
    font-size: 16px;
    color: #838694;
}

.proloy-work-education-time span {
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 25px;
    background: #949494;
    position: relative;
}

.proloy-work-education-time span:after {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    border: 1px solid #9e9e9e;
    border-radius: 50%;
    padding: 10px;
    transition: all .3s;
}

.proloy-work-education-title-web {
    margin-left: 35px;
}

.proloy-work-education-title-web h4 {
    text-transform: capitalize;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 6px;
}

.proloy-work-education-title-web a {
    font-size: 18px;
    color: #838694;
}

ul.proloy-work-resume-content li:hover {
    box-shadow: 0px 2px 10px 0px rgba(255, 74, 84, 0.1);
    border-color: #929141;
    border-radius: 15px;
}

ul.proloy-work-resume-content li:hover .proloy-work-education-time span {
    background-color: #929141;
}

ul.proloy-work-resume-content li:hover .proloy-work-education-time span:after {
    border-color: #929141;
}

/* portfolio area css */
ul.portfolio-menu-wrape {
    margin: 0 0 70px;
    padding: 0;
}

ul.portfolio-menu-wrape li {
    list-style: none;
    margin: 0;
    display: inline-block;
    text-transform: capitalize;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    padding: 0px 10px;
    transition: all .2s;
    color: #555555;
    font-family: 'Kanit', sans-serif;
}

ul.portfolio-menu-wrape li:first-child {
    padding-left: 0;
}

ul.portfolio-menu-wrape li:last-child {
    padding-right: 0;
}


ul.portfolio-menu-wrape li:hover,
ul.portfolio-menu-wrape li.active {
    color: #929141;
}

.single-portfolio-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 430px;
}

.single-folio-wraper {
    position: relative;
    margin-bottom: 24px;
}

.folio-img-hvr-wrape img {
    border-radius: 15px;
}

.folio-hvr-title {
    position: absolute;
    left: 30px;
    top: 30px;
}

.folio-hvr-title a h3 {
    font-size: 18px;
    padding: 10px;
    text-transform: capitalize;
    font-weight: 600;
    background: #929141;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    transition: .3s;
    margin-left: -10px;
    opacity: 0;
    visibility: hidden;
}

.single-portfolio-item:hover .folio-hvr-title a h3 {
    opacity: 1;
    visibility: visible;
    margin-left: 0px;
}

.portfolio-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s;
}

.portfolio-pop a {
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 55px;
    background: #111111;
    border-radius: 50%;
    font-size: 20px;
    color: #929141;
    transition: all .3s;
    transform: scale(0);
    visibility: hidden;
    opacity: 0;
}

.single-portfolio-item:hover .portfolio-pop a {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}

/* team area css */

.proloy-single-team-wrape {
    position: relative;
    display: inline-flex;
}

.team-img-wrape {
    position: relative;
}


.team-img-wrape:before {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    transition: .3s all;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(2, 2, 0, 0) 1%, rgba(152, 203, 43, 0.8) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(2, 2, 0, 0) 1%, #000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(2, 2, 0, 0) 1%, #000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#cc98cb2b', GradientType=0);

}

.team-title-desig-social-wrape {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 50px;
    transition: all .3s;
}

.team-popup-wrape {
    margin-bottom: 20px;
    transition: all .3s;
    opacity: 0;
    visibility: hidden;
}

h3.team-title {
    font-size: 28px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0 0 15px;
    color: #ffffff;
}

h4.team-desig {
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    color: #ffffff;
}


ul.team-social-wrape {
    border-top: 1px solid #fff;
    margin-top: -30px;
    transition: all .3s;
    visibility: hidden;
    opacity: 0;
}

ul.team-social-wrape li {
    display: inline-block;
    margin: 0 0 0 15px;
    transition: all .3s;
}

ul.team-social-wrape li:hover a {
    background: #929141;
    border-color: #929141;
}

ul.team-social-wrape li a {
    font-size: 18px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #595959;
    border-radius: 50%;
    color: #fff;
    display: block;
    transition: all .3s;
}

.proloy-all-team-member-wrape .owl-item {
    margin-top: 20px;
}

.proloy-all-team-member-wrape.owl-carousel .owl-item:nth-child(2n) {
    margin-top: -20px;
}

.proloy-single-team-wrape:hover .team-popup-wrape {
    margin-bottom: 30px;
    opacity: 1;
    visibility: visible;
}

.proloy-single-team-wrape:hover ul.team-social-wrape {
    visibility: visible;
    opacity: 1;
    margin-top: 20px;
    padding-top: 20px;
}

/* pricing area css */

.single-price-area {
    border: 2px solid #f4f4f4;
    border-radius: 0;
    position: relative;
    padding: 50px 35px;
    transition: all .3s;
    z-index: 1;
}

.price-bg {
    position: absolute;
    bottom: -5px;
    right: -5px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.price-header {
    margin: 30px 0;
}

.price-header h2 span.price,
.price-header h2 {
    font-size: 70px;
    font-weight: 500;
    transition: all 0.3s;
    display: inline-flex;
    align-items: baseline;
}

.price-header h2 span.sep {
    margin: 0 8px 0 0;
}

.price-header h2>span {
    font-size: 20px;
    font-weight: 400;
}

.price-header h4 {
    font-weight: 500;
    text-transform: capitalize;
    font-size: 30px;
}

.price-icon {
    width: 185px;
    height: 138px;
    text-align: center;
    line-height: 138px;
    border-radius: 0;
    background: #323232;
    transition: all .3s;
}

.price-icon svg {
    fill: #fff;
    width: 70px;
    height: 70px;
    transition: all .3s;
}

.price-item-list li {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: #838694;
}

.price-item-list li i {
    margin-right: 10px;
}

.price-item-list li:last-child {
    margin-bottom: 0px;
}

.single-price-area.active .price-icon,
.single-price-area:hover .price-icon {
    border-top-right-radius: 69px;
    border-bottom-left-radius: 69px;

}

.single-price-area.active .price-btn a,
.single-price-area:hover .price-btn a {
    background: #929141;
    box-shadow: 0px 0px 30px 0px rgba(255, 202, 89, 0.3);
}

.single-price-area.active,
.single-price-area:hover {
    border-top-right-radius: 207px;
}

.single-price-area.active .price-bg,
.single-price-area:hover .price-bg {
    bottom: 0;
    right: 0;
    opacity: 1;
    visibility: visible;
}

.single-price-area.active .price-icon,
.single-price-area:hover .price-icon {
    background: #929141;
}

.single-price-area.active .price-header h2 span.price,
.single-price-area:hover .price-header h2 span.price {
    color: #929141;
}

/* video area css */

.proloy-video-wrape {
    margin-bottom: -250px;
}

.videos-content-wrape h3 {
    font-size: 58px;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.video-content p {
    color: #fff;
}

.popup-video {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    height: 127px;
    width: 127px;
    color: #929141;
    background: #fff;
    font-size: 62px;
    line-height: 127px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    animation: heartbeat 1s infinite alternate;
    margin-top: 100px;
}

.popup-video::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -23px;
    left: -23px;
    bottom: -23px;
    right: -23px;
    background: rgb(255 255 255 / 40%);
    border-radius: inherit;
    z-index: -1;
    -webkit-animation: btnIconRipple 3s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
    animation: btnIconRipple 3s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
}

.popup-video::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: -46px;
    left: -46px;
    bottom: -46px;
    right: -46px;
    background: rgb(255 255 255 / 30%);
    border-radius: inherit;
    z-index: -1;
    -webkit-animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
    animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
}

.video-content {
    position: absolute;
    top: 50%;
    left: 20%;
    right: 20%;
    transform: translateY(-50%);
    z-index: 1;
    text-align: center;
}

.video-bg-img {
    position: relative;
}

.video-bg-img img {
    border-radius: 15px;
}

.video-bg-img:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: hsl(0deg 0% 0% / 60%);
    border-radius: 15px;
}

/* special bg area css */

.special-bg {
    background-position: center center;
    background-size: cover;
    background-attachment: inherit;
    position: relative;
    height: 500px;
    background-color: #f7faff;
    background-repeat: no-repeat;
    z-index: -1;
}

.special-style {
    position: absolute;
    right: 0;
    top: 0;
}

/* blog area css */

.proloy-blog-wrape {
    margin-top: -415px;
}

.single-blog-img {
    position: relative;
}

.single-blog-img:before {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 15px;
    transition: .3s all;
}

.blog-date-title-wrape {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -90px;
    transition: all .3s;
}

.single-blog-date {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 5px;
    text-align: center;
    text-transform: capitalize;
    line-height: 18px;
}

.post-title {
    font-size: 26px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 38px;
    display: block;
}

.blog-info-title-wrape {
    background: #fff;
    padding: 20px;
    box-shadow: 0px 8px 20px 0px rgba(47, 48, 52, 0.14);
    border-radius: 5px;
    margin-top: 20px;
}

ul.admin-info {}

ul.admin-info li {
    margin-right: 15px;
}

ul.admin-info li a {
    font-size: 16px;
    color: #838694;
    text-transform: capitalize;
}

ul.admin-info li a i {
    margin-right: 7px;
}

.blog-readmore-btn {
    margin: 20px 0 0 15px;
}

.proloy-single-blog-wrape {
    transition: all .3s;
    padding: 0px 12px 20px;
}

.proloy-all-blog-list-wrape .active.center .blog-date-title-wrape,
.proloy-single-blog-wrape:hover .blog-date-title-wrape {
    bottom: 20px;
}

.proloy-all-blog-list-wrape .active.center .blog-readmore-btn .btn,
.proloy-single-blog-wrape:hover .blog-readmore-btn .btn {
    background-color: #929141;
    color: #fff;
    box-shadow: 0px 0px 30px 0px rgba(255, 202, 89, 0.3);
}

/* blog details area css */

.proloy-blog-details-wraper {
    border: 1px solid #f1f1f1;
    padding: 20px;
}

.blog-details-content .blog-date {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all .3s;
    margin-top: 35px;
}

.blog-details-content .post-title {
    display: block;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 26px;
    margin: 20px 0;
    transition: all .3s;
}

.blog-details-content h3 {
    font-size: 30px;
    font-weight: 500;
    text-transform: capitalize;
}

.blog-details-content figure img {
    margin: 15px 0;
}

.blog-details-content h6,
.blog-details-content h5,
.blog-details-content h5,
.blog-details-content h4,
.blog-details-content h3,
.blog-details-content h2,
.blog-details-content h1 {
    margin-bottom: 15px;
}

/* Blog Quote Area Css Style */

blockquote,
blockquote.wp-block-quote {
    background: #ffffff;
    border-left: 6px solid #929141;
    padding: 35px !important;
    box-shadow: 0px 0px 30px 0px rgba(26, 43, 60, 0.15);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    margin: 40px 0;
    z-index: 1;
}

blockquote:before,
blockquote.wp-block-quote:before {
    content: "\f10d";
    position: absolute;
    top: -20%;
    left: 5%;
    font-family: "FontAwesome";
    color: #929141;
    font-size: 150px;
    line-height: 1;
    opacity: .1;
    z-index: -1;
}

blockquote p,
blockquote.wp-block-quote p {
    color: #1a2b3c;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

blockquote cite,
blockquote.wp-block-quote cite {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    padding-left: 15px;
    margin-top: 30px;
    display: block;
}

blockquote cite:before,
blockquote.wp-block-quote cite:before {
    position: absolute;
    content: '';
    bottom: 0;
    width: 10px;
    height: 2px;
    background: #929141;
    margin: 0 auto;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Blog tags Area Css Style */

.blog-post-tag span {
    font-size: 20px;
    font-weight: 600;
    display: block;
    margin-bottom: 17px;
    color: #1a2b3c;
    text-transform: capitalize;
}

.blog-post-tag {
    background: #fff;
    padding: 0;
    padding-top: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 30px;
}

.blog-post-tag>a {
    color: #1a2b3c;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    border: 1px solid #e5e5e5;
    padding: 10px 24px;
    margin-right: 5px;
    transition: .3s;
    border-radius: 0;
    margin-bottom: 10px;
}

.blog-post-tag>a:hover {
    color: #fff;
    background: #929141;
    border-color: #929141;
}

/* Blog Comments Area Css Style */

.post-heading {
    margin-bottom: 30px;
}

.post-heading h3 {
    font-size: 28px;
    font-weight: 600;
    text-transform: capitalize;
    color: #1a2b3c;
    line-height: 1;
}

.latest-comments>ul {
    padding: 0;
    margin: 0;
}

.latest-comments ul {
    list-style: none;
}

.comments-box {
    margin-bottom: 30px;
    border-bottom: 1px solid #e7eaf0;
    padding-bottom: 30px;
}

.comments-avatar {
    float: left;
    width: 100px;
}

.comments-avatar img {
    border-radius: 50%;
}

.comments-text {
    overflow: hidden;
    padding-left: 30px;
}

.avatar-name-date {
    overflow: hidden;
}

.avatar-name-date>h5 {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    color: #1a2b3c;
    font-family: 'Kanit', sans-serif;
    line-height: 1;
}

.avatar-name-date span {
    text-transform: capitalize;
    font-weight: 400;
    font-size: 14px;
    margin: 10px 0 12px;
    display: block;
    color: #333333;
    font-family: 'Kanit', sans-serif;
    line-height: 1;
}

.comments-text>p {
    margin-bottom: 20px;
    color: #878991;
    font-size: 17px;
}

.comments-text>a {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    color: #1a2b3c;
    font-family: 'Poppins', sans-serif;
}

.comments-reply {
    padding-left: 70px;
}

/* Blog Comments Form Area Css Style */

.post-comments-form-area {
    margin: 40px 0 0 0;
}

.post-comments-form-area .post-comments-form {
    background: #f7faff;
    padding: 50px;
}

.post-comments-form input.form-control {
    box-shadow: none;
    color: #777777;
    height: 50px;
    margin-bottom: 30px;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    padding: 5px 20px;
    transition: all .3s;
}

.post-comments-form textarea.form-control {
    height: 133px;
    box-shadow: none;
    color: #777777;
    margin-bottom: 30px;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    padding: 15px 20px;
    transition: all .3s;
}

.post-comments-form textarea.form-control:focus,
.post-comments-form input.form-control:focus {
    box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
    outline: none;
    border: 1px solid #937D4B;
}


/* map area css */
#proloy-map {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    z-index: -1;
}

/* contact info area css */
ul.contant-info-content-wrape {
    margin-top: 30px;
}

ul.contant-info-content-wrape li {
    padding: 15px;
    margin: 0;
    border: 1px solid #e1e1e1;
    transition: all .3s;
}

.contant-info-content-icon {
    width: 15%;
}

.contant-info-content-icon span {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    background: #f7faff;
    justify-content: center;
}

.contant-info-content-icon span svg {
    fill: #929141;
    width: 40px;
    height: 40px;
}

.contant-info-content,
.contant-info-content-title {
    font-size: 22px;
    text-transform: capitalize;
    font-weight: 400;
}

.contant-info-content-title {
    width: 25%;
    margin-left: 12px;
    color: #838694;
}

ul.contant-info-content-wrape li:nth-child(odd) {
    background: #f7faff;
    border-color: #f7faff;
}

ul.contant-info-content-wrape li:nth-child(odd) .contant-info-content-icon span svg {
    fill: #ffffff;

}

ul.contant-info-content-wrape li:nth-child(odd) .contant-info-content-icon span {
    background: #929141;
}

/* Contact Form Area Css Style */

.proloy-contact-form-area {
    padding: 70px 50px;
    background: #f7faff;
    box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.14);
    border-radius: 10px;
}

.proloy-contact-form input.form-control {
    box-shadow: none;
    color: #777777;
    height: 50px;
    margin-bottom: 30px;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    padding: 5px 20px;
    transition: all .3s;
}

.proloy-contact-form textarea.form-control:focus,
.proloy-contact-form input.form-control:focus {
    box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
    outline: none;
    border: 1px solid #937D4B;
}

.proloy-contact-form textarea.form-control {
    height: 133px;
    box-shadow: none;
    color: #777777;
    margin-bottom: 30px;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    padding: 15px 20px;
    transition: all .3s;
}

p.form-message {
    font-size: 15px;
}

/* footer area css */

.footer-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 95%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.footer-bg img {
    width: 100%;
    height: 100%;
}

.footer-bg:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #0e121d;
    opacity: 0.95;
}

/* breadcrumb area css */

.breadcrumb-bg {
    background-position: center center;
    background-size: cover;
    background-attachment: inherit;
    height: 300px;
    background-image: url(assets/img/common/breadcrumb.jpg);
    background-color: #111111;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.breadcrumb-bg:before {
    content: '';
    background: hsl(224deg 35% 8% / 90%);
    left: 0px;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}

.proloy-breadcrumb-content h2 {
    color: #fff;
    font-size: 70px;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.proloy-breadcrumb-content .breadcrumb {
    background: inherit;
    padding: 0;
    margin: 0;
}

.breadcrumb .breadcrumb-item {
    font-family: 'Antonio', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
}

.proloy-breadcrumb-content .breadcrumb .breadcrumb-item,
.proloy-breadcrumb-content .breadcrumb-item.active a,
.proloy-breadcrumb-content .breadcrumb .breadcrumb-item.active {
    color: #fff;
    text-transform: capitalize;
}

.proloy-breadcrumb-content .breadcrumb .breadcrumb-item a {
    color: #ff5100;
    text-transform: capitalize;
}

.proloy-breadcrumb-content .breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
    content: '>';
    font-size: 30px;
    line-height: 32px;
}