:root{
    --color-primary : #2196F3;
    --color-primary-light : #BBDEFB;
    --color-solid : #1565C0;
    --color-secondary : #FFC108;
    --color-secondary-light : #FFECB3;
    --color-secondary-dark : #FF6F00;
    --color-accent : #00BCD4;
    --color-accent-light: #B2EBF2;
    --color-accent-dark :  #00838F;
    --text-primary : rgba(0, 0, 0, 0.87);
    --text-secondary : rgba(0, 0, 0, 0.54);
    --text-secondary-dark : rgba(255, 255, 255, 0.1);
    --text-disabled : rgba(0, 0, 0, 0.38);
    --text-field : rgba(0, 0, 0, 0.42);
    --paper-light : #FFFFFF;
    --paper-dark : #424242;
    --font-h1 : 36px;
    --font-h2 : 32px;
    --font-h3 : 28px;
    --font-h4 : 24px;
    --font-h5 : 18px;
    --font-h6 : 16px;

}

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

body{
    font-family:  'Lato', sans-serif;
}

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


.btn {
    padding: 10px 20px;
    border: none;
    font-size: 16px;
}


.btn-primary {
    background-color: var(--color-primary);
    color: var(--paper-light);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--paper-light);
}

.link {
    color: var(--color-solid);
    font-weight: 600;
}



/* Header */


.navbar{
    display: flex;
    margin: 10px 40px;
    position: relative;
}

.logo-wrapper{
    display: flex;
    align-items: center;
    margin: 30px 0px;
}

.logo-name{
    margin-left: 10px;
    font-size: var(--font-h2);
}

.nav-links-wrapper {
    display: flex;
    margin-left: 50px;
}

.nav-links{
    display: flex;
    list-style-type: none;
    align-items: center;
}

.logo{
    width:54px;
    height: 54px;
}

.nav-right {
    display: flex;
    align-items: center;
    margin-left: 285px;
}

.nav-button-wrapper{
    font-size: var(--font-h7);
    display: flex;
    align-items: center;
}

.nav-links-item{
    margin: 0px 10px;
    font-size: var(--font-h6);
    font-weight: 600;
    color: #545454;
}

.nav-links-item.link{
    color: var(--color-solid);
    font-weight: 600;
}

.nav-links-item.arrow::before{
     content: '';
     width: 100px;
     height: 100px;
     background-color: var(--color-secondary);
}

.login-link{
    margin: 0 20px;
    text-decoration: none;
    color: var(--paper-dark);
    font-size: var(--font-h6);
    font-weight: bold;
}

.seperator{
    width: 1px;
    margin: 0px 20px;
    height: 17px;
    border: 1px solid  #979797;
    background-color: #979797;
}

.icon-settings{
    margin-left: 10px;
    font-size: var(--font-h3);
}

/* Section */

.section-1-wrapper {
    display: flex;
}

.left-side-wrapper{
  margin: 80px 50px;
}

.section-1_head{
    font-size: var(--font-h1);
}

.section-1_para{
    font-size: var(--font-h4);
    color: var(--text-disabled);
    margin: 30px 0px;
    line-height: 32px;
}

.banner-img-1 {
    height: 372px;
    margin-left: 170px;
}

.section-link{
    margin-right: 20px;
}

.section-1-grid{
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.section-1-grid__para{
    margin: 10px 0px;
}

/* Section-2 */

.section-2__wrapper{
    display: flex;
    margin-top: 60px;
    margin-left: 40px;
}

.banner-2__img {
    height: 372px;
}

.sec-2-right-side__wrapper{
    margin-left: 100px;
    margin-top: 50px;
}

.sec-2__heading{
    font-size: var(--font-h4);
}

.sec-2__para{
   margin:20px 0px;
   margin-right: 26px;
   line-height: 36px;
   font-size: 20px;
} 

.counter {
    display: flex;
    justify-content: space-around;
}

.counter-header {
    margin: 20px 0px;
}

.counter-desc{
   margin: 10px 0px;
}

.counter-divider  {
    padding: 4px;
    margin: 7px;
}

.counter-primary{
    background-color: var(--color-primary);
}

.counter-secondary{
    background-color: var(--color-secondary);
}

.counter-primary-light{
    background-color: var(--color-primary-light);
}

/* sec-3 */

.speciality-wrapper{
    display: flex;
    margin: 60px;
}

.speciality-img{
    height: 372px;
    margin-right: 100px;
}

.speciality-left__wrapper {
   margin: 40px;
}

.speciality-header {
    font-size: var(--font-h2);
}

.speciality-desc {
    margin: 20px 283px 20px 0px;
    line-height: 36px;
    font-size: 20px;
} 

.tags{
    display: flex;
}

.tags-item{
  background-color: #fff;
  width: 180px;
  padding: 10px;
  margin: 10px;
  border: 1px solid var(--text-disabled);
  color: #a8a8a8; 
  font-weight: 700;
}

.tags-primary-dark {
    color: var(--color-secondary-dark);
    border: 1px solid var(--color-secondary-dark);
}

.tags-primary {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.tags-accent {
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.tags_wrapper_2{
    margin-left:10px;
}

.logos-wrapper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    margin: 20px 250px;
}

/* services */

.services{
    margin: 60px;
}

.services-header__wrapper{
    display: flex;
    justify-content: space-between;
}


.services-img{
    height: 280px;
    margin-right: 20px;
}

.services-section{
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.services-header {
    font-size: var(--font-h2);
}

.services-desc {
    margin: 20px 0px;
    margin-right: 100px;
    line-height: 36px;
    font-size: var(--font-h5);
} 

.card-img{
   width: 100%;
   height: 13vw;
   object-fit: cover;
}

.card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    margin-right: 30px;
}

.card-heading, .card-para{
   margin: 20px;
}

.detail-btn{
    padding: 10px;
    margin: 10px 20px;
    border: 1px solid var(--color-primary);
    background-color: white;
    width: 236px;
    color: var(--color-primary);
    font-weight: 700;
}

/* footer */

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin: 80px;
    gap:30px;
}

.footer-logo__wrapper {
    display: flex;
    align-items: center;
}

.footer-logo__desc{
   color: var(--text-disabled);
}

.footer-logo__desc > p {
    margin: 10px 0px;
}

.footer-links {
    color: var(--text-disabled);
    margin: 20px 0px;
}

.footer-links__wrapper > h3 {
   color: var(--color-secondary-dark);
}

.footer-list-item {
    margin: 10px 0px;
    list-style-type: none;
}

.social-links-item{
    list-style-type: none;
}

.lang-btn {
    padding: 7px;
    width: 150px;
    background-color: #fff;
    border: 1px solid var(--color-primary);
    font-weight: bold;
}

@media(max-width:780px){

 .navbar {
        display: none;
    }

 .hamburger-menu {
    display: flex;
    flex-direction: column;
    margin: 30px;
   }

.line {
  padding: 2px;
  margin: 2px;
  width: 25px;
  background-color: var(--paper-dark);
}

.hamburger-menu.active .line-1 {
    transform: rotate(42deg) translate(10px,1px);
}

.hamburger-menu.active .line-2 {
    opacity: 0;
} 

.hamburger-menu.active .line-3 {
    transform: rotate(-42deg) translate(10px,-2px);
}

.navbar.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--paper-dark);
    color : #ffff;
    position: fixed;
    top: 15%;
}

.navbar.active>.nav-links-wrapper>.nav-links>.nav-links-item{
    color: #fff;
}

.nav-links {
    flex-direction: column;
}

.nav-right {
    margin-left: 0px;
    margin-top: 20px;
    margin-bottom : 20px;
}

.nav-links-item {
    margin: 10px 10px;
    
}

.nav-links-wrapper{
    margin-left: 0px;
}

.login-link {
    color: #fff;
}

.navbar .active > .nav-right > .icon-settings {
    display: none;
}

.seperator{
    display: none;
}

.nav-button-wrapper {
    margin: 0px 20px;
}

.banner-img-1{
    height: 272px;
    margin-left: 0px;
}

.left-side-wrapper {
    margin: 17px 30px;
}

.section-1-btn__wrapper>button {
    margin-top : 20px;
}

.fa-cogs.icon-settings {
    display: none;
}

/* sec-1 */
.section-1-grid {
  margin-left: 20px;
}

/* sec-2 */
.banner-2__img{
    height: 272px;
}

.sec-2-right-side__wrapper {
    margin-left: 70px;
    margin-top: 30px;
}

/*sec-3 */
.speciality-img{
    height: 272px;
    margin-right: 0px;
}

.speciality-left__wrapper{
    margin: 0px;
}

.speciality-desc {
    margin-right: 25px;
}

/* .tags {
    flex-direction: column;
} */
.tags-item {
    width: 100px;
}

.logos-wrapper {
    margin: 20px;
}

/* services */
.services-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 30px;
}

.services-img{
    height: 272px;
}

.footer{
    grid-template-columns: 1fr;
}

.footer-links__wrapper{
    margin-top: 10px;
}

}


@media(max-width:426px){
    .banner-img-1 {
        height: 200px;
    }

    .section-1-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .banner-2__img {
        height: 230px;
        margin-left : -50px;
    }

    .section-1-grid {
        flex-direction: column;
        align-items: center;
        margin-left: 0px ;
    }

    .section-1-btn__wrapper{
       display: flex;
       flex-direction: column;
    }

    .section-2__wrapper {
        flex-direction: column;
        align-items: center;
        margin-left: 0px;
    }
    
    .sec-2__heading{
        margin-right : 20px;
    }

    .card{
        margin-right: 0px ;
    }

    .sec-2-right-side__wrapper{
        margin-left: 30px;
    }

    .services {
        margin: 20px;
    }

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

    .services-desc{
        margin-right: 0px;
    }

    .speciality-wrapper{
        flex-direction: column;
        align-items: center;
        margin: 7px;
    }

    .speciality-desc {
        margin-right: 0px;
    }

    .speciality-desc, .speciality-header{
        margin-left: 10px;
    }

    .speciality-img {
        height: 200px;
        margin-top: 20px;
    }

    .services-img{
        margin-right: 0;
        height: 200px;
    }

    .services-section{
        margin-top: 0;
        gap: 30px;
    }

    .tags_wrapper_2 {
        margin-left: 0;
    }

    .logos-wrapper{
        display: none;
    }

    .tags{
        align-items: center;
    }

    .footer{
        margin: 20px;
    }
}