/*
Table of content

1. Default css
2. Preloader css
3. Navbar css
4. Banner area css
5. About area css
6. Services area css
7. Portfolio starts css
8. Testimonial area css
9. Invitation area css
10. Contact area css
11. Footer area css

*/

/*--- 1. Default CSS Starts ---*/

body {
    width: 100%;
    height: 100%;
    line-height: 24px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
}

html {
    width: 100%;
    height: 100%;
}

.no-padding {
    padding: 0;
}

a,
a:focus,
a:active,
a:link,
img {
    outline: none;
}

a {
    cursor: pointer;
    text-decoration: none;
    color: #323232;
    transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
}

a:hover {
    color: #FF7E60;
    text-decoration: none;
    transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
}

a:focus {
    outline: none;
    outline-offset: 0;
}

a:link,
a:visited {
    text-decoration: none;
}

p {
    line-height: 26px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

img {
    height: auto;
    max-width: 100%;
    border: none;
    outline: none;
    transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}

ul,
li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333333;
    text-transform: uppercase;
}

.section-padding {
    padding: 90px 0;
}

.bg-overlay {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

.bg-overlay.black {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
}

.section-header {
    margin-bottom: 100px;
    text-align: center;
}

.section-header h2 {
    font-size: 27px;
    line-height: 37px;
    margin-bottom: 20px;
    padding-top: 10px;
    font-weight: 600;
    color: #333333;
}

.section-header h2::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 80px;
    left: 50%;
    top: 60px;
    text-align: center;
    z-index: -1;
    background: #FF0000;
    margin-left: -40px;
}

.section-header h2::after {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 50%;
    top: 53px;
    text-align: center;
    z-index: -1;
    background: #FF0000;
    margin-left: -7px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*--- 1. Default CSS Ends ---*/

/*-------------- 2. Preloader css starts ---------------*/

.loader_bg {
    position: fixed;
    z-index: 9999999;
    background: #fff;
    width: 100%;
    height: 100%;
}

.loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before, .loader:after {
    content: '';
    border: 1em solid #FF0000;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
}

.loader:before {
    animation-delay: .5s;
}

@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0; }
    50% {
        opacity: 1; }
    100% {
        transform: scale(1);
        opacity: 0; }
}

/*---------- preloader css ends -------------*/

/*--- 3. Navbar css starts ---*/

.navbar-custom {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background: #fff;
    text-transform: uppercase;
}

.navbar-custom .navbar-brand {
    font-weight: 700;
    font-size: 35px;
}
.navbar-custom .navbar-brand span{
    color: #FF0000;
}

.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
    font-size: 13px;
    letter-spacing: 3px;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
    outline: 0;
    color: rgba(255, 255, 255, .8);
    background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
}

.navbar-custom .nav li.active {
    outline: 0;
}

@media(min-width:768px) {
    .navbar-custom {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
        transition: background .5s ease-in-out, padding .5s ease-in-out;
    }
    .navbar-custom.top-nav-collapse {
        -webkit-box-shadow: 0px 0px 2px #777;
        box-shadow: 0px 0px 2px #777;
        background-color: rgba(0, 0, 0, 0.97);
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    }
    .navbar-custom.top-nav-collapse .nav li a {
        color: #fff;
    }
    .navbar-custom.top-nav-collapse .nav li.active a {
        background-color: transparent;
        color: #FF0000 !important;
    }
    .navbar-custom.top-nav-collapse .navbar-brand {
        color: #fff;
    }
}

/*--- 3. Navbar css ends ---*/

/*--- 4. Banner area css starts ---*/

.banner-area {
    height: 100%;
    background: #222 url("../images/home/bg-home.png") no-repeat fixed 100% 100% / cover;
    padding: 0;
    position: relative;
    max-height: 600px;
    overflow: hidden;
}

.welcome-text {
    text-align: center;
    color: #fff;
    padding-top: 250px;
}

.welcome-text h1 {
    font-size: 40px;
    color: #fff;
    line-height: 50px;
    margin: 30px 0px;
}

.welcome-text .name-area {
    letter-spacing: 5px;
    margin-bottom: 20px;
    font-size: 26px;
    text-transform: uppercase;
    line-height: 36px;
    font-weight: 400;
}

.welcome-text a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    background: #FF0000;
    margin-top: 20px;
    /width: 160px;
    border-radius: 30px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px;

}

/*--- 4. Banner area css ends ---*/

/*--- 5. About area css starts ---*/

.line {
    height: 2px;
    background: #FF0000;
    width: 200px;
}

.about-left h2 {
    font-size: 27px;
    line-height: 37px;
    margin-bottom: 20px;
    padding-top: 10px;
    font-weight: 600;
    color: #333333;
}

.about-left h4 {
    text-transform: capitalize;
    font-weight: 400;
    font-size: 22px;
    line-height: 34px;
    margin: 20px 0 30px;
    /width: 80%;
}
.about-left a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    background: #FF0000;
    margin-top: 20px;
    /width: 160px;
    border-radius: 30px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px;

}

/*--- 5. About area ends ---*/

/*--- 6. Services area css starts ---*/
.single-service{
    margin-bottom: 30px;
}

.single-service i {
    font-size: 50px;
    text-align: center;
    height: 80px;
    padding-top: 10px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.single-service h2 {
    margin: 20px 0;
    font-size: 18px;
    font-weight: 600;
}

.single-service:hover i {
    color: #FF0000;
    padding: 0;
}
.single-service:hover h2 {
    color: #FF0000;
}

/*--- 6. services area ends ---*/

/*--- 7. Portfolio starts css starts---*/

.gallery-items {
    position: relative;
}

.gallery-items .img {
    display: block;
    position: relative;
}

.gallery-items .img:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(102, 218, 255, 0.7);
    color: #fff;
    opacity: 0;
    -webkit-transition: .7s;
    -moz-transition: .7s ;
    -ms-transition: .7s ;
    -o-transition: .7s ;
    transition: .7s ;

}

.gallery-items .img img {
    width: 100%;
}

.gallery-items:hover .img::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    opacity: 1;
}

.gallery-items:hover .gallery-text {
    opacity: 1;
    -webkit-transition: .9s;
    -moz-transition: .9s ;
    -ms-transition: .9s ;
    -o-transition: .9s ;
    transition: .9s ;
}

.gallery-text {
    opacity: 0;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 80%;
    text-align: center;
}

.gallery-text i {
    font-size: 2em;
    cursor: pointer;
}

.gallery-text h3 {
    text-transform: uppercase;
    position: relative;
    margin-bottom: 5px;
    padding-top: 15px;
    padding-bottom: 0;
    font-size: 17px;
    letter-spacing: 2px;
}

.gallery-text h3:after {
    height: 3px;
}

.gallery-text h2 {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 400;
}

.portfolio-mini-desc p {
    margin: 0;
    text-transform: capitalize;
    font-size: 14px;
    letter-spacing: .05em;
    font-weight: 300;
}

/*---portfolio ends---*/

/*---8. Testimonial area css starts---*/


.client-img {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
}

#testimonial-carousel .item {
    text-align: center;
    color: #fff;
}

#testimonial-carousel .item h5{
    color: #000000;
    margin-top: 20px;
}

#testimonial-carousel .item p {
    width: 70%;
    margin: 20px auto;
    color: #333333;
}

#testimonial-carousel .item i {
    font-size: 45px;
    text-align: center;
    line-height: 45px;
    width: 100%;
    margin: 0px auto 30px;
    color: #000;
}

#testimonial-carousel .carousel-indicators {
    bottom: -45px;
}

#testimonial-carousel .carousel-indicators li {
    margin: 5px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.4s;
    border-color: #000000;
}

#testimonial-carousel .carousel-indicators .active {
    opacity: 1;
    background: #000000;
}

/*---8. Testimonial area css ends---*/

/*--- 9. Invitation area css starts ---*/

.invitation-area{
    background: #333333;
    color: #ffffff;
}

.single-invite h2 {
    font-size: 27px;
    line-height: 37px;
    margin-bottom: 20px;
    padding-top: 10px;
    font-weight: 600;
    color: #ffffff;
}
.single-invite p {
    width: 70%;
    margin: auto;
    color: #ffffff;
}
.single-invite a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    background: #FF0000;
    margin-top: 20px;
    border-radius: 30px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px;
}

/*--- invitation area ends ---*/

/*-------------10. Contact area css starts -------------*/


.contact-area .form-control{
    border: none;
    border-bottom: 2px solid #a2a2a2;
    box-shadow: none;
    padding: 6px 0;
    border-radius: 0;
    margin-bottom: 30px;
}

.contact-area textarea.form-control{
    border:2px solid #a2a2a2;
    padding: 6px;
    height: 250px;
    margin-bottom: 30px;
}

.btn.btn-send {
    background: #FF0000;
    color: #ffffff;
    border-radius: 25px;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 600;
}

/*------------- Contact area ends -------------*/

/*--------------11. Footer area css starts -------------*/


.footer-area {
    background: #232323;
    padding: 30px 0;
}
.footer-area p{
    color: #ffffff;
}
.footer-area p a{
    color: #FF0000;
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
	line-height: 1.5;
	font-family: 'Poppins', sans-serif;
}
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
.container{
	max-width: 1170px;
	margin:auto;
}
.row{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
}
.footer{
	background-color: #24262b;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
	font-size: 18px;
	color: #ffffff;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #e91e63;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	color: #bbbbbb;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 8px;
}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #ffffff;
}

.footer-col .office-address {
    color: #bbbbbb; 
}

.text-center {
    text-align: center;
}

.footer {
    padding-bottom: 60px; 
}

.footer .row:last-child {
    margin-top: 40px; 
}

.footer-copyright {
    color: #ffffff; 
}


.form-group label {
    font-weight: 600;
    color: #495057;
}

.form-control {
    border-radius: 0;
    border-color: #dc3545; /* Red color */
    box-shadow: none;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #ff4d4d; /* Brighter red on focus */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Red shadow */
}

.btn-primary {
    background-color: #dc3545; /* Red color */
    border-color: #dc3545; /* Red color */
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 18px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #b02a37; /* Darker red on hover */
    border-color: #8c1c28; /* Even darker red */
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
    border-radius: 50px;
    padding: 20px;
}


/* Modal Title */
#successModalLabel {
    color: #dc3545; /* Red color */
}

/* Modal Body Text */
.modal-body {
    color: #dc3545; /* Red color */
}

/* Modal Close Button */
.modal-footer .btn-secondary {
    color: #dc3545; /* Red color */
    border-color: #dc3545; /* Red border color */
}

.modal-footer .btn-secondary:hover {
    background-color: #f8d7da; /* Light red background on hover */
    border-color: #dc3545; /* Red border color on hover */
}


/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}


/*--------------- Footer area ends -------------*/



/* Our Partner */

.customer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px 0;
}

.customer-logos .slide {
    width: auto;
    padding: 10px;
}

.customer-logos img {
    max-width: 100px;
    transition: transform 0.3s ease;
}

.customer-logos img:hover {
    transform: scale(1.1);
}