@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* About Page Custom CSS Starts */
/* Hero Section Starts */
.msjk-menu-ul .active-menu-item {
    border-bottom: 2px solid #ffffff;
    padding-bottom: 28px;
}

/* logo css */
.msjk-home-hero {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 28% 100%, 0% 85%);
}

@media (max-width: 576px) {
    .msjk-home-hero {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0% 85%);
    }
}

.msjk-custom-logo {
    width: 100px;
    height: 52px;
}

.msjk-custom-logo a {
    width: 100%;
    height: 100%;
}

.msjk-custom-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
    .msjk-custom-logo {
        height: 72px;
        width: 140px;
    }
}

/* logo css */

.msjk-clip-hero {
    clip-path: polygon(0 0, 100% 0, 100% 72%, 35% 100%, 0% 80%);
}

@media (max-width: 576px) {
    .msjk-clip-hero {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0% 85%);
    }
}

.msjk-footer-clip {
    clip-path: polygon(100% 100%, 0% 100%, 0% 10%, 22% 0%, 100% 25%);
}

@media (max-width: 768px) {
    .msjk-footer-clip {
        clip-path: polygon(100% 100%, 0% 100%, 0% 10%, 22% 0%, 100% 15%);
    }
}

/* Hero Section Ends */
/* About roofers section starts */
.msjk-about-tilt {
    clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
}

@media (max-width: 576px) {
    .msjk-about-tilt {
        clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    }
}

/* About roofers section Ends */

/* Our Story section starts */
.msjk-story-tilt {
    clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0 100%);
    margin-top: -76px;
}

/* Our Story section Ends */

/* About Page Custom CSS Ends */
/* Service Page Custom CSS Ends */


/* Service Page Custom CSS Ends */

/* Buy us coffee form css starts */

.msjk-input-div {}

.msjk-input {
    width: 100%;
    font-size: 16px;
    font-family: "Merriweather Sans", "sans-serif";
    border: 1px solid rgb(42 43 42 / 0.2);
    border-radius: 5px;
    padding: 18px 16px;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.msjk-form-button {
    padding: 16px;
    border: 1px solid #0d3a63;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    width: 100%;
    font-size: 24px;
    border-radius: 5px;
    background-color: #0d3a63;
    font-family: "Sansation", "sans-serif";
    transition-duration: 700ms;
    margin-top: 12px;
}

.msjk-form-button-container .wpcf7-spinner {
    display: none !important;
}

.msjk-form-button:hover {
    color: #0d3a63;
    background-color: #ffffff;
}

.msjk-form-button-container .wpcf7-spinner {
    display: none !important;
}

.msjk-form-contact {
    margin-top: 25px !important;
}

@media (max-width: 992px) {
    .msjk-form-button {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .msjk-input {
        font-size: 14px;
        padding: 16px;

    }

    .msjk-form-button {
        padding: 12px 16px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .msjk-form-button {
        font-size: 14px;
    }
}

/* Buy us coffee form css Ends */
/* consulation form css starts  */
.msjk-radio-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.msjk-radio-custom .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
}

.msjk-radio-custom .wpcf7-list-item-label {
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #1f2937;
}

.msjk-radio-custom .wpcf7-list-item input[type="radio"] {
    border: 1px solid #67676780;
    border-radius: 100%;
    height: 15px;
    width: 15px;
}

@media (min-width: 1024px) {}

@media (min-width: 768px) {
    .msjk-radio-custom .wpcf7-list-item input[type="radio"] {
        height: 24px;
        width: 24px;
    }
}

/* R CSS Starts */
.btn-wrapper {
    position: relative;
    border-radius: 9999px;
    padding: 2px;
    background: transparent;
}

.btn-wrapper a {
    position: relative;
    display: block;
    z-index: 1;
}

/* Rotating conic-gradient that creates the traveling bright spot */
.btn-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: conic-gradient(from var(--angle, 0deg),
            transparent 70%,
            rgba(255, 255, 255, 0.9) 85%,
            white 90%,
            rgba(255, 255, 255, 0.9) 95%,
            transparent 100%);
    animation: spin-border 6s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
    z-index: 0;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin-border {
    to {
        --angle: 360deg;
    }
}



/* custrom css for  comprehensive Roofing Services
 */

.c-services-slider {
    position: relative;
}

/* Card styles */
.c-service-card {
    outline: none !important;
    padding: 0 12px;
}

/* Custom arrows */
.c-slider-prev,
.c-slider-next {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0D3A63;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
    box-shadow: 1px 2px 8px rgba(13, 58, 99, 0.35);
}

.c-slider-prev:hover,
.c-slider-next:hover {
    background-color: #092338;
}

/* Position: prev on left, next on right */
.c-slider-prev {
    left: -24px;
}

.c-slider-next {
    right: -24px;
}

/* Arrow SVG inside nav buttons */
.c-slider-prev svg,
.c-slider-next svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 2.5;
    fill: none;
}

/* Hide slick dots */
.slick-dots {
    display: none !important;
}

/* Equal-height slick track */
.slick-track {
    display: flex !important;
    align-items: stretch;
}

.slick-slide {
    height: inherit !important;
}

.slick-slide>div {
    height: 100%;
}

/* Card inner flex column */
.c-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Book Now button */
.c-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #AEB7C4;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #2A2B2A;
    background: transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    width: fit-content;
}

.c-book-btn:hover {
    background-color: #0D3A63;
    color: #ffffff;
    border-color: #0D3A63;
}

.c-book-btn svg {
    width: 16px;
    height: 16px;
}

.c-book-btn:hover svg path {
    stroke: #ffffff;
}

/* Responsive arrow repositioning on small screens */
@media (max-width: 768px) {
    .c-slider-prev {
        left: 0;
    }

    .c-slider-next {
        right: 0;
    }
}

/* custum css for slick slider of our projects */

.o-projects-slider {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.o-slide-item {
    outline: none !important;
    padding: 0 8px;
}

.o-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* ── Slick overrides ── */
.slick-dots {
    display: none !important;
}

.slick-list {
    overflow: hidden;
}

.o-projects-slider .slick-list {
    margin: 0;
}

@media (max-width: 768px) {
    .o-slide-item {
        padding: 0 6px;
    }

    .o-projects-slider .slick-list {
        margin: 0;
    }
}

/* footer  */
@layer components {
    .bg-image {
        background-image: url('./image/footerimg.png');
        background-size: cover;
        background-position: center;
    }
}



/* faq section */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}


.faq-icon {
    transition: transform 0.3s ease;
}

.faq-icon.rotated {
    transform: rotate(45deg);
}


/*custom css for testimonials  */
.t-slider .slick-slide {
    padding: 0 12px;
}

.t-slider .slick-list {
    margin: 0 -12px;
}

.t-slider .slick-track {
    display: block !important;
}

.t-slider .slick-slide,
.t-slider .slick-slide>div {
    height: auto !important;
}

.t-card {
    min-height: 287px;
    display: flex;
    flex-direction: column;
}

.t-card-footer {
    margin-top: auto;
}

/* R CSS Ends */
.z-100{
	z-index: 100;
}

@media (max-width: 992px) {
	.msjk-custom-hero-div{
		margin-top: -120px !important;
	}
}

@media (max-width: 768px) {
	.msjk-custom-hero-div{
		margin-top: -70px !important;
	}
	
	.msjk-custom-h2{
	font-size: 34px !important;
}
}

@media (max-width: 640px) {
	.msjk-custom-hero-div{
		margin-top: -50px !important;
	}
.msjk-custom-subtle{
	margin-bottom: 20px !important;
	font-size: 16px !important;
}

.msjk-custom-p{
	margin-bottom: 20px !important;
	
}

.msjk-custom-h2{
	line-height: 1.3 !important;
	font-size: 28px !important;
}
}