/* Common styles */

html{
    scroll-behavior: smooth;    
}

.no-scroll{
    overflow: hidden;
}

noscript{
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -5%);
    background-color: red;
    color: white;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    z-index: 50;
}

body{
    margin: 0;
    padding: 0;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden !important;
}

header{
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 99999;
}

header .logo{
    display: flex;
    align-content: center;
    align-items: center;
}

header #company-name{
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: black;
}

header .logo img{
    height: 60px;
    padding: 0 15px;
}

nav ul{
    display: flex;
    animation: animate-menus 1s 1;
}

nav ul li{
    list-style: none;
    padding: 0 20px;
    line-height: 50px;
}

nav ul li a{
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: black;
}

nav ul li hr{
    display: none;
}

nav ul li a:hover{
    opacity: 0.7;
}

#ham{
    display: none;
}

#nav-menu-contact, #more-info-btn, #show-more-btn{
    background-color:#FF7542;
    border-radius: 33px;
    padding: 8px 10px;
    color: white;
    box-shadow: 0 7px 12px rgb(0 0 0 / 8%);
}

.home{
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 100vh;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.home-wrapper{
    background-image: url("../images/main/small-back-right.png");
    background-size: cover;
    background-repeat: no-repeat;  
}

.home .highlight{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 150px 0;
    font-family: 'Poppins', sans-serif;
}


.home .highlight .highlight-title{
    font-weight: bold;
    font-size: 3vw;
    animation: animate-landing-text 1s 1;
    color: #30353d;
}

.home .highlight .highlight-desc{
    font-size: 16px;
    color: #30353d;
    animation: animate-landing-text 1s 1;
}

#more-info-btn{
    background-color:#1174AD;
    text-decoration: none;
    margin: 50px 0;
    width: fit-content;
    width: -moz-fit-content;
	transform: scale(1);
	animation: animate-moreinfo-button 1.5s infinite;
    z-index: 5;
}

#more-info-btn:hover{
    opacity: 0.7;
}

.home .landing-image img{
    max-width: 600px;
    margin: 0 0 150px 0;
    animation: animate-landing-image 1s 1;
}

.wrapper p{
    color: #30353d;
}

.menu{
    min-height: 100vh;
    width: 80%;
    margin: auto;
}

.menu-title{
    padding: 30px;
}

.menu-title p{
    color: #1174AD;
    font-weight: bold;
}

.wrapper h1{
    font-size: 35px;
}

.menu .menu-title hr{
    margin: 0;
    border: none;
    padding: 1px;
    border-bottom: 2px solid #FF7542;
    width: 20%;   
    margin: auto;
}

.about-wrapper, .process-wrapper, .clients-wrapper, .contact-wrapper{
    background: url("../images/main/wide-banner.png");
}

.services-wrapper, .team-wrapper{
    background: url("../images/main/small-back-left.png");
}

.portfolio-wrapper{
    background: url("../images/main/small-back-right.png");
}

.wrapper{
    background-repeat: no-repeat;
    background-size: cover;    
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

/* ABOUT SECTION START */

.about-us{
    display: flex;
    align-content: center;
    align-items: center;
}

.about-us .about-us-image img{
    max-width: 500px;
}

.about .about-us-details{
    margin-left: 5%;
}

.about .about-us-details p, .about .about-us-details h2{
    text-align: left;
    color: #30353d;
}

.status{
    margin-top: 60px;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.1fr 1.1fr 1.1fr;
    text-align: center;
}

.status .status-item i{
    font-size: 50px;
    color: #1174AD;
}

.status .status-item h2, .status .status-item h1{
    margin: 0;
    padding: 0;
}

.status .status-item h2{
    color: #FF7542;
}

/* ABOUT SECTION END */

/* SERVICES SECTION START */

.services-details h2, .services-details p{
    color: #30353d;
    text-align: left;
}

.services-item-image{
    max-width: 500px;
}

.services-item-details{
    display: flex;
    flex-direction: column;
}

.services-item{
    display: flex;
    align-items: center;
}

.services-item-details p{
    text-align: left;
    color: #30353d;
}

.services-item .second-item{
    margin-left: 5%;
}

/* SERVICES SECTION END*/


/* PROCESS SECTION START */

.process-details {
    margin-top: 40px;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.1fr 1.1fr 1.1fr;
}

.process-details .process-item h2, .process-details .process-item p{
    color: #30353d;
    text-align: center;
}

.process-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 15px 0px #dae4ee;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    transition: 0.3s ease;
}

.process-item:hover{
    transform: scale(1.1);
    transition: 0.3s ease;
}

.process-details .process-item h2{
    text-align: center;
}

.process-details .process-item img{
    max-width: 100px;
}

/* PROCESS SECTION END */

/* PORTFOLIO SECTION START*/

/* .home-wrapper, .about-wrapper, .process-wrapper, .clients-wrapper, .contact-wrapper, .services-wrapper, .team-wrapper, .portfolio-wrapper{ */

.portfolio-details{
    margin-top: 40px;
    display: grid;
    gap: 2rem;
    text-align: left;
    grid-template-columns: 1.1fr 1.1fr 1.1fr;
}

.portfolio-item-image{
    border-radius: 5px 5px 0 0;
    text-align: center;
    height: 200px;
    line-height: 250px;
    background:url("../images/portfolio/blur-back.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.portfolio-item-image img{
    max-height: 200px;
    width: 80%;
    transition: 0.3s ease;
    object-position: center 50%;
    object-fit: cover;
}

.portfolio-item-details{
    padding: 20px;
}

.portfolio-item-details h2{
    color: #1174AD;
}

.portfolio-item-details p{
    color: #30353d;
}

.portfolio-item{
    box-shadow: 0px 0px 15px 0px #dae4ee;
    border-radius: 5px;
}

.portfolio-item-image:hover img{
    transform: scale(1.1);
    transition: 0.3s ease;
    border-radius: 5px;
}

.portfolio-links{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.portfolio-links a{
    text-decoration: none;
    padding: 8px;
    border: 2px solid #30353d;
    color: black;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.portfolio-links a i{
    font-size: 20px;
}

.portfolio-links img{
    height: 40px;
}

.portfolio-links a:hover{
    opacity: 0.6;
}

#show-more-btn{
    background-color:#1174AD;
    text-decoration: none;
    width: fit-content;
    width: -moz-fit-content;
}

#show-more-btn:hover{
    opacity: 0.8;
}

/* PORTFOLIO SECTION END*/

/* CLIENTS SECTION START */

.clients-item-details i{
    color: orange;
}

.clients-details {
    margin-top: 50px;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.1fr 1.1fr 1.1fr;
}

.clients-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 15px 0px #dae4ee;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    position: relative;
}

.client-item-image{
    border-radius: 50%;
}

.clients-item-details h2{
    margin: 0;
    padding: 0;
    margin-top: 10px;
}

.client-address{
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.client-stars{
    transition: 0.3s ease;
}

.clients-item:hover .client-stars{
    transform: scale(1.5);
    transition: 0.3s ease;
}

.clients-details .clients-item img{
    max-width: 100px;
}

.quote img{
    width: 60px;
}

.quote{
    position: absolute;
    top: -25px;
    left: 10px;
}

/* CLIENTS SECTION END */

/* TEAM SECTION START */

.team-details {
    margin-top: 50px;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat( auto-fit, minmax(20%, 1.1fr) );
}

.team-item h2, .team-item p{
    margin: 0;
    padding: 0;
}

.team-item p{
    color: #1174AD;
}

.team-item-image{
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.team-social-links{
    display: flex;
    gap: 10px;
    padding: 10px;
    justify-content: center;
}

.team-social-links a{
    text-decoration: none;
}

.team-social-links a:hover{
    opacity: 0.6;
}

.team-social-links a i{
    color: #30353d;
    font-size: 20px;
}

/* TEAM SECTION END */

/* CONTACT SECTION START*/

/* Styles for contact details section begin */

.contact-us{
    color: #30353d;
    display: flex;
    justify-content: space-evenly;
}

.contact-details{
    margin: 0 4% 0 0;
    width: 46%;
    text-align: left;
}

.contact-details-items{
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.contact-details-items i{
    font-size: 30px;
    background-color: #1174AD;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    line-height: 30px;
    padding: 20px;
    margin: 20px 0;
    color: white;
    text-align: center;
}

.contact-details-items > .address, .phone, .email{
    display: flex;
    align-items: center;
    align-content: center;
}

.contact-details-items-content h3, .contact-details-items-content p{
    margin: 0;
    padding: 0;
}

.contact-details-items-content a{
    text-decoration: none;
    color: #1174AD;
}

.contact-details-items-content a:hover{
    opacity: 0.8;
}

.contact-details-items-content{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
}


/* Styles for contact details section end */


/* Styles for contact form start */

.contact-form{
    margin: 0 0 0 4%;
    width: 46%;
}

.contact-form h2{
    text-align: left;
}

#contact-form{
    text-align: left;
    display: flex;
    flex-direction: column;
}

#contact-form input{
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
    padding: 10px;
    border: none;
    outline: 2px solid #1174AD;
    transition: 0.2s;
}

#contact-form textarea{
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    outline: 2px solid #1174AD;
    padding: 10px;
    border: none;
    margin-bottom: 20px;
    transition: 0.2s;
    resize: none;
}

#contact-form input:focus, #contact-form textarea:focus{
    outline: 2px solid #FF7542;
    transition: 0.2s;
}

#contact-form input[type="submit"]{
    outline: none;
    border: 2px solid transparent;
    background-color: #1174AD;
    color: white;
    border-radius: 33px;
    width: fit-content;
    padding: 8px 40px;
    cursor: not-allowed;
    opacity: 0.7;
}

#contact-form input[type="submit"]:focus{
    border: 2px solid #FF7542;
}

#contact-form input[type="submit"]:hover{
    opacity: 0.7;
}

#error{
    color: red;
    font-weight: bold;
}

/* Styles for contact form end */

/* CONTACT SECTION END*/

/* FOOTER SECTION START */

footer{
    padding: 20px;
    background-color: #050F23;
    font-family: 'Poppins', sans-serif;
}

.footer-details{
    padding: 20px;
    width: 80%;
    margin: auto;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.1fr 1.1fr 1.1fr 1.1fr;
}

footer .company-details img{
    width: 120px;
    display: block;
}
.footer-item{
    width: fit-content;
    margin: 30px auto;
}

.footer-item ul{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-item h3{
    color: white;
}

.footer-item ul li{
    list-style: none;
    
}

.footer-item ul li a{
    text-decoration: none;
    color: #767683;
    transition: 0.2s;
}

.footer-item ul li a:hover{
    color: white;
    transition: 0.2s;
}

.footer-item ul li a i{
    margin-right: 8px;
}


footer hr{
    border: none;
    border-top: 1px solid #767683;
    width: 80%;
}

footer .copyright{
    text-align: center;
    color: #767683;
}

/* FOOTER SECTION END */

/* CSS FOR OTHER PAGES START */

.menu-message{
    color: #30353d;
}

/* CSS FOR OTHER PAGES END */

/* Animations */

@keyframes animate-menus {
    0%{
        margin-right: -100px;
        opacity: 0;
    }
}

@keyframes animate-landing-text {
    0%{
        color: white;
        margin-bottom: -40px;
    }
}

@keyframes animate-landing-image {
    0%{
        opacity: 0;
        margin-top: -100px;
    }
}

@keyframes animate-moreinfo-button {
    0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(90, 90, 90, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(10, 10, 10, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

/* Responsive designs */

@media  screen and (max-width:1250px) {
    header{
        flex-direction: column;
    }

    /* For about us section */

    .about-us{
        flex-direction: column;
    }

    .status{
        grid-template-columns: 1.1fr;
    }

    /* For services section */

    .services-item{
        flex-direction: column;
    }

    .services-2{
        flex-direction: column-reverse;
    }

    /* For services-process section */

    .process-details {
        grid-template-columns: 1.1fr; 
    }

    /* For portfolio section */

    .portfolio-details{
        grid-template-columns: 1.1fr;
    }

    /* For clients section */

    .clients-details{
        grid-template-columns: 1.1fr;
    }

    /* For team section */

    .team-details{
        grid-template-columns: 1.1fr;
    }
}

@media  screen and (max-width:1200px) {
    .home{
        text-align: center;
        justify-content: center;
        flex-direction: column-reverse;
    }

    #more-info-btn{
        margin: auto;
        margin-top: 30px;
    }

    .home .landing-image img{
        margin: 0;
        padding: 0;
        width: 60vw;
    }

    .home .highlight .highlight-title{
        font-size: 30px;
    }

    /* For contact section */

    .contact-us{
        flex-direction: column;
    }

    .contact-details, .contact-form{
        margin: 0;
        margin-top: 20px;
        width: 100%;
    }

    /* For footer */

    .footer-details{
        grid-template-columns: 1.1fr 1.1fr;
    }
}

@media  screen and (max-width:700px) {
    noscript{
        width: 80%;
    }
    
    .home .landing-image img{
        width: 400px;
        margin-top: 30px;
    }

    nav{
        visibility: hidden;
        z-index: 100;
        margin: 0;
        padding: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 65%;
        background-color: #1174AD;
        min-height: 100vh;
    }

    nav ul{
        flex-direction: column;
    }

    nav ul li hr{
        display: block;
        border: none;
        border-top: 2px solid white;
        width: 20%;
        margin: 0;
        padding: 0;
        margin: -12px 0 10px 0;
    }

    nav ul li a{
        color: white ;
    }

    #nav-menu-contact{
        background: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    header{
        z-index: 10;
        margin-top: 0;
        position: sticky !important;
        top: 0;
        background: white;
        flex-direction: row;
        justify-content: space-between;
        box-shadow: 0px 0px 7px -6px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 0px 7px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 7px -6px rgba(0,0,0,0.75);
    }

    .home, .menu{
        width: 90%;
    }

    .menu h1{
        font-size: 30px;
    }

    header .logo img{
        width: 40px;
    }

    header #company-name{
        font-size: 20px;
    }

    #ham{
        display: flex;
        font-size: 20px;
        margin-right: 20px;
    }

    .menu .menu-title hr{
        width: 70%;
    }

    .menu-title p{
        padding-top: 20px;
    }

    /* For h2 tags */

    .about-us .about-us-details h2, .services-item h2, .process-item h2, .portfolio-item h2, .clients-item h2, .team-item h2, .contact-us h2{
        font-size: 18px;
    }

    /* For about us section */

    .about-us .about-us-image img{
        width: 400px;
    }

    .about .about-us-details{
        margin-left: 0px;
    }

    /* For services section */

    .services-item-image{
        width: 400px;
    }

    .services-item .second-item{
        margin-left: 0;
    }

    /* For footer */

    .footer-details{
        grid-template-columns: 1.1fr;
    }

    .footer-item{
        margin: 0;
    }

    footer hr{
        width: 100%;
    }
        
}

@media  screen and (max-width:400px) {
    .home .landing-image img{
        width: 98%;
    }

    .menu h1{
        font-size: 25px;
    }

    /* For about us section */

    .about-us .about-us-image img{
        width: 98%;
    }

    /* For services section */

    .services-item-image{
        width: 98%;
    }
}