body,
html {
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  margin: 0;

}

div.polaroid1 {
  width: 100%;


}

div.container1 {
  padding: 0px;
}

#modelback {


  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M497.843137670258 461.886022446329L630.6262145258186 454.9271562619596 623.6673483414493 322.144079406399 490.88427148588863 329.10294559076834z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M755.056%2c226.529C775.456%2c225.038%2c794.068%2c215.923%2c805.08%2c198.687C817.097%2c179.878%2c822.837%2c156.423%2c812.477%2c136.653C801.459%2c115.628%2c778.791%2c102.933%2c755.056%2c103.231C731.806%2c103.523%2c712.354%2c118.316%2c700.08%2c138.065C686.944%2c159.201%2c677.391%2c185.925%2c690.526%2c207.061C703.236%2c227.513%2c731.04%2c228.285%2c755.056%2c226.529' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1390.0990868910044 144.83485369437417L1311.6452272033168 220.59686533506323 1387.4072388440059 299.0507250227507 1465.8610985316934 223.2887133820617z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M469.22338467433667 459.0065625969967L377.11459125656603 292.4637825049638 288.95355839189637 433.55092751421756z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M126.751%2c244.867C144.704%2c244.953%2c159.606%2c233.427%2c169.494%2c218.443C180.778%2c201.344%2c191.384%2c180.106%2c181.228%2c162.313C171.024%2c144.436%2c147.285%2c142.128%2c126.751%2c143.557C109.004%2c144.792%2c92.737%2c153.587%2c83.992%2c169.079C75.393%2c184.314%2c76.113%2c202.803%2c84.709%2c218.039C93.464%2c233.558%2c108.933%2c244.782%2c126.751%2c244.867' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M103.02789407263604-9.473620875209336L71.91344068813035 125.29788330131605 206.68494486465573 156.4123366858217 237.7993982491614 21.640832509296352z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");

}

.bannaer-column {
  background-color: rgb(88, 86, 86);
}

.cornerimage {
  position: absolute;
  top: 0;
  right: 0;
  align-items: center;
  width: 1000px;
  height: 600px;


}

.bottom-left {
  position: absolute;
  bottom: 0px;
  width: 250px;
  height: 230px;
  left: .5px;

}

.unselectable {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.image1 {
  position: absolute;
  top: 0px;
  align-items: center;
  right: 1px;
}

.icons_container1 {
  /* background-image: url(/img/fire-spark.png); */
  display: inline-flex
}

/* ////////////// */


#popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
#popup .popuptext {
  visibility: hidden;
  width: auto;

  background-color: rgb(12, 5, 24);
  color: #fff;
  text-align: center;
  border-radius: 106px;
  padding: 15px;
  /* padding: 10px 0; */
  position: absolute;
  z-index: 1;

  left: 18%;
  margin-left: -80px;
}

/* Popup arrow */
#popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(244, 242, 245) transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
#popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}




/* /////////////// */

.icons_container {
  display: inline-flex
}

.icons_container .icon {
  margin: 0 10px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.icons_container .icon span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}






/* /////////////////////////////////// */






/* 3*3 Grid */
#b1,
#b2,
#b3,
#b4,
#b5,
#b6,
#b7,
#b8,
#b9 {
  width: 80px;
  height: 52px;
  margin: auto;

  border: 1px solid rgba(0, 0, 0, 0.418);
  border-radius: 6px;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

/* Reset Button */
#but {
  box-sizing: border-box;
  width: 95px;
  height: 40px;
  border: 1px solid rgb(78, 119, 160);
  margin: auto;
  border-radius: 100;
  font-family: Verdana,
    Geneva, Tahoma, sans-serif;

  background-color: rgb(107, 161, 216);
  color: white;
  font-size: 20px;
  cursor: pointer;
}

/* Player turn space */
#print {
  font-family: 'Zen Antique Soft', serif;

  color: rgb(0, 0, 0);
  font-size: 20px;
}

/* Main Container */
#main {
  text-align: center;
}

/* Game Instruction Text */
#ins {
  font-family: Verdana,
    Geneva, Tahoma, sans-serif;

  color: rgb(0, 0, 0);
  font-size: 17px;
}

/* ////////////////////////// */
@import url('https://fonts.googleapis.com/css?family=Orbitron');

#digit_clock_time {

  font-family: 'Work Sans', sans-serif;
  color: #ffffff;
  font-size: 35px;
  text-align: center;
  padding-top: 20px;
  text-shadow: 2px 2px 8px black;
  font-size: 53px;
}

#digit_clock_date {

  font-family: 'Work Sans', sans-serif;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  padding-top: 20px;
  text-shadow: 2px 2px 8px black;
  padding-bottom: 20px;
}

/* ///////////////////////// */

.zoom {
  padding: 20px;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5);
  /* IE 9 */
  -webkit-transform: scale(1.5);
  /* Safari 3-8 */
  transform: scale(1.5);
}

div.polaroid {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}

/* why chose us */

.container2 {
  width: 100%;
  padding: 20px 60px 30px 40px;

}

.container1 {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container1 .content1 {
  display: flex;

  justify-content: space-between;
}

.container1 .content1 .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.content1 .left-side::before {
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}

.content1 .left-side .details {
  margin: 14px;
  text-align: center;
}

.content1 .left-side .details i {
  font-size: 30px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
}

.content1 .left-side .details .topic {
  font-size: 18px;
  font-weight: 500;
}

.content1 .left-side .details .text-one,
.content1 .left-side .details .text-two {
  font-size: 14px;
  color: #afafb6;
}

.container1 .content1 .right-side {
  width: 75%;
  text-align: center;
  margin-left: 55px;
  margin-right: 55px;
}

.content1 .right-side .topic-text {
  font-size: 23px;
  font-weight: 600;
  color: #ffffff;
}

.right-side .input-box {
  height: 45px;

  margin: 12px 0;
}

.right-side .input-box input,
.right-side .input-box textarea {
  height: 100%;
  width: 90%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 1px;

  resize: none;
}

.right-side .message-box {
  min-height: 110px;
}

.right-side .input-box textarea {
  padding-top: 6px;
}

.right-side .button {
  display: inline-block;
  margin-top: 12px;
}

.right-side .button input[type="button"] {
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 1px;
  background: #130a2c;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="button"]:hover {
  background: #545357;
}

@media (max-width: 950px) {
  .container1 {
    width: 90%;
    padding: 30px 40px 40px 35px;
  }

  .container1 .content1 .right-side {
    width: 75%;
    margin-left: 55px;
  }
}

@media (max-width: 820px) {
  .container1 {
    margin: 40px 0;
    height: 100%;
  }

  .container1 .content1 {
    flex-direction: column-reverse;
  }

  .container1 .content1 .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .container1 .content1 .left-side::before {
    display: none;
  }

  .container1 .content1 .right-side {
    width: 100%;
    margin-left: 0;
  }
}

/* ///////// */

.map-container-5 {
  overflow: hidden;
  padding-bottom: 51.25%;
  position: relative;
  height: 0;
}

.map-container-5 iframe {
  left: 0;
  top: 0;
  height: 400px;
  width: 100%;
  position: absolute;
}

.map-container-6 {
  overflow: hidden;
  padding-bottom: 38.25%;
  position: relative;
  height: 0;
}

.map-container-6 iframe {
  left: 0;
  top: 0;
  height: 400px;
  width: 100%;
  position: absolute;
}

/* 
///////////// */


.wrapper {
  max-width: 1200px;
  padding: 0px 20px;
  margin: auto;
}

.logo {
  float: left;
  margin: 38px 0px;
  max-width: 200px;
}

.logo img {
  max-width: 100%;
}

/*-- Navbar CSS --*/
.nav-menus {
  float: right;
  min-height: 100px;
  display: flex;
  align-items: center;
}

.nav-menus li {
  list-style: none;
  position: relative;
  padding: 30px 0px;
}

.nav-menus a {
  color: #fff;
  position: relative;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 12px;
  z-index: 1;
}

.nav-menus li:hover {
  color: #fff;
}

.nav-menus a:after {
  content: "";
  width: 100%;
  height: 0px;
  background-color: #5a30a5;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 4px;
  transition: 0.5s;
  z-index: -1;
}

.nav-menus li:hover>a:after {
  height: 100%;
}

.nav-menus i {
  margin-right: 8px;
  font-size: 16px;
}

.toggle-btn {
  float: right;
  height: 90px;
  line-height: 90px;
  color: #fff;
  font-size: 26px;
  display: none;
  cursor: pointer;
}

.nav-menus.active {
  display: block;
}

/*-- Sub Menus CSS--*/
.sub-menus ul {
  position: absolute;
  top: 80px;
  background-color: #fff;
  padding: 5px 0px;
  min-width: 150px;
  box-shadow: 0px 0px 8px #636363;
  border-radius: 4px;
  display: none;
}

.sub-menus:hover ul {
  display: block;
}

.sub-menus ul li {
  padding: 5px 0px;
}

.sub-menus ul li a {
  padding: 8px 10px;
  display: block;
  color: #5a30a5;
}

.sub-menus ul li:hover a {
  color: #fff;
}

.sub-menus ul::before {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  top: -9px;
}

/*-- Responsive Menus Bar CSS--*/
@media (max-width:320px) {
  .toggle-btn {
    display: block;
  }

  .nav-menus {
    position: absolute;
    width: 100%;
    background: #4e2890;
    top: 100px;
    right: 0;
    display: none;
    padding: 0px 15px;
    box-sizing: border-box;
  }

  .nav-menus::before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #4e2890;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .sub-menus ul {
    position: static;
  }

  .sub-menus ul::before {
    display: none;
  }

  .nav-menus li {
    padding: 0px;
  }

  .nav-menus li a {
    display: block;
    margin: 15px 0px;
  }
}

/*-- Navbar CSS --*/
nav {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100PX;


}

nav .wrapper {
  position: relative;
  max-width: 1300px;
  padding: 0px 30px;
  height: 70px;
  line-height: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper .logo a {
  color: #f2f2f2;
  font-size: 30px;
  font-weight: 600;

  text-decoration: none;
}

.wrapper .nav-links {
  display: inline-flex;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav-links li a:hover {
  background: #d1d1d1;
}

.nav-links .mobile-item {
  display: none;
}

.nav-links .drop-menu {
  position: absolute;
  background: rgb(12, 41, 78);
  width: 220px;
  line-height: 45px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
  transition: all 0.3s ease;
  top: 70px;
  opacity: 1;
  visibility: visible;
}

.drop-menu li a {
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  font-weight: 400;
  border-radius: 0px;
}

.mega-box {
  position: absolute;
  right: 0;
  width: 100%;
  padding: 0 30px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
}

.mega-box .content {
  background: rgb(12, 41, 78);
  padding: 25px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-shadow: 0 6px 10px rgba(255, 255, 255, 0.15);
}

/* /////CHANGE HEIGHT MEGA BOX/// */
.mega-box .content .row {
  width: calc(25% - 30px);
  line-height: 45px;
}

/* /////CHANGE HEIGHT MEGA BOX/// */

.content .row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper .logo a .img {
  display: block;

  margin-top: 10px;
  float: left;
  width: 9rem;
  height: 6rem;
}

.content .row header {
  color: #f2f2f2;
  font-size: 20px;
  font-weight: 500;
}

.content .row .mega-links {
  margin-left: -40px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.row .mega-links li {
  padding: 0 20px;
}

.row .mega-links li a {
  padding: 0px;
  padding: 0 20px;
  color: #ffffff;
  font-size: 17px;
  display: block;
}

.row .mega-links li a:hover {
  color: #f2f2f2;
}

.wrapper .btn {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
}

.wrapper .btn.close-btn {
  position: absolute;
  right: 30px;
  top: 10px;
}

@media screen and (max-width: 1066px) {
  .wrapper .btn {
    display: block;
  }

  .wrapper .logo a .img {
    display: block;

    margin-top: 10px;
    float: left;
    width: 5rem;
    height: 3rem;
  }


  .wrapper .nav-links {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 350px;
    top: 0;
    left: -100%;
    background: rgb(12, 41, 78);
    display: block;
    padding: 50px 10px;
    line-height: 50px;
    overflow-y: auto;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
  }

  /* custom scroll bar */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgb(12, 41, 78);
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(12, 41, 78);
  }

  #menu-btn:checked~.nav-links {
    left: 0%;
  }

  #menu-btn:checked~.btn.menu-btn {
    display: none;
  }

  #close-btn:checked~.btn.menu-btn {
    display: block;
  }

  .nav-links li {
    margin: 15px 10px;
  }

  .nav-links li a {
    padding: 0 20px;
    display: block;
    font-size: 20px;
  }

  .nav-links .drop-menu {
    position: static;
    opacity: 1;
    top: 65px;
    visibility: visible;

    width: 100%;
    max-height: 0px;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s ease;
  }

  #showDrop:checked~.drop-menu,

  /* 
//MEGA BOX FOR HOME ELEMENT */

  #showDrop5:checked~.drop-menu,
  #showMega:checked~.mega-box {
    max-height: 100%;
  }

  #showDrop1:checked~.drop-menu,
  #showMega1:checked~.mega-box {
    max-height: 100%;
  }

  #showDrop2:checked~.drop-menu,
  #showMega2:checked~.mega-box {
    max-height: 100%;
  }

  #showMega3:checked~.mega-box {
    max-height: 100%;
  }


  /* 
//MEGA BOX FOR HOME ELEMENT */


  .nav-links .desktop-item {
    display: none;
  }

  .nav-links .mobile-item {
    display: block;
    color: #f2f2f2;
    font-size: 20px;
    font-weight: 500;
    padding-left: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
  }

  .nav-links .mobile-item:hover {
    background: rgb(12, 41, 78)
  }

  .drop-menu li {
    margin: 0;
  }

  .drop-menu li a {
    border-radius: 5px;
    font-size: 18px;
  }

  .mega-box {
    position: static;
    top: 65px;
    opacity: 1;
    visibility: visible;
    padding: 0 20px;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .mega-box .content {
    box-shadow: none;
    flex-direction: column;
    padding: 20px 20px 0 20px;
  }

  .mega-box .content .row {
    width: 100%;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mega-box .content .row:nth-child(1),
  .mega-box .content .row:nth-child(2) {
    border-top: 0px;
  }

  .content .row .mega-links {
    border-left: 0px;
    padding-left: 15px;
  }

  .row .mega-links li {
    margin: 0;
  }

  .content .row header {
    font-size: 19px;
  }
}

nav input {
  display: none;
}

.body-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding: 0 30px;
}

.body-text div {
  font-size: 45px;
  font-weight: 600;
}



/* 
/////////////////// */

@import url('https://fonts.googleapis.com/css?family=Montserrat');



:root {


  --marquee-height: 12vh;
  /* --marquee-elements: 12; */
  /* defined with JavaScript */
  --marquee-elements-displayed: 3;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);

  color: #eee;
  overflow: hidden;
  position: relative;
}

.marquee:before,
.marquee:after {
  position: absolute;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}

.marquee:before {
  left: 0;

}

.marquee:after {
  right: 0;

}

.marquee-content {

  list-style: none;
  height: 100%;
  align-items: center;
  display: flex;

  animation: scrolling var(--marquee-animation-duration) linear infinite;
}

/* .marquee-content:hover {
animation-play-state: paused;
} */
@keyframes scrolling {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
  }
}

.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4);
  /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* height: 100%; */
  border: 2px solid #eee;
}

@media (max-width: 400px) {
  html {
    font-size: 12px;
  }

  :root {

    --marquee-width: 100%;
    --marquee-height: 12vh;
    --marquee-elements-displayed: 3;
  }

  .marquee:before,
  .marquee:after {
    width: 5rem;
  }
}

/* 
/////////// */

#but {
  box-sizing: border-box;
  width: 95px;
  height: 40px;
  border: 1px solid rgb(78, 119, 160);
  margin: auto;
  border-radius: 100;
  font-family: Verdana,
    Geneva, Tahoma, sans-serif;

  background-color: rgb(107, 161, 216);
  color: white;
  font-size: 20px;
  cursor: pointer;
}

/* 
//////////////////////// */



.collapsible1 {
  background-color: #777;
  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible1:hover {
  background-color: #555;
}

.content11 {
  padding: 0 18px;
  display: none;
  overflow: hidden;

}

/* 
///////////////////// */


/* 
///////////////////// */


@import url('https://fonts.googleapis.com/css?family=Roboto:300');

.body {


  text-align: center;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
}

#eft {
  text-align: center;
}

#eft:first-of-type {
  /* For increasing performance 
                     ID/Class should've been used. 
                     For a small demo 
                     it's okaish for now */
  animation: showup 7s infinite;
}

@keyframes showup {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }

  20% {
    margin-left: -800px;
  }

  35% {
    margin-left: 0px;
  }

  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }

  20% {
    opacity: 1;
    width: 0px;
  }

  30% {
    width: 355px;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    width: 355px;
  }
}

/* 
/////////////////////////////// */






.conus {
  padding: 1em 2em;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;

  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.conus:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

.conus:active {
  transform: translateY(-1px);
}




.conus1 {
  padding: 1em 2em;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #000;
  background-color: rgb(243, 240, 240);
  border: none;

  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.342);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.conus1:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

.conus1:active {
  transform: translateY(-1px);
}

.conus3 {
  padding: 1em 2em;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #000;
  background-color: rgb(243, 240, 240);
  border: none;

  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.342);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}












/* 
//////////////////////////////////// */


/* //////////////////// NDE TITILE ANIMATION////////////////////////// */

#reload {

  animation-delay: 2s;
}

.a {

  text-decoration: none;
  color: inherit;
  font-size: 30px;
}

.p {

  font-weight: 600;
  text-align: center;
  font-size: 38px;
  font-family: Hack, sans-serif;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgb(12, 41, 78), #fff, rgb(12, 41, 78));
  letter-spacing: 1px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 83%;
  animation: shine 15s linear infinite;
  position: relative;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }

  100% {
    background-position-x: 500%;
  }
}



/* //////////////////// NDE TITILE ANIMATION////////////////////////// */


/* //////////////////// why chose us title bar////////////////////////// */


.aa {
  text-decoration: none;
  color: inherit;
  font-size: 20px;
}

.pp {
  font-weight: 700;
  text-align: left;
  font-size: 20px;
  font-family: Hack, sans-serif;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgb(12, 41, 78), #fff, rgb(12, 41, 78));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 22s linear infinite;
  position: relative;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }

  100% {
    background-position-x: 500%;
  }
}

/*  Checkout my other pens on  https://codepen.io/grohit/  */


/* //////////////////// why chose us title bar////////////////////////// */

#hideMeAfter5Seconds {
  animation: hideAnimation 0s ease-in 5s;
  animation-fill-mode: forwards;
}

@keyframes hideAnimation {
  to {
    visibility: hidden;
    width: 0;
    height: 0;
  }
}

/* 
///////////////////////////////////// */
.h1 {
  margin: 0;
  font-size: 80px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 0.2em 0 0.6em 0.3em;
}

.shake-vertical {
  animation: shake-vertical 100ms ease-in-out infinite;
}

@keyframes shake-vertical {
  2% {
    transform: translate(0, 6px) rotate(0);
  }

  4% {
    transform: translate(0, -1px) rotate(0);
  }

  6% {
    transform: translate(0, -7px) rotate(0);
  }

  8% {
    transform: translate(0, -1px) rotate(0);
  }

  10% {
    transform: translate(0, 9px) rotate(0);
  }

  12% {
    transform: translate(0, 1px) rotate(0);
  }

  14% {
    transform: translate(0, 3px) rotate(0);
  }

  16% {
    transform: translate(0, 6px) rotate(0);
  }

  18% {
    transform: translate(0, 0px) rotate(0);
  }

  20% {
    transform: translate(0, 2px) rotate(0);
  }

  22% {
    transform: translate(0, 1px) rotate(0);
  }

  24% {
    transform: translate(0, 3px) rotate(0);
  }

  26% {
    transform: translate(0, 4px) rotate(0);
  }

  28% {
    transform: translate(0, 0px) rotate(0);
  }

  30% {
    transform: translate(0, -8px) rotate(0);
  }

  32% {
    transform: translate(0, 6px) rotate(0);
  }

  34% {
    transform: translate(0, 6px) rotate(0);
  }

  36% {
    transform: translate(0, -4px) rotate(0);
  }

  38% {
    transform: translate(0, 2px) rotate(0);
  }

  40% {
    transform: translate(0, -8px) rotate(0);
  }

  42% {
    transform: translate(0, -9px) rotate(0);
  }

  44% {
    transform: translate(0, -3px) rotate(0);
  }

  46% {
    transform: translate(0, 0px) rotate(0);
  }

  48% {
    transform: translate(0, -7px) rotate(0);
  }

  50% {
    transform: translate(0, 0px) rotate(0);
  }

  52% {
    transform: translate(0, 3px) rotate(0);
  }

  54% {
    transform: translate(0, -4px) rotate(0);
  }

  56% {
    transform: translate(0, 3px) rotate(0);
  }

  58% {
    transform: translate(0, -9px) rotate(0);
  }

  60% {
    transform: translate(0, 9px) rotate(0);
  }

  62% {
    transform: translate(0, -6px) rotate(0);
  }

  64% {
    transform: translate(0, 0px) rotate(0);
  }

  66% {
    transform: translate(0, -4px) rotate(0);
  }

  68% {
    transform: translate(0, 1px) rotate(0);
  }

  70% {
    transform: translate(0, 5px) rotate(0);
  }

  72% {
    transform: translate(0, 0px) rotate(0);
  }

  74% {
    transform: translate(0, -6px) rotate(0);
  }

  76% {
    transform: translate(0, -3px) rotate(0);
  }

  78% {
    transform: translate(0, 3px) rotate(0);
  }

  80% {
    transform: translate(0, 6px) rotate(0);
  }

  82% {
    transform: translate(0, 2px) rotate(0);
  }

  84% {
    transform: translate(0, -3px) rotate(0);
  }

  86% {
    transform: translate(0, 1px) rotate(0);
  }

  88% {
    transform: translate(0, 1px) rotate(0);
  }

  90% {
    transform: translate(0, 10px) rotate(0);
  }

  92% {
    transform: translate(0, -2px) rotate(0);
  }

  94% {
    transform: translate(0, -2px) rotate(0);
  }

  96% {
    transform: translate(0, -6px) rotate(0);
  }

  98% {
    transform: translate(0, -9px) rotate(0);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}



/* 
//////////////////////////////// */


.geeks {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}

.geeks img {
  width: 100%;
  transition: 0.5s all ease-in-out;
}

.geeks:hover img {
  transform: scale(1.5);
}


/* 
//////////////////////////////// */

.geeks1 {
  width: 100%;
  height: 260px;
  overflow: hidden;
  margin: 0 auto;
}

.geeks1 img {
  width: 100%;
  transition: 0.5s all ease-in-out;
}

.geeks1:hover img {
  transform: scale(1.5);
}

/* 
////////////////google_translate //////////////// */
#google_translate_element select {
  background: #0E2A47;
  color: white;
  border: none;
  border-radius: 3px;
  float: right;

}

.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}

/* 
////////////////google_translate //////////////// */


.cta {
  border: none;
  background: none;
}

.cta span {
  padding-bottom: 7px;
  letter-spacing: 3px;
  font-size: 13px;
  padding-right: 5px;
  text-transform: uppercase;
}


.hover-underline-animation {
  position: relative;
  color: rgb(255, 255, 255);
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}





/*
    HTML VIDEO AS BACKGROUND:
    I updated code from Dudley Storey  
*/
.twp-video-background {
  background: #000;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.twp-video-foreground,
.twp-video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
  object-fit: cover;
}

.twp-video-foreground {
  padding-bottom: 56.25%;
  box-sizing: border-box;
}

.twp-video-layer {
  position: absolute;
  width: 100%;
  height: 100%;

  opacity: 0.5;
  box-sizing: border-box;
}

/* 
/////////  LARGE SCRNNER ADJUST ////////// */


#sideimage {

  width: 400px;
  height: 300px;
}

#banner1 {
  margin-top: 160px;
  text-align: center;
}

#banner2 {
  margin-top: 160px;
  text-align: center;
  padding-right: 50px;
}

#WhyChooseUs1 {
  width: 100%;
  height: 400px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#WhyChooseUs2 {
  width: 100%;
  height: 400px;
}

#WhyPEB1 {
  width: 60%;
  height: 90%;
  margin-top: 0px;

}

#WhyPEB2 {
  width: 100%;
  height: 100%;
  margin-top: 100px;
}

#SteelStructureProducts1 {
  width: 100%;
  height: 250px;

}

#SteelStructureProducts2 {
  width: 100%;
  height: 250px;

}

#SteelStructureProducts3 {
  width: 100%;
  height: 250px;

}

#SteelStructureProducts4 {
  width: 100%;
  height: 250px;

}

#SteelStructureProducts5 {
  width: 100%;
  height: 250px;

}

#SteelStructureProducts6 {
  width: 100%;
  height: 250px;

}


#ContactUs23 {
  margin-top: 100px;
  text-align: center
}

#FactoryView0 {
  margin-top: 0px;
  text-align: center;
}

#FactoryView1 {
  margin-top: 0px;
  text-align: center;
}

#FactoryView2 {
  margin-top: 0px;
  text-align: center;

}

#sideimage1 {
  width: 0px;
  height: 0px;
}

@media only screen and (min-width: 0px) and (max-width: 450px) {

  #banner1 {
    margin-top: 110px;
    text-align: center;
  }

  #banner2 {
    margin-top: 0px;
    text-align: center;

    padding: 5px;
  }

  #WhyChooseUs1 {
    width: 100%;
    height: 250px;
  }

  #WhyChooseUs2 {
    width: 100%;
    height: 250px;
  }

  #WhyPEB1 {
    width: 60%;
    height: 90%;
    margin-top: 0px;

  }

  #WhyPEB2 {
    width: 100%;
    height: 100%;
    margin-top: 0px;
  }

  #ContactUs23 {
    margin-top: 20px;
    text-align: center
  }

  #sideimage {
    width: 0px;
    height: 0px;
  }

  #sideimage1 {
    position: absolute;
    top: 50%;
    left: 48.6%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 350px;
  }

  .map-container-5 {
    overflow: hidden;
    padding-bottom: 51.25%;
    position: relative;
    height: 0;
  }

  .map-container-5 iframe {
    left: 0;
    top: 0;
    height: 170px;
    width: 100%;
    position: absolute;
  }

  #FactoryView0 {
    margin-top: 0px;
    text-align: center;
  }

  #FactoryView1 {
    margin-top: 0px;
    text-align: center;
  }

  #FactoryView2 {
    margin-top: 0px;
    text-align: center;
  }

}


@media only screen and (min-width: 450px) and (max-width: 767px) {

  #banner1 {
    margin-top: 110px;
    text-align: center;
  }

  #banner2 {
    margin-top: 0px;
    text-align: center;

    padding: 5px;
  }

  #WhyChooseUs1 {
    width: 100%;
    height: 250px;
  }

  #WhyChooseUs2 {
    width: 100%;
    height: 250px;
  }

  #WhyPEB1 {
    width: 60%;
    height: 90%;
    margin-top: 0px;

  }

  #WhyPEB2 {
    width: 100%;
    height: 100%;
    margin-top: 0px;
  }

  #ContactUs23 {
    margin-top: 20px;
    text-align: center
  }

  #sideimage {
    width: 0px;
    height: 0px;
  }


  .map-container-5 {
    overflow: hidden;
    padding-bottom: 51.25%;
    position: relative;
    height: 0;
  }

  .map-container-5 iframe {
    left: 0;
    top: 0;
    height: 170px;
    width: 100%;
    position: absolute;
  }

  #FactoryView0 {
    margin-top: 0px;
    text-align: center;
  }

  #FactoryView1 {
    margin-top: 0px;
    text-align: center;
  }

  #FactoryView2 {
    margin-top: 0px;
    text-align: center;
  }

}

@media only screen and (min-width: 1601px) {
  #sideimage {
    width: 650px;
    height: 530px;
  }

  #banner1 {
    margin-top: 320px;
    text-align: center;
  }
#achievement{
  width: 100%;
  height: 100%;
}
  #sideimage1 {
    width: 0px;
    height: 0px;
  }

  #banner2 {
    margin-top: 300px;
    text-align: center;
    padding-right: 55px;
  }

  #WhyChooseUs1 {
    width: 100%;
    height: 570px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  #WhyChooseUs2 {
    width: 100%;
    height: 570px;
  }

  #WhyPEB1 {
    width: 60%;
    height: 90%;
    margin-top: 0px;
  }

  #WhyPEB2 {
    width: 100%;
    height: 570px;
    margin-top: 0px;
  }

  #SteelStructureProducts1 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts2 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts3 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts4 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts5 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts6 {
    width: 100%;
    height: 450px;

  }

  #ContactUs23 {
    margin-top: 100px;
    text-align: center
  }

  #FactoryView0 {
    margin-top: 10px;
    text-align: center;
  }

  #FactoryView1 {
    margin-top: 10px;
    text-align: center;
  }

  #FactoryView2 {
    margin-top: 10px;
    text-align: center;
  }

  .map-container-5 {
    overflow: hidden;
    padding-bottom: 51.25%;
    position: relative;
    height: 0;
  }

  .map-container-5 iframe {
    left: 0;
    top: 0;
    height: 620px;
    width: 100%;
    position: absolute;
  }

}

@media only screen and (min-width: 2200px) {
  #sideimage {
    width: 800px;
    height: 660px;
  }

  #sideimage1 {
    width: 0px;
    height: 0px;
  }

  #banner1 {
    margin-top: 400px;
    text-align: center;
  }

  #banner2 {
    margin-top: 380px;
    text-align: center;
    padding-right: 55px;
  }

  #WhyChooseUs1 {
    width: 100%;
    height: 650px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  #WhyChooseUs2 {
    width: 100%;
    height: 650px;
  }

  #WhyPEB1 {
    width: 60%;
    height: 90%;
    margin-top: 0px;
  }

  #WhyPEB2 {
    width: 100%;
    height: 640px;
    margin-top: 0px;
  }

  #SteelStructureProducts1 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts2 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts3 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts4 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts5 {
    width: 100%;
    height: 450px;

  }

  #SteelStructureProducts6 {
    width: 100%;
    height: 450px;

  }

  #ContactUs23 {
    margin-top: 100px;
    text-align: center
  }

  #FactoryView0 {
    margin-top: 20px;
    text-align: center;
  }

  #FactoryView1 {
    margin-top: 20px;
    text-align: center;
  }

  #FactoryView2 {
    margin-top: 20px;
    text-align: center;
  }

  .map-container-5 {
    overflow: hidden;
    padding-bottom: 51.25%;
    position: relative;
    height: 0;
  }

  .map-container-5 iframe {
    left: 0;
    top: 0;
    height: 770px;
    width: 100%;
    position: absolute;
  }

}


/* 
/////////  LARGE SCRNNER ADJUST ////////// */


.imageselect .imagebox {
  position: relative
}

.imageselect .imagebox figure {
  position: relative;
  overflow: hidden
}

.imageselect .imagebox figcaption {
  background: rgba(45, 62, 82, 0.9);
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 20px;
  -webkit-transform: translateY(140%);
  -moz-transform: translateY(140%);
  -ms-transform: translateY(140%);
  -o-transform: translateY(140%);
  transform: translateY(140%);
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  transition: transform 0.5s ease
}

.imageselect .imagebox .caption-title {
  margin-bottom: 0;
  color: #fff
}

.imageselect .imagebox .price {
  color: #fdb714
}

.imageselect .imagebox:hover figcaption {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0)
}

.price {
  color: #f0715f;
  font-size: 1.6667em;
  text-transform: uppercase;
  float: right;
  text-align: right;
  line-height: 1;
  display: block
}





/* 
//////////////////////// */