/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 24 2025 | 11:47:10 */
/* General Styles */
.serviceslider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

span.cost {
    color: #303030;
    font-family: "Schibsted Grotesk";
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 39px;
}

/* Slide Styles */
.slide {
    display: none;
    padding: 0;
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 8px;
    font-family: "Schibsted Grotesk";
    overflow: hidden;
}

.active {
    display: flex;
}

.Estimatedwraper {
    background: #fff;
    min-height: 368px;
    padding: 35px;
    border-radius: 25px;
    color: #303030;
    position: relative;
    margin: 3% 0 0;
}

.slidewraper {
    width: 65%;
    background: #fff;
    min-height: 400px;
    display: flex;
    align-items: center;
    background: url(/wp-content/uploads/2025/03/cut-shape-bg.png) no-repeat top left;
    background-size: auto;
}

/* Info Box */
.info-box {
    width: 100%;
    padding: 6%;
    animation: pageFlip 1s ease-in-out;
}

.info-box-title {
    color: #F1801F !important;
    font-weight: 700 !important;
    font-size: 55px;
    margin: 25px 0;
}

.info-box p {
    font-size: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Estimated Cost Box */
.xEstimatedCost-box {
    width: 35%;
    padding: 30px;
    background: #485E88;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.xEstimatedCost-container {
    animation: fadeIn 1.5s ease-in-out forwards;
}

.costtitle {
    color: #303030;
    font-size: 21px;
    font-weight: 600;
    font-family: "Schibsted Grotesk";
}

.costtitle span {
    font-size: 40px;
    font-weight: 400;
    width: 100%;
    display: block;
}

.costtext {
    position: absolute;
    bottom: 49px;
    width: 81%;
}

.costtext span {
    font-size: 26px;
    font-weight: 600;
    padding-bottom: 18px;
    display: block;
}

/* Navigation */
.navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0;
}

.navigation button {
    background: #FF7E10;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    color: #161617;
    border: none;
    padding: 10px;
    cursor: pointer;
    padding-top: 16px;
}

.navigation button:hover {
    background: #FFE0C5;
}

.navigation button.slick-prev.slick-arrow {
    background: linear-gradient(0deg, #FFE0C5 0%, #FFE0C5 100%);
    box-shadow: 4px 8px 24px rgba(131, 131, 131, 0.25);
}

/* Pagination */
.countandarrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-bottom: 20px;
}

.serviceslider-container .pagination {
    display: flex !important;
    align-items: center;
}

span.slidecount {
    color: #161617;
    font-family: 'Schibsted Grotesk';
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
}

.dot {
    width: 15px;
    height: 8px;
    margin: 5px;
    border-radius: 20px;
    background: gray;
    border: none;
    cursor: pointer;
}

.active-dot {
    background: black;
    width: 37px;
}

/* Animations */
@keyframes pageFlip {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}

@keyframes slideDown {
    0% { transform: translateY(-50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .info-box p {
        font-size: 18px !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .info-box-title { font-size: 20px; line-height: 27px; }
    .costtitle span, .costtext span { font-size: 20px; font-weight: 700; }
    .weekssection { font-size: 16px; font-weight: 700; }
    .Estimatedwraper { margin: 0; width: 100%; }
    .duration_text { float: left; margin-top: 10px; }
    .titlecontner { display: flex; gap: 15px; align-items: center; }
}

@media (max-width: 844px) {
    .costtext { position: relative !important; bottom: auto !important; width: 100%; padding-top: 5px !important; }
    .Estimatedwraper { min-height: 100% !important; }
    .info-box-title { font-size: 23px !important; line-height: normal !important; }
    .costtitle span { font-size: 25px !important; }
}

@media (max-width: 768px) {
.info-box p {
        font-size: 18px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 3px;
    }
	.info-box {
    padding-bottom: 0px !important;
}
span.cost {
    display: none;
}	
.serviceslider-container .slide {
    min-height: auto;
    display: flex;
    flex-direction: column;
}
    .posticon img {
        width: 77px ! IMPORTANT;
    }
  .slidewraper {
        width: 100%;
        min-height: auto;
    }
    .xEstimatedCost-box {
        width: 100% !important;
        display: block;
        padding: 22px;
    }
.info-box-title {
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 27px; /* 27px */
}
.costtitle span {
    font-size: 20px;
    font-weight: 700;
 
}
.weekssection {
    font-weight: 700;
    font-size: 16px;
}
    .costtext span {
        font-size: 16px;
        font-weight: 700;
        padding-bottom: 10px;
    }
.Estimatedwraper {
    margin: 0%;
    margin-bottom: 0px;
    width: 100%;
}
	.duration_text {
    float: left;
    margin-top: 10px;
}
.navigation {
    margin-top: 0px;
 
}
.titlecontner {
    display: flex;
    gap: 15px;
    align-items: center;
}
}

@media (max-width: 844px) {
    .costtext {
        position: relative !important;
        bottom: auto !important;
        width: 100%;
        padding-top: 5px !important;
        /* float: left; */
        overflow: hidden !important;
        height: 100% !important;
    }
.Estimatedwraper {
    min-height: 100% !important;

}
    .posticon img {
        width: 150px;
    }	
    .info-box-title {
        font-size: 23px !important;
        line-height: normal !important;
    }
.costtitle span {
    font-size: 25px !important;

}

	}
