/**
 * Odo Elements Frontend CSS
 *
 * @package Odo_Elements
 */

 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700');
 
 /* ============================================
	Button Element Styles
	============================================ */
 
 .odo-button {
	 display: inline-block;
	 padding: 12px 24px;
	 font-size: 16px;
	 font-weight: 600;
	 text-align: center;
	 text-decoration: none;
	 border: 2px solid transparent;
	 border-radius: 4px;
	 cursor: pointer;
	 transition: all 0.3s ease;
	 line-height: 1.5;
	 box-sizing: border-box;
 }
 
 .odo-button:hover {
	 text-decoration: none;
	 transform: translateY(-2px);
	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .odo-button:active {
	 transform: translateY(0);
	 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* Button Sizes */
 .odo-button--small {
	 padding: 8px 16px;
	 font-size: 14px;
 }
 
 .odo-button--medium {
	 padding: 12px 24px;
	 font-size: 16px;
 }
 
 .odo-button--large {
	 padding: 16px 32px;
	 font-size: 18px;
 }
 
 /* Button Styles */
 .odo-button--default {
	 background-color: #f0f0f0;
	 color: #333;
	 border-color: #ddd;
 }
 
 .odo-button--default:hover {
	 background-color: #e0e0e0;
	 border-color: #ccc;
 }
 
 .odo-button--primary {
	 background-color: #0073aa;
	 color: #fff;
	 border-color: #0073aa;
 }
 
 .odo-button--primary:hover {
	 background-color: #005a87;
	 border-color: #005a87;
	 color: #fff;
 }
 
 .odo-button--secondary {
	 background-color: #6c757d;
	 color: #fff;
	 border-color: #6c757d;
 }
 
 .odo-button--secondary:hover {
	 background-color: #5a6268;
	 border-color: #5a6268;
	 color: #fff;
 }
 
 .odo-button--success {
	 background-color: #28a745;
	 color: #fff;
	 border-color: #28a745;
 }
 
 .odo-button--success:hover {
	 background-color: #218838;
	 border-color: #218838;
	 color: #fff;
 }
 
 .odo-button--warning {
	 background-color: #ffc107;
	 color: #212529;
	 border-color: #ffc107;
 }
 
 .odo-button--warning:hover {
	 background-color: #e0a800;
	 border-color: #e0a800;
	 color: #212529;
 }
 
 .odo-button--danger {
	 background-color: #dc3545;
	 color: #fff;
	 border-color: #dc3545;
 }
 
 .odo-button--danger:hover {
	 background-color: #c82333;
	 border-color: #c82333;
	 color: #fff;
 }
 
 /* Full Width Button */
 .odo-button--full-width {
	 display: block;
	 width: 100%;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
	 .odo-button {
		 padding: 10px 20px;
		 font-size: 15px;
	 }
	 
	 .odo-button--small {
		 padding: 7px 14px;
		 font-size: 13px;
	 }
	 
	 .odo-button--large {
		 padding: 14px 28px;
		 font-size: 17px;
	 }
 }
 
 /* ============================================
	Counter Element Styles
	============================================ */
 
 .odo-counter-wrap {
	 width: 100%;
	 display: block;
	 position: relative;
 }
 
 .odo-counter-items {
	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
	 margin: 0;
	 padding: 0;
 }
 
 .odo-counter-item {
	 flex: 1 1 auto;
	 min-width: 0;
	 height: 100%;
	 text-align: center;
	 position: relative;
	 transition: all 0.3s ease;
	 box-sizing: border-box;
 }
 
 .odo-counter-item i {
	 vertical-align: middle;
	 display: block;
	 margin-bottom: 15px;
	 transition: color 0.3s ease;
 }
 
 .odo-counter-number {
	 font-size: 40px;
	 padding: 0;
	 font-weight: bold;
	 margin: 10px 0;
	 line-height: 1.2;
	 transition: color 0.3s ease;
 }
 
 .odo-counter-item span {
	 width: 60px;
	 height: 2px;
	 display: block;
	 margin: 15px auto;
	 transition: background-color 0.3s ease;
 }
 
 .odo-counter-text {
	 margin: 0;
	 padding: 10px;
	 font-family: 'Open Sans', sans-serif;
	 transition: color 0.3s ease;
 }
 
 .odo-counter-item:hover i,
 .odo-counter-item:hover .odo-counter-number,
 .odo-counter-item:hover .odo-counter-text {
	 opacity: 1;
 }
 
 .odo-counter-item:hover span {
	 opacity: 1;
 }
 
 /* Responsive Counter */
 @media (max-width: 786px) {
	 .odo-counter-items[data-columns="1"] .odo-counter-item {
		 flex: 0 0 100%;
		 width: 100%;
	 }
	 
	 .odo-counter-items[data-columns="2"] .odo-counter-item {
		 flex: 0 0 50%;
		 width: 50%;
	 }
	 
	 .odo-counter-items[data-columns="3"] .odo-counter-item {
		 flex: 0 0 33.333%;
		 width: 33.333%;
	 }
	 
	 .odo-counter-items[data-columns="4"] .odo-counter-item {
		 flex: 0 0 25%;
		 width: 25%;
	 }
 }
 
 @media (max-width: 768px) {
	 .odo-counter-item {
		 padding: 40px 20px !important;
	 }
	 
	 .odo-counter-item i {
		 font-size: 40px !important;
		 margin-bottom: 10px;
	 }
	 
	 .odo-counter-number {
		 font-size: 32px !important;
	 }
	 
	 .odo-counter-text {
		 font-size: 16px !important;
		 padding: 8px;
	 }
 }
 
 @media (max-width: 480px) {
	 .odo-counter-items[data-columns="2"] .odo-counter-item,
	 .odo-counter-items[data-columns="3"] .odo-counter-item,
	 .odo-counter-items[data-columns="4"] .odo-counter-item {
		 flex: 0 0 100%;
		 width: 100%;
	 }
 }
 
 /* ============================================
	About Me Element Styles
	============================================ */
 
 .odo-about-me * {
	 font-family: Nunito, sans-serif;
 }
 
 .odo-about-me .responsive-container-block {
	 min-height: 75px;
	 height: fit-content;
	 width: 100%;
	 padding: 10px;
	 display: flex;
	 flex-wrap: wrap;
	 margin: 0 auto;
	 justify-content: flex-start;
 }
 
 .odo-about-me a {
	 text-decoration: none;
 }
 
 .odo-about-me .text-blk {
	 margin: 0;
	 padding: 10px;
	 line-height: 25px;
 }
 
 .odo-about-me .responsive-container-block.bigContainer {
	 padding: var(--odo-container-padding-top, 0) var(--odo-container-padding-right, 0) var(--odo-container-padding-bottom, 0) var(--odo-container-padding-left, 0);
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 width: 100% !important;
	 max-width: 100% !important;
	 margin: 0 !important;
 }
 
 .odo-about-me .mainImg {
	 width: 100%;
	 height: auto;
	 border-radius: 20px;
 }
 
 .odo-about-me .text-blk.headingText {
	 font-size: var(--odo-heading-font-size, 28px);
	 font-family: var(--odo-heading-font-family, Nunito, sans-serif);
	 font-weight: var(--odo-heading-font-weight, 700);
	 line-height: 36px;
	 color: var(--odo-heading-color, rgb(176, 98, 255));
	 padding: 0 10px 0 0;
	 margin: 0 0 8px 0;
 }
 
 .odo-about-me .allText {
	 padding: 0;
	 width: var(--odo-text-width, 40%);
	 margin: 0;
 }
 
 .odo-about-me .text-blk.subHeadingText {
	 color: var(--odo-subheading-color, rgb(102, 102, 102));
	 font-size: var(--odo-subheading-font-size, 34px);
	 font-family: var(--odo-subheading-font-family, Nunito, sans-serif);
	 font-weight: var(--odo-subheading-font-weight, 700);
	 line-height: 42px;
	 margin: 0 0 20px 0;
	 padding: 0 10px 0 0;
 }
 
 /* Açıklama metni - TÜM paragraflar için geçerli */
 .odo-about-me .allText.bottomText .odo-description-text,
 .odo-about-me .allText.bottomText .odo-description-text p {
	 font-size: var(--odo-description-font-size, 22px) !important;
	 font-family: var(--odo-description-font-family, Nunito, sans-serif) !important;
	 font-weight: var(--odo-description-font-weight, 400) !important;
	 line-height: 32px !important;
	 color: var(--odo-description-color, rgb(102, 102, 102)) !important;
	 margin: 0 0 15px 0 !important;
	 padding: 0 10px 0 0 !important;
 }
 
 .odo-about-me .allText.bottomText .odo-description-text p:last-child {
	 margin-bottom: 10px !important;
 }
 
 .odo-about-me .explore {
	 font-size: var(--odo-button-font-size, 20px);
	 font-family: var(--odo-button-font-family, Nunito, sans-serif);
	 font-weight: var(--odo-button-font-weight, 600);
	 line-height: 32px;
	 color: var(--odo-description-color, rgb(102, 102, 102));
	 border: 2px solid var(--odo-button-border-color, rgb(102, 102, 102));
	 border-radius: 50px;
	 cursor: pointer;
	 background-color: white;
	 margin: 0;
	 padding: 14px 50px;
	 display: inline-block;
	 transition: all 0.3s ease;
 }
 
 .odo-about-me .explore:hover {
	 background-color: var(--odo-button-hover-bg, rgb(176, 98, 255));
	 color: white;
	 border: none;
 }
 
.odo-about-me .responsive-container-block.Container {
	 margin: 80px 0 50px 0;
	 justify-content: space-between;
	 align-items: center;
	 max-width: 100%;
	 width: 100%;
	 padding: 0;
}
 
.odo-about-me .responsive-container-block.Container.bottomContainer {
	 flex-direction: row-reverse;
	 margin: 80px 0 50px 0;
	 position: static;
	 justify-content: space-between;
	 width: 100%;
}
 
 .odo-about-me .allText.aboveText {
	 margin: 0 0 0 40px;
 }
 
 .odo-about-me .allText.bottomText {
	 margin: 0 40px 0 0;
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 justify-content: flex-start;
	 padding: 0 15px 0 0;
 }
 
 .odo-about-me .purpleBox {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 max-width: 500px;
	 background-color: var(--odo-purple-box-bg, rgb(176, 98, 255));
	 padding: 25px;
	 border-radius: 15px;
	 position: absolute;
	 bottom: -35px;
	 left: -8%;
 }
 
 .odo-about-me .purpleText {
	 font-size: var(--odo-purple-text-font-size, 20px);
	 font-family: var(--odo-purple-text-font-family, Nunito, sans-serif);
	 font-weight: var(--odo-purple-text-font-weight, 400);
	 line-height: 30px;
	 color: var(--odo-purple-text-color, white);
	 margin: 0 0 12px 0;
 }
 
 .odo-about-me .ultimateImg {
	 width: var(--odo-image-width, 50%);
	 position: relative;
 }
 
 /* Responsive Styles */
 @media (max-width: 1024px) {
	 .odo-about-me .responsive-container-block.Container {
		 max-width: 100%;
		 width: 100%;
	 }
 
	 .odo-about-me .mainImg {
		 width: 55%;
		 height: auto;
	 }
 
	 .odo-about-me .allText {
		 width: var(--odo-text-width, 40%);
		 margin: 0 0 0 20px;
	 }
 
	 .odo-about-me .responsive-container-block.bigContainer {
		 padding: var(--odo-container-padding-top, 0) var(--odo-container-padding-right, 0) var(--odo-container-padding-bottom, 0) var(--odo-container-padding-left, 0);
	 }
 
	 .odo-about-me .responsive-container-block.Container.bottomContainer {
		 margin: 80px 0 50px 0;
	 }
 
	 .odo-about-me .allText.aboveText {
		 margin: 30px 0 0 40px;
	 }
 
	 .odo-about-me .allText.bottomText {
		 margin: 30px 40px 0 0;
		 text-align: left;
	 }
 
	 .odo-about-me .text-blk.headingText {
		 text-align: center;
	 }
 
	 .odo-about-me .allText.aboveText {
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 margin: 30px 0 0 0;
	 }
 
	 .odo-about-me .text-blk.subHeadingText {
		 text-align: left;
		 font-size: 32px;
		 line-height: 40px;
	 }
 
	 .odo-about-me .allText.bottomText .odo-description-text,
	 .odo-about-me .allText.bottomText .odo-description-text p {
		 text-align: left;
		 line-height: 28px !important;
	 }
 
	 .odo-about-me .explore {
		 margin: 0;
	 }
 
	 .odo-about-me .responsive-container-block.Container {
		 justify-content: space-evenly;
	 }
 
	 .odo-about-me .purpleBox {
		 bottom: 10%;
	 }
 
	 .odo-about-me .responsive-container-block.Container.bottomContainer {
		 padding: 0;
		 max-width: 100%;
		 width: 100%;
	 }
 
	 .odo-about-me .allText.bottomText {
		 width: var(--odo-text-width, 40%);
	 }
 
	 .odo-about-me .purpleBox {
		 bottom: auto;
		 left: -10%;
		 top: 70%;
	 }
 
	 .odo-about-me .mainImg {
		 width: 100%;
	 }
 
	 .odo-about-me .text-blk.headingText {
		 text-align: left;
	 }
 }
 
 @media (max-width: 768px) {
	 .odo-about-me {
		 padding: 0 15px;
	 }
	 .odo-about-me .allText {
		 width: 100%;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 padding: 0;
	 }
 
	 .odo-about-me .responsive-container-block.Container {
		 flex-direction: column;
		 height: auto;
	 }
 
	 .odo-about-me .text-blk.headingText {
		 text-align: center;
	 }
 
	 .odo-about-me .text-blk.subHeadingText {
		 text-align: center;
		 font-size: 30px;
		 line-height: 38px;
	 }
 
	 .odo-about-me .allText.bottomText .odo-description-text,
	 .odo-about-me .allText.bottomText .odo-description-text p {
		 text-align: center;
		 line-height: 28px !important;
	 }
 
	 .odo-about-me .allText {
		 margin: 40px 0 0 0;
	 }
 
	 .odo-about-me .allText.aboveText {
		 margin: 40px 0 0 0;
	 }
 
	 .odo-about-me .responsive-container-block.Container {
		 margin: 80px 0 50px 0;
	 }
 
	 .odo-about-me .responsive-container-block.Container.bottomContainer {
		 margin: 50px 0 50px 0;
	 }
 
	 .odo-about-me .allText.bottomText {
		 margin: 40px 0 0 0;
	 }
 
	 .odo-about-me .mainImg {
		 width: 100%;
		 margin: 0 0 -70px 0;
	 }
 
	 .odo-about-me .responsive-container-block.Container.bottomContainer {
		 flex-direction: column;
	 }
 
	 .odo-about-me .ultimateImg {
		 width: 100%;
	 }
 
	 .odo-about-me .purpleBox {
		 position: static;
	 }
 
	 .odo-about-me .allText.bottomText {
		 width: 100%;
		 align-items: flex-start;
	 }
 
	 .odo-about-me .text-blk.headingText {
		 text-align: left;
	 }
 
	 .odo-about-me .text-blk.subHeadingText {
		 text-align: left;
	 }
 
	 .odo-about-me .allText.bottomText .odo-description-text,
	 .odo-about-me .allText.bottomText .odo-description-text p {
		 text-align: left;
	 }
 
	 .odo-about-me .ultimateImg {
		 position: static;
	 }
 
	 .odo-about-me .mainImg {
		 margin: 0;
	 }
 
	 .odo-about-me .ultimateImg {
		 position: relative;
	 }
 
	 .odo-about-me .purpleBox {
		 margin: 0;
		 position: absolute;
		 left: 0;
		 top: 80%;
	 }
 
	 .odo-about-me .allText.bottomText {
		 margin: 50px 0 0 0;
	 }
 
	 .odo-about-me .responsive-container-block.Container.bottomContainer {
		 margin: 50px 0 20px 0;
	 }
 }
 
 @media (max-width: 500px) {
	 .odo-about-me {
		 padding: 0 10px;
	 }
	 .odo-about-me .responsive-container-block.Container {
		 padding: 0;
		 width: 100%;
		 max-width: 100%;
	 }
 
	 .odo-about-me .mainImg {
		 width: 100%;
	 }
 
	 .odo-about-me .responsive-container-block.bigContainer {
		 padding: var(--odo-container-padding-top, 0) var(--odo-container-padding-right, 0) var(--odo-container-padding-bottom, 0) var(--odo-container-padding-left, 0);
	 }
 
	 .odo-about-me .text-blk.subHeadingText {
		 font-size: 28px;
		 padding: 0;
		 line-height: 36px;
	 }
 
	 .odo-about-me .allText.bottomText .odo-description-text,
	 .odo-about-me .allText.bottomText .odo-description-text p {
		 padding: 0;
		 line-height: 26px !important;
	 }
 
	 .odo-about-me .allText {
		 padding: 0;
		 width: 100%;
	 }
 
	 .odo-about-me .allText.bottomText {
		 margin: 30px 0 0 0;
		 padding: 0;
	 }
 
	 .odo-about-me .ultimateImg {
		 position: static;
	 }
 
	 .odo-about-me .purpleBox {
		 position: static;
	 }
 
	 .odo-about-me .stars {
		 width: 55%;
	 }
 
	 .odo-about-me .allText.bottomText {
		 margin: 45px 0 0 0;
	 }
 
	 .odo-about-me .responsive-container-block.Container.bottomContainer {
		 margin: 50px 0 15px 0;
	 }
 
	 .odo-about-me .allText.bottomText .odo-description-text p:last-child {
		 margin-bottom: 5px !important;
	 }
 
	 .odo-about-me .responsive-container-block.bigContainer {
		 padding: var(--odo-container-padding-top, 0) var(--odo-container-padding-right, 0) var(--odo-container-padding-bottom, 0) var(--odo-container-padding-left, 0);
	 }
 
	 .odo-about-me .purpleText {
		 font-size: 18px;
		 line-height: 26px;
	 }
 
	 .odo-about-me .explore {
		 padding: 12px 45px;
		 font-size: 18px;
		 line-height: 28px;
	 }
 }
 
 /* ============================================
	FAQ Element Styles
	============================================ */
 
 .odo-faq {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
	 margin: 50px 0;
 }
 
 .odo-faq-heading {
	 width: var(--odo-heading-width, 90%);
	 max-width: var(--odo-heading-max-width, 1400px);
	 min-width: var(--odo-heading-min-width, 300px);
	 margin-top: var(--odo-heading-margin-top, 0);
	 margin-bottom: var(--odo-heading-margin-bottom, 40px);
	 margin-left: var(--odo-heading-margin-left, auto);
	 margin-right: var(--odo-heading-margin-right, auto);
	 padding: var(--odo-heading-padding, 0);
	 color: var(--odo-heading-color, #000000);
	 font-size: var(--odo-heading-font-size, 48px);
	 font-family: var(--odo-heading-font-family, Lato, sans-serif);
	 font-weight: var(--odo-heading-font-weight, 700);
	 line-height: var(--odo-heading-line-height, 1.2);
	 text-align: var(--odo-heading-text-align, left) !important;
 }
 
 .odo-faq-wrapper {
	 width: var(--odo-container-width, 90%);
	 max-width: var(--odo-container-max-width, 1400px);
	 min-width: var(--odo-container-min-width, 300px);
 }
 
 .odo-faq-container {
	 background-color: transparent;
	 color: var(--odo-question-color, #000000);
	 border-radius: 20px;
	 box-shadow: 0 5px 10px 0 var(--odo-shadow-color, rgba(0,0,0,0.25));
	 margin-top: var(--odo-container-margin-top, 20px);
	 margin-bottom: var(--odo-container-margin-bottom, 20px);
	 margin-left: 0;
	 margin-right: 0;
	 overflow: hidden;
 }
 
 .odo-faq-question {
	 font-size: var(--odo-question-font-size, 1.2rem);
	 font-family: var(--odo-question-font-family, Lato, sans-serif);
	 font-weight: var(--odo-question-font-weight, 600);
	 color: var(--odo-question-color, #000000);
	 background-color: var(--odo-question-bg-color, #ffffff);
	 padding: var(--odo-question-padding, 20px 80px 20px 20px);
	 position: relative;
	 display: flex;
	 align-items: center;
	 cursor: pointer;
	 user-select: none;
	 border-radius: 20px 20px 0 0;
	 transition: background-color 0.3s ease;
 }
 
 .odo-faq-question:hover {
	 background-color: var(--odo-question-bg-color, #ffffff);
	 opacity: 0.95;
 }
 
 .odo-faq-question::after {
	 content: "\002B";
	 font-size: 2.2rem;
	 position: absolute;
	 right: 20px;
	 transition: 0.2s;
	 color: var(--odo-icon-color, #000000);
 }
 
 .odo-faq-question.active::after {
	 transform: rotate(45deg);
 }
 
 .odo-faq-answercont {
	 max-height: 0;
	 overflow: hidden;
	 transition: 0.3s;
	 background-color: var(--odo-answer-bg-color, #f5f5f5);
	 border-radius: 0 0 20px 20px;
	 border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .odo-faq-answer {
	 padding: var(--odo-answer-padding, 20px 20px 20px);
	 line-height: 1.6rem;
	 color: var(--odo-answer-color, #000000);
	 font-size: var(--odo-answer-font-size, 1rem);
	 font-family: var(--odo-answer-font-family, Lato, sans-serif);
	 background-color: var(--odo-answer-bg-color, #f5f5f5);
	 border-radius: 0 0 20px 20px;
 }
 
 .odo-faq-question.active + .odo-faq-answercont {
	 max-height: 1000px;
 }
 
 @media screen and (max-width: 1024px) and (min-width: 791px) {
	 .odo-faq-wrapper {
		 width: var(--odo-container-width-tablet, 85%);
		 max-width: var(--odo-container-max-width, 1400px);
		 min-width: var(--odo-container-min-width, 300px);
	 }
 }
 
 @media screen and (max-width: 790px) {
	 .odo-faq-wrapper {
		 width: var(--odo-container-width-mobile, 95%);
		 max-width: 100%;
		 min-width: var(--odo-container-min-width, 300px);
	 }
 }