/* body style */
    *{
        box-sizing: border-box;
    }
    
    body {
        font-family: "Times New Roman", Times, serif;
        line-height: 1.6;
        font-family: "Lexend", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }
    /* first heading start */
    .square-icon{
        margin-top: 15px;
        display: flex;
        justify-content: center;
        
    }
    .about-square{
       width:15px !important;
       height: 15px !important;
       border: 1px solid #161D6F;
       transform: rotate(45deg);
       margin-bottom: 5px;
   }
   .about-heading{
       font-size:4rem;
       color:#0E46A3;
       font-weight: 500;
   }
    /* class for justify text */
    .justify-text{
        text-align: justify;
    }
    .background-color-c{
        background-color: whitesmoke;
    }
    /* class for background color */
    .backgchange{
        background-color: rgba(14, 70, 163,0.95);
    }
    /* class for border and border radius */
    .borderchange{
        /* border: 1px solid gray; */
        background-color: rgba(14, 70, 163,0.9);
        color: whitesmoke;
        border-radius: 20px;
        /* font-size: 15px; */
        padding: 10px;
        text-align: justify;
        width: 100%;
        height: 120px;
        line-height: 1.3; 
    }
    .coworking-img{
        width: 90%;
        text-align: center;
        position: relative;
        overflow: hidden;
        outline: 15px solid #0E46A3;
        border: 15px solid white;
        offset: 5px;
    }
    .coworking-img:hover img{
        animation: img-scale 2s forwards;
    }
    @keyframes img-scale {
        0%{
            transform: scale(1,1);
        }
        100%{
            transform: scale(1.1,1.1);
        }
    }
    .coworking-img:hover.coworking-img::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(14, 70, 163,0.2);
        width: 100%;
        height: 100%;
        transition: all 2s;
    }
    .text-over-img{
        position: absolute;
        bottom: 40%;
        left: 20%;
        font-size: 30px;
        color: white;
        opacity: 0;
        font-weight: bold;
        z-index: 4;
    }
    @media(max-width:768px){
        .text-over-img{
            position: absolute;
            bottom: 40%;
            left: 15%;
            font-size: 30px;
            color: white;
            opacity: 0;
            font-weight: bold;
            z-index: 4;
        }
    }
    .coworking-img:hover .text-over-img{
        animation:textoverimg 1s ease-in-out ;
        opacity: 1;
        transition: all 1s;
    }
    .coworking-img:not(:hover) .text-over-img{
        animation:textbackimg 1s ease-in-out ;
        transition: all 1s;
    }
    @keyframes textoverimg{
        0%{
            bottom: 35%;
        }
        100%{
            bottom: 40%;
        }
    }
    @keyframes textbackimg{
        0%{
            bottom: 40%;
            opacity: 0.3;
        }
        100%{
            bottom: 35%;
            opacity: 0;
        }
    }
    /* meeting section start */
    .meeting-text{
        margin-top: 100px;
    }
    .meeting-img{
        position: relative;
        height: 500px;
    }
    .meeting-img-1{
        position: absolute;
        top: 0px;
        right: 0px;
        width: 70%;
        height: 400px;
    }
    .meeting-img-2{
        position: absolute;
        top: 170px;
        left: 0px;
        width: 70%;
        height: 400px;
    }
    .meeting-img-3{
        position: absolute;
        top: 350px;
        right: 0px;
        width: 50%;
        height: 400px;
    }
    @media(max-width:768px){
        .meeting-img-1{
            position: absolute;
            top: 0px;
            right: 0px;
            width: 70%;
            height: 200px;
        }
        .meeting-img-2{
            position: absolute;
            top: 100px;
            left: 0px;
            width: 70%;
            height: 200px;
        }
        .meeting-img-3{
            position: absolute;
            top: 220px;
            right: 0px;
            width: 50%;
            height: 200px;
        }   
    }
    @media(max-width:768px){
        .meeting-text{
            margin-top: 50px;
        }
    }
    .meeting-text-p{
        width: 70%;
        text-align: justify;
    }
    .meeting-button{
        margin-top: 30px;
        background-color: #0e46a3;
        color: white;
        width: 40%;
        border: 2px solid white;
        outline: 2px solid #161d6f;
        height: 50px;
        margin-bottom: 100px;
    }
    .meeting-button:hover{
        margin-top: 30px;
        background-color: whitesmoke;
        color: #0e46a3;
        width: 40%;
        border: 2px solid #0e46a3;
        outline: none;
       height: 50px;
    }
    .meeting-main{
   margin-top: 120px;
    }
    /* meeting section end */
    /* for text color */
    .colorchange{
            color: #0E46A3;
    }
    .paragraph-color{
        color:  #161D6F;
    }
    /* for text hover */
    .hoverable:hover{
        font-size: 17px;
        transition: all 0.5s;
    }
           /* shadow effect */
    .forshadow:hover{
        animation:glow 2s forwards ;
    
    }
        @keyframes glow{
            0%{
            box-shadow:none;
           }
           50%{
            box-shadow: 0 0 15px rgba(14, 70, 163,0.5);
            border-radius: 0px;
            padding: 6px;
           }
           100%{
            box-shadow: 0 0 15px rgba(14, 70, 163,0.5);
            border-radius: 0px;
            padding: 6px;
           }
           
        }
        .forshadow:not(:hover){
           
           animation:glowreverse 2s forwards;
      }
       @keyframes glowreverse{
          0%{
           box-shadow: 0 0 15px rgba(14, 70, 163,0.5);
           border-radius: 0px;
           padding: 6px;
          }
          50%{
           box-shadow: 0 0 15px rgba(14, 70, 163,0.5);
           border-radius: 0px;
           padding: 6px;
          }
          100%{
           box-shadow:none;
          }
          
       }
           /* blur effect animation */
           .blurp.visible{
                
                animation: blur 5s;
    
            }
            @keyframes blur{
                0%{
                    opacity:0 ;
                }
                100%{
                    opacity: 1;
                }
            }
           /* this animation creat zoomin effect */
           .zoomi.visible{
               
               animation: zoomin-visible 2s ease-out;
    
           }
           @keyframes zoomin-visible{
               0%{
                   transform: scale(0.5);
               }
               100%{
                   transform:scale(1);
               }
           }
           
              /* animation */
    .zo:hover{
       
       animation: zo 5s ease-out;
    

   }
   @keyframes zo{
       0%{
           transform: scale(0.90);
       }
       100%{
           transform:scale(1);
       }
   }
   /* blur animation */
   .proper:hover{
        
        animation: bl 4s;

    }
    @keyframes bl{
        0%{
            /* opacity:0.3 ; */
            color:  #0E46A3;
        }
        100%{
            opacity: 1;
            color:  #0E46A3;
        }
    }
    /* environment section star */
    .environment-main{
        position: relative;
        height: 400px;
        margin-top: 50px;
    }
    .environment-color-div{
        width: 85%;
        position: absolute;
        top: 80px;
        right: 0px;
        background-color: rgb(14, 70, 163);
        height: 285px;
    }
    .environment-img-div{
        width:85%;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 285px;
    }
    .environment-img-div img{
        height: 285px;
    }
    .for-margin-top{
        margin-top: 100px;
    }
    /* section end */
    /* main div questions */
  .main, .main1, .main2{
    position: relative;
}
    /* buttons display */
.answerhide, .ans,
.answerhide1, .ans1,
.answerhide2, .ans2{
    display: none;
}
   /* for buttons */
.answer, .answerhide,
 .answer1, .answerhide1,
 .answer2, .answerhide2{
    position: absolute;
    top: 10px;
    right: 0;
    background-color: #0E46A3;
    
}
@media(max-width:375px){
    .answer, .answerhide{
    position: absolute;
    top: 50px;
    right: 0;
    background-color: #0E46A3;
    
}
.answer1, .answerhide1{
    position: absolute;
    top: 70px;
    right: 0;
    background-color: #0E46A3;
    
}
.answer2, .answerhide2{
    position: absolute;
    top: 55px;
    right: 0;
    background-color: #0E46A3;
    
}
}
@media(max-width:768px){
.answer1, .answerhide1{
    position: absolute;
    top: 70px;
    right: 0;
    background-color: #0E46A3;
    
}
.answer2, .answerhide2{
    position: absolute;
    top: 55px;
    right: 0;
    background-color: #0E46A3;
    
}
}
/* button3 animation */
 .answer2:hover{
    animation: effect 2s ease-out;
    animation: effect1 2s ease-out;
 }
 .answerhide2:hover{
    animation: effect 2s ease-out;
    animation: effect1 2s ease-out;
 }
 /* button2 animation */
 .answerhide1:hover{
    animation: effect 2s ease-out;
    animation: effect1 2s ease-out;
 }
 .answerhide:hover{
    animation: effect 2s ease-out;
    animation: effect1 2s ease-out;
 }
 /* button1 animation */
 .answer:hover{
    animation: effect 2s ease-out;
    animation: effect1 2s ease-out;
 }
 .answer1:hover{
    animation: effect 2s ease-out;
    animation: effect1 2s ease-out;
 }
 /* animation for buttons */
@keyframes effect{
           0%{
               transform: scale(0.5);
           }
           100%{
               transform:scale(1);
           }
       }
       @keyframes effect1{
           0%{
               transform: scale(1);
           }
           100%{
               transform:scale(1.1);
           }
       }
    .question-style{
       padding-left: 10px;
       color: #161D6F;
         
      
    }
    .full-style{
   
      padding: 10px;
    
      box-shadow: 2px 2px 10px 2px #0E46A3;
      
    }
    .btt1-h{
        animation: toptobottom-ans 2s forwards;
    }
    @keyframes toptobottom-ans{
        0%{
            transform: translateY(50px);
        }
        100%{
            transform: translateY(0px);
        }
    }
    .btt1-header{
        animation: bottom 2s ease-in-out;
        transition: all 2s;
    }
    @keyframes bottom{
        0%{
            transform: translateY(350%);
        }
        100%{
            transform: translateY(0px);
        }
    }
    .btt1-question.visible{
        animation: toptobottom-ans1 2s forwards;
        transition: all 2s;
    }
    @keyframes toptobottom-ans1{
        0%{
            transform: translateY(100px);
        }
        100%{
            transform: translateY(0px);
        }
    }