@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'inter',sans-serif;
    text-decoration: none;
}

body{
    height: 100vh;
    text-align: center;
    background-color: #ffffff;
    /* padding: 2rem; */
}

/* head portion */
.header-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
    animation: sidefromtop 1.5s ease forwards;
    opacity: 0;
}

@keyframes sidefromtop{
    0%{
        opacity: 0;
        transform:translatey(-100%)
    }
    100%{
        opacity: 1;
        transform: translatey(0);
    }
}

.hlogo{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
}

#hlogo-img{
    font-weight:bold;
    height: 1.7rem;
    width: 1.7rem;
    border-radius: 45%;
}

#hlogo-name{
    font-weight:bold;
    color: rgb(48, 47, 46);
    font-size: 1.25rem;
}

.hnav{
    display: none;
    gap: 1.5rem;
}

@media screen and (min-width:751px) {
    .hnav{
        display: flex;
    }
}

#navitems{
    font-weight:600;
    color: #718096;
    font-size: 1rem;  
    transform: color 0.1s;
}

#navitems:hover{
    color: #2563eb;
}

.hbutton{
    border: none;
    display: none;
    border-radius: 0.375rem;
    background-color: #6366f1;
    padding: 0.5rem 0.75rem;
    transform: all 0.1s;
}

@media screen and (min-width:751px) {
    .hbutton{
        display: block;
    }
}

.hbutton:hover{
    background-color: #5254f8;
}

#buttonitems{
    color: #ffffff;
    font-weight: 500;
    font-size: 1rem;
}

#menu-bar{
    display:none;
    height: 1.2rem;
    width: 1.4rem;
    border: none;
}

#menu-bar-image{
    display:none;
    height: 1.2rem;
    width: 1.4rem;
    border: none;
}

@media screen and (max-width:750px) {
    #menu-bar{
        display:block;
    }
    #menu-bar-image{
        display: block;
    }
}

/* middle portion */
.hero{
   display: flex;
   /* align-items: center; */
   justify-content: center;
}

.hero-body{
    display: flex;
    flex-direction: row;
    max-width: 1000px;
    margin: 4rem;
    padding: 1rem;
    gap: 4.1rem;
}

@media screen and (max-width:750px) {
   .hero-body{
    flex-direction: column;
    justify-content: center;
   }
}

@media screen and (max-width:350px) {
    .hero-body{
     justify-content: center;
    }
 }

.leftbody{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: start; */
    animation: sidefromleft 1.5s ease forwards;
    opacity: 0;
    /* transform: translate(-600px); */
}

#leftbody-p1{
    margin: 1.25rem 0;
    font-weight: 600;
    font-size: 0.7rem;
    color: #484ac4;
    text-align: start;
}

#leftbody-h{
    font-size: 2.69rem;
    font-weight: 799;
    text-align: start;
}

#leftbody-p2{
    text-align: start;
    font-size: 0.88rem;
    font-weight: 600;
    margin:2.5rem 1.5rem 2.5rem 0;
    color: #718096da;
}

.leftbuttondiv{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

#leftbody-b1{
    color: #ffffff;
    font-size: 0.7rem;
    border-radius: 0.375rem;
    background-color: #6366f1;
    padding: 0.5rem 1.2rem;
}

#leftbody-b1:hover{
    background-color: #383bf5;
}

#leftbody-b2{
    color: #ffffff;
    font-size: 0.7rem;
    border-radius: 0.375rem;
    background-color:#535962;
    padding: 0.5rem 1.2rem;
}

#leftbody-b2:hover{
    background-color: #323538;
}

.rightbody{
    display: flex;
    justify-content: center;
    align-items: center;
    animation: sidefromright 1.5s ease forwards;
    opacity: 0;
}

#rightbody-img{
    width:24rem;
    height:24rem;
    border-radius: 1rem;
}

#rightbody-img:hover{
    filter: opacity(85%);
    transition-duration: 0.5s;
}

.nothing{
    display: flex;
    flex-direction: column;
    margin:auto 0;
}

.nothing-text{
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1.6rem;

}

.company-section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 1.5rem;
    margin: 0 auto 3rem auto;
    border-radius: 0.4rem;
    background-color: #a9aaab6b;
    gap: 3rem;
}

@media screen and (max-width:750px) {
    .nothing{
        width: 26rem;
        margin: 0 auto;
    }
    .company-section{
        display: flex;
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
 }

#company-section-img{
    width: 1.6rem;
    filter: grayscale(100%);
}

#company-section-para{
    display: flex;
    margin: auto 0.5rem;
    font-weight: 600;
    color: #566173;
}

#company-section-para:hover{
    color: #20242a;
}

.company-box{
    display: flex;
    flex-direction: row;
}

.card-page{
    background-color: rgba(140, 138, 135, 0.253);
    margin: 0;
}

.card-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem 1rem; 
}

.card-section-div{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

@media  screen and (max-width:450px) {
    .card-section-div{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .card-page{
        background-color: rgba(140, 138, 135, 0.253);
        margin: 0;
    }
}

.card{
    background-color: antiquewhite;
    max-width:17rem ;
    padding: 1rem 1.7rem;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 1px rgb(130, 128, 128);
}

.card-section-head-para{
    max-width: 567px;
}

#card-heading{
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
    text-align: center;
}

#card-para{
    font-weight: 550;
    font-size: 0.6rem;
    color: #ffffff;
    padding: 0.5rem;
}

#card-img{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

#card1{
    background-color: rgb(81, 137, 227);
    animation: sidefromleft 1.5s ease forwards;
    opacity: 0;
}

#card1:hover{
    background-color: rgb(44, 121, 246);
}

#card2{
    background-color: rgb(235, 85, 123);
    animation: sidefromright 1.5s ease forwards;
    opacity: 0;
}

#card2:hover{
    background-color: rgb(239, 35, 86);
}

#card3{
    background-color: rgb(255, 181, 96);
    animation: sidefromleft 1.5s ease forwards;
    opacity: 0;
}

#card3:hover{
    background-color: rgb(250, 151, 38);
}

#card4{
    background-color: rgb(79, 188, 198);
    animation: sidefromright 1.5s ease forwards;
    opacity: 0;
}

#card4:hover{
    background-color: rgb(57, 222, 237);
}

#card5{
    background-color: rgb(70, 184, 85);
    animation: sidefromleft 1.5s ease forwards;
    opacity: 0;
}

#card5:hover{
    background-color: rgb(46, 230, 71);
}

#card6{
    background-color: rgb(150, 101, 205);
    animation: sidefromright 1.5s ease forwards;
    opacity: 0;
}

#card6:hover{
    background-color: rgb(127, 61, 204);
}

@keyframes sidefromleft{
    0%{
        opacity: 0;
        transform:translateX(-100%)
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sidefromright{
    0%{
        opacity: 0;
        transform:translateX(100%)
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.about-us-page{
    display: flex;
    justify-content: center;
    padding: 1rem;
}

#about-us-section-heading{
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0.6rem;
}

.about-us-section-div{
    display: flex;
}

.about-us-person{
    max-width: 15.5rem;
    border: 1.8px solid rgb(210, 207, 207);
    border-radius: 0.3rem;
    margin: 0 0.67rem;
}

#about_us_person_1:hover{
    border: 1.8px solid rgb(124, 121, 121);
    box-shadow: 1px 1px 5px rgb(143, 143, 143);
    
}

#about_us_person_2:hover{
    border: 1.8px solid rgb(124, 121, 121);
    box-shadow: 1px 1px 5px rgb(143, 143, 143);
    
}

#about_us_person_3:hover{
    border: 1.8px solid rgb(124, 121, 121);
    box-shadow: 1px 1px 6px rgb(143, 143, 143);
    
}

@media screen and (max-width:500px){
    .about-us-section-div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .about-us-person{
        margin-top: 1.3rem;
    }
}

#about-us-person-para{
    font-size: 0.60rem;
    font-weight: 800;
    color:#535962;
    margin: 0.87rem 0.65rem 0rem 0.65rem;
}

#about-us-img{
     height: 4rem;
     width: 4rem;
}

#about-us-name{
    font-size: 0.8rem;
    font-weight: 900;
    color: #383bf5;
}

#about-us-work{
    font-size: 0.65rem;
    font-weight: 800;
    color:#535962;
    margin-bottom: 0.3rem;
}

.newsletter{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.newsletter-section{
    display: flex;
    background-color: #b1b1b252;
    border-radius: 0.15rem;
}

@media screen and (max-width:700px){
    .newsletter-section{
        display: flex;
        flex-direction: column;
    }
}

#newsletter-section-img{
    width: 23rem;
    max-height: 12.3rem;
    border-top-left-radius: 0.15rem;
    border-bottom-left-radius: 0.15rem;
}

@media screen and (max-width:700px){
    #newsletter-section-img{
        border-top-left-radius: 0.15rem;
        border-top-right-radius: 0.15rem;
    }
}

.newsletter-section-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: 2rem;
}

#newsletter-section-info-heading{
   font-size: 1.7rem;
   font-weight: bolder;
   color:#3128db;
}

#newsletter-section-info-para1{
    font-size: 0.8rem;
    font-weight: 700;
    color: #535962;
    margin-bottom: 0.5rem;
}

#newsletter-section-info-emailbox-email{
    width: 9rem;
    height: 1.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding-left: 0.2rem;
    color: #718096;
    border-radius: 0.2rem;
    border: 1px solid rgb(168, 168, 168);
}

#newsletter-section-info-emailbox-submit{
    width: 3.5rem;
    height: 1.49rem;
    background-color: #1c59de;
    color: #ffffff;
    border: 1px solid rgb(168, 168, 168);
    border-radius: 0.2rem;
}

#newsletter-section-info-para2{
    margin-top: 0.7rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: #566173;
}

#newsletter-section-info-para2-anchor{
    color: #476cbe;
    text-decoration: underline;
}

.footer{
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}
.footer-section{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-section-upper{
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.footer-section-upper-left{
    align-items: start;
}

.footer-section-upper-left-logo{
    display: flex;
    margin-bottom: 0.8rem;
}

.footer-section-upper-left-para{
    font-size: 0.8rem;
    font-weight: 700;
    color: #718096;
}

.footer-section-upper-left-company{
    display: flex;
    gap: 0.7rem;
    margin-top: 1rem;
}

#company-section-img-footer{
    width: 1.2rem;
    filter: grayscale(100%);
}

.footer-section-upper-right{
    margin-left: 5rem;
    display: flex;
    text-align: start;
    gap: 4rem;
}
td{
   padding-bottom: 0.7rem;
}

#footer-section-upper-right-headings{
    font-weight: 900;
    font-size: 0.8rem;
    color: #1d1f22;
}

#footer-section-upper-right-links{
    font-weight: 900;
    font-size: 0.7rem;
    color: #7e8b9f;
}

#footer-section-upper-right-links:hover{
    color: #444c56;
    text-shadow:0px 0px 0.3px #333a45;
}
@media screen and (max-width:750px){
    .footer-section-upper{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .footer-section-upper-left{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-section-upper-right{
        display: flex;
        flex-wrap: wrap;
        text-align: start;
    }
}
.footer-section-lower{
    font-size: 0.65rem;
    font-weight: 800;
    color: #7e8b9f;
    margin-bottom: 1.5rem;
}