body { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } .navbar { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px 40px !important; } .navLink { color: #000033 !important; } .btn-primary { padding: 8px 16px !important; background-color: transparent !important; border: 2px solid rgb(97, 97, 97) !important; border-radius: 8px !important; font-size: 16px !important; color: black !important; cursor: pointer !important; outline: none !important; } .navLink::after { content: ''; display: block; width: 0; height: 3px; background: #E28527; transition: width .4s ease-in; } .navLink:hover { font-weight: 600; } .navLink:hover::after { width: 100%; } .phone-number { margin-top: 8px; margin-left: -11px; margin-right: 25px; } @media only screen and (min-width: 320px) and (max-width: 767px) { .main-section { padding: 2rem; } .navbar { padding: 20px !important; } .logoImg { width: 150px; } .contactBtn { display: none !important; } .navList { display: inline; text-align: right; } } .eventHeading { background-color: #FFF3E4; padding: 2rem 0 2rem 0; } .eventHeading h1 { text-align: center; } .search-bar { position: relative; display: block; margin-inline: auto; width: 80%; margin-top: 3rem; } .search-input { width: 100%; padding: 11px; border: 2px solid #ccc; border-radius: 5px; outline: none; } .search-icon { position: absolute; top: 26px; right: 26px; transform: translateY(-50%); cursor: pointer; border: navajowhite; background-color: snow; } .event-headings { display: flex; justify-content: space-around; margin-top: 20px; } .event-headings a { text-decoration: none; color: black; } .promoSection { margin-top: 2rem; margin-inline: 8rem; } .promoSection h2 { text-align: left; } .promo-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 1rem 1rem; margin-top: 20px; } .promo-box { border: 2px solid #ccc; border-radius: 8px; } .date-box { display: flex; justify-content: space-between; } .event-time { margin: 0 !important; padding: 8px 14px 5px 5px; } .date { margin: 0 !important; background-color: #223545; color: #fff; padding: 5px 8px 5px 8px; border-top-left-radius: 8px; } .imageContent { display: flex; column-gap: 14px; margin-top: 1.5rem; padding-inline: 1rem; } .event-heading { font-weight: 700; } .event-paragraph { color: gray; font-weight: 500; } .event-location { display: flex; justify-content: space-between; } .locationCard { display: flex; align-items: center; column-gap: 3px; } .locationCard p { margin: 0 !important; } .location-icon { width: 20px; height: 20px; } .eventButton { padding: 0px 10px; background-color: #DF780F; color: #fff; border: none; cursor: pointer; } .listButton { margin-top: 1rem; margin-bottom: 1rem; } .listButton ul { display: flex; flex-direction: column; row-gap: 10px; margin-right: 12px; } .listButton ul li::marker { color: #DF780F; } .listButton ul li { color: #393939; font-weight: 600; } .registerButton { background: none; border: 1px solid #2235457A; border-radius: 20px; width: 90%; margin-inline: auto; display: block; padding: 9px; } .line { border-top: 1px solid #ccc; width: 100%; } .specific-line { border-top: 3px solid #DF780F; width: 290px; margin-top: -22px; height: 10px !important; margin-left: 465px; } @media only screen and (min-width: 320px) and (max-width: 767px) { .line { border-top: 1px solid #ccc; width: 100%; } .specific-line { border-top: 3px solid #DF780F; width: 160px; margin-top: -34px; margin-left: 117px; } .eventHeading { padding: 1.5rem 0 1.5rem 0; } .search-bar { margin-top: 2rem; } .search-input { padding: 8px; } .event-headings { margin-top: 2rem; } .event-headings a { font-size: 16px; } .promoSection { margin-inline: 1rem; margin-top: -5px; } .promoSection h2 { font-size: 16px; } .promo-container { grid-template-columns: auto; grid-row-gap: 1rem; margin-top: 10px; } .event-time { font-size: 14px; } .date { padding: 7px 10px 7px 10px; font-size: 14px; } .imageContent { display: flex; column-gap: 14px; margin-top: 1.5rem; padding-inline: 1rem; } .event-heading { font-size: 18px; margin: 0; } .event-paragraph { font-size: 14px; margin: 0; margin-top: 3px; } .event-location { margin-top: 5px; } .listButton ul { row-gap: 8px; } .listButton ul li { font-size: 14px; } .registerButton { padding: 6px; } } .row { background-color: transparent !important; padding: 40px; } .box { border: 1px solid gray; margin: 10px; padding: 10px; margin-top: -30px; } .rectangle { border-radius: 6px; width: 72px; height: 64px; background-color: #223545; margin-bottom: 23px; position: relative; } .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .col-md-4 h3 { font-size: 40px; text-align: center; margin-right: -834px; margin-top: 85px; } .img2 { margin-left: 17px; height: 38px; margin-top: 12px; } .provide-paragraph { text-align: right; margin-top: 25px; margin-right: -458px; font-size: 18px; } @media only screen and (min-width: 320px) and (max-width: 767px) { .row { background-color: transparent !important; } .box { border: 1px solid gray; margin: 10px; padding: 10px; margin-top: 8px; /* width: 339px; */ margin-inline: 1rem; } .rectangle { border-radius: 6px; width: 72px; height: 64px; background-color: #223545; margin-bottom: 23px; position: relative; } .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .col-md-4 h3 { font-size: 18px; text-align: center; margin-right: 34px; margin-bottom: -3px; font-weight: bold; } .col-md-4 h4 { font-size: 18px; text-align: left; margin-bottom: -3px; font-weight: bold; } .img2 { margin-left: 17px; height: 38px; margin-top: 12px; } .provide-paragraph { text-align: center; margin-top: 15px; margin-left: 32px; font-size: 15px; margin-right: 43px; } } /* FooterSection */ .footerSection { display: flex; justify-content: space-between; align-items: baseline; background-color: #223545; color: #fff; padding: 2rem; } .footerLogoSection { display: flex; flex-direction: column; column-gap: 1rem; } .footerLogoImg { width: 235px; height: 100%; } .mobileFooterSection{ display: none; } .socialSection { list-style: none; display: flex; column-gap: 1rem; padding: 0; margin: 2rem 0; } .socialSection .socialIcons { padding: 6px; display: flex; color: #FFF; } .socialSection .socialIcons:hover { background: #fff; border-radius: 50%; color: #000; } .footerLogoSection p { color: #D1D1D1; margin-top: 0; } .courseSection h3, .quickLinkSection h3 { margin-top: 0; font-size: 22px; } .courseSection ul, .quickLinkSection ul { padding: 0; list-style: none; display: flex; flex-direction: column; row-gap: 1rem; } .courseSection ul a, .quickLinkSection ul a { color: #fff; text-decoration: none; } @media only screen and (max-width: 600px) { /* Footer */ .mobileFooterSection { padding-inline: 2rem; } .footerSection { display: none; } .mobileFooterSection { display: block; background-color: #223545; color: #fff; padding-block: 1.5rem; } .mobileFooterSection .footerLogoSection { margin-bottom: 2rem; } .linksSection { display: flex; justify-content: space-between; align-items: flex-start; } .courseSection ul a, .quickLinkSection ul a { font-size: 14px; } .courseSection h3, .quickLinkSection h3 { font-size: 16px; } .socialSection { margin: 1rem 0; } .footerContent p { font-size: 14px; } }