:root{
--container:100%;
--container-padding:0 120px;
--header-bg:linear-gradient(180deg, rgba(0, 89, 61, 0.9) 44.7%, rgba(1, 95, 65, 0) 100%);
--body-font:"DM Sans", sans-serif;
--heading-font:"Playfair Display", serif;
--white:#FFFFFF;
--black:#000000;
--dark-green:#00542B;
--slate-gray:#5B6864;
--forest-dark: #21302B;
}
/**==================================================================**/
body{margin:0; padding:0; font-family:var(--body-font)}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-family:var(--heading-font)}
p{margin:0; padding:0;}
ol,ul{margin:0; padding:0; list-style:none;}
figure{margin:0; padding:0;}
body .container{max-width:var(--container); width:100%; padding:var(--container-padding)}
/**==================================================================**/
.header-section { padding:30px 0; position: absolute; left: 0; right: 0; top: 0; z-index:1040 }
.header-section:after { content: ""; position: absolute; left: 0; right: 0; top: 0; background: var(--header-bg); height: 160px; z-index: -1039; }
.header-section .navbar { padding: 0; position: relative; padding-right: 250px; }
.header-section .navbar .navbar-brand { padding:0;/* position:absolute; left:0; top:-27px; */ }
.header-section .navbar ul.navbar-nav { gap:45px; }
.header-section .navbar ul.navbar-nav li a { text-decoration: none; border-radius: 4px; position: relative; overflow: hidden; transition: 0.4s; color: var(--white); font-size: 20px; padding:6px 10px; }
.header-section .navbar ul.navbar-nav li a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2); opacity: 0; border-radius: 8px; transform: scale(0); transition: all 0.4s; }
.header-section .navbar ul.navbar-nav li a:hover:before { opacity: 1; transform: scale(1); }
.navbar-nav-btn { display: flex; gap: 15px; }
.navbar-nav-btn li a { background: rgb(216 233 228 / 10%); padding: 10px 24px; color: var(--white); text-decoration: none; border-radius: 100px; border: 1px solid rgb(255 255 255 / 15%); height: 48px; display: flex; align-items: center; justify-content: center; transition: 0.4s;}
.navbar-nav-btn li a:hover{background:var(--white); color:#1B6B51}
.formations_dropdown .sub-menu:after{content:"";position:absolute;inset:0;padding:1px;border-radius:10px;background:linear-gradient(219.36deg,#ffffffb3,#ffffff12,#fff0,#ffffffb3);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.formations_dropdown .sub-menu{background-color:#FFFFFF1A;border:none;padding:10px;display:none; position: absolute; top:48px; z-index: 9; border-radius: 4px; overflow: hidden; margin: 0;}
.formations_dropdown:hover .sub-menu{display:block}
.formations_dropdown>a{position:relative;}
.formations_dropdown>a:after { content: ""; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); width: 15px; height: 15px; background-size: 13px; background-repeat: no-repeat; background-position: center; right: -10px; top: 14px; }
.header-section .navbar .formations_dropdown .dropdown-menu li a{font-size:18px ; width: 100%}
.formations_dropdown .sub-menu li a:hover{background:transparent}
.header-button-profile { position: absolute; right: 0; top: 32px; }
.header-button-profile ul { display: flex; gap: 32px; }
.header-button-icon { background: transparent; border: none; outline: inherit; box-shadow: inherit; }
.hero-section { background-size: cover; background-repeat: no-repeat; background-position: top center; display: flex; align-items: center; padding-top:150px; }
.hero-content { max-width: 720px; width: 100%; }
.hero-content h1 { font-size: 70px; color: var(--white); font-weight: 500; }
.hero-content p { font-size: 22px; color: var(--white); opacity: 0.9; font-weight: 300; }
.hero_contact_btn {background-color: var(--white);color: var(--dark-green);border: none;padding: 23px 10px;border-radius: 10px 0 0px 10px;font-size: 22px;font-weight: 500;transition: all 0.4s;position: fixed;writing-mode: sideways-lr;right: 0;z-index: 9;}
.btn-regular { display: inline-flex; align-items: center; gap: 15px; background-color: var(--white); padding: 10px 20px; border-radius: 100px; position: relative; padding-right: 60px; height:54px; line-height: normal; color:var(--dark-green); text-decoration:none; font-size:18px; font-weight:500; }
.button-icon-wrapper { flex-shrink: 0; width: 36px; height: 36px; background-color:var(--dark-green); border-radius: 50%; display: flex; justify-content: center; overflow: hidden; position: absolute; right: 10px; }
/* .button-icon-wrapper img { position: absolute; width: 15px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin: auto; inset: 0; } */
.icon-no {opacity: 1; transform: translateX(0);}
.icon-hover {opacity: 0; transform: translateX(-12px);}
.btn-regular:hover .icon-no { opacity: 0; transform: translateX(12px);}
.btn-regular:hover .icon-hover { opacity: 1; transform: translateX(0);}
.green-opacity .button-icon-wrapper { background: rgba(255, 255, 255, 0.1); }
.btn-regular.green-opacity {position: relative; color: #fff; background: rgba(255, 255, 255, 0.1); border-radius: 100px; z-index: 0;}
/* Gradient Border */
.btn-regular.green-opacity::before {content:""; position:absolute; inset:0; padding:1px; border-radius: 100px; background: linear-gradient(219.36deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;}
.green-btn{background-color:var(--dark-green);color:var(--white)}
.green-btn .button-icon-wrapper{background:var(--white)}
.button-icon-wrapper span{background-repeat: no-repeat; background-size: contain; display: flex; align-items: center; justify-content: center; background-position: center; position: absolute; width: 15px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin: auto; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.75 6.58333H12.4167M12.4167 6.58333L6.58333 0.75M12.4167 6.58333L6.58333 12.4167' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; }
.green-btn .button-icon-wrapper span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.75 6.58333H12.4167M12.4167 6.58333L6.58333 0.75M12.4167 6.58333L6.58333 12.4167' stroke='%2300542B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section-column-gap { gap: 120px; padding: 120px 0; }
.section-gap-box{gap:40px;}
.section-box-content h2 { font-size: 64px; color: var(--dark-green); line-height: 1; }
.section-box-content p { color: var(--slate-gray); font-size: 22px; font-weight:300 }
/* Circle container */
.circle {
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
animation: rotate 15s linear infinite;
bottom: 0;
left: -80px;
bottom: -80px;
}
/* Text styling */
.circle span {
position: absolute;
left: 50%;
top: 50%;
transform-origin: 0 0;
font-size: 15px;
color:var(--black);
white-space: pre;
text-transform:uppercase
}
/* Rotation animation */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.accordion.service-accordion { display: flex; flex-direction: column; gap: 20px; }
.accordion.service-accordion .accordion-item { border: none; padding: 0 0 20px; background: var(--white); cursor: pointer; border-bottom: 1px solid #B6C4BDBF; border-radius: 0; display: flex; flex-direction: column; gap: 20px; }
.service-accordion .accordion-header.accordion-button{padding:0; background-color:transparent; border:none; font-size:40px; box-shadow:none; font-weight:500; color:var(--dark-green); font-family:var(--heading-font); }
.service-accordion .accordion-header.accordion-button:after{width: 40px; height: 40px; background-color: var(--dark-green); border: 1px solid var(--dark-green); border-radius: 50%; display: flex; overflow: hidden; align-items: center; justify-content: center; background-position: center; background-image: url('data:image/svg+xml;utf8,'); background-size: 16px; }
.service-accordion .accordion-header.accordion-button.collapsed:after { background-color: var(--white);border: 1px solid #B6C4BD80; background-image: url('data:image/svg+xml;utf8,'); }
.section-arrow-list ul { display: flex; flex-direction: column; gap: 20px; }
.section-arrow-list ul li { color: var(--slate-gray); font-size: 22px; font-weight: 400; padding-left: 50px; position: relative; }
.section-arrow-list ul li:before { content: ""; position: absolute; background-image: url(../images/Checked.svg); background-repeat: no-repeat; background-position: top center; left: 0; top: 3px; width: 30px; height: 30px; }
.whoweare-wrapper { padding: 40px 64px 64px 120px; height: 100%; }
.whoweare-figure { height: 430px; position: relative; margin-bottom:15px}
.whoweare-figure .front-figure { width: 55%; height: 100%; transform: scaleX(-1); }
.arrowCurve-figure { position: absolute; left: 55%; top:31%; }
.servicesBlockList { height: 100%;position:relative; padding:64px; display:flex; flex-direction:column; background-size:cover; background-position:center}
.servicesBlockList figure { height: 100%; margin: 0; width: 100%; position:relative;}
.servicesBlockList:after { content: ""; background: linear-gradient(145.65deg, rgba(1, 61, 42, 0.8) 12.85%, rgba(17, 98, 72, 0) 53.73%), linear-gradient(180deg, rgba(0, 0, 0, 0) 71.54%, #000000 98.49%), linear-gradient(166.38deg, rgba(5, 49, 36, 0) 42.29%, #011C14 92.31%); position: absolute; inset: 0; z-index: 1; }
.servicesBlockList figure img { width: 100%; height: 100%; object-fit: cover; }
.servicesHeadingBlock { color:var(--white); font-family:var(--heading-font); font-size: 64px; text-transform: capitalize; line-height: normal; }
.servicesListing ul { display: flex; flex-wrap: wrap; gap: 24px 0; }
.servicesListing ul li { position: relative; padding-left: 60px; font-family: var(--heading-font); color: var(--white); font-size: 28px; flex: 0 0 50%; }
.servicesListing ul li:before { content: ""; background-image: url(../images/WhiteChecked.svg); position: absolute; left: 0; top: 4px; width: 37px; height: 34px; background-repeat: no-repeat; }
.recent-news-item { border-top: 1px solid #DEEDE9; padding: 15px 0; }
.recent-news-item a { display: flex; flex-wrap: wrap; gap: 40px; text-decoration:none; padding:32px; transition:all 0.7s}
.recent-news-item a:hover { background: rgba(1, 95, 65, 0.08); border-radius: 10px; }
.news-post-link { margin-left: auto; align-self: center; }
.news-post-date {flex: 0 0 96px; height: 96px; border: 1px solid #DEEDE9; background:var(--white); border-radius: 10px; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.date-show { font-weight: 600; color: var(--black); font-size: 32px; }
.month-show { color: rgba(91, 104, 100, 0.7); font-size: 18px; line-height: normal; }
.news-post-content { display: flex; gap: 10px; flex-direction: column; align-self:center }
.news-post-content h3 { color: var(--forest-dark); line-height:1 }
.news-post-content p { color: var(--slate-gray); font-size: 22px; }
.btn-regular.green-text-opacity { position: relative; color:var(--dark-green); background: rgba(1, 95, 65, 0.08); border-radius: 100px; z-index: 0;}
.btn-regular.green-text-opacity:before { content: ""; position: absolute; inset: 0; padding: 1px; /* border thickness */ border-radius: inherit; background: linear-gradient( 99.35deg, rgba(1, 95, 65, 0.2) -7.52%, rgba(1, 95, 65, 0.02) 22.85%, rgba(1, 95, 65, 0) 74.89%, rgba(1, 95, 65, 0.2) 110.55% ); /* creates border effect */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; }
.green-opacity .button-icon-wrapper { background: rgba(255, 255, 255, 0.1); }
.faq-section-background { background: #EDF8F5; padding: 80px; border-radius: 16px; }
.accordion.faq-accordion { display: flex; flex-direction: column; gap: 20px; }
.accordion.faq-accordion .accordion-item { border: none; padding: 0 0 20px; background: transparent; cursor: pointer; border-bottom: 1px solid #B6C4BDBF; border-radius: 0; display: flex; flex-direction: column; gap: 20px; padding-right: 60px; }
.accordion.faq-accordion .accordion-item:last-child{border:none}
.faq-accordion .accordion-header.accordion-button{padding:0; background-color:transparent; border:none; font-size:26px; box-shadow:none; font-weight:500; color:var(--dark-green); font-family:var(--heading-font); }
.faq-accordion .accordion-header.accordion-button:after { width: 40px; height: 40px; background-color: var(--dark-green); border: 1px solid var(--dark-green); border-radius: 50%; display: flex; overflow: hidden; align-items: center; justify-content: center; background-position: center; background-image: url('data:image/svg+xml;utf8,'); background-size: 16px; position: absolute; right: -60px; top: 5px; }
.faq-accordion .accordion-header.accordion-button.collapsed:after { background-color: var(--white);border: 1px solid #B6C4BD80; background-image: url('data:image/svg+xml;utf8,'); }
.faq-section .section-box-content p { font-size: 20px; }
.footer-section { background: linear-gradient(90.36deg, #1B6B51 0%, #00553A 106.9%); }
.footer-professional-support { padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.footer-navigation-section { padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.footer-contact-section { padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.footer-support-block h2 { font-size: 56px; color: var(--white); }
.footer-about-content p { color: var(--white); font-size: 20px; }
.footer-social-icon a { display: inline-flex; background: rgba(255, 255, 255, 0.1); width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.1); }
.footer-heading { font-size: 22px; color: var(--white); font-weight: 600; }
.footer-nav-link ul { display: flex; flex-direction: column; gap:10px; }
.footer-nav-link li a { font-size: 20px; color: var(--white); font-weight: 300; text-decoration: none; }
.gap-24{gap:24px}
.subscribe-form-input input[type="text"], .subscribe-form-input input[type="email"] { background: #FFFFFF1A; border: none; height: 48px; width: 100%; border-radius: 100px; padding: 0 23px; outline:inherit; box-shadow:inherit; color:var(--white) }
.footer-subscribe-box p { color: rgba(255, 255, 255, 0.8); font-size: 20px; }
.footer-contact-icon { display: inline-flex; background: rgba(255, 255, 255, 0.1); width: 80px; height: 80px; align-items: center; justify-content: center; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.1); flex:0 0 80px }
.footer-Contact-block { display: flex; gap: 15px; align-items: center; }
.footer-contact-label { color: rgba(255, 255, 255, 0.8); font-size: 17px; }
.footer-contact-info { font-size: 20px; font-weight: 600; color: var(--white); }
.copyright-text { color: var(--white); font-size: 20px; }
.footer-nav-bottom ul li a { color: var(--white); font-size: 20px; text-decoration:none}
.footer-nav-bottom ul { display: flex; justify-content: end; gap: 30px; }
.footer-copyright { padding: 30px 0; }
.subscribe-form-input input::placeholder {color:rgba(255, 255, 255, 0.5);}
.subscribe-form-input input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.5);}
.subscribe-form-input input:-ms-input-placeholder {color:rgba(255, 255, 255, 0.5);}
.subscribe-form-input input::-ms-input-placeholder {color: rgba(255, 255, 255, 0.5);}
.header-section .navbar-toggler { background: transparent; border: none; padding: 0; box-shadow: inherit; outline: inherit; }
.subscribe-form-input .btn-regular{width: 100%}
.subscribe-form-input .btn-regular input[type="submit"] { position: absolute; left: 0; width: 100%; height: 100%; top: 0; border-radius: 100px; border: none; background: transparent; text-align: left; padding: 0 20px; padding-right: 60px; }
.subscribe-form-input .btn-regular .button-icon-wrapper {
top: 10px;
}
.footer-subscribe-form form {
display: flex;
flex-direction: column;
gap: 24px;
}
@media(max-width:1199px) {
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.section-arrow-list ul li{font-size:18px}
.circle{display:none}
.header-section .navbar-collapse{background-color:#1a9d74;border-radius:10px;padding:13px;margin-top:10px}
.header-section .navbar ul.navbar-nav{gap:13px}
.header-section .navbar ul.navbar-nav li a{font-size:16px}
.footer-logo img{max-width:45%}
}
@media(min-width:1201px) and ( max-width:1600px ){
:root{
--container-padding: 0 50px;
}
.header-section .navbar .navbar-brand { width: 300px; }
.header-section .navbar { padding-right: 200px; }
.header-section .navbar ul.navbar-nav { gap: 25px; }
.header-button-profile { top: 22px; }
.whoweare-wrapper, .servicesBlockList{padding:40px 50px}
.servicesListing ul li { font-size:20px; padding-left: 40px; }
.servicesListing ul li:before { background-size:30px; width: 30px; height: 30px; }
.hero-content h1 { font-size:50px; }
.hero-content p, .section-box-content p, .news-post-content p, .faq-section .section-box-content p, .footer-about-content p, .footer-nav-link li a, .section-arrow-list ul li, .copyright-text, .footer-nav-bottom ul li a, .footer-contact-info, .footer-subscribe-box p{ font-size: 18px;}
.section-box-content h2, .footer-support-block h2, .servicesHeadingBlock { font-size: 40px;}
.service-accordion .accordion-header.accordion-button{font-size:30px}
.footer-contact-icon { width: 60px; height: 60px; flex: 0 0 60px; }
.faq-section-background {padding: 50px;}
.circle {left: -47px;}
}
@media(min-width:768px) and ( max-width:1199px ){
:root {
--container-padding: 0 40px;
}
.whoweare-wrapper, .servicesBlockList{padding:40px 40px}
.header-section .navbar { padding-right: 0; }
.header-button-profile ul { gap: 15px; }
.header-button-profile { right: 46px; top: 2px; }
.header-section .navbar .navbar-brand { width: 170px; }
.header-button-icon img { width: 17px; }
.recent-news-item a{position:relative;}
.news-post-link { position: absolute; top: 40px; right: 20px; }
.recent-news-item a{padding:20px}
.hero-content h1 { font-size: 36px; }
.hero-content p, .section-box-content p, .news-post-content p, .faq-section .section-box-content p, .footer-about-content p, .footer-nav-link li a{ font-size: 16px;}
.section-box-content h2, .footer-support-block h2 { font-size: 30px;}
.service-accordion .accordion-header.accordion-button{font-size:24px;}
.section-column-gap { gap: 50px; padding: 50px 0; }
.whoweare-wrapper, .servicesBlockList, .faq-section-background{padding:40px 20px}
.servicesHeadingBlock { font-size: 30px; padding: 0 0 60px; }
.servicesListing ul li { flex: 0 0 100%; font-size:20px; padding-left: 40px; }
.servicesListing ul li:before { background-size: 30px; width: 30px; height: 30px; }
.servicesListing ul { gap: 15px 0; }
.copyright-text, .footer-nav-bottom ul li a {font-size: 16px;}
}
@media(max-width:767px){
:root{
--container-padding: 0 15px;
}
.hero-section {padding-top: 80px;}
.hero-content h1 { font-size: 36px; }
.hero-content p, .section-box-content p, .news-post-content p, .faq-section .section-box-content p, .footer-about-content p, .footer-nav-link li a{ font-size: 16px;}
.section-column-gap { gap: 50px; padding: 50px 0; }
.section-box-content h2, .footer-support-block h2 { font-size: 30px;}
.service-accordion .accordion-header.accordion-button{font-size:24px;}
.service-accordion .accordion-header.accordion-button:after, .faq-accordion .accordion-header.accordion-button:after { width: 30px; height: 30px;}
.section-arrow-list ul li:before { background-size: 20px; width: 20px; height: 20px; }
.section-arrow-list ul li { font-size: 16px; padding-left: 35px;}
.circle, .arrowCurve-figure{display:none}
.whoweare-wrapper, .servicesBlockList, .faq-section-background{padding:40px 15px}
.whoweare-figure{height:auto;}
.whoweare-figure .front-figure{height:auto; width:100%}
.servicesHeadingBlock { font-size: 30px; padding: 0 0 60px; }
.servicesListing ul li { flex: 0 0 100%; font-size: 16px; padding-left: 40px; }
.servicesListing ul li:before { background-size: 20px; width: 20px; height: 20px; }
.servicesListing ul { gap: 15px 0; }
.recent-news-item a{position:relative;}
.news-post-link { position: absolute; top: 40px; right: 20px; }
.recent-news-item a { padding: 16px; }
.footer-heading { font-size: 20px; line-height: normal; }
.faq-accordion .accordion-header.accordion-button{font-size:20px}
.footer-contact-info { font-size: 16px;}
.footer-contact-icon { width: 50px; height: 50px; flex: 0 0 50px; }
.footer-contact-icon img { width: 20px; }
.copyright-text, .footer-nav-bottom ul li a {font-size: 16px; }
.footer-nav-bottom ul { justify-content: center; gap: 20px; }
.header-section .navbar { padding-right: 0; }
.header-button-profile ul { gap: 15px; }
.header-button-profile { right: 46px; top: 2px; }
.header-section .navbar .navbar-brand { width: 170px; }
.header-button-icon img { width: 17px; }
.btn-regular{padding:8px 17px;padding-right:49px;height:44px;font-size:16px}
.button-icon-wrapper{width:31px;height:31px}
.section-arrow-list ul{gap:14px}
.section-arrow-list ul li{font-size:16px}
.section-gap-box{gap:20px}
.footer-logo img{max-width:90%}
.footer-contact-section{padding:20px 0}
.hero_contact_btn {padding: 16px 6px;font-size: 16px;}
.header-section .navbar .formations_dropdown .dropdown-menu li a {font-size: 14px;}
.formations_dropdown .dropdown-menu {margin-top: 10px;}
}