body {overflow-x: hidden;} p { line-height: 1.75;} /*---------------------------------------------------------- About --------------------------------------------------------------*/ #about { background: #fff; padding: 5rem 0;} #about .about-container .background { min-height: 300px; background: url("../assets/img/about/about-img.jpg") center top no-repeat; margin-bottom: 10px;} #about .about-container .content { background: #fff;} #about .about-container .title { color: #333; font-weight: 900; font-size: 32px;} @media (max-width: 768px) { #about .about-container .title { padding-top: 10px;} } #about .about-container p {line-height: 26px;} #about .about-container p:last-child { margin-bottom: 0;} #about .about-container .icon-box { background: #fff; background-size: cover; padding: 0 0 20px 0;} #about .about-container .icon-box .icon {float: left;background: #fff; width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; border-radius: 50%; border: 3px solid #28a745;} #about .about-container .icon-box .icon i { color: #2dc997; font-size: 24px;} #about .about-container .icon-box .title { margin-left: 80px; font-weight: 600; margin-bottom: 5px; font-size: 18px; text-transform: uppercase; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} #about .about-container .icon-box .title a { color: #111;} #about .about-container .icon-box .description { margin-left: 80px; line-height: 24px; font-size: 14px;} /*---------------------------------------------------------- Budget --------------------------------------------------------------*/ .budget { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../assets/img/budget/budget-bg.jpg") fixed center center; background-size: cover; padding: 120px 0;} .budget2 { background: #070505; background-size: cover; padding: 120px 0; margin: 0 0 100px 0;} .budget h3, .budget2 h3, h1{ color: #fff; font-size: 28px; font-weight: 700;} .budget2 h2{ color: #fff; font-size: 52px; font-weight: 700;} .budget p, .budget2 p { color: #fff;} .budget .budget-btn { font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; font-size: 15px; letter-spacing: 1px; display: inline-block; padding: 12px 30px; transition: 0.5s; margin: 10px; background: #D7A701; color: #000; border-radius: 50px;} .budget2 .budget-btn { font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; font-size: 15px; letter-spacing: 1px; display: inline-block; padding: 12px 30px; transition: 0.5s; margin: 5px; background: #0A63C0; color: #fff; border-radius: 50px;} .budget .budget-btn:hover , .budget2 .budget-btn:hover { background: #fed136; color: #000;} @media (max-width: 1024px) { .budget, .budget2 { background-attachment: scroll; } } @media (min-width: 769px) { .budget .budget-btn-container, .budget2 .budget-btn-container { display: flex; align-items: center; justify-content: flex-end;} } /* -------------------------------- Budget-modal -------------------------------- */ .budget-modal .modal-dialog { /*margin: 1rem; max-width: 100vw;*/} .budget-modal .modal-content { padding-top: 6rem; padding-bottom: 2rem; text-align: center;} .budget-modal .modal-content h2 { font-size: 3rem; line-height: 3rem;} .budget-modal .modal-content p.item-intro { font-style: italic; margin-bottom: 2rem; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} .budget-modal .modal-content p { margin-bottom: 2rem;} .budget-modal .modal-content ul.list-inline { margin-bottom: 2rem;} .budget-modal .modal-content img { margin-bottom: 2rem;} .budget-modal .close-modal { position: absolute; top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; cursor: pointer; background-color: transparent;} .budget-modal .close-modal:hover { opacity: 0.3;} @media (min-width: 320px) { .budget-modal .modal-content h2 { font-size: 2rem; line-height: 3rem;} } /*---------------------------------------------------------- count --------------------------------------------------------------*/ #count { background: #D0D0D0; padding: 80px 0 60px 0; margin: 0 0 180px 0;} #count .counters span { font-size: 48px; color: #2dc997;} #count .counters .counterssum { font-size: 48px; color: #2dc997;} #count .counters p { padding: 0; margin: 0 0 20px 0; font-family: "Poppins", sans-serif; font-size: 14px;} /*---------------------------------------------------------- services --------------------------------------------------------------*/ .services:hover{background: #F8E9AB; cursor: pointer; border-radius:5px; overflow: hidden;} .services .paragraph{color: #6c757d;position: relative; top: 0; transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);} .services:hover .paragraph{top: -40px; color: #6c757d ; } .services .icons{color: #fed136; } .services .icons-up{position: relative; top: 0; transition: all 0.6s ; } .services:hover .icons-up{top: -10px; } .services:hover .icons{color: #fff; } .services:hover .iconsinverse{color: #fed136; } .services .services-portfolio-info{ opacity: 0; position: absolute; left: 70px; right: 70px; bottom: -50px; z-index: 3; transition: all ease-in-out 0.3s; background: #009961; padding: 15px 20px; border-radius: 5px;} .services h4{ position: relative; top: 0; transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);} .services:hover h4{ top: -30px;} .services .services-portfolio-info p {color: #fff; font-size: 16px; margin-bottom: 0;} .services .services-portfolio-info a {color: #fff; } .services .services-portfolio-info a:hover {color: #fff; text-shadow: 1px 1px 1px #000; text-decoration: none;} .services:hover .services-portfolio-info{ opacity: 1; bottom: 0;} .section-header .section-title { font-size: 32px; color: #111; text-transform: uppercase; text-align: center; font-weight: 700; margin-bottom: 5px;} .section-header .section-description { text-align: center; padding-bottom: 40px; color: #707070;} @media (min-width: 320px) { .services .services-portfolio-info{ opacity: 0; position: absolute; left: 70px; right: 70px; bottom: -50px; z-index: 3; transition: all ease-in-out 0.3s; background: #009961; padding: 10px 15px; border-radius: 5px;} } /* -------------------------------- services-modal -------------------------------- */ .services-modal .modal-dialog { /*margin: 1rem; max-width: 100vw;*/} .services-modal .modal-content { padding-top: 6rem; padding-bottom: 2rem; text-align: center;} .services-modal .modal-content h2 { font-size: 3rem; line-height: 3rem; text-shadow: 1px 1px 2px #000;} .services-modal .modal-content p.item-intro { font-style: italic; margin-bottom: 2rem; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} .services-modal .modal-content p { margin-bottom: 2rem;} .services-modal .modal-content ul.list-inline { margin-bottom: 2rem;} .services-modal .modal-content img { margin-bottom: 2rem;} .services-modal .close-modal { position: absolute; top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; cursor: pointer; background-color: transparent;} .services-modal .close-modal:hover { opacity: 0.3;} #services .services-email-form { width: 100%; padding: 30px; background: #fff; border: 2px solid #e9ecee; border-radius: 4px;} #services .services-email-form .form-group { padding-bottom: 8px;} #services .services-email-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size: 13px;} #services .services-email-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: center; padding: 15px; font-weight: 600;} #services .services-email-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600;} #services .services-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px;} #services .services-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; -webkit-animation: animate-loading 1s linear infinite; animation: animate-loading 1s linear infinite;} #services .services-email-form input, #services .services-email-form textarea { border-radius: 0; box-shadow: none; font-size: 14px;} #services .services-email-form input, #services .services-email-form select { height: 44px;} #services .services-email-form textarea { padding: 10px 12px;} #services .services-email-form button[type="submit"] { background: #D7A701; border: 0; padding: 10px 24px; color: #000; transition: 0.4s; border-radius: 4px;} #services .services-email-form button[type="submit"]:hover { background: #FDC607;} @media (min-width: 320px) { .services-modal .modal-content h2 { font-size: 2rem; line-height: 2rem;} } .page-section {padding: 6rem 0;} .page-section h2.section-heading {font-size: 2.5rem; margin-top: 0; margin-bottom: 1rem;} .page-section h3.section-subheading { font-size: 1rem; font-weight: 400; font-style: italic; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin-bottom: 4rem;} @media (min-width: 768px) { section {padding: 9rem 0;} } ::-moz-selection { background: #fed136; text-shadow: none;} ::selection { background: #fed136; text-shadow: none;} img::-moz-selection { background: transparent;} img::selection { background: transparent;} img::-moz-selection { background: transparent;} .btn-xl { padding: 1.25rem 2.5rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.125rem; font-weight: 700;} .btn-social { height: 2.5rem; width: 2.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 100%;} /*---------------------------------------------------------- Main Nav --------------------------------------------------------------*/ #mainNav { padding-top: 1rem; padding-bottom: 1rem; background-color: #212529;} #mainNav .navbar-toggler { padding: 0.75rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.75rem; color: #fff; text-transform: uppercase; background-color: #fed136; border: 0;} #mainNav .navbar-brand { color: #fed136; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 700; letter-spacing: 0.0625em; text-transform: uppercase;} #mainNav .navbar-brand img { width: 13em;} #mainNav .navbar-nav .nav-item .nav-link { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.95rem; color: #fff; letter-spacing: 0.0625em;} #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover { color: #fed136;} @media (min-width: 320px) { #mainNav { padding-top: 1.5rem; padding-bottom: 1.5rem; border: none; width: 100%; transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out; } #mainNav .navbar-brand { font-size: 1.2em; transition: font-size 0.3s ease-in-out; } #mainNav .navbar-brand img { width: 9.7em; transition: height 0.2s ease-in-out; } #mainNav.navbar-shrink { padding-top: 1rem; padding-bottom: 1rem; background-color: #212529;} #mainNav.navbar-shrink .navbar-brand {font-size: 1.25em;} #mainNav .navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img { width: 9.7em; } #mainNav .navbar-nav .nav-item { margin-right: 1rem; } #mainNav .navbar-nav .nav-item:last-child { margin-right: 0; } #masthead {padding-top: 10.5rem;padding-bottom: 6rem;text-align: center;color: #fff;background-image: url("../assets/img/header-bg.jpg"); height: 100vh; background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover;} #masthead .masthead-subheading { font-size: 1.5rem; font-style: italic; line-height: 1.5rem; margin-bottom: 25px; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} #masthead .masthead-heading { font-size: 2.5rem; font-weight: 700; line-height: 3.25rem; margin-bottom: 2rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} } @media (min-width: 360px) { #mainNav { padding-top: 1.5rem; padding-bottom: 1.5rem; border: none;width: 100%; transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;} #mainNav .navbar-brand { font-size: 1.5em; transition: font-size 0.3s ease-in-out;} #mainNav .navbar-brand img { width: 9.7em; transition: height 0.2s ease-in-out; } #mainNav.navbar-shrink { padding-top: 1rem; padding-bottom: 1rem; background-color: #212529; width: 100%;} #mainNav.navbar-shrink .navbar-brand {font-size: 1.25em;} #mainNav .navbar-shrink .navbar-brand svg,#mainNav.navbar-shrink .navbar-brand img { width: 9.7em;} #mainNav .navbar-nav .nav-item {margin-right: 1rem;} #mainNav .navbar-nav .nav-item:last-child { margin-right: 0; } } @media (min-width: 992px) { #mainNav { padding-top: 1.5rem; padding-bottom: 1.5rem; border: none; width: 100%; background-color: transparent; transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out; } #mainNav .navbar-brand { font-size: 1.5em; transition: font-size 0.3s ease-in-out;} #mainNav .navbar-brand img { width: 13em; transition: height 0.2s ease-in-out; } #mainNav .navbar-shrink { padding-top: 1rem; padding-bottom: 1rem; background-color: #212529; } #mainNav .navbar-shrink .navbar-brand { font-size: 1.25em; } #mainNav .navbar-shrink .navbar-brand svg, #mainNav .navbar-shrink .navbar-brand img { width: 13em; } #mainNav .navbar-nav .nav-item { margin-right: 1rem; } #mainNav .navbar-nav .nav-item:last-child { margin-right: 0; } } #masthead { padding-top: 10.5rem; padding-bottom: 6rem; text-align: center; color: #fff; background-image: url("../assets/img/header-bg.jpg"); height: 100vh; background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover;} #masthead .masthead-subheading { font-size: 1.5rem; font-style: italic; line-height: 1.5rem; margin-bottom: 25px; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} #masthead .masthead-heading { font-size: 3.25rem; font-weight: 700; line-height: 3.25rem; margin-bottom: 2rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} @media (min-width: 768px) { #masthead .masthead { padding-top: 17rem; padding-bottom: 12.5rem; } #masthead .masthead .masthead-subheading { font-size: 2.25rem; font-style: italic; line-height: 2.25rem; margin-bottom: 2rem; } #masthead .masthead .masthead-heading { font-size: 4.5rem; font-weight: 700; line-height: 4.5rem; margin-bottom: 4rem; } } /*---------------------------------------------------------- portfolio --------------------------------------------------------------*/ #portfolio .portfolio-item {margin-bottom: 30px; cursor: pointer;} #portfolio-flters {padding: 0; margin: 0 auto 25px auto; list-style: none; text-align: center;} #portfolio-flters li { cursor: pointer; display: inline-block; padding: 10px; font-size: 15px; font-weight: 400; line-height: 1; text-transform: uppercase; color: #444444; margin-bottom: 5px; transition: all 0.3s ease-in-out; font-family: "Poppins", sans-serif;} #portfolio-flters li:hover, #portfolio-flters li.filter-active { color: #000; text-shadow: 1px 1px 4px #000; background: #fed136 ; border-radius: 5px;} #portfolio-flters li:last-child { margin-right: 0;} .portfolio-item .portfolio-wrap {transition: 0.3s; position: relative; overflow: hidden; z-index: 1;} .portfolio-item .portfolio-wrap { transition: 0.3s; position: relative; overflow: hidden; z-index: 1;} .portfolio-item .portfolio-wrap::before { content: ""; background: rgba(255, 255, 255, 0.7); position: absolute; left: 30px; right: 30px; top: 30px; bottom: 30px; transition: all ease-in-out 0.3s; z-index: 2; opacity: 0;} .portfolio-item .portfolio-wrap .portfolio-info { opacity: 0; position: absolute; top: 10%; left: 0; right: 0; text-align: center; z-index: 3; transition: all ease-in-out 0.3s;} .portfolio-item .portfolio-wrap .portfolio-info h4 { font-size: 20px; color: #364146; font-weight: 600;} .portfolio-item .portfolio-wrap .portfolio-info p { color: #364146; font-size: 14px; text-transform: uppercase;} .portfolio-item .portfolio-wrap .portfolio-links { opacity: 0; left: 0; right: 0; bottom: 10%; text-align: center; z-index: 3; position: absolute; transition: all ease-in-out 0.3s;} .portfolio-item .portfolio-wrap .portfolio-links a { color: #009cea; margin: 0 2px; font-size: 24px; display: inline-block; transition: 0.3s; background: #eaf8ff; border-radius: 50px; line-height: 0; padding: 6px;} .portfolio-item .portfolio-wrap .portfolio-links a:hover { color: #fff; background: #009cea;} .portfolio-item .portfolio-wrap:hover::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 1;} .portfolio-item .portfolio-wrap:hover .portfolio-info { opacity: 1; top: calc(50% - 48px);} .portfolio-item .portfolio-wrap:hover .portfolio-links { opacity: 1; bottom: calc(50% - 50px);} /* -------------------------------- portfolio-modal -------------------------------- */ .portfolio-modal .modal-dialog { /*margin: 1rem; max-width: 100vw;*/} .portfolio-modal .modal-content { padding-top: 6rem; padding-bottom: 6rem; text-align: center;} .portfolio-modal .modal-content h2 { font-size: 3rem; line-height: 3rem;} .portfolio-modal .modal-content p.item-intro { font-style: italic; margin-bottom: 2rem; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} .portfolio-modal .modal-content p { margin-bottom: 2rem;} .portfolio-modal .modal-content ul.list-inline { margin-bottom: 2rem;} .portfolio-modal .modal-content img { margin-bottom: 2rem;} .portfolio-modal .close-modal { position: absolute; top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; cursor: pointer; background-color: transparent;} .portfolio-modal .close-modal:hover { opacity: 0.3;} @media (max-width: 320px) { .portfolio-modal .modal-content h2{ font-size: 2rem; line-height: 3rem; } } /*---------------------------------------------------------- client --------------------------------------------------------------*/ #client { background: #D3D3D3; padding: 4rem 0;} #client .client-row { display: block; flex-wrap: wrap; margin-right: -1.75rem; /* margin-left: -1.75rem;*/ text-align: center;} #client .client-item {padding: 40px; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #fff; height: 140px; margin: 0 1rem ;} #client .client-logo {/*padding: 40px; display: inline-block; justify-content: center; align-items: center; overflow: hidden; background: #fff; height: 140px; margin: 0 1rem ;*/ width: 100%;} #client .client-logo:hover img { transform: scale(1.1);} #client .client img { transition: all 0.4s ease-in-out; width: 100%;} /* #client .owl-carousel .owl-item{ display: block;} #client .owl-nav, #client .owl-dots { margin-top: 5px; text-align: center;} #client .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd !important;} #client .owl-dot.active { background-color: #009cea !important;} */ /*---------------------------------------------------------- Testimonials --------------------------------------------------------------*/ #testimonials .testimonial-item { box-sizing: content-box; min-height: 320px;} #testimonials .testimonials-section-title { text-align: center; padding-bottom: 30px;} #testimonials .testimonials-section-title span { font-weight: bold; color: #FBC100; text-shadow: 1px 1px 2px #000;} #testimonials .testimonial-item .testimonial-img { width: 90px; border-radius: 50%; margin: -40px 0 0 40px; position: relative; z-index: 2; border: 6px solid #fff;} #testimonials .testimonial-item h3 { font-size: 18px; font-weight: bold; margin: 10px 0 5px 45px; color: #111;} #testimonials .testimonial-item h4 { font-size: 14px; color: #999; margin: 0 0 0 45px;} #testimonials .testimonial-item .quote-icon-left, #testimonials .testimonial-item .quote-icon-right { color: #d8dee1; font-size: 26px;} #testimonials .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative;} #testimonials .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px;} #testimonials .testimonial-item p { font-style: italic; margin: 0 15px 0 15px; padding: 20px 20px 60px 20px; background: #f4f6f7; position: relative; border-radius: 6px; z-index: 1;} #testimonials .owl-nav, #testimonials .owl-dots { margin-top: 5px; text-align: center;} #testimonials .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd !important;} #testimonials .owl-dot.active { background-color: #009cea !important;} @media (max-width: 768px) { #testimonials { margin: 30px 10px; padding: 60px 0 0 0; } } /*---------------------------------------------------------- Team --------------------------------------------------------------*/ #team { background: url("../assets/img/team-bg-2.jpg") center center no-repeat; background-size: cover; padding: 10rem 0 6rem 0; position: relative;} #team .team-section-title { text-align: center; /*padding-bottom: 30px;*/} #team::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.69); z-index: 9;} #team .container { position: relative; z-index: 10;} #team .member { text-align: center; margin-bottom: 80px; position: relative;} #team .member .img-member { overflow: hidden;border-radius: 50%; border: 0.5rem solid rgba(0, 0, 0, 0.1);} #team .member .member-info { position: absolute; top: 85%; left: 20px; right: 20px; background: #fff; padding: 20px 0; color: #364146; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); max-height: 90px; overflow: hidden; transition: max-height 0.5s ease-in-out;} #team .member:hover .member-info { max-height: 300px;} #team .member h4 { font-weight: 700; margin-bottom: 10px; font-size: 16px; color: #364146; position: relative; padding-bottom: 10px;} #team .member h4::after { content: ''; position: absolute; display: block; width: 50px; height: 1px; background: #b5c1c6; bottom: 0; left: calc(50% - 25px);} #team .member span { font-style: italic; display: block; font-size: 13px; /*box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);*/} #team .member .social { margin-top: 15px; }#team .member .social a { transition: color 0.3s; color: #627680;margin: 0 15px;} #team .member .social a:hover { color: #C59900;} #team .member .social i { font-size: 16px; margin: 0 2px;} @media (max-width: 992px) { #team.member { margin-bottom: 110px; } } /*---------------------------------------------------------- Contact --------------------------------------------------------------*/ #contact {/*background: url("../assets/img/team-bg-2.jpg") center center no-repeat;*/ background-size: cover; position: relative;} .contact-page-section {padding: 6rem 0 0 0;} .contact-page-section h2.section-heading {font-size: 2.5rem; margin-top: 0; margin-bottom: 1rem;} .contact-page-section h3.section-subheading { font-size: 1rem; font-weight: 400; font-style: italic; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin-bottom: 4rem;} #contact .contact-section-title { text-align: center; padding-bottom: 20px;} #contact .info { padding: 30px; background: #fff; width: 100%; border: 2px solid #e9ecee; border-radius: 4px;} #contact .info .address .iconscircle, #contact .info .email .iconscircle, #contact .info .phone .iconscircle {color: #DFAD01; transition: all 0.3s ease-in-out;} #contact .info .address .icons, #contact .info .email .icons, #contact .info .phone .icons {color: #fff;transition: all 0.3s ease-in-out;} #contact .info .address:hover .iconscircle, #contact .info .email:hover .iconscircle, #contact .info .phone:hover .iconscircle { color: #F8E9AB;} #contact .info .address:hover .icons, #contact .info .email:hover .icons, #contact .info .phone:hover .icons {color: #B58C00;transition: all 0.3s ease-in-out;} #contact .info .phone a{color: #B58C00;transition: all 0.3s ease-in-out;} #contact .info .phone:hover a{color: #B58C00; font-weight: bold;transition: all 0.3s ease-in-out; text-shadow: 1px 1px 2px #000;} #contact .info h4 { padding: 10px 0 0 0; font-size: 20px; font-weight: 600; margin: 5px 0; color: #364146;} #contact .info p { padding: 0 0 10px 80px; margin-bottom: 20px; font-size: 14px; color: #627680;} #contact .info iframe {width: 100%; height: 290px} #contact .contact-email-form { width: 100%; padding: 30px; background: #fff; border: 2px solid #e9ecee; border-radius: 4px;} #contact .contact-email-form .form-group { padding-bottom: 8px;} #contact .contact-email-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size: 13px;} #contact .contact-email-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: center; padding: 15px; font-weight: 600;} #contact .contact-email-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600;} #contact .contact-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px;} #contact .contact-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; -webkit-animation: animate-loading 1s linear infinite; animation: animate-loading 1s linear infinite;} #contact .contact-email-form input, #contact .contact-email-form textarea { border-radius: 0; box-shadow: none; font-size: 14px;} #contact .contact-email-form input, #contact .contact-email-form select { height: 44px;} #contact .contact-email-form textarea { padding: 10px 12px;} #contact .contact-email-form button[type="submit"] { background: #D7A701; border: 0; padding: 10px 24px; color: #000; transition: 0.4s; border-radius: 4px;} #contact .contact-email-form button[type="submit"]:hover { background: #FDC607;} @media (max-width: 320px) { #contact .info { padding: 10px; background: #fff; width: 100%; border: 2px solid #e9ecee; border-radius: 4px;} #contact .info p { padding: 0 0 10px 80px; margin-bottom: 20px; font-size: 14px; color: #627680;} } /*---------------------------------------------------------- Footer --------------------------------------------------------------*/ #footer { background: #4B545D; padding:0 0 10px 0; color: #fff; font-size: 14px; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} #footer .footer-top { background: #212529; padding: 20px 0 10px 0; border-top: 2px solid #e9ecee; border-bottom: 2px solid #e9ecee;} #footer .footer-top .footer-info { margin-bottom: 30px;} #footer .footer-top .footer-info a { color: #e6b301; padding: 8px 0; margin-right: 4px;text-align: center;transition: 0.3s; font-weight: 700;} #footer .footer-top .footer-info a:hover { background: #F8E9AB; color: #4B545D; font-weight: 700; text-decoration: none; transition: all 0.3s ease-in-out;} #footer .footer-top .footer-info h3 { font-size: 24px; margin: 0 0 20px 0; padding: 2px 0 2px 0; line-height: 1; font-weight: 700;} #footer .footer-top .footer-info img { width:7.5em; } #footer .footer-top .footer-info p { font-size: 14px; line-height: 24px; margin-bottom: 0; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: #576971;} #footer .footer-top .footer-info span { font-size: 13px; font-weight: 400; line-height: 24px; margin-bottom: 0; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: #fff;} #footer .footer-top .social-links a { font-size: 18px; display: inline-block; background: #F8E9AB; color: #212529; line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s;} #footer .footer-top .social-links a:hover { background: #e6b301; color: #fff; text-decoration: none; transition: all 0.3s ease-in-out;} #footer .footer-top h4 { font-size: 16px; font-weight: 600; color: #fff; position: relative; padding-bottom: 12px;} #footer .footer-top .footer-links {margin-bottom: 30px;} #footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0;} #footer .footer-top .footer-links ul i { padding-right: 2px; color: #009cea; font-size: 18px; line-height: 1; margin-left: -5px;} #footer .footer-top .footer-links ul li { padding: 10px 0; display: flex; align-items: center;} #footer .footer-top .footer-links ul a { color: #8C9EA6; transition: 0.3s; display: inline-block; line-height: 1; margin: 0 0 0 5px;} #footer .footer-top .footer-links ul a:hover {color: #e6b301;} #footer .footer-top .footer-newsletter form { margin-top: 30px; background: #fff; padding: 6px 10px; position: relative; border-radius: 4px; border: 1px solid #e3e7e9;} #footer .footer-top .footer-newsletter form input[type="email"] { border: 0; padding: 4px; width: calc(100% - 110px);} #footer .footer-top .footer-newsletter form input[type="submit"] { position: absolute; top: -1px; right: -2px; bottom: -1px; border: 0; font-size: 16px; padding: 0 20px; background: #e6b301; color: 000; font-weight: 600; transition: 0.3s; border-radius: 0 4px 4px 0;} #footer .footer-top .footer-newsletter form button[type="submit"] { position: absolute; top: -1px; right: -2px; bottom: -1px; border: 0; font-size: 16px; padding: 0 20px; background: #e6b301; color: #000; font-weight: 600; transition: 0.3s; border-radius: 0 4px 4px 0;} #footer .footer-top .footer-newsletter form input[type="submit"]:hover { background: #F3D96F; color: #000;text-decoration: underline;} #footer .copyright { text-align: center; padding: 10px 0 0 0;} #footer .copyright img{ width: 7.7em;} /* -------------------------------- Contact Whats ----------------------------------- */ /*.back-to-whats {position: fixed; display: none; right: 15px; background: rgba(225,174,0,0.66); color: #fff; padding: 5px 12px; border-radius: 2px; bottom: 105px; transition: background 0.5s;}*/ .back-to-whats {position: fixed; display: none; right: 15px; background: rgba(225,174,0,0.66); color: #fff; padding: 5px 12px; font-size: 15px; border-radius: 2px; bottom: 105px; transition: background 0.5s;} .back-to-whats:hover { background: #E7B301; color: #fff;} @media (max-width: 768px) { .back-to-whats { bottom: 105px; } } /* -------------------------------- Back to Top ----------------------------------- */ .back-to-top {position: fixed; display: none; right: 15px; background: rgba(254,209,54,0.87); color: #fff; padding: 6px 12px; font-size: 21px; border-radius: 2px; bottom: 15px; transition: background 0.5s;} .back-to-top:focus { background: rgba(254,209,54,0.87); color: #fff; outline: none;} .back-to-top:hover { background: #E7B301; color: #fff;} @media (max-width: 768px) { .back-to-top { bottom: 15px; } } .ctt-whats { width: 57px; border-radius: 100%; box-shadow: 0 0 4px 1px rgba(0,0,0,.5); margin-left: 13px; } .ctt-whats:hover{ box-shadow: 0 2px 6px 3px rgba(0,0,0,.5); }