/*
Author       : Jhanwar Web Designer
Template Name: Jhanwar Web Designer
Version      : 1.0
*/

/*  Font Face Style */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/*  Global */
:root {
    /* / Color / */
    --bs-primary: #08A3C2;
    --bs-secondary: #F6D30D;
    --whiteColor: #fff;
    --blackColor: #000;

    --color-text: #000;

    --grey1: #E6F4F7;
    --grey2: #fffcf1;
    --grey3: #FAE596;
    --grey4: #1B1B1B;
    --grey5: #4A4747;
    --grey6: #AFACAC;
    --grey7: rgba(0, 0, 0, 0.7);
    --grey8: rgba(255, 252, 241, 0.5);
    --grey9: #EFF9FB;
    --grey10: rgba(0, 0, 0, 0.5);

    /* / Font-Size / */
    --font40: 40px;
    --font36: 36px;
    --font30: 30px;
    --font28: 28px;
    --font24: 24px;
    --font20: 20px;
    --font18: 18px;
    --font16: 16px;
    --font14: 14px;
    --font12: 12px;

    /* / Font-Family / */
    --font-family--body: 'Quicksand', sans-serif;
    --font-family--heading: 'Quicksand', sans-serif;
}
img { max-width:100%; height:auto; }
body { color: var(--color-text); font-size: var(--font16); line-height: 1.5em; font-family: var(--font-family--body); }

/* Typography  */
video, audio { max-width:100%; height:auto; }
object { max-width:100%; }
iframe { max-width:100%; }
strong { font-weight:bold; }
a { text-decoration: none; color: var(--bs-primary); }
a:hover { color: var(--bs-secondary); }
h1, h2, h3, h4, h5, h6 { clear: both; font-weight: 700; line-height: 1.2; margin: 0 0 15px; color: var(--color-text); font-family: var(--font-family--heading); }
h1 { font-size: var(--font40); }
h2 { font-size: var(--font36); }
h3 { font-size: var(--font30); }
h4 { font-size: var(--font28); }
h5 { font-size: var(--font24); }
h6 { font-size: var(--font20); }
ul { margin:0 0 12px; }
p { line-height:1.5; margin-bottom: 20px; }

blockquote { font-family: var(--font-family--body); font-size: var(--font18); font-weight: 500; font-style: italic; border-left: solid 4px var(--grey1); padding-left: 18px; }

.bg-warning { background-color: var(--bs-secondary) !important; }

/* Base  */
.site { position: relative; display: flex; flex-direction: column; min-height: 100vh; }
a.disable-link { cursor: default; pointer-events: none; }
.container { position: relative; }

/* Header  */
.site-header { position: relative; min-height: 72px; }
.site-logo { margin-right: 16px; order: 1; }
.site-logo img { display: block; width: 50px; height: 50px; }
.hire-me-action { position: relative; margin-left: 16px; order: 3; }
.hire-me-action .btn { min-width: 92px; padding: 9px 20px; border-radius: 40px; text-transform: uppercase; }

/* Navbar */
.navbar { padding: 0; width: 100%; transition: top 0.3s; }
.navbar > .container { position: static; }
.nav-up, .nav-down { position: fixed; background-color: var(--whiteColor); z-index: 99999; top: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }
.navbar.navbar-light { background-color: var(--whiteColor); padding-block: 11px; }
.navbar-expand-lg .offcanvas { flex-grow: 0; order: 2; }
.navbar-nav li { padding: 0; position: static; margin-left: 1px; }
.navbar-light .navbar-nav .nav-link { padding: 0 12px; font-size: var(--font16); line-height: 1.5; font-weight: 600; font-family: var(--font-family--body); color: var(--color-text); }
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link { color: var(--bs-primary); }

/* Labels */
.form-field { margin-bottom: 20px; position: relative; }
.form-label, .form-check-label { margin-bottom: 2px; color: var(--grey4); font-size: var(--font14); font-weight: 500; }
.form-label-light { color: var(--grey6); }

/* Input Groups */
.form-control, input[type="number"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], textarea, select { padding: 11px 16px; border-radius: 8px; max-width: 100%; line-height: 1.5; font-size: var(--font16); color: var(--blackColor); background-color: var(--whiteColor); border: solid 1px var(--grey5); font-family: var(--font-family--body); }
.form-select { background-position: right 1.25rem center; border-radius: 8px; padding: 11px 12px; line-height: 1.5; border: solid 1px var(--grey5); background-color: var(--whiteColor); color: var(--blackColor); font-size: var(--font16); font-family: var(--font-family--body); }
.form-control:focus, .form-select:focus { box-shadow: none; }
.input-group > .form-control, .input-group > .form-select { min-width: 100px; }
::-webkit-input-placeholder { color: var(--grey6); }
::-moz-placeholder { color: var(--grey6); }
:-ms-input-placeholder { color: var(--grey6); }
:-moz-placeholder { color: var(--grey6); }
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
/* Firefox */
input[type=number] { -moz-appearance: textfield; }
.form-check-input:focus, .form-check-input:focus-visible { border-color: var(--bs-secondary); box-shadow: none; outline: none; }
.form-check-input:checked { background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
textarea.form-control { min-height: 140px; }

/* Buttons */
.btn, input[type=button], input[type=submit], input[type=reset] { display: inline-block; font-size: var(--font14); line-height: 1.4; padding: 12px 24px 10px; border: 0 none; border-radius: 8px; box-sizing: border-box; font-weight: 600; text-transform: inherit; font-family: var(--font-family--body); }
input[type=button], input[type=submit], input[type=reset], .btn-primary { color: var(--whiteColor); background-color: var(--blackColor); }
input[type=button]:hover, input[type=button]:focus, input[type=submit]:hover, input[type=submit]:focus, input[type=reset]:hover, input[type=reset]:focus, .btn-primary:hover, .btn-primary:focus,
.btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary.show, .btn-primary:first-child:active, :not(.btn-check) + .btn-primary:active, .btn-primary:focus-visible { color: var(--whiteColor); background-color: var(--bs-primary); border-color: var(--bs-primary); box-shadow: none; }
.btn-group-sm > .btn, .btn-sm { border-radius: 0; font-size: var(--font14); padding: 8px 20px; }
.btn-group-lg > .btn, .btn-lg { border-radius: 0; font-size: var(--font18); padding: 15px 30px; }
.btn-gray { color: var(--blackColor); background-color: var(--grey1); }
.btn-gray:hover, .btn-gray:focus,
.btn-check:checked + .btn-gray, .btn-gray.active, .btn-gray.show, .btn-gray:first-child:active, :not(.btn-check) + .btn-gray:active, .btn-gray:focus-visible { color: var(--whiteColor); background-color: var(--bs-primary); border-color: var(--bs-primary); box-shadow: none; }

/* Main Content */
.site-main { flex: 1; }
.site-section { position: relative; padding-block: 64px; }
.sec-header { max-width: 658px; margin-inline: auto; margin-block-end: 50px; text-align: center; }
.sec-header h2 { font-size: var(--font28); font-weight: 600; }

/**
 * Social Icons
 */
.social-link { list-style: none; display: flex; align-items: center; padding-left: 0; margin: 0; gap: 12px; }
.social-link a { position: relative; overflow: hidden; transition: all 0.4s ease-in-out; width: 36px; height: 36px; border: solid 1px var(--whiteColor); color: var(--whiteColor); display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 50%; }
.social-link a:hover, .social-link a:focus-visible { background-color: var(--whiteColor); border-color: var(--whiteColor); color: var(--blackColor); }
.social-link a img { transition: all 0.4s ease-in-out; position: relative; z-index: 3; }
.social-link a:hover img, .social-link a:focus-visible img { transform: rotate(360deg); }
.social-link a:before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #0077b5; transition: .5s; z-index: 2; }
.social-link a:hover:before { top: 0; }
.social-link li:nth-child(2) a:before { background: #3b5999; }
.social-link li:nth-child(3) a:before { background: linear-gradient(115deg, rgb(249, 206, 52), rgb(238, 42, 123), rgb(98, 40, 215)); }

/*  Footer= */
.site-footer { background-color: var(--grey4); color: var(--whiteColor); font-size: var(--font14); padding: 0; }
.site-footer a { color: var(--whiteColor); }
.site-footer a:hover, .site-footer a:focus { color: var(--bs-primary); }
.site-footer-copyright { border-block-start: solid 1px var(--whiteColor); padding-block: 16px; text-align: center; }
.site-footer-copyright p { margin-block-end: 0; }
.site-footer-main { padding-block: 46px 30px; }
.footer-contact-info { position: relative; }
.footer-title { font-size: var(--font24); color: var(--whiteColor); }
.footer-contact-address { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.footer-contact-address li { display: flex; align-items: center; gap: 12px; } 
.footer-follow-me, .footer-newsletter { position: relative; }
.newsletter-form { position: relative; max-width: 276px; }
.newsletter-form .form-control { border: solid 1px var(--whiteColor); background-color: transparent; color: var(--whiteColor); padding: 8px 20px; border-radius: 30px; }
.newsletter-form .form-control::placeholder { color: var(--grey6); }
.newsletter-form .btn { border: 0 none; background-color: transparent; color: var(--whiteColor); border-radius: 0; padding: 0; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.newsletter-form .btn:hover, .newsletter-form .btn:focus-visible, .newsletter-form .btn:active { border: 0 none; background-color: transparent; color: var(--whiteColor); }

/* hero-section */
.hero-section { background-color: var(--grey1); color: var(--color-text); }
.hero-thumb { position: relative; }
.hero-thumb img { border-radius: 30px; }
.hero-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-hand { margin-block-end: 32px; }
.hero-title { font-weight: 400; text-transform: capitalize; }
.hero-content h3 { margin-block-start: 12px; font-weight: 500; font-size: var(--font16); text-transform: uppercase; }
.hero-experience { list-style: none; padding: 0; margin-block-start: 32px; margin-block-end: 0; display: flex; gap: 40px; }
.hero-experience li { display: flex; align-items: center; gap: 12px; }
.hero-experience-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--whiteColor); color: var(--color-text); padding: 4px; border-radius: 50%; }
.hero-experience-content { flex: 1; font-size: var(--font14); }
.hero-experience-content p { margin: 0; }
.hero-experience-content h4 { margin: 0; font-size: var(--font18); }

/* about-section */
.about-section, .about-thumb, .about-content { position: relative; }
.about-content h3 { font-size: var(--font20); margin-block-end: 10px; }
.about-progress { position: relative; display: flex; flex-direction: column; gap: 12px; }
.about-progress-item { position: relative; }
.about-progress-header { display: flex; align-items: center; justify-content: space-between; }
.about-progress .progress { height: 12px; background-color: var(grey1); border-radius: 32px; }
.about-progress .progress-bar { border-radius: 32px; }

/* project-section */
.project-section { position: relative; background-color: var(--grey2); color: var(--color-text); }
.project-card { position: relative; margin-block-end: 24px; overflow: hidden; border-radius: 24px; border: solid 1px var(--blackColor); }
.project-card-thumb { position: relative; }
.project-card-thumb img { width: 100%; object-fit: cover; transition: 0.4s ease-in-out; }
.project-card-thumb::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--grey8); }
.project-card:hover .project-card-thumb img { transform: scale(1.05); }
.project-card-content { position: absolute; left: 20px; bottom: 20px; z-index: 1; background-color: var(--grey7); color: var(--whiteColor); padding: 12px; border-radius: 8px; }
.project-card-content h4 { color: var(--whiteColor); margin-block-end: 0; font-size: var(--font16); font-weight: 600; }
.project-card-link { display: flex; align-items: center; gap: 4px; }
.project-card-link p { margin: 0; }
.project-card-link-url { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; }

/* service-section */
.service-section { position: relative; }
.service-card { transition: 0.4s ease-in-out; position: relative; overflow: hidden; height: calc(100% - 24px); margin-block-end: 24px; background-color: var(--grey9); color: var(--color-text); border: solid 1px var(--bs-primary); border-radius: 12px; padding: 30px 24px; }
.service-card::before { content: ''; position: absolute; left: 0; top: 0; z-index: 1; height: 100%; width: 0; background-color: var(--bs-primary); transition: 0.4s ease-in-out; }
.service-card * { position: relative; z-index: 3; }
.service-card:hover, .service-card:hover h3 { color: var(--whiteColor); }
.service-card:hover::before { width: 100%; }
.service-card-thumb { margin-block-end: 10px; background-color: var(--grey3); width: 40px; height: 40px; border-radius: 50%; padding: 4px; display: flex; align-items: center; justify-content: center; }
.service-card h3 { font-weight: 600; font-size: var(--font16); transition: 0.4s ease-in-out; }
.service-card :last-child { margin-block-end: 0; }

/* testimonial-section */
.testimonial-section { position: relative; background-color: var(--grey3); color: var(--color-text); }
.testimonial-section .sec-header { max-width: 100%; margin-inline: 0; text-align: left; }
.testimonial-slider { position: relative; }
.testimonial-item { border: solid 5px var(--grey10); padding: 50px; position: relative; }
.testimonial-quote-top, .testimonial-quote-bottom { position: absolute; z-index: 1; background-color: var(--grey3); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.testimonial-quote-top { left: -5px; top: -5px; }
.testimonial-quote-bottom { right: -5px; bottom: -5px; }
.testimonial-quote-top img, .testimonial-quote-bottom img { width: 50px; height: 50px; }
.testimonial-quote-bottom img { transform: rotate(180deg); }
.testimonial-slider.owl-theme .owl-dots { text-align: left; }
.testimonial-slider.owl-theme .owl-dots .owl-dot span { width: 8px; height: 8px; margin: 5px 3px; background-color: var(--blackColor); border-radius: 50%; transition: 0.4s ease-in-out; }
.testimonial-slider.owl-theme .owl-dots .owl-dot.active span { width: 18px; border-radius: 6px; }

/* contact-section */
.contact-section { position: relative; }
.contact-main h2 { font-size: var(--font28); font-weight: 600; }
.contact-form .btn img { transition: 0.4s ease-in-out; transform: rotate(-45deg); }
.contact-form .btn:hover img, .contact-form .btn:focus-visible img { transform: rotate(0); }
.error { color: red; font-size: 14px; }
.success:not(:empty) { color: rgb(4, 139, 4); border: solid 1px rgb(4, 139, 4); border-radius: 6px; padding: 12px; margin-block-start: 16px; font-size: 16px; text-align: center; }

/*  Media Queries */
@media (max-width: 1199px) {
    :root {
        --font40: 36px;
        --font36: 30px;
        --font30: 26px;
        --font28: 24px;
        --font24: 20px;
        --font20: 18px;
        --font18: 16px;
    }
}

@media (max-width: 991px) {
    :root {
        --font40: 32px;
    }
    .site-header { min-height: 66px; }
    .navbar.navbar-light { padding-block: 10px; }
    .site-logo { padding: 0; }
    .navbar-light .navbar-toggler { margin-left: 20px; color: var(--bs-primary); border-color: transparent; font-size: var(--font40); order: 3; padding: 0; height: 26px; width: 32px; }
    .navbar-light .navbar-toggler:hover,.navbar-light .navbar-toggler:focus { color: var(--bs-primary); border-color: transparent; background-color: transparent; box-shadow: none; }
    .navbar-toggler .hamburger-lines { height: 20px; width: 30px; display: flex; flex-direction: column; justify-content: space-between; }
    .navbar-toggler .hamburger-lines .line { display: block; height: 4px; width: 100%; border-radius: 10px; background: var(--grey4); }
    .navbar-toggler .hamburger-lines .line1 { transform-origin: 0% 0%; transition: transform 0.4s ease-in-out; }
    .navbar-toggler .hamburger-lines .line2 { transition: transform 0.2s ease-in-out; }
    .navbar-toggler .hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform 0.4s ease-in-out; }
    .offcanvas-menu { background-color: var(--bs-primary); color: var(--whiteColor); border-left: 0 none; }
    .offcanvas.offcanvas-end { border-left: 0 none; }
    .offcanvas-menu .offcanvas-body { padding: 12px 0; border-top: solid 1px var(--grey5); }
    .offcanvas-header { min-height: 70px; }
    .offcanvas-header .btn-close { margin-left: auto; min-height: 10px; margin-right: 0; opacity: 1; }
    .offcanvas-header .btn-close, .offcanvas-header .btn-close:hover, .offcanvas-header .btn-close:focus { background-color: var(--whiteColor); }
    .navbar-nav li { padding: 0; position: relative; margin-left: 0; }
    .navbar-light .navbar-nav .nav-link { font-size: var(--font16); color: var(--color-text); padding: 12px 20px; }
    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link { color: var(--whiteColor); }

    .hire-me-action { display: none; }
    .site-section { padding-block: 50px; }
    .sec-header { margin-block-end: 32px; } 
    .hero-hand { margin-block-end: 10px; }  
    .zigzag-line { max-width: 80%; } 
    .hero-experience { margin-block-start: 10px; gap: 20px; }
    textarea.form-control { min-height: 90px; }
    .project-card-content { left: 16px; bottom: 16px; }
    .project-card { border-radius: 20px; }
    .form-field { margin-bottom: 12px; }
}

@media (max-width: 767px) {
    .hero-thumb { margin-block-end: 24px; }
    .zigzag-line { max-width: 70%; }
    .about-thumb, .contact-thumb { margin-block-end: 16px; }
    .project-card-content { left: 10px; bottom: 10px; }
    .project-card { border-radius: 16px; }
    .service-card { padding: 20px 16px; }
    .testimonial-thumb, .footer-newsletter { margin-block-start: 20px; } 
}

@media (max-width: 575px) {
    a.disable-link { cursor: pointer; pointer-events: inherit; }
    .project-card { margin-block-end: 16px; }
    .service-card { height: auto; margin-block-end: 16px; }
    .testimonial-item { padding: 35px; border-width: 3px; }
    .testimonial-quote-top, .testimonial-quote-bottom { width: 40px; height: 40px; }
    .footer-follow-me { margin-block-start: 20px; }
    .zigzag-line { max-width: 80%; }
}

@media (max-width: 479px) {
    .hero-experience { flex-direction: column; gap: 16px; }
    .zigzag-line { max-width: 100%; }
}