/* @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */ @font-face { font-family: 'Gilroy'; src: url('../Gilroy-FREE/Gilroy-ExtraBold.otf') format('opentype'); } @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap"); @font-face { font-family: 'Gilroy Bold'; src: url('../fonts/gilroy/Gilroy-ExtraBold.ttf'); src: url('../fonts/gilroy/Gilroy-Bold.ttf'); } @font-face{ font-family: 'Roboto'; src: url('../fonts/gilroy/Gilroy-Medium.ttf') } body { font-family: 'Roboto' !important; /*font-family: 'Roboto';*/ line-height: 1.4 !important; letter-spacing: 0.36px !important; /* background-color: #00000002 !important; */ background-color: #f1f1f4e5 !important; } body p{ font-family: 'Roboto' !important; font-size: 1rem !important; /* font-weight: 500 !important; */ } body h6 h5 h4 h3 h2 h1 { font-family: 'Gilroy Bold' !important; } body h2{ font-size: 42px !important; } body h2 span{ font-size: 42px !important; } @media (max-width: 767px){ body h2{ font-size: 28px !important; } body h2 span{ font-size: 28px !important; } body h4{ font-size: 23px !important; } body h4 span{ font-size: 23px !important; } } /* back to top btn */ #back-to-top-btn { display: none; position: fixed; bottom: 43px; right: 20px; z-index: 99; font-size: 20px; background-color: #006980; color: #fff; border: none; cursor: pointer; /* padding: 10px 20px; */ border-radius: 100px; align-items: center; justify-content: center; height: 35px; width: 35px; } #back-to-top-btn:hover { background-color: #0056b3; } /* nav */ nav{ padding: 0 4vw; } nav.navbar .navbar-brand { margin-left: .4rem; font-size: 18px; } .fixed-top{ background-color: transparent; transition: background-color 0.3s ease-in-out; position: fixed; top: 0; left: 0; right: 0; z-index: 2500; } .scrolled { background-color: #fff; /* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */ } .navbar-expand-lg .navbar-nav { display: flex; align-items: center; justify-content: end; width: 100%; } nav.navbar-light .navbar-brand { color: #006980; text-transform: capitalize; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 0.56px; } button.supportbtn { background: linear-gradient(268deg, #22a5dc, #0d3e81); padding: 12px 29px; border: none; border-radius: 6px; } /* button.supportbtn { padding: 10px 45px; align-items: flex-start; gap: 10px; background: #006980; box-shadow: 0px 10px 20px 0px rgba(225, 225, 230, 0.50), 0px 0px 50px 0px rgba(217, 217, 217, 0.20) inset; border-radius: unset; border-color: none; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } */ nav.navbar-expand-lg .navbar-nav .nav-link { padding-right: .7rem; padding-left: .7rem; } nav.navbar-light .navbar-nav .nav-link { color: rgb(0,0,0); font-weight: 500; } nav.navbar-light .navbar-nav .nav-link.active, nav.navbar-light .navbar-nav .show>.nav-link { color: #0d3e81; font-weight: 600; } .navbar-brand img{ margin-left: 20px; margin-top: 7px; } @media (max-width: 767px) { nav { padding: 0 2vw; } nav.navbar .navbar-brand { font-size: 16px; } button.supportbtn { padding: 8px 30px; } .navbar-collapse{ background-color: #fff; } } /* SECTION-1 */ .banner { background-image: url('../img/2.webp'); height: 100vh; background-position: center; background-size: cover; margin-top: -47px; } /* .banner::before { content: ""; background-image: url("../images/Ellipse2.webp"); background-repeat: no-repeat; background-size: cover; position: absolute; flex-shrink: 0; left: 0; top: 0; z-index: -1; width: 345px; height: 820px; opacity: 2; } */ .banner .container::after { content: ""; background-image: url('../images/Ellipse3.webp'); background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; right: 0; flex-shrink: 0; z-index: -1; width: 345px; height: 920px; opacity: 2; } #headerbtn { background: linear-gradient(268deg, #22a5dc, #0d3e81); padding: 12px 29px; border: none; border-radius: 6px; color: #fff; } .header-textbox h1 { font-size: 2.5rem; color: #0D3E81 !important; font-weight: 700; margin-top: 115px; } .header-textbox h1 span { font-size: 2.5rem; color: #22A5DC; font-weight: 700; margin-top: 115px; } .header-textbox p { font-size: 1rem; width: 90%; /* font-weight: 600; */ } .header-textbox img{ margin-right: 50px; margin-top: 10px; } @media (max-width:767px){ .banner{ height: auto; } .header-textbox h1,.header-textbox h1 span { font-size:2rem; margin-top:140px; } .header-textbox p { width: 100%; /* font-weight: 600; */ font-size: 0.9rem !important; } } /* SECTION-2 */ #two { margin-top: 50px; /* Adjust margin for smaller screens */ /* background-color: #f5f5f5; */ } #two .container { padding: 20px; /* Adjust padding for smaller screens */ text-align: center; } #two .container h4 { color: #000; font-size: 1.5rem; /* Adjust font size for smaller screens */ /* font-family: Raleway; */ font-weight: 600; text-transform: capitalize; letter-spacing: 0.44px; /* Adjust letter-spacing for smaller screens */ } #two .container h2 { color: #0d3e81; font-size: 2rem; /* Adjust font size for smaller screens */ /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.36px; /* Adjust letter-spacing for smaller screens */ } #two .container h2 span { color: #22a5dc; font-size: 2rem; /* Adjust font size for smaller screens */ /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.36px; /* Adjust letter-spacing for smaller screens */ } /* Media Query for screens at or below 767px */ @media (max-width: 767px) { #two .container { padding: 10px; /* Further adjust padding for smaller screens */ } } /* SECTION-3 */ #three { /* background-color: #f3f3f3; */ padding-bottom: 80px; position: relative; } #three .card{ border: none; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .card { height: 100% !important; } #three hr{ margin-left: 80px; margin-right: 90px; margin-top: -5px; } /* #three .thin{ margin-left: 80px; margin-right: 90px; margin-top: 50px; color: #3CD5C9; } */ #three .container::after{ content: ""; background-image: url('../images/Ellipse13full.webp'); background-repeat: no-repeat; background-size: cover; position: absolute; top: -100px; right: 0; flex-shrink: 0; z-index: -1; width: 900px; height: 920px; opacity: 2; } #three .card h6{ color: #0d3e81; font-size: 17px; /* font-family: Raleway; */ font-weight: 700; letter-spacing: 0.36px; } #three .card .card-img{ width: 60px; margin-left: 110px; margin-top: 30px; margin-inline: auto; } #three .card p{ color: #1A1A1A; font-size: 14px; /* font-family: Raleway; */ font-weight: 500; letter-spacing: 0.36px; } @media (max-width: 767px) { /* #three .card { width: 85%; height: auto; margin-left: 30px; } */ #three hr.thin { margin-top: 20px; /* Adjust margin for thin HR on smaller screens */ } #three .card h6 { font-size: 16px; /* Adjust font size for smaller screens */ letter-spacing: 0.32px; /* Adjust letter-spacing for smaller screens */ } /* #three .card .card-img { width: 15%; margin-left: 120px; margin-top: 20px; } */ #three .card p { font-size: 14px; /* Adjust font size for smaller screens */ letter-spacing: 0.28px; /* Adjust letter-spacing for smaller screens */ } } .card { transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -ms-transition: all .3s ease-in; -o-transition: all .3s ease-in; } .card:hover { cursor: pointer; transform: scale(1.06); transition: .5s; -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); } /* SECTION-4 */ #four { margin-top: 50px; /* Adjust margin for smaller screens */ /* background-color: #f5f5f5; */ } #four .container { padding: 20px; /* Adjust padding for smaller screens */ text-align: center; } #four .container h4 { color: #000; font-size: 1.5rem; /* Adjust font size for smaller screens */ /* font-family: Raleway; */ font-weight: 600; text-transform: capitalize; letter-spacing: 0.44px; /* Adjust letter-spacing for smaller screens */ } #four .container .large-heading{ color: #0d3e81; font-size: 2rem; /* Adjust font size for smaller screens */ /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.36px; /* Adjust letter-spacing for smaller screens */ } #four .container h2 span{ color: #22a5dc; font-size: 2rem; /* Adjust font size for smaller screens */ /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.36px; /* Adjust letter-spacing for smaller screens */ } /* Media Query for screens at or below 767px */ @media (max-width: 767px) { #four .container { padding: 10px; /* Further adjust padding for smaller screens */ } } /* SECTION-5 */ #five .content{ background-image: url('../images/rectangle50.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; /* padding-bottom: 50px; */ } #five .box{ width: 160px; border: none; /* margin-top: 23px; */ transform: rotate(-90deg); /* transform-origin: left top; */ background-image: url('../images/Rectangle104.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; } #five .page img { width: 40%; height: auto; /* margin-top: 45px; */ margin-left: 32px; /* margin-left: 100px; */ justify-content: space-between; gap: 50px; } #five .arrow img { width: 30%; height: auto; /* margin-top: 55px; */ margin-left: 40px; } #five .container .page p{ margin-top: 8px; margin-left: -1px; font-weight: 700; } #five .container .page{ border: 1px solid; padding: 20px; } #five .container .content .wrapper::before{ border: 3px solid #000; position: absolute; } #five .line{ width: 50%; /* Full width of the container */ height: 3px; /* Adjust the height of the line as needed */ background-color: #000; /* Set the line color as desired */ position: absolute; /* Position absolutely within the .page element */ margin-top: -152px; margin-left: -65px; } #five .content-1 img{ width: 49%; background-color: #D9D8EA; } #five .content-1{ background-color: #D9D8EA; } #five .content-2 img{ width: 100%; } #five .responsive-img{ width: 100%; } /* Your existing CSS */ /* Media Query for Small Screens (up to 767px) */ @media (max-width: 767px) { #five .content { flex-direction: column; align-items: center; text-align: center; } #five .box { transform: none; /* Remove rotation for small screens */ background-image: none; /* Remove background image for small screens */ background-color: #006980 ; /* Set a background color */ color: #fff; margin-bottom: 20px; } #five .page img, #five .arrow img { width: 60%; /* Adjust image width for small screens */ margin: 10px 0; } } /* SECTION-6 */ #six { background-image: url('../images/img-2.svg'); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 70px 0; margin-top: 50px; } #six h2 { color: #0d3e81; font-size: 30px; /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.50px; } #six button, #eight button { background: linear-gradient(268deg, #22a5dc, #0d3e81); padding: 12px 14px; border: none; border-radius: 6px; color: #fff; } /* SECTION-7 */ #seven{ /* background-color: #f3f3f3; */ padding-bottom: 70px; } #seven .rectangle1{ width: 100%; margin-top: 115px; margin-left: -40px; } #seven .rectangle2{ width: 100%; margin-top: 140px; margin-left: 0px; } #seven .content { margin-top: 150px; } #seven .content .tick{ position: absolute; margin-left: -35px; margin-top: 110px; width: 30px } #seven .content .idea{ margin-left: -35px; margin-top: 25px; position: absolute; } #seven .content h4{ color: black; font-size: 1.2rem; /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.32px; } #seven .content h2{ color: #0d3e81; font-size: 2rem; /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.76px; } #seven .content h2 span{ color: #22a5dc; font-size: 2rem; /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.76px; } #seven .content h6{ color: black; font-size: 1.2rem; /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.32px; } #seven .content p{ color: #1A1A1A; font-size: 1rem; /* font-family: Raleway; */ font-weight: 400; letter-spacing: 0.36px; } @media (max-width: 767px) { #seven .rectangle1, #seven .rectangle2 { width: 85%; margin-left: 30px; } #seven .content h3 { font-size: 24px; } #seven .content p { font-size: 14px; } } /* SECTION-8 */ #eight{ background-image: url('../images/img-2.svg'); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 40px; margin-top: 50px; } #eight .container-fluid{ } #eight .container h2{ color: #0d3e81; font-size: 30px; /* font-family: Raleway; */ font-weight: 700; text-transform: capitalize; letter-spacing: 0.50px; } @media (max-width: 767px) { #eight .container { padding: 20px 0; } #eight .container h2{ font-size: 20px; /* Adjust font size for smaller screens */ letter-spacing: 0.40px; /* Adjust letter-spacing for smaller screens */ margin: 0; } } /* SECTION-9 */ #nine{ /* background-color: #f3f3f3; */ /* padding-bottom: 100px; */ } #nine .container{ padding-top: 100px; } #nine .container h2{ font-size: 2rem; font-weight: 700; color: #0d3e81; text-align: center; } #nine .container h2 span{ font-size: 2rem; font-weight: 700; color: #22a5dc; text-align: center; } #nine .line{ width: 3px; /* height: 15%; */ background-color: black; margin-left: 8%; } #nine .bank img{ border: 1px solid #006980; width: 50px; padding: 10px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } #nine .content { justify-content: space-between; gap: 50px; } /* footer */ .footer-section { background: #0D3E81; /* margin-top: 50px; */ overflow: hidden; } .footer-content { border-bottom: 1px solid #ccc; } .footer-pattern img { position: absolute; top: 0; left: 0; height: 330px; background-size: cover; background-position: 100% 100%; } .footer-logo { margin-bottom: 10px; } .footer-logo a { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 0.56px; text-transform: capitalize; list-style-type: none; } .footer-logo img { max-width: 200px; } .footer-text p { margin-bottom: 14px; font-size: 13px; color: #fff; } .footer-social-icon span { color: #fff; display: block; font-size: 20px; font-weight: 700; margin-bottom: 20px; } .footer-widget.info img.info-icon { width: 18px; } .footer-social-icon a { margin-right: 10px; } .f-social-icon { width: 16px; } .footer-widget-heading h3 { color: #fff; font-size: 16px; margin-bottom: 20px; position: relative; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: 0.64px; text-transform: capitalize; } .footer-widget ul { padding: 0; } .footer-widget ul li { margin-bottom: 12px; list-style: none; } .footer-widget ul li a:hover{ color: #fff; } .footer-widget ul li a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.36px; } .copyright-area{ background: #0D3E81; padding: 25px 0; } .copyright-text p { margin: 0; font-size: 13px; color: #fff; } .copyright-text p a{ color: #fff; } .footer-menu li { margin-left: 20px; } .footer-menu li:hover a{ color: #fff; } .footer-menu li a { font-size: 13px; color: #fff; }