@ -74,8 +74,8 @@ h2{
}
. mobile-nav-icon {
width : 3 rem;
height : 3 rem;
width : 2 . 5 rem;
height : 2 . 5 rem;
color : # 212529 ;
}
@ -106,8 +106,8 @@ h2{
Responsive Codes
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/* 1024 px */
@ media ( max-width : 64 em) {
/* 1200 px */
@ media ( max-width : 75 em) {
html {
overflow-x : hidden ;
}
@ -180,7 +180,6 @@ Responsive Codes
/* top bar */
# topbar {
background : # FFFFFF ;
height : 50px ;
font-size : 14px ;
transition : all 0 . 5s ;
color : # fff ;
@ -223,7 +222,7 @@ Responsive Codes
. slider-content {
padding : 3rem 6rem ;
position : absolute ;
top : 3 0% ;
top : 2 0% ;
width : 60 % ;
}
. slider-content h2 {
@ -244,13 +243,96 @@ Responsive Codes
. slider-content p {
margin-bottom : 3rem ;
}
. slider-content p ,
. slider-content h2 ,
. slideDown ,
. slideUp {
position : relative ;
opacity : 0 ;
}
. slider-content a {
background : rgba ( 216 , 51 , 162 , 0 . 8 ) ;
border : 2px solid # EC3AB0 ;
border-radius : 25px ;
padding : 10px 20px ;
text-decoration : none ;
color : # FFFFFF ;
display : inline-block ;
align-items : center ;
position : relative ;
transition : 0 . 5s ;
}
. slider-content a :: after ,
. services-content a :: after ,
. why-us-desc a :: after {
content : '\f101' ;
font-weight : 900 ;
font-family : "Font Awesome 5 Free" ;
position : absolute ;
opacity : 0 ;
top : 10px ;
right : -20px ;
transition : 0 . 5s ;
}
. slider-content a : hover ,
. services-content a : hover {
background : # 326CBF ;
padding-right : 2rem ;
padding-left : 1rem ;
}
. why-us-desc a : hover {
background : # E22899 ;
padding-right : 2rem ;
padding-left : 1rem ;
}
. slider-content a : hover :: after ,
. services-content a : hover :: after ,
. why-us-desc a : hover :: after {
opacity : 1 ;
right : 10px ;
}
. slideUp {
top : 40px ;
left : 10px ;
animation : slideUp ease 1s forwards 1 . 6s ;
}
. slideDown {
top : -40px ;
left : 5px ;
animation : slideDown ease 1s forwards . 6s ;
}
@ keyframes slideUp {
0 % { transform : translateY ( 0 ) ; opacity : 0.6 ; }
100 % { transform : translateY ( -40 px ) ; opacity : 1 ; }
}
@ keyframes slideDown {
0 % { transform : translateY ( 0 ) ; opacity : 0.6 ; }
100 % { transform : translateY ( 40 px ) ; opacity : 1 ; }
}
. carousel-control-next , . carousel-control-prev {
width : 5 % ! important ;
}
. carousel-indicators [ data-bs-target ] : hover {
background : rgb ( 100 % , 100 % , 100 % ) ;
}
. carousel-indicators [ data-bs-target ] {
position : relative ;
width : 10px ! important ;
height : 10px ! important ;
background : none ! important ;
border-radius : 100 % ! important ;
border : 2px solid # FFFFFF ! important ;
display : inline-block ;
margin-right : 7px ;
cursor : pointer ;
overflow : hidden ;
}
. carousel-indicators [ data-bs-target ] . active {
background : # 326CBF ! important ;
}
. carousel-control-prev-icon , . carousel-control-next-icon {
opacity : 0 ;
filter : alpha ( opacity = 0 ) ; /* IE support */
}
/* banner slider css */
@ -355,6 +437,10 @@ Responsive Codes
color : # FFF1FC ;
border-radius : 0 20px 0 20px ;
text-decoration : none ;
display : inline-block ;
align-items : center ;
position : relative ;
transition : 0 . 5s ;
}
. services-slider {
display : flex ! important ;
@ -538,11 +624,11 @@ Responsive Codes
line-height : 1 . 8rem ;
letter-spacing : 0 . 001em ;
color : # 000000 ;
transition : color 2 s;
transition : color 1 . 5 s;
}
. blog-card : hover h2 ,
. blog-card : hover p {
color : # 326CBF ;
color : # E22899 ;
}
. blog-desc p {
font-weight : 400 ;
@ -945,6 +1031,12 @@ Responsive Codes
text-align : center ;
border-radius : 6px ;
padding : 10px 40px ;
transition : . 6s ;
}
. lets-chat-section a : hover {
background : # 326CBF ;
border : 1px solid # 326CBF ;
color : # FFFFFF ;
}
. our-values-section {
padding : 3rem 6rem ;
@ -1087,6 +1179,10 @@ Responsive Codes
text-decoration : none ;
padding : 10px 20px ;
border-radius : 25px ;
display : inline-block ;
align-items : center ;
position : relative ;
transition : 0 . 5s ;
}
. blog-banner {
@ -1393,8 +1489,71 @@ Responsive Codes
/* mobile view css */
@ media only screen and ( min-width : 320px ) and ( max-width : 480px ) {
h1 {
font-size : 28px ;
line-height : 38px ;
}
h2 {
font-weight : 600 ;
font-size : 22px ;
line-height : 38px ;
}
# topbar {
padding : 0 . 5rem 0 ;
}
. contact-info ,
. article-card ,
. blog-banner-content {
flex-direction : column ;
gap : 10px ;
}
. slider-content h2 ,
. slider-content h1 ,
. blog-banner-content h2 ,
. contact-offices h2 {
font-size : 22px ;
line-height : 2rem ;
}
. blog-banner h5 ,
. studyabroad-banner-header h5 {
font-size : 18px ;
margin-top : 1rem ;
line-height : 1 . 8rem ;
text-align : center ;
}
. slider-content {
padding : 1 . 3rem ;
position : absolute ;
top : 0 ;
width : 100 % ;
}
. slider-content h1 {
margin-bottom : 1rem ;
}
. slider-image img {
height : 200px ;
}
. slider-content p ,
. overseas-img {
display : none ;
}
. slider-content a {
font-size : 14px ;
padding : 5px 10px ;
}
. services-content h1 ,
. why-us-desc h1 ,
. testimonials-desc h1 ,
. blog-header h1 ,
. our-values-section h1 ,
. studyabroad-banner-header h1 ,
. contact-left-top h1 {
font-size : 28px ;
line-height : 38px ;
margin-bottom : 0 . 8rem ;
}
. about-icons-section {
grid-template-columns : 1fr ;
grid-template-columns : 1fr 1fr ;
}
. services-section ,
. blog-section ,
@ -1408,23 +1567,42 @@ Responsive Codes
. why-et ,
. student-visa-section ,
. blogs-section , . why-et ,
. blog-detail-section ,
. faq-section ,
. why-us-section ,
. testimonials-section ,
. footer-top {
. footer-top ,
. our-values-section ,
. lets-chat-section ,
. blog-banner {
padding : 2rem ;
}
. contact-form-section {
padding : 0 ;
}
. contact-form ,
. form-sec {
border-radius : 0 ;
padding : 1rem 0 . 8rem ;
}
. blog-detail-section {
padding : 3rem ;
}
. services-content ,
. testimonials-desc {
. testimonials-desc ,
. contact-offices {
margin-right : 0 ;
margin-bottom : 1rem ;
}
. footer-description {
margin : 1rem 0 ! important ;
/* margin-bottom: 0 !important; */
}
. why-us-section :: before {
display : none ;
}
. why-us-img ,
. blog-header p {
. blog-header p ,
. lets-chat-section p {
padding : 0 ;
margin-bottom : 1rem ;
}
@ -1435,10 +1613,83 @@ Responsive Codes
. footer-links {
margin : 0 ! important ;
}
. our-values-section . row {
display : flex ;
flex-direction : column-reverse ;
}
. values-lists a {
padding : 5px 5px 5px 0 ;
}
. values-lists h2 {
font-size : 18px ;
line-height : 1 . 8rem ;
}
. about-header-section {
height : 60vh ;
}
. about-banner-img {
top : 85 % ;
}
. breadcrumb {
display : none ;
}
. article-img {
width : 100 % ;
}
. blog-banner-desc {
margin : 0 ;
}
. blog-banner-content a {
padding : . 5rem 2rem ;
font-size : . 8rem ;
}
. contact-offices h5 {
font-size : 15px ;
}
}
/* mobile view css end */
/* ipad, tablets screen css */
@ media only screen and ( min-width : 481px ) and ( max-width : 768px ) {
h2 {
font-weight : 600 ;
font-size : 28px ;
line-height : 42px ;
}
# topbar {
padding : 0 . 5rem 3rem ;
}
. header {
padding : 0 3rem ;
}
. slider-content {
padding : 2rem ;
top : 0 % ;
width : 80 % ;
}
. slider-content h1 ,
. slider-content h2 ,
. blog-banner-content h2 {
font-size : 32px ;
line-height : 48px ;
}
. blog-banner h5 {
font-size : 24px ;
margin-top : 1rem ;
line-height : 1 . 8rem ;
text-align : center ;
}
. slider-content h1 {
margin-bottom : 1 . 6rem ;
}
. slider-content p {
display : none ;
}
. why-us-img ,
. blog-header p ,
. lets-chat-section p {
padding : 0 ;
margin-bottom : 1rem ;
}
. about-icons-section {
grid-template-columns : 1fr 1fr ;
}
@ -1458,24 +1709,78 @@ Responsive Codes
. faq-section ,
. why-us-section ,
. testimonials-section ,
. footer-top {
. footer-top ,
. lets-chat-section ,
. our-values-section ,
. blog-banner {
padding : 3rem ;
}
. service-card {
width : 100 % ;
}
. services-content h1 ,
. why-us-desc h1 ,
. testimonials-desc h1 ,
. blog-header h1 {
font-size : 32px ;
line-height : 48px ;
margin-bottom : 0 . 8rem ;
}
. why-us-section :: before {
display : none ;
}
. services-content ,
. testimonials-desc {
. testimonials-desc ,
. contact-offices {
margin-right : 0 ;
margin-bottom : 1rem ;
}
. our-values-section . row {
display : flex ;
flex-direction : column-reverse ;
}
. values-lists a {
padding : 5px 5px 5px 0 ;
}
. values-lists h2 {
font-size : 18px ;
line-height : 1 . 8rem ;
}
. breadcrumb {
display : none ;
}
. blog-banner-desc {
margin : 0 ;
}
. blog-banner-content {
flex-direction : column ;
gap : 10px ;
}
. contact-form-section {
padding : 0 ;
}
. contact-form ,
. form-sec {
border-radius : 0 ;
}
}
/* ipad, tablets screen css ends */
/* Small screens, laptops css */
@ media only screen and ( min-width : 769px ) and ( max-width : 1024px ) {
# topbar ,
. header {
padding : 0 3rem ;
}
. slider-content {
padding : 2rem ;
top : 0 % ;
width : 80 % ;
}
. slider-content h1 {
margin-bottom : 1 . 6rem ;
font-size : 38px ;
line-height : 58px ;
}
. about-icons-section {
grid-template-columns : 1fr 1fr ;
}
@ -1495,7 +1800,9 @@ Responsive Codes
. faq-section ,
. why-us-section ,
. testimonials-section ,
. footer-top {
. footer-top ,
. lets-chat-section ,
. our-values-section {
padding : 3rem ;
}
. why-us-section :: before {
@ -1505,19 +1812,61 @@ Responsive Codes
width : 100 % ;
}
. services-content ,
. testimonials-desc {
. testimonials-desc ,
. contact-offices {
margin-right : 0 ;
margin-bottom : 1rem ;
}
. values-lists a {
padding : 5px 5px 5px 0 ;
}
. values-lists h2 {
font-size : 18px ;
line-height : 1 . 8rem ;
}
. contact-form-section {
padding : 0 ;
}
. contact-form ,
. form-sec {
border-radius : 0 ;
}
. contact-form . row {
display : flex ;
flex-direction : column ;
}
. contact-form . row . col-md-4 ,
. contact-form . row . col-md-8 {
width : 100 % ;
}
}
/* Small screens, laptops css ends */
/* Desktops, large screens css */
@ media only screen and ( min-width : 1025px ) and ( max-width : 1200px ) {
. slider-content {
padding : 3rem 6rem ;
top : 0 % ;
width : 80 % ;
}
. footer-top {
padding : 3rem ;
}
. header ,
# topbar {
padding : 0 3rem ;
}
. contact-form-section {
padding : 0 ;
}
. contact-form {
border-radius : 0 ;
}
}
/* Desktops, large screens css ends */
/* Extra large screens, TV css */
@ media screen and ( min-width : 1201px ) {
@ media only screen and ( min-width : 1201px ) and ( max-width : 1220px ) {
. navbar-list {
gap : 1rem ;
}
}
/* Extra large screens, TV css ends */