/* /=============== GOOGLE FONTS ===============/ */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200;6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;700&family=Nunito+Sans:opsz,wght@6..12,200;6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900&family=Poppins:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;700&family=Nunito+Sans:opsz,wght@6..12,200;6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900&family=Poppins:wght@400;500;600;700&family=Rubik:wght@300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@200;300;400;500;600;700&family=Roboto+Slab:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@200;300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&family=Roboto+Slab:wght@400;500;600&display=swap'); /* @font-face { font-family: "Webly Sleek SemiLight", Helvetica-, "droid sans", sans-serif; src: url(assets/fonts/weblysleekuil.ttf); font-family: 'Rubik', sans-serif; font-family: 'Catamaran', sans-serif; font-family: 'Roboto Slab', serif; font-family: 'Catamaran', sans-serif; font-family: 'Open Sans', sans-serif; font-family: 'Roboto Slab', serif; } */ /* /=============== VARIABLES CSS ===============/ */ :root { --blue: #2D3392; --green: #037539; --black: #000000; --white: #FFFFFF; --light-blue: #005AAB; --light-green: #007935; } /* /=============== BASE ===============/ */ * { box-sizing: border-box; padding: 0; margin: 0; } /* section { padding: 5%; } */ body { color: #000000 !important; /* font-family: 'Poppins'; */ font-family: 'Rubik', sans-serif; font-weight: 300; /* font-family: 'Nunito Sans', sans-serif; */ background: linear-gradient(110deg, rgba(60, 144, 89, 0.2) 28%, rgba(255, 255, 255, 0.5) 57%, rgba(60, 144, 89, 0.45) 92%); } body .body-bg{ width:100%; position:fixed; bottom:0; left:0; z-index:-999999; /*background-position: bottom 0px right 50%;*/ /*left:50%;*/ } body .body-bg img{ width:100%; background-size:cover; background-attachment:initial; /*background-position: center;*/ /*background-position: bottom 0px right 50%;*/ background-repeat: no-repeat; } ul { list-style: none; } a { text-decoration: none; } p { /* font-family: 'Open Sans', sans-serif; */ font-size: 15px; color: #3b3b3b; font-weight: 400; /* line-height: 24px; */ text-align: justify; /* margin: 0 !important; */ } /* sidebar css start*/ #right-sidebar { right: 0; margin-top: -135px; position: fixed; top: 60%; z-index: 999; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); } #left-sidebar { left: 0; margin-top: -135px; position: fixed; top: 60%; z-index: 999; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); } /* #left-sidebar{ left: -90px; margin-top: -135px; position: fixed; top: 65%; z-index: 999; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); } */ /* #left-sidebar .transform{ line-height: 30px; padding: 5px 15px; text-align: center; background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%); color: #fff; border-left: 2px solid #ffffff; font-weight: 500; transform: rotate(270deg); width: 150px; margin-bottom: 110px; transition: background 10s; } #left-sidebar .transform:hover{ background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(44, 49, 140, 1) 100%); } */ #right-sidebar .entypo-self, #left-sidebar .entypo-self, #right-sidebar .lag_transform, #left-sidebar .lag_transform, #right-sidebar .transform, #left-sidebar .transform { line-height: 30px; padding: 5px; text-align: center; width: 45px; /* background: #008641; */ /* background: #2E3191; */ background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%); display: block; color: #fff; border-bottom: 2px solid #fff; } .entypo-self>i { font-size: 18px } #right-sidebar .transform span, #right-sidebar .transform:hover span { right: -35px; z-index: 0; opacity: 1; font-size: 14px; } #right-sidebar .entypo-self, #left-sidebar .entypo-self, #right-sidebar .transform { font-size: 14px; position: relative; } #right-sidebar .transform { height: 115px; } #right-sidebar .transform span { transform: rotate(90deg); color: #fff; font-weight: 400; } #right-sidebar .lag_transform span, #right-sidebar .lag_transform:hover span { right: -14px; z-index: 0; opacity: 1 } #right-sidebar ul, #left-sidebar ul { list-style: none; padding: 0; margin: 0 } /* #right-sidebar .lag_transform { font-size: 18px; margin-bottom: 7px; position: relative; height: 70px } */ #right-sidebar a[class*=media] span, #right-sidebar a[class*=media] span:before, #right-sidebar a[class*=media]:hover, #right-sidebar a[class*=self] span, #left-sidebar a[class*=self] span, #right-sidebar a[class*=self] span:before, #left-sidebar a[class*=self] span:before, #right-sidebar a[class*=self]:hover, #left-sidebar a[class*=self]:hover, #right-sidebar a[class*=socialmedia] span, #right-sidebar a[class*=socialmedia] span:before, #right-sidebar a[class*=socialmedia]:hover, #right-sidebar a[class*=twitter] span, #right-sidebar a[class*=twitter] span:before, #right-sidebar a[class*=twitter]:hover { background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(44, 49, 140, 1) 100%); } #right-sidebar a label, .loanheadline h2, i.phoneicon-custom { margin-bottom: 5px; display: inline-block } #right-sidebar .lag_transform span { transform: rotate(90deg); color: #fff; font-weight: 400 } #right-sidebar a img, #left-sidebar a img { height: 25px } #left-sidebar a:hover span, #right-sidebar a:hover span { opacity: 1; padding: 10px 30px; font-weight: 500; } #right-sidebar a:hover span { right: 130%; } #left-sidebar a:hover span { left: 130%; } #right-sidebar a span { border-radius: 3px; line-height: normal; right: -722%; margin-top: -16px; opacity: 0; padding: 4px 15px; position: absolute; -webkit-transition: opacity .3s, right .4s; -moz-transition: opacity .3s, right .4s; -ms-transition: opacity .3s, right .4s; -o-transition: opacity .3s, right .4s; transition: opacity .3s, right .4s; top: 50%; white-space: nowrap; z-index: -1; } #left-sidebar a span { border-radius: 3px; line-height: normal; left: -722%; margin-top: -16px; opacity: 0; padding: 4px 15px; position: absolute; -webkit-transition: opacity .3s, left .4s; -moz-transition: opacity .3s, left .4s; -ms-transition: opacity .3s, left .4s; -o-transition: opacity .3s, left .4s; transition: opacity .3s, left .4s; top: 50%; white-space: nowrap; z-index: -1; } #right-sidebar a span i, #left-sidebar a span i { color: #ffffff; } #right-sidebar div:hover .cal-media { right: 130%; opacity: 1 } #right-sidebar div .cal-media { border-radius: 3px; line-height: normal; right: -722%; margin-top: -16px; opacity: 0; padding: 4px 10px; position: absolute; -webkit-transition: opacity .3s, right .4s; -moz-transition: opacity .3s, right .4s; -ms-transition: opacity .3s, right .4s; -o-transition: opacity .3s, right .4s; transition: opacity .3s, right .4s; top: 50%; white-space: nowrap; z-index: -1; } #right-sidebar .calmediabox { background: #666; color: #fff; text-align: left; list-style: square; } #right-sidebar .calmediabox li { border-bottom: 1px solid #fff; padding: 5px 20px; position: relative } #right-sidebar .calmediabox li::before { content: ""; background: white; width: 4px; height: 2px; position: absolute; left: 8px; top: 16px; } #right-sidebar div .cal-media::before { background: #666 } #right-sidebar div .cal-media::before { content: ""; display: block; height: 12px; right: 6px; margin-top: 0; position: absolute; top: 15%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 12px; z-index: -2; } #right-sidebar div .cal-media li a { color: #fff; } #right-sidebar a span h3 { color: #fff; border-bottom: 1px solid #fff; margin-top: 5px; padding-bottom: 5px; } #right-sidebar a label .fa { border: 1px solid #fff; width: 25px; height: 25px; padding: 5px; } #right-sidebar a label { display: list-item; } #right-sidebar a label { font-style: normal; text-align: left; float: left; padding: 1px; font-size: 14px } .headline-center p, .helplinebox { text-align: center } #right-sidebar a label:hover { text-decoration: underline; } #right-sidebar a span:before, #left-sidebar a span:before { content: ""; display: block; height: 8px; margin-top: -4px; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; z-index: -2 } #right-sidebar a span:before { right: -4px; } #left-sidebar a span:before { left: -4px; } #right-sidebar a span.appslist { top: -15%; min-width: 200px; min-height: 101px; } #right-sidebar a span.appslist img { height: auto; } #right-sidebar a span.sociallist { top: -30px; min-width: 200px; min-height: 101px; } #right-sidebar a span.sociallist:before { margin-top: 0px } #right-sidebar a[class*=dribbble] span, #right-sidebar a[class*=dribbble] span:before, #right-sidebar a[class*=dribbble]:hover { background: #dd4949 } #right-sidebar a[class*=behance] span, #right-sidebar a[class*=behance] span:before, #right-sidebar a[class*=behance]:hover { background: #3162a2 } #right-sidebar a[class*=sociallist] span, #right-sidebar a[class*=sociallist] span:before, #right-sidebar a[class*=sociallist]:hover { background: #093 } #right-sidebar a[class*=googleplus] span, #right-sidebar a[class*=googleplus] span:before, #right-sidebar a[class*=googleplus]:hover { background: #d7262b } .activesub { background: #093 !important } #right-sidebar a.activesub span { right: 130% !important; opacity: 1 !important } .exchangeratediv h4 { color: #fff; text-transform: uppercase } .exchangeratediv .table>thead>tr>th { border-bottom: 1px solid #fff !important; font-size: 14px; text-align: center; background: #005aaa; color: #fff } .exchangeratediv .table>tbody>tr>td { border-bottom: 1px solid #fff !important; font-size: 14px; padding: 0; color: #fff; text-align: center } div.forexmore { font-size: 14px; color: #fff } .exchangeratediv .table { margin-bottom: 5px !important } #right-sidebar a em { font-style: normal; display: inline-block; margin-bottom: 5px; text-align: left; display: inline-block; float: left; padding: 1px; font-size: 13px; } /* sidebar css end*/ /*online shopping*/ .shopping_card_wrapper { display: flex; justify-content: center; gap: 15px; margin: 20px auto; } .shopping_card { background-color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.4); transition: 0.3s; padding: 0px 25px; border-radius: 5px; } .shopping_card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6); } .shopping_card img { width: 230px; height: 230px; padding: 10px; } .shopping_card h4 { text-align:center; color:#28336E; font-size: 17px; margin-bottom: 15px; } .shopping_card h6 { font-size: 15px; font-weight: 500; } /*online shopping*/ /* Top Menu start */ .logo_box { margin: 0 10px; border: 1px solid #65A77C; border-radius: 5px; padding: 5px; background-color: #f2fcf3; /* box-shadow: rgba(67, 136, 84, 0.5) 0px 7px 29px 0px; */ box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; transition: 0.3s; } .logo_box:hover { background-color: #fff; transform: scale(1.1); } .logo_box img { width: 75px; height: 30px; } .left_container { width: 60%; margin-left: 30px; } .right_container { width: 40%; margin-right: 30px; } .top_bar { display: flex; justify-content: end; /*background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 57%, rgba(255, 255, 255, 1) 92%);*/ background:linear-gradient(135deg, rgb(255 255 255) 36%, rgba(60, 144, 89, 1) 57%, rgba(255, 255, 255, 1) 111%); } /* Top Menu End */ /* Navbar Start */ .fixed-top { /* position: -webkit-sticky; Safari */ /* position: sticky; */ /* background-color: #000 !important; background: url(); */ /* margin-top: 10px; */ border-bottom: 4px solid #9084ff; border-image: linear-gradient(to right, #05b620, #0805cc) 1; background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%); } .fixed-top .megamenu { top:80% !important; } /*.fixed-top>.container{*/ /* min-width:1300px !important;*/ /*}*/ @media all and (min-width: 992px) { .navbar .nav-item .dropdown-menu{ display: none; } .navbar .nav-item:hover .nav-link{ } .navbar .nav-item:hover .dropdown-menu{ display: block; } .navbar .nav-item .dropdown-menu{ margin-top:0; } } .navbar-brand-img img { height: 50px; /* padding-right: 15px; */ margin-left: 25px; border-radius: 5px; -webkit-transition: all 3s; transition: all 3s; } .nav_container { background: url(../resources/menu_header.png); width: 100%; /*max-height: 8.5vh;*/ /*min-height:8.5vh;*/ height:auto; background-size: contain; background-repeat: no-repeat; background-position: 0% 0%; background-size: 100% 100%; } .navbar-expand-lg .navbar-collapse{ justify-content:center; } #main_menu .nav-link { display: inline-block; text-decoration: none; text-transform: Uppercase; font-weight: 500; font-size: 12px; color: #fff; padding:10px 13px; } .nav-link i{ font-size:11px; margin-left:1px; } /*.nav-link::after {*/ /* content: '';*/ /* display: block;*/ /* width: 0;*/ /* height: 2px;*/ /* background: #c0e7c3;*/ /* transition: width .3s;*/ /*}*/ .nav-link:hover::after { width: 100%; } /*.navbar-nav>.active>a::after {*/ /* content: '';*/ /* width: 100%;*/ /* height: 2px;*/ /* background: #c0e7c3;*/ /*}*/ .navbar-nav>.active>a { border-radius:5px; background-color: rgb(204, 236, 206); color: #000; } #main_menu .nav-link:hover { border-radius:5px; background-color: rgb(204, 236, 206); color: #000; transition: color 0.5s ease; } .nav_content { position: relative; display: flex; justify-content: center !important; } #main_menu .dropdown-menu, #main_menu .megamenu { position: absolute; top: 100%; left: 10%; /* border-top: 5px solid #112430; */ margin-top: 0px; border-top: 4px solid var(--blue); } #main_menu .about_megamenu { left: 2%; } #main_menu .deposit_megamenu { left: 10%; } #main_menu .news_megamenu { left: 35%; } .megamenu_wrapper { background: url(../resources/megamenu.png); /* background: url(../resources/footer.png); */ background-size: cover; background-attachment: initial; background-position: center; } .megamenu { width: fit-content !important; } .megamenu_spacing { padding: 25px 15px 25px 15px; } #main_menu .about_megamenu .megamenu_spacing { padding: 25px 0px 25px 0px; } .megamenu_content { border-right: 1px dashed #112430; } .dropdown-menu[data-bs-popper] { top: 100%; left: 0; margin-top: 0.5rem; } .megamenu .dropdown-header { text-transform: uppercase; font-size: 12px; color: #112430; font-weight: 700; } .megamenu .news .dropdown-header { text-transform: uppercase; margin-right: 15px; font-size: 12px; color: #112430; font-weight: 700; } .megamenu .dropdown-item, .dropdown-menu .dropdown-item { text-align: left; font-size: 12px; color: #07223D; font-weight: 400; } .dropdown-menu .aboutus .dropdown-item i { color: #044177; font-size: 9px; font-weight: 600; padding-right: 10px; } .dropdown-menu .depositScheme .dropdown-item i { color: #044177; font-size: 10px; padding-right: 10px; } .dropdown-menu .investmentScheme .dropdown-item i { color: #044177; font-size: 10px; padding-right: 10px; } .dropdown-menu .investmentScheme .megamenu_content { padding-right: 0px; } .dropdown-menu .news .dropdown-item i { color: #044177; font-size: 10px; padding-right: 10px; } .dropdown-menu .dropdown-item { /* font-weight: bold; */ transition: transform 1s; } .dropdown-menu .dropdown-item:hover { background-color: transparent; color: #3a855f; transform:scale(1); padding-left: 20px; } .dropdown-divider { background-color: #e8f0ef; } /* Navbar End */ /* Slider start */ .hero { padding: 0%; /*height: 50%; */ } .hero #hero_slider .carousel-inner .carousel-item{ max-height:60vh; } .hero #hero_slider .carousel-inner .carousel-item img{ max-height:60vh; } .hero #hero_slider .carousel-indicators button { background-color: #2A3495; } .hero #hero_slider .carousel-control-prev, .hero #hero_slider .carousel-control-next { padding: 5%; } .hero #hero_slider .carousel-control-prev-icon, .hero #hero_slider .carousel-control-next-icon { width: 30px; height: 30px; /* font-size: 25px; */ /* padding: 15%; */ background-color: #000000; border: 3px solid #639eeb; border-radius: 20%; box-shadow: rgba(120, 162, 216, 0.7) 0px 0px 0px 1px; } /* Slider End */ /* .card { height: 150px; width: 200px; margin: 50px; box-shadow: 5px 5px 20px black; overflow: hidden; } .card img { height: 150px; width: 200px; border-radius: 3px; } .intro { height: 70px; width: 200px; padding: 6px; box-sizing: border-box; position: absolute; background: rgba(27, 27, 27, 0.5); color: white; } */ /* Scrolling animation start*/ .news_wrapper { padding: 15px; background: url('../resources/mega.png'); background-size: contain; background-attachment: initial; background-position: center; height: 100%; width: 100%; border-radius: 15px; } .news_container { display: flex; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .news_heading { text-transform: uppercase; font-weight: 500; color: #fff; background-color: #0a1191; border-radius: 5px 0px 0px 5px; padding: 0 45px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .news_content{ padding: 2px 0px; background-color:#c7d3fc; border-radius: 0px 5px 5px 0px; } .news_content .scroll-text { font-family: 'Catamaran', sans-serif; color: #072694; font-size:17px; letter-spacing: 1.2px; font-weight: 700; margin-top:10px; } .news_content .scroll-text i { margin: 0 10px; color: #136A59; } .fa-newspaper { } /* News Scrolling animation start */ /* for Firefox */ @-moz-keyframes my-animation { from { -moz-transform: translateX(100%); } to { -moz-transform: translateX(-100%); } } /* for Chrome */ @-webkit-keyframes my-animation { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes my-animation { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } } /*.scroll-text {*/ /* overflow: hidden;*/ /* position: relative;*/ /*}*/ /*.scroll-text * {*/ /* display: table;*/ /* white-space: pre;*/ /*position: relative;*/ /* animation: scroll 7s linear infinite;*/ /*}*/ /*@keyframes scroll {*/ /* 0% { left: 100%; transform: translateX(0); }*/ /* 100% { left: 0; transform: translateX(-100%); }*/ /*}*/ /* Scrolling animation End */ /* Product css start*/ .card-product { box-sizing: border-box; /* font-family: 'Poppins', sans-serif; */ font-size: 1rem; display: flex; justify-content: center; align-items: center; /*min-height: 100vh;*/ padding: 80px 0 35px 0; } .img-box img { display: block; width: 100%; height: 100%; /* object-fit: cover; */ background-size: cover; /* background-attachment: initial; */ /* background-position: center; */ } .grid { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; grid-gap: 1.6rem; text-align: center; width: 85%; margin: auto; } .product-card { display: block; overflow: hidden; /* border-radius: 0.6rem; */ cursor: pointer; transition: 0.2s; position: relative; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); } .card-content { position: absolute; /* background-color: rgba(28, 44, 134, 0.9); */ background: linear-gradient(110deg, rgb(223, 222, 253) 0%, rgb(178, 178, 187) 50%, rgba(202, 199, 253) 100%); bottom: 0; color: #000; width: 100%; height: 20%; padding: 0.6rem 0; overflow: hidden; transition: 0.7s; } .card-content h2 { padding-top: 5px; font-size: 1rem; line-height: 1.8rem; font-weight: 500; text-transform: capitalize; } .card-content p { font-family: Rubik; font-size: 12px; font-weight: 400; /* line-height: 1.2rem; */ padding: 1rem; color: #000; } .card-content button { padding: 5px 35px; border-radius: 10px; font-size: 0.8rem; } /* .card-content:hover { height: 100%; transition: 0.7s; display:flex; flex-direction:column; align-items:center; justify-content:center; } */ .product-card:hover .card-content { height: 100%; transition: 0.7s; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* responsive start */ @media (max-width:1024px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width:660px) { .grid { grid-template-columns: repeat(1, 1fr); } } /* product css end */ /* what's new slider css start */ .img-slider { padding:35px 0; margin:0 auto; /*margin-top: 6%;*/ /*height: 100vh;*/ font-family: Arial, Helvetica, sans-serif; /* padding: 50px 20px; */ /*max-width: 1240px;*/ /* margin: 0 auto; */ } .card-slide { border: none; } .btn-slide { font-family: Rubik; font-weight: 500; margin-top: 12px; /* background-color: #2c318c; */ background: url('../resources/mega.png'); color: #005AAB; border: 1px solid green; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } .btn-slide:hover { background-color: green; color: white; } .img_box { overflow: hidden; } .img_box img { display: block; width: 100%; height: 25rem; transition: 0.3s all ease-in-out; /* object-fit: cover; */ /* border: 1px solid blue; */ } .img_box img:hover { transform: scale(1.1); } .splide__arrow { opacity: 1; width: 2.5rem; height: 4rem; background: none; } .splide__arrow svg { fill: #2c318c; height: 3.2em; width: 2.2em; } .splide__pagination { bottom: -2rem; } .splide__pagination__page { height: 10px; } .splide__pagination__page.is-active { width: 9px; } .img-slider .splide__pagination__page.is-active { opacity: 1; background-color: dodgerblue; } /* For responsive slider */ @media (max-width:991px) { .img_box img { width: 80%; } .btn-slide { width: 80%; } } @media screen and (min-width: 992px) { .img-slider .splide { padding: 0 4rem; } } /* What's new slider css end */ #topBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; /* font-size: 18px; */ border: none; outline: none; /* background-color: #318ce0; */ background-color: #27326D; color: #fff; border: 1px solid #8790da; cursor: pointer; padding: 10px 17px; border-radius: 50%; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } #topBtn:hover { background-color: #90dda1; color: #005AAB; border: 1px solid #005AAB; } #google_translate_element{ position: fixed; bottom: 20px; left: 30px; z-index: 999999; /* font-size: 18px; */ border: none; outline: none; /* background-color: #318ce0; */ background-color: #27326D; color: #fff; border: 1px solid #8790da; cursor: pointer; padding: 10px 17px; border-radius: 10%; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } #footer { font-family: 'Roboto Slab', serif; padding-top: 50px; padding-bottom: 50px; /* font-family: 'Poppins', sans-serif; */ color: #ffffff; background: url(../resources/footer.png); width: 100%; /* height: 80vh; */ background-size: cover; background-repeat: no-repeat; background-position: 0% 0%; background-size: 100% 100%; /* -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; */ } /* responsive */ .boxed_wrapper { position: relative; overflow-x: hidden; margin: 0 auto; width: 100%; min-width: 300px; } /* responsive */ .footer_wrapper { font-family: 'Catamaran', sans-serif !important; width: 70%; margin: 0 auto; display: flex; justify-content:space-around; } .footer_content { width: auto; padding: 20px; } #footer .footer_title { text-decoration: underline; color: #c2bcf8; font-size: 15px; font-weight: 600; text-transform: uppercase; margin-bottom: 5px !important; } #footer .footer_icon{ display: flex; margin-bottom: 5px; } #footer .footer_icon i { margin-right: 7px; margin-top: 4px; font-size: 10px; } #footer .footer_icons i { margin-right: 25px; margin-top: 4px; font-size: 10px; } #footer .footer_icon .footer_text,#footer .footer_icons .footer_text { font-size: 14px; font-weight: 400; color: #f4f4ff; line-height: 18px; text-align: left; } #footer .footer_icons{ display:flex !important; justify-content:between !important; } /* contact form */ .form_wrapper { width: 50%; background-color: #57725d; padding: 35px; margin: 30px auto; } /*Hero Image(background theme)*/ .cloud_bg{ background-image:url('../HeroBg/digital.png'); } .statement_bg{ background-image:url('../HeroBg/statement_bg.jpg'); } /*Hero Image(background theme)*/ /* about */ .about_hero { padding: 0; /* background-image: url(../resources/about/building.jpg); */ width: 100%; height: 40vh; background-size: cover; background-repeat: no-repeat; background-position: 0% 0%; background-size: 100% 100%; display: flex; justify-content: end; align-items: end; } .literacy_bg{ background-image:url('../HeroBg/literacy_bg.jpg'); } .about_hero h3 { color: #fff; padding-right: 5%; } .about_tab { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; /*overflow: hidden;*/ box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; /* border-top: 1px solid green; border-bottom: 1px solid green; */ } .vertical_tab { /* border-right: 1px solid #a8a7a7; */ box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; width: 25%; /* height: auto; */ display: flex; flex-direction: column; /* justify-content: center; */ /* align-items: flex-start; */ padding: 40px 0px; overflow: hidden; /* background-color: #dcdfdd; */ /* background: linear-gradient(90deg, rgba(144,138,233,1) 0%, rgba(200,197,246,1) 40%, rgba(137,212,173,1) 81%); */ /* background: linear-gradient(90deg, rgb(166, 181, 231) 0%, rgba(225,225,255,1) 40%, rgba(160, 172, 226, 0.998) 97%); */ /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */ } .vertical_tab .tablinks { border-bottom: 1px solid #a8a7a7; /* border-radius: 10px; */ } .special_spacing { letter-spacing: 0.15rem; color: #868585; font-weight: 500; font-family: Rubik; } .tabcontent ul li, .tabcontent ol li, .v_tabcontent ul li { font-size: 14px; font-weight: 400; /* color: #00762a; */ } .tabcontent ol li::marker { color: #00762a; } .tabcontent ul li, .v_tabcontent ul li { list-style-type: circle; } .offshore .tabcontent ul li{ list-style-type: square !important; } .offshore .nav-pills .nav-link.active{ color: #fff; background:linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%) !important; } .accordion-body ul li { list-style-type: square !important; } .accordion-button { font-size: 14px; color: var(--blue); font-weight: 500; width:100% } #events .accordion .accordion-item .accordion-button{ width:100% } .accordion-button i { margin-right: 10px; } .accordion-button::after { background-image: none; } .v_tabcontent ol li, .accordion-body ol li { font-size: 14px; font-weight: 400; } .tabcontent, .v_tabcontent { display: none; padding: 40px 12px; } /*.dynamic_v_tabcontent{*/ /* display:block;*/ /*}*/ .about_tab button, .vertical_tab button { /* font-family: serif; */ font-family: 'Roboto Slab', serif; /* color: #005AAB; */ color: #28336E; font-weight: 500; padding: 5px 25px; /* padding:5px ; */ background: url('resources/mega.png'); border: 0; border-right: 1px solid #a6a2e7; margin: 10px 0; } .vertical_tab button { border: 0; } .about_tab .nav-link { color: #fff; } .tab button.selected { background: #047536; color: #ffffff; /* color:#047536; */ } /* .tab #defaultOpen{ background: #047536; color: #ffffff; } */ /* .history_card1{ transform: translateX(20px); -webkit-animation: transform 5s linear infinite; -moz-animation: transform 5s linear infinite; animation: transform 5s linear infinite; } .history_card2{ transform: translateX(-20px); -webkit-animation: transform 5s linear infinite; -moz-animation: transform 5s linear infinite; animation: transform 5s linear infinite; } .history_card3{ transform: translateX(-20px); -webkit-animation: transform 5s linear infinite; -moz-animation: transform 5s linear infinite; animation: transform 5s linear infinite; } */ .history_card { background: linear-gradient(110deg, rgb(223, 222, 253) 0%, rgb(248, 248, 253) 50%, rgba(202, 199, 253) 100%); /* background-color: #000000 !important; */ } .history_card:hover { background: url(../resources/megamenu.png); color: #000000; font-weight: 400; } .gallery_card { background: hsla(265, 100%, 95%, 0.5); border: 1px solid #21645E; /* margin: 0px; */ font-size: 12px; color: #044177; /* box-shadow: rgba(157, 157, 172, 0.8) 0px 2px 10px 0px; */ padding: 0; width: 400px; height: auto; /*margin: 0 auto;*/ /*margin-left:10px;*/ box-shadow: 0 2px 5px 0px rgba(0, 97, 255, 0.2); border-radius: 5px; cursor: pointer; } .threecard { /* width: 60%; */ display: flex; justify-content:space-between; align-items:center; gap: 35px; /* margin-top: 15px; */ margin: 35px auto; } .administrator .threecard,.administrator .row{ justify-content:center !important; gap:34px !important; margin-bottom:20px !important; } .gallery_card_content { display: flex; justify-content: space-around; } .gallery_card_content img { height: 300px; } .gallery_card_content h5 { color: #044177; background: rgba(247, 249, 250, 0.5); } .gallery_card_content p { font-size: 14px; font-weight: 400; color: #000; background: rgba(247, 249, 250, 0.5); } .gallery_card_content { background: rgba(14, 30, 37, 0.12); } ul.mdList { list-style-type: disc; font-size: 13px; font-weight: 400; color: #000; line-height: 24px; } .card-footer{ display:flex; flex-direction:column; gap:10px; } .card-footer h5 { text-align: center; font-size: 16px; font-weight: 500; margin: 0; } .card-footer p { font-size: 13px; color: #3A855F; font-weight: 500; text-align: center; } .card-footer .title{ color: #000000; } .card-footer .name{ } .card-footer .designation{ color: #3A855F; } .modal_content .sub_title { font-size: 14px; color: #000; font-weight: 500; } .corporate_card, .info_card { background: hsla(265, 100%, 95%, 0.5); border: 1px solid #21645E; padding: 20px 40px 0px 40px; margin: 15px; font-size: 12px; color: #044177; box-shadow: rgba(157, 157, 172, 0.8) 0px 2px 10px 0px; } .corporate_card:hover, .info_card:hover { border: 1px solid var(--blue); box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; transform: scale(1.1); } .info_card p { font-family: Rubik; font-size: 13px; /*line-height: 10px;*/ } .corporate_card h6, .corporate_card p { text-align: center; } .corporate_card p { color: #000000; font-weight: 500; } table { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } table thead th { padding: 10px 20px !important; color: #044177; } .table-hover { background: linear-gradient(110deg, rgb(223, 222, 253) 0%, rgb(248, 248, 253) 50%, rgba(202, 199, 253) 100%); } td { font-size: 13px; color: #000000; font-weight: 400; padding: 10px 20px !important; } /* @-webkit-keyframes transform { 0% {transform: translateX(10px); } 20% {transform: translateX(0px); } 40% {transform: translateX(10px); } 60% {transform: translateX(0px); } 80% {transform: translateX(10px); } 100% {transform: translateX(0px); } } @-moz-keyframes transform { 0% {transform: translateX(10px); } 20% {transform: translateX(0px); } 40% {transform: translateX(10px); } 60% {transform: translateX(0px); } 80% {transform: translateX(10px); } 100% {transform: translateX(0px); } } @keyframes transform { 0% {transform: translateX(10px); } 20% {transform: translateX(0px); } 40% {transform: translateX(10px); } 60% {transform: translateX(0px); } 80% {transform: translateX(10px); } 100% {transform: translateX(0px); } } */ .history_card i { color: #005AAB; font-size: 45px; } .history_card i:hover { color: #007935; } .card_content i { color: #005AAB; font-size: 12px; font-weight: 500; margin-right: 5px; } .card_content div { margin-bottom: 7px; } .heading_title { margin-bottom: 20px; text-align: center; color: var(--blue); } .tab_title { text-align: center; margin-bottom: 20px; font-family: Rubik; font-size: 19px; font-weight: 500; color: #28336E; } .para_heading { margin-top: 30px; /* font-family: Rubik; */ font-size: 18px; font-weight: 500; color: #28336E; text-decoration: underline; } .para_sub_heading { font-size: 16px; font-weight: 500; color: #28336E; } /* active menu */ ul.navbar-nav li.active>a { color:#000 !important; /* font-weight: bold; */ /* text-decoration: underline; */ } .card_wrapper { display: flex; justify-content: space-evenly; gap:10px; /* margin-top: 35px; */ } .digitalCard { display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid green; padding: 10px 10px 0px 10px; transition: transform .2s; border-radius: 5px; color: #005AAB !important; gap:0px; /* transition: 0.4s; */ /* Animation */ /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */ /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */ } .digitalCard:hover { border: 1px solid var(--blue); color: #00762a !important; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; transform: scale(1.1); background: url('../resources/bg/digital_bg.png'); } .service_icon img { margin: 0 auto; width: 140px; height: 50px; } .service_title h3 { /* visibility: hidden; */ font-family: poppins; margin-top: 19px; text-align: center; font-size: 12px; font-weight: 600; } /* Section Heading Styling start*/ .section_heading { font-family: 'Roboto Slab', serif; text-transform: uppercase; font-size: 22px; font-weight: 500; text-align: center; color: #272B71; padding-bottom: 10px; } .section_heading:after, .section_heading:before { position: absolute; left: 0; bottom: 0; width: 55px; height: 3px; content: ""; right: 55px; margin: auto; background-color: var(--green); } .section_heading:before { background-color: #a6a9e0; left: 55px; width: 110px; } .section_heading { position: relative; } section { padding: 35px 0; margin:0 auto; } /* Section Heading Styling End */ /* News tab */ .news_media_tab button { font-family: Poppins; padding: 25px 55px; margin-right: 15px; background: #00762a; color: #fff; font-size: 25px; border: none; -webkit-transition: background 3s; /* For Safari 3.0 to 6.0 */ transition: background 3s; /* For modern browsers */ } .news_media_tab button:hover { background-color: #000; } .news_media_tab button i { font-size: 55px; margin-right: 10px; color: #fff; } .news_media_tab .selected { background-color: #005AAB !important; } .accordion-button span { color: #00762a; margin-right: 5px; } .accordion-body p { padding: 5px; } .accordion-body img{ max-width:700px; max-height:400px; display: block; margin-left: auto; margin-right: auto; } /* News tab */ /* IBFT Tab start */ .tab_container { display: flex; padding: 20px; font-family: "poppins", sans-serif; } .tab_wrapper { display: flex; justify-content: space-around; width: 100%; } .tab_header { position: relative; display: flex; flex-direction: column; gap: 10px; width: 30%; /* border-bottom: 1px solid #e5e5e5; */ } .tab_header .tab_btn { width: 100%; padding: 15px 25px; border: none; cursor: pointer; font-size: 15px; font-weight: 600; background-color: transparent; transition: all 0.3s ease; background: url('image/mega.png'); } .tab_header .tab_btn { border: 1px solid #e5e5e5; transition: transform 0.7s; } .tab_header .tab_btn:hover, .tab_header .tab_btn.active { color: #2c318c; /* transition: all 0.3s ease-in; */ } .tab_header .tab_btn.active { /* color: #fff; */ border-bottom: 3px solid #2c318c; } .tab_header .tab_btn:hover { /* transform: translateX(); */ border-bottom: 3px solid #2c318c; } .tab_body { display: flex; overflow: hidden; margin-top: 0; padding-top: 0; /* background-color: aqua; */ width: 50%; } .tab_body .tab_content { min-width: 100%; /* padding: 20px; */ font-size: 12px; transition: all 0.3s; text-align: justify; display: flex; flex-direction: column; /* justify-content: space-around; */ gap: 8px; } .accordion { /* font-family: "Sora", sans-serif; */ /* width: 100%; */ } .accordion-item { margin-top: 16px; border: 1px solid #ffffff; border-radius: 2px; background: #ffffff; box-shadow: rgba(49, 49, 49, 0.5) 0px 1px 2px 0px; /* box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; */ } .accordion-item .accordion-item-title { position: relative; margin: 0; display: flex; width: 100%; font-size: 15px; cursor: pointer; justify-content: space-between; flex-direction: row-reverse; padding: 10px 15px; box-sizing: border-box; align-items: center; font-weight: 600; color: #2c318c; } .accordion-item-title:hover { color: #00762a; font-weight: 600; } .accordion-item .accordion-item-desc { display: none; font-size: 14px; line-height: 22px; font-weight: 300; color: #2c318c; border-top: 1px dashed #ddd; padding: 10px 20px 20px; box-sizing: border-box; } .accordion-item input[type="checkbox"] { position: absolute; height: 0; width: 0; opacity: 0; } .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { display: block; } .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { /* border-left: 1px solid #2c318c; border-right: 1px solid #2c318c; border-bottom: 1px solid #2c318c; */ } .accordion-item input[type="checkbox"]:checked~.accordion-item-title .icon:after { content: "-"; font-size: 20px; } .accordion-item input[type="checkbox"]:checked~.accordion-item-title { background-color: #00762a; color: white; font-weight: 600; } .accordion-item input[type="checkbox"]~.accordion-item-title .icon:after { content: "+"; font-size: 20px; } .accordion-item:first-child { margin-top: 0; } .accordion-item .icon { margin-left: 14px; } @media screen and (max-width: 767px) { .accordion { padding: 10px; } } /* faq css end */ /* IBFT Tab End */ /* egp start */ .egp_container { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 10px; margin: 0 auto; } /* .egp_header { background: url('image/mega.png'); padding: 10px 20px; text-align: center; color: #2c318c; font-weight: 600; margin-bottom: 10px; } */ .egp_card { margin: 0 auto; width: 800px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; font-size: 15px; } .egp_card:hover { box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; } .egp_card .card_img { /* padding: 10px; */ width: 40%; margin: 0 auto; } .egp_card .card-text { padding: 2px; text-align: justify; } .egp_card .card-footer { display: flex; justify-content: center; gap: 5px; /* padding: 10px; */ } .egp_card .card-footer a { line-height: 1; text-decoration: none; } .egp_text .card { margin: 0 auto; width: 800px; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; border-radius: 5px; font-size: 15px; } .egp_text .card:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } .egp_text .card-text { padding: 2px; text-align: justify; /* font-size: 10px; */ } .egp_text .egp_step { display: flex; flex-direction: column; gap: 1px; } .egp_text .egp_step p { padding: 5px 10px; } /* egp end */ /* tasdir tab start */ .tasdir_container { width: 800px; margin: 0 auto; padding: 10px 0; display: flex; flex-direction: column; gap: 12px; /* background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%); */ } .tasdir_header { background: url('image/mega.png'); padding: 10px 20px; color: #2c318c; font-weight: 600; text-align: center; } /* .accordion { width: 100%; } .accordion-item { margin-top: 20px; border: 1px solid #fcfcfc; border-radius: 6px; background: #ffffff; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; } .accordion-item .accordion-item-title { position: relative; margin: 0; display: flex; width: 100%; font-size: 18px; cursor: pointer; justify-content: space-between; flex-direction: row-reverse; padding: 15px 20px; box-sizing: border-box; align-items: center; font-weight: 600; color: #2c318c; } .accordion-item-title:hover { color: #00762a; font-weight: 600; } .accordion-item .accordion-item-desc { display: none; font-size: 14px; line-height: 22px; font-weight: 300; color: #2c318c; border-top: 1px dashed #ddd; padding: 10px 20px 20px; box-sizing: border-box; } .accordion-item .accordion-item-desc { border-color: #2c318c; } .accordion-item input[type="checkbox"] { position: absolute; height: 0; width: 0; opacity: 0; } .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { display: block; } .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { border-left: 1px solid #2c318c; border-right: 1px solid #2c318c; border-bottom: 1px solid #2c318c; } .accordion-item input[type="checkbox"]:checked~.accordion-item-title .icon:after { content: "-"; font-size: 20px; } .accordion-item input[type="checkbox"]:checked~.accordion-item-title { background-color: #00762a; color: white; font-weight: 600; } .accordion-item input[type="checkbox"]~.accordion-item-title .icon:after { content: "+"; font-size: 20px; } .accordion-item:first-child { margin-top: 0; } .accordion-item .icon { margin-left: 14px; } */ .tasdir_footer { font-family: Rubik; font-size: 13px; display: flex; justify-content: center; gap: 5px; padding: 15px 20px; width: 800px; background-color: #2c318c; color: #ffffff; border: 1px solid #fcfcfc; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; } .tasdir_footer span { line-height: 1; } .tasdir_footer a { padding: 8px; color: #3feedf; font-weight: bold; text-decoration: none; } @media screen and (max-width: 767px) { .accordion { margin: 0 auto; padding: 15px; } } /* tasdir tab end */ /* Cloud tab start */ .cloud_container { display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ gap: 18px; } @keyframes slideInUp { from { transform: translateY(-15%); } to { transform: translateY(0); } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .cloud_card { /* width: 980px; */ margin: 0 auto; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; font-size: 15px; display: flex; flex-direction: column; /* justify-content: center; */ gap: 5px; animation: 1s ease-out 0s 1 slideInUp; } .cloud_card .cloud_card_img { width: 50%; padding: 10px; margin: 0 auto; } .cloud_card .cloud_card_text { text-align: center; padding: 10px 20px; color: #2c318c; } .cloud_card .cloud_card_text h2 { font-weight: 600; } .cloud_card .cloud_card_logo { display: flex; gap: 10px; justify-content: center; margin: 0 auto; padding: 20px 0; } .cloud_card .cloud_card_text_ins { display: flex; justify-content: center; gap: 5px; padding: 20px 0; /* text-decoration: none; */ } .cloud_card .cloud_card_text_ins a { text-decoration: none; font-size: 25px; color: #2c318c; font-weight: 600; } .cloud_card .cloud_card_text_ins:hover a { color: #00762a; } .cloud_card .cloud_card_text_ins i { font-size: 30px; } .cloud_card_2nd { margin: 10px 0; display: flex; /* justify-content: center; */ gap: 15px; /* justify-content: center; */ /* margin: 0 auto; */ } .cloud_card_benefit { display: flex; flex-direction: column; gap: 5px; justify-content: center; animation: 2s ease-out 0s 1 slideInLeft; border-radius: 5px; } .cloud_card_benefit_list { display: flex; /* gap: 2px; */ justify-content: space-around; font-size: 13px; } .cloud_card_benefit_list .cloud_card_benefit_list1 { padding: 0 10px; width: 50%; } .cloud_card_benefit_list .cloud_card_benefit_list2 { padding: 0 2px; width: 50%; } .cloud_card_2nd .cloud_card_benefit { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; width: 50%; padding: 0 10px; } .cloud_card_2nd .cloud_card_benefit h4 { text-align: center; color: #2c318c; font-weight: 600; padding: 10px 0; } .cloud_card_2nd .cloud_card_details { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; width: 50%; padding: 0 10px; animation: 2s ease-out 0s 1 slideInRight; border-radius: 5px; } .cloud_card_details h4 { text-align: center; color: #2c318c; font-weight: 600; padding: 10px 0; } .cloud_card_details .accordion { font-family: "Sora", sans-serif; padding: 15px 10px; /* width: 100%; */ } .cloud_card_details .accordion-item { margin-top: 20px; border: 1px solid #fcfcfc; border-radius: 6px; background: #ffffff; /* box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; */ box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; } .cloud_card_details .accordion-item .accordion-item-title { position: relative; margin: 0; display: flex; width: 100%; font-size: 16px; cursor: pointer; justify-content: space-between; flex-direction: row-reverse; padding: 15px 20px; box-sizing: border-box; align-items: center; font-weight: 600; color: #2c318c; } .cloud_card_details .accordion-item-title:hover { color: #00762a; font-weight: 600; } .cloud_card_details .accordion-item .accordion-item-desc { display: none; font-size: 14px; line-height: 20px; font-weight: 300; color: #2c318c; border-top: 1px dashed #ddd; padding: 10px 20px 20px; box-sizing: border-box; } .cloud_card_details .accordion-item .accordion-item-desc { border-color: #2c318c; } .accordion-item input[type="checkbox"] { position: absolute; height: 0; width: 0; opacity: 0; } .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { display: block; } .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { border-left: 1px solid #2c318c; border-right: 1px solid #2c318c; border-bottom: 1px solid #2c318c; } .cloud_card_details .accordion-item input[type="checkbox"]:checked~.accordion-item-title .icon:after { content: "-"; font-size: 18px; } .cloud_card_details .accordion-item input[type="checkbox"]:checked~.accordion-item-title { background-color: #00762a; color: white; font-weight: 600; } .cloud_card_details .accordion-item input[type="checkbox"]~.accordion-item-title .icon:after { content: "+"; font-size: 18px; } .cloud_card_details .accordion-item:first-child { margin-top: 0; } .cloud_card_details .accordion-item .icon { margin-left: 14px; } /* cloud tab end */ /* dcloud start */ .dcloud_container { display: flex; justify-content: center; margin: 10px 0; } .dcloud_card { margin: 0 auto; display: flex; justify-content: space-evenly; gap: 0px; } .dcloud_card_header { display: flex; color: #2c318c; flex-direction: column; padding: 10px 0px; justify-content: center; /* gap: 5px; */ align-items: center; } .dcloud_card_header_logo img { margin-bottom: 20px; } .dcloud_card_header h3 { margin: 0; } .dcloud_card_text { /* margin: 0 auto; */ padding: 15px 10px; font-size: 14px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; border: 1px solid; border-color: #2c318c; /* justify-content: right; */ } .dcloud_card_text h4 { color: #2c318c; text-align: center; margin: 20px 0px 25px 0px; } .dcloud_card_services { display: flex; gap: 10px; /* align-items: center; */ } .dcloud_card_services ul li { list-style-type: none; margin-bottom: 5px; } .dcloud_card_services ul li i { color: #00762a; margin-right: 5px; } /* dcloud end */ /* corporate start */ .corporate_container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 15px 0; gap: 10px; /* align-items: center; */ } .corporate_card_text { display: flex; flex-direction: column; gap: 5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; padding: 10px; border-radius: 5px; /* justify-content: center; */ /* margin: 0 auto; */ } .corporate_card_text h5 { text-align: center; padding: 10px 0; color: #2c318c; } .corporate_card_text .accordion { /*font-family: "Sora", sans-serif;*/ padding: 20px 15px; /* width: 100%; */ } .corporate_card_text .accordion-item { margin-top: 20px; border: 1px solid #fcfcfc; border-radius: 6px; background: #ffffff; /* box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; */ box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; } .corporate_card_text .accordion-item .accordion-item-title { position: relative; margin: 0; display: flex; width: 100%; /*font-size: 16px;*/ cursor: pointer; justify-content: space-between; flex-direction: row-reverse; padding: 15px 20px; box-sizing: border-box; align-items: center; font-weight: 400; color: #00762a; transition: color 1s; } .corporate_card_text .accordion-item-title:hover { color: #2c318c; font-weight: 500; } .corporate_card_text .accordion-item .accordion-item-desc { display: none; font-size: 14px; line-height: 20px; font-weight: 300; color: #2c318c; border-top: 1px dashed #ddd; padding: 10px 20px 20px; box-sizing: border-box; } .corporate_card_text .accordion-item .accordion-item-desc { border-color: #2c318c; } .corporate_card_text .accordion-item input[type="checkbox"] { position: absolute; height: 0; width: 0; opacity: 0; } .corporate_card_text .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { display: block; } .corporate_card_text .accordion-item input[type="checkbox"]:checked~.accordion-item-desc { border-left: 1px solid #2c318c; border-right: 1px solid #2c318c; border-bottom: 1px solid #2c318c; } .corporate_card_text .accordion-item input[type="checkbox"]:checked~.accordion-item-title .icon:after { content: "-"; font-size: 18px; } .corporate_card_text .accordion-item input[type="checkbox"]:checked~.accordion-item-title { background-color: #00762a; color: white; font-weight: 600; } .corporate_card_text .accordion-item input[type="checkbox"]~.accordion-item-title .icon:after { content: "+"; font-size: 18px; } .corporate_card_text .accordion-item:first-child { margin-top: 0; } .corporate_card_text .accordion-item .icon { margin-left: 14px; } .corporate_card_pic { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; background: url('image/mega.png'); } .corporate_card_pic h5 { color: #2c318c; text-align: center; /*font-weight: 600;*/ } /* corporate end */ /* sms banking */ .sms_container { display: flex; flex-direction: column; justify-content: center; align-items: center; /* border: none; */ gap: 10px; margin: 10px 0; } .sms_card { display: flex; /* justify-content: center; */ align-items: center; gap: 8px; margin: 0 auto; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; padding: 10px 15px; border-radius: 5px; } .sms_card_img { padding: 0 5px; } .sms_card_img img { height: 140px; } .sms_card_text { text-align: justify; padding: 0 10px; font-size: 13px; } .sms_card_acc { display: flex; flex-direction: column; /* padding: 10px 0; */ gap: 5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; } .sms_card_acc_header h5 { color: #2c318c; font-weight: 600; } .sms_card_acc_text { padding: 5px 10px; font-size: 13px; } .sms_card_ins { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; /* text-align: center; */ } .sms_card_ins_text { text-align: center; padding: 5px 0; font-size: 13px; } .sms_card_ins_img { text-align: center; } .sms_card_ins_img img { border: 12px solid; border-image-repeat: round; border-image-slice: 15; border-image-source: url(resources/mega.png); padding: 10px 0; margin: 10px 0; } /* sms banking */ /* freedom start */ /* freedom end */ /* location design start*/ .location_container { /*width:80%;*/ display: flex; justify-content: center; /*align-items:center;*/ /*margin: 10px auto;*/ } .location_card { display: flex; flex-direction: column; gap: 10px; } .location_filter { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 15px 20px; font-size: 14px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; } #zone_list { padding: 4px 30px; font-size: 14px; text-align: justify; border-radius: 5px; } .br_name, .sub_br_name, .atm_name, .crm_name { padding: 4px 21px; border-radius: 5px; border: 1px solid black; } .search_btn { padding: 6px 25px; background-color: #2c318c; border-radius: 5px; color: white; font-weight: 600; } .location_card_text { padding: 10px 15px; font-size: 14px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 5px; } .location_modal { width: 90%; } .location_modal .modal-header { background-color: #2c318c; color: #fff; text-align: center; font-weight: 600; } .location_modal .modal-header h5 { text-align: center; margin: 0 auto; } .location_modal .modal-header .btn-close { background-color: #ffffff; border: 2px solid #fff !important; border-radius: 40%; margin: 0; } .details_modal { display: flex; /*flex-direction:column;*/ gap: 10px; } .details_modal .map{ width:60%; } .details_modal .info{ width:40%; } /* datatable custom css start*/ /* datatable custom css start*/ #atmTable, #subbrTable, #collectionTable, #agentTable, #brTable, #crmTable { padding: 10px; text-align: center; } #atmTable a, #brTable a, #crmTable a { text-decoration: none; color: #00762a; } #brTable th, #atmTable th, #subbrTable th, #collectionTable th, #agentTable th, #crmTable th { border: 1px solid #fff; background-color: #2c318c; color: white; text-align: center; line-height: 0.7; } .dataTables_wrapper .dataTables_filter input { border-radius: 10px; border-color: #00762a; padding: 5px; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #00762a; } /* .dataTables_wrapper .dataTables_paginate .paginate_button { } */ .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background-color: #00762a; color: #fff !important; border: none; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { color: #00762a !important; font-weight: 600; } /* .btn-close { color:white; } */ @media only screen and (max-width: 780px) { .location_filter { flex-direction: column; } } /* datatable custom css end */ /* location design end */ /* contact card start */ .contact_card { width: 30%; padding: 25px; display: flex; align-items: center; border-radius: 10px; background: linear-gradient(135deg, rgb(217, 215, 255) 0%, rgb(243, 243, 255) 50%, rgb(255, 255, 255) 100%); box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(231, 235, 252, 0.3) 0px 1px 3px -1px; transition: 0.3s; } .contact_card:hover { background: linear-gradient(110deg, rgb(248, 248, 255) 0%, rgb(246, 246, 255) 50%, rgb(232, 231, 255) 100%); transform: scale(1.1); color: #007935; } .contact_card i { font-size: 44px; padding: 25px; color: #044177; } .contact_card a { color: #044177; font-size: 15px; font-weight: 400; text-align: center; cursor: pointer; } /* contact card end */ /*====added css ===*/ .loan_calculator input { border: 0 !important; border-bottom: 1px solid #A8A8A8 !important; border-radius: 0px; color: #474747; } .loan_calculator label { color: #087939; font-weight: 400; } .loan_calculator, .output_card { border-radius: 0; } .output_card { background-color: #087939; width: 45%; padding: 80px; } .output_title { font-size: 14px; font-weight: 400; color: aliceblue; } .calculator_wrapper { box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.7); display: flex; margin-bottom: 30px; } .loan_calculator { padding: 45px; border: 1px solid #087939; width: 60%; } .loan_calculator .btn { width: 50%; } .vertical_tab button { padding: 5px 10px; } .v_tabcontent { padding-left: 50px; width: 80% } .digital_services { width: 90%; margin: 0 auto; } .mission_content{ display: flex; flex-direction: column; } .mission_inner_content{ display: flex; flex-direction: column; gap: 2px; justify-content: center; align-items: center; padding:40px 20px 20px 20px; border:1px dashed gray; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; } /* mobile view */ /* Navbar megamenu position */ /* .navbar .megamenu{ padding: 1rem; } */ /* ============ desktop view ============ */ @media all and (min-width: 992px) { .navbar .has-megamenu { position: static !important; } .navbar .megamenu { left: 0; right: 0; width: 100%; } .mobile-menu { display: none !important; } .hidden-desktop,.menu-item{ display: none !important; } } /* ============ desktop view .end// ============ */ /* ============ mobile view start ============ */ @media(max-width: 991px) { .hero #hero_slider .carousel-inner .carousel-item img{ min-height:35vh; } .card-product{ padding:45px 15px 35px 15px; } body .body-bg img{ /*min-height:100vh;*/ } body .body-bg{ min-height:100vh; top:0; left:0; } .modal { z-index: 9999999; } .modal-content { margin: 15px 0px 20px 10px; } .gallery_card_content{ flex-direction:column !important; } .gallery_card_content,.details_modal { flex-direction: column; } .details_modal .map, .details_modal .info { width: 100%; } .footer_content{ margin:0 auto; } #footer .footer_icon .footer_text{ font-size:17px; } /*Hero Image(background theme) for mobile*/ .cloud_bg{ background-image:url('../resources/product/digital.png'); /*background: url(../resources/menu_header.png);*/ } /*Hero Image(background theme)*/ .accordion-body { margin: 10px auto; } .accordion-body img { width: 260px; height: 210px; display: block; margin-left: auto; margin-right: auto; } .news_media_tab button { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .news_media_tab button i { font-size: 35px; text-align: center; } .news_media_tab button span { font-size: 20px; text-align: center; } .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse { overflow-y: auto; max-height: 90vh; margin-top: 10px; } .top_bar, .fixed-top, .hidden-mobile { display: none !important; } .navbar-toggler { background-color: #fff; } #scroll-text { font-weight:500; letter-spacing:1.1; -moz-animation: my-animation 7s linear infinite; -webkit-animation: my-animation 7s linear infinite; animation: my-animation 4s linear infinite; } /*.news_container {*/ /* font-size: 12px;*/ /* width: auto;*/ /*}*/ /*.news_wrapper,*/ /*#news_content {*/ /* padding: 10px;*/ /*}*/ .nav_container { background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%); width: 100%; height: auto; z-index: 99; } .nav_content { justify-content: flex-end !important; } .navbar>.container { align-items: flex-start; } .card_wrapper { flex-direction: column; gap: 10px; margin: 10px auto; } .digitalCard { padding: 10px 0px 0px 0px; border-radius: 10px; } .service_icon img { width: 135px; height: 59px; } #footer { background: linear-gradient(135deg, rgba(60, 144, 89, 1) 28%, rgba(44, 49, 140, 1) 100%); } .footer_wrapper { flex-direction: column; justify-content:center; align-items:center; } .mission_content { flex-direction: column; } .corporate_card_wrapper { flex-direction: column; } /*.table {*/ /* width: 10%;*/ /*}*/ .threecard { flex-direction: column; align-items: center; justify-content: center; margin: 20px 0; } /*.threecard .gallery_card .card-footer .card-text{*/ /* color:#3A855F;*/ /* font-size:12px;*/ /*}*/ #fsibCard .container img { width: 300px; } .tab_wrapper { flex-direction: column; } .tab_body { width: 100%; } .egp_card, .egp_text .card, .tasdir_container, .tasdir_footer { width: 100%; } .cloud_card .cloud_card_text .card-title, .cloud_card .cloud_card_text_ins a { font-size: 12px; font-weight: 500; text-align: center; } .cloud_card .cloud_card_logo { flex-direction: column; } .cloud_card_2nd { flex-direction: column; } .cloud_card_benefit_list { flex-direction: column; } .dcloud_card { flex-direction: column; justify-content: center; } .cloud_card_2nd .cloud_card_benefit, .cloud_card_benefit_list .cloud_card_benefit_list1, .cloud_card_benefit_list .cloud_card_benefit_list2, .cloud_card_2nd .cloud_card_details { width: 100%; } .dcloud_card_header, .freedom_card, .sms_card { flex-direction: column; } .dcloud_card_header h3 { text-align: center; } .sms_card_ins_img img, .sms_card_img img, .corporate_card_img img { width: 100%; } /*.news_heading {*/ /* font-size: 10px;*/ /* border-radius: 10px;*/ /* padding: 0 30px;*/ /*}*/ /*#news_content {*/ /* border-radius: 5px;*/ /*}*/ .about_tab { overflow: scroll; } .calculator_wrapper { flex-direction: column; width: 80%; margin: 0 auto; } .calculator_wrapper .loan_calculator, .calculator_wrapper .output_card { padding: 25px; width: 100%; margin-bottom: 10px; } .calculator_wrapper .loan_calculator label { font-size: 12px; } .calculator_wrapper .loan_calculator .btn { width: 100%; } .hero { margin-top: 35px; } .v_tabcontent { padding-left: 10px; width: 73%; } .special_spacing { letter-spacing: 0.03rem; } .vertical_tab{ width:27%; overflow:visible; } .vertical_tab button{ font-size:14px; } .shopping_card_wrapper{ flex-direction:column; } .shopping_card{ width:100%; } } /* ============ mobile view .end// ============ */ /* mobile side menu bar start */ /**{*/ /* font-family: 'Catamaran', sans-serif !important;*/ /*}*/ .mobile-menu { background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%); display: flex; justify-content: space-around; align-items: center; overflow: hidden; z-index: 9998; position: fixed; top: 0; width: 100%; margin-bottom: 50px; box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 0.5); } .side-bar-logo{ display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-left: 15px; } #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.05); backdrop-filter: blur(5px); z-index: 2; cursor: pointer; } .side-bar { font-family: 'Catamaran', sans-serif !important; background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%); backdrop-filter: blur(55px); width: 85%; height: 100vh; position: fixed; top: 0; left: -100%; overflow-y: auto; transition: 0.6s ease; transition-property: left; z-index: 9999; } .side-bar.active { left: 0; } .side-bar .menu { width: 100%; margin-top: 35px; } .side-bar .menu .item { position: relative; cursor: pointer; } .side-bar .menu .item a { color: #fff; font-size: 12px; font-weight: 500; text-decoration: none; display: block; padding: 8px 20px; line-height: 13px; text-transform: uppercase; transition: all 500ms ease; border-top: 1px solid rgba(255, 255, 255, 0.10); } .side-bar .menu .item a:hover { background: rgba(60, 144, 89, 0.80); transition: 0.3s ease; } .side-bar .menu .item a .dropdown { position: absolute; right: 6px; top: 2px; width: 30px; height: 25px; text-align: center; font-size: 12px; line-height: 32px; color: #fff; background: rgba(255, 255, 255, 0.10); cursor: pointer; border-radius: 2px; /* margin: 10px; */ transition: all 500ms ease; z-index: 5; } .side-bar .menu .item .sub-menu { /* background: rgba(9, 80, 18, 0.952); */ background: linear-gradient(115deg, rgba(60, 144, 89, 1) 28%, rgba(44, 49, 140, 1) 100%); display: none; } .side-bar .menu .item .sub-menu h4 { text-transform: uppercase; font-size: 14px; margin: 0 0 0 30px; color: rgba(194, 202, 245, 0.8); font-weight: 700; padding: 5px; } .side-bar .menu .item .sub-menu a { font-size: 12px; margin-left: 30px; text-transform: capitalize; line-height: 18px; font-weight: 400; } .side-bar .menu .item .sub-menu a:hover { background: none; } .rotate { transform: rotate(90deg); } .close-btn { position: absolute; color: #fff; font-size: 20px; right: 0; margin: 25px; cursor: pointer; } .menu-btn { /* position: absolute; */ color: #164A2F; font-size: 20px; margin: 25px; box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 0.5); cursor: pointer; border:1px solid #fff; } .menu-btn i{ border-radius:5px; padding:10px; background: linear-gradient(115deg, rgba(60, 144, 89, 0.4) 28%, rgba(44, 49, 140, 0.6) 100%); color:#fff; } /* contact information start */ .side-bar .contact-info { position: relative; padding: 30px 30px 0px 30px; } .side-bar .contact-info h4 { position: relative; font-size: 20px; color: #ffffff; margin-bottom: 10px; margin-left: 30px; line-height: 30px; font-weight: 700; } .side-bar .contact-info ul li { position: relative; display: block; font-size: 13px; color: rgba(255, 255, 255, 0.80); margin-bottom: 0px; line-height: 22px; font-weight: 300; } .side-bar .contact-info ul li a { color: rgba(255, 255, 255, 0.80); } /* contact information End */ /* Social link start */ .side-bar .social-links { position: relative; /*padding: 0px 25px 50px 25px;*/ } .side-bar .social-links ul{ margin-left:20%; margin-bottom:10%; } .side-bar .social-links li { position: relative; display: inline-block; margin: 0px 0px 30px 20px; } .side-bar .social-links li a { position: relative; line-height: 32px; font-size: 16px; color: #ffffff; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .side-bar .social-links li a:hover { color: #0805cc; } /* Social link End */ /* quick menu start*/ .menu-item, .menu-open-button { background: linear-gradient(135deg, rgba(44, 49, 140, 1) 28%, rgba(60, 144, 89, 1) 100%); border-radius: 100%; width: 45px; height: 45px; margin-left: -40px; position: fixed; bottom: 20px; left: 60px; color: #FFFFFF; text-align: center; line-height: 60px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .menu-open-button span{ /*margin-top:10px;*/ font-size:10px; font-weight:500; line-height:8px; } .menu-item { line-height: 45px; } .menu-open:checked~.menu-item i:hover { -webkit-transform: scale(1.2, 1.2); transform: scale(1.3, 1.3) translate3d(0, 0, 0); color: #cdc8ff; transition: transform ease-out 200ms; } .menu-item i { font-size: 20px; margin-bottom: 40px; } .menu-item img{ width:55%; height:55%; } .menu-open { display: none; } .lines { width: 15px; height: 2px; background: #fff; display: block; position: absolute; top: 55%; left: 60%; margin-left: -12.5px; margin-top: -1.5px; -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; } .line-1 { -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0); } .line-2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .line-3 { -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } .quick-menu { margin: auto; position: fixed; background: none; bottom: 20px; left: 20px; /*width: 100%;*/ /*height: 100vh;*/ text-align: center; box-sizing: border-box; font-size: 26px; z-index: 999; } /*.quick-menu.bg {*/ /* width: 90px;*/ /* height: 450px;*/ /* left:0;*/ /* bottom: 5px;*/ /* background-color: rgba(0, 0, 0, 0.05);*/ /* backdrop-filter: blur(25px);*/ /* border-radius: 10px;*/ /*}*/ .menu-open-button { line-height:17px; z-index: 9999999; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; border:1px solid #8790da; box-shadow:rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } .menu-open-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .menu-open:checked+.menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 1.8) translate3d(0, 0, 0); } .menu-open:checked~.menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transform: translate3d(0, -70px, 0); } .menu-open:checked~.menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -104.99997px, 0); transform: translate3d(0, -140px, 0); } .menu-open:checked~.menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(90.9466px, -52.47586px, 0); transform: translate3d(0px, -210px, 0); } .menu-open:checked~.menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(90.9466px, 52.47586px, 0); transform: translate3d(0px, -280px, 0); } .menu-open:checked~.menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 104.99997px, 0); transform: translate3d(0px, -350px, 0); } .menu-open:checked~.menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(45.08361px, -84.99997px, 0); transform: translate3d(0px, -420px, 0); } /* quick menu End*/ /*foreign_corener*/ .foreign_service_container { /*font-family: Arial, sans-serif;*/ background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; flex-direction: column; /* Center content vertically */ /*height: 50vh;*/ margin: 0; padding: 30px 20px; /* Add some padding */ } .foreign_service_container .card-container { display: flex; flex-wrap: wrap; /* Allow wrapping of cards */ gap: 20px; /* Space between cards */ justify-content: center; /* Center the cards */ } .foreign_service_container .card-container .card { background-color: #f7f9ff; border-radius: 8px; padding: 30px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; flex: 1 1 200px; /* Allow cards to grow and shrink, with a base width of 200px */ min-width: 500px; /* Minimum width for cards */ max-width: 550px; /* Maximum width for cards */ } .foreign_service_container .image-container { display: flex; justify-content: center; gap: 0px; /* Space between images */ } .foreign_service_container .card img { width: 100%; /* Make images responsive */ height: auto; /* Maintain aspect ratio */ border-radius: 4px; } /* Responsive styles */ @media (max-width: 768px) { .foreign_service_container .card-container { flex-direction: column; /* Stack cards in a column on small screens */ align-items: center; /* Center the cards */ padding:10px 30px; } .foreign_service_container .image-container { flex-direction: column; /* Stack images in a column on small screens */ } .foreign_service_container { padding: 10px; /* Reduce padding on smaller screens */ } .foreign_service_container .card img { width: 60%; /* Make images responsive */ height: auto; /* Maintain aspect ratio */ border-radius: 4px; } }