@font-face {
     font-family: "Brown Regular";
     src: url(../css/brown-regular.woff2);
}

@font-face {
     font-family: "Brown Light";
     src: url(../css/brown-light.woff2);
}

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body {
     font-family: Brown Regular;
     overflow-x: hidden;
}

ul {
     list-style: none;
}

a {
     text-decoration: none;
}

html {
     scroll-behavior: smooth;
}

.fontlight {
     font-family: Brown Light;
}

.font_regular {
     font-family: Brown Regular;
}

.container {
     padding-left: 30px;
     padding-right: 30px;
     width: auto;
}

:root {
     --white: white;
     --black: black;
     /* --dark_blue: #081d35; */
     --green: #006845; 
     --dark_blue: #00023E;
     --mdblue: rgb(0, 104, 69);
     --light_blue: rgb(0, 104, 69);
     --very_light_blue: #ecefff;
     --gray: gray;
     --light_gray: #f9fafb;
     --footer_txt_color: #c0c1c2;
}

/* loader */

.loaders {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--black);
     transition: opacity 0.75s, visibility 0.75s;
     z-index: 5;
}

.loaders-hidden {
     opacity: 0;
     visibility: hidden;
}

.loaders::after {
     content: "";
     width: 75px;
     height: 75px;
     border: 15px solid #DDDDDD;
     border-top-color: var(--light_blue);
     border-radius: 50%;
     animation: loading 0.75s ease infinite;
}

@keyframes loading {
     from {
          transform: rotate(0turn);
     }

     to {
          transform: rotate(1turn);
     }
}



/* end loader */


/* header */

.header {
     position: fixed;
     line-height: initial;
     top: 0;
     width: 100%;
     background-color: transparent;
     z-index: 99;
     transition: 0.3s;
     -webkit-transition: all ease-out .5s;
     -moz-transition: all ease-out .5s;
     -o-transition: all ease-out .5s;
     transition: all ease-out .5s;
}
.header:hover {
     background-color: var(--dark_blue);
}
.active {
     background-color: var(--dark_blue);
}
nav {
     display: flex;
     justify-content: space-between;
     align-items: center !important;
     height: 100px;
     width: 100%;
     padding: 20px 100px;
}
.service_nav,
.about_nav {
     background-color: var(--dark_blue);
}
.logo img {
     height: 58px;
     width: auto;
}
.menu {
     display: flex;
     justify-content: center;
     align-items: center;
}
.menu a {
     display: block;
     padding: 7px 30px;
     font-size: 17px;
     font-weight: 500;
     transition: 0.2s all ease-in-out;
     color: var(--white);
}
.menu:hover a {
     opacity: 0.4;
}
.menu a:hover {
     opacity: 1;
     color: #fff;
}
.menu-icon {
     display: none;
}
#menu-toggle {
     display: none;
}
#menu-toggle:checked~.menu {
     transform: scale(1, 1);
}
.get_btn {
     padding: 6px 25px;
     border-radius: 50px;
     color: var(--white);
     background-color: var(--mdblue);
     transition: 0.3s;
}
.get_btn:hover {
     background-color: var(--white);
     color: var(--dark_blue);
}
.lb {
     color: var(--mdblue) !important;
}
.get_btn_menu {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
}

@media (min-width: 1025px) and (max-width: 1130px) {
     nav{
          padding: 20px 40px;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     nav {
          padding: 20px 50px;
     }
     .get_btn {
          padding: 6px 25px;
     }
     .logo img {
          height: 36px;
          width: auto;
     }
}
@media (min-width: 340px) and (max-width: 768px) {
     nav {
          padding: 20px;
     }
     .get_btn {
          padding: 6px 14px;
          font-size: 12px;
     }
     .logo img {
          height: 42px;
          width: auto;
     }
     .menu-icon {
          font-size: 24px !important;
     }
     .get_btn_menu {
          gap: 5px;
     }
}
@media (max-width: 340px) {
     nav {
          padding: 20px;
     }
     .logo img {
          /* height: 23px; */
          height: 38px;
          width: auto;
     }
     .get_btn {
          padding: 6px 14px;
          font-size: 10px;
     }
     .menu-icon {
          font-size: 22px !important;
     }
}
@media (max-width: 320px) {
     .get_btn {
          padding: 5px 13px;
          /* font-size: 12px; */
          font-size: 8px;
     }
     nav {
          padding: 20px;
     }
     .logo img {
          height: 34px;
          width: auto;
     }
     .get_btn_menu {
          gap: 5px;
     }
     .menu-icon {
          font-size: 20px !important;
     }
}






@media only screen and (max-width: 950px) {
     .menu {
          padding: 15px 0;
          flex-direction: column;
          background-color: var(--white);
          align-items: start;
          position: absolute;
          top: 80px;
          left: 0;
          width: 100%;
          z-index: 1;
          transform: scale(1, 0);
          transform-origin: top;
          transition: transform 0.3s ease-in-out;
     }
     .menu a {
          margin-left: 12px;
          color: var(--dark_blue);
     }
     .menu li {
          margin-bottom: 10px;
     }
     .menu-icon {
          display: block;
          color: #fff;
          font-size: 35px;
          cursor: pointer;
          margin-bottom: 4px;
     }
     .menu:hover a {
          opacity: 0.4;
     }
     .menu a:hover {
          opacity: 1;
          color: var(--dark_blue);
     }
}




@media only screen and (max-width: 950px) {
     .menu {
          padding: 15px 0;
          flex-direction: column;
          background-color: var(--white);
          align-items: start;
          position: absolute;
          top: 80px;
          left: 0;
          width: 100%;
          z-index: 1;
          transform: scale(1, 0);
          transform-origin: top;
          transition: transform 0.3s ease-in-out;
     }

     .menu a {
          margin-left: 12px;
          color: var(--dark_blue);
     }

     .menu li {
          margin-bottom: 10px;
     }

     .menu-icon {
          display: block;
          color: #fff;
          font-size: 35px;
          cursor: pointer;
          margin-bottom: 4px;
     }

     .menu:hover a {
          opacity: 0.4;
     }

     .menu a:hover {
          opacity: 1;
          color: var(--dark_blue);
     }
}




/* end header */


.main {
     position: relative;
     top: 0;
     height: 100vh;
     width: 100%;
     background-color: var(--black);
}

.slide,
.slide .video,
.slide::before,
.wrapper {
     height: 100%;
     width: 100%;
}

.slide {
     overflow: hidden;
}

.slide::before {
     content: "";
     position: absolute;
     background-color: rgba(0, 0, 0, 0.4);
     z-index: 10;
}

.slide .video {
     object-fit: cover;
}

.slider_video_layer {
     background-color: rgba(0, 0, 0, 0.595);
     bottom: 0;
     right: 0;
     min-height: 100%;
     min-width: 100%;
     position: absolute;
}

.slide .image-data {
     position: absolute;
     top: 60%;
     left: 57%;
     transform: translate(-50%, -50%);
     text-align: left;
     width: 100%;
     z-index: 100;
     color: var(--white);
}

span.swiper-pagination-bullet {
     background-color: var(--white);
}

.how_animation .space-y-3,
.overlay {
     z-index: 1;
}

.image-data h2 {
     font-size: 40px;
     font-weight: 400;
     margin-bottom: 20px;
}

.image-data p {
     font-size: 20px;
     line-height: 25px;
     width: 90%;
}

@media (min-width: 1000px) {
     .image-data h2 {
          width: 50%;
     }
}

@media (min-width: 768px) {
     .image-data h2 {
          margin-right: 100px;
     }

     .image-data p {
          margin-right: 100px;
     }
}

@media (max-width: 768px) {
     .image-data h2 {
          font-size: 30px !important;
          margin-right: 50px;
     }

     .image-data p {
          margin-right: 50px;
     }
}




@media (min-width: 1024px) {
     .discover {
          /* background-image: url(../img/discover_bg.jpg); */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          padding: 100px;
          display: flex;
          gap: 50px;
          align-items: center;
          justify-content: center;
     }

     .discover_text p {
          text-align: justify;
          font-size: 24px;
          line-height: 40px;
          text-justify: inter-word;
          hyphens: auto;
          text-align-last: left;
     }

     .discover_img img {
          width: 2500px;
          height: auto;
          border-radius: 20px;
     }

     .service_title {
          margin-top: 100px;
     }
}

@media (min-width: 768px) and (max-width: 1023.5px) {
     .discover {
          /* background-image: url(../img/discover_bg.jpg); */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          padding: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 50px;
     }

     .discover_text p {
          text-align: justify;
          font-size: 22px;
          text-justify: inter-word;
          hyphens: auto;
          text-align-last: left;
     }

     .discover_img img {
          width: 600px;
          height: auto;
          border-radius: 20px;
     }

     .service_title {
          margin-top: 100px;
     }
}

@media (min-width: 500px) and (max-width: 767.5px) {
     .discover {
          /* background-image: url(../img/discover_bg.jpg); */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          padding: 100px 50px;
          display: flex;
          flex-direction: column;
          gap: 50px;
          align-items: center;
          justify-content: center;
     }

     .discover_text p {
          text-align: justify;
          font-size: 20px;
          text-justify: inter-word;
          hyphens: auto;
          text-align-last: left;
     }

     .discover_img img {
          border-radius: 20px;
     }
}

@media (max-width: 499.5px) {
     .discover {
          /* background-image: url(../img/discover_bg.jpg); */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          padding: 100px 20px;
          display: flex;
          flex-direction: column;
          gap: 50px;
          align-items: center;
          justify-content: center;
     }

     .discover_text p {
          text-align: justify;
          font-size: 20px;
          text-justify: inter-word;
          hyphens: auto;
          text-align-last: left;
     }

     .discover_img img {
          border-radius: 10px;
     }
}

/* how we scroll animation */

.fullwindow {
     position: relative;
     display: block;
     width: 100%;
     height: 100vh;
}

.overflow {
     overflow: hidden;
}

.absolute {
     position: absolute !important;
}

.perspective {
     -webkit-perspective: 150vh;
     perspective: 150vh;
}

.dark {
     background: var(--dark_blue);
     color: var(--white);
}

.light {
     background: var(--white);
     color: var(--black);
}


.p {
     position: absolute;
     margin: 0 10%;
     width: 80%;
     top: 50%;
     -webkit-transform: translate(0, -50%);
     transform: translate(0, -50%);
}

.how_text_img {
     margin-top: 50px;
     display: flex;
     align-items: center;
     gap: 50px;
}

.how_img1 img {
     height: auto;
     width: 2500px;
     border-radius: 20px;
}

.how_img2 img {
     height: auto;
     width: 2000px;
     border-radius: 20px;
}

.how_img3 img {
     height: auto;
     width: 1500px;
     border-radius: 20px;
}

.how_text .h3 {
     font-size: 60px;
     font-weight: 700;
     line-height: 55px;
     margin-bottom: 10px;
}

.how_text font {
     color: var(--mdblue);
}

.how_text p {
     margin-top: 10px;
     text-align: justify;
     line-height: 35px;
     text-justify: inter-word;
     hyphens: auto;
     text-align-last: left;
}

.how_we_title {
     display: flex;
     gap: 30px;
     align-items: center;
     justify-content: center;
     text-align: center;
     font-size: 40px;
     background-color: var(--dark_blue);
     color: var(--white);
     padding: 50px 0 10px 0;
}

.how_we_title_line {
     height: 2px;
     width: 100px;
     background-color: white;
}

@media (min-width: 768px) and (max-width: 1024px) {
     .how_text_img {
          margin-top: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px;
     }

     .how_img1 img {
          height: auto;
          width: 500px;
     }

     .how_img2 img {
          height: auto;
          width: 500px;
     }

     .how_img3 img {
          height: auto;
          width: 500px;
     }

     .how_text {
          font-size: 20px;
     }

     .how_text p {
          line-height: 40px;
     }

     .how_we_title {
          font-size: 30px;
     }

     .how_we_title img {
          height: 22px;
          width: auto;
     }
}

@media (max-width: 767.5px) {
     .how_text_img {
          margin-top: -10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px;
          width: 100%;
     }

     .how_img img {
          border-radius: 10px;
     }

     .how_text .h3 {
          font-size: 30px;
          font-weight: 700;
          line-height: 35px;
          margin-bottom: 10px;
     }

     .how_text p {
          line-height: 26px;
          font-size: 16px;
     }

     .how_we_title {
          font-size: 27px;
          padding-top: 50px;
          gap: 10px;
     }

     .how_we_title_line {
          width: 30px;
     }
}
@media (max-width: 425px) {
     .how_we_title{
          font-size: 24px;
     }
}

@media (max-width: 319px) {
     .how_we_title {
          font-size: 20px;
     }
}


/* how we scroll animation */

/* update */

.update {
     /* background-image: url(../img/update_bg.webp); */
     background-position: left !important;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 200px 100px 50px 100px;
     /* padding: 100px; */
}

.update .h2 {
     font-size: 30px;
     color: var(--white);
}

.update .h4 {
     font-size: 20px;
     color: var(--white);
}

.update_input input {
     padding: 10px 0px;
     background-color: transparent;
     border: none;
     outline: none;
     width: 50%;
}

.update_input a {
     background-color: var(--mdblue);
     color: white;
     padding: 10px 20px;
     border-radius: 50px;
     display: flex;
     align-items: center;
     transition: 0.3s;
}

.update_input a:hover {
     background-color: var(--light_blue);
}

@media (min-width: 1300px) {
     .update_input {
          margin-top: 30px;
          background-color: var(--white);
          padding: 10px;
          border-radius: 50px;
          display: flex;
          justify-content: space-between;
          width: 35%;
     }
}

@media (min-width: 1140px) and (max-width: 1299.5px) {
     .update_input {
          margin-top: 30px;
          background-color: var(--white);
          padding: 10px;
          border-radius: 50px;
          display: flex;
          justify-content: space-between;
          width: 40%;
     }
}

@media (min-width: 768px) and (max-width: 1139.5px) {
     .update_input {
          margin-top: 30px;
          background-color: var(--white);
          padding: 10px;
          border-radius: 50px;
          display: flex;
          justify-content: space-between;
          width: 67%;
     }
}

@media (max-width: 767.5px) {
     .update_input {
          margin-top: 30px;
          background-color: var(--white);
          padding: 10px;
          border-radius: 50px;
          display: flex;
          justify-content: space-between;
          /* width: 70%; */
     }

     .update_input input {
          padding: 5px 0px;
          background-color: transparent;
          border: none;
          outline: none;
     }

     .update_input a {
          background-color: var(--mdblue);
          color: white;
          padding: 0 30px;
          border-radius: 50px;
          display: flex;
          align-items: center;
          transition: 0.3s;
          font-size: 16px;
     }

     .update {
          /* background-image: url(../img/update_bg.webp); */
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          padding: 100px 20px;
     }

     .update .h2 {
          font-size: 26px;
          color: var(--white);
     }

     .update .h4 {
          font-size: 18px;
          color: var(--white);
     }
}

/* end update */

/* footer */

footer {
     /* background-image: url(../img/footer_bg.webp); */
     background-color: #00023E;
     padding: 10px 100px;
     text-align: center;
     position: absolute;
     width: 100%;
}

.footer_title {
     display: flex;
     gap: 30px;
     align-items: center;
     justify-content: center;
     padding-bottom: 20px;
}

.footer_title .h3 {
     font-size: 25px;
     color: var(--white);
}

.footer_title_line {
     height: 2px;
     width: 60px;
     background-color: white;
}

.footermain1 {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.footer1 {
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: start;
     justify-content: left;
     padding: 0px 0;
}

.location {
     display: flex;
     gap: 15px;
     align-items: center;
     justify-content: center;
     color: var(--white);
}

.location a {
     color: var(--white);
}

.location img {
     height: 30px;
     width: auto;
}

.footer_icons {
     display: flex;
     gap: 10px;
}

.footer_icons a {
     border-radius: 50px;
     height: 40px;
     width: 40px;
     align-items: center;
     justify-content: center;
     display: flex;
}

.footer_icons img {
     height: 25px;
     width: auto;
}

@media (min-width: 768px) and (max-width: 850px) {
     footer {
          padding: 10px 50px;
     }


     .footer_title .h3 {
          font-size: 25px;
     }
}

@media (max-width: 767.5px) {
     footer {
          padding: 10px 10px;
     }

     .footer_icons {
          gap: 5px;
     }

     .footer_title .h3 {
          font-size: 20px;
     }

     .footer_title {
          gap: 20px;
          justify-content: center;
     }

     .footer_title_line {
          width: 50px;
     }

     .location {
          gap: 10px;
     }

     .footer1 {
          display: flex;
          flex-direction: column;
          gap: 10px;
          align-items: start;
          justify-content: left;
          padding: 10px 0;
     }


     .location a,
     .location p {
          font-size: 11px;
          text-align: left;
     }

     .footer_icons a {
          height: 30px;
          width: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
     }

     .location img {
          height: 20px;
          width: auto;
     }

     .footer_icons img {
          height: 20px;
          width: auto;
     }
}

@media (max-width: 319px) {
     .footer_title .h3 {
          font-size: 16px;
     }
}













/* end footer */







/* =======================  service page ==================================== */


.service_title {
     /* background-image: url(../img/service_bg.webp); */
     background-position: top;
     background-size: cover;
     display: flex;
     gap: 20px;
     align-items: center;
     justify-content: center;
     padding: 200px 0;
     color: var(--white);
     border-bottom: 5px var(--mdblue) solid;
}

.service_title h1{
     font-size: 32px;
}

@media (min-width: 991.5px) {
     .main1 font,
     .main2 font,
     .main3 font,
     .main4 font,
     .main5 font {
          padding: 0 100px;
          width: 60%;
     }

     .why_text h2{
          font-size: 32px;
          font-weight: 600;
     }
}

@media (max-width: 319px) {
     .service_title h1 {
          font-size: 20px;
     }
}


.shap a,
.why_text a {
     background-color: rgb(0, 104, 69);
     border-radius: 50px;
     transition: 0.3s;
     color: #fff;
}

.main1,
.main2,
.main3,
.main4,
.main5 {
     height: 100vh;
     background-repeat: no-repeat;
     background-position: center right;
     background-size: cover;
     flex-direction: column;
     display: flex;
     justify-content: center;
     color: #fff;
     position: sticky;
}

.main_bg_layer {
     background-color: rgba(0, 0, 0, 0.641);
     bottom: 0;
     right: 0;
     min-height: 100%;
     min-width: 100%;
     position: absolute;
}

.main1 {
     /* background-image: url(../img/Generative\ AI.webp); */
     top: 0;
     background-attachment: scroll;
}

.main2 {
     /* background-image: url(../img/Automation\ and\ Integration.webp); */
     top: 0;
     background-attachment: scroll;
}

.main3 {
     /* background-image: url(../img/Digital\ Transformation.webp); */
     top: 0;
     background-attachment: scroll;
}

.main4 {
     /* background-image: url(../img/Cloud\ Computing\ Solution.webp); */
     top: 0;
     background-attachment: scroll;
}

.main5 {
     /* background-image: url(../img/Cybersecurity\ Solutions.webp); */
     top: -100%;
     background-attachment: scroll;
}


.font1,
.font2,
.font3,
.font4,
.font5 {
     font-size: 45px;
     font-weight: 900;
     padding: 0 50px;
     z-index: 1;
}

.font1_a,
.font2_a,
.font3_a,
.font4_a,
.font5_a {
     font-size: 24px;
     font-weight: 300;
     margin-top: 20px !important;
     line-height: 40px;
     text-align: justify;
     padding: 0 50px;
     z-index: 1;
     text-justify: inter-word;
     hyphens: auto;
     text-align-last: left;
}

@media (max-width: 767.5px) {

     .font1,
     .font2,
     .font3,
     .font4,
     .font5 {
          font-size: 30px;
          padding: 0 10px;
     }

     .font1_a,
     .font2_a,
     .font3_a,
     .font4_a,
     .font5_a {
          font-size: 17px;
          line-height: 21px;
          padding: 0 20px 0 10px;
     }
}


/* @media (max-width: 425px) {
     .main5 {
          background-image: url(../img/Cybersecurity\ Solutions\(mobile\).webp);
          top: -100%;
          background-attachment: scroll;
     }
} */



.main_shap {
     padding: 30px 0;
     position: sticky;
     background-color: white;
}
.main_shap h2{
     font-size: 24px;
     font-weight: 600;
}

.shap {
     margin: 20px 0;
     background-color: #dbeafe;
}

.shap a {
     padding: 10px 40px;
}

.shap a:hover {
     background-color: #fff;
     color: #3956ee;
}
.why_text h2 {
     font-size: 35px;
}
.why_text a {
     padding: 15px 50px;
}

.why_text a:hover {
     background-color: #dadfff;
     color: #3956ee;
}

.about_nav .links.show a {
     color: #fff;
}

.why_text p {
     line-height: 30px !important;
     font-size: 20px;
     text-align: justify;
     text-justify: inter-word;
     hyphens: auto;
     text-align-last: left;
}


@media (max-width: 991.5px) {

     .main1 font,
     .main2 font,
     .main3 font,
     .main4 font,
     .main5 font {
          margin: 0 15px;
     }

     .shap {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 20px 0;
          margin: 20px;
          text-align: center;
          border-radius: 10px;
     }

     .shap h2 {
          font-size: 18px;
     }

     .shap a {
          margin-top: 20px;
          padding: 12px 30px;
     }

     .why {
          margin: 120px 30px 30px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
     }

     .why_text {
          display: flex;
          flex-direction: column;
     }

     .why_text p {
          margin: 20px 0;
     }

     .why_text a {
          width: 200px;
     }

     .why_img {
          margin-top: 50px;
     }

     .why_img img {
          height: 270px;
          width: auto;
          border-radius: 15px;
     }
}

@media (min-width: 991.5px) {
     .shap {
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 50px 0;
          margin: 20px 100px;
          border-radius: 20px;
     }

     .why {
          display: flex;
          gap: 50px;
          justify-content: space-between;
          align-items: center;
          margin: 100px 100px 30px;
     }

     .why_text p {
          margin: 20px 0;
          line-height: 25px;
     }

     .why_img img {
          height: auto;
          width: 1800px;
          border-radius: 20px;
     }
}
@media (max-width:319px) {
     .why_img img {
          height: 220px;
          width: auto;
          border-radius: 10px;
     }
}

.vision_mission_title h3 {
     font-size: 35px !important;
     font-weight: 600;
     white-space: nowrap;

}

.mission p,
.vision p {
     font-size: 16px !important;
     line-height: 25px;
}

.mission h3,
.vision h3 {
     font-size: 25px;
}

.line {
     height: 2px;
     width: 100px;
     background-color: white;
}

@media (min-width: 1499.5px) {
     .main_vision_mission {
          background-color: #5f5f5f;
          padding: 100px;
          transition: 0.3s;
     }

     .main_vision_mission:hover {
          background-color: rgba(0, 0, 0, 0.8);
     }

     .vision_mission_title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          color: #fff;
     }

     .vision_mission {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
     }

     .mission,
     .vision {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          border: 2px solid rgba(128, 128, 128, 0.258);
          /* padding: 100px 0; */
          height: 700px;
          margin: 50px 0;
          width: 30%;
          transition: 0.3s;
     }

     .mission:hover,
     .vision:hover {
          border: 2px solid #fff;
          background-color: #000;
     }

     .mission_img img,
     .vision_img img {
          height: 250px;
          width: auto;
          border-radius: 20px;
     }

     .mission h3,
     .vision h3 {
          margin: 20px 0;
     }

     .mission p,
     .vision p {
          width: 80%;
     }
}

@media (min-width: 1023.5px) and (max-width: 1499.5px) {
     .main_vision_mission {
          background-color: #5f5f5f;
          padding: 100px;
          transition: 0.3s;
     }

     .main_vision_mission:hover {
          background-color: rgba(0, 0, 0, 0.8);
     }

     .vision_mission_title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          color: #fff;
     }

     .vision_mission {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
     }

     .mission,
     .vision {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          border: 2px solid rgba(128, 128, 128, 0.258);
          /* padding: 100px 0; */
          height: 700px;
          margin: 50px 0;
          width: 30%;
          transition: 0.3s;
     }

     .mission:hover,
     .vision:hover {
          border: 2px solid #fff;
          background-color: #000;
     }

     .mission_img img,
     .vision_img img {
          height: 150px;
          width: auto;
          border-radius: 12px;
     }

     .mission h3,
     .vision h3 {
          margin: 20px 0;
     }

     .mission p,
     .vision p {
          width: 80%;
     }
}

@media (min-width: 768.5px) and (max-width: 1023.5px) {
     .main_vision_mission {
          background-color: #5f5f5f;
          padding: 100px;
          transition: 0.3s;
     }

     .main_vision_mission:hover {
          background-color: rgba(0, 0, 0, 0.8);
     }

     .vision_mission_title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          color: #fff;
     }

     .vision_mission {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #fff;
     }

     .mission,
     .vision {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          border: 2px solid rgba(128, 128, 128, 0.258);
          padding: 100px;
          margin: 50px 0;
          transition: 0.3s;
     }

     .mission:hover,
     .vision:hover {
          border: 2px solid #fff;
          background-color: #000;
     }

     .mission_img img,
     .vision_img img {
          height: 250px;
          width: auto;
          border-radius: 7px;
     }

     .mission h3,
     .vision h3 {
          margin: 20px 0;
     }

     .mission p,
     .vision p {
          width: 90%;
     }
}

@media (min-width: 399.5px) and (max-width: 768.5px) {
     .main_vision_mission {
          background-color: #5f5f5f;
          padding: 100px 50px;
          transition: 0.3s;
     }

     .main_vision_mission:hover {
          background-color: rgba(0, 0, 0, 0.8);
     }

     .line {
          width: 40px;
     }

     .vision_mission_title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          color: #fff;
     }

     .vision_mission_title h3 {
          font-size: 28px !important;
          white-space: nowrap;
     }

     .vision_mission {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #fff;
     }

     .mission,
     .vision {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          border: 2px solid rgba(128, 128, 128, 0.258);
          padding: 50px;
          margin: 50px 0;
          transition: 0.3s;
     }

     .mission:hover,
     .vision:hover {
          border: 2px solid #fff;
          background-color: #000;
     }

     .mission_img img,
     .vision_img img {
          height: 200px;
          width: auto;
          border-radius: 7px;
     }

     .mission h3,
     .vision h3 {
          margin: 20px 0;
     }

     .mission p,
     .vision p {
          width: 100%;
          /* text-align: justify; */
     }
}

@media (max-width: 399.5px) {
     .main_vision_mission {
          background-color: #5f5f5f;
          padding: 100px 10px;
          transition: 0.3s;
     }

     .line {
          width: 40px;
     }

     .main_vision_mission:hover {
          background-color: rgba(0, 0, 0, 0.8);
     }

     .vision_mission_title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          color: #fff;
     }

     .vision_mission {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #fff;
     }
     .vision_mission_title h3 {
          font-size: 28px !important;
          white-space: nowrap;
     }

     .mission,
     .vision {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          border: 2px solid rgba(128, 128, 128, 0.258);
          padding: 25px;
          margin: 50px 0;
          transition: 0.3s;
     }

     .mission:hover,
     .vision:hover {
          border: 2px solid #fff;
          background-color: #000;
     }

     .mission_img img,
     .vision_img img {
          height: 200px;
          width: auto;
          border-radius: 5px;
     }

     .mission h3,
     .vision h3 {
          margin: 20px 0;
     }

     .mission p,
     .vision p {
          width: 100%;
     }
}

/* @media (max-width: 430px) {
     .vision_mission_title h3 {
          font-size: 30px !important;
     }
} */
@media (max-width: 319px) {

     .mission_img img,
     .vision_img img {
          height: 150px;
          width: auto;
          border-radius: 5px;
     }

     .mission p,
     .vision p {
          width: 100%;
          text-align: justify;
          text-justify: inter-word;
          hyphens: auto;
          text-align-last: left;
     }
}




.accordion-menu,
.value_title {
     margin: 20px 0;
}

.value_line {
     height: 2px;
     width: 100px;
     background-color: black;
}

.value_title {
     display: flex;
     align-items: center;
     justify-content: center;
}


@media (min-width: 900px) {
     .accordion-menu {
          display: inline-block;
          position: relative;
          left: 30%;
          transform: translate(-50%, 0);
          width: 40%;
          padding: 10px 20px;
          border-radius: 5px;
     }
     .value_title h3 {
          font-size: 30px;
     }

     .value_title {
          gap: 20px;
     }

     .value_line {
          width: 100px;
     }
}

@media (max-width: 899.5px) {
     .accordion-menu {
          position: relative;
          left: 50%;
          transform: translate(-50%, 0);
          width: 100%;
          padding: 10px 20px;
          border-radius: 5px;
     }

     .value_title h3 {
          font-size: 30px;
     }

     .value_title {
          gap: 10px;
     }

     .value_line {
          width: 70px;
     }

}



@media (max-width: 550px) {
     .accordion-menu p {
          color: var(--gray);
          font-size: 18px;
          line-height: 30px;
          letter-spacing: 1px;
          position: relative;
          overflow: hidden;
          max-height: 800px;
          height: 270px !important;
          opacity: 1;
          transform: translate(0, 0);
          margin-top: 14px;
          z-index: 2;

          text-align: justify;
          text-justify: inter-word;
          hyphens: auto;
          text-align-last: left;
     }

     .value_title h3 {
          font-size: 20px;
     }
}

.value_title {
     gap: 10px;
}


.value_line {
     width: 30px;
}
@media (max-width: 319px) {
     .value_title h3 {
          font-size: 16px;
     }

     .value_title {
          gap: 10px;
     }

     .value_line {
          width: 30px;
     }
}

.main_accordion {
     padding: 50px 0 100px;
     /* background-image: url(../img/discover_bg.jpg); */
     background-position: top left;
     background-size: cover;
     background-repeat: no-repeat;
}

.accordion-menu ul {
     display: flex;
     gap: 100px;
}

.accordion-menu h2 {
     font-size: 20px;
     line-height: 34px;
     font-weight: 500;
     letter-spacing: 1px;
     display: block;
     margin: 0;
     cursor: pointer;
     color: var(--black);
}

.accordion-menu p {
     color: var(--gray);
     font-size: 18px;
     line-height: 30px;
     letter-spacing: 1px;
     position: relative;
     overflow: hidden;
     max-height: 800px;
     height: 150px;
     opacity: 1;
     transform: translate(0, 0);
     margin-top: 14px;
     z-index: 2;
     text-align: justify;
     text-justify: inter-word;
     hyphens: auto;
     text-align-last: left;
}

.accordion-menu ul {
     list-style: none;
     perspective: 900;
     padding: 0 20px 10px;
     margin: 0;
     background-color: var(--white);
     border: 2px var(--mdblue) solid;
     border-radius: 5px;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.19);
}

.accordion-menu ul li {
     position: relative;
     margin: 0;
     padding-top: 10px;
}

.accordion-menu ul li:first-child {
     border: none;
}

.accordion-menu ul li:first-of-type {
     animation-delay: 0.5s;
}

.accordion-menu ul li:nth-of-type(2) {
     animation-delay: 0.75s;
}

.accordion-menu ul li:nth-of-type(3) {
     animation-delay: 1s;
}

.accordion-menu ul li:last-of-type {
     padding-bottom: 0;
}

.accordion-menu ul li .arrow {
     position: absolute;
     transform: translate(-6px, 0);
     margin-top: 16px;
     right: 0;
}

.accordion-menu ul li .arrow:after,
.accordion-menu ul li .arrow:before {
     content: "";
     position: absolute;
     background-color: var(--black);
     width: 3px;
     height: 9px;
}

.accordion-menu ul li .arrow:before {
     transform: translate(-2px, 0) rotate(45deg);
}

.accordion-menu ul li .arrow:after {
     transform: translate(2px, 0) rotate(-45deg);
}

.accordion-menu ul li input[type="checkbox"] {
     position: absolute;
     cursor: pointer;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 0;
}

.accordion-menu ul li input[type="checkbox"]:checked~p {
     margin-top: 0;
     max-height: 0;
     opacity: 0;
     transform: translate(0, 50%);
}

.accordion-menu ul li input[type="checkbox"]:checked~.arrow:before {
     transform: translate(2px, 0) rotate(45deg);
}

.accordion-menu ul li input[type="checkbox"]:checked~.arrow:after {
     transform: translate(-2px, 0) rotate(-45deg);
}

.accordion-menu ul li .arrow:after,
.accordion-menu ul li .arrow:before,
.transition,
p {
     transition: 0.25s ease-in-out;
}

.accordion-menu h1,
.accordion-menu ul li,
.flipIn {
     animation: 0.5s both flipdown;
}

.accordion-menu h2,
.no-select {
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     user-select: none;
}

@keyframes flipdown {
     0% {
          opacity: 0;
          transform-origin: top center;
          transform: rotateX(-90deg);
     }

     5% {
          opacity: 1;
     }

     80% {
          transform: rotateX(8deg);
     }

     83% {
          transform: rotateX(6deg);
     }

     92% {
          transform: rotateX(-3deg);
     }

     100% {
          transform-origin: top center;
          transform: rotateX(0);
     }
}

/* model */

.message {
     width: 50%;
     text-align: center;
     padding: 60px 50px;
     border-radius: 10px;
     background-color: var(--white);
     border: 3px var(--green) solid;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}
.popup_header {
     margin-bottom: 20px;
     display: flex;
     flex-direction: column;
}
.popup_header i {
     color: var(--green);
     font-size: 54px;
}
.popup_header font {
     font-size: 24px;
     font-weight: 600;
     color: #000 !important;
}

.box {
     height: 90%;
     width: 90%;
     background-image: url(../img/getin_bg.webp);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     display: flex;
     flex-direction: column;
     gap: 70px;
     box-sizing: border-box;
     border-radius: 5px;
     text-align: center;
     padding: 20px !important;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     transition: 0.3s;
}
.model_logo {
     width: 100%;
     display: flex;
     justify-content: space-between;
}
.model_logo img {
     height: 70px;
     width: auto;
}
.model_text {
     display: flex;
     flex-direction: column;
     font-family: Brown Regular;
     gap: 20px;
     align-items: start;
     padding-left: 300px;
     padding-right: 300px;
     text-align: left;
}
.model_text .h1 {
     font-size: 30px;
}
.model_text font {
     color: var(--mdblue);
}
.model_text label {
     color: red;
}
.country_code {
     width: 100% !important;
     display: flex;
}
.model_text input {
     border: none !important;
     outline: none !important;
     border-bottom: 1px var(--light_blue) solid !important;
     font-size: 24px;
     border-radius: 0px;
     background-color: transparent;
     color: var(--mdblue);
     width: 100% !important;
}
#phone {
     margin-right: -250px !important;
}
@media (max-width: 1300px) {
     #phone {
          margin-right: -200px !important;
     }
     #phone2 {
          margin-right: -290px !important;
     }
}
#phone2 {
     margin-right: -270px !important;
}
.model_text textarea {
     width: 100%;
     border: none;
     outline: none;
     font-size: 24px;
     border-bottom: 1px var(--light_blue) solid;
     border-radius: 0px;
     background-color: transparent;
     color: var(--mdblue);
}
.model_text input::placeholder {
     color: var(--gray) !important;
     font-family: Brown Regular !important;
     font-size: 24px !important;
}
.model_next {
     border: none;
     font-size: 16px !important;
     margin-top: 50px;
     background-color: var(--dark_blue);
     color: white;
     height: 45px;
     width: 200px;
     border-radius: 50px;
     transition: 0.3s;
}
.model_next:hover {
     background-color: var(--light_blue);
}
.left_right_btn {
     padding-left: 300px;
     padding-right: 300px;
     justify-content: end;
     align-items: center;
     display: flex;
     gap: 20px;
}
.model_left {
     background-color: var(--dark_blue);
     color: var(--white);
     padding: 15px 18px;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     font-size: 20px;
     cursor: pointer;
}
.model_right {
     background-color: var(--dark_blue);
     color: var(--white);
     padding: 15px 18px;
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     font-size: 20px;
     cursor: pointer;
}
.modal {
     position: fixed;
     top: 0px;
     pointer-events: none;
     left: 0px;
     background: rgba(51, 51, 51, 0.9);
     width: 100vw;
     height: 100vh;
     z-index: 100;
     opacity: 0;
     transition: 0.3s;
}
.modal.active {
     opacity: 1;
     pointer-events: auto;
}
.modal #success h1 {
     font-size: 1.5em;
}
.modal .close {
     font-size: 20px;
     font-weight: 900;
     cursor: pointer;
     color: var(--mdblue);
}
@media (max-width: 1300px) {
     .model_text {
          display: flex;
          flex-direction: column;
          gap: 20px;
          align-items: start;
          padding-left: 100px;
          padding-right: 100px;
          text-align: left;
          font-family: Brown Regular;
     }
     .box {
          gap: 60px;
     }
     .left_right_btn {
          padding-left: 100px;
          padding-right: 100px;
          justify-content: end;
          align-items: center;
          display: flex;
          gap: 10px;
     }
     .model_logo img{
          height: 50px;
          width: auto;
     }
}
@media (max-width: 768px) {
     .left_right_btn {
          padding-left: 20px;
          padding-right: 20px;
          justify-content: end;
          align-items: center;
          display: flex;
          gap: 10px;
     }
     .model_left {
          font-size: 16px;
          padding: 10px 15px;
     }
     .model_right {
          font-size: 16px;
          padding: 10px 15px;
     }
     .model_text {
          width: 99%;
          padding: 0 20px;
          font-family: Brown Regular;
     }
     .model_text .h1 {
          font-size: 20px;
     }
     .box {
          gap: 100px;
     }
     .model_logo img{
          height: 40px;
          width: auto;
     }
     .message {
          width: 75%;
          padding: 50px 5px;
     }
}
@media (max-width: 426px) {
     .left_right_btn {
          padding-left: 10px;
          padding-right: 10px;
          justify-content: end;
          align-items: center;
          display: flex;
          gap: 10px;
     }
     .model_text .h1 {
          font-size: 19px !important;
     }
     .model_text {
          padding: 10px;
          font-family: Brown Regular;
     }
     .box {
          gap: 75px;
     }
     .box input::-webkit-input-placeholder {
          font-size: 18px !important;
     }
     .model_logo img{
          height: 30px;
          width: auto;
     }
     .message {
          padding: 50px 7px;
     }
}
@media (max-width: 319px) {
     .box input::-webkit-input-placeholder {
          font-size: 16px !important;
          
     }
     .message {
          padding: 50px 5px;
     }
}

/* end model */