* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Nunito', Arial, Helvetica, sans-serif;
}

:root {
   --1stBlue: #072b4e;
   --2ndBlue: #2d5c88;
   --3rdBlue: #a0bad5;
   --4thBlue: #dfebf9;
   --5thBlue: #046ef5;
   --1stGray: #302926;
   --2ndGray: #403c39;
   --3rdGray: #615d5c;
   --1stRed: #ef4237;
   --gold-color: #f3bf35;
   --black-color: #050608;
   --white-col: #fff;
}

html {
   scroll-padding-top: 6.5rem;
   scroll-behavior: smooth;
}

body {width: 100%;}


/* ===========  H E A D E R  =========== */
header {
   background-color: var(--white);
   /* filter: brightness(0.9); */
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   padding: 1rem 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

header img {
   display: flex;
   /* width: 7rem; */
   aspect-ratio: 5/7;
   /* padding: 0.2rem; */
   /* border-radius: 50%; */
   width: 12rem;
   height: 6rem;
}

header a {
   display: flex;
   text-decoration: none;
   color: black;
}

header h1 {
   font-size: 2.9rem;
   font-weight: 900;
   letter-spacing: 0.1rem;
   /* font-family: 'Cantarell', Arial, Helvetica, sans-serif; */
} 
/*====== E N D   O F   H E A D E R ======*/



/*====== N A V I G A T I O N   B A R ======*/
.desktopNav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.3rem 5%;
   border-bottom: 0.2rem solid var(--1stBlue);
   background-color: var(--gold-color);
   position: sticky;
   top: 0;
   z-index: 3;
}

.desktopNav > ul {
   display: flex;
   align-items: center;
   list-style-type: none;
   gap: 2.8rem;
}

.desktopNav > ul > li > a {
   display: flex;
   text-decoration: none;
   letter-spacing: 0.1rem;
   color: var(--1stBlue);
   font-weight: 900;
   font-size: 1.5rem;
   position: relative;
   transition: all 0.5s;
}

/* nav > div:nth-child(2) > ul > li > a:hover {
   color: var(--5thBlue);
} */

.desktopNav > ul > li > a::before {
   content: '';
   position: absolute;
   border-radius: 0.3rem;
   background-color: var(--1stBlue);
   inset: 0;
   top: 100%;
   right: 100%;
   bottom: -0.4rem;
   transition: all 0.5s;
}

.desktopNav > ul > li > a:hover::before {
   right: 0;
   /* background-color: var(--5thBlue); */
}

.desktopNav > div {
   display: flex;
   align-items: center;
   gap: 1.3rem;
}

.desktopNav > div > a {
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   line-height: 0;
   /* background-color: red; */
   aspect-ratio: 1 / 1;
   width: 3.4rem;
   border-radius: 50%;
   color: var(--1stBlue);
   font-size: 2rem;
   transition: all 0.4s;
}

.desktopNav > div > a:hover {
   color: var(--4thBlue);
   background-color: var(--1stBlue);
}



/* ====== M O B I L E   N A V ====== */
.mobileNav {
   display: none;
   align-items: center;
   justify-content: space-between;
   padding: 1.3rem 5%;
   border-bottom: 0.2rem solid var(--1stBlue);
   background-color: var(--4thBlue);
   position: sticky;
   top: 0;
   z-index: 3;
}

.mobileNav > div:first-child {
   position: relative;
}

.mobileNav > div:first-child > .menuBtn {
   color: var(--1stBlue);
   font-weight: 900;
   font-size: 8.5rem;
   line-height: 8rem;
   display: flex;
   background-color: var(--4thBlue);
   border: none;
}

.mobileNav > div:nth-child(2) {
   display: flex;
   align-items: center;
   gap: 5rem;
}

.mobileNav > div:nth-child(2) > a > .fa-brands {
   font-size: 6rem;
   line-height: 0;
   display: flex;
   color: var(--1stBlue);
}

.mobileNav > div:nth-child(2) > a {
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   line-height: 0;
   /* background-color: red; */
   aspect-ratio: 1 / 1;
   padding: 2.5rem;
   border-radius: 50%;
   color: var(--1stBlue);
   font-size: 2rem;
   transition: all 0.4s;
}

.mobileNav > div:nth-child(2) > a:hover {
   color: var(--4thBlue);
   background-color: var(--1stBlue);
}

.mobileMenu {
   position: absolute;
   list-style-type: none;
   display: none;
   flex-direction: column;
   gap: 2rem;
   background-color: var(--2ndBlue);
   width: 90rem;
   top: 115%;
   left: -90%;
}

.mobileMenu > li {
   border-bottom: 0.4rem solid var(--4thBlue);
}

.mobileMenu a {
   display: flex;
   align-items: center;
   text-decoration: none;
   font-size: 5rem;
   letter-spacing: 0.3rem;
   font-weight: 800;
   color: var(--4thBlue);
   padding: 2rem 0rem 2rem 15rem;
}
/* ===========  E N D   O F   N A V I G A T I O N   B A R  =========== */


/* ======  M A R Q U E E   S E C T I O N */
.marqueeSection {
   margin-top: 8rem;
   overflow: hidden;
   user-select: none;
}

.marqueeSection > div {
   width: fit-content;
}

.servBr {
   display: none;
}

.marqueeDiv {
   display: flex;
   align-items: center;
   /* justify-content: center; */
   gap: 5rem;
   padding: 0 2.5rem;
   animation: marqueeAnime 15s linear infinite;
   white-space: nowrap;
}
@keyframes marqueeAnime {
   0% {translate: 0;}
   100% {translate: -50%;}
}

.marqueeDiv > span {
   flex-shrink: 0;
   color: var(--2ndBlue);
   font-weight: 900;
   font-size: 1.8rem;
   letter-spacing: 0.05rem;
}
/* ======   E N D   O F  M A R Q U E E   S E C T I O N */


/* ====== C A R D   S E C T I O N  ====== */
.cardSection {
   box-shadow: 0 0 1.5rem rgba(165,165,165,0.6), 0 0 4rem var(--4thBlue);
   margin: 4rem auto 0;
   width: 94%;
   padding: 4.5rem 5% 4rem;
   display: grid;
   grid-template-columns: 3.9fr 6.1fr;
   grid-template-rows: 1fr;
   /* font-size: 20px; */
   gap: 3.5rem;
   border-radius: 1.5rem;
   background-image: linear-gradient(white, rgba(255,255,255, 0.85)), url('Images/bookImg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: 0% 100%;
}

.cardSection > div:first-child {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2.5rem;
   padding: 1.5rem 0;
   border-radius: 1.5rem;
   /* background-color: var(--3rdBlue); */
}

.cardSection > div:first-child > h2 {
   font-size: 4.5rem;
   /* line-height: 3.5rem; */
   font-weight: 700;
   letter-spacing: 0.1rem;
   color: var(--1stBlue);
}

.cardSection > div:first-child > ul {
   list-style-type: none;
   /* background-color: var(--3rdBlue); */
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* padding: 20px; */
   border-radius: 2rem;
   gap: 0.7rem;
}

.cardSection > div:first-child > ul > li > a {
   text-decoration: none;
   font-weight: 500;
   font-size: 1.7rem;
   /* line-height: 1.6rem; */
   display: flex;
   align-items: center;
   gap: 0.8rem;
   color: var(--black-color);
   /* background-color: var(--4thBlue); */
   letter-spacing: 0.05rem;
   width: 100%;
   padding: 0.45rem 1.3rem;
   transition: all 0.25s;
}

.cardSection > div:first-child > ul > li > a:hover {
   background-color: var(--black-color);
   color: var(--white-col);
}

.cardSection > div:first-child > ul > li {
   /* padding: 0px 13px; */
   overflow: hidden;
   border-radius: 1.8rem;
   transform: translateX(0);
   /* border: 1.5px solid var(--1stBlue); */
   transition: all 0.5s;
}

.cardSection > div:first-child > ul > li:hover {
   transform: translateX(0.8rem);
}

.cardSection > div:first-child > ul a::before {
   content: '•';
   /* padding: 5px; */
   border-radius: 50%;
   aspect-ratio: 1 / 1;
   font-family: 'Nunito';
   font-weight: 1000;
   font-size: 1.5rem;
   /* line-height: 1.5rem; */
   color: var(--1stBlue);
   line-height: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.25s;
}

.cardSection > div:first-child > ul > li> a:hover::before {
   color: var(--white-col);
}

.cardSection > div:nth-child(2) {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 2rem;
   border-radius: 1rem;
   padding: 1.2rem 0;
   /* background-color: antiquewhite; */
}

.cardSection > div:nth-child(2) > div {
   display: flex;
   border-radius: 1.2rem;
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 1.8rem rgb(124,124,124);
}

.cardSection > div:nth-child(2) > div > img {
   display: flex;
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transform: scale(1);
   transition: all 0.5s;
}

.cardSection > div:nth-child(2) > div:hover > img {
   transform: scale(1.1);
}

.cardSection > div:nth-child(2) > div > img:first-child {
   animation: cardImg1 7s linear infinite;
}
@keyframes cardImg1 {
   0%, 32% {opacity: 1;}
   33%, 96% {opacity: 0;}
   97%, 100% {opacity: 1;}
}

.cardSection > div:nth-child(2) > div > img:nth-child(2) {
   animation: cardImg2 7s linear infinite;
}
@keyframes cardImg2 {
   0%, 32%, 65%, 100% {opacity: 0;}
   33%, 64% {opacity: 1;}
}

.cardSection > div:nth-child(2) > div > img:nth-child(3) {
   animation: cardImg3 7s linear infinite;
}
@keyframes cardImg3 {
   0%, 64%, 97%, 100% {opacity: 0;}
   65%, 96% {opacity: 1;}
}

.cardSection > div:nth-child(2) > div > div {
   position: absolute;
   z-index: 1;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(transparent, transparent, black);
}

.cardSection > div:nth-child(2) > div > div > span {
   position: absolute;
   color: var(--4thBlue);
   background-color: var(--2ndBlue);
   font-size: 1.4rem;
   /* line-height: 1.4rem; */
   font-weight: 900;
   letter-spacing: 0.1rem;
   border-radius: 0.5rem;
   padding: 0.2rem 0.6rem;
   bottom: 6%;
   left: 5%;
   transition: all 0.5s;
}

.cardSection > div:nth-child(2) > div:hover > div > span {
   color: white;
   background-color: rgb(218, 59, 59);
}
/* ====== E N D   O F   C A R D   S E C T I O N  ====== */



/* ====== A B O U T   S E C T I O N  ====== */
.aboutUsSection {
   border-radius: 1.5rem;
   margin: 6rem auto 0;
   width: 94%;
   padding: 3.5rem 10% 4.5rem;
   background-image: linear-gradient(white, 75%, rgba(0,0,0,0.5)), url('Images/bookImg4.png');
   box-shadow: 0 0 1.5rem rgba(165,165,165,0.6), 0 0 4rem var(--4thBlue);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.aboutUsSection > div > h2 {
   margin: 0 auto 1.5rem;
   width: fit-content;
   color: var(--1stBlue);
   font-weight: 700;
   font-size: 4.5rem;
   letter-spacing: 0.1rem;
   line-height: 4rem;
}

.aboutUsSection > div > div {
   background-color: rgba(255,255,255,0.8);
   border-radius: 1.5rem;
   padding: 3rem 3.5rem;
   display: flex;
   gap: 2rem;
   flex-direction: column;
}

.aboutUsSection > div > div > p {
   font-size: 1.7rem;
   font-weight: 500;
   letter-spacing: 0.05rem;
   color: var(--2ndGray);
   text-align: justify;
}

.aboutUsSection > div > div > img {
   width: 12rem;
   align-self: flex-end;
   scale: 1;
   transition: all 0.5s;
}

.aboutUsSection > div > div > img:hover {
   scale: 1.1;
}
/* ====== E N D  O F   A B O U T   S E C T I O N  ====== */



/* ====== P R E S I D E N T   S E C T I O N  ====== */
.presidentSection {
   width: 94%;
   padding: 0px 0%;
   margin: 5rem auto 0;
   border-radius: 1.5rem;
   /* box-shadow: 0 0 15px rgba(165,165,165,0.6), 0 0 40px var(--4thBlue); */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.presidentSection > h2 {
   color: var(--1stBlue);
   font-size: 4rem;
   font-weight: 700;
   margin-bottom: 3rem;
   letter-spacing: 0.1rem;
}

.presidentGrid {
   /* display: grid;
   grid-template-columns: 6.5fr 3.5fr;
   grid-template-rows: auto;
   gap: 55px;
   align-items: center;
   justify-items: center; */
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5rem;
   width: 75%;
}

.presidentGrid > div:nth-child(2) > img {
   width: 100%;
   height: 100%;
   object-position: center;
   object-fit: cover;
   scale: 1;
   transition: all 0.5s;
}

.presidentGrid > div:hover > img {
   scale: 1.1;
}

.presidentGrid > div:nth-child(1) {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.presidentGrid > div:nth-child(1) > h3 {
   font-size: 2.1rem;
   font-weight: 800;
   color: var(--1stGray);
}

.presidentGrid > div:nth-child(1) > p {
   color: var(--3rdGray);
   font-weight: 500;
   font-size: 1.7rem;
   letter-spacing: 0.05rem;
   text-align: justify;
}

.presidentGrid > div:nth-child(2) {
   display: flex;
   overflow: hidden;
   border-radius: 2rem;
   width: 225rem;
   aspect-ratio: 3.7 / 5;
   box-shadow: 0.4rem -0.4rem var(--3rdBlue);
}
/* ====== E N D   O F   P R E S I D E N T   S E C T I O N  ====== */



/* ====== C O N T A C T   U S   S E C T I O N  ====== */
.contactUsSection {
   background-image: linear-gradient(white, rgba(255,255,255,0.8)), url('Images/bookImg3.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   /* border: 2px solid red; */
   border-radius: 1.5rem;
   box-shadow: 0 0 1.5rem rgba(165,165,165,0.8), 0 0 4rem var(--4thBlue);
   width: 94%;
   margin: 7rem auto 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2.5rem;
   padding: 3rem 2rem 4rem;
}

.contactUsSection > h2 {
   color: var(--1stBlue);
   font-size: 4.5rem;
   font-weight: 700;
   letter-spacing: 0.1rem;
}

.contactGrid {
   /* display: flex;
   align-items: center;
   justify-content: center; */
   display: grid;
   grid-template-columns: 4.5fr 5.5fr;
   grid-template-rows: 1fr;
   gap: 2rem;
   width: 80%;
   border-radius: 1.5rem;
   overflow: hidden;
   /* align-items: center; */
   background: white;
}

.contactGrid > div:first-child {
   /* padding: 3.5rem 2.5rem; */
   display: flex;
   flex-direction: column;
   /* border-radius: 15px; */
   align-items: center;
   justify-content: center;
   gap: 3rem;
}

.contactGrid > div:first-child > span {
   color: var(--2ndBlue);
   font-size: 1.8rem;
   font-weight: 700;
   letter-spacing: 0.1rem;
}

.contactGrid > div:first-child > img {
   width: 22rem;
}

.contactD {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   font-size: 1.5rem;
   font-weight: 800;
   letter-spacing: 0.05rem;
   color: var(--1stBlue);
}

.contactGrid > div:nth-child(2) {
   /* background: greenyellow; */
   display: flex;
   justify-content: center;
   align-items: center;
   /* border-radius: 15px; */
   /* padding: 10px 0; */
}

/* ====== S E R V I C E S   S E C T I O N  ====== */
.servesection {
   border-radius: 1.5rem;
   margin: 6rem auto 0;
   width: 94%;
   box-shadow: 0 0 1.5rem rgba(165,165,165,0.6), 0 0 4rem var(--4thBlue);
   padding: 4rem 5% 4.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3rem;
}

.servesection > h2 {
   color: var(--1stBlue);
   font-size: 3rem;
   font-weight: 800;
   letter-spacing: 0.1rem;
}

.servesection > div {
   display: grid;
   grid-template-columns: 7fr 3fr;
   gap: 4rem;
}

.servesection > div > p {
   font-size: 1.8rem;
}

/* .servesection > div > div {
   
} */

.servesection > div > div > img {
   width: 100%;
   height: 100%;
}


form {
   /* background-color: white; */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.5rem;
   width: 80%;
   padding: 2.5rem 4rem 2rem;
   border-radius: 1rem;
}

form > h2 {
   color: var(--2ndBlue);
   font-size: 2.6rem;
   line-height: 3rem;
   font-weight: 800;
   letter-spacing: 0.1rem;
}

form > section {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
}

form > section > div {
   display: flex;
   flex-direction: column;
   /* align-items: center; */
}

/* .col-a {
   width: 35%;
}

.col-b {
   width: 65%;
} */

label {
   color: var(--3rdGray);
   font-size: 1.8rem;
   font-weight: 800;
   letter-spacing: 0.05rem;
}

input, textarea {
   width: 100%;
   border-radius: 1rem;
   font-size: 1.5rem;
   font-weight: 600;
   padding: 0.3rem 1rem;
   letter-spacing: 0.1rem;
   outline: none;
   border: 0.15rem solid var(--2ndBlue);
}

input:focus, textarea:focus {
   border: 0.15rem solid var(--1stRed);
   background-color: beige;
}

textarea {
   height: 15rem;
}

button {
   border: none;
   border-radius: 1rem;
   color: white;
   background-color: var(--1stRed);
   font-size: 1.8rem;
   font-weight: 800;
   letter-spacing: 0.5rem;
   padding: 0.4rem 2.5rem;
   cursor: pointer;
   transition: all 0.5s;
}

button:hover {
   background-color: brown;
}

.hoursAvailable {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.hoursAvailable > h3 {
   color: var(--2ndBlue);
   font-size: 2rem;
   font-weight: 800;
   letter-spacing: 0.1rem; 
}

.hoursAvailable > ul {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
}

.hoursAvailable > ul > li {
   color: var(--2ndBlue);
   font-weight: 700; 
   letter-spacing: 0.05rem; 
}
/* ====== E N D  O F   C O N T A C T   U S   S E C T I O N  ====== */



/* ======   F O O T E R   S E C T I O N   ====== */
footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   background-color: var(--black-color);
   color: var(--white-col);
   font-size: 2rem;
   padding: 3.5rem 0;
   margin-top: 7.5rem;
}

footer > span {
   font-size: 1.6rem;
}

footer > a {
   text-decoration: none;
   font-size: 1.7rem;
   color: var(--white-col);
   font-weight: 800;
}

footer > div:last-child {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

footer > div:last-child span {
   font-size: 1.5rem;
   letter-spacing: 0.1rem;
   font-weight: 700;
}

.hrdiv {
   height: 0.2rem;
   background-color: var(--4thBlue);
   width: 20%;
   margin: 2rem 0 1.5rem;
}

footer img {
   width: 10rem;
}
/* ====== E N D   O F   F O O T E R   S E C T I O N   ====== */


section {
   position: relative;
}

.backToTop {
   position: absolute;
   text-decoration: none;
   border-radius: 0.9rem;
   font-weight: 900;
   letter-spacing: 0.05rem;
   font-size: 1.3rem;
   color: var(--4thBlue);
   background-color: var(--1stBlue);
   padding: 0.4rem 0.8rem;
   bottom: 0.2rem;
   right: 5%;
   margin-bottom: 0.5rem;
   transition: all 0.5s;
}

.backToTop:hover {
   background-color: var(--2ndBlue);
}