*,::before,::after{
    margin: 0;
    box-sizing: border-box;
}
a{text-decoration: none;}
img{vertical-align: bottom;}
:disabled{cursor: not-allowed;}
iframe{border: none;}
button{cursor: pointer;}

.container{
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}
.clear{clear: both;}
.row{margin: 0 -15px;}
.row:after{
    content: ""; clear: both; display: block;
}

body{ 
    text-transform: capitalize;
}



button{ 
    all: unset; cursor: pointer;
}
a{text-decoration: none;}

.row .col-1{flex-basis:8.33%;}
.row .col-2{flex-basis:16.66%;}
.row .col-3{flex-basis:25%;}
.row .col-4{flex-basis:33.33%;}
.row .col-5{flex-basis:41.66%;}
.row .col-6{flex-basis:50%;}
.row .col-7{flex-basis:58.33%;}
.row .col-8{flex-basis:66.66%;}
.row .col-9{flex-basis:75%;}
.row .col-10{flex-basis:83.33%;}
.row .col-11{flex-basis:91.66%;}
.row .col-12{flex-basis:100%;}


.row{margin: 0 -15px;
display: flex;
flex-flow: row;
}

body{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}

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

.row[class^="col"]
{
    flex: 1 1 auto;
    padding: 0 15px;
}

.flex-1{ position: relative;}
.flex-1 nav ul{ display: flex; justify-content: space-around; list-style-type: none; font-size: 25px; }
.flex-1 nav ul li a{ color: #001; transition: transform .4s; }
.flex-1 nav ul li{ padding: 1.5em 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
.flex-1 nav ul li a:hover{color: #000; transform: scale(1.2);}
.flex-1 nav ul li a::after{content: ''; display: block; height: 0.10em; width: 0; background: rgba(229, 19, 19, 0.73); transition: all 0.5s;}
.flex-1 nav ul li a:hover::after{width: 100%;}


.flex-2{ position: relative; }
.flex-2 .products{ text-align: center; padding-top: 2em; }
.flex-2 section:nth-child(1){ color: #e0ffff; }
.flex-2 section:nth-child(2){ color: #42455a; background: #e0ffff; } 
.flex-2 section:nth-child(3){ color: #e0ffff; }
.flex-2 section:nth-child(4){ color: #42455a; background: #e0ffff; }
.flex-2 section .container{ margin: 100px; }
.flex-2 section h1{ font-size: 3rem; margin: 20px; }
.flex-2 section h2{ font-size: 40px; text-align: center; text-transform: uppercase; }
.flex-2 section .text-container{ display: flex; }
.flex-2 section .text-container .text-box{ margin: 20px; padding: 20px; background: transparent; }
#inr{ position: relative; top: 0; left: 2em; }
.flex-2 section .text-container .text-box h3{ font-size: 30px; text-align: center; text-transform: uppercase; margin-bottom: 10px; }
.flex-2 figcaption{ color: #001; }
.fa-inr{ color: #000; }
.flex-2 figcaption span{ font-size: 18px; }
@media (max-width: 900px){ section h1{ font-size: 2rem; text-align: center; }
section .text-container{ flex-direction: column; } }
.reveal{ position: relative; transform: translateX(250px); opacity: 0; transition: 1s all ease; }
.reveal.active{ transform: translateY(0); opacity: 1; }

.flex-3 .products{ text-align: center; padding: 1em 0;}
.flex-3 figcaption{ display: none; }
.flex-3{ position: relative; top: 0; left: -4%; }
figure.figurefx {
      display: block;
      position: relative;
      overflow: hidden; /* hide overflowing elements by default */
  }
  figure.figurefx figcaption {
      position: absolute;
      display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
      text-align: center;
      background: white;
      padding: 15px;
      z-index: 100;
      width: 100%;
      max-height: 100%;
      overflow: hidden;
      top: 50%;
      left: 0;
      -moz-transform: translate3d(-100%, -50%, 0); /* position caption outside layout horizontally and centered vertically */
      -webkit-transform: translate3d(-100%, -50%, 0);
      transform: translate3d(-100%, -50%, 0);
      opacity: 0;
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
  }
  figure.figurefx figcaption a {
      text-decoration: none;
  }
  
  /*** Push Up effect ****/figure.pushup img {
      -moz-transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
  }
  figure.pushup figcaption {
      top: 100%;
      opacity: 1;
      -moz-transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
  
  figure.pushup:hover img {
      -moz-transform: translate3d(0, -20px, 0); /* move image up vertically a bit for parallax effect */
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    opacity: .5;
   
  }
  figure.pushup:hover figcaption{
      -moz-transform: translate3d(0, -100%, 0); /* move caption up vertically to fully reveal caption */
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
    box-shadow: 0px -2px 28px rgba(0, 0, 0, 0.3);
  }

  .gradient{ width: 420px; height: 320px; background: linear-gradient(180deg,#A8C3F8,#F188E5); }

.flex-4{ position: relative; }
.flex-4 h2{ text-align: center; padding: 1.5em 0; }
.flex-4 .income{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(35deg,#FA6A85,#ECC977); clear: both;}
.flex-4 .notice{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(-35deg,#84B65F,#E8C93B); clear: both;}
.flex-4 .tds{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(30deg,#E8C93B,#84B65F); clear: both;}
.flex-4 .form16{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(45deg,#F4D062,#FA59C1); clear: both;}
.flex-4 p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; color: #FFF; text-align: center; }

.flex-5{ position: relative; }
.flex-5 h2{ text-align: center; padding: 1.5em 0; }
.flex-5 .income{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(55deg,#56ab2f,#a8e063); clear: both;}
.flex-5 .notice{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(25deg,#000428,#004e92); clear: both;}
.flex-5 .tds{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(30deg,#42275a,#734b6d); clear: both;}
.flex-5 .form16{ position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(115deg,#141E30,#ECC977); clear: both;}
.flex-5 p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; color: #FFF; text-align: center; }

.flex-6{ position: relative; }
.flex-6 h2{ text-align: center; padding: 1.5em 0; }
.flex-6 .income{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(65deg,#fceabb,#f8b500); clear: both;}
.flex-6 .notice{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(95deg,#f85032,#e73827); clear: both;}
.flex-6 .tds{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(110deg,#f79d00,#64f38c); clear: both;}
.flex-6 .form16{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(245deg,#cb2d3e,#ef473a); clear: both;}
.flex-6 p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; color: #FFF; text-align: center; }

.flex-7{ position: relative; }
.flex-7 h2{ text-align: center; padding: 1.5em 0; }
.flex-7 .income{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(105deg,#BE93C5,#7BC6CC); clear: both;}
.flex-7 .notice{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(75deg,#bdc3c7,#2c3e50); clear: both;}
.flex-7 .tds{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(30deg,#ffd89b,#19547b); clear: both;}
.flex-7 .form16{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(455deg,#808080,#3fada8); clear: both;}
.flex-7 p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; color: #FFF; text-align: center; }

.flex-8{ position: relative; }
.flex-8 h2{ text-align: center; padding: 1.5em 0; }
.flex-8 .income{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: #e7e7e8; border: 1px solid #d7d7d8; clear: both;}
.flex-8 .notice{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(155deg,#2C3E50,#FD746C); clear: both;}
.flex-8 .tds{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(-90deg,#2C3E50,#4CA1AF); clear: both;}
.flex-8 .form16{ margin: 1em 0; position: relative; width: 280px; height: 280px; border-radius: 5px; background: linear-gradient(-55deg,#e96443,#904e95); clear: both;}
.flex-8 p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; color: #FFF; text-align: center; }
.flex-8 img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; width: 100%; }

.flex-9 nav ul{ display: flex; align-items: center; justify-content: center;  list-style-type: none; font-size: 15px; }
.flex-9 nav ul li a{ color: #001; transition: transform .4s; }
.flex-9 nav ul li{ margin-left: 12px; padding: 1.5em 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
.flex-9 nav ul li a:hover{color: #000; transform: scale(1.2);}
.flex-9 nav ul li a::after{content: ''; display: block; height: 0.10em; width: 0; background: rgba(229, 19, 19, 0.73); transition: all 0.5s;}
.flex-9 nav ul li a:hover::after{width: 100%;}

.flex-10{ background: #000; color: #FFF; height: 6em;  overflow: hidden; position: relative; }
.flex-10 h2{ margin-top: 2em; font-size: 30px; }
.flex-10 p{ padding: 1em 0; }
.flex-10 a{ color: #FFF; }
.flex-10 a:hover{color: #FFF; transform: scale(1.1);}
.flex-10 a::after{content: ''; display: block; height: 0.10em; width: 0; background: rgba(229, 19, 19, 0.73); transition: all 0.5s;}
.flex-10 a:hover::after{width: 100%;}
.flex-10 nav ul{ list-style: none; text-align: justify; }
.flex-10 nav ul li{ display: flex; justify-content: flex-start; }
.flex-10 nav ul li a{ color: #FFF; position: relative; left: -2.2em; margin: .5em 0; }
.flex-10 i{ margin-left: 5px; margin-top: 25px; font-size: 26px; position: relative; left: 45%; }
.flex-10 p{ position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); }

/* Media Screen  */

@media screen and (max-width:1220px){               /* for ipad landscape */
    .row .col-1 { flex-basis: 8.33%; max-width: 8.33%; }
    .row .col-2 { flex-basis: 16.66%; max-width: 16.66%; }
    .row .col-4 { flex-basis: 33.33%; max-width: 33.33%; }
    .row .col-6 { flex-basis: 50%; max-width: 50%; }
    .row .col-8 { flex-basis: 66.66%; max-width: 66.66%; }
    .row .col-12 { flex-basis: 100%; max-width: 100%; }
    .flex-2 img{ position: relative; left: -12em; }
    .flex-2 figcaption{ display: none; }
    .reveal.active{ left: 12%; }
    .flex-3 .products{ position: relative; left: 4%;}
    .flex-4 .income{position: relative; left: -56.58%; width: 230px; }
    .flex-4 .notice{ position: relative; left: -56.58%; width: 230px; }
    .flex-4 .tds{ position: relative; left: -56.58%; width: 230px; }
    .flex-4 .form16{ position: relative; left: -56.58%; width: 230px; }
    .flex-5 .income{ position: relative; left: -56.58%; width: 230px; }
    .flex-6 .income{ width: 230px; position: relative; left: -56.58%;}
    .flex-7 .income{ width: 230px;  position: relative; left: -56.58%;}
    .flex-8 .income{ width: 230px;  position: relative; left: -56.58%;}
    .flex-5 .notice{ position: relative; left: -56.58%; width: 230px; }
    .flex-6 .notice{ width: 230px; position: relative; left: -56.58%;}
    .flex-7 .notice{ width: 230px;  position: relative; left: -56.58%;}
    .flex-8 .notice{ width: 230px;  position: relative; left: -56.58%;}
    .flex-5 .tds{ position: relative; left: -56.58%; width: 230px; }
    .flex-6 .tds{ width: 230px; position: relative; left: -56.58%;}
    .flex-7 .tds{ width: 230px;  position: relative; left: -56.58%;}
    .flex-8 .tds{ width: 230px;  position: relative; left: -56.58%;}
    .flex-5 .form16{ position: relative; left: -56.58%; width: 230px; }
    .flex-6 .form16{ width: 230px; position: relative; left: -56.58%;}
    .flex-7 .form16{ width: 230px;  position: relative; left: -56.58%;}
    .flex-8 .form16{ width: 230px;  position: relative; left: -56.58%;}
   .flex-10 h2{ text-align: center; }
   .flex-10 p{ text-align: center; }
   .flex-10 i{ position: relative; left: 20px; }
   .flex-10 nav ul li a{ left: 3.2em; }
}

@media screen and (max-width:980px){                 /* for ipad Portrait */
    .row .col-t-1{ flex-basis: 8.33%;}
    .row .col-t-2{ flex-basis: 16.66%;}
    .row .col-t-3{ flex-basis: 25%;}
    .row .col-t-4{ flex-basis: 33.33%; max-width: 33.33%;}
    .row .col-t-5{ flex-basis: 41.66%;}
    .row .col-t-6{flex-basis: 50%; max-width: 50%;}
    .row .col-t-7{flex-basis: 58.33%;}
    .row .col-t-8{flex-basis: 66.66%; max-width: 66.66%;}
    .row .col-t-9{flex-basis: 75%;}
    .row .col-t-10{flex-basis: 83.33%;}
    .row .col-t-11{flex-basis: 91.66%;}
    .row .col-t-12{flex-basis: 100%; max-width: 100%;}
    .flex-1 nav ul li a{ font-size: 20px; }
    .flex-2 img{ overflow: hidden; margin-left: 8em;}
    .flex-2 figcaption{ display: block; margin-left: -4em; }
    .flex-4 .income{ width: 175px; height: 175px; }
    .flex-4 .notice{ width: 175px; height: 175px; }
    .flex-4 .form16{ width: 175px; height: 175px; }
    .flex-4 .tds{ width: 175px; height: 175px; }
    .flex-5 .income{ width: 175px; height: 175px; }
    .flex-6 .income{ width: 175px; height: 175px; }
    .flex-7 .income{ width: 175px; height: 175px; }
    .flex-8 .income{ width: 175px; height: 175px; }
    .flex-5 .notice{ width: 175px; height: 175px; }
    .flex-6 .notice{ width: 175px; height: 175px; }
    .flex-7 .notice{ width: 175px; height: 175px; }
    .flex-8 .notice{ width: 175px; height: 175px; }
    .flex-5 .form16{ width: 175px; height: 175px; }
    .flex-6 .form16{ width: 175px; height: 175px; }
    .flex-7 .form16{ width: 175px; height: 175px; }
    .flex-8 .form16{ width: 175px; height: 175px; }
    .flex-5 .tds{ width: 175px; height: 175px; }
    .flex-6 .tds{ width: 175px; height: 175px; }
    .flex-7 .tds{ width: 175px; height: 175px; }
    .flex-8 .tds{ width: 175px; height: 175px; }
    
    
}
@media screen and (max-width:767px){                 /* for Mobile landscape */
    .row .col-m-1{ flex-basis: 8.33%;}
    .row .col-m-2{ flex-basis: 16.66%;}
    .row .col-m-3{ flex-basis: 25%;}
    .row .col-m-4{ flex-basis: 33.33%; max-width: 33.33%;}
    .row .col-m-5{ flex-basis: 41.66%;}
    .row .col-m-6{flex-basis: 50%; max-width: 50%;}
    .row .col-m-7{flex-basis: 58.33%;}
    .row .col-m-8{flex-basis: 66.66%; max-width: 66.66%;}
    .row .col-m-9{flex-basis: 75%;}
    .row .col-m-10{flex-basis: 83.33%;}
    .row .col-m-11{flex-basis: 91.66%;}
    .row .col-m-12{flex-basis: 100%; max-width: 100%;}
    .flex-2 img{ position: relative; left: 12em;}
    .flex-1 nav ul li a{ font-size: 18px; }
    
}

@media screen and (max-width:460px){                 /* for Mobile Portrait */
    .row .col-p-1{ flex-basis: 8.33%;}
    .row .col-p-2{ flex-basis: 16.66%;}
    .row .col-p-3{ flex-basis: 25%;}
    .row .col-p-4{ flex-basis: 33.33%; max-width: 33.33%;}
    .row .col-p-5{ flex-basis: 41.66%;}
    .row .col-p-6{flex-basis: 50%; max-width: 50%;}
    .row .col-p-7{flex-basis: 58.33%;}
    .row .col-p-8{flex-basis: 66.66%; max-width: 66.66%;}
    .row .col-p-9{flex-basis: 75%;}
    .row .col-p-10{flex-basis: 83.33%;}
    .row .col-p-11{flex-basis: 91.66%;}
    .row .col-p-12{flex-basis: 100%; max-width: 100%;}
    .flex-1 nav ul li a{ font-size: 9px; }
    .flex-2 img{ left: -23.5em; }
    .flex-2 figcaption{ margin-left: -6em; }
    #inr{ display: none; }
    .fa-inr{ display: none; }
    /* figure.pushup img{ width: 420px; height: 330px; } */
}