@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500&family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    list-style:none;
    text-decoration: none;
    border: none;
    outline: none;
    resize: none;
}
:root{
    --color-primary: #ffff;
    --color-bl: rgba(90,155,245,255);
    --color-secondary: #A8F559;
    --color-tertiary: #777;
    --color-text: #111;
    --shadow: 0 2px 40px 8px rgba(15, 15, 15, .15);
    --transition: all .4s ease-in-out;
    --width-lg: 85%;
    --width-sm: 95%;
}

body{
    font-family: 'League Spartan', sans-serif;
    color: var(--color-text);
    line-height: 1.7;
    overflow-x: hidden;
}


img{
    display: block;
    width:100%;
    object-fit:cover;
}
a{
    color:var(--color-text);
}
span{
    font-size: .9rem;
}
h1,h2,h3,h4{
    line-height: 1.2;
}
h1{
    font-size: 2.8rem;
}
h2{
    font-size: 2rem;
}
h3{
    font-size: 1.6rem;
}
h4{
    font-size: 1.3rem;
}
h5{
    font-size: 1rem;
}
.container{
    margin: 0 auto;
    width: var(--width-lg);
}
section{
    padding: 6rem 0 3rem;
}
section h2{
    text-align: center;
    margin-bottom: 2rem;
}
/*about title css*/
.title{
    text-align:center;
    margin-bottom: 4rem;
}
.title h2{
    font-size: 3.5rem;
    font-weight: 400;
    text-transform: capitalize;
    font-family: 'League Spartan', sans-serif;
    color: var(--color-secondary);
    display: inline-block;
    position: relative;
}
.title h2::before{
    position: absolute;
    content:'';
    bottom: -21%;
    left: 0;
    transform: translateY(-50%);
    width: 8rem;
    height: .1rem;
   /* background: var(--color-secondary); */
}



/* NAV BAR */
nav {
    background: var(--color-text);
    color: var(--color-primary) !important;
    position: relative;
}

.container .ig {
    width: 110px;
    height: auto;
    border-radius: 50%;    
}

nav .ig:hover {
    transform: scale(1.1);
}

.logo {
    color: blue;
    padding: 1rem 0;
    flex: 1;
    margin-left: 20px;
}

.logo div:first-child {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1;
}

.logo div:first-child span {
    color: var(--color-secondary);
}

.logo div:last-child {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.23rem;
    color: var(--color-secondary) ;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.navlist {
    display: flex;
    list-style: none;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    max-height: none; /* For larger screens */
}

.navlist li {
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 15px;
    cursor: pointer;
}

.navlist li a {
    color: var(--color-primary);
    font-size:20px;
    font-weight:800;
    padding: 1rem;
    position: relative;
    text-decoration: none;
}

.menu-btn {
    display: none; /* Default hidden for larger screens */
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-primary);
}
.navlist li a:hover{
    background-color: #A8F559;
    padding: 13px;
    border-radius: 5px;
    color:#111;
}
/* Dropdown Menu */
.dropdown {
    display: none; /* Hide by default */
    position: absolute;
    background-color: var(--color-text);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    width: 320px; /* Adjust the width as needed */
}

.dropdown li {
    padding: 10px 15px;
}

.dropdown li a {
    color: var(--color-primary);
}

/* Show dropdown on hover */
.navlist li:hover .dropdown {
    display: block; /* Show on hover */
}

/* Responsive Design */
@media screen and (max-width: 320px) {
    .menu-btn {
        display: block;
    }
    .menu-btn .lnr{
        font-size: 1.5rem;

    }
    .navlist {
        flex-direction: column;
        max-height: 0;
        width: 100%;
        background-color: var(--color-text);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
    }

    .navlist.show {
        max-height: 500px; /* Adjust to fit menu items */
    }

    .navlist li {
        text-align: center;
        padding: 10px 0;
        cursor:pointer;
    }
    .navlist li a:hover{
        background-color: #A8F559;
        padding: 10px;
    }
    .navlist li:hover .dropdown {
        display: block; /* Show on hover */
    }
    
    .dropdown {
            position: relative; /* Adjust positioning for mobile */
        }
}





/*HOME SECTION START*/
.home{
    padding: 0;
}
.home .slide1{
    background: url(images/swiper2.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}
.home .slide2{
    background: url(images/home.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}
.home .swiper-slide{
    position: relative;
}
.home .swiper-slide .para{
    width: 1050px;
}
.home .swiper-slide .content{
    position: absolute;
    transform: translate(20%, 50%);
    width: 650px;
}
.home h1{
    margin-top: -5rem;
    color:#A8F559;
    font-size: 3.5rem;
    text-transform: capitalize;
    font-weight: 800;
}

.home .content p{
    background-color:rgba(0, 123, 255, 0.4);
    font-size: 1.8rem;
    font-weight:800;
    margin: 1rem 0 1rem;
    color:#f6f9f9;
    
}
.home .home-search input{
    height: 4rem;
    width: 25rem;
    border-radius: 3rem;
    padding: 1rem 1.6rem;
    padding-left: 1.9rem;
    font-size: 1rem;
}
.home .home-search .btn{
    padding: 1rem 1.6rem;
    height: 4rem;
    width: 4rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 50% 50% 50%;
    position: relative;
    left: -4rem;
    background: var(--color-secondary);
    color: var(--color-primary);
}
.home-search .lnr{
    font-size: 1rem;
    font-weight: 700;
}
/* Responsive Styles for 320px x 608px */
@media (max-width: 320px) and (max-height: 608px) {
    .home .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home .slide1, .home .slide2 {
        background-position: center center; /* Center the image vertically and horizontally */
        background-size: contain; /* Ensures the image covers the entire container */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        height: 100vh; /* Ensures the container occupies the full viewport height */
        background-color:#3e8ee4/* Add a fallback background color */
    }

    .home .swiper-slide .content {
        position: static;
        transform: none;
        text-align: center;
        max-width:90%;
    }
    .home h1 {
        margin-top: -30px;
        font-size: 2rem;
        line-height: 3rem;
    }

    .home .content p {
        background-color:rgba(0, 123, 255, 0.2); /* Adjust the alpha value (0.5) to set the opacity */
        font-size: 1.3rem;
        line-height: 1.4rem;
        margin: 1rem 0;
    }
    .home .swiper-slide .para{
        margin-top: 19px;
        width: 300px;
    }

    .home .home-search input {
        height: 3rem;
        width: 85%;
        font-size: 0.9rem;
    }

    .home .home-search .btn {
        height: 3rem;
        width: 3rem;
        left: 6.2rem;
        top: -3rem;
    }
}


/*HOME SECTION END*/



/*abt Section Start*/
.abt {
    color: var(--color-text);
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.abt-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    padding: 2rem 1rem;
}

.abt-container .left, .abt-container .right {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.abt-container .left .content {
    max-width: 500px;
    margin: 0 auto;
}

.abt-container .title {
    text-align: left;
    margin-bottom: 1rem;
}

.abt-container .title h2 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 1rem;  
}

.abt-container .content p {
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.abt-container .btn {
    background: var(--color-primary);
    color: var(--color-text);
    text-transform: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-text);
    border-radius: 0.5rem;
    transition: background-color 0.3s, color 0.3s;
}

.abt-container .btn:hover {
    background-color: var(--color-tertiary);
    color: white;
}

.abt-container .right .image {
    display: flex;
    justify-content: center;
    align-items: center;
    width:700px;
    height: 700px;
}

.abt-container .right .image img {
    border-radius: 0.5rem;
    max-width: 100%;
    height: 80%;
    box-shadow: var(--shadow);
}

.abt-container .content .icons-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.abt-container .content .icons {
    text-align: center;
    background-color: blue; /* Background color for address icons */
    padding: 10px;
    border-radius: 5px;
    margin: 0 10px;
    flex: 1;
}

.abt-container .content .icons i {
    color:rgb(241, 120, 79);
    font-size: 24px;
    margin-bottom: 5px;
}
.abt-container .content .icons:hover{  
    background: black;
    cursor: pointer;
} 
.abt-container .content .icons p {
    font-size: 18px;
    color: white;
}
@media (max-width: 320px) and (max-height: 608px) {

    .abt-container .right .image {
        display: flex;
        justify-content: center;
        align-items: center;
        width:380px;
        height: 700px;
    }
    
    .abt-container .right .image img {
        border-radius: 0.5rem;
        max-width: 80%;
        height: 80%;
        box-shadow: var(--shadow);
    }
    
}
/*abt Section End*/




  
/* our services section start*/
.ourservice {
    background-color: rgb(150, 148, 148); /* Ensure the background complements other sections */
    padding: 4rem 0;
    text-align: center;
}
.ourservice h2 {
    font-size: 3.5rem;
    color: var(--color-secondary);
    margin-bottom: 2rem;
    text-transform: capitalize;
    font-family:  'League Spartan', sans-serif;;
    font-weight: 400;
    text-transform: capitalize;
}

.service-item {
    background-color: var(--color-primary);
    border: 1px solid var(--color-tertiary);
    box-shadow: var(--shadow);
    border-radius: 10px;
    overflow: hidden;
    padding: 1rem;
    margin: 1rem;
    transition: var(--transition);
    display: inline-block;
    width: 100%;
    max-width: 300px; /* Adjust based on design preference */
    text-align: left; /* Ensures text is aligned to the left */
}

.service-item img {
    width: 100%;
    height: 300px; /* Adjust height based on your design */
    object-fit: cover;
    border-bottom: 1px solid var(--color-tertiary);
}

.service-item h3 {
    font-size: 1.8rem;
    color: var(--color-text);
    margin: 1rem 0 0.5rem;
    font-family: 'League Spartan', sans-serif; /* Ensure consistency */
}

.service-item p {
    font-size: 1rem;
    font-weight: 600;
    color:#4a4a4a;
    margin-bottom: 0.5rem;
}


.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .services {
        padding: 6rem 0;
    }

    .service-item {
        width: calc(33.333% - 2rem);
        margin: 1rem;
        display: inline-block;
        vertical-align: top; /* Aligns the items properly */
    }
}


.testimonials {
    /* text-align: center; */
    background-color: #e4e1e1;
    margin-left: -28px;
}

.testimonials h2 {
    font-size: 50px;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 20px;
}

.testimonial-list {
    display: flex;
    justify-content: space-between;
    gap: 28px;
}

.testimonial-card {
    perspective: 1000px;
    width: 900px;
}

.testimonial-inner {
    position: relative;
    width: 100%;
    height: 500px;
    /* text-align: center; */
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.testimonial-card:hover .testimonial-inner {
    transform: rotateY(180deg);
}

.testimonial-front, .testimonial-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    box-shadow: 0 4px 8px rgba(193, 23, 122, 0.5);
    border-radius: 40px;
    overflow: hidden;
}

.testimonial-front {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.testimonial-front img {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}

.testimonial-front p {
    font-size: 22px;
    color: var(--color-text);
}

.testimonial-back {
    background-color: var(--color-secondary);
    color: var(--color-text);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.testimonial-back p {
    font-size: 25px;
    margin-bottom: 20px;
}

.testimonial-back span {
    font-weight: bold;
    font-size: 30px;
    color: var(--color-text);
}
@media screen and (max-width: 768px) {
    .testimonial-list {
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
    }
    .testimonial-front p {
        font-size: 25px;
        color: var(--color-text);
        font-weight: 500px;
       
    }
}

/* Contact Section Styling */
.contact {
    padding: 40px; /* Increase padding on top and bottom */
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.contact-text h2 {
    font-size: 36px;
    color: var(--color-text);
    margin-bottom: 30px;
}

.contact-text .list {
    margin-top: 20px;
}

.contact-methods {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
}

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

.contact-item i {
    font-size: 80px;
    color: var(--color-secondary);
    transition: color 0.3s;
}

.contact-item span {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    color: var(--color-text);
}

.contact-item a:hover i {
    color: var(--color-tertiary);
}

.contact-icons {
    margin-top: 40px;
}

.contact-icons a {
    margin: 0 15px;
    color: var(--color-text);
    font-size: 30px;
    transition: color 0.3s;
}

.contact-icons a:hover {
    color: var(--color-secondary);
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .contact {
        padding: 20px; /* Adjust padding for smaller screens */
        margin-left: 0; /* Remove left margin on smaller screens */
    }

    .contact-text h2 {
        font-size: 28px; /* Adjust font size for smaller screens */
    }

    .contact-methods {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
        gap: 20px; /* Reduce gap between items */
    }

    .contact-item {
        width: 100%; /* Full width for contact items on smaller screens */
    }

    .contact-icons {
        margin-top: 30px; /* Adjust margin for icons */
    }
}


/* Resume Section Styling */

.resume-text h2 {
    margin-top: 2rem;
    font-size: 36px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.resume-text p {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--color-text);
}

/* Resume Button Styling */
.resume-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    color: var(--color-text);
    background-color: var(--color-secondary);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.resume-button i {
    margin-right: 10px;
    vertical-align: middle;
}
.resume-button:hover {
    background-color: var(--color-tertiary);
    color: var(--color-primary);
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .resume {
        padding: 40px 20px; /* Adjust padding for smaller screens */
        margin-left: 0; /* Remove left margin on smaller screens */
    }

    .resume-text h2 {
        font-size: 28px; /* Adjust font size for smaller screens */
    }

    .resume-text p {
        font-size: 16px; /* Adjust font size for smaller screens */
    }

    .resume-button {
        font-size: 16px; /* Adjust font size for smaller screens */
        padding: 10px 20px; /* Adjust padding for smaller screens */
        margin-bottom: 2.5rem;
    }
}





/*Footer Section Start*/
footer{
    background: var(--color-secondary);
    box-shadow: var(--shadow);
    padding: 3rem 0;
    margin-top: -10rem;
}
.footer-container{
    display: grid;
    grid-template-columns: repeat(5,0.5fr);
    gap: 1rem;
}
.footer-container .logo div:first-child{
    color: blue;
}
.footer-container .box:first-child p{
    padding: 1rem 0;
}
.footer-container .box p{
    color: var(--color-text);
    font-size: 1rem;
    font-weight:800;
    font-style: bold;
}
.footer-container .logo span {
    color: var(--color-text) !important;
}
.footer-container .box h4{
   margin-bottom: 1.8rem;
}
.footer-container .box ul li{
    margin-bottom: .5rem;

}
.footer-container .box ul li a{
    color: var(--color-text);
    font-size: 1rem;
    font-weight:600;
    font-style: bold;
}
.footer-container .box .social{
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 2rem 0;
}
.footer-container .box .social i{
    height: 2.2rem;
    width: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--color-text);
    color: var(--color-primary);
    cursor: pointer;
}
.footer-container .box .social i:hover{
    background: var(--color-primary);
    color: var(--color-secondary);
    box-shadow: var(--shadow);
  
}

/* Responsive Design for 320x608 */
@media screen and (max-width: 320px) {
    .footer {
        padding: 0.5rem; /* Reduce padding for small screens */
        text-align: center;
    }

    .footer-container {
        display: flex;
        flex-direction: column; /* Stack the boxes vertically */
        gap: 0.2rem; /* Add spacing between boxes */
    }

    .footer .box {
        width: 100%; /* Ensure each box takes the full width */
    }

    .footer .logo div {
        font-size: 1rem;
    }

    .footer .logo span {
        font-size: 0.9rem;
        color: var(--color-secondary);
    }

    .footer .logo p {
        font-size: 0.8rem;
    }

    .footer .box h4 {
        font-size: 1rem;
        margin-bottom: 0.01rem;
    }

    .footer .box p {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    .footer .box ul {
        list-style: none;
        padding: 0;
    }

    .footer .box ul li {
        margin: 0.5rem 0;
    }

    .footer .box ul li a {
        font-size: 0.9rem;
        text-decoration: none;
        color: var(--color-primary);
    }

    .social {
        display: flex;
        justify-content: center;
        gap: 1rem; /* Add space between icons */
    }

    .social i {
        font-size: 1.2rem;
        color: var(--color-secondary);
    }
}

/*Footer end*/    
/*Footer end*/