*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  
}
body{
  display: flex;
  flex-direction: column;
  
}
header{
display: flex;
flex-direction: column;
height: 18vh;
width: 100%;
}
.headerPart{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  height: 18vh;
  width: 100%;
  background-color: #a1a1a1;
  margin-top: -5px;
}
header img{
  height: 100px;
  width: 100px;
  border-radius:50px ;
}
header h2{
  font-size: 60px;
  font-weight: 600;
}
.notifications{
  display: flex;
  flex-direction: row;
  
}
.notifications p{
  height: 9vh;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
 font-size: 23px;
 font-weight: 900;
 background-color:#000000;
 color: white;
 
}
marquee{
  height: 9vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

 font-size: 18px;
 font-weight: 900;
 background-color:rgb(200, 198, 198);
}
.intro{
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
  margin-top: 0px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
  
}
.para{
  display: flex;
  flex-direction: column;
  height: 90%;
  width: 60%;
  line-height: 1.3;
  font-size: 20.1px;
  font-weight: 500;
  text-align: justify;
  gap: 5px;
  justify-content: center;
 
}
.slogans{
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: space-around;
  gap: 10px; 
  height:10vh;
  width: 100%;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.col1 , .col2 , .col3{
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: space-around;
  gap: 10px;
}
.slogans span{
  font-size: 20px;
  font-weight: 900;
}
.intro img{
  height: 94%;
  width: 40%;
}
.para a{
 height: 50px;
 width: 140px;
 font-size: medium;
 font-weight: 600;
 background-color: rgba(0, 0, 0, 0.855);
 color: white;
 text-align: center;
 text-decoration: none;
 padding: 12px;
}
.para a:hover{
  color: white;
  text-decoration: none;
 }
.worldOfPossibilities {
  height: 70vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 5px;
  background-color: rgba(0, 0, 0, 0.151);
}
.worldOfPossibilities h2{
 font-size: 85px;
 font-size: 900;
 padding: 10px;
 line-height: 1.1;
 display: flex;
 height: 70%;
align-items: center;
padding-bottom: 40px;
border-radius: 10px;
border-right: 2px solid rgba(0, 0, 0, 0.274);
margin-top: 8px;
}
.info{
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 70%;
  align-items: flex-end;
  justify-content: center;
  border-left: 2px solid rgba(0, 0, 0, 0.208);
  gap: 20px;
  
 
  border-radius: 10px;
}
.info p{
  line-height: 1.3;
  font-size: 21px;
  font-weight: 500;
  text-align: justify;
}
.info a{
  height: 50px;
  width: 140px;
  font-size: medium;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.855);
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 12px;
}
.info a:hover{
  color: white;
  text-decoration: none;
 }
.ourServices{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  padding: 20px;
  padding-top: 60px;
}
.ourServices h2{
font-size: 3rem;
font-weight: 900;
height: 10%;
}
.services{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 60%;
  width: 100%;
  padding: 20px;

}

.service{
 height: 600px;
 width: 400px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 5px;
 border-radius: 0px;

}
.service img{
  width: 100%;
  height: 40%;
  object-fit: fill;
 object-position: center;
 margin-top: -10px;
 
}

.service video{
  width: 100%;
  height: 300px;
  margin-top: -45px;
 
}

.service p {
 text-align: justify;
font-size: .9;
 padding: 10px;
 font-family: Georgia, 'Times New Roman', Times, serif;
}
.service h3 {
  padding: 5px;
  font-size: x-large;
  text-align: center;
}
.service h4{
  font-size: x-large;
  margin-top:-12px;
}
.service a {
 height: 40px;
 width: 140px;
 font-size: 13px;
 font-weight: 300;
 background-color: rgba(0, 0, 0, 0.855);
 color: white;
 text-align: center;
 text-decoration: none;
 padding: 10px;
 margin-left: 7px;
 margin-top: 7px;
 

 }

 .img-slider{
  padding: 50px;
 height: 80vh;
 padding-top: 20px;
 }
 .carousel-inner{
 box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.67) ,2px -2px 10px rgba(0, 0, 0, 0.67);
height: 80vh;
  object-fit: contain;
 }
 .img-slider .carousel-item img{
  object-fit: contain;
  height: 100%;
  object-position: center;
 }
 .service a:hover{
  color: white;
  text-decoration: none;
 }

 .contactUs{
  display: flex;
  flex-direction: column; 
 align-items: center;
  padding:90px;
  height: 100vh;
  width: 100%;
  gap: 10px;
 }
 .contactDetails{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 20px;
  line-height: 1.4;

 }
.conatctInfo {
  font-size: 21px;
  font-weight: 500; 
  width: 100%;
}
.conatctInfo b{
 
  font-weight: 600; 
}
 .address{
  font-size: 18px;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  padding: 10px;
  padding-left: 0px;
 }
 .contactDetails span{
 font-weight: 900;
 }
 .contactUs-title{
  font-size: 3rem;
  font-weight: 900;
  height: 10%;
  text-align: center;
 }
 .contactDetails p{
  line-height: 1.4;
  font-size: 21px;
  font-weight: 500;
  text-align: justify;

 }

 iframe{
  height: 100%;
  width: 100%;
 }
 .footer{
  padding: 10px;
  height: 30vh;
  display: flex;
  justify-content: space-around;
 padding-top: 40px;
  background-color: #a1a1a1;
  flex-direction: row;
 }
 .details p{
  line-height: .6;
  font-size: 18px;
  font-weight: 500;
  text-align: justify;

 }
 .Socialdetails{
  line-height: .6;
  font-size: 18px;
  font-weight: 500;
  text-align: justify;
  cursor: pointer;
 }
 .addressDetailsInFooter{
 
  text-align: justify;
  line-height: 1.5;
 
 }
/* devices ( 999px and below) */
@media (min-width: 920px) and (max-width: 1300px) {
  .headerPart{
    height: 18vh;
  }
  header h2{
    font-size: 40px;
    font-weight: 600;
  }
  header img{
    height: 95px;
    width: 95px; 
  }
  .intro{
    height: 70vh;
    margin-top: 0px;
    gap: 20px;
   
  }
  .para{
    line-height: 1.1;
    font-size: 17px;
    font-weight: 400;
    gap: 10px;
  }
  .para a{
    height: 40px;
    width: 120px;
    font-size: 15px;
    padding: 10px;
  }
  .slogans span{
    font-size: 15px;
    font-weight: 800;
  }
  .worldOfPossibilities h2{
    font-size: 60px;
   }
   .info p{
    line-height: 1.3;
    font-size: 17px;
    font-weight: 500;
    text-align: justify;
  }
  .info{
    padding: 25px;
    gap: 10px;
    border-radius: 0px;
    padding-top: 50px;
  }
  .info a{
    height: 40px;
    width: 120px;
    font-size: 15px;
    padding: 10px;
  }
  .ourServices{
    height: 100vh;
    padding: 20px;
    padding-top: 40px;
  }
  .ourServices h2{
    font-size: 2.5rem;
    }
    .services{
      height: 60%;
      width: 100%;
      padding: 20px;
      justify-content: space-evenly;
      gap:20px ;
    }
    .service{
      height: 600px;
      width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      border-radius: 0px;
     
     }
     .service img{
      
      height: 35%;
     margin-top: -10px;
     
    }
    .service video{
      width: 100%;
      height: 250px;
      margin-top: -25px;
     
    }
    .service p {
      
     font-size: .8rem;
      padding: 10px;
     }
     .contactDetails{
      gap: 15px;
      line-height: 1.2;
    
     } 
     .conatctInfo {
      font-size: 1.2rem;
      font-weight: 500; 
      width: 100%;
    } 
    .address{
      line-height: 1.2;
     }
     .contactUs{
      padding: 20px;
      padding:50px;
     
     }
     .contactUs-title{
      font-size: 2.5rem;
     }
     .contactDetails p{
      line-height: 1.2;
      font-size: 18px;
      font-weight: 500;
      text-align: justify;
    
     }
     .footer h2{
      font-size: 1.8rem;
      font-weight: 700;
     }
}
/*  devices ( 920px and below) */
@media (min-width: 800px) and (max-width: 920px) {
  .headerPart{
    height: 18vh;
  }
  header h2{
    font-size: 30px;
    font-weight: 600;
  }
  header img{
    height: 90px;
    width: 90px; 
  }
  .notifications p{
    height: 8vh;
   font-size: 16px;
   font-weight: 700;
  }
  marquee{
    height: 8vh;
   font-size: 15px;
   font-weight: 700;
  }
  .intro{
    height: 70vh;
    margin-top: 0px;
    gap: 20px;
   
  }
  .para{
    line-height: 1;
    font-size: 14px;
    font-weight: 300;
    gap: 10px;
  }
  .para a{
    height: 40px;
    width: 120px;
    font-size: 15px;
    padding: 10px;
  }
  .slogans span{
    font-size: 15px;
    font-weight: 800;
  }
  .worldOfPossibilities h2{
    font-size: 50px;
   }
   .info p{
    line-height: 1.1;
    font-size: 14px;
    font-weight: 500;
    text-align: justify;
  }
  .info{
    padding: 25px;
    gap: 10px;
    border-radius: 0px;
    padding-top: 50px;
    border-radius: 10px;
  }
  .info a{
    height: 40px;
    width: 100px;
    font-size: 13px;
    padding: 10px;
  }

  .ourServices h2{
    font-size: 2.2rem;
    }
    .services{
      height: 100%;
      width: 100%;
      padding: 20px;
      justify-content: center;
      align-items: center;
      gap:20px ;
     
    }
    .service{
      height:500px;
      width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      border-radius: 0px;
     
     }
     .service img{
      
      height: 35%;
     margin-top: -10px;
     width: 100%;
     
    }
    .service video{
      width: 100%;
      height: 260px;
      margin-top: -70px;
     
    }
    .service p {
      
     font-size: .7rem;
      padding: 15px;
     }
     .img-slider{
      
     height: 85vh;
    margin-top: 50px;
     }
     .carousel-inner{
      box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.67) ,2px -2px 10px rgba(0, 0, 0, 0.67);
       height: 100%;
       object-fit: cover;
      }
     .contactDetails{
      gap: 15px;
      line-height: 1.2;
    
     } 
     .conatctInfo {
      font-size: 1.2rem;
      font-weight: 500; 
      width: 100%;
    } 
    .address{
      line-height: 1;
     }
     .contactUs{
      padding: 20px;
      padding:50px;
     
     }
     .contactUs-title{
      font-size: 2.2rem;
     }
     .contactDetails p{
      line-height: 1.4;
      font-size: 15px;
      font-weight: 500;
      text-align: justify;
    
     }
     .footer h2{
      font-size: 1.4rem;
      font-weight: 700;
     }
     .details p{
      line-height: .5;
      font-size: 14px;
      
    
     }
     .Socialdetails{
      line-height: .5;
      font-size: 14px;
      
     }
     .addressDetailsInFooter{
 
      text-align: justify;
      line-height: 1.2;
      font-size: 13px;
     }
}
/*  devices ( 550px and below) */
@media (min-width: 550px) and (max-width: 800px) {
  header h2{
    font-size: 25px;
    font-weight: 600;
  }
  header img{
    height: 70px;
    width: 70px; 
  }
  .notifications p{
    height: 8vh;
   font-size: 12px;
   font-weight: 700;
  }
  marquee{
    height: 8vh;
   font-size: 12px;
   font-weight: 500;
  }
  .intro{
    flex-direction: column-reverse;
    width: 100%;
    height: 100%;
  
  }
  .intro img{
    height: 100%;
    width: 100%;
    
  }
  .para{
    line-height: 1;
    font-size: 15px;
    font-weight: 300;
    gap: 10px;
    width: 100%;
    
  }
  .para a{
    height: 35px;
    width: 100px;
    font-size: 13px;
    font-weight: lighter;
    padding: 10px;
  }
  .slogans span{
    font-size: 15px;
    font-weight: 800;
  }
  .worldOfPossibilities{
    flex-direction: column;
    height: 100%;
  }
  .worldOfPossibilities h2{
    font-size: 44px;
    width: 100%;
  /* padding-left: 190px;
    height: 100%;
    margin-left: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;

   }
   .info p{
    line-height: 1.1;
    font-size: 15px;
    font-weight: 500;
    text-align: justify;
  }

  .info a{
    height: 40px;
    width: 100px;
    font-size: 12px;
    padding: 10px;
  }
.ourServices{
  padding-top: 30px;
 
  height: 280vh;
  justify-content: center;
}
  .ourServices h2{
    font-size: 2rem;
   
    }
    .services{
      flex-direction: column;
    height: 100%;
    align-items: center;
    }
    .service{
      height:500px;
      width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      border-radius: 0px;
     
     }
     .service img{
      
      height: 35%;
     margin-top: -10px;
     width: 100%;
     
    }
    .service video{
      width: 100%;
      height: 260px;
      margin-top: -70px;
     
    }
    .service p {
      
     font-size: .7rem;
      padding: 15px;
     }
     .img-slider{
      
     height: 85vh;
    margin-top: -90px;
     }
     .carousel-inner{
      box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.67) ,2px -2px 10px rgba(0, 0, 0, 0.67);
       height: 100%;
       object-fit: cover;
      }
     .contactDetails{
      gap: 15px;
      line-height: 1.2;
    margin-top: -80px;
     } 
     .conatctInfo {
      font-size: 1rem;
      font-weight: 500; 
      width: 100%;
    } 
    .address{
      line-height: 1;
     }
     .contactUs{
      height: 110vh;
      padding:50px;
      padding-top: 100px;
    
     margin-top: -150px;
     }
     .contactUs-title{
      font-size: 2.2rem;
     }
     .contactDetails p{
      line-height: 1.2;
      font-size: 12px;
      font-weight: 500;
      text-align: justify;
    
     }
     .Socialdetails p{
      line-height: .2;
      font-size: 13px;

     }
     
     iframe{
      height: 60%;
      width: 60%;
     }
     .footer h2{
      font-size: 1rem;
      font-weight: 600;
     }
     .details p{
      line-height: .2;
      font-size: 14px;
      
    
     }
     .Socialdetails{
      line-height: .5;
      font-size: 14px;
      
     }
     .addressDetailsInFooter{
      text-align: justify;
      line-height: 1.1;
      font-size: 10px;
     }
}
/*  devices ( 750px and below) */
@media (min-width: 200px) and (max-width: 550px) {
  header{
    height: 10vh;
    }
    .headerPart{
      height: 10vh;
      padding-top: 10px;
    }
  header h2{
    font-size: 15px;
    font-weight: 600;
  }
  header img{
    height: 50px;
    width: 50px; 
    
  }
  .notifications p{
    height: 5vh;
   font-size: 6px;
   font-weight: 900;
   padding: 5px;
  }
  marquee{
    height: 5vh;
   font-size: 10px;
   font-weight: 800;
  }
  .intro{
    flex-direction: column-reverse;
    height: 100%;
  }
  .para{
    line-height: 1.2;
    font-size: 12px;
    font-weight: 400;
    gap: 10px;
    width: 100%;
  }
  .para a{
    height: 40px;
    width: 100px;
    font-size: smaller;
    font-weight: 600;
    padding: 15px;
   }
  .slogans span{
    font-size: 10px;
    font-weight: 800;
  }
  .intro img{
    height: 100%;
    width: 100%;
  }
  .worldOfPossibilities{
    flex-direction: column;
    margin-top: 20px;
    padding-bottom: 50px;
    height: 100%;
  }
  .worldOfPossibilities h2{
    font-size: 35px;
   text-align: center;
   height: 100%;
  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   
   }
   .info p{
    line-height: 1.2;
    font-size: 12px;
    font-weight: 400;
    width: 100%;
  }
  .info a{
    height: 40px;
    width: 100px;
    font-size: .6rem;
    font-weight: 100;
    padding: 13px;
   }

.ourServices{
  padding-top: 20px;
  height: 100%;
  justify-content: center;
  
 gap: 120px;
}
  .ourServices h2{
    font-size: 2rem;
   z-index: 1;
    }
    .services{
      flex-direction: column;
    height: 100%;
    align-items: center;
    margin-top: -200px;
    padding: 30px;
    padding-top: 100px;
    gap: 40px;
    }
   
    .service{
      height:500px;
      width: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 0px;
      
     }
     .service img{
      
      height: 50%;
     margin-top: -10px;
     width: 90%;
     padding-bottom: 10px;
     
    }
    .service video{
      width: 100%;
      height: 50%;
      margin-top: -70px;
     padding: 10px;
     
    }
    .service p {
      
     font-size: .7rem;
      padding: 11px;
      font-weight: 100;
     }
     .img-slider{
      padding: 20px;
     height: 60vh;
    width: 100%;
    margin-bottom: 200px;
     }
     .carousel-inner{
      box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.67) ,2px -2px 10px rgba(0, 0, 0, 0.67);
      height: 100%;
      width: 100%;
       object-fit: cover;
      }
      
     .contactDetails{
      gap: 15px;
      line-height: 1.2;
    margin-top: -0px;
    flex-direction: column-reverse;
     } 
     .conatctInfo {
      font-size: .9rem;
      font-weight: 200; 
      width: 100%;
      text-align: justify;
      
    } 
    .address{
      line-height: 1;
     }
     .contactUs{
      height: 110vh;
      padding:20px;
     margin-top: -480px;
     padding-top: 120px;
     }
     .contactUs-title{
      font-size: 2rem;
     }
     .contactDetails p{
      line-height: 1.2;
      font-size: 13px;
      font-weight: 500;
      text-align: justify;
    
     }
     .Socialdetails p{
      line-height: .2;
      font-size: 10px;

     }
     
     iframe{
      height: 60%;
      width: 100%;
     }
     .footer{
      height: 100%;
      gap: 50px;
      padding: 10px;
      width: 100%;

     }
     .footer h2{
      font-size: .8rem;
      font-weight: 800;
      width: 100%;
     }
     .details p{
      line-height: 1;
      font-size: 10px;
      width: 100%;
    
     }
    
     .Socialdetails p{
      line-height: .1;
      font-size: 9px;
      
     }
     .addressDetailsInFooter {
      text-align: justify;
      line-height: 1.5;
      font-size: 8px;
      font-weight: 600;
      width: 100%;
      
     }
}