second.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.logo{
    padding-right: 42%;
}
.nav-items{
    padding-left: 4%;
}
.nav-items ul{
    list-style-type: none;
    display: flex;
    font-weight: bold;

}
.nav-items li{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin:1rem 1rem
}
#Meet{
    border: none;
    font-weight:bold ;
}
.bn{
    background-color: #2896B8;
    color: white;
}
#pd{
    padding: 0.2rem 1rem;
    border: none;
    border-radius: 0.5rem;
}
.sec-1{
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-1{

    justify-content: space-between;
    align-items: center;
    margin-left: -1rem;
}
.txt-1{
    margin: 2rem;

}
.img-1{
    margin-right:-7rem;
}
.buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1rem; /* Adjust margin as needed */
}

button#bbc {
    white-space: nowrap;
    padding: 0.8rem 1rem;
    margin: 0 0.5rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem;
}

.create-meeting-btn {
    background-color: #74C0FC;
    color: #fff;
    border: none;
}

.join-meeting-btn {
    background-color: #fff;
    color: #74C0FC;
    border: 0.1rem solid #74C0FC;
}

.next {
    text-align: left;
    margin-top: 2rem;
    padding-left:1.6rem;
}

#bl{
    color: #74C0FC;
}
.sec-2{
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-2{
    justify-content: space-between;
    margin-right: 5rem;
}
.txt{
    display: flex;
    text-align: right;
    margin: 1rem;
    padding-left:12.5rem;
  }

.img-2{
    margin-right: 1rem;
}
#bd{
    font-weight: bold;
}
.head{
    display: flex;
    justify-content: center;
    align-items: center;
}
.im-1,.im-2{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 30vh;
}
.im-1{
    padding:5rem 15rem;
}
.im-2{
    padding:1rem 20rem;
    margin-top: -4rem;
}
.lgo{
    max-width: 3rem;
    max-height: 3rem;
    margin: 0;
}
.sec-4{
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 16rem;
    max-width: 10rem;
    margin: 10rem 45%;
}
.sec-5 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4% 32%;
  }
  .text-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: bold;


  }
  .verticalline {
    justify-content: center;
    align-items: center;
    height:14rem;
    width: 0.2rem;
    border-left: 0.1rem solid #2896B8;
    margin: 0 2rem;


  }
  .tex ul,.text ul{
    white-space: nowrap;
    list-style-type: none;
    padding: 0;
    font-weight: bold;
  }
  .text li,.tex li{
    margin-bottom: 2rem;
  }
  .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  .bnz{
    background-color: #2896B8;
    color: white;
    padding: 1rem 2rem;
    border: 0rem;
   border-radius: 0.8rem;
  }
  button {
    transition: background-color 0.3s ease-in-out;
}

button:hover {
    background-color: rgb(8, 7, 7);
    color: white; /* Change the background color on hover */
}
nav ul li {
    transition: transform 0.3s ease-in-out; /* Apply the transition to the transform property */
    border: none;
}

nav ul li:hover {
    transform: scale(1.1); /* Scale up the list item on hover */
    color: #74C0FC;
}


@media(max-width:768px){
    html{
        font-size: 50%;
        
    }
    img{
        max-width: 100%;
        height: auto;
    }
   
    nav{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .logo{
        padding-right: 2%;
        max-width: 20%;
    }
    select{
        font-size: 96%;
    }
    #pd{
        padding: 0.2rem 1rem;
        font-size: 96%;
        border: none;
        border-radius: 0.5rem;
    }
    .sec-1{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content-1{
    
        justify-content: space-between;
        align-items: center;
        margin-left: -1rem;
    }
    .txt-1{
        margin: 2rem;
    
    }
    .img-1{
        margin-right:-7rem;
        max-width: 52%;
    }
    .buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 1rem; /* Adjust margin as needed */
    }
    
    button#bbc {
        white-space: nowrap;
        padding: 0.8rem 1rem;
        margin: 0 0.5rem;
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.4rem;
    }
    
    .create-meeting-btn {
        background-color: #74C0FC;
        color: #fff;
        border: none;
    }
    
    .join-meeting-btn {
        background-color: #fff;
        color: #74C0FC;
        border: 0.1rem solid #74C0FC;
    }
    
    .next {
        text-align: left;
        margin-top: 2rem;
        padding-left:1.6rem;
    }
    #vd{
        max-width: 19%;
    }
    .sec-2{
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }
    .im-1,.im-2{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 11vh;
            
    }
    #gd{
        max-width: 24vh;
    }
    .sec-4{
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 16rem;
        max-width: 10rem;
        margin: 2rem 45%;
    }
    .sec-5 {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 5% 23%;
        white-space: nowrap;
      }
      .btn{
        display: flex;
        justify-content: center;
        align-items: center;
        
      }
      .bnz{
        background-color: #2896B8;
        color: white;
        padding: 1rem 2rem;
        border: 0rem;
       border-radius: 0.8rem;
      }

        
    
    
}