/* color patten */
:root {
    --white: #ffffff;
    --orange: #F18063;
    --grayxdark: #37382C34;
    --graydark : #45463619;
    --graylight: #0000000D;
    --graythin: #0000000A;
    --graylshad: #F4F4F4;
    --green: #404134;
    --vegetation: #5CCC95;
    --Shrimp: #F4A664;
}
body{
    color: var(--green);
    font-family: 'Open Sans', sans-serif;
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6{
    color: var(--green);
    font-family: 'Nerko One', cursive;
    font-weight: 400;
}
h1, .h1{
    font-size: 72px;
    line-height: 72px;
    
}
h2, .h2{
    font-size: 60px;
    line-height: 60px;
}
h3, .h3{
    font-size: 20px;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700;
    line-height: 24px;
}
h4, .h4{
    font-size: 48px;
    line-height: 48px;
   
}
h5, .h5{
    font-size: 24px;
   
}
h6, .h6{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 1px;
    color: var(--green);  
    font-family: 'Open Sans', sans-serif !important;
    margin-top: 20px;
    margin-bottom: 60px;
}
.btn-first{
    background-color: var(--vegetation);
    border-radius: 24px;
    border: none !important;
    padding: 14px 30px;
    font-size: 14px;
    font-weight: bold;
    color: var(--white);
}
.btn-first:hover{
    background-color: var(--vegetation);
    color: var(--white);
}
.btn-second{
  padding: 14px 30px;
  border-radius: 24px;
  border: solid 2px var(--orange);
  background-color: var(--white);
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.7px;
  font-weight: bold;
  color: var(--orange);
  translate: all .5s;
}
.btn-second:hover{
    background-color: var(--orange);
    color: var(--white);
}
.span{
    font-size: 16px;
    font-weight: bold;
    color: var(--orange);
    line-height: 32px;
     letter-spacing: 2.88px;
   
}
.cp{
    cursor: pointer;
}
.contact-arrow{
    position: absolute;
    right: 140px;
    bottom: 150px;
}
.contact-arrow img{
    width: 62px;
}
a{
    text-decoration: none;
}
a:hover{
    color: var(--green);
}
/* page design star */
.brand-logo span{
    font-size: 20px;
    letter-spacing: 1px;
   
    font-weight: 800;
    color: var(--green);
}
#dropdownMenuButton1:focus {
    border-color: none !important;
    outline: 0;
    box-shadow:none;
}
.dropdown-lang .form-select
{
    line-height: 2.29;
    font-size: 14px;
    font-weight: bold;
    border: none !important;
    padding: 10px 34px 5px 20px; 
    font-weight: bold;
    background-color: transparent;
}
.dropdown-lang .form-select option{
    font-weight: bold;
    padding: 10px;
}
.hero-section{
    position: relative;
    padding-bottom: 100px;
    z-index: 2;
}
.hero-section::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url(../images/herosection.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}
.mobile-banner{
    object-fit: cover;
}
.hero-section .headeer, .details-page-banner .details-headeer{
    padding-top: 35px;
    padding-left: 140px;
}
.hero-section .headeer .navbar-logo{
    margin-right: 20px;
}
.hero-section .headeer .logo {
    position: relative;
    top: 45px;
    right: 112px;
}
.mobile-logo{
    width: 177px;
    margin-top: 20px;
}
.banner-img-box{
    position: relative;
}

.banner-section{
   
}
.banner-section .h1{
  padding: 30px 0px 60px;
}
.banner-section .span{
  margin-top: 178px ;
  display: block;
  
}
.banner-section .banner-img{
    margin-top: 78px;
}
.form-select{
    border: none;
    border-radius: 0px !important;
    border-bottom: 1px solid  var(--grayxdark) !important;
}
.form-select:focus {
    border-color: none !important;
    outline: 0;
    box-shadow:none;
}
.banner-form{
    background-color: #ffffff;
    padding: 30px;
    box-shadow: 0px 12px 24px #0000000D;
    border-radius: 32px;
    max-width: 586px;
}
.banner-form label,
.popup-search-form label
{
    font-size: 12px;
    color: var(--orange);
    margin-bottom: 0px !important;
}
.banner-form .single-input,
.popup-search-form .single-input
{
    position: relative;
}
.banner-form .single-input i,
.popup-search-form .single-input i
{
    font-size: 16px;
    color: var(--orange);
    position: absolute;
    right: 15px;
    top: 25%;
}
.banner-form input[type="date"]::-webkit-calendar-picker-indicator,
.popup-search-form input[type="date"]::-webkit-calendar-picker-indicator {
   display: none !important;
}

.banner-form .form-select, .banner-form .form-control
{
    margin-bottom: 40px;
    border: none;
    border-radius: 0px !important;
    font-weight: bold;
    opacity: 0.7;
    padding-right: 40px;
    padding-left: 0px;
    border-bottom: 2px solid  var(--grayxdark) !important;
}
.banner-form .form-select *,
.popup-search-form .form-select *{
    background:#edf2ff;
} 
.banner-form .form-select option{
    border-radius: none !important;
    padding: 8px !important;
}
.banner-form .form-control:focus,
.popup-search-form .form-control:focus {
    border-bottom: 2px solid var(--orange) !important;
    outline: 0;
    box-shadow:none;
}

.banner-form .form-control::placeholder,
.popup-search-form .form-control::placeholder{
    font-weight: bold;
    padding: 0px 0px;
}
.banner-form .row {
    --bs-gutter-x: 30px !important;

}

/* popup search from */
.popup-search-form{

    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #ffffff;
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 10px;
    box-shadow: 0px -12px 24px #0000000D;
    width: 85%;
    margin: auto;
    border-radius: 32px 32px 0px 0px;
    z-index: 1;
}
.popup-search-form .container{

}
.popup-search-form .form-select, .popup-search-form .form-control{
    border: none;
    border-radius: 0px !important;
    font-weight: bold;
    opacity: 0.7;
    padding-right: 40px;
    padding-left: 0px;
    border-bottom: 2px solid  var(--grayxdark) !important;
}

/* blog section */
.blog-section{
    padding-top: 100px;
  
}
.blog-section .span{
    line-height: 22px;
}
.blog-section .h2{
   margin-top: 38px;
   margin-bottom: 90px;
}
.blog-section .card{
    box-shadow: 0px 12px 24px #0000000D;
    border-radius: 32px;
    border: none !important;
}
.blog-section .card-body{
    padding: 20px 20px 40px 20px !important;
}
.blog-section .card .sub-title{
 font-size: 14px;
 line-height: 32px;
 letter-spacing: 2.52px;
 font-weight: bold;
 padding-top: 20px;
 padding-bottom: 30px;
 display: block;
}
.blog-section .card .card-list li i,
.blog-section .card .card-list li span{
    font-size: 16px;
    line-height: 32px;
    opacity: 100%;
    color: var(--green);
   
}
.blog-section .card .card-list li i{
    margin-right: 15px;
}
.blog-section .card .h4{
 color: var(--orange);
 margin-top: 20px;
 margin-bottom: 5px;
 line-height: 60px;
 font-weight: bold;
 
}
.blog-section .card-text{
    font-size: 14px;
    line-height: 20px;
    color: var(--green);
    opacity: 0.7;
}
.blog-section .row{
    --bs-gutter-x: 30px !important;
    --bs-gutter-y: 60px !important;
}
.blog-section .row .col:nth-child( odd ){
    margin-top: 30px;
}
.hr{
    background-color: rgba(69, 70, 54, 0.1);
    height: 1px;
    width: 100%;
   
}
.registrationfrom .hr{
    margin-bottom: 30px;
    margin-top: 30px;
}
.blog-section .btn-second{
    margin-top: 63px;
    margin-bottom: 100px;
}
.info-section{
  background-color: var(--graylshad);
  padding: 55px 0px;
 
}
.info-section span{
    font-size: 14px;
    font-weight: bold;
    line-height: 1.36;
    letter-spacing: 2.52px;
    text-align: center;
    color: var(--orange);
    margin-bottom: 20px;
    display: block;
}
.info-section ul li{
    line-height: 30px;
}
.info-section ul li a{
  color: var(--green);
 
}
.city-logo-section{
    position: relative;
    z-index: 2;
    background-color: var(--white);
    padding-top: 100px;
}
.city-logo-section .combined-shape{
    position: absolute;
    top: 46%;
    z-index: 1;
    left: 0;

}
.city-logo-section .circle-rac{
    position: absolute;
    top: 48%;
    z-index: 1;
    right: 141px;
}
.city-logo-section .fa-comment{
    position: relative;
    top: 7px;
    right: 50px;
    font-size: 30px;
    color: var(--white);
}


.footer-section{
    background-color: var(--green);
    padding:24px 142px 23px;
    font-size: 12px;
    text-align: center;
    position: relative;
    z-index: 2;
   
}
.footer-section .footer-logo{
    max-width: 135px;
}
.footer-section ul li a{
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    font-size: 12px;
    line-height: 32px;
    letter-spacing: 2.16px;
}
.footer-section ol, ul, dl {
    margin-top: 0 !important;
    margin-bottom: 0px;
}
.footer-section .mf{
    margin-left: 105px;
}
.footer-section .footer-logo{
    margin-right: 105px;
}


/* --------------------details page-------------------- */
a{
color: var(--green);
}

.price-box h4,
.price-box p{
    color: var(--orange);
}
.details-page-banner{
    padding-bottom: 160px;
    background: url(../images/Background-shape.svg) top center no-repeat;
    background-size: contain;
    position: relative;
}
.details-page-banner .comshap{
    position: fixed;
    top: 770px;
    left: -30px;
}
.back-page-menu i,
.back-page-menu span{
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 2.29;
}

.details-page-banner .details-banner .first-row{
    margin-top: 212px;
 
}
.details-page-banner .pic{
    top: -32px;
    position: relative;
    width: 600px;
    margin-bottom: 50px;

}

.details-banner .first-row h1{
    margin: 30px 0px 30px;
}
.details-page-banner .details-banner .first-row .text{
    line-height: 1.8;
    font-size: 20px; 
    line-height: 36px;
   
}
.details-page-banner .details-banner .first-row .hr{
    margin: 100px 0px 30px;
}
.details-page-banner .first-row .banner-info i{
    color: var(--orange);
    font-size: 16px;
    line-height: 32px;
}
.details-page-banner .first-row .banner-info p{
    margin-bottom: 0px;
}
.details-page-banner .first-row .banner-info p, .banner-info span{
    line-height: 32px;
    margin-left: 15px;
}

/* programm section */
.programm-section{
    background-image: linear-gradient(to left, #fdf1d8, var(--white) );
    padding-bottom: 100px ;
    
}
.program-heading{
    padding-top: 40px;
    position: relative;
}
.programm-section h2{
    position: relative;
    z-index: 2;
}
.program-heading h4{
    padding-top: 12px;
    
}
.shape-title-box h2{
    position: relative;
    z-index: 2;
}
.programm-section .shape-title-box,
.organization-section .shape-title-box{
    position: relative;
}
.programm-section .shape-title-box .shape,
.organization-section .shape-title-box .shape
{
    position: absolute;
    z-index: 1;
    left: -11%;
    top: -17px;
    width: 81px;
}

.Wo-box{
    padding-top: 75px;
    padding-bottom: 30px;
}
.Wo-box p{
    line-height: 30px;
}
.Wo-box h4{
    margin-bottom: 30px;
}
.web-box{
    padding-top: 75px;
}
.web-box ul li{
    margin-right: 30px;
}
.web-box p, 
.web-box ul{
    padding-top: 30px;
  
}
.web-box .single-box{
    position: relative;
}
.web-box .single-box i{
    position: absolute;
   font-size: 18px;
    text-align: center;
    top: 65%;
    right: 56%;
    transform: translate(50%,-50%);
    color: var(--orange);
}
.p-30{
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
}
.p-30::after{
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
    background-color: #ffe7b9;
    height: 1px;
    max-width: 915px;
}
.pl-30{
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
}
.pl-30::after{
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
    background-color: #ffe7b9;
    height: 1px;
    max-width: 915px;
}
.programm-section .fa-circle-info{
    font-weight: bold;
    line-height: 32px;
    color: var(--orange);
    margin-left: 20px;
    cursor: pointer;
}
.web-box li{
    margin-bottom: 20px;

 }
.organization-section{
    padding: 200px 0px 150px;
}
.organization-section ul li{
    line-height: 36px;
    color: var(--green);
}
.organization-section ul li a{
    color: var(--green);
}

.modal-backdrop {
    background-color:#404134;
    opacity: 0.95;
 }
 .modal-backdrop.show {
    background-color:#404134;
    opacity: 0.95;
   
 }
 .program-modal .modal-dialog{
    max-width: 586px;
 }
 .modal-header{
    position: relative;
 }
 .modal-header .btn-close{
    position: absolute;
    right: 0;
    top: 0;
 }
 .modal-content{
    border-radius: 32px !important;
    padding: 15px 30px;
 }
 .program-modal .modal-body p{
    line-height: 30px;
    margin-bottom: 0px !important;
 }
 .modal-content .modal-body,
 .modal-content .modal-header,
 .modal-content .modal-footer,
 .modal-content .modal-hr{
    margin: 15px 0px !important;
    padding: 0px !important;
 }
 .modal-content .modal-footer{
    border-top: 0px;
 }
 .modal-content .modal-header{
    border-bottom: 0px;
 }
 .modal-hr{
    background-color: rgba(69, 70, 54, 0.1);
    height: 1px;
 }
 .number-box{
    position: relative;
 }
 .number-box h2{
    position: relative;
    z-index: 2;
 }
 .number-box img{
    position: absolute;
    z-index: 0;
    left: -25px;
    bottom: -10px;
 }


.registrationfrom .form-control{
    border: none;
    border-bottom: 1px solid rgba(55, 56, 44, 0.2) !important;
    margin-bottom: 40px;
}
.registrationfrom .form-control:focus{
    border-color: none !important;
    outline: 0;
    box-shadow:none;
}
.registrationfrom .form-control::placeholder{
    font-weight: bold;
    line-height: 32px;
    opacity: 70%;
}
.registrationfrom .single-input{
    position: relative;
}
.registrationfrom .single-input i{
    font-size: 16px;
    position: absolute;
    right: 15px;
    top: 25%;
    opacity: 70%;
}
.registrationfrom #fromtextarea{
    border: 1px solid rgba(55, 56, 44, 0.2) !important;
    margin-bottom: 30px !important;
    min-height: 108px;
}
.registrationfrom .nav-tabs{
    border-bottom: none !important;
}
.registrationfrom .nav-tabs .nav-link{
    border: none !important;
    padding: 0px 0px 0px 0px !important;
    margin: 0px 60px 0px 0px !important;
    font-weight: bold;
    letter-spacing: 2.25px;
    font-size: 12px;
}
.registrationfrom .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
    color: var(--orange);
    position: relative;
}
.registrationfrom .nav-link.active::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--orange);
    bottom: -30px;
    right: 0;
    left: 0;
}
.registrationfrom .nav-link{
    color: var(--green);
}
.registrationfrom .check-row{
    margin-top: 10px;
    margin-bottom: 25px;
}
.registrationfrom .form-check{
    margin-bottom: 15px;
}
.registrationfrom .from-price{
    padding-left: 22px;
}
.registrationfrom .from-price span{
  margin-right: 30px;
}
.registrationfrom .form-check-input{
    outline: 1px solid var(--orange);
    border: 4px solid rgba(0, 0, 0, 0.25);
    border-color: var(--white);

}
.form-check-input:checked{
    background-color: var(--orange);
    border-color: var(--white);
    outline: 1px solid var(--orange);
}
.registrationfrom .form-check-input:checked[type=radio]{
    background-image: none !important;
}
.registrationfrom .form-check-input:focus{
    box-shadow: none;
}

.downarrow-box{
    right: 26px;
    bottom: 26px;
    z-index: 21;
}
.downarrow-box .rec{
    width: 48px;
}
.downarrow-box .fa-comment{
    font-size: 23px;
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   z-index: 2;
   color: var(--white);
}
.downarrow-box .fa-arrow-down{
    font-size: 23px;
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
     z-index: 3;
    color: var(--orange);
    font-size: 10px;
}
.hover-address-box{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 417px;
    margin: 0px 64px 50px 0px;
    padding: 25px 20px;
    border-radius: 16px;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.05);
    background-color: var(--white);
    z-index: -1;
    opacity: 0;
    transition: all .5s;
}
.hover-address-box img{
   margin-right: 30px;
   width: 76px;
   height: 98px;
}
.message-hover{
    cursor: pointer;
}
.message-hover .rotedbox{
    position: fixed;
    right: 50px;
    bottom: 48px;
    transition: all .5s;
}
.message-hover:hover .rotedbox{
    transform: rotate(260deg);
}



.hover-address-box h5{
    font-size:23px;
}
.hover-address-box .span{
    font-size: 13px;
}
.hover-address-box ul li{
    line-height: 30px;
}
.mb-20{
    margin-bottom: 20px;
}
.m-30{
    margin-top: 30px;
    margin-bottom: 30px;
}
.mb-60{
    margin-bottom: 60px;
}
.contact-footer-arrow{
    margin-bottom: -23px;
}
.contact-footer-arrow img{
    width: 48px;
}
@media (min-width: 768px){ 
    .modal-dialog {
        max-width: 760px;
        margin: 1.75rem auto;
    }
}

@media (max-width: 600px){ 
    .program-modal .modal-dialog {
        max-width: 100% !important;
    }
}