/* ____________ Start CSS For Home Sections ________*/
.title-lg {
	font-size: clamp(24px, 3vw, 42px);
    font-weight: 400;
}
.sm-title {
    font-size: clamp(18px, 2vw, 30px);
}
.hero-items {
	position: relative;
}
.hero-img-wrap::after {
    position: absolute;
    content: "";
    background: rgb(0 0 0 / 50%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.hero-slider .slick-dots {
    bottom: 25px !important;
}
.hero-slider .slick-dots li button:before {
    opacity: .75;
    color: #fff;
    font-size: 10px;
}
.hero-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}
.hero-slider .slick-dots {
    opacity: 0;
    transition: .5s;
}
.hero-slider:hover .slick-dots {
    opacity: 1;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    grid-gap: 3%;
    align-items: center;
    height: 100%;
    padding: 85px 0;
}
.hero-slider .slick-prev {
    left: 25px;
}
.hero-slider .slick-next {
    right: 25px;
}
.hero-slider .slick-prev, .hero-slider .slick-next {
    z-index: 99;
    width: 30px;
    height: 30px;
    opacity: 0;
    transition: .5s;
}
.hero-slider .slick-prev:before, .hero-slider .slick-next:before {
    font-size: 30px;
}
.hero-slider:hover .slick-prev, .hero-slider:hover .slick-next {
	opacity: 1;
}
.slick-dotted.slick-slider {
    margin-bottom: 0px;
}
.hero-inner-txt * {
	color: #fff;
}
.hero-inner-img {
    position: relative;
    padding-top: 100%;
}
.hero-inner-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    left: 0;
    right: 0;
    top: 0;
}
.hero-inner-txt h3, .hero-inner-txt p {
    max-width: 625px;
    margin: 0 auto;
}
.hero-inner-txt h3, .hero-inner-txt p {
    max-width: 550px;
    margin: 0 auto;
}
.hero-inner-txt h3 {
	padding-bottom: 35px;
}
.hero-items {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}
.hero-items::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 75%);
}
.hero-items>.container {
    position: relative;
    z-index: 99;
}
.hero-items-01 {
	background-image: url("../images/hero-01.jpg");
}
.hero-items-02 {
	background-image: url("../images/hero-02.png");
}
.hero-items-03 {
	background-image: url("../images/hero-03.jpg");
}



.bg-light {
	background-position: #f6f6f6;
}
.about-us {
	padding: 75px 0;
}
.about-wrapper-in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    margin-top: 50px;
    grid-gap: 35px;
}
.about-items {
    border-radius: 7px;
    padding: 30px 20px 20px;
    text-align: center;
    background: #fff;
    box-shadow: 0 5px 25px rgb(0 0 0 / 10%);
    border-top: 3px solid #16f4ff;
    transition: .35s;
}
.about-items:hover {
    box-shadow: 0 5px 25px rgb(0 0 0 / 25%);
    transform: rotate(-1.5deg);
}
.about-items >img {
    max-width: 60px;
    display: block;
    margin: 0 auto 30px;
}
.cl_title {
    color: #16f4ff;
    font-size: clamp(22px, 3vw, 42px);
    font-weight: 400;
}
.about-inner>p {
    line-height: 1.75;
    padding-top: 15px;
}


.services {
    padding: 75px 0;
    background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	background-attachment: fixed;
	background-image: url("../images/service-bg.jpg");
}
.services::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(22 244 255 / 90%);
}
.services .container {
    position: relative;
    z-index: 9;
}
.services-wrapper-in>p, .services-wrapper-in>h4 {
	text-align: center;
}
.services .cl_title {
    color: #333;
}
.services-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    margin-top: 50px;
    grid-gap: 35px;
}
.services-items img {
    max-width: 85px;
    padding-bottom: 25px;
    opacity: .5;
}
.services-items svg {
    width: 85px;
    height: 85px;
    object-fit: cover;
}

.services-items {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    align-items: start;
    grid-gap: 15px;
    padding: 35px 25px;
    box-shadow: 0 5px 25px rgb(0 0 0 / 10%);
    transition: .5s;
}
.services-items:hover {
    box-shadow: 0 5px 35px rgb(0 0 0 / 35%);
}
.services-items>h4 {
    font-size: 21px;
}
.services-items.services-items-01>h4 {
    color: #464644;
}
.services-items.services-items-02>h4 {
    color: #02d0a1;
}
.services-items.services-items-03>h4 {
    color: #f6a622;
}
.services-items.services-items-04>h4 {
    color: #3682ff;
}
.services-items {
    transition: .35s;
}
.services-items-01:hover {
    background: #f6f6f6;
}
.services-items-02:hover {
    background: #afffed;
}
.services-items-03:hover {
    background: #fff0d7;
}
.services-items-04:hover {
    background: #b5ebff;
}


.contact-us {
	padding: 75px 0;
}
.contact-form {
    padding: 10%;
    border-radius: 15px;
    box-shadow: 0px 5px 15px rgb(0 0 0 / 15%);
    background-color: #fff;
    margin-top: 25px;
}
.contact-form input[type="text"], .contact-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #16f4ff;
    border-radius: 5px;
    padding: 12px;
}
.contact-form input[type="text"] {
    margin-bottom: 20px;
}
.contact-form textarea {
    margin-bottom: 20px;
    min-height: 175px;
}
.blue-btn {
    padding: 12px 35px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    background: #16f4ff;
    transition: .35s;
    width: max-content;
}
.blue-btn:hover {
	background: #13dde7;
}
.contact-wrapper .cl_title {
    color: #333;
    font-size: clamp(18px, 2vw, 30px);
}
.contact-txt ul li {
    margin-bottom: 10px;
}
.contact-txt ul li i {
    padding-right: 10px;
}
.contact-txt {
    position: relative;
    padding-right: 200px;
}
.ct_arrow {
    position: absolute;
    max-width: 200px;
    right: 0;
    top: -40%;
    transform: rotate(-15deg);
    opacity: .75;
}
.contact-txt ul {
    margin-top: 35px;
}
.contact-txt p a {
    color: #16f4ff;
}


@media (max-width: 1023px) {
    .about-wrapper-in {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 25px;
    }
    .services-wrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 25px;
    }
}


@media (max-width: 991px) {
    .ct_arrow {
        opacity: 0;
    }
    .contact-txt {
        padding-right: 0px;
    }

}


@media (max-width: 767px) {
	.about-us, .services {
		padding: 50px 0;
	}
	.hero-inner {
	    grid-gap: 50px;
	    grid-template-columns: 1fr;
	    padding: 55px 0;
	}
	.hero-inner-txt h3 {
	    padding-bottom: 15px;
	}
	.about-wrapper-in {
        grid-template-columns: 1fr;
    }
	.services-wrapper {
	    grid-template-columns: 1fr;
	    grid-gap: 25px;
	}
	.services-wrapper-in>p br {
		display: none;
	}
	.services-items {
	    padding: 35px 15px;
	    grid-gap: 10px;
	}
	.contact-form {
	    padding: 35px 15px;
	}
	.contact-form input[type="text"] {
	    margin-bottom: 10px;
	    padding: 7px;
	}
	.contact-wrapper {
	    margin-top: 35px;
	}
	.contact-form {
	    margin-top: 15px;
	}
}