@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

 /* Reset styles */
 *,
 *::after,
 *::before {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     font-family: "Manrope", sans-serif;
     font-style: normal;

 }

 /* Define root variables */
 :root {
     --secondaryGrey: #B9B9B9;
     --themeBlack: #0A0A0A;
     --blackBtn: #222222;
     --white: #F1F1F1;
     --blueBg: #477EF3;
     --blueSecondary: #7DB3FF;
     --f12: 12px;
     --f14: 14px;
     --f16: 16px;
     --f18: 18px;
 }

 a {
     text-decoration: none !important;
 }

 body {
     text-decoration: none !important;
     background: rgba(17, 17, 17, 1);

 }

 body,
 html {
     overflow-x: hidden;
 }

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

 .flexRow {
     display: flex;
     flex-direction: row;
     gap: 10px;
 }

 .lh5 {
     line-height: 25px;
 }

 .bg-none {
     background: none
 }

 .border-none {
     border: none;
 }

 .gap1 {
     gap: 5px;
 }

 .gap2 {
     gap: 10px;
 }

 .gap3 {
     gap: 15px;
 }

 .gap4 {
     gap: 20px;
 }

 .gap5 {
     gap: 25px;
 }

 .gap6 {
     gap: 30px;
 }

 .defaultSection {
     padding: 4vw;
 }

 .iconImg1 {
     width: 22px;
 }

 .iconImg2 {
     width: 80px;
 }

 .nowRap {
     white-space: nowrap;

 }

 .column2 {
     grid-column: span 2;
 }

 .grid2,
 .grid3,
 .grid4 {
     display: grid;
 }

 .grid2 {
     grid-template-columns: repeat(2, 1fr);
 }

 .grid3 {
     grid-template-columns: repeat(3, 1fr);
 }

 .listStyle1 {
     padding-left: 0;
 }

 .listStyle1 li {
     display: flex;
     gap: 10px;
     list-style: none;
 }

 .gradientHover {
     transition: .5s ease;
 }

 .gradientHover:hover {
     transform: scale(1.01);
     background: linear-gradient(180deg, #ACB5EC 0%, #477EF3 100%) !important;
     /* From https://css.glass */
     background: rgba(255, 255, 255, 0.2) !important;
     border-radius: 16px;
     box-shadow: 0 4px 30px #477df349;
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid #477EF3;
 }

 .introductorySection h1 {
     color: var(--white);
     font-size: 40px;
     line-height: 50px;
     font-weight: 400;
 }

 .introductorySection h1 span {
     background: #8A8A8A;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 38px;
 }

 .listStyle1 li img {
     width: 25px;
 }

 .getInTouch .sectionHeader {
     box-shadow: 0px 2px 8px 0px #00000040;
     backdrop-filter: blur(32px);
     background: #1E1E1E80;
     display: flex;
     flex-direction: column;
     gap: 5px;
     padding: 4vw 20vw;
     margin: 0s;
 }

 /*----------------------------------------
 FONT SIZE
 -----------------------------------------  */

 .f12 {
     font-size: var(--f12);
 }

 .f14 {
     font-size: var(--f14);
 }

 .f16 {
     font-size: var(--f16);
 }

 .f18 {
     font-size: var(--f18);
 }

 /*----------------------------------------
 FONT SIZE
 -----------------------------------------  */



 /*----------------------------------------
  COLORS
 -----------------------------------------  */
 .textWhite {
     color: var(--white);

 }

 .blueSecondary {
     color: var(--blueSecondary);

 }

 .secondaryGrey {
     color: var(--secondaryGrey);
 }

 .blackBgSecondary {
     background: #181818;
 }




 /*----------------------------------------
 CURSOR
 -----------------------------------------  */
 .cursor {
     display: block;
     width: 10px;
     height: 10px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%);
     border-radius: 50%;
     background: #477EF3;
     pointer-events: none;
     z-index: 111;
     border: 1px solid #477EF3;
     transition: all 0.2s ease-out;
     animation: moveCursor1 .5s infinite alternate;
 }

 .expand {
     background: transparent;
     animation: moveCursor2 .5s forwards;
     border: 1px solid #477EF3;
 }

 @keyframes moveCursor1 {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(2);
     }
 }

 @keyframes moveCursor2 {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(5);
     }

     100% {
         transform: scale(1);
         opacity: 0;
     }
 }

 /*----------------------------------------
 CURSOR
 -----------------------------------------  */



 /*----------------------------------------
 DEFAULT BUTTONS  
 -----------------------------------------  */
 .defaultBtn {
     position: relative;
     overflow: hidden;
     z-index: 2;
     font-size: 18px;
     font-weight: 500;
     cursor: pointer;
 }

 .defaultBtn .arrowIcon {
     background: none;
     width: 20px;
     margin-left: 8px;
 }

 .defaultBtn a {
     color: var(--white);
     font-size: var(--f16)
 }

 .l-Btn {
     background-color: var(--blueBg);
     width: 258px;
     border-radius: 55px;
     line-height: 45px;
     text-align: center;
 }

 .defaultInnerBtn:hover {
     transition: .4s ease-in-out;
 }

 .defaultBtn::after {
     content: '';
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 0%;
     height: 0%;
     background: #000000;
     border-radius: 50%;
     z-index: -1;
     opacity: 0;
     transition: all 0.6s ease;
     transform: translateY(50%);
 }

 .defaultBtn:hover::after {
     width: 100%;
     left: 0;
     opacity: 1;
     right: 0;
     height: 100%;
     border-radius: 20px;
     border: 2px solid var(--blueBg);
     transition: all 0.5s ease;
     transform: translateY(0);
 }

 /*----------------------------------------
 DEFAULT BUTTONS  
 -----------------------------------------  */





 /*----------------------------------------
 SECTION_HEADER STARTS HERE
 -----------------------------------------  */
 .sectionHeader {
     position: relative;
     z-index: 1;
     border-radius: 20px;
     line-height: 70px;
     text-align: center;
     color: var(--white);
     max-width: 40vw;
     margin: auto;
     margin-bottom: 2vw;
 }

 .sectionHeader .smallTitle {
     color: var(--blueSecondary);
     font-size: 20px;
     padding: 10px;
     margin: 20px 0;
     display: inline;
     position: relative;
 }

 .sectionHeader .smallTitle::after {
     content: '';
     position: absolute;
     left: -10px;
     top: 50%;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--blueSecondary);
 }

 .sectionHeader .smallTitle::before {
     content: '';
     position: absolute;
     right: -10px;
     top: 50%;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--blueSecondary);

 }

 .sectionHeader .title {
     font-size: 45px;
 }

 .sectionHeader .title2 {
     font-size: 32px;
 }

 .sectionHeader span {
     font-family: "Archivo", sans-serif;

 }

 .sectionHeader .title span {
     color: #477EF3;
     background: -webkit-linear-gradient(#ACB5EC, #477EF3);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     color: #477EF3;
 }

 /*----------------------------------------
 SECTION_HEADER ENDS HERE
 -----------------------------------------  */

 /*----------------------------------------
 DEFAULT_PAGE_BANNER ENDS HERE
 -----------------------------------------  */
 .defaultPageBanner .sectionHeader {
     min-width: 100%;
     height: 28vh;
     display: flex;
     justify-content: end;
     align-content: center;
     flex-direction: column;
     line-height: 20px;
     padding-bottom: 5vh;

 }

 .defaultPageBanner {
     background: url('../img/Banner/pageBanner.png');
     background-repeat: no-repeat;
     background-size: cover;
     margin-bottom: 30px;
 }

 .defaultPageBanner .sectionHeader .title {
     font-size: 24px;
 }


 .defaultPageBanner .sectionHeader .smallTitle {
     color: var(--white);
     margin: 0;
 }

 .defaultPageBanner .sectionHeader a,
 .defaultPageBanner .sectionHeader .pageNav span {
     color: var(--white);
     font-size: var(--f14);

 }

 /*----------------------------------------
 DEFAULT_PAGE_BANNER ENDS HERE
 -----------------------------------------  */


 /*----------------------------------------
 FORM LOGIN MODAL STARTS HERE
 -----------------------------------------  */
 .formLoginModal .innerDiv {
     display: grid;
     grid-template-columns: 250px auto;
 }

 .formLoginModal .innerDiv .leftImg img {
     object-fit: cover;
     height: 100%;
 }

 .formLoginModal .btn-close {
     position: absolute;
     right: 20px;
     top: 20px;
 }

 /*----------------------------------------
 FORM LOGIN MODAL ENDS HERE
 -----------------------------------------  */