h1, h2, h3, h4, h5, h6, a, p, figcaption, footer,ul, li,figure,svg,img{
    margin: 0;
    padding: 0;
    font-family:  "Cairo", sans-serif;  
    /* font-family: "Josefin Sans", sans-serif; */
}

*{
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.main{
}

  body{
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #FFFAF4;
}

a{
  text-decoration: none;
  color: #000;
}

.heroSec{
    width: 100%;
    height: 100vh;
    /* background-color: rgb(156, 231, 183); */
    position: relative;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    background-image: url(imgs/heroImg.jpg);
    background-attachment: fixed;
    
}



.heroNav{
    width: 100%;
    height: 12vh;
    background-color: #144C54;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    justify-content: center;
    display: inline-flex;
align-items: center;
gap:37%;
position: fixed;
z-index: 99;
}

.heroNav ul{
    list-style-type: none;
    display: flex;
    align-items: right;    
    gap: 3vw;
    position: relative;
    z-index: 1;
}


.heroNav ul li{
    position: relative;
    padding: 0 10px;
    z-index: 2;
}

.heroNav ul li a{
    color: #FFF;
text-align: right;
font-family:  "Cairo", sans-serif;  
font-size: 1.1vw;
font-style: normal;
font-weight: 600;
line-height: normal;
position: relative;
z-index: 1;
}

.hoverRect{
    position: absolute;
    right: 0;
    width: 15px;
    background-color: #4095A5;
    height: 100%;
    transition: 300ms;
}

.heroNav ul li:hover .hoverRect{
width: 100%;
background-color: #4095A5;
transition: 300ms;
padding: 2px 8px 2px 8px;

}

.notsel{
    /* margin-right: 50px;
    padding: 2px 4px 2px 0;
    width: 15px;
    background-color: #144C54;
    transition: 300ms; */

}

/* .notsel:hover{
    padding: 2px 6px 2px 6px;

    width: 15px;
    transition: all 300ms;

} */

.sel{
    padding: 2px 6px 2px 6px;

    background-color: #4095A5;

}

.heroTxtCont{
    width: 70vw;
    margin: 0 auto;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    bottom: 0;

}

.heroTxt{
    display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 55px;
position: absolute;
right: 0;
/* background-color: #4095A5; */

}

.heroTtl1{
    color: #FFF;
text-align: right;
leading-trim: both;
text-edge: cap;
text-shadow: 0px 4px 14px rgba(0, 0, 0, 0.35);
font-family: "Cairo", sans-serif;
font-size: 58px;
font-style: normal;
font-weight: 900;
line-height: 163%; /* 94.54px */
}

.CTACont{
    /* position: absolute;
    right: 0;
    bottom: 0; */
}

.ctaTtl{
    color: #FFF;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.CTAbtn{
    width: 262.3px;
height: 78.182px;
/* background-color: aquamarine; */
margin-top: 10px;
background-image: url(icons/btnTex.svg);
background-repeat: no-repeat;
float: right;
position: relative;
justify-content: center;
align-items: center;
margin-right: -9%;
transition: 300ms;

}

.CTAbtn:hover .CTAtxt{
    color: #d7983a;
    transition: 300ms;
}

.CTAtxt{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 26px;
font-style: normal;
font-weight: 800;
line-height: normal;
position: absolute;
top: 50%;
left: 28%;
width: 100%;
transform: translate(-50%,-50%);
transition: 300ms;

}

.noteCont{
    width: 376px;
    height: 376px;
    position: absolute;
    z-index: 2;
    bottom: -3vh;
    left: 1.5%;

}

.noteKalam{
    /* background-color: #3a59d7; */
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-10deg);
}

.howQ{
    color: #084C56;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: normal;
position: absolute;

}

.howP{
    color: #524B4B;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
margin-top: 46px;
line-height: 160%;
}

.dividerCont{
    width: 100%;
    position: relative;
    margin: -80px auto;
}

.divider{
    width: 100%;
    margin: 0 auto;
}

.downArrPos{
    width: 12%;
    position: absolute;
    bottom: 0%;
    right: 15%;
    transform: translate(-35%);
    transform: rotate(168.689deg);
    z-index: 3;
}

.sec1Sec{
    width: 100%;
    float: left;
    height: 870px;
    /* background-color: aqua; */
    position: relative;
    z-index: 1;
    margin-top: 50px;
    overflow: hidden;
}

.sec1{
    width: 1080px;
    height: 715px;
    /* background-color: #d7983a; */
    margin: 140px auto;
    position: relative;
    
}

.secNameCont{
    display: inline-flex;
padding: 17px 12px 10px 58px;
justify-content: center;
float: left;
align-items: center;
gap: 10px;
background: #144C54;
color: #FFFAF4;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 40.46px;
font-style: normal;
font-weight: 700;
line-height: 126.5%; /* 51.182px */
}

.row1{
    width: 982px;
    height: 204px;
    /* background-color: #7ae2d3; */
    float: right;
    position: relative;
}

.word1{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 70.46px;
font-style: normal;
font-weight: 500;
line-height: 126.5%;
position: absolute;
top: 30px;
right: 0;
 /* 89.132px */
}

.word2{
    color: #1F7E8C;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 140.2px;
font-style: normal;
font-weight: 800;
line-height: 126.5%; /* 177.353px */
position: absolute;
bottom: -19px;
right: 160px;

}




.row2{
    width: 1045px;
    height: 161px;
    float: left;
    position: relative;
    /* background-color: #7ae2a5; */

}

.word3{
    color: #67797C;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 70.46px;
font-style: normal;
font-weight: 600;
line-height: 126.5%; /* 89.132px */
position: absolute;
top: 20px;
right: 120px;
}

.word4{
    color: #11444B;
text-align: right;
font-family: -serif;
font-size: 99.2px;
font-style: normal;
font-weight: 800;
line-height: 126.5%; /* 125.488px */
position: absolute;
bottom: 0;
left: 165px;
font-family: "Cairo", sans-serif;

}


.word5{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 50.459px;
font-style: normal;
font-weight: 500;
line-height: 126.5%; /* 63.831px */
position: absolute;
bottom: 15px;
left: 0;
}

.col1{
    width: 287px;
    height: 82px;
    /* background-color: #9187de; */
    float: left;
    position: absolute;
    left: -102px;
    top:486px;
    transform: rotate(-90deg);

}

.word6{
    color: #1F767C;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 60.197px;
font-style: normal;
font-weight: 700;
line-height: 136.5%; /* 82.169px */
}

.illustr1{
    position: absolute;
    width: 958px;
    height: 715px;
    /* background-color: coral; */
    right: 6px;
}

.girlCont{
    width: 712px;
    height: 564px;
    position: absolute;
    right: -15px;
}

.stat1{
    padding: 5px 36px 30px 36px;
    background-color: #398F95;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    position: absolute;
    right: 0;
    bottom: 0;
}

.statNo{
    color: #FFC774;
text-align: center;
leading-trim: both;
text-edge: cap;
font-family: "Cairo", sans-serif;
font-size: 96.46px;
font-style: normal;
font-weight: 900;
line-height: 126.5%; /* 122.022px */
}

.textLayer{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8;
    mix-blend-mode: multiply;
    left: 0;
    top: 0;
}

.takmlt{
    color: #FFF;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 128%; /* 22.68px */
}

.shreet{
    width: 39px;
    position: absolute;
height: 3px;
background: #F9B44D;
bottom: 109px;
left:40px;
}

.sabab{
    width: 177px;
    height: 33px;
    background: #F9B44D;
    margin-top: 40px;
    position: relative;
}

.sababTxt{
    color: #FFF;
    text-align: center;
font-family: "Cairo", sans-serif;
font-size: 31px;
font-style: normal;
font-weight: 700;
line-height: 97.5%; /* 30.225px */
letter-spacing: 0.93px;
position: absolute;
bottom: 20px;
}

.sec2Sec{
    width: 100%;
    height: 950px;
    /* background-color: aquamarine; */
    float: left;
    margin-top: 220px;
    position: relative;
    margin-bottom: 150px;
    overflow: hidden;
}

.sec2{
    width: 895px;
    height: 632px;
    /* background-color: #FFC774; */
    margin: 253px auto;
    position: relative;
}

.txt1Cont{
    width: 760px;
    height: 145px;
    float: left;
    /* background-color: antiquewhite; */
    position: relative;
    z-index: 1;
    margin-top: 70px;
}

.ribbonTxt{
    color: #083949;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 40.2px;
font-style: normal;
font-weight: 600;
line-height: 136.5%; /* 54.873px */
position: absolute;
z-index: 1;
top: 0;
right: 0;
}

.ribbonPar{
    position: absolute;
z-index: 1;
color: #363333;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 16.139px;
font-style: normal;
font-weight: 500;
line-height: 150%;
top: 65%;
right: 40%;
transform: translate(20%,-50%);
}

.row1sec2{
    width: 375px;
    height: 60px;
    /* background-color: #d7983a; */
    position: absolute;
    top: 156px;
    left: 0;
}

.r1s2w1{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 44.2px;
font-style: normal;
font-weight: 600;
line-height: 136.5%; /* 60.333px */
position: absolute;
right: 0;
}

.row2s2{
    width: 794px;
    height: 191px;
    position: absolute;
left: 0;
top: 220px;
/* background-color: #398F95; */
}

.r2s2w2{
    color: #084C56;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 140px;
font-style: normal;
font-weight: 800;
line-height: 136.5%; /* 191.1px */
position: absolute;
right: 0;

}

.row3s2w3{
    width: 274px;
    height: 60px;
    /* background-color: #673995; */
    position: absolute;
    left: 0;
top: 414px;


}

.r3w3{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 44.2px;
font-style: normal;
font-weight: 600;
line-height: 136.5%; /* 60.333px */
}

.illust2{
    position: absolute;
    width: 690px;
height: 631px;
/* background-color: rgb(148, 153, 205); */
right: 0;
}

.pillsPos{
    position: absolute;
    width: 54px;
    top: 106px;
    right: 130px;
}

.ribbon2{
    position: absolute;
    bottom: 0;
    right: 0;
}

.sec3{
    width: 1206px;
    height: 895px;
    /* background-color: rgb(24, 97, 143); */
    margin: 110px auto;
    position: relative;
    overflow: hidden;
}

.sec3ttl1{
    color: #FFF;
    width: 975px;
    margin: 0 auto;
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 99.119px;
font-style: normal;
position: relative;
z-index: 1;
font-weight: 800;
line-height: 136.5%; /* 135.298px */
}

.illHolder{
    position: relative;
    width: 489px;
    height: 513px;
    /* background-color: coral; */
    margin: -150px auto;
}

.loopCont{
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    to {
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

.noteCont2{
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 334px;
    height: 450px;
    /* background-color: darkcyan; */
    background-image: url(icons/note3.svg);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 12px;
}

.notettl2{
    color: #084C56;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 24.2px;
font-style: normal;
font-weight: 700;
line-height: 136.5%; /* 33.033px */
}

.notetxt{
    color: #154768;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 20.2px;
font-style: normal;
font-weight: 600;
line-height: 156.5%; /* 31.613px */
width: 255px;
}

.utryThisCont{
    width: 216px;
    height: 227px;
    /* background-color: honeydew; */
    position: absolute;
    right: 30px;
    bottom: 150px;
}

.tryTtl{
    color: #FFF;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 29.2px;
font-style: normal;
font-weight: 600;
line-height: 136.5%; /* 39.858px */
margin-right: 26px;
}


.para {
    position: relative;
    overflow: hidden;
    float: left;
    width: 100%;
    height: 150px;
    margin-top: 150px;
    background: #FFFAF4;
    z-index: -1;
  }
  .wave {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(wave.png);
    background-size: 1000px 100px;
    animation: animate 4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.25s);
  }
  .wave#wave1 {
    z-index: 1000;
    opacity: 1;
    background-position-x: 400px;
  }
  .wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    background-position-x: 300px;
  }
  .wave#wave3 {
    z-index: 998;
    opacity: 0.2;
    background-position-x: 200px;
  }
  .wave#wave4 {
    z-index: 997;
    opacity: 0.7;
    background-position-x: 100px;
  }
  @keyframes animate {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(10px);
    }
  }
  .sec {
    overflow: hidden;
    position: relative;
    float: left;
    width: 100%;
    height: 2160px;
    background: linear-gradient(180deg, #46C0D4 0%, #0E7A92 22.66%, #1F5176 39.52%, #164768 56.78%, #0B2028 85.04%);

  }
  .sec h2 {
    font-size: 3em;
    color: #111;
  }
  .sec p {
    font-size: 1.2em;
    color: #111;
  }
  

  .then{
    color: #000;
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 60.197px;
font-style: normal;
font-weight: 800;
line-height: 136.5%;
 /* 82.169px */
  }

  .mySlides {
    display: none;
  }
  
  .fade {
    animation: fadeEffect 3s linear infinite;
  }
  
  @keyframes fadeEffect {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }

  .sec4Sec{
    overflow: hidden;
    margin: 0 auto;
    width: 1300px;
    height: 990px;
    /* background-color: lightsteelblue; */
    position: relative;
  }

  .row1s4{
    width: 100%;
/* height: 64px; */
/* position: relative; */
color: #FFF;
/* background-color: #0E7A92; */
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 44.2px;
font-style: normal;
font-weight: 600;
line-height: 136.5%; 
margin-top: 20px;
  }

  .row2s4{
    width: 100%;
    color: #FFF;
    text-align: center;
    font-family: "Cairo", sans-serif;
    font-size: 90.2px;
    font-style: normal;
    font-weight: 800;
    line-height: 136.5%;
    /* background-color: #7ec85f; */

  }

  .row3s4{
    width: 87%;
    color: #FFF;
    text-align: left;
    font-family: "Cairo", sans-serif;
    font-size: 90.2px;
    font-style: normal;
    font-weight: 800;
    line-height: 136.5%; /* 123.123px */
  }

  .row4s4{
    width: 100%;
    text-align: left;
    color: #FFF;
    font-family: "Cairo", sans-serif;
    font-size: 50.2px;
    font-style: normal;
    font-weight: 600;
    line-height: 136.5%; /* 68.523px */
  }

  .ill3Pos{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 389px;
  }

  .stat3{
    width: 235px;
    height: 235px;
    border-radius: 50%;
    background: #FDECD3;
    background-image: url(icons/circletexture.svg);
    position: absolute;
    left: 20px;
    top: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2px;
  }

  .stat3ttl{
    color: #103650;
font-family: "Cairo", sans-serif;
font-size: 64.2px;
font-style: normal;
font-weight: 800;
line-height: 136.5%; /* 87.633px */
  }

  .stat3txt{
    width: 184px;
    color: #113144;
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 136.5%; /* 27.3px */
  }


  .stat4{
    width: 446px;
    height: 356px;
    /* background-color: #83591b; */
    margin-top: 0;
    position: relative;
  }

  .stat4Shr{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 395px;
    height: 95px;
    background-image: url(icons/sta4t4shr.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .stat4ttl{
    color: #10354D;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 26.2px;
font-style: normal;
font-weight: 700;
line-height: 136.5%; /* 35.763px */
  }

  .frameCont{
    width: 363px;
    height: 287px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(icons/frameScr.svg);
    display: flex;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }

.frTtl{
    color: #FFF;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 18.2px;
font-style: normal;
font-weight: 500;
line-height: 136.5%; /* 24.843px */
}

  .numbStr{
    color: #FED291;
text-align: right;
leading-trim: both;
text-edge: cap;
font-family: "Cairo", sans-serif;
font-size: 50.2px;
font-style: normal;
font-weight: 800;
line-height: 136.5%; /* 72.618px */
  }

  .ftrTxt2{
    width: 304px;
    color: #FFF;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 146.5%; /* 24.57px */
padding-right: 20px;
  }

  .secCTA{
    width: 345px;
    height: 150px;
    /* background-color: #38aac3; */
   position: absolute;
   bottom:26px;
   left: 50%;
   transform: translateX(-50%);
  }

  .ctaTtl2{
    color: #FFF;
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 38.561px;
font-style: normal;
font-weight: 700;
line-height: 136.5%; /* 52.635px */
  }

  .CTAbtn2{
    width: 255px;
    height: 92px;
    /* background-color: #0E7A92; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 14px auto;
    background-image: url(icons/ctatext2.svg);
    transition: 300ms;

  }

  .ctatxt3{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 40.088px;
font-style: normal;
font-weight: 900;
line-height: normal;
transition: 300ms;

  }

  .CTAbtn2:hover .ctatxt3{
    color: #d7983a;
    transition: 300ms;
  }

  .sec5Sec{
    width: 100%;
    float: left;
    height: 1362px;
    /* background-color: #714e23; */
    position: relative;
    overflow: hidden;
  }

  .sec6Hero{
    float: left;
    /* max-width: 50%; */
    width: 48%;
  }

  .sec6TxtCont{
    float: right;
/* background-color: #0E7A92; */
    width: 42%;
    /* height:45%; */
    margin-top: 8%;
    position: absolute;
    right: 5.5%;
}

.secTxtCont2{
    float: right;
    /* background-color: #0e9228; */
        width: 42%;
        margin-top: 28%;
        position: absolute;
        right: 5.5%;
    
}

.secTxtCont3{
    float: right;
    /* background-color: #0e9228; */
        width: 42%;
        margin-top: 37%;
        position: absolute;
        right: 0;
    
}

  .sec6ttl{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 2vw;
font-style: normal;
font-weight: 600;
line-height: 136.5%; /* 56.238px */
  }

  .sec6ttl2{
    color: #1F7E8C;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 4.2vw;
font-style: normal;
font-weight: 800;
line-height: 141.5%; /* 71.928px */
margin-top: 20px;
float: right;
width: 99%;
  }

  .sec6txt{
    float: right;
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 1.4vw;
font-style: normal;
font-weight: 400;
line-height: 166.5%; /* 24.843px */
position: absolute;
width: 56%;
bottom: -1px;
right: 37%;
  }

  .shreet7{
    width: 17%;
height: 4px;
position: absolute;
background: #124046;
left: 10%;
bottom: 4px;
  }

  .but{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 1.5vw;
font-style: normal;
font-weight: 600;
line-height: 136.5%; /* 36.75px */
  }

  .but2{
    color: #124046;
text-align: right;
font-family: "Cairo", sans-serif;
font-size: 2vw;
color: #084C56;
font-style: normal;
font-weight: 800;
line-height: 136.5%; /* 53.508px */  
position: relative;
z-index: 1;
margin-right: 8%;
}

.shreetC{
    position: absolute;
    height: 82px;
    right: 0;
    bottom: -10px;
    width: 62%;
}

.therTypesSec{
    width: 1120px;
    height: 447px;
    margin: 0 auto;
    /* background-color: #bebde3; */
   
}

.therSec{
    width: 100%;
    float: left;
    /* background-color: #0e9228; */
    margin-top: 120px;

}

.therTtl{
    color: #144C54;
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 39.2px;
font-style: normal;
font-weight: 700;
line-height: 136.5%; /* 53.508px */
}

.ther1Cont{
    width: 364px;
height: 360px;
float: right;
/* background-color: #d3f7fd; */
position: relative;
z-index: 1;
margin-top: 30px;
}

.ther1Pos{
    position: absolute;
    width: 198px;
    height: 146px;
    /* background-color: #0E7A92; */
    bottom: 0;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
}

.ther1NameC{
    width: 104px;
height: 146.4px;
background: #FFEACA;
margin: 0 auto;
}

.ther1ttl{
    color: #144C54;
    position: absolute;
    z-index: 1;
    bottom: 35%;
    transform: translateY(50%);
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 24.2px;
font-style: normal;
font-weight: 700;
line-height: 136.5%; /* 33.033px */
}

.banner{
    float: left;
    width: 100%;
height: 261px;
position: relative;
background: #0C303E;
padding: 50px 0 50px 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.bannerTtl{
    display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}

.bannerttl1{
    color: #FFF;
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 49.2px;
font-style: normal;
font-weight: 800;
line-height: 136.5%; /* 67.158px */
}

.bannertxt{
    color: #FFF;
text-align: center;
font-family: "Cairo", sans-serif;
font-size: 28.195px;
font-style: normal;
font-weight: 500;
line-height: 136.5%; /* 38.487px */
}

.decorB{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.decorB:nth-child(4){
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

footer{
   
    background: #DEFAFF;
    float: left;
    width: 100%;
    padding: 30px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 40px;

    margin-top: 100px;
  }

  .conentfooter{
    display: flex;
padding-bottom: 10.667px;
justify-content: space-between;
align-items: center;
/* align-self: stretch; */
border-bottom: 1px solid #158e97b4;
  }

  .navftr{
    display: flex;
gap: 25px;
  }

  .nav{
    display: flex;
align-items: center;
gap: 17.67px;
list-style-type: none;

  }

  .nav li{
    padding: .1vw .4vw .1vw .4vw;
  
  }
  
  .nav a{
    /* padding: 0 2vw; */
    padding: 0 .2vw .5vw .2vw;
    background-color: #ffffff00;
    border-bottom: #524d8300 1px;
    border-top: #524d8300 1px;
text-align: center;
    height: 0;
    transition: 300ms;
  }
  
  /* .nav a:hover{
    padding: .5vw .2vw .5vw .2vw;
    height: inherit;
    background-color: #ffffff;
    border-bottom: #524d83 2px;
    border-top: #524d83 2px;
  
  } */

  .btm{
    display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
  }

  .btmtxt{
    color: #939393;
font-family: "Cairo";
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 133.333% */
letter-spacing: -0.09px;
position: relative;
z-index: 1;
  }


.hoverRect2{
    position: absolute;
    right: 0;
    width: 2px;
    background-color: #4095A5;
    height: 100%;
    transition: 300ms;
}

  .nav li:hover .hoverRect2{
    width: 100%;
    background-color: #4095A5;
    transition: 300ms;
    padding: 2px 8px 2px 8px;
    
    }

    .nav li:hover a{
       
        color: #fff;
        }

    
  .hidden{
    opacity: 0;
    transition: cubic-bezier(0.23, 1, 0.320, 1) 650ms;
    /* transform: translateY(200px); */
  
  
  }
  
  .jump{
        transform: translate(-50%,0);

  }

  .jump3{
    transform: translate(50%,0);

}

  .jump2{
    transform: translate(0,100px);

  }
  
  .show{
    opacity: 1;
    transform: translate(0,0);
  
  }

  .delay{
    transition-delay: 200ms;
  }

  .delay:nth-child(2){
    transition-delay: 400ms;

  }

  .delay:nth-child(3){
    transition-delay: 600ms;

  }

  /* .delay:nth-child(4){
    transition-delay: 1600ms;

  }

  .delay:nth-child(5){
    transition-delay: 1800ms;

  }

  .delay:nth-child(6){
    transition-delay: 2000ms;

  }
  .delay:nth-child(7){
    transition-delay: 2500ms;

  } */