@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Inria+Sans:wght@400;700&display=swap'); :root { /* Fonts */ --jost: "Jost", sans-serif; --inria_sans: "Inria Sans", sans-serif; --dm_sans: "DM Sans", sans-serif; --themify: "Themify"; --primary-font: "Helvetica Neue", Helvetica, Arial, sans-serif; --secondary-font: var(--dm_sans); /* Base Typography */ --font-size: 16px; --line-height: 1.5; --body-line-height: 26px; --margin-top: 100px; /* Colors */ --primary-color1: #3c4884; /* Main heading / primary text */ --primary-color: #545454; /* HTML text color */ --secondary-color1: #4a5355; /* Body text */ --secondary-color2: #525fe1; --accent-color: #f26b65; --hover-color: #ff7f00; --font-color:#0b104a; --font-color1: #ffffff; /* Backgrounds */ --background-color: #ffffff; --background-light: #ffffff; --background-accent: #f5f5fd;; --background-dark: #dddddd; /* Counter Section */ --counter-bg-1: #ffefee; --counter-bg-2: rgb(236, 237, 255); --counter-bg-3: rgb(253, 243, 250); --counter-bg-4: rgb(234, 254, 255); --counter-text-1: #f26b65; --counter-text-2: rgb(82, 95, 225); --counter-text-3: rgb(87, 33, 108); --counter-text-4: rgb(68, 139, 183); /* Effects */ --text-accent: #2d36bb; --shadow-color: #01297014; } body { height: 100%; padding-top: 132px; margin:0; } /* Large tablets / small laptops */ @media (max-width: 1199px) { body { padding-top: 110px; } } /* Tablets */ @media (max-width: 991px) { body { padding-top: 90px; } } /* Mobile */ @media (max-width: 576px) { body { padding-top: 99px; } } h1, h2, h3, h4, h5, h6 { letter-spacing: 0px; margin: 0; font-family: var(--dm_sans), sans-serif; color: white; font-weight: 400; } /* popup modal of home page */ /* Overlay background */ .notice-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); /* blur screen */ display: flex; align-items: center; justify-content: center; z-index: 9999; } /* Modal box */ .notice-modal { position: relative; max-width: 600px; width: 90%; background: #fff; border-radius: 8px; padding: 10px; animation: zoomIn 0.3s ease; } /* Notice image */ .notice-modal img { width: 100%; border-radius: 6px; display: block; } /* Close button */ .close-btn { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; background: #ff3b3b; color: #fff; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; } /* Animation */ @keyframes zoomIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* popup end */ section.team_area { padding: 80px 0 ; } a{ text-decoration: none !important; } .team_area { padding: 0 !important; } p { margin-bottom: 0; } .section-title p { width: 60%; margin: 20px auto auto; } a{ text-decoration: none; } .single_blog h2 { line-height: 32px; font-size: 20px; margin-bottom: 15px; } body { color: var(--secondary-color1) !important; font-family: var(--secondary-font) !important; font-size: var(--font-size); font-weight: 400; line-height: var(--body-line-height); background: var(--background-color); overflow-x: hidden; margin-top: var(--margin-top); } html { font-family: var(--primary-font); font-size: var(--font-size); line-height: var(--line-height); color: var(--primary-color); } /* .after-nabar{ margin-top: 6%; } */ .apply1{ background-color: var(--primary-color1); color: var(--font-color1); transition: 0.3s all ease-out; border-radius: 3px; } .apply1:hover{ background-color: var(--hover-color); } .apply-btn { display: inline-block; padding: 10px 22px; background-color: #ff6b00; /* change color if needed */ color: #fff !important; font-weight: 600 !important; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; } .apply1:hover .apply-btn { color: #fff; } /* hamburger part */ .hamburgermenu { width: 24px; height: 20px; position: relative; } .hamburger { width: 100%; height: 3px; border-radius: 10vw; position: absolute; } .line-1 { background-color: rgb(132, 57, 123); transition: all 200ms ease-out; transition-delay: 250ms; } .line-2 { right: 0; background-color:rgb(132, 57, 123); bottom: 0; transition: all 200ms ease-out; transition-delay: 250ms; } .line-3 { background-color: rgb(132, 57, 123); top: calc(50% - 1.5px); } .hamburgermenu:hover .line-1 { width: 50%; } .hamburgermenu:hover .line-2 { width: 50%; } .hamburgermenu:hover .line-3 { animation-name: example; animation-duration: 500ms; } @keyframes example { 0% { transform: rotate(0deg); } 50% { transform: rotate(35deg); } 100% { transform: rotate(0deg); } } /* video section */ .banner.v__2 { position: relative; margin-bottom: -10px; z-index: 0; } .banner.v__2 .banner__wrapper { max-width: 100%; min-width: 100%; margin-left: 0; padding-top: 0; padding-bottom: 0; position: relative; } .banner__wrapper { display: flex; justify-content: space-between; position: relative; min-width: 120%; margin: 0 auto; margin-left: auto; margin-left: -10%; z-index: 99; padding-top: 170px; } .hp-hero__video-container { width: 100vh; width: 100%; } .hp-hero__video-container:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); } .hp-hero__video-container video { height: 71vh; width: 100%; object-fit: cover; } .banner.v__2 .banner__wrapper .banner__slides--container.banner__height { position: absolute; inset: 0; /* full cover */ height: 100vh; display: flex; align-items: center; /* vertical center */ justify-content: center; /* horizontal center */ text-align: center; z-index: 3; } .banner.v__2 .banner__slides--content--sub, .banner.v__2 .banner__slides--content--title, .banner.v__2 .banner__slides--content .rts-theme-btn { opacity: 1; margin-left: auto; margin-right: auto; } .banner.v__2 .banner__wrapper .banner__slides--container { display: flex; justify-content: space-between; padding-bottom: 100px; } .banner.v__2 .banner__wrapper .banner__slides--content { max-width: 100%; width: 60%; padding: 0 20px; } .banner.v__2 .banner__slides--content { opacity: 1; } .banner.v__2 .banner__wrapper .banner__slides--content--sub { color: white; display: flex; gap: 10px; margin-bottom: 15px; font-family: var(--font-primary); font-weight: 400; font-size: medium; text-transform: capitalize; justify-content: center; font-size: 26px; } .banner.v__2 .banner__slides--content--sub { animation: slideInUp3 1s; animation-delay: 0.8s; opacity: 1; } .banner.v__2 .banner__slides--content--sub { animation: none; transition-delay: 0.8s; } img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; max-width: 100%; height: auto; } .banner.v__2 .banner__wrapper .banner__slides--content--title { color: white !important; margin-bottom: 40px; /* line-height: 74px; */ } .banner.v__2 .banner__slides--content--title { animation: fadeInUp 1.2s; animation-delay: 1.2s; opacity: 1; font-size: 64px; color: white; } .banner.v__2 .banner__slides--content--title { animation: none; transition-delay: 1.2s; } .banner.v__2 .banner__slides--content .rts-theme-btn { animation: none; border-radius: 3px; opacity: 0; display: block; text-align: center; } .banner.v__2 .banner__slides--content .rts-theme-btn { margin-bottom: 29px; animation: fadeInUp 0.8s; opacity: 1; } .banner.v__2 .banner__slides--content .rts-theme-btn:hover { background-color: var(--hover-color); border-color: var(--hover-color); } .rts-theme-btn.btn-arrow { min-width: 180px; } .rts-theme-btn { max-width: max-content; transition: all 0.4s ease; font-weight: 500; display: inline-flex; justify-content: center; align-items: center; position: relative; padding: 15px 30px; background:#3c4884; color: white; overflow: hidden; z-index: 1; text-decoration: none; } .banner.v__2 .banner__wrapper .banner__slides--content .rts-theme-btn::before { background: var(--rt-secondary); } .rts-theme-btn::before { position: absolute; height: 100%; width: 100%; content: ""; left: 0; top: 0; left: -70%; background: var(--rt-secondary); z-index: -1; transition: var(--transition); opacity: 0; border-radius: inherit; } .rts-theme-btn.btn-arrow span { transform: rotate(-35deg); margin-left: 10px; transition: var(--transition); } @media (max-width: 992px) { .hp-hero__video-container video { height: 70vh; } .banner.v__2 .banner__slides--content--title { font-size: 42px; line-height: 1.25; } } @media (max-width: 768px) { .banner.v__2 .banner__wrapper .banner__slides--container.banner__height { height: 65vh; } .banner.v__2 .banner__slides--content--sub { font-size: 14px; } .banner.v__2 .banner__slides--content--title { font-size: 32px; line-height: 1.2; margin-bottom: 20px; } .rts-theme-btn { padding: 12px 22px; font-size: 14px; } .banner.v__2 .banner__wrapper .banner__slides--content { width: auto; } } @media (max-width: 992px) { .hp-hero__video-container video { height: 55vh; } } .header-style-four .header-top-wrap{ padding: 0; } .header-top-wrap { background: radial-gradient( 1200px 600px at top center, #5f6ab8 0%, #3c4884 60%, #2b346f 100% ); ; overflow: hidden; padding: 5px 78px 5px 83px; } .custom-container { max-width: 1310px; } .container { padding-inline-end: 15px; padding-inline-start: 15px; } .header-top-left .list-wrap { padding: 5px 0; } .header-top-left .list-wrap li i{ color: wheat; } .header-top-left .list-wrap { align-items: center; display: flex; gap: 10px 35px; } .list-wrap { flex-wrap: nowrap !important; margin-left: 0 !important; padding-left: 0 !important; } .list-wrap { margin: 0; padding: 0; } ul { list-style: none; } .header-top-left .list-wrap li { align-items: center; color: var(--tg-lavender); display: flex; font-size: 14px; line-height: 1.28; position: relative; } .list-wrap li { align-items: center !important; gap: 6px; } .list-wrap li { list-style: none; } .header-top-left .list-wrap li:first-child::before { background: gray; content: ""; height: 100%; inset-inline-end: -16px; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; } .header-top-left .list-wrap li span{ color: var(--tg-cornflower-blue); font-size: 20px; line-height: 0; margin-inline-end: 8px; } .header-top-left .list-wrap li a { color: var(--tg-lavender); transition: color 0.3s ease, font-size 0.3s ease; } .header-top-left .list-wrap li a:hover { color: #5a65b3 !important; } a, button { outline: medium none; } .header-top-left .list-wrap li a { color: white; } .header-top-right { gap: 20px; } .header-top-right { align-items: center; display: flex; justify-content: flex-end; } .header-social .list-wrap { align-items: center; display: flex; gap: 20px; } .list-wrap { flex-wrap: nowrap !important; margin-left: 0 !important; padding-left: 0 !important; } .list-wrap { margin: 0; padding: 0; } .header-social .list-wrap li a i{ color: white; transition: 0.5s ease-out; } .header-social .list-wrap li a { color: white; font-size: 15px; transition: color 0.3s ease, font-size 0.3s ease; } .header-social .list-wrap li a:hover { /* background-color:#5a65b3 !important; */ } .header-social .list-wrap li a i:hover { padding: 3px; } .header__logo img{ height: 50px; } @media (max-width: 767.98px) { .header-style-four .header-top-wrap { display: none; } } @media (max-width: 991.98px) { .header-style-four .header-top-wrap { padding: 15px 0; } } @media (max-width: 991.8px) { .header-top-wrap { display: none; } } @media (max-width: 991px) { .side-bar { position: fixed; right: -500px; top: 100px; /* bottom: 0px; */ width: 250px; z-index: 9; background: rgb(255, 255, 255); transition: 0.4s; } } @media (max-width: 991px) { .side-bar ul { list-style-type: none; display: flex ; flex-direction: column; position: relative; background: rgb(255, 255, 255); padding: 0px 20px; } } @media (max-width: 991px) { .side-bar .navbar-nav { list-style-type: none; display: flex; flex-direction: column; position: relative; background: rgb(255, 255, 255); padding: 0px 20px !important; margin-top: 20px; gap: 20px; } .side-bar ul li{ text-decoration: none; } } @media (max-width: 991px) { .side-bar ul li { line-height: 1; padding: 0px; } } .side-bar ul li{ display: block; } @media (max-width: 1199px) { .side-bar ul li a { font-size: 14px; } } @media (max-width: 991px) { .side-bar ul.subdropdown-menu { max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: all 0.4s ease; left: -7px; } } @media (max-width: 991px) { .side-bar ul.subdropdown-menu.show { max-height: 500px; /* Adjust this value to accommodate the submenu height */ opacity: 1; visibility: visible; position: relative; } } @media (max-width: 991px) { .side-bar ul li ul, .side-bar ul li ul li ul { position: relative; } } .side-bar ul li ul, .side-bar ul li ul li ul { box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 10px 3px; left: -55px; opacity: 0; position: absolute; text-align: left; top: 120%; visibility: hidden; width: 210px; z-index: 999; background: rgb(82, 95, 225); list-style: outside none none; margin: 0px; padding: 10px; transition: 0.5s; border-radius: 4px; border-top: 2px solid rgb(82, 95, 225); } .side-bar ul li ul li { display: block; margin: 0px; padding: 0px; } .side-bar ul li ul li a { color: rgb(255, 255, 255); display: block; font-size: 16px; line-height: 30px; font-weight: 600; position: relative; text-transform: capitalize; visibility: inherit !important; opacity: inherit !important; padding: 5px 12px; transition: 0.3s !important; text-decoration: none; } .side-bar ul li a { position: relative; text-transform: uppercase; color: rgb(11, 16, 74); font-weight: 600; font-size: 16px; transition: 0.5s; display: flex; justify-content: space-between; } #navbar { position: fixed; top: 0; width: 100%; z-index: 10000; } #navbar .navbar { padding: 0px 65px; height: 100px; display: flex; align-items: center; border-bottom: 1px solid rgb(221, 221, 221); background: #fff; } #navbar #navbarNavDropdown{ justify-content: center; } #navbar .navbar #navbarNavDropdown ul{ gap: 20px; } #navbar .navbar #navbarNavDropdown .nav-item span { position: relative; text-transform: uppercase; color: var(--font-color); font-weight: 600; font-size: 16px; transition: color 0.3s ease; } /* underline */ #navbar .navbar #navbarNavDropdown .nav-item span::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background-color: var(--hover-color); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } #navbar #navbarNavDropdown .subdropdown-menu li a::after { content: ""; position: absolute; left: 12px; bottom: 2px; width: calc(100% - 24px); height: 2px; background-color: var(--hover-color); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .nav-link.apply-now span::after { display: none; } #navbar #navbarNavDropdown .subdropdown-menu li a:hover::after { transform: scaleX(1); width: 80%; } #navbar #navbarNavDropdown .subdropdown-menu .vdo a:hover::after { transform: scaleX(1); width: 70%; } #navbar .apply-now{ background-color: var(--primary-color1); border-radius: 3px; transition: 0.3s ease-out; } #navbar .apply-now:hover{ background-color: var(--hover-color); } #navbar .apply-now span{ color: var(--font-color1) !important; } /* hover */ #navbar .navbar #navbarNavDropdown .nav-item .nav-link:hover span { /* color: var(--hover-color); */ } #navbar .navbar #navbarNavDropdown .nav-item .nav-link:hover span::after { transform: scaleX(1); } /* #navbar .navbar #navbarNavDropdown .nav-item span a { position: relative; text-transform: uppercase; color: #0b104a; font-weight: 600; transition: .5s; font-size: 16px; } */ .navbar-brand img{ height: 90px; } #navbar .header-btn { padding-right: 20px; text-decoration: none; } #navbar .header-btn:hover { color: #525fe1; } .header-btn { display: inline-block; font-weight: 600; font-size: 18px; color: var(--font-color); transition: .5s; } .btn_one { border: 2px solid var(--font-color); padding: 15px 30px; border-radius: 2px; color: var(--font-color); transition: 0.3s ease-out; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; } #navbar #navbarNavDropdown .subdropdown-menu{ background:var(--primary-color1); -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, .05); box-shadow: 0 0 10px 3px #0000000d; left: -34px; list-style: outside none none; margin: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; padding: 10px; position: absolute; text-align: left; top: 120%; -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s; visibility: hidden; width: 193px; z-index: 999; border-radius: 4px; } #navbar #navbarNavDropdown .subdropdown-menu11 { left: 0px !important; width: 120% !important; } #navbar #navbarNavDropdown ul li:hover .subdropdown-menu { opacity: 1; /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; */ visibility: visible; top: 100%; } #navbar #navbarNavDropdown .subdropdown-menu li a { color: #fff; display: block; font-size: 16px; line-height: 30px; font-weight: 600; padding: 5px 12px; position: relative; transition: all .3s ease 0s !important; visibility: inherit !important; opacity: inherit !important; text-transform: capitalize; text-decoration: none; } .header-search { display: inline-flex; align-items: center; background: #ffffff; border-radius: 30px; padding: 6px 10px 6px 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .header-search input { border: none; outline: none; font-size: 14px; width: 160px; background: transparent; } .header-search button { border: none; background: transparent; color: var(--font-color); font-size: 16px; cursor: pointer; padding: 6px 10px; } /* Focus effect */ .header-search input:focus { width: 200px; transition: width 0.3s ease; } @media (max-width: 479px) { .navbar { display: flex !important; justify-content: space-between !important; padding:0 10px !important; height: 70px; } } @media (max-width: 576px) { .navbar-brand img { height: 70px !important; } } /* Counter Section */ .count_area { position: relative; margin-top: -60px; padding-bottom: 80px; } /* Counter Card */ .single-counter { background: var(--background-light); border: 1px solid var(--background-dark); border-radius: 20px; padding: 20px; box-shadow: 10px 15px 18px var(--shadow-color); } /* Icon Box */ .single-counter span { width: 50px; height: 50px; float: left; line-height: 50px; border-radius: 30px; font-size: 20px; text-align: center; margin-right: 15px; } /* Icon Colors */ .sc_one { color: var(--counter-text-1); background: var(--counter-bg-1); } .sc_two { color: var(--counter-text-2); background: var(--counter-bg-2); } .sc_three { color: var(--counter-text-3); background: var(--counter-bg-3); } .sc_four { color: var(--counter-text-4); background: var(--counter-bg-4); } /* Counter Number */ .single-counter h2 { font-family: var(--jost); font-weight: 600; margin-bottom: 0; color: var(--primary-color1); font-size: 29px; } /* Counter Text */ .single-counter p { margin-bottom: 0; overflow: hidden; font-family: var(--dm_sans); } /* Animation */ .animated-box1 { position: relative; animation: slideInY 1.5s ease-out forwards; } @keyframes slideInY { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* Utility */ .overflow-hidden { overflow: hidden !important; } /* Responsive Fixes */ @media (max-width: 991px) { .count_area { margin-top: -105px; } .single-counter { height: 100px; } } @media (max-width: 768px) { .single-counter p { font-size: 14px; } .count_area { padding-bottom: 60px; } } @media (max-width: 768px) { .section-padding { padding: 60px 0px; } } section.section-padding{ padding: 60px 0px; } .top_cat__area{ margin-bottom: 80px; } @media (min-width: 576px) { .container, .container-sm { max-width: 540px; } } @media (max-width: 768px) { .section-title { margin-bottom: 40px !important; } } .section-title { margin-bottom: 60px; } .section-title h2 { font-size: 40px; font-weight: 600; margin-top: 0px; position: relative; line-height: 50px; color: var(--font-color); } @media (max-width: 479px) { .top_cat__area .container .section-title p { font-size: 12px; width: 80% !important; line-height: 26px; font-family:var(--dm_sans); } } @media (max-width: 768px) { .section-title h2 { font-size: 24px !important; } } @media (max-width: 991px) { .section-title h2 { font-size: 38px; line-height: 1.2 !important; } } @media (max-width: 991px) { .top_cat__area .container .section-title p { width: 80%; } } @media (max-width: 991px) { .section-title p { width: 80%; } } @media (max-width: 1199px) { .section-title p, .ab_content ul li { font-size: 14px; } } @media only screen and (max-width: 768px) { .section-title p { padding-right: 0; margin-bottom: 30px; } } .top_cat__area .container .section-title p { width: 60%; margin: 20px auto auto; } @media (max-width: 479px) { .section-title p { font-size: 12px; width: 90% !important; } } @media (max-width: 1199px) { .single_tp { padding: 25px; } } .single_tp { box-shadow: rgba(23, 23, 36, 0.03) 10px 15px 18px; background: var(--background-color); padding: 40px; } .single_tp span { width: 60px; float: left; height: 60px; line-height: 60px; text-align: center; font-weight: 600; font-size: 26px; margin-right: 15px; border-radius: 30px; } .sc_one { color: rgb(242, 107, 101); background: rgb(255, 239, 238); } .single_tp h3 { font-size: 19px; font-weight: 600; margin-bottom: 15px; overflow: hidden; } @media (max-width: 1399px) { .single_tp p, #main-menu ul li a { font-size: 15px; } } @media (max-width: 1199px) { .single_tp p { font-size: 13px; } } .single_tp p { margin-top: 25px; overflow: hidden; } @media only screen and (max-width: 480px) { .section-title h2 { font-size: 35px; } } @media (max-width: 576px) { .home_course .section-title { text-align: center !important; } } .column__stack.column__full{ margin-bottom: 40px; transition: 0.3s all ease-out; } .column__stack.column__full:hover img{ transform: scale(0.97); } .cta.-type-1 { z-index: 0; position: relative; padding-top: 208px; padding-bottom: 168px; } .cta.-type-1 .cta__bg { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bg-image, .img-full { width: 100%; height: 100%; } .bg-image { background-size: cover; background-repeat: no-repeat; background-position: 50%; } .button.-outline-white { border: 2px solid white; border-radius: 6px; } .button.-md { padding: 12px 55px; font-size: 16px; line-height: 18px; font-weight: 500; height: 60px; } .button.-outline-white:hover { background-color:var(--hover-color); border-color: transparent; color:black !important; transition: all 0.4s ease; } .btn_one:hover { background: var(--hover-color); color: #fff; border-color: var(--hover-color); } @media (max-width: 767px) { .cta.-type-1 { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 767px) { .md\:text-30 { font-size: var(--text-30) !important; } } @media (max-width: 575px) { .cta.-type-1 { padding-top: 80px; padding-bottom: 80px; } } /* Section background */ .bg-dark-2 { background: radial-gradient( 1200px 600px at top center, #5f6ab8 0%, #3c4884 60%, #2b346f 100% ); padding: 60px; } /* Title spacing */ .sectionTitle__title { font-size: 42px; font-weight: 700; } .sectionTitle__text { margin-top: 10px; font-size: 16px; opacity: 0.85; } /* Step card */ .stepCard { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; padding: 60px 40px; height: 100%; transition: all 0.5s ease; } /* Hover effect */ .stepCard:hover { transform: translateY(-6px); background-color: #fff !important; } .stepCard:hover .stepCard .stepCard__icon,.sectionTitle__title,.sectionTitle__text{ color: black; } .stepCard:hover .stepCard__title, .stepCard:hover .stepCard__text { color: black; } /* .-stepCard-hover:hover { background-color: #fff !important; } */ /* Center content */ .stepCard__content { text-align: center; } /* Icons */ .stepCard__icon i { color: #00ff99; font-size: 64px; margin-bottom: 30px; display: inline-block; } /* Step title */ .stepCard__title { color: #ffffff; font-size: 22px; font-weight: 600; margin-bottom: 15px; } /* Step text */ .stepCard__text { color: rgba(255, 255, 255, 0.8); font-size: 15px; line-height: 1.7; } /* Spacing top */ .pt-50 { padding-top: 50px; } @media (max-width: 991px) { .sectionTitle__title { font-size: 34px; } .stepCard { padding: 45px 30px; } .stepCard__icon i { font-size: 56px; margin-bottom: 25px; } .stepCard__title { font-size: 20px; } } @media (max-width: 575px) { .layout-pt-lg { padding-top: 70px; } .layout-pb-lg { padding-bottom: 70px; } .sectionTitle__title { font-size: 28px; line-height: 1.3; } .sectionTitle__text { font-size: 14px; } .stepCard { padding: 35px 22px; border-radius: 12px; } .stepCard__icon i { font-size: 48px; margin-bottom: 20px; } .stepCard__title { font-size: 18px; } .stepCard__text { font-size: 14px; } } @media (max-width: 575px) { .y-gap-30 > div { margin-bottom: 20px; } } .padding { padding: 100px 0px; } .container2 { margin-top: 18px; margin: auto; } #boxes { display: flex; justify-content: space-between; } .card { background: white; border-top-right-radius: 60px !important; border-bottom-left-radius: 60px !important; padding: 50px 40px; width: 100%; text-align: left; position: relative; display: flex; flex-direction: column; align-items: center; height: 100% !important; transition: 0.5s; } .card::before { content: ""; position: absolute; width: 110%; height: 110%; /* border: 5px solid; */ border-top-right-radius: 60px; border-bottom-left-radius: 60px; top: -5%; left: -5%; z-index: -1; } #card-part { width: 406px; } .vision .icon { /* border: 1px solid var(--primary-color); */ background-color: #FFCCCC; } .card .icon { /* background: var(--primariy-background); */ padding: 18px; border-radius: 50%; position: absolute; top: -35px; } .vision .icon i { color: #BF1120; } .card .icon i { font-size: 35px; } .mission h2, .vision h2, .goal h2 { font-weight: 600; color: var(--primary-font-color) !important; margin-top: 21px; } .vision .icon{ /* border: 1px solid var(--primary-color); */ background-color: #FFCCCC; } .vision .icon i{ color:#BF1120; } .mission .icon{ /* border: 1px solid var(--primary-color1); */ background-color: #B3D4F3; } .mission .icon i{ color: var(--primary-color1); } .goal .icon{ /* border: 1px solid var(--primary-color1); */ background-color: #FCE5B3; } .goal .icon i{ color: rgb(245, 173, 16); } .card .icon img{ height: auto; width: 61px; } .card p { text-align: center; font-weight: 500; color: var(--font-color); } .card:hover { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .ab_content { margin-bottom: 30px; } .ab_content h2 { font-weight: 600; line-height: 50px; font-size: 38px; margin-bottom: 20px; letter-spacing: 0px; margin: 0; color: #0b104a } .ab_content p { margin-bottom: 15px; } .ab_content ul { margin-bottom: 40px; } ul { list-style: none; } .ab_content ul li { color: #0b104a; font-weight: 600; line-height: 40px; } .ab_content ul li span { color: #525fe1; margin-right: 10px; } /* .btn_one { background: var(--primary-color1); border: 1px solid #525fe1; padding: 15px 30px; border-radius: 2px; color: #fff; transition: .3s; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } */ .ab_img, .ab_img img { position: relative; } .home_ps2 { background: #fff; width: 250px; padding: 20px; border-radius: 5px; box-shadow: 0 0 30px #01297014; position: absolute; top: 45%; right: 0%; } .home_ps2 span { color: #2d36bb; background: #ecedff; width: 50px; float: left; height: 50px; line-height: 50px; border-radius: 30px; font-size: 20px; text-align: center; margin-right: 15px; } .home_ps2 h2 { font-weight: 500; } @media (max-width: 1199px) { .ab_content h2 { font-size: 34px; line-height: 1.4; } } @media (max-width: 479px) { .ab_content h2 { font-size: 26px; margin-top: 10px; } } /* course offer */ /* Container spacing */ .component-content { padding: 80px 0; } /* Main liftout layout */ .image__liftout { display: flex; align-items: center; gap: 80px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Image section */ .image__liftout ._image { flex: 1; position: relative; display: inline-block; } .image__liftout ._image img { width: 76%; height: 288PX; display: block; border-radius: 4px; object-fit: full; } .image__liftout ._image::before { content: ""; position: absolute; top: -10px; right: 120px; width: 40px; height: 40px; border-top: 4px solid #003087; border-right: 4px solid #003087; } /* Bottom-left corner border */ .image__liftout ._image::after { content: ""; position: absolute; bottom: -10px; left: -10px; width: 40px; height: 40px; border-bottom: 4px solid #003087; border-left: 4px solid #003087; } /* Text section */ .image__liftout ._copy { flex: 1; } .image__liftout h3 { font-size: 36px; font-weight: 700; color: var(--font-color); margin-bottom: 20px; } .image__liftout p { font-size: 16px; line-height: 1.7; color: #333; margin-bottom: 30px; } /* Button */ .image__liftout .button { display: inline-block; padding: 12px 26px; border: 2px solid var(--font-color); color: var(--font-color); text-decoration: none; font-weight: 600; border-radius: 4px; transition: all 0.3s ease; } .image__liftout .button:hover { background: var(--hover-color); color: #fff; border-color: var(--hover-color); } /* -------------------- */ /* Responsive Styling */ /* -------------------- */ @media (max-width: 991px) { .image__liftout { gap: 40px; } .image__liftout h3 { font-size: 30px; } } @media (max-width: 768px) { .image__liftout { flex-direction: column; text-align: left; } .image__liftout ._copy { padding-top: 20px; } .image__liftout h3 { font-size: 28px; } .image__liftout ._image img { width: 100%; object-fit: fill; } .image__liftout ._image::before { right: -10px; } } @media (max-width: 480px) { .component-content { padding: 50px 0; } .image__liftout h3 { font-size: 24px; } .image__liftout p { font-size: 15px; } } /* Mobile & tablet only */ @media (max-width: 768px) { /* Target second course (BIT) */ .component-content .column__stack:nth-of-type(2) .image__liftout { flex-direction: column; } /* Make image appear first */ .component-content .column__stack:nth-of-type(2) .image__liftout ._image { order: 1; } /* Make text appear after image */ .component-content .column__stack:nth-of-type(2) .image__liftout ._copy { order: 2; padding-top: 20px; } } .testi_area { /* background: url(../images/newbg.png) no-repeat; background-size: cover; */ } .ab_img, .ab_img img { position: relative; } .swiper-horizontal { touch-action: pan-x; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translateZ(0); } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex ; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .testimonial { background: #fff; border: 1px solid #ddd; padding: 40px; border-radius: 5px; margin: 0; } .testimonial121 { border: none !important; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .testimonial img { width: 60px; margin-bottom: 20px; } .testimonial .img121 { width: 54%; height: 254px; margin-left: 124px; margin-bottom: 20px; } .testimonial_content i { color: #fff; font-size: 22px; background: var(--primary-color1); margin-right: 4px; border-radius: 30px; padding: 2px; } .testimonial_content p { overflow: hidden; margin-top: 15px; font-size: 22px; line-height: 32px; } .testi_pic_title { margin-top: 20px; background: var(--primary-color1); padding: 20px; border-radius: 5px; } .testi_pic_title img { float: left; margin-right: 15px; border-radius: 100px; border: 5px solid #fff; } .testi_pic_title h4 { font-size: 20px; font-weight: 700; margin-bottom: 5px; color: #fff !important; overflow: hidden; } .testi_pic_title p { color: #fff; } @media (max-width: 1199px) { .testimonial_content p { font-size: 20px; line-height: 1.5; } } @media (max-width: 991px) { .testimonial_content p { font-size: 20px; } } @media (max-width: 576px) { .testimonial_content p { font-size: 16px; line-height: 28px; } .swiper-slide { width: 100% !important; } .testimonial .img121 { margin-left: 0px; width: 100%; object-fit: contain; } #about-logo-area img{ display: none; } } @media (max-width: 479px) { .testimonial_content p { font-size: 16px ; } } .footer { background: var(--background-accent); } .section-padding { padding: 81px 0; } .single_footer { position: relative; display: flex; flex-direction: column; } .footer-left-image a img{ height: 100px; } .single_footer p { margin-bottom: 30px; margin-top: 10px; } .social_profile { margin-top: 10px; } .social_profile ul { list-style: outside none none; margin: 0; padding: 0; } .social_profile ul li { float: left; } .social_profile ul li a { text-align: center; border: 0px; text-transform: uppercase; -webkit-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; margin-right: 10px; font-size: 16px; color: var(--primary-color1); display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 30px; box-shadow: 0 6px #e7eafa, 15px 30px 68px #9ca0b98f; background: #fff; } .social_profile ul li a:hover { background-color: var(--hover-color); color: var(--font-color1); } /* .single_footer ul li a { color: #0b104a; -webkit-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; line-height: 36px; font-size: 16px; font-weight: 400; text-transform: capitalize; } */ .single_footer1 h4 { color: #0b104a; margin-top: 0; margin-bottom: 25px; font-weight: 700; text-transform: capitalize; font-size: 20px; } .single_footer ul { margin: 0; padding: 0; list-style: none; } .single_footer1 ul li a { color: #0b104a; -webkit-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; line-height: 36px; font-size: 16px; font-weight: 400; text-transform: capitalize; font-family: var(--jost), sans-serif; text-decoration: none; } .sf_contact { margin-bottom: 20px; overflow: hidden; display: flex ; align-items: center; gap: 15px; } .sf_contact span { color: #525fe1; font-size: 22px; } .sf_contact p { overflow: hidden; margin: 0; } .foot_img { width: 100%; } .foot_copy { background: #e8e8ff; padding: 20px 0; } .foot_copy p { text-align: center; font-weight: 500; } @media (max-width: 1199px) { .single_footer p { font-size: 14px; } } @media (max-width: 1199px) { .single_footer p { font-size: 13px; line-height: 1.5; } } @media (max-width: 1199px) { .single_footer h4 { font-size: 16px; } } .single_blog { background: #fff; border-radius: 0; border: 1px solid #e8e8e9; -webkit-box-shadow: 10px 15px 18px rgba(23, 23, 36, .03); box-shadow: 10px 15px 18px #17172408; } .single_blog img { width: 100%; } .content_box { padding: 35px; } .single_blog span { text-transform: capitalize; margin-bottom: 10px; display: inline-block; } .single_blog span a { color: #525fe1; font-weight: 700; } .single_blog h2 { line-height: 32px; font-size: 20px; margin-bottom: 15px; } .single_blog h2 a { color: #1a2d62; font-weight: 600; margin-bottom: 40px; display: block; text-decoration: none; } .single_blog h2 a:hover { color: #525fe1; } .content_box span a{ text-decoration: none; } @media (max-width: 576px) { .content_box { padding: 15px; } } @media (max-width: 991px) { .content_box { padding: 20px; } } @media (max-width: 1199px) { .content_box { padding: 25px; } } @media (max-width: 576px) { .single_blog h2 { font-size: 20px; } } @media (max-width: 1199px) { .single_blog h2 { font-size: 18px; line-height: 1.6; } } @media (max-width: 576px) { .single_blog h2 a { font-size: 16px; } } @media (max-width: 576px) { .single_blog h2 a { margin-bottom: 20px; font-size: 18px; } } @media (max-width: 991px) { .single_blog h2 a { margin-bottom: 25px; } } @media (max-width: 991px) { .btn_one { height: 46px; display: inline-flex; padding: 10px 15px; font-size: 13px; align-items: center; gap: 5px; } } @media only screen and (max-width: 960px) { .btn_one { padding: 14px 25px; margin-top: 0; } } @media (max-width: 576px) { .single_blog span { font-size: 14px; } } @media (max-width: 576px) { .single_blog span { font-size: 12px; } } @media (max-width: 991px) { .single_blog span { font-size: 14px; } } @media (max-width: 576px) { .section-top-title h1 { font-size: 42px !important; } } @media (max-width: 479px) { .section-top-title h1 { font-size: 40px !important; } } .section-top { padding-top: 150px; position: relative; padding-bottom: 90px; background: url(/assets/image/school.png) center center / cover; background-position: center center; } /* Light dim overlay */ .section-top::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 50, 0.5); /* increase for more light */ z-index: 1; } /* Keep content above overlay */ .section-top > * { position: relative; z-index: 2; } .section-top-title { position: relative; } .section-top-title h1 { margin-bottom: 10px; text-transform: capitalize; font-weight: 700; font-size: 50px; color: var(--font-color1); } .section-top-title ul li { color: var(--background-color) !important; display: inline-block; } .section-top-title ul li a { color:var(--hover-color) !important; font-weight: 600; } /* image */ .gallery-area { margin: 56px 0px; } .gallery-img { position: relative; overflow: hidden; width: 100%; border-radius: 12px; } .header-logo-menu.stick.semi-transparent, .gallery-img, .gallery-img .hover-effect { background: rgba(0, 0, 0, 0.85); } .gallery-img img { width: 100%; height: 199px; object-fit: cover; display: block; position: relative; transform: scale(1); transition: transform 0.7s ease-in-out; } .gallery-img .hover-effect { opacity: 0; background: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s ease-in-out; } .gallery-img h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: var(--primary-color) !important; font-size: 16px; line-height: 28px; margin: 20px auto 10px; font-weight: 600; opacity: 0; padding: 9px 0; text-align: center; text-transform: uppercase; transform: scale(0.8); transition: all 0.4s ease-in-out; } .gallery-img p { color: #ffffff; /* margin: 0 30px; */ opacity: 0; text-align: center; transform: scale(0.8); transition: all 0.4s ease-in-out; } .gallery-img:hover img { transform: scale(1.1); } .gallery-img:hover .hover-effect { opacity: 1; } .lightbox .lb-image { object-fit: cover; } /* Text Animation */ .gallery-img p { color: #ffffff; /* margin: 0 30px; */ opacity: 0; text-align: center; transform: scale(0.8); transition: all 0.4s ease-in-out; } /* Reveal text on hover */ .gallery-img:hover h2, .gallery-img:hover p { opacity: 1; transform: scale(1); } .lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 9999; background-color: black; opacity: 0.8; display: none; } .lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-weight: normal; outline: none; } .lb-outerContainer { position: relative; width: 250px; height: 250px; margin: 0 auto; border-radius: 4px; background-color: white; } .lightbox .lb-image { display: block; height: auto; max-width: inherit; max-height: none; border-radius: 3px; border: 4px solid white; } .lightbox .lb-image { object-fit: cover; } .lightbox img { width: 690px !important; height: 370px !important; /* object-fit: cover; */ } .lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } .lb-nav a.lb-prev { width: 34%; left: 0; float: left; background: url(../images/prev.png) left 48% no-repeat; opacity: 0; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; transition: opacity 0.6s; } .lb-nav a { outline: none; background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); } .lb-nav a.lb-next { width: 64%; right: 0; float: right; background: url(../images/next.png) right 48% no-repeat; opacity: 0; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; transition: opacity 0.6s; } .lb-prev, .lb-next { height: 100%; cursor: pointer; display: block; } .lb-loader { position: absolute; top: 43%; left: 0; height: 25%; width: 100%; text-align: center; line-height: 0; } .lb-cancel { display: block; width: 32px; height: 32px; margin: 0 auto; background: url(../images/loading.gif) no-repeat; } .lb-outerContainer:after { content: ""; display: table; clear: both; } .lb-dataContainer { margin: 0 auto; padding-top: 5px; width: 100%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .lb-data { padding: 0 4px; color: #ccc; } /* video section */ .custom-gallery-container { padding-top: 100px; padding: 80px 0; } .custom-gallery-img { position: relative; } .custom-gallery-img img { width: 100%; height: 199px; object-fit: cover; border-radius: 10px; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; color: white; opacity: 0; transition: opacity 0.3s ease; } .custom-gallery-item .video-description { text-align: center; margin-top: 10px; font-size: 14px; color: #555; } .custom-gallery-item .video-description h3 { font-size: 18px; margin-bottom: 5px; color: var(--primary-color) !important; font-weight: 600; } .custom-gallery-item .video-description p { margin: 0; font-weight: normal; } .modal1.show .modal-dialog { margin-top: 126px; } .modal-content { width: 630px !important; padding: 25px; margin-left: -70px; } .custom-modal-header h5 { font-size: 1.25rem; font-weight: bold; color: var(--primary-color) !important; } .custom-video-container iframe, .custom-video-container video { width: 100%; height: 400px; } /* pagination */ .active>.page-link, .page-link.active { background-color: var(--hover-color) !important; border-color: var(--hover-color) !important; } .page-link { color: var(--primary-color1) !important; } /* detail page */ .left-side { margin-bottom: 30px; } .details_big_img { position: relative; overflow: hidden; border-radius: 10px; } .details_big_img img { width: 100%; transition: var(--transition); object-fit: cover; } .details_text_wrapper { padding-top: 30px; } .details_text_wrapper h2 { font-size: 26px; font-weight: 500; line-height: 50px; color: var(--primary-font-color) !important; } .details_text_wrapper p { padding-top: 15px; font-size: 16px; line-height: 24px; color: var(--font-color); font-weight: 500; margin-bottom: 0; } .details_small_img { padding-top: 30px; } .details_small_img img { width: 100%; height: 217px; object-fit: cover; } .sidebar_boxed { background: #ffffff; box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.03), 8px 10px 24px rgba(0, 0, 0, 0.03); border-radius: 6px; padding: 30px 30px; margin-bottom: 30px; } .sidebar_heading_main { border-bottom: 1px solid #ededed; padding-bottom: 7px; } .sidebar_heading_main h3 { font-size: 24px; font-weight: 600; color: var(--primary-font-color) !important; } .event_details_list ul li { padding-top: 20px; color: var(--primary-font-color); font-weight: 500; transition: 0.4s all ease-out; } .event_details_list ul li i { margin-right: 5px; width: 36px; background: var(--background-accent); height: 30px; width: 30px; border-radius: 100%; color: var(--primary-color1); padding: 9px; font-size: 13px; transition: 0.4s all ease-out; } .event_details_list ul li:hover i{ background-color: var(--hover-color); color: var(--font-color1); } .event_details_list ul li span { color: var(--primary-font-color); } .register_now_details { padding-top: 40px; } .register_now_details a { color: var(--font-color1); background-color: var(--primary-color1); transition: var(--transition); box-shadow: none; overflow: hidden; white-space: nowrap; position: relative; z-index: 0; border: none; transition: 0.4s all ease-out; width: 100%; } .register_now_details a:hover { background-color: var(--hover-color); } .view-events-btn { display: inline-block; background: var(--primary-color1); color: white; font-size: 16px; font-weight: bold; text-decoration: none; padding: 7px 12px; border-radius: 3px; text-align: center; transition: 0.3s; } .recent_donet_item { display: flex; padding-top: 25px; } .recent_donet_img { width: 25%; } .recent_donet_img a img { height: 78px; width: 78px; object-fit: cover; transition: transform 0.3s ease-in-out; } .recent_donet_text{ width: 100%; padding-left: 15px; } .recent_donet_text p { padding-top: 5px; color: var(--primariy-background2); margin-bottom: 0px !important; } .recent_donet_text h4 { margin-bottom: 0px !important; } .recent_donet_text1 h4 a { color: var(--primary-font-color) !important; font-size: 18px !important; } .social_icon_sidebar ul { /* gap: 16px !important; */ display: flex; margin-top: 23px; justify-content: space-between; padding-left: 0px; } .social_icon_sidebar ul li { display: inline-flex; /* padding-top: 20px; */ /* padding-right: 15px; */ padding: 5px; transition: var(--transition); border: 1px solid var(--primariy-background); border-radius: 100%; height: 50px; width: 50px; font-size: 24px; } .social_icon_sidebar ul li a i { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--primary-color1); transition: 0.3s all ease-out; } .social_icon_sidebar ul li a i:hover { transform: scale(0.9); } .recent_donet_item:hover img { transform: scale(1.1); } #trending_causes_main{ margin:80px 0px } #custom-addon-wrapper { margin-top: 30px; margin-left: 0; margin-right: 0; margin-bottom: 30px; } #custom-addon { background: #ffffff; box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.03), 8px 10px 24px rgba(0, 0, 0, 0.03); border-radius: 6px; padding: 30px 30px; margin-bottom: 30px; } .categories-list { list-style: none; padding: 0; margin: 0; } .categories-list li { margin-top: 4px; } .categories-list li a { color: #6f6f6f; font-size: 16px; display: flex !important; justify-content: space-between; align-items: center; padding: 5px 0px; font-weight: 500; border-radius: 10px; text-decoration: none; transition: all 0.5s ease; } .tags_noted { font-size: 18px; font-weight: 600; padding-bottom: 10px; display: block; transition: all 0.3s ease-in-out 0.1s; outline: 0 !important; color: var(--primary-color1); } .social_icon_sidebar ul li a:hover{ background-color: var(--hover-color); border-radius: 50%; color: var(--font-color1); } .social_icon_sidebar ul li a:hover i{ color: var(--font-color1); } .about-us { margin-top: 100px; } .heading { font-size: 40px; line-height: 1.2; margin-bottom: 0.5rem; color: var(--font-color); font-weight: 600; } .desc p { margin-bottom: 0px; line-height: 1.7; font-size: 16px; color: var(--font-color); font-weight: 500; margin-bottom: 20px; text-align: justify; margin-bottom: 10px !important; } .about-us img { height: 300px; border-radius: 100%; padding: 10px; background-color: var(--primary-color1); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; width: 306px; } .view-events-btn { transition: 0.3s all ease-out; } .view-events-btn:hover { background-color: var(--hover-color); }