@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root
{
    --primary-text-color: #183b56;
    --secondary-text-color: #577592;
    --accent-color:  #27ae60;
    --accent-color-dark: #09710b;
    --padding-inline-section: 20px;
}

body
{
    font-family: 'Poppins','sans-serif';
    color: var(--primary-text-color);
}

h1 
{
    font-size: 3rem;
}

h2
{
    font-size: 2rem;
}
h3
{
    font-size: 1.5rem;
}
p
{
    font-family: 'Roboto','sans-sarif';
    font-size: 1.2rem;
    color: var(--secondary-text-color);
    line-height: 1.8rem;
}
a
{
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

/*Utility-class*/
.small-bold-text
{
    font-size: 1rem;
    font-weight: 700;
}
.container
{
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--padding-inline-section);
    overflow: hidden;
}
ul
{
    list-style: none;
}
.flex
{
    display: flex;
    align-items: center;
}
.hover-link
{
    color: var(--primary-text-color);
    transition: 0.2s ease-out;
}
.hover-link:hover
{
    color: var(--accent-color);
}
.primary-button
{
    background-color: var(--accent-color);
    border-radius: 4px;
    font-weight: 700;
    color: white !important;
    padding: 7px 12px;
    box-shadow: 0 0 0 1px var(--secondary-text-color);
    transition: 0.2 ease-out;
}
.primary-button:hover
{
    background-color: var(--accent-color-dark);
}
.tag
{
    margin-top: 40px;
    margin-bottom: 10px;
    text-align: center;
}
span
{
    color: var(--accent-color);
    font-weight: 500;
}
.icon-long
{
    font-size: 33px;
}
.ham-icon
{
    font-size: 25px;
    padding-block: 5px;
}

/*top-Banner*/
.top-banner
{
    background-image: url(https://usability-hub-clone.vercel.app/assets/asset%2030.png);
    background-size: 300px;
    background-color: #38A3A5;
    
}
.banner-text
{
    color: white;
    padding: 15px 0px;
}
.banner-text h1 
{
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
}

/*Nav-bar*/
.company-pro
{
    padding-left: 10px;
}
.main-nav
{
    margin-top: 15px;
    justify-content: space-between;
    position: relative;
}
.nav-link
{
    flex-basis: 730px;
}
.nav-links ul
{
    justify-content: end;
    gap: 40px;
}
.nav-toggle
{
    display: none;
}

/*Hero-section*/
header 
{
    padding: 30px var(--padding-inline-section) 0;
}
.back-video video
{
    border-radius: 100px;
    width: 600px;
}
.hero-section
{
    justify-content: center;
    gap: 50px;
}
.hero-info 
{
    max-width: 40vw;
}
.hero-button
{
    text-align: center;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    margin-top: 20px;
    height: 40px;
    width: 29%;
}

/*About us*/
.arrow 
{
    margin-top: 3px;
}
/*Services*/
.service
{
    margin-top: 20px;
}
.service-img img
{
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    filter: blur(0px) brightness(60%) contrast(100%) grayscale(0%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);
}
.service-img 
{
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.service-card
{
    width: 30%;
    height: 180px;
    box-shadow: 0 0 10px #888;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 0.1s ease-in;

}
.service-card:hover
{
    transform: scale(0.95);
}
.text-img
{
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 20px;
    color: white;
}

/*Vision*/
.vision
{
    margin-top: 20px;
    padding-bottom: 5px;
    padding-inline: 10px;
    padding-top: 5px;
}
.vision-photo
{
    padding-left: 10px;
    margin-top: 10px;
}
.vision-text
{
    margin-top: 10px;
    padding-inline: 5px;
}
.vision-photo img
{
    box-shadow:  0 0 5px #888;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
}
.vision-tagline
{
    flex-wrap: nowrap;
}
.head
{
    font-weight: 500;
    padding-left: 30px;
}
.vision-tagline
{
    margin-top: 20px;
    justify-content: center;
}
/*Recent-projects*/
.recent
{
    margin-top: 20px;
}
.recent-img img
{
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    filter: blur(0px) brightness(60%) contrast(100%) grayscale(0%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);
}
.recent-img 
{
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.recent-card
{
    width: 30%;
    height: 170px;
    box-shadow: 0 0 10px #888;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 0.1s ease-in;

}
.recent-card:hover
{
    transform: scale(0.95);
}
.text-img
{
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 20px;
    color: white;
}


/*Companies*/
.company
{
    margin-top: 10px;
    gap: 10px;
    justify-content: center;
    overflow: hidden;
}
.company-logo img
{
    width: 120px;
    animation-name: moving;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate-reverse;
}
@keyframes moving
{
    from{
        margin-left: 700%;
    }
    to{
        margin-left: -900%;
    }
}

/*Client Testimonials*/
.client-testimonials
{
    margin-top: 20px;
    justify-content: space-evenly;
    gap: 15px;
}
.client
{
    min-height: 315px;
    min-width: 280px;
    background-color: black;
    box-shadow:  0 0 10px #888;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    padding-top: 20px;
    text-align: center;
    overflow: hidden;
    animation-name: running;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate-reverse;
}
@keyframes running
{
    from{
        margin-left: 105%;
    }
    to{
        margin-left: -0%;
    }
}
.cli-icon
{
    font-size: 30px;
}
.client p 
{
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 0.74rem;
}

/*contact-section*/
.cta 
{
    margin-top: 20px;
    background-color: #1F5357;
    height: 500px;
}
.contact
{
    text-align: center;
    align-items: start;
    justify-content: space-between;
}
.mail 
{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
input 
{
    background-color: white;
    width: 50%;
    height: 40px;
    padding-top: 5px;
    padding-left: 10px;
    font-weight: 600;
    margin-block: 10px;
    border-radius: 6px;
    color: var(--primary-text-color);
}
textarea
{
    background-color: white;
    padding-top: 10px;
    padding-left: 10px;
    width: 60%;
    font-weight: 900;
    color: var(--primary-text-color);
    margin-top: 15px;
    border-radius: 6px;
}
input:focus-within
{
    outline: none;
    border-color: #24c662;
    border-width: 3px ;
}
button 
{
    margin-top: 10px;
    cursor: pointer;
}

.our-loc
{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.our-loc iframe 
{
    margin-top: 10px;
    border-radius: 8px;
}
.phone-info
{
    padding-top: 20px;
}
.phone-info p 
{
    color: white;
    font-weight: 600;
}
.call 
{
    padding-top: 10px;
    color: white;
}
.call-icon
{
    color: white;
    font-size: 20px;
}

.mailto 
{
    padding-top: 10px;
    text-decoration: underline;
    color: white;
}

/*Footer*/

footer
{
    padding-block: 80px ;
    background-color: #ebf2fa;
}
.footer
{
    justify-content: space-around;
}
.footer-link
{
    flex-direction: column;
    gap: 20px;
}
.footer-link-sec
{
    flex-direction: column;
    gap: 20px;
}

/*Subfooter*/
.subfooter-main
{
    background-color: #b9cde4;
    padding: var(--padding-inline-section);
}
.subfooter
{
    justify-content: center;
    gap: 20px;
}